feat: enhance dashboard CRUD functionality with support for boolean and multi-select fields; update related types and utilities

web/components/dashboard/crud/dashboard-crud-field-control.tsx

@@ -1,9 +1,25 @@
 "use client"
 
-import type { FieldError as HookFormFieldError } from "react-hook-form"
+import { useState } from "react"
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"
+import type {
+  FieldError as HookFormFieldError,
+  UseFormReturn,
+} from "react-hook-form"
 import { Controller, type Control, type UseFormRegister } from "react-hook-form"
 
 import { OptionCombobox } from "@/components/option-combobox"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
 import {
   Field,
   FieldContent,
@@ -11,31 +27,73 @@ import {
   FieldLabel,
 } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
+import { useI18n } from "@/i18n/provider"
 import { cn } from "@/lib/utils"
-import type { DashboardCrudFormField } from "./dashboard-crud-utils"
+import type {
+  DashboardCrudFormField,
+  DashboardCrudFormInputValue,
+  DashboardCrudFormOption,
+} from "./dashboard-crud-utils"
 
 export function DashboardCrudFieldControl<TItem>({
   field,
   control,
+  form,
   register,
   error,
 }: {
   field: DashboardCrudFormField<TItem>
-  control: Control<Record<string, string>>
-  register: UseFormRegister<Record<string, string>>
+  control: Control<Record<string, DashboardCrudFormInputValue>>
+  form: UseFormReturn<
+    Record<string, DashboardCrudFormInputValue>,
+    undefined,
+    Record<string, DashboardCrudFormInputValue>
+  >
+  register: UseFormRegister<Record<string, DashboardCrudFormInputValue>>
   error?: HookFormFieldError
 }) {
   const inputId = `dashboard-crud-field-${field.name}`
 
+  if (field.type === "section" || field.type === "group") {
+    return (
+      <div className="md:col-span-2">
+        <div className="border-t pt-4">
+          <div className="text-sm font-medium">{field.label}</div>
+          {field.description ? (
+            <div className="mt-1 text-sm text-muted-foreground">
+              {field.description}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <Field
       data-invalid={!!error}
       className={cn(
-        (field.colSpan === 2 || field.type === "textarea") && "md:col-span-2"
+        (field.colSpan === 2 ||
+          ["textarea", "json", "code", "custom"].includes(field.type ?? "")) &&
+          "md:col-span-2"
       )}
     >
-      <FieldLabel htmlFor={field.type === "select" ? undefined : inputId}>
+      <FieldLabel
+        htmlFor={
+          ["select", "multiSelect", "switch", "checkbox", "custom"].includes(
+            field.type ?? ""
+          )
+            ? undefined
+            : inputId
+        }
+      >
         {field.label}
       </FieldLabel>
       <FieldContent>
@@ -45,13 +103,77 @@ export function DashboardCrudFieldControl<TItem>({
             name={field.name}
             render={({ field: controllerField }) => (
               <OptionCombobox
-                value={controllerField.value}
+                value={String(controllerField.value ?? "")}
                 options={[...(field.options ?? [])]}
                 placeholder={field.placeholder ?? field.label}
                 onChange={controllerField.onChange}
               />
             )}
           />
+        ) : field.type === "multiSelect" ? (
+          <Controller
+            control={control}
+            name={field.name}
+            render={({ field: controllerField }) => (
+              <DashboardCrudMultiSelect
+                value={
+                  Array.isArray(controllerField.value)
+                    ? controllerField.value
+                    : []
+                }
+                options={[...(field.options ?? [])]}
+                placeholder={field.placeholder ?? field.label}
+                onChange={controllerField.onChange}
+              />
+            )}
+          />
+        ) : field.type === "switch" ? (
+          <Controller
+            control={control}
+            name={field.name}
+            render={({ field: controllerField }) => (
+              <Switch
+                checked={Boolean(controllerField.value)}
+                onCheckedChange={controllerField.onChange}
+                aria-label={field.label}
+              />
+            )}
+          />
+        ) : field.type === "checkbox" ? (
+          <Controller
+            control={control}
+            name={field.name}
+            render={({ field: controllerField }) => (
+              <label className="flex cursor-pointer items-center gap-2 text-sm">
+                <Checkbox
+                  checked={Boolean(controllerField.value)}
+                  onCheckedChange={controllerField.onChange}
+                  aria-label={field.label}
+                />
+                <span>{field.description ?? field.label}</span>
+              </label>
+            )}
+          />
+        ) : field.type === "custom" && field.render ? (
+          <Controller
+            control={control}
+            name={field.name}
+            render={({ field: controllerField }) => (
+              <>
+                {field.render?.({
+                  name: field.name,
+                  label: field.label,
+                  value: controllerField.value,
+                  values: form.watch(),
+                  setValue: (name, value) =>
+                    form.setValue(name, value, {
+                      shouldDirty: true,
+                      shouldValidate: true,
+                    }),
+                })}
+              </>
+            )}
+          />
         ) : field.type === "textarea" ? (
           <Textarea
             id={inputId}
@@ -60,10 +182,26 @@ export function DashboardCrudFieldControl<TItem>({
             aria-invalid={!!error}
             {...register(field.name)}
           />
+        ) : field.type === "json" || field.type === "code" ? (
+          <Textarea
+            id={inputId}
+            rows={field.rows ?? 8}
+            placeholder={field.placeholder}
+            aria-invalid={!!error}
+            spellCheck={false}
+            className="font-mono text-xs leading-5"
+            {...register(field.name)}
+          />
         ) : (
           <Input
             id={inputId}
-            type={field.type === "number" ? "number" : "text"}
+            type={
+              field.type === "number"
+                ? "number"
+                : field.type === "password"
+                  ? "password"
+                  : "text"
+            }
             min={field.type === "number" ? field.min : undefined}
             max={field.type === "number" ? field.max : undefined}
             step={field.type === "number" ? field.step : undefined}
@@ -72,8 +210,97 @@ export function DashboardCrudFieldControl<TItem>({
             {...register(field.name)}
           />
         )}
+        {field.description && field.type !== "checkbox" ? (
+          <div className="text-sm text-muted-foreground">{field.description}</div>
+        ) : null}
         <FieldError errors={error ? [error] : []} />
       </FieldContent>
     </Field>
   )
 }
+
+function DashboardCrudMultiSelect({
+  value,
+  options,
+  placeholder,
+  onChange,
+}: {
+  value: string[]
+  options: DashboardCrudFormOption[]
+  placeholder: string
+  onChange: (value: string[]) => void
+}) {
+  const t = useI18n()
+  const [open, setOpen] = useState(false)
+  const selectedOptions = options.filter((option) => value.includes(option.value))
+  const selectedText =
+    selectedOptions.length > 0
+      ? selectedOptions.map((option) => option.label).join(", ")
+      : placeholder
+
+  function toggleValue(nextValue: string) {
+    if (value.includes(nextValue)) {
+      onChange(value.filter((item) => item !== nextValue))
+      return
+    }
+    onChange([...value, nextValue])
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            className="w-full justify-between font-normal"
+          />
+        }
+      >
+        <span className="truncate">{selectedText}</span>
+        <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
+      </PopoverTrigger>
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+        <Command>
+          <CommandInput placeholder={t("common.searchKeyword")} />
+          <CommandList>
+            <CommandEmpty>{t("common.emptyOptions")}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const checked = value.includes(option.value)
+                return (
+                  <CommandItem
+                    key={option.value}
+                    value={`${option.label} ${option.value}`}
+                    onSelect={() => toggleValue(option.value)}
+                  >
+                    <CheckIcon
+                      className={cn(
+                        "mr-2 size-4 shrink-0",
+                        checked ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    <span className="truncate">{option.label}</span>
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+        {selectedOptions.length > 0 ? (
+          <div className="flex flex-wrap gap-1 border-t p-2">
+            {selectedOptions.slice(0, 8).map((option) => (
+              <Badge key={option.value} variant="secondary">
+                {option.label}
+              </Badge>
+            ))}
+            {selectedOptions.length > 8 ? (
+              <Badge variant="outline">+{selectedOptions.length - 8}</Badge>
+            ) : null}
+          </div>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  )
+}