@percepta/create 3.4.0 → 3.4.2

package/templates/webapp/src/app/(admin)/admin/_components/PrincipalMultiInput.tsx

@@ -1,248 +0,0 @@
-"use client";
-
-import {
-  Badge,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@percepta/design";
-import { useCallback, useMemo, useState, useTransition } from "react";
-
-export interface PrincipalOption {
-  readonly detail: string;
-  readonly disabled?: boolean;
-  readonly disabledReason?: string;
-  readonly label: string;
-  readonly subject: string;
-  readonly type: "Group" | "Principal" | "User";
-}
-
-interface HiddenField {
-  readonly name: string;
-  readonly value: string;
-}
-
-interface PrincipalMultiInputProps {
-  readonly action: (formData: FormData) => Promise<void>;
-  readonly disabled: boolean;
-  readonly hiddenFields?: readonly HiddenField[];
-  readonly options: readonly PrincipalOption[];
-  readonly selectedSubjects: readonly string[];
-}
-
-export function PrincipalMultiInput({
-  action,
-  disabled,
-  hiddenFields = [],
-  options,
-  selectedSubjects,
-}: PrincipalMultiInputProps) {
-  const [isPickerOpen, setIsPickerOpen] = useState(false);
-  const [isPending, startTransition] = useTransition();
-  const [query, setQuery] = useState("");
-  const [selected, setSelected] = useState<readonly string[]>(
-    selectedSubjects,
-  );
-  const optionBySubject = useMemo(
-    () => new Map(options.map((option) => [option.subject, option])),
-    [options],
-  );
-  const selectedSet = useMemo(() => new Set(selected), [selected]);
-  const normalizedQuery = query.trim().toLowerCase();
-
-  const selectedOptions = useMemo(
-    () =>
-      selected.map(
-        (subject): PrincipalOption =>
-          optionBySubject.get(subject) ?? {
-            detail: "Unknown principal",
-            label: subject,
-            subject,
-            type: "Principal",
-          },
-      ),
-    [optionBySubject, selected],
-  );
-
-  const filteredOptions = useMemo(
-    () =>
-      options.filter((option) => {
-        if (selectedSet.has(option.subject)) {
-          return false;
-        }
-
-        if (normalizedQuery.length === 0) {
-          return true;
-        }
-
-        return `${option.label} ${option.detail} ${option.type}`
-          .toLowerCase()
-          .includes(normalizedQuery);
-      }),
-    [normalizedQuery, options, selectedSet],
-  );
-
-  const submitSelection = useCallback(
-    (nextSelected: readonly string[]) => {
-      const formData = new FormData();
-      for (const field of hiddenFields) {
-        formData.append(field.name, field.value);
-      }
-      for (const subject of nextSelected) {
-        formData.append("subjects", subject);
-      }
-
-      startTransition(async () => {
-        await action(formData);
-      });
-    },
-    [action, hiddenFields],
-  );
-
-  const isDisabled = disabled || isPending;
-
-  const handleAddOption = useCallback(
-    (subject: string) => {
-      const option = optionBySubject.get(subject);
-      if (
-        isDisabled ||
-        option?.disabled === true ||
-        selected.includes(subject)
-      ) {
-        return;
-      }
-
-      const nextSelected = [...selected, subject];
-      setSelected(nextSelected);
-      submitSelection(nextSelected);
-      setQuery("");
-      setIsPickerOpen(false);
-    },
-    [isDisabled, optionBySubject, selected, submitSelection],
-  );
-
-  const handleRemoveOption = useCallback(
-    (subject: string) => {
-      if (isDisabled) {
-        return;
-      }
-
-      const nextSelected = selected.filter(
-        (currentSubject) => currentSubject !== subject,
-      );
-      setSelected(nextSelected);
-      submitSelection(nextSelected);
-    },
-    [isDisabled, selected, submitSelection],
-  );
-
-  return (
-    <Popover
-      open={isPickerOpen}
-      onOpenChange={(open) => {
-        if (!isDisabled) {
-          setIsPickerOpen(open);
-        }
-      }}
-    >
-      <PopoverTrigger asChild={true}>
-        <div
-          aria-busy={isPending}
-          aria-disabled={isDisabled}
-          className="flex min-h-12 cursor-text flex-wrap items-center gap-2 rounded-md border border-border bg-background p-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60"
-          data-disabled={isDisabled}
-          role="button"
-          tabIndex={isDisabled ? -1 : 0}
-        >
-          {selectedOptions.map((option) => (
-            <SelectedPrincipalBadge
-              disabled={isDisabled}
-              key={option.subject}
-              onRemove={handleRemoveOption}
-              option={option}
-            />
-          ))}
-          {selectedOptions.length === 0 ? (
-            <span className="min-w-40 flex-1 text-sm text-muted-foreground">
-              {isDisabled ? "No users or groups assigned" : "Search users or groups"}
-            </span>
-          ) : (
-            <span aria-hidden={true} className="min-w-8 flex-1" />
-          )}
-        </div>
-      </PopoverTrigger>
-      <PopoverContent align="start" className="w-96 p-0">
-        <Command shouldFilter={false}>
-          <CommandInput
-            onValueChange={setQuery}
-            placeholder="Search users or groups"
-            value={query}
-          />
-          <CommandList>
-            <CommandEmpty>No matches</CommandEmpty>
-            <CommandGroup>
-              {filteredOptions.map((option) => (
-                <CommandItem
-                  disabled={isDisabled || option.disabled === true}
-                  key={option.subject}
-                  onSelect={handleAddOption}
-                  title={option.disabledReason}
-                  value={option.subject}
-                >
-                  <span className="min-w-0 flex-1">
-                    <span className="block truncate font-medium text-foreground">
-                      {option.label}
-                    </span>
-                    <span className="block truncate text-xs text-muted-foreground">
-                      {option.detail} / {option.type}
-                    </span>
-                  </span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function SelectedPrincipalBadge({
-  disabled,
-  onRemove,
-  option,
-}: {
-  readonly disabled: boolean;
-  readonly onRemove: (subject: string) => void;
-  readonly option: PrincipalOption;
-}) {
-  const handleRemove = useCallback(() => {
-    onRemove(option.subject);
-  }, [onRemove, option.subject]);
-
-  return (
-    <span
-      className="max-w-full"
-      onClick={(event) => event.stopPropagation()}
-      onKeyDown={(event) => event.stopPropagation()}
-    >
-      <Badge
-        className="max-w-full gap-2 py-1 text-sm"
-        disabled={disabled}
-        onRemove={handleRemove}
-        variant="secondary"
-      >
-        <span className="truncate">{option.label}</span>
-        <span className="text-xs font-normal text-muted-foreground">
-          {option.type}
-        </span>
-      </Badge>
-    </span>
-  );
-}