@hed-hog/core 0.0.185 → 0.0.190

package/hedhog/frontend/app/configurations/[slug]/components/setting-field.tsx.ejs

@@ -0,0 +1,490 @@
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { revalidateSystemIcon } from '@/lib/revalidate-icon';
+import { cn } from '@/lib/utils';
+import {
+  Setting,
+  SettingComponentEnum,
+  SettingTypeEnum,
+} from '@hed-hog/api-types';
+import { useApp } from '@hed-hog/next-app-provider';
+import { Upload } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useRef, useState } from 'react';
+
+type SettingFieldProps = {
+  setting: Setting;
+  className?: string;
+};
+
+export const SettingField = ({ setting, className }: SettingFieldProps) => {
+  const t = useTranslations('core.Configurations');
+  const { showToastHandler, setSettingValue, request } = useApp();
+  const component =
+    setting.component?.replaceAll('_', '-') || SettingComponentEnum.INPUT_TEXT;
+  const [localValue, setLocalValue] = useState(setting.value);
+  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const isTextInputRef = useRef<boolean>(false);
+
+  const isThemeSetting = (slug: string) => {
+    return slug.startsWith('theme-') || slug === 'menu-width';
+  };
+
+  const applyThemeSettings = async () => {
+    try {
+      const response: any = await request({
+        url: '/setting/initial',
+        method: 'GET',
+      });
+
+      const newSettings = response.data?.setting || {};
+      localStorage.setItem('settings', JSON.stringify(newSettings));
+
+      const root = document.documentElement;
+      const themeMode = newSettings['theme-mode'] || 'system';
+      let currentTheme: 'light' | 'dark' = 'light';
+
+      if (themeMode === 'system') {
+        const prefersDark = window.matchMedia(
+          '(prefers-color-scheme: dark)'
+        ).matches;
+        currentTheme = prefersDark ? 'dark' : 'light';
+      } else {
+        currentTheme = themeMode as 'light' | 'dark';
+      }
+
+      root.classList.remove('light', 'dark');
+      root.classList.add(currentTheme);
+
+      const existingStyle = document.getElementById('theme-custom-styles');
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+
+      const styleTag = document.createElement('style');
+      styleTag.id = 'theme-custom-styles';
+      let cssRules = '';
+
+      const addRule = (varName: string, settingKey: string) => {
+        const hexColor = newSettings[settingKey];
+        if (
+          hexColor &&
+          typeof hexColor === 'string' &&
+          hexColor.startsWith('#')
+        ) {
+          cssRules += `    ${varName}: ${hexColor} !important;\n`;
+        }
+      };
+
+      if (currentTheme === 'light') {
+        cssRules += '@supports (color: lab(0% 0 0)) {\n';
+        cssRules += '  html.light, .light, :root.light {\n';
+        addRule('--primary', 'theme-primary-light');
+        addRule('--bprogress-color', 'theme-primary-light');
+        addRule('--primary-foreground', 'theme-primary-foreground-light');
+        addRule('--secondary', 'theme-secondary-light');
+        addRule('--secondary-foreground', 'theme-secondary-foreground-light');
+        addRule('--accent', 'theme-accent-light');
+        addRule('--accent-foreground', 'theme-accent-foreground-light');
+        addRule('--muted', 'theme-muted-light');
+        addRule('--muted-foreground', 'theme-muted-foreground-light');
+        addRule('--background', 'theme-background-light');
+        addRule('--foreground', 'theme-background-foreground-light');
+        addRule('--card', 'theme-card-light');
+        addRule('--card-foreground', 'theme-card-foreground-light');
+      } else {
+        cssRules += '@supports (color: lab(0% 0 0)) {\n';
+        cssRules += '  html.dark, .dark, :root.dark {\n';
+        addRule('--primary', 'theme-primary-dark');
+        addRule('--bprogress-color', 'theme-primary-dark');
+        addRule('--primary-foreground', 'theme-primary-foreground-dark');
+        addRule('--secondary', 'theme-secondary-dark');
+        addRule('--secondary-foreground', 'theme-secondary-foreground-dark');
+        addRule('--accent', 'theme-accent-dark');
+        addRule('--accent-foreground', 'theme-accent-foreground-dark');
+        addRule('--muted', 'theme-muted-dark');
+        addRule('--muted-foreground', 'theme-muted-foreground-dark');
+        addRule('--background', 'theme-background-dark');
+        addRule('--foreground', 'theme-background-foreground-dark');
+        addRule('--card', 'theme-card-dark');
+        addRule('--card-foreground', 'theme-card-foreground-dark');
+      }
+
+      if (newSettings['theme-radius']) {
+        cssRules += `    --radius: ${newSettings['theme-radius']}rem !important;\n`;
+      }
+      if (newSettings['theme-text-size']) {
+        cssRules += `    font-size: ${newSettings['theme-text-size']}rem !important;\n`;
+      }
+
+      cssRules += '  }\n';
+      cssRules += '}\n';
+
+      if (newSettings['theme-font']) {
+        cssRules += `:root {\n`;
+        cssRules += `  --font-sans: ${newSettings['theme-font']} !important;\n`;
+        cssRules += `}\n`;
+        cssRules += `html {\n`;
+        cssRules += `  font-family: ${newSettings['theme-font']} !important;\n`;
+        cssRules += `}\n`;
+      }
+
+      styleTag.textContent = cssRules;
+      document.head.appendChild(styleTag);
+    } catch (error) {
+      console.error('Error applying theme settings:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (!isTextInputRef.current) return;
+
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      if (localValue !== setting.value) {
+        setSettingValue(setting.slug, localValue)
+          .then(async () => {
+            showToastHandler('success', t('settingUpdated'));
+
+            if (['icon-url'].includes(setting.slug)) {
+              await revalidateSystemIcon();
+              showToastHandler('success', t('iconRevalidated'));
+              window.location.reload();
+            }
+
+            if (isThemeSetting(setting.slug)) {
+              await applyThemeSettings();
+            }
+          })
+          .catch(() => {
+            showToastHandler('error', t('settingUpdateFailed'));
+          });
+      }
+    }, 500);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [localValue]);
+
+  const handleChangeValue = (newValue: any, immediate = false) => {
+    setLocalValue(newValue);
+    if (immediate) {
+      setSettingValue(setting.slug, newValue)
+        .then(async () => {
+          showToastHandler('success', t('settingUpdated'));
+          if (isThemeSetting(setting.slug)) {
+            await applyThemeSettings();
+          }
+        })
+        .catch(() => {
+          showToastHandler('error', t('settingUpdateFailed'));
+        });
+    }
+  };
+
+  const getParsedValue = () => {
+    const value = localValue;
+    if (value === undefined || value === null) return value;
+
+    switch (setting.type) {
+      case SettingTypeEnum.NUMBER:
+        return typeof value === 'number' ? value : parseFloat(value) || 0;
+      case SettingTypeEnum.BOOLEAN:
+        return typeof value === 'boolean'
+          ? value
+          : value === 'true' || value === '1';
+      case SettingTypeEnum.ARRAY:
+      case SettingTypeEnum.JSON:
+        try {
+          return typeof value === 'string' ? JSON.parse(value) : value;
+        } catch {
+          return value;
+        }
+      default:
+        return value;
+    }
+  };
+
+  const formatValue = (val: any) => {
+    switch (setting.type) {
+      case SettingTypeEnum.ARRAY:
+      case SettingTypeEnum.JSON:
+        return typeof val === 'string' ? val : JSON.stringify(val);
+      case SettingTypeEnum.BOOLEAN:
+        return val ? 'true' : 'false';
+      case SettingTypeEnum.NUMBER:
+        return val?.toString() || '0';
+      default:
+        return val;
+    }
+  };
+
+  const parsedValue = getParsedValue();
+  switch (component) {
+    case SettingComponentEnum.INPUT_TEXT:
+      isTextInputRef.current = true;
+      return (
+        <Input
+          type="text"
+          value={parsedValue || ''}
+          onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+          className={cn(className, 'bg-background min-w-[200px]')}
+        />
+      );
+
+    case SettingComponentEnum.INPUT_NUMBER:
+      isTextInputRef.current = true;
+      return (
+        <Input
+          type="number"
+          value={parsedValue || 0}
+          onChange={(e) =>
+            handleChangeValue(formatValue(parseFloat(e.target.value) || 0))
+          }
+          className={cn(className, 'bg-background min-w-[200px]')}
+        />
+      );
+
+    case SettingComponentEnum.INPUT_SECRET:
+      isTextInputRef.current = true;
+      return (
+        <Input
+          type="password"
+          value={parsedValue || ''}
+          onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+          className={cn(className, 'bg-background min-w-[200px]')}
+        />
+      );
+
+    case SettingComponentEnum.INPUT_FILE:
+      isTextInputRef.current = true;
+      const fileInputRef = useRef<HTMLInputElement>(null);
+      const [isUploading, setIsUploading] = useState(false);
+
+      const handleFileUpload = async (
+        e: React.ChangeEvent<HTMLInputElement>
+      ) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setIsUploading(true);
+        try {
+          const formData = new FormData();
+          formData.append('file', file);
+
+          const response: any = await request({
+            url: '/file',
+            method: 'POST',
+            data: formData,
+            headers: {
+              'Content-Type': 'multipart/form-data',
+            },
+          });
+
+          const fileUrl =
+            String(process.env.NEXT_PUBLIC_API_BASE_URL) +
+            '/file/open/' +
+            response.data?.id;
+          handleChangeValue(formatValue(fileUrl));
+          showToastHandler('success', t('fileUploaded'));
+        } catch (error) {
+          showToastHandler('error', t('fileUploadFailed'));
+        } finally {
+          setIsUploading(false);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+          }
+        }
+      };
+
+      return (
+        <div className="flex flex-col gap-2 min-w-[200px]">
+          {parsedValue && (
+            <div>
+              <img
+                src={parsedValue || ''}
+                alt={t('uploadedFileAlt')}
+                className="w-[200px]"
+              />
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            <input
+              ref={fileInputRef}
+              type="file"
+              onChange={handleFileUpload}
+              className="hidden"
+              id={`file-${setting.id}`}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={isUploading}
+              className="shrink-0"
+            >
+              <Upload className="h-4 w-4" />
+            </Button>
+            <Input
+              type="text"
+              value={parsedValue || ''}
+              onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+              className="flex-1 bg-background w-[150px]"
+              placeholder={t('fileUrlPlaceholder')}
+              disabled={isUploading}
+            />
+          </div>
+        </div>
+      );
+
+    case SettingComponentEnum.SWITCH:
+      return (
+        <Switch
+          checked={parsedValue || false}
+          onCheckedChange={(checked) =>
+            handleChangeValue(formatValue(checked), true)
+          }
+          className={cn(className)}
+        />
+      );
+
+    case SettingComponentEnum.CHECKBOX:
+      if (setting.type === SettingTypeEnum.ARRAY) {
+        const options = setting.setting_list || [];
+        const selectedValues: string[] = Array.isArray(parsedValue)
+          ? parsedValue
+          : [];
+        return (
+          <div
+            className={cn('flex flex-col space-y-2 min-w-[200px]', className)}
+          >
+            {options.map((option) => (
+              <div key={option.id} className="flex items-center space-x-2">
+                <Checkbox
+                  className="bg-background"
+                  checked={selectedValues.includes(option.value)}
+                  onCheckedChange={(checked) => {
+                    let newValues = [...selectedValues];
+                    if (checked) {
+                      newValues.push(option.value);
+                    } else {
+                      newValues = newValues.filter(
+                        (val) => val !== option.value
+                      );
+                    }
+                    handleChangeValue(formatValue(newValues), true);
+                  }}
+                />
+                <Label>{option.value}</Label>
+              </div>
+            ))}
+          </div>
+        );
+      }
+      return (
+        <Checkbox
+          checked={parsedValue || false}
+          onCheckedChange={(checked) =>
+            handleChangeValue(formatValue(checked), true)
+          }
+          className={cn(className, 'min-w-[200px]')}
+        />
+      );
+
+    case SettingComponentEnum.COMBOBOX:
+      const options = setting.setting_list || [];
+      return (
+        <Select
+          value={parsedValue?.toString() || ''}
+          onValueChange={(val) => handleChangeValue(formatValue(val), true)}
+        >
+          <SelectTrigger
+            className={cn('w-full bg-background min-w-[200px]', className)}
+          >
+            <SelectValue placeholder={t('selectOption')} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.id} value={option.value}>
+                {option.value}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+
+    case SettingComponentEnum.RADIO:
+      const radioOptions = setting.setting_list || [];
+      return (
+        <RadioGroup
+          value={parsedValue?.toString() || ''}
+          onValueChange={(val) => handleChangeValue(formatValue(val), true)}
+          className={cn(className, 'min-w-[200px]')}
+        >
+          {radioOptions.map((option) => (
+            <div key={option.id} className="flex items-center space-x-2">
+              <RadioGroupItem
+                value={option.value}
+                id={`radio-${option.id}`}
+                className="bg-background"
+              />
+              <Label htmlFor={`radio-${option.id}`}>{option.value}</Label>
+            </div>
+          ))}
+        </RadioGroup>
+      );
+
+    case SettingComponentEnum.COLOR_PICKER:
+      isTextInputRef.current = true;
+      return (
+        <div className="flex items-center gap-2 min-w-[200px] max-w-[200px]">
+          <Input
+            type="color"
+            value={parsedValue || '#000000'}
+            onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+            className={cn(
+              'h-10 w-10 border-none p-0 cursor-pointer',
+              className
+            )}
+          />
+          <Input
+            type="text"
+            value={parsedValue || '#000000'}
+            onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+            className="flex-1 bg-background"
+            placeholder="#000000"
+            maxLength={7}
+            minLength={7}
+          />
+        </div>
+      );
+
+    default:
+      return (
+        <Input
+          type="text"
+          value={parsedValue || ''}
+          onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+          className={cn(className, 'bg-background')}
+        />
+      );
+  }
+};

