All files / app/assets/javascripts/design_management/components/toolbar design_navigation.vue

62.5% Statements 10/16
33.33% Branches 1/3
81.81% Functions 9/11
71.42% Lines 10/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105                    5x                                             8x     3x     3x           3x   3x     3x   3x                             2x 2x                                                                        
<script>
import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
import {
  keysFor,
  ISSUE_PREVIOUS_DESIGN,
  ISSUE_NEXT_DESIGN,
} from '~/behaviors/shortcuts/keybindings';
import { Mousetrap } from '~/lib/mousetrap';
import { s__, sprintf } from '~/locale';
import allDesignsMixin from '../../mixins/all_designs';
import { DESIGN_ROUTE_NAME } from '../../router/constants';
 
export default {
  i18n: {
    nextButton: s__('DesignManagement|Go to next design'),
    previousButton: s__('DesignManagement|Go to previous design'),
  },
  components: {
    GlButton,
    GlButtonGroup,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  mixins: [allDesignsMixin],
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  computed: {
    designsCount() {
      return this.designs.length;
    },
    currentIndex() {
      return this.designs.findIndex((design) => design.filename === this.id);
    },
    paginationText() {
      return sprintf(s__('DesignManagement|%{current_design} of %{designs_count}'), {
        current_design: this.currentIndex + 1,
        designs_count: this.designsCount,
      });
    },
    previousDesign() {
      Iif (this.currentIndex === 0) return null;
 
      return this.designs[this.currentIndex - 1];
    },
    nextDesign() {
      Iif (this.currentIndex + 1 === this.designsCount) return null;
 
      return this.designs[this.currentIndex + 1];
    },
  },
  mounted() {
    Mousetrap.bind(keysFor(ISSUE_PREVIOUS_DESIGN), () =>
      this.navigateToDesign(this.previousDesign),
    );
    Mousetrap.bind(keysFor(ISSUE_NEXT_DESIGN), () => this.navigateToDesign(this.nextDesign));
  },
  beforeDestroy() {
    Mousetrap.unbind(keysFor(ISSUE_PREVIOUS_DESIGN));
    Mousetrap.unbind(keysFor(ISSUE_NEXT_DESIGN));
  },
  methods: {
    navigateToDesign(design) {
      if (design) {
        this.$router.push({
          name: DESIGN_ROUTE_NAME,
          params: { id: design.filename },
          query: this.$route.query,
        });
      }
    },
  },
};
</script>
 
<template>
  <div v-if="designsCount" class="gl-display-flex gl-align-items-center gl-flex-shrink-0">
    {{ paginationText }}
    <gl-button-group class="gl-ml-3">
      <gl-button
        v-gl-tooltip.bottom
        :disabled="!previousDesign"
        :title="$options.i18n.previousButton"
        :aria-label="$options.i18n.previousButton"
        icon="chevron-lg-left"
        class="js-previous-design"
        @click="navigateToDesign(previousDesign)"
      />
      <gl-button
        v-gl-tooltip.bottom
        :disabled="!nextDesign"
        :title="$options.i18n.nextButton"
        :aria-label="$options.i18n.nextButton"
        icon="chevron-lg-right"
        class="js-next-design"
        @click="navigateToDesign(nextDesign)"
      />
    </gl-button-group>
  </div>
</template>