@hed-hog/core 0.0.349 → 0.0.350

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

@@ -0,0 +1,649 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  SearchBar,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { PaginatedResult } from '@/types/pagination-result';
+import {
+  Setting,
+  SettingComponentEnum,
+  SettingGroup,
+  SettingSubgroup,
+} from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  ListTree,
+  Plus,
+  Save,
+  Settings2,
+  SlidersHorizontal,
+  Trash2,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { SettingField } from '../configurations/[slug]/components/setting-field';
+
+type SettingWithList = Setting & {
+  subgroup_id?: number | null;
+  setting_subgroup?: SettingSubgroup | null;
+  setting_list?: Array<{
+    id: number;
+    order?: number;
+    value: string;
+  }>;
+};
+
+type SubgroupSection = {
+  key: string;
+  slug: string;
+  name: string;
+  description?: string;
+  settings: SettingWithList[];
+};
+
+const createEmptyPage = <T,>(pageSize: number): PaginatedResult<T> => ({
+  total: 0,
+  lastPage: 0,
+  page: 1,
+  pageSize,
+  prev: null,
+  next: null,
+  data: [],
+});
+
+export default function CoreSettingListPage() {
+  const t = useTranslations('core.SettingListPage');
+  const { request, currentLocaleCode, showToastHandler } = useApp();
+  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 { data: groupsPage } = useQuery<PaginatedResult<SettingGroup>>({
+    queryKey: ['core-setting-list-groups', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PaginatedResult<SettingGroup>>({
+        url: '/setting/group?page=1&pageSize=100',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? createEmptyPage<SettingGroup>(100),
+  });
+
+  const groups = useMemo<SettingGroup[]>(
+    () => groupsPage?.data ?? [],
+    [groupsPage]
+  );
+
+  useEffect(() => {
+    if (!groups.length) return;
+
+    if (activeGroupSlug === 'all') {
+      return;
+    }
+
+    const groupExists = groups.some(
+      (group: SettingGroup) => group.slug === activeGroupSlug
+    );
+    if (!groupExists) {
+      setActiveGroupSlug('all');
+    }
+  }, [activeGroupSlug, groups]);
+
+  useEffect(() => {
+    setActiveSubgroupSlug('all');
+  }, [activeGroupSlug]);
+
+  const {
+    data: settingsPage,
+    isLoading,
+    refetch,
+  } = useQuery<PaginatedResult<SettingWithList>>({
+    queryKey: ['core-setting-list-items', activeGroupSlug, currentLocaleCode],
+    queryFn: async () => {
+      const url =
+        activeGroupSlug === 'all'
+          ? '/setting?page=1&pageSize=500'
+          : `/setting/group/${activeGroupSlug}?page=1&pageSize=200`;
+
+      const response = await request<PaginatedResult<SettingWithList>>({
+        url,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? createEmptyPage<SettingWithList>(200),
+  });
+
+  const allSettings = useMemo<SettingWithList[]>(
+    () => settingsPage?.data ?? [],
+    [settingsPage]
+  );
+
+  const listTypeSettings = useMemo<SettingWithList[]>(
+    () =>
+      allSettings.filter((setting) => {
+        const component = setting.component;
+        const isListComponent =
+          component === SettingComponentEnum.COMBOBOX ||
+          component === SettingComponentEnum.CHECKBOX;
+
+        return isListComponent;
+      }),
+    [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,
+      { value: string; label: string; description?: string }
+    >();
+
+    listTypeSettings.forEach((setting) => {
+      const subgroup = setting.setting_subgroup;
+      if (!subgroup?.slug) {
+        return;
+      }
+
+      map.set(subgroup.slug, {
+        value: subgroup.slug,
+        label: subgroup.name?.toString() || subgroup.slug,
+        description: subgroup.description?.toString() || undefined,
+      });
+    });
+
+    return Array.from(map.values()).sort((left, right) =>
+      left.label.localeCompare(right.label)
+    );
+  }, [listTypeSettings]);
+
+  const visibleSettings = useMemo(() => {
+    if (activeSubgroupSlug === 'all') {
+      return listTypeSettings;
+    }
+
+    return listTypeSettings.filter(
+      (setting) => setting.setting_subgroup?.slug === activeSubgroupSlug
+    );
+  }, [activeSubgroupSlug, listTypeSettings]);
+
+  const currentGroup = useMemo(
+    () => groups.find((group) => group.slug === activeGroupSlug) ?? null,
+    [activeGroupSlug, groups]
+  );
+
+  const filteredSettings = useMemo(() => {
+    const normalizedQuery = search.trim().toLowerCase();
+
+    if (!normalizedQuery) {
+      return visibleSettings;
+    }
+
+    return visibleSettings.filter((setting: SettingWithList) => {
+      const options = (setting.setting_list ?? []).map(
+        (option: { value: string }) => option.value
+      );
+      const text = [
+        setting.name,
+        setting.slug,
+        setting.description,
+        setting.setting_subgroup?.name,
+        setting.setting_subgroup?.slug,
+        options.join(' '),
+      ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+
+      return text.includes(normalizedQuery);
+    });
+  }, [search, visibleSettings]);
+
+  const groupedSections = useMemo<SubgroupSection[]>(() => {
+    const sectionsMap = new Map<string, SubgroupSection>();
+
+    filteredSettings.forEach((setting) => {
+      const subgroup = setting.setting_subgroup ?? null;
+      const subgroupSlug = subgroup?.slug ?? '__ungrouped__';
+      const sectionKey = subgroupSlug;
+
+      if (!sectionsMap.has(sectionKey)) {
+        sectionsMap.set(sectionKey, {
+          key: sectionKey,
+          slug: subgroupSlug,
+          name:
+            subgroup?.name?.toString() ||
+            (subgroup ? subgroup.slug : t('sections.withoutSubgroup')),
+          description: subgroup?.description?.toString() || undefined,
+          settings: [],
+        });
+      }
+
+      sectionsMap.get(sectionKey)?.settings.push(setting);
+    });
+
+    const sections = Array.from(sectionsMap.values());
+    sections.forEach((section) => {
+      section.settings.sort((left, right) =>
+        left.slug.localeCompare(right.slug)
+      );
+    });
+
+    sections.sort((left, right) => {
+      if (left.slug === '__ungrouped__') return 1;
+      if (right.slug === '__ungrouped__') return -1;
+      return left.name.localeCompare(right.name);
+    });
+
+    return sections;
+  }, [filteredSettings, t]);
+
+  const settingsWithOptionsCount = useMemo(
+    () => listTypeSettings.length,
+    [listTypeSettings]
+  );
+
+  const totalOptions = useMemo(
+    () =>
+      listTypeSettings.reduce(
+        (acc: number, setting: SettingWithList) =>
+          acc + (setting.setting_list?.length ?? 0),
+        0
+      ),
+    [listTypeSettings]
+  );
+
+  const controls = useMemo(
+    () => [
+      {
+        id: 'group',
+        type: 'select' as const,
+        value: activeGroupSlug,
+        onChange: (value: string) => setActiveGroupSlug(value),
+        placeholder: t('filters.groupPlaceholder'),
+        options: [
+          { value: 'all', label: t('filters.allGroups') },
+          ...groups.map((group: SettingGroup) => ({
+            value: group.slug,
+            label: group.name || group.slug,
+          })),
+        ],
+      },
+      {
+        id: 'subgroup',
+        type: 'select' as const,
+        value: activeSubgroupSlug,
+        onChange: (value: string) => setActiveSubgroupSlug(value),
+        placeholder: t('filters.subgroupPlaceholder'),
+        options: [
+          { value: 'all', label: t('filters.allSubgroups') },
+          ...subgroupOptions.map((subgroup) => ({
+            value: subgroup.value,
+            label: subgroup.label,
+          })),
+        ],
+      },
+    ],
+    [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 saveSettingOptions = async (
+    setting: SettingWithList,
+    overrideValues?: string[]
+  ) => {
+    const settingId = setting.id;
+    if (!settingId) {
+      return;
+    }
+
+    const values = (
+      overrideValues ??
+      optionsDraftBySettingId[settingId] ??
+      []
+    ).map((value) => value.trim());
+
+    setSavingOptionBySettingId((previous) => ({
+      ...previous,
+      [settingId]: true,
+    }));
+
+    try {
+      await request({
+        url: `/setting/${settingId}/options`,
+        method: 'PUT',
+        data: {
+          options: values.map((value, index) => ({
+            value,
+            order: index + 1,
+          })),
+        },
+      });
+
+      showToastHandler('success', t('optionsSavedSuccess'));
+      await refetch();
+
+      setOptionsDraftBySettingId((previous) => {
+        const updatedValues = values.filter((value) => value.length > 0);
+        return {
+          ...previous,
+          [settingId]: updatedValues,
+        };
+      });
+    } catch (_error) {
+      showToastHandler('error', t('optionsSavedError'));
+    } finally {
+      setSavingOptionBySettingId((previous) => ({
+        ...previous,
+        [settingId]: false,
+      }));
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.core') },
+          { label: t('title') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      <KpiCardsGrid
+        items={[
+          {
+            key: 'groups',
+            title: t('kpis.groups'),
+            value: groups.length,
+            icon: Settings2,
+            iconContainerClassName: 'bg-sky-50 text-sky-700',
+            accentClassName: 'from-sky-500/20 via-sky-500/10 to-transparent',
+          },
+          {
+            key: 'settings',
+            title: t('kpis.settingsTotal'),
+            value: settingsWithOptionsCount,
+            icon: ListTree,
+            iconContainerClassName: 'bg-emerald-50 text-emerald-700',
+            accentClassName:
+              'from-emerald-500/20 via-emerald-500/10 to-transparent',
+          },
+          {
+            key: 'subgroups',
+            title: t('kpis.subgroups'),
+            value: subgroupOptions.length,
+            icon: SlidersHorizontal,
+            iconContainerClassName: 'bg-amber-50 text-amber-700',
+            accentClassName:
+              'from-amber-500/20 via-amber-500/10 to-transparent',
+          },
+          {
+            key: 'options',
+            title: t('kpis.totalOptions'),
+            value: totalOptions,
+            icon: SlidersHorizontal,
+            iconContainerClassName: 'bg-violet-50 text-violet-700',
+            accentClassName:
+              'from-violet-500/20 via-violet-500/10 to-transparent',
+          },
+        ]}
+      />
+
+      <Card>
+        <CardContent className="flex flex-wrap items-center justify-between gap-3 py-3">
+          <div className="space-y-0.5">
+            <p className="text-sm font-medium text-foreground">
+              {activeGroupSlug === 'all'
+                ? t('filters.allGroups')
+                : currentGroup?.name || activeGroupSlug}
+            </p>
+            {activeGroupSlug !== 'all' && currentGroup?.description ? (
+              <p className="text-xs text-muted-foreground">
+                {currentGroup.description}
+              </p>
+            ) : null}
+          </div>
+          <Badge variant="secondary">
+            {t('kpis.options')}: {totalOptions}
+          </Badge>
+        </CardContent>
+      </Card>
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={setSearch}
+        onSearch={() => undefined}
+        placeholder={t('searchPlaceholder')}
+        controls={controls}
+      />
+
+      {isLoading ? (
+        <Card>
+          <CardContent className="py-8 text-sm text-muted-foreground">
+            {t('loading')}
+          </CardContent>
+        </Card>
+      ) : filteredSettings.length === 0 ? (
+        <EmptyState
+          icon={<ListTree className="h-10 w-10" />}
+          title={t('emptyTitle')}
+          description={
+            listTypeSettings.length === 0
+              ? t('emptyDescriptionNoSettings')
+              : t('emptyDescriptionFiltered')
+          }
+        />
+      ) : (
+        <div className="grid gap-3">
+          {groupedSections.map((section) => (
+            <Card key={section.key}>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-base">{section.name}</CardTitle>
+                {section.description ? (
+                  <CardDescription>{section.description}</CardDescription>
+                ) : null}
+              </CardHeader>
+
+              <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;
+
+                  return (
+                    <div
+                      key={setting.id}
+                      className="space-y-2 border-b border-border/60 pb-4 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>
+
+                      <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>
+                    </div>
+                  );
+                })}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </Page>
+  );
+}