All files / app/assets/javascripts/packages_and_registries/package_registry/components/list package_search.vue

93.55% Statements 29/31
64.29% Branches 9/14
100% Functions 11/11
93.55% Lines 29/31

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  2x 2x 2x 2x 2x 2x 2x       2x                               10x                     10x     11x 11x     10x         10x 10x             10x             10x         10x 10x 10x 10x 10x 10x       11x     11x     1x 1x     12x           80x                                  
<script>
import { s__ } from '~/locale';
import { sortableFields } from '~/packages_and_registries/package_registry/utils';
import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
import UrlSync from '~/vue_shared/components/url_sync.vue';
import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registries/shared/utils';
import {
  FILTERED_SEARCH_TERM,
  FILTERED_SEARCH_TYPE,
} from '~/packages_and_registries/shared/constants';
import PackageTypeToken from './tokens/package_type_token.vue';
 
export default {
  tokens: [
    {
      type: 'type',
      icon: 'package',
      title: s__('PackageRegistry|Type'),
      unique: true,
      token: PackageTypeToken,
      operators: OPERATOR_IS_ONLY,
    },
  ],
  components: { RegistrySearch, UrlSync },
  inject: ['isGroupPage'],
  data() {
    return {
      filters: [],
      sorting: {
        orderBy: 'name',
        sort: 'desc',
      },
      mountRegistrySearch: false,
    };
  },
  computed: {
    sortableFields() {
      return sortableFields(this.isGroupPage);
    },
    parsedSorting() {
      const cleanOrderBy = this.sorting?.orderBy.replace('_at', '');
      return `${cleanOrderBy}_${this.sorting?.sort}`.toUpperCase();
    },
    parsedFilters() {
      const parsed = {
        packageName: '',
        packageType: undefined,
      };
 
      return this.filters.reduce((acc, filter) => {
I        if (filter.type === FILTERED_SEARCH_TYPE && filter.value?.data) {
          return {
            ...acc,
            packageType: filter.value.data.toUpperCase(),
          };
        }
 
I        if (filter.type === FILTERED_SEARCH_TERM) {
          return {
            ...acc,
            packageName: `${acc.packageName} ${filter.value.data}`.trim(),
          };
        }
 
        return acc;
      }, parsed);
    },
  },
  mounted() {
    const queryParams = getQueryParams(window.document.location.search);
    const { sorting, filters } = extractFilterAndSorting(queryParams);
    this.updateSorting(sorting);
    this.updateFilters(filters);
    this.mountRegistrySearch = true;
    this.emitUpdate();
  },
  methods: {
    updateFilters(newValue) {
      this.filters = newValue;
    },
    updateSorting(newValue) {
      this.sorting = { ...this.sorting, ...newValue };
    },
    updateSortingAndEmitUpdate(newValue) {
      this.updateSorting(newValue);
      this.emitUpdate();
    },
    emitUpdate() {
      this.$emit('update', { sort: this.parsedSorting, filters: this.parsedFilters });
    },
  },
};
</script>
 
<template>
  <url-sync>
    <template #default="{ updateQuery }">
      <registry-search
        v-if="mountRegistrySearch"
        :filter="filters"
        :sorting="sorting"
        :tokens="$options.tokens"
        :sortable-fields="sortableFields"
        @sorting:changed="updateSortingAndEmitUpdate"
        @filter:changed="updateFilters"
        @filter:submit="emitUpdate"
        @query:changed="updateQuery"
      />
    </template>
  </url-sync>
</template>