app.vue 3.39 KB
Newer Older
1 2 3
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import AccessorUtilities from '~/lib/utils/accessor';
Clement Ho's avatar
Clement Ho committed
4
import { GlLoadingIcon } from '@gitlab/ui';
5 6 7 8 9 10 11 12 13 14 15 16 17
import eventHub from '../event_hub';
import store from '../store/';
import { FREQUENT_ITEMS, STORAGE_KEY } from '../constants';
import { isMobile, updateExistingFrequentItem } from '../utils';
import FrequentItemsSearchInput from './frequent_items_search_input.vue';
import FrequentItemsList from './frequent_items_list.vue';
import frequentItemsMixin from './frequent_items_mixin';

export default {
  store,
  components: {
    FrequentItemsSearchInput,
    FrequentItemsList,
18
    GlLoadingIcon,
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
  },
  mixins: [frequentItemsMixin],
  props: {
    currentUserName: {
      type: String,
      required: true,
    },
    currentItem: {
      type: Object,
      required: true,
    },
  },
  computed: {
    ...mapState(['searchQuery', 'isLoadingItems', 'isFetchFailed', 'items']),
    ...mapGetters(['hasSearchQuery']),
    translations() {
      return this.getTranslations(['loadingMessage', 'header']);
    },
  },
  created() {
    const { namespace, currentUserName, currentItem } = this;
    const storageKey = `${currentUserName}/${STORAGE_KEY[namespace]}`;

    this.setNamespace(namespace);
    this.setStorageKey(storageKey);

    if (currentItem.id) {
      this.logItemAccess(storageKey, currentItem);
    }

    eventHub.$on(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler);
  },
  beforeDestroy() {
    eventHub.$off(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler);
  },
  methods: {
    ...mapActions(['setNamespace', 'setStorageKey', 'fetchFrequentItems']),
    dropdownOpenHandler() {
      if (this.searchQuery === '' || isMobile()) {
        this.fetchFrequentItems();
      }
    },
    logItemAccess(storageKey, item) {
      if (!AccessorUtilities.isLocalStorageAccessSafe()) {
        return false;
      }

      // Check if there's any frequent items list set
      const storedRawItems = localStorage.getItem(storageKey);
      const storedFrequentItems = storedRawItems
        ? JSON.parse(storedRawItems)
        : [{ ...item, frequency: 1 }]; // No frequent items list set, set one up.

      // Check if item already exists in list
      const itemMatchIndex = storedFrequentItems.findIndex(
        frequentItem => frequentItem.id === item.id,
      );

      if (itemMatchIndex > -1) {
        storedFrequentItems[itemMatchIndex] = updateExistingFrequentItem(
          storedFrequentItems[itemMatchIndex],
          item,
        );
      } else {
        if (storedFrequentItems.length === FREQUENT_ITEMS.MAX_COUNT) {
          storedFrequentItems.shift();
        }

        storedFrequentItems.push({ ...item, frequency: 1 });
      }

      return localStorage.setItem(storageKey, JSON.stringify(storedFrequentItems));
    },
  },
};
</script>

<template>
  <div>
Mike Greiling's avatar
Mike Greiling committed
98
    <frequent-items-search-input :namespace="namespace" />
Clement Ho's avatar
Clement Ho committed
99
    <gl-loading-icon
100 101
      v-if="isLoadingItems"
      :label="translations.loadingMessage"
Clement Ho's avatar
Clement Ho committed
102
      :size="2"
103 104
      class="loading-animation prepend-top-20"
    />
Mike Greiling's avatar
Mike Greiling committed
105
    <div v-if="!isLoadingItems && !hasSearchQuery" class="section-header">
106 107 108 109 110 111 112 113 114 115 116 117
      {{ translations.header }}
    </div>
    <frequent-items-list
      v-if="!isLoadingItems"
      :items="items"
      :namespace="namespace"
      :has-search-query="hasSearchQuery"
      :is-fetch-failed="isFetchFailed"
      :matcher="searchQuery"
    />
  </div>
</template>