opendesk

1<template>
2  <FadedScrollableDiv
3    class="quick-filters flex flex-1 items-center overflow-x-auto py-1 gap-2 pe-4 ps-1 -ms-1"
4    orientation="horizontal"
5    v-if="!quickFilters.loading"
6  >
7    <div
8      v-for="filter in quickFilters.data"
9      :key="filter.name"
10      class="min-w-36"
11    >
12      <QuickFilterField
13        :filter="filter"
14        :value="getValue(filter, list.params?.filters)"
15        @applyQuickFilter="(f, v) => applyQuickFilter(f, v)"
16      />
17    </div>
18  </FadedScrollableDiv>
19</template>
20
21<script setup>
22import { FadedScrollableDiv } from "@/components";
23import { inject } from "vue";
24import { normalizeFilters } from "@opendesk/shared/filter";
25import QuickFilterField from "./QuickFilterField.vue";
26
27const listViewData = inject("listViewData");
28const listViewActions = inject("listViewActions");
29const { list, quickFilters } = listViewData;
30
31const directValueFilterTypes = ["Check", "Select", "Link", "Date", "Datetime"];
32
33function applyQuickFilter(filter, value) {
34  const conditions = normalizeFilters(list.params?.filters).filter(
35    (condition) => condition[0] !== filter.name
36  );
37  if (value) {
38    if (directValueFilterTypes.includes(filter.type)) {
39      conditions.push([filter.name, "=", value]);
40    } else {
41      conditions.push([filter.name, "LIKE", `%${value}%`]);
42    }
43  }
44  listViewActions.applyFilters(conditions);
45}
46
47function getDefaultValue(quickFilter) {
48  return quickFilter.type === "Check" ? false : "";
49}
50
51function getValue(quickFilter, filters) {
52  if (!(quickFilter && quickFilter.name)) {
53    return getDefaultValue(quickFilter);
54  }
55  const condition = normalizeFilters(filters).find(
56    (c) => c[0] === quickFilter.name
57  );
58  if (!condition) {
59    return getDefaultValue(quickFilter);
60  }
61  const [, operator, value] = condition;
62  if (directValueFilterTypes.includes(quickFilter.type)) {
63    return operator === "=" ? value : getDefaultValue(quickFilter);
64  }
65  if (String(operator).toLowerCase() !== "like" || typeof value !== "string") {
66    return getDefaultValue(quickFilter);
67  }
68  return value.replaceAll("%", "");
69}
70</script>
71
72<style scoped>
73.quick-filters {
74  scrollbar-width: none; /* Firefox */
75  -ms-overflow-style: none; /* IE/Edge */
76}
77.quick-filters::-webkit-scrollbar {
78  display: none; /* Chrome/Safari */
79}
80</style>
81