diff --git a/src/components/form/Multiselect.tsx b/src/components/form/Multiselect.tsx index d2e72e8..4bb5d95 100644 --- a/src/components/form/Multiselect.tsx +++ b/src/components/form/Multiselect.tsx @@ -11,11 +11,20 @@ import { initFlowbite } from 'flowbite'; import { t } from '../../locale/labels'; import { getIcon } from '../icons'; +export type GroupedValues = { + key: string; + values: string[]; +}; + interface multiSelectInterface { id: string; label?: string; value: Signal; options: Signal; + multiLevel?: { + label: string; + options: Signal; + }[]; size?: 'm' | 'auto'; placeholder?: string; onChange$?: QRL; @@ -31,6 +40,7 @@ export const Multiselect = component$( label, value, options, + multiLevel, size, placeholder, onChange$, @@ -86,6 +96,14 @@ export const Multiselect = component$( return 'md:max-w-[300px] lg:max-w-[300px]'; }); + const updateMultiLevelValue = $((selectedValues: string[]) => { + if (selectedValues.every((v) => value.value.includes(v))) { + value.value = value.value.filter((val) => !selectedValues.includes(val)); + } else { + value.value = [...value.value, ...selectedValues]; + } + }); + useVisibleTask$(() => { initFlowbite(); }); @@ -147,6 +165,70 @@ export const Multiselect = component$( )} + {multiLevel && + multiLevel.map((item, index) => ( +
+ + +
+ ))}
    {options?.value.map((option, index) => (
  • { + const teamsMap: Record = usersSig.value.reduce( + (map, user) => { + if (!map[user.crew]) { + map[user.crew] = []; + } + map[user.crew].push(user.name); + return map; + }, + {} as Record + ); + + const teams: GroupedValues[] = Object.keys(teamsMap).map((teamName) => ({ + key: teamName, + values: teamsMap[teamName], + })); + + return teams; + }); + return (
    ;