All files / app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue dropdown_contents_create_view.vue

100% Statements 11/11
60% Branches 3/5
100% Functions 9/9
100% Lines 11/11

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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120  21x 21x                         18x               21x     18x 396x           506x     505x     1x     1x                 639x                                                                                                                                        
<script>
import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex';
 
export default {
  components: {
    GlButton,
    GlFormInput,
    GlLink,
    GlLoadingIcon,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  data() {
    return {
      labelTitle: '',
      selectedColor: '',
    };
  },
  computed: {
    ...mapState(['labelsCreateTitle', 'labelCreateInProgress']),
    disableCreate() {
      return !this.labelTitle.length || !this.selectedColor.length || this.labelCreateInProgress;
    },
    suggestedColors() {
      const colorsMap = gon.suggested_label_colors;
      return Object.keys(colorsMap).map((color) => ({ [color]: colorsMap[color] }));
    },
  },
  methods: {
    ...mapActions(['toggleDropdownContents', 'toggleDropdownContentsCreateView', 'createLabel']),
    getColorCode(color) {
      return Object.keys(color).pop();
    },
    getColorName(color) {
      return Object.values(color).pop();
    },
    handleColorClick(color) {
      this.selectedColor = this.getColorCode(color);
    },
    handleCreateClick() {
      this.createLabel({
        title: this.labelTitle,
        color: this.selectedColor,
      });
    },
  },
};
</script>
 
<template>
  <div class="labels-select-contents-create js-labels-create">
    <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
      <gl-button
        :aria-label="__('Go back')"
        variant="link"
        size="small"
        class="js-btn-back dropdown-header-button p-0"
        icon="arrow-left"
        @click="toggleDropdownContentsCreateView"
      />
      <span class="flex-grow-1">{{ labelsCreateTitle }}</span>
      <gl-button
        :aria-label="__('Close')"
        variant="link"
        size="small"
        class="dropdown-header-button p-0"
        icon="close"
        @click="toggleDropdownContents"
      />
    </div>
    <div class="dropdown-input">
      <gl-form-input
        v-model.trim="labelTitle"
        :placeholder="__('Name new label')"
        :autofocus="true"
      />
    </div>
    <div class="dropdown-content px-2">
      <div class="suggest-colors suggest-colors-dropdown mt-0 mb-2">
        <gl-link
          v-for="(color, index) in suggestedColors"
          :key="index"
          v-gl-tooltip:tooltipcontainer
          :style="{ backgroundColor: getColorCode(color) }"
          :title="getColorName(color)"
          @click.prevent="handleColorClick(color)"
        />
      </div>
      <div class="color-input-container gl-display-flex">
        <span
          class="dropdown-label-color-preview position-relative position-relative d-inline-block"
          :style="{ backgroundColor: selectedColor }"
        ></span>
        <gl-form-input
          v-model.trim="selectedColor"
          class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
          :placeholder="__('Use custom color #FF0000')"
        />
      </div>
    </div>
    <div class="dropdown-actions clearfix pt-2 px-2">
      <gl-button
        :disabled="disableCreate"
        category="primary"
        variant="success"
        class="float-left d-flex align-items-center"
        @click="handleCreateClick"
      >
        <gl-loading-icon v-show="labelCreateInProgress" size="sm" :inline="true" class="mr-1" />
        {{ __('Create') }}
      </gl-button>
      <gl-button class="float-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView">
        {{ __('Cancel') }}
      </gl-button>
    </div>
  </div>
</template>