opendesk

1<template>
2  <div
3    class="flex w-full flex-1 justify-between h-full h-[420px] max-h-[420px] min-h-[420px]"
4  >
5    <!-- left box -->
6    <div class="flex-1 flex flex-col gap-1.5">
7      <span class="block text-xs text-ink-gray-5">
8        Select parent field value
9      </span>
10      <div
11        class="border border-outline-elevation-2 flex-1 border-e-0 rounded-s-4 p-2 flex flex-col gap-2"
12      >
13        <template v-if="state.selectedParentField">
14          <FormControl
15            v-model="state.parentSearch"
16            :placeholder="parentPlaceholder"
17            type="text"
18            class="w-full"
19          >
20            <template #prefix>
21              <LucideSearch class="h-4 w-4 text-ink-gray-4" />
22            </template>
23          </FormControl>
24          <div class="flex-1 overflow-y-auto hide-scrollbar basis-0">
25            <ul class="max-w-[350px] overflow-y-auto">
26              <li
27                v-for="value in filteredParentFieldValues"
28                :key="value"
29                class="py-2 mb-1 px-2.5 cursor-pointer rounded-4 flex justify-between items-center hover:bg-surface-gray-1 overflow-hidden max-w-full"
30                :class="{
31                  'bg-surface-gray-2 hover:bg-surface-gray-3':
32                    state.currentParentSelection === value,
33                }"
34                @click="handleParentValueClick(value)"
35              >
36                <span class="text-base text-ink-gray-6 max-w-[90%] truncate">{{
37                  value
38                }}</span>
39                <LucideChevronRight
40                  class="h-4 w-4 text-ink-gray-6 rtl:rotate-180"
41                  v-if="
42                    getSelectedChildValueCount(value) === 0 ||
43                    state.currentParentSelection === value
44                  "
45                />
46                <Badge
47                  v-else
48                  :label="getSelectedChildValueCount(value)"
49                  :theme="'gray'"
50                  variant="subtle"
51                  class="!h-4"
52                />
53              </li>
54            </ul>
55          </div>
56        </template>
57        <template v-else>
58          <div
59            class="flex flex-col items-center mt-20 h-full text-ink-gray-4 text-sm"
60          >
61            Please select a parent field first
62          </div>
63        </template>
64      </div>
65    </div>
66    <!-- right box -->
67    <div class="flex-1 flex flex-col gap-1.5">
68      <span class="block text-xs text-ink-gray-5 ps-1.5">
69        Select child field value
70      </span>
71      <div
72        class="border border-outline-elevation-2 flex-1 rounded-e-4 p-2 flex flex-col gap-2"
73      >
74        <template
75          v-if="state.selectedChildField && state.currentParentSelection"
76        >
77          <FormControl
78            v-model="state.childSearch"
79            :placeholder="childPlaceholder"
80            type="text"
81            class="w-full"
82          >
83            <template #prefix>
84              <LucideSearch class="h-4 w-4 text-ink-gray-4" />
85            </template>
86          </FormControl>
87          <div class="flex-1 overflow-y-auto hide-scrollbar basis-0">
88            <!-- Master Check box -->
89            <li
90              class="py-2 mb-1 px-2.5 cursor-pointer rounded-4 flex items-center bg-surface-gray-1 hover:bg-surface-gray-2"
91              @click="handleSelectAllChildValues(!toggleAllChildValues)"
92            >
93              <FormControl
94                type="checkbox"
95                :model-value="toggleAllChildValues"
96                class="me-4"
97              />
98              <span class="text-base-medium text-ink-gray-8">
99                {{ toggleCheckboxLabel }}
100              </span>
101            </li>
102            <ul class="max-w-[350px] overflow-y-auto">
103              <li
104                v-for="value in filteredChildFieldValues"
105                :key="value"
106                class="py-2 mb-1 px-2.5 cursor-pointer rounded-4 flex items-center hover:bg-surface-gray-1 max-w-full truncate"
107                @click="handleChildValueClick(value)"
108              >
109                <FormControl
110                  type="checkbox"
111                  :model-value="isChildValueSelected(value)"
112                  class="me-4"
113                />
114                <span class="text-base text-ink-gray-6">{{ value }}</span>
115              </li>
116            </ul>
117          </div>
118        </template>
119        <template v-else-if="!state.selectedChildField">
120          <div
121            class="flex flex-col items-center mt-20 h-full text-ink-gray-4 text-sm"
122          >
123            Please select a child field first
124          </div>
125        </template>
126        <template v-else>
127          <div
128            class="flex flex-col items-center mt-20 h-full text-ink-gray-4 text-sm"
129          >
130            Please select a parent value first
131          </div>
132        </template>
133      </div>
134    </div>
135  </div>
136</template>
137
138<script setup lang="ts">
139import { FieldCriteriaState } from "@/types";
140import { computed } from "vue";
141
142const props = defineProps<{
143  isNew: boolean;
144  parentFields: any[];
145}>();
146
147const state = defineModel<FieldCriteriaState>();
148
149const filteredParentFieldValues = computed(() => {
150  if (!state.value.parentSearch) return state.value.parentFieldValues;
151  return state.value.parentFieldValues.filter((v) =>
152    v.toLowerCase().includes(state.value.parentSearch.toLowerCase())
153  );
154});
155
156// Order values that were already selected when the screen loaded to the top.
157// Uses the saved selections (not the live ones) so the list stays put while
158// the user is checking/unchecking values.
159const orderedChildFieldValues = computed(() => {
160  const parent = state.value.currentParentSelection;
161  const initialSelections = state.value.initialChildSelections?.[parent];
162  const values = state.value.childFieldValues;
163  if (!(initialSelections instanceof Set) || initialSelections.size === 0) {
164    return values;
165  }
166  const selected = [];
167  const unselected = [];
168  values.forEach((value) => {
169    (initialSelections.has(value) ? selected : unselected).push(value);
170  });
171  return [...selected, ...unselected];
172});
173
174const filteredChildFieldValues = computed(() => {
175  if (!state.value.childSearch) return orderedChildFieldValues.value;
176  return orderedChildFieldValues.value.filter((v) =>
177    v.toLowerCase().includes(state.value.childSearch.toLowerCase())
178  );
179});
180
181const parentPlaceholder = computed(() => {
182  if (!state.value.selectedParentField) return "Search values";
183  let label = props.parentFields.find(
184    (f) => f.value === state.value.selectedParentField
185  )?.label;
186  return `Search ${label} values`;
187});
188const childPlaceholder = computed(() => {
189  if (!state.value.currentParentSelection) return "Search values";
190  return `Search ${state.value.currentParentSelection} values`;
191});
192
193function handleParentValueClick(value: string) {
194  state.value.currentParentSelection = value;
195}
196
197function handleChildValueClick(childValue: string) {
198  const parent = state.value.currentParentSelection;
199  if (!parent) return;
200  if (!(state.value.childSelections[parent] instanceof Set)) {
201    state.value.childSelections[parent] = new Set();
202  }
203  if (state.value.childSelections[parent].has(childValue)) {
204    state.value.childSelections[parent].delete(childValue);
205  } else {
206    state.value.childSelections[parent].add(childValue);
207  }
208}
209
210function getSelectedChildValueCount(parent: string) {
211  const selectedCount =
212    state.value.childSelections[parent] instanceof Set
213      ? state.value.childSelections[parent].size
214      : 0;
215  return selectedCount;
216}
217
218// Toggling master checkbox + child values
219const toggleAllChildValues = computed({
220  get() {
221    const parent = state.value.currentParentSelection;
222    if (!parent) return false;
223    // If no child values are selected, return false
224    if (!(state.value.childSelections[parent] instanceof Set)) {
225      return false;
226    }
227    // If all filtered child values are selected, return true
228    return (
229      state.value.childSelections[parent].size ===
230      filteredChildFieldValues.value.length
231    );
232  },
233  set(value) {
234    handleSelectAllChildValues(value);
235  },
236});
237
238const toggleCheckboxLabel = computed(() => {
239  const parent = state.value.currentParentSelection;
240  if (!parent) return "Select All";
241  const selectedCount = getSelectedChildValueCount(parent);
242  if (selectedCount === 0) return "Select All";
243  return `${selectedCount} ${
244    selectedCount === 1 ? "value" : "values"
245  } selected`;
246});
247
248function handleSelectAllChildValues(value: boolean) {
249  const parent = state.value.currentParentSelection;
250  if (!parent) return;
251
252  if (!(state.value.childSelections[parent] instanceof Set)) {
253    state.value.childSelections[parent] = new Set();
254  }
255
256  if (value) {
257    // Select all child values
258    filteredChildFieldValues.value.forEach((childValue) => {
259      state.value.childSelections[parent].add(childValue);
260    });
261  } else {
262    // Deselect all child values
263    state.value.childSelections[parent].clear();
264  }
265}
266
267function isChildValueSelected(childValue: string) {
268  const parent = state.value.currentParentSelection;
269  return (
270    state.value.childSelections[parent] instanceof Set &&
271    state.value.childSelections[parent].has(childValue)
272  );
273}
274</script>
275
276<style scoped></style>
277