All files / app/assets/javascripts/ide/components/merge_requests list.vue

7.14% Statements 1/14
0% Branches 0/9
0% Functions 0/12
7.14% Lines 1/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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136                    7x                                                                                                                                                                                                                                                          
<!-- eslint-disable vue/multi-word-component-names -->
<script>
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { debounce } from 'lodash';
// eslint-disable-next-line no-restricted-imports
import { mapActions, mapState } from 'vuex';
import { __ } from '~/locale';
import TokenedInput from '../shared/tokened_input.vue';
import Item from './item.vue';
 
const SEARCH_TYPES = [
  { type: 'created', label: __('Created by me') },
  { type: 'assigned', label: __('Assigned to me') },
];
 
export default {
  components: {
    TokenedInput,
    Item,
    GlIcon,
    GlLoadingIcon,
  },
  data() {
    return {
      search: '',
      currentSearchType: null,
      hasSearchFocus: false,
    };
  },
  computed: {
    ...mapState('mergeRequests', ['mergeRequests', 'isLoading']),
    ...mapState(['currentMergeRequestId', 'currentProjectId']),
    hasMergeRequests() {
      return this.mergeRequests.length !== 0;
    },
    hasNoSearchResults() {
      return this.search !== '' && !this.hasMergeRequests;
    },
    showSearchTypes() {
      return this.hasSearchFocus && !this.search && !this.currentSearchType;
    },
    type() {
      return this.currentSearchType ? this.currentSearchType.type : '';
    },
    searchTokens() {
      return this.currentSearchType ? [this.currentSearchType] : [];
    },
  },
  watch: {
    search() {
      // When the search is updated, let's turn off this flag to hide the search types
      this.hasSearchFocus = false;
    },
  },
  mounted() {
    this.loadMergeRequests();
  },
  methods: {
    ...mapActions('mergeRequests', ['fetchMergeRequests']),
    loadMergeRequests() {
      this.fetchMergeRequests({ type: this.type, search: this.search });
    },
    searchMergeRequests: debounce(function debounceSearch() {
      this.loadMergeRequests();
    }, 250),
    onSearchFocus() {
      this.hasSearchFocus = true;
    },
    setSearchType(searchType) {
      this.currentSearchType = searchType;
      this.loadMergeRequests();
    },
  },
  searchTypes: SEARCH_TYPES,
};
</script>
 
<template>
  <div>
    <label
      class="dropdown-input gl-pt-3 gl-pb-5 gl-mb-0 gl-border-b-1 gl-border-b-solid gl-display-block"
      @click.stop
    >
      <tokened-input
        v-model="search"
        :tokens="searchTokens"
        :placeholder="__('Search merge requests')"
        @focus="onSearchFocus"
        @input="searchMergeRequests"
        @removeToken="setSearchType(null)"
      />
      <gl-icon :size="16" name="search" class="ml-3 input-icon" />
    </label>
    <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
      <gl-loading-icon
        v-if="isLoading"
        size="lg"
        class="mt-3 mb-3 align-self-center ml-auto mr-auto"
      />
      <template v-else>
        <ul class="mb-0 gl-w-full">
          <template v-if="showSearchTypes">
            <li v-for="searchType in $options.searchTypes" :key="searchType.type">
              <button
                type="button"
                class="btn-link d-flex gl-align-items-center"
                @click.stop="setSearchType(searchType)"
              >
                <span class="d-flex gl-mr-3 ide-search-list-current-icon">
                  <gl-icon :size="16" name="search" />
                </span>
                <span>{{ searchType.label }}</span>
              </button>
            </li>
          </template>
          <template v-else-if="hasMergeRequests">
            <li v-for="item in mergeRequests" :key="item.id">
              <item
                :item="item"
                :current-id="currentMergeRequestId"
                :current-project-id="currentProjectId"
              />
            </li>
          </template>
          <li
            v-else
            class="ide-search-list-empty d-flex gl-align-items-center justify-content-center"
          >
            {{ __('No merge requests found') }}
          </li>
        </ul>
      </template>
    </div>
  </div>
</template>