@hed-hog/core 0.0.350 → 0.0.353

package/hedhog/frontend/app/setting-list/page.tsx.ejs

@@ -1,5 +1,20 @@
 'use client';
 
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import {
   EmptyState,
   Page,
@@ -17,6 +32,18 @@ import {
 } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { PaginatedResult } from '@/types/pagination-result';
 import {
   Setting,
@@ -26,7 +53,9 @@ import {
 } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
+  GripVertical,
   ListTree,
+  Pencil,
   Plus,
   Save,
   Settings2,
@@ -34,8 +63,7 @@ import {
   Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
-import { SettingField } from '../configurations/[slug]/components/setting-field';
+import { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
 
 type SettingWithList = Setting & {
   subgroup_id?: number | null;
@@ -55,6 +83,11 @@ type SubgroupSection = {
   settings: SettingWithList[];
 };
 
+type DraftOption = {
+  id: string;
+  value: string;
+};
+
 const createEmptyPage = <T,>(pageSize: number): PaginatedResult<T> => ({
   total: 0,
   lastPage: 0,
@@ -71,12 +104,24 @@ export default function CoreSettingListPage() {
   const [search, setSearch] = useState('');
   const [activeGroupSlug, setActiveGroupSlug] = useState<string>('all');
   const [activeSubgroupSlug, setActiveSubgroupSlug] = useState<string>('all');
-  const [optionsDraftBySettingId, setOptionsDraftBySettingId] = useState<
-    Record<number, string[]>
-  >({});
   const [savingOptionBySettingId, setSavingOptionBySettingId] = useState<
     Record<number, boolean>
   >({});
+  const [editingSettingId, setEditingSettingId] = useState<number | null>(null);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [sheetDraftOptions, setSheetDraftOptions] = useState<DraftOption[]>([]);
+  const draftIdRef = useRef(0);
+
+  const createDraftOption = (value = ''): DraftOption => {
+    draftIdRef.current += 1;
+    return { id: `draft-option-${draftIdRef.current}`, value };
+  };
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 6 },
+    })
+  );
 
   const { data: groupsPage } = useQuery<PaginatedResult<SettingGroup>>({
     queryKey: ['core-setting-list-groups', currentLocaleCode],
@@ -155,25 +200,6 @@ export default function CoreSettingListPage() {
     [allSettings]
   );
 
-  useEffect(() => {
-    setOptionsDraftBySettingId((previous) => {
-      const next = { ...previous };
-      for (const setting of listTypeSettings) {
-        if (!setting.id) {
-          continue;
-        }
-
-        if (next[setting.id] === undefined) {
-          next[setting.id] = [...(setting.setting_list ?? [])]
-            .sort((left, right) => (left.order ?? 0) - (right.order ?? 0))
-            .map((option) => option.value);
-        }
-      }
-
-      return next;
-    });
-  }, [listTypeSettings]);
-
   const subgroupOptions = useMemo(() => {
     const map = new Map<
       string,
@@ -328,38 +354,65 @@ export default function CoreSettingListPage() {
     [activeGroupSlug, activeSubgroupSlug, groups, subgroupOptions, t]
   );
 
-  const updateOptionDraft = (
-    settingId: number,
-    nextValues: string[] | ((previous: string[]) => string[])
-  ) => {
-    setOptionsDraftBySettingId((previous) => {
-      const currentValues = previous[settingId] ?? [];
-      const values =
-        typeof nextValues === 'function'
-          ? nextValues(currentValues)
-          : nextValues;
-
-      return {
-        ...previous,
-        [settingId]: values,
-      };
+  const editingSetting = useMemo(
+    () =>
+      editingSettingId == null
+        ? null
+        : (listTypeSettings.find(
+            (setting) => setting.id === editingSettingId
+          ) ?? null),
+    [editingSettingId, listTypeSettings]
+  );
+
+  const openSheetForSetting = (setting: SettingWithList) => {
+    if (setting.id == null) {
+      return;
+    }
+
+    const sortedOptions = [...(setting.setting_list ?? [])].sort(
+      (left, right) => (left.order ?? 0) - (right.order ?? 0)
+    );
+
+    setEditingSettingId(setting.id);
+    setSheetDraftOptions(
+      sortedOptions.map((option) => createDraftOption(option.value))
+    );
+    setSheetOpen(true);
+  };
+
+  const handleSheetDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    setSheetDraftOptions((previous) => {
+      const oldIndex = previous.findIndex((item) => item.id === active.id);
+      const newIndex = previous.findIndex((item) => item.id === over.id);
+
+      if (oldIndex < 0 || newIndex < 0) {
+        return previous;
+      }
+
+      return arrayMove(previous, oldIndex, newIndex);
     });
   };
 
   const saveSettingOptions = async (
     setting: SettingWithList,
-    overrideValues?: string[]
+    overrideValues?: string[],
+    successMessageKey:
+      | 'optionsSavedSuccess'
+      | 'optionsClearedSuccess' = 'optionsSavedSuccess',
+    errorMessageKey:
+      | 'optionsSavedError'
+      | 'optionsClearedError' = 'optionsSavedError'
   ) => {
     const settingId = setting.id;
     if (!settingId) {
       return;
     }
 
-    const values = (
-      overrideValues ??
-      optionsDraftBySettingId[settingId] ??
-      []
-    ).map((value) => value.trim());
+    const values = (overrideValues ?? []).map((value) => value.trim());
 
     setSavingOptionBySettingId((previous) => ({
       ...previous,
@@ -378,18 +431,10 @@ export default function CoreSettingListPage() {
         },
       });
 
-      showToastHandler('success', t('optionsSavedSuccess'));
+      showToastHandler('success', t(successMessageKey));
       await refetch();
-
-      setOptionsDraftBySettingId((previous) => {
-        const updatedValues = values.filter((value) => value.length > 0);
-        return {
-          ...previous,
-          [settingId]: updatedValues,
-        };
-      });
     } catch (_error) {
-      showToastHandler('error', t('optionsSavedError'));
+      showToastHandler('error', t(errorMessageKey));
     } finally {
       setSavingOptionBySettingId((previous) => ({
         ...previous,
@@ -398,6 +443,44 @@ export default function CoreSettingListPage() {
     }
   };
 
+  const handleSaveSheet = async () => {
+    if (!editingSetting) {
+      return;
+    }
+
+    const values = sheetDraftOptions.map((option) => option.value);
+    await saveSettingOptions(editingSetting, values);
+    setSheetOpen(false);
+    setEditingSettingId(null);
+  };
+
+  const handleClearOptions = async (setting: SettingWithList) => {
+    await saveSettingOptions(
+      setting,
+      [],
+      'optionsClearedSuccess',
+      'optionsClearedError'
+    );
+  };
+
+  const addSheetOption = () => {
+    setSheetDraftOptions((previous) => [...previous, createDraftOption('')]);
+  };
+
+  const removeSheetOption = (draftId: string) => {
+    setSheetDraftOptions((previous) =>
+      previous.filter((option) => option.id !== draftId)
+    );
+  };
+
+  const updateSheetOption = (draftId: string, value: string) => {
+    setSheetDraftOptions((previous) =>
+      previous.map((option) =>
+        option.id === draftId ? { ...option, value } : option
+      )
+    );
+  };
+
   return (
     <Page>
       <PageHeader
@@ -508,133 +591,63 @@ export default function CoreSettingListPage() {
               <CardContent className="space-y-4">
                 {section.settings.map((setting: SettingWithList) => {
                   const settingId = setting.id;
-                  const options = [...(setting.setting_list ?? [])].sort(
-                    (left, right) => (left.order ?? 0) - (right.order ?? 0)
-                  );
-                  const optionDraft =
-                    settingId != null
-                      ? (optionsDraftBySettingId[settingId] ??
-                        options.map((option) => option.value))
-                      : options.map((option) => option.value);
                   const isSaving =
                     settingId != null
                       ? savingOptionBySettingId[settingId] === true
                       : false;
+                  const optionsCount = setting.setting_list?.length ?? 0;
 
                   return (
                     <div
                       key={setting.id}
-                      className="space-y-2 border-b border-border/60 pb-4 last:border-0 last:pb-0"
+                      className="flex items-center justify-between gap-3 border-b border-border/60 pb-3 last:border-0 last:pb-0"
                     >
-                      <div className="flex flex-wrap items-start justify-between gap-3">
-                        <div className="min-w-0 flex-1 space-y-1">
-                          <p className="text-sm font-semibold text-foreground">
-                            {setting.name}
-                          </p>
-                          <p className="text-sm text-muted-foreground">
-                            {setting.description}
-                          </p>
-                          <Badge
-                            variant="outline"
-                            className="font-mono text-xs"
-                          >
-                            {setting.slug}
-                          </Badge>
-                        </div>
-
-                        <div className="w-full sm:w-auto sm:min-w-80">
-                          <SettingField setting={setting} className="w-full" />
-                        </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-sm font-semibold text-foreground">
+                          {setting.name}
+                        </p>
                       </div>
 
-                      <div className="space-y-2">
-                        <div className="flex items-center justify-between gap-2">
-                          <p className="text-xs font-medium text-muted-foreground">
-                            {t('optionsSectionTitle')}
-                          </p>
-                          <Button
-                            type="button"
-                            size="sm"
-                            variant="outline"
-                            onClick={() => {
-                              if (settingId == null) return;
-                              updateOptionDraft(settingId, (previous) => [
-                                ...previous,
-                                '',
-                              ]);
-                            }}
-                          >
-                            <Plus className="mr-1 h-3.5 w-3.5" />
-                            {t('actions.addOption')}
-                          </Button>
-                        </div>
-
-                        {optionDraft.length === 0 ? (
-                          <p className="text-xs text-muted-foreground">
-                            {t('emptyOptions')}
-                          </p>
-                        ) : (
-                          <div className="space-y-2">
-                            {optionDraft.map((optionValue, index) => (
-                              <div
-                                key={`${settingId ?? 'setting'}-option-${index}`}
-                                className="flex items-center gap-2"
-                              >
-                                <Input
-                                  value={optionValue}
-                                  onChange={(event) => {
-                                    if (settingId == null) return;
-                                    const nextValue = event.target.value;
-                                    updateOptionDraft(settingId, (previous) =>
-                                      previous.map((value, currentIndex) =>
-                                        currentIndex === index
-                                          ? nextValue
-                                          : value
-                                      )
-                                    );
-                                  }}
-                                  placeholder={t('optionPlaceholder')}
-                                  className="bg-background"
-                                />
-                                <Button
-                                  type="button"
-                                  size="icon"
-                                  variant="ghost"
-                                  onClick={async () => {
-                                    if (settingId == null) return;
-                                    const nextValues = optionDraft.filter(
-                                      (_, currentIndex) =>
-                                        currentIndex !== index
-                                    );
-                                    updateOptionDraft(settingId, nextValues);
-                                    await saveSettingOptions(
-                                      setting,
-                                      nextValues
-                                    );
-                                  }}
-                                  disabled={isSaving}
-                                  aria-label={t('actions.removeOption')}
-                                >
-                                  <Trash2 className="h-4 w-4" />
-                                </Button>
-                              </div>
-                            ))}
-                          </div>
-                        )}
-
-                        <div className="flex justify-end">
-                          <Button
-                            type="button"
-                            size="sm"
-                            onClick={() => saveSettingOptions(setting)}
-                            disabled={isSaving || settingId == null}
-                          >
-                            <Save className="mr-1 h-3.5 w-3.5" />
-                            {isSaving
-                              ? t('actions.saving')
-                              : t('actions.saveOptions')}
-                          </Button>
-                        </div>
+                      <div className="flex items-center gap-2">
+                        <Badge variant="secondary">
+                          {t('itemCount', { count: optionsCount })}
+                        </Badge>
+
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="button"
+                              size="icon"
+                              variant="ghost"
+                              onClick={() => openSheetForSetting(setting)}
+                              disabled={settingId == null || isSaving}
+                              aria-label={t('actions.editOptions')}
+                            >
+                              <Pencil className="h-4 w-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>{t('actions.editOptions')}</p>
+                          </TooltipContent>
+                        </Tooltip>
+
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="button"
+                              size="icon"
+                              variant="ghost"
+                              onClick={() => handleClearOptions(setting)}
+                              disabled={settingId == null || isSaving}
+                              aria-label={t('actions.clearOptions')}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>{t('actions.clearOptions')}</p>
+                          </TooltipContent>
+                        </Tooltip>
                       </div>
                     </div>
                   );
@@ -644,6 +657,166 @@ export default function CoreSettingListPage() {
           ))}
         </div>
       )}
+
+      <Sheet
+        open={sheetOpen}
+        onOpenChange={(open) => {
+          setSheetOpen(open);
+          if (!open) {
+            setEditingSettingId(null);
+            setSheetDraftOptions([]);
+          }
+        }}
+      >
+        <ResizableSheetContent
+          sheetId="core-setting-list-options-sheet"
+          defaultWidth={768}
+          minWidth={520}
+          maxWidth={1100}
+          className="w-full overflow-y-auto sm:max-w-2xl"
+        >
+          <SheetHeader>
+            <SheetTitle>{t('sheet.title')}</SheetTitle>
+            <SheetDescription>
+              {editingSetting
+                ? t('sheet.description', { name: editingSetting.name ?? '' })
+                : t('sheet.descriptionFallback')}
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="mt-6 space-y-4">
+            <div className="flex items-center justify-between gap-2">
+              <Badge variant="secondary">
+                {t('itemCount', { count: sheetDraftOptions.length })}
+              </Badge>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={addSheetOption}
+              >
+                <Plus className="mr-1 h-3.5 w-3.5" />
+                {t('actions.addOption')}
+              </Button>
+            </div>
+
+            {sheetDraftOptions.length === 0 ? (
+              <p className="text-sm text-muted-foreground">
+                {t('emptyOptions')}
+              </p>
+            ) : (
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleSheetDragEnd}
+              >
+                <SortableContext
+                  items={sheetDraftOptions.map((option) => option.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <div className="space-y-2">
+                    {sheetDraftOptions.map((option, index) => (
+                      <SortableOptionItem
+                        key={option.id}
+                        option={option}
+                        index={index}
+                        placeholder={t('optionPlaceholder')}
+                        removeLabel={t('actions.removeOption')}
+                        onChange={updateSheetOption}
+                        onRemove={removeSheetOption}
+                      />
+                    ))}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            )}
+
+            <div className="flex justify-end">
+              <Button
+                type="button"
+                onClick={handleSaveSheet}
+                disabled={
+                  editingSettingId == null ||
+                  (editingSettingId != null &&
+                    savingOptionBySettingId[editingSettingId] === true)
+                }
+              >
+                <Save className="mr-1 h-3.5 w-3.5" />
+                {editingSettingId != null &&
+                savingOptionBySettingId[editingSettingId]
+                  ? t('actions.saving')
+                  : t('actions.saveOptions')}
+              </Button>
+            </div>
+          </div>
+        </ResizableSheetContent>
+      </Sheet>
     </Page>
   );
 }
+
+function SortableOptionItem({
+  option,
+  index,
+  placeholder,
+  removeLabel,
+  onChange,
+  onRemove,
+}: {
+  option: DraftOption;
+  index: number;
+  placeholder: string;
+  removeLabel: string;
+  onChange: (id: string, value: string) => void;
+  onRemove: (id: string) => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: option.id });
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.6 : undefined,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="flex items-center gap-2 rounded-md border p-2"
+    >
+      <button
+        type="button"
+        {...attributes}
+        {...listeners}
+        className="flex cursor-grab touch-none items-center justify-center rounded p-1 text-muted-foreground active:cursor-grabbing"
+        aria-label={`reorder-option-${index + 1}`}
+      >
+        <GripVertical className="h-4 w-4" />
+      </button>
+
+      <Input
+        value={option.value}
+        onChange={(event) => onChange(option.id, event.target.value)}
+        placeholder={placeholder}
+        className="bg-background"
+      />
+
+      <Button
+        type="button"
+        size="icon"
+        variant="ghost"
+        onClick={() => onRemove(option.id)}
+        aria-label={removeLabel}
+      >
+        <Trash2 className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}