Relation picker module (#335)

- Created a relation picker module - Added a CustomeEntityForSelect type
2023-06-20 11:06:53 +02:00
parent c120903a45
commit e2eb40c1ea
9 changed files with 64 additions and 50 deletions
--- a/front/src/modules/relation-picker/components/MultipleEntitySelect.tsx
+++ b/front/src/modules/relation-picker/components/MultipleEntitySelect.tsx
@ -0,0 +1,86 @@
+import { debounce } from 'lodash';
+
+import { EntityForSelect } from '@/relation-picker/types/EntityForSelect';
+import { DropdownMenu } from '@/ui/components/menu/DropdownMenu';
+import { DropdownMenuCheckableItem } from '@/ui/components/menu/DropdownMenuCheckableItem';
+import { DropdownMenuItem } from '@/ui/components/menu/DropdownMenuItem';
+import { DropdownMenuItemContainer } from '@/ui/components/menu/DropdownMenuItemContainer';
+import { DropdownMenuSearch } from '@/ui/components/menu/DropdownMenuSearch';
+import { DropdownMenuSeparator } from '@/ui/components/menu/DropdownMenuSeparator';
+import { Avatar } from '@/users/components/Avatar';
+
+export type EntitiesForMultipleEntitySelect<
+  CustomEntityForSelect extends EntityForSelect,
+> = {
+  selectedEntities: CustomEntityForSelect[];
+  filteredSelectedEntities: CustomEntityForSelect[];
+  entitiesToSelect: CustomEntityForSelect[];
+};
+
+export function MultipleEntitySelect<
+  CustomEntityForSelect extends EntityForSelect,
+>({
+  entities,
+  onItemCheckChange,
+  onSearchFilterChange,
+  searchFilter,
+}: {
+  entities: EntitiesForMultipleEntitySelect<CustomEntityForSelect>;
+  searchFilter: string;
+  onSearchFilterChange: (newSearchFilter: string) => void;
+  onItemCheckChange: (
+    newCheckedValue: boolean,
+    entity: CustomEntityForSelect,
+  ) => void;
+}) {
+  const debouncedSetSearchFilter = debounce(onSearchFilterChange, 100, {
+    leading: true,
+  });
+
+  function handleFilterChange(event: React.ChangeEvent<HTMLInputElement>) {
+    debouncedSetSearchFilter(event.currentTarget.value);
+    onSearchFilterChange(event.currentTarget.value);
+  }
+
+  const entitiesInDropdown = [
+    ...(entities.filteredSelectedEntities ?? []),
+    ...(entities.entitiesToSelect ?? []),
+  ];
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuSearch
+        value={searchFilter}
+        onChange={handleFilterChange}
+        autoFocus
+      />
+      <DropdownMenuSeparator />
+      <DropdownMenuItemContainer>
+        {entitiesInDropdown?.map((entity) => (
+          <DropdownMenuCheckableItem
+            key={entity.id}
+            checked={
+              entities.selectedEntities
+                ?.map((selectedEntity) => selectedEntity.id)
+                ?.includes(entity.id) ?? false
+            }
+            onChange={(newCheckedValue) =>
+              onItemCheckChange(newCheckedValue, entity)
+            }
+          >
+            <Avatar
+              avatarUrl={entity.avatarUrl}
+              placeholder={entity.name}
+              size={16}
+              type={entity.avatarType ?? 'rounded'}
+            />
+            {entity.name}
+          </DropdownMenuCheckableItem>
+        ))}
+        {entitiesInDropdown?.length === 0 && (
+          <DropdownMenuItem>No result</DropdownMenuItem>
+        )}
+      </DropdownMenuItemContainer>
+    </DropdownMenu>
+  );
+}