package/hedhog/frontend/app/configurations/[slug]/page.tsx.ejs

@@ -0,0 +1,62 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { PaginatedResult } from '@hed-hog/api-pagination';
+import { Setting } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Loader } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { SettingField } from './components/setting-field';
+
+export default function Page() {
+  const params = useParams();
+  const slug = params?.slug;
+
+  const { request, currentLocaleCode } = useApp();
+  const { data: settings, isLoading } = useQuery<PaginatedResult<Setting>>({
+    queryKey: [`setting`, slug, currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PaginatedResult<Setting>>({
+        url: `/setting/group/${slug}`,
+      });
+      return response.data;
+    },
+  });
+
+  if (!slug) {
+    return <></>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <form className="space-y-4">
+        <Card className="border-none bg-accent">
+          {isLoading && (
+            <CardContent className="flex h-32 w-full items-center justify-center">
+              <Loader className="animate-spin text-muted-foreground w-4 h-4" />
+            </CardContent>
+          )}
+          {(settings?.data || []).map((setting: Setting) => (
+            <CardContent
+              key={setting.id}
+              className="flex-col gap-4 border-b last:border-0 border-border pb-4"
+            >
+              <div className="flex justify-between items-center">
+                <div className="flex-col">
+                  <label className="font-semibold">{setting.name}</label>
+                  <p className="text-muted-foreground text-sm">
+                    {setting.description}
+                  </p>
+                </div>
+
+                <div className="h-full flex items-center">
+                  <SettingField setting={setting} />
+                </div>
+              </div>
+            </CardContent>
+          ))}
+        </Card>
+      </form>
+    </div>
+  );
+}