@hedhog/setting 0.0.6 → 0.0.8

package/frontend/setting-user/components/setting-user.screen.tsx

@@ -0,0 +1,107 @@
+import { PageTitle } from "@/components/custom/page-title";
+import DataPanel from "@/components/panels/data-panel";
+import { useSettingUserDelete } from "@/features/blog/setting-user";
+import { useApp } from "@/hooks/use-app";
+import { isPlural } from "@/lib/utils";
+import { SettingUser } from "@/types/models";
+import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SettingUserCreatePanel from "./components/setting-user-create-panel";
+import SettingUserUpdatePanel from "./components/setting-user-update-panel";
+
+export default function Page() {
+  const [selectedItems, setSelectedItems] = useState<SettingUser[]>([]);
+  const { mutate: deleteSettingUser } = useSettingUserDelete();
+  const { openSheet, confirm, closeSheet } = useApp();
+  const { t } = useTranslation(["setting-user", "modules", "actions"]);
+
+  const openCreate = () => {
+    const id = openSheet({
+      title: t("create", { ns: "actions" }),
+      description: t("createText", { ns: "setting-user" }),
+      children: () => (
+        <SettingUserCreatePanel onCreated={() => closeSheet(id)} />
+      ),
+    });
+
+    return id;
+  };
+
+  const openDelete = (items: SettingUser[]) => {
+    return confirm({
+      title: `${t("delete", { ns: "actions" })} ${items.length} ${isPlural(items.length) ? t("items", { ns: "actions" }) : t("item", { ns: "actions" })}`,
+      description: t("deleteText", { ns: "setting-user" }),
+    })
+      .then(() =>
+        deleteSettingUser(
+          items.map((item) => item.id).filter((id) => id !== undefined),
+        ),
+      )
+      .catch(() => setSelectedItems(items));
+  };
+
+  const openUpdate = (item: SettingUser) => {
+    const id = openSheet({
+      children: () => (
+        <SettingUserUpdatePanel data={item} onUpdated={() => closeSheet(id)} />
+      ),
+      title: t("edit", { ns: "setting-user" }),
+      description: t("editText", { ns: "setting-user" }),
+    });
+
+    return id;
+  };
+
+  return (
+    <>
+      <PageTitle title={t("settingUser", { ns: "modules" })} />
+      <DataPanel
+        url="/setting-user"
+        layout="table"
+        id="setting-user"
+        selectable
+        columns={[
+          { key: "id", header: "ID", width: 64 },
+          { key: "name", header: t("name", { ns: "setting-user" }) },
+        ]}
+        selected={selectedItems as SettingUser[]}
+        multiple
+        hasSearch
+        sortable
+        onItemDoubleClick={(item) => openUpdate(item)}
+        menuActions={[
+          {
+            icon: <IconEdit className="mr-1 w-8 cursor-pointer" />,
+            label: t("edit", { ns: "actions" }),
+            tooltip: t("editTooltip", { ns: "setting-user" }),
+            handler: (items: SettingUser[]) => {
+              if (items.length === 1) openUpdate(items[0]);
+            },
+            show: "once",
+          },
+          {
+            icon: <IconTrash className="mr-1 w-8 cursor-pointer" />,
+            label: t("delete", { ns: "actions" }),
+            tooltip: t("deleteTooltip", { ns: "setting-user" }),
+            variant: "destructive",
+            handler: (items: SettingUser[]) => {
+              openDelete(items);
+            },
+            show: "some",
+          },
+          {
+            icon: <IconPlus className="mr-1 w-8 cursor-pointer" />,
+            label: t("create", { ns: "actions" }),
+            tooltip: t("createTooltip", { ns: "setting-user" }),
+            variant: "default",
+            handler: () => {
+              openCreate();
+            },
+            show: "none",
+          },
+        ]}
+      />
+    </>
+  );
+}

package/frontend/setting-user/components/update-panel.tsx

@@ -0,0 +1,85 @@
+import FormPanel, { FormPanelRef } from "@/components/panels/form-panel";
+import { Overlay } from "@/components/custom/overlay";
+import { TabPanel } from "@/components/panels/tab-panel";
+import { EnumFieldType } from "@/enums/EnumFieldType";
+import {
+  useSettingUserGet,
+  useSettingUserUpdate,
+} from "@/features/blog/setting-user";
+import useEffectAfterFirstUpdate from "@/hooks/use-effect-after-first-update";
+import { SettingUser } from "@/types/models";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+export type SettingUserUpdatePanelProps = {
+  data: SettingUser;
+  onUpdated?: (data: SettingUser) => void;
+};
+
+const SettingUserUpdatePanel = forwardRef(
+  ({ data, onUpdated }: SettingUserUpdatePanelProps, ref) => {
+    const { t } = useTranslation(["actions"]);
+    const { data: item, isLoading } = useSettingUserGet(data.id as number);
+    const { mutate: settingUserUpdate } = useSettingUserUpdate();
+    const formRef = useRef<FormPanelRef>(null);
+
+    useEffectAfterFirstUpdate(() => {
+      if (item && formRef.current) {
+        formRef.current.setValuesFromItem(item);
+      }
+    }, [item]);
+
+    useImperativeHandle(ref, () => ({}));
+
+    return (
+      <TabPanel
+        activeTabIndex={0}
+        tabs={[
+          {
+            title: t("details", { ns: "actions" }),
+            children: (
+              <Overlay loading={isLoading}>
+                <FormPanel
+                  ref={formRef}
+                  fields={[
+                    {
+                      name: "user_id",
+                      label: { text: t("user_id", { ns: "translation" }) },
+                      type: EnumFieldType.TEXT,
+                      required: true,
+                    },
+
+                    {
+                      name: "setting_id",
+                      label: { text: t("setting_id", { ns: "translation" }) },
+                      type: EnumFieldType.TEXT,
+                      required: true,
+                    },
+
+                    {
+                      name: "value",
+                      label: { text: t("value", { ns: "translation" }) },
+                      type: EnumFieldType.TEXT,
+                      required: true,
+                    },
+                  ]}
+                  button={{ text: t("save", { ns: "actions" }) }}
+                  onSubmit={(data) => {
+                    settingUserUpdate({ id: data.id, data });
+                    if (typeof onUpdated === "function") {
+                      onUpdated(data);
+                    }
+                  }}
+                />
+              </Overlay>
+            ),
+          },
+        ]}
+      />
+    );
+  },
+);
+
+SettingUserUpdatePanel.displayName = "SettingUserUpdatePanel";
+
+export default SettingUserUpdatePanel;

package/frontend/setting-user/locales/en/setting.setting-user.json

@@ -0,0 +1,11 @@
+{
+  "create": "Create setting user",
+  "createText": "Fill the setting user informations.",
+  "createTooltip": "Create new setting user",
+  "delete": "Delete setting user",
+  "deleteText": "Are you sure to delete these setting user?",
+  "deleteTooltip": "Delete the selected setting user",
+  "edit": "Edit setting user",
+  "editText": "View and edit setting user information.",
+  "editTooltip": "Edit the selected setting user"
+}

package/frontend/setting-user/locales/pt/setting.setting-user.json

@@ -0,0 +1,11 @@
+{
+  "create": "Criar configuração de usuário",
+  "createText": "Preencha as informações da configuração de usuário.",
+  "createTooltip": "Criar nova configuração de usuário",
+  "delete": "Excluir configuração de usuário",
+  "deleteText": "Tem certeza de que deseja excluir estas configurações de usuário?",
+  "deleteTooltip": "Excluir a configuração de usuário selecionada",
+  "edit": "Editar configuração de usuário",
+  "editText": "Visualizar e editar informações da configuração de usuário.",
+  "editTooltip": "Editar a configuração de usuário selecionada"
+}

package/frontend/setting-user/react-query/handlers.ts

@@ -0,0 +1,28 @@
+import { useDefaultMutation } from "@/hooks/use-default-mutation";
+import { useQuery } from "@tanstack/react-query";
+import { requests } from "./requests";
+
+const scope = "setting-user";
+
+export function useSettingUserCreate() {
+  const { settingUserCreate } = requests();
+  return useDefaultMutation(scope, "create", settingUserCreate);
+}
+
+export function useSettingUserDelete() {
+  const { settingUserDelete } = requests();
+  return useDefaultMutation(scope, "delete", settingUserDelete);
+}
+
+export function useSettingUserUpdate() {
+  const { settingUserUpdate } = requests();
+  return useDefaultMutation(scope, "update", settingUserUpdate);
+}
+
+export function useSettingUserGet(id: number) {
+  const { settingUserGet } = requests();
+  return useQuery({
+    queryKey: [scope, "get"],
+    queryFn: () => settingUserGet(id),
+  });
+}

package/frontend/setting-user/react-query/requests.ts

@@ -0,0 +1,57 @@
+import { useApp } from "@/hooks/use-app";
+import { Delete, PaginationParams, PaginationResult } from "@/types";
+import { SettingUser } from "@/types/models";
+import { HttpMethod } from "@/types/http-method";
+
+export function requests() {
+  const { request } = useApp();
+
+  const settingUserList = async (params: PaginationParams) => {
+    return request<PaginationResult<SettingUser>>({
+      url: "/setting-user",
+      params,
+    }).then((res) => res.data);
+  };
+
+  const settingUserGet = async (id: number) => {
+    return request<SettingUser>({
+      url: `/setting-user/${id}`,
+    }).then((res) => res.data);
+  };
+
+  const settingUserCreate = async (data: SettingUser) => {
+    return request<SettingUser>({
+      url: "/setting-user",
+      method: HttpMethod.POST,
+      data: data,
+    }).then((res) => res.data);
+  };
+
+  const settingUserDelete = async (ids: number[]) => {
+    return request<Delete>({
+      url: "/setting-user",
+      data: { ids },
+      method: HttpMethod.DELETE,
+    }).then((res) => res.data);
+  };
+
+  const settingUserUpdate = async (params: {
+    id: number;
+    data: SettingUser;
+  }) => {
+    const { id, data } = params;
+    return request<SettingUser>({
+      url: `/setting-user/${id}`,
+      method: HttpMethod.PATCH,
+      data: data,
+    }).then((res) => res.data);
+  };
+
+  return {
+    settingUserCreate,
+    settingUserUpdate,
+    settingUserDelete,
+    settingUserList,
+    settingUserGet,
+  };
+}

package/hedhog.yaml

@@ -0,0 +1,380 @@
+data:
+  setting_group:
+    - slug: localization
+      icon: world
+      name:
+        en: Localization
+        pt: Localização
+      description:
+        en: Configure the localization setting.
+        pt: Configurar as definições de localização.
+      relations:
+        setting:
+          - slug: language
+            type: string
+            name:
+              en: Default Language
+              pt: Idioma Padrão
+            description:
+              en: The system default language, each user can have their own preferred language
+              pt: O idioma padrão do sistema, cada usuário pode ter o seu próprio idioma
+                preferido
+            value: en
+            user_override: true
+          - slug: timezone
+            type: string
+            name:
+              en: Timezone
+              pt: Fuso Horário
+            description:
+              en: The timezone to use
+              pt: O fuso horário a utilizar
+            value: UTC
+            user_override: true
+    - slug: appearance
+      icon: palette
+      name:
+        en: Appearance
+        pt: Aparência
+      description:
+        en: Configure the appearance setting.
+        pt: Configurar as definições de aparência.
+      relations:
+        setting:
+          - slug: theme-primary
+            type: string
+            name:
+              en: Primary Color
+              pt: Cor Primária
+            description:
+              en: The primary color to use
+              pt: A cor primária a utilizar
+            value: "#000000"
+          - slug: theme-primary-foreground
+            type: string
+            name:
+              en: Primary Color Foreground
+              pt: Contraste da Cor Primária
+            description:
+              en: The primary color foreground to use
+              pt: O contraste da cor primária a utilizar
+            value: "#ffffff"
+          - slug: theme-secondary
+            type: string
+            name:
+              en: Secondary Color
+              pt: Cor Secundária
+            description:
+              en: The secondary color to use
+              pt: A cor secundária a utilizar
+            value: "#FFFFFF"
+          - slug: theme-secondary-foreground
+            type: string
+            name:
+              en: Secondary Color Foreground
+              pt: Contraste da Cor Secundária
+            description:
+              en: The secondary color foreground to use
+              pt: O contraste da cor secundária a utilizar
+            value: "#000000"
+          - slug: theme-accent
+            type: string
+            name:
+              en: Accent Color
+              pt: Cor de Realce
+            description:
+              en: The accent color to use
+              pt: A cor de realce a utilizar
+            value: "#FF0000"
+          - slug: theme-accent-foreground
+            type: string
+            name:
+              en: Accent Color Foreground
+              pt: Contraste da Cor de Realce
+            description:
+              en: The accent color foreground to use
+              pt: O contraste da cor de realce a utilizar
+            value: "#000000"
+          - slug: theme-background
+            type: string
+            name:
+              en: Background Color
+              pt: Cor de Fundo
+            description:
+              en: The background color to use
+              pt: A cor de fundo a utilizar
+            value: "#FFFFFF"
+          - slug: theme-background-foreground
+            type: string
+            name:
+              en: Background Color Foreground
+              pt: Contraste da Cor de Fundo
+            description:
+              en: The background color foreground to use
+              pt: O contraste da cor de fundo a utilizar
+            value: "#000000"
+          - slug: theme-muted
+            type: string
+            name:
+              en: Muted Color
+              pt: Cor Suave
+            description:
+              en: The muted color to use
+              pt: A cor suave a utilizar
+            value: "#F0F0F0"
+          - slug: theme-muted-foreground
+            type: string
+            name:
+              en: Muted Color Foreground
+              pt: Contraste da Cor Suave
+            description:
+              en: The muted color foreground to use
+              pt: O contraste da cor suave a utilizar
+            value: "#000000"
+          - slug: theme-radius
+            type: string
+            name:
+              en: Radius
+              pt: Raio
+            description:
+              en: The radius to use
+              pt: O raio a utilizar
+            value: "0.5"
+          - slug: theme-font
+            type: string
+            name:
+              en: Font Family
+              pt: Família de Fontes
+            description:
+              en: The font to use
+              pt: A fonte a utilizar
+            value: Arial, sans-serif
+          - slug: theme-text-size
+            type: string
+            name:
+              en: Text Size
+              pt: Tamanho do Texto
+            description:
+              en: Text size of the application
+              pt: Tamanho do texto da aplicação
+            value: "1"
+          - slug: theme-muted-saturation
+            type: string
+            name:
+              en: Muted Color Saturation
+              pt: Saturação da Cor Suave
+            description:
+              en: Saturação da Cor Suave a utilizar
+              pt: Muted Color Saturation to use
+            value: "100"
+          - slug: theme-muted-lightness
+            type: string
+            name:
+              en: Muted Color Lightness
+              pt: Luminância da Cor Suave
+            description:
+              en: Luminância da Cor Suave a utilizar
+              pt: Muted Color Lightness to use
+            value: "100"
+          - slug: theme-light-dark-enabled
+            type: boolean
+            name:
+              en: Light/Dark Themes Enabled
+              pt: Tema Claro/Escuro Habilitado
+            description:
+              en: Enable or disable toggling of light/dark themes
+              pt: Habilite ou desabilite a troca de tema claro/escuro
+            value: true
+          - slug: theme-light-dark-default
+            type: string
+            name:
+              en: Default Theme
+              pt: Tema Padrão
+            description:
+              en: System default theme
+              pt: Tema Padrão do sistema
+            value: dark
+  route:
+    - url: /setting-group
+      method: GET
+      relations: &a1
+        role:
+          - where:
+              slug: admin
+    - url: /setting-group/:id
+      method: GET
+      relations: *a1
+    - url: /setting
+      method: GET
+      relations: &a2
+        role:
+          - where:
+              slug: admin
+    - url: /setting/:id
+      method: GET
+      relations: *a2
+    - url: /setting-user
+      method: GET
+      relations: &a3
+        role:
+          - where:
+              slug: admin
+    - url: /setting-user/:id
+      method: GET
+      relations: *a3
+  menu:
+    - name:
+        en: SettingGroup
+        pt: SettingGroup
+      icon: file
+      url: /setting-group
+      slug: setting-group
+      relations: *a1
+    - name:
+        en: Setting
+        pt: Setting
+      icon: file
+      url: /setting
+      slug: setting
+      relations: *a2
+    - name:
+        en: SettingUser
+        pt: SettingUser
+      icon: file
+      url: /setting-user
+      slug: setting-user
+      relations: *a3
+  screen:
+    - name:
+        en: SettingGroup
+        pt: SettingGroup
+      slug: setting-group
+      description:
+        en: Screen to manage setting_group
+        pt: Tela para gerenciar setting_group
+      icon: file
+    - name:
+        en: Setting
+        pt: Setting
+      slug: setting
+      description:
+        en: Screen to manage setting
+        pt: Tela para gerenciar setting
+      icon: file
+    - name:
+        en: SettingUser
+        pt: SettingUser
+      slug: setting-user
+      description:
+        en: Screen to manage setting_user
+        pt: Tela para gerenciar setting_user
+      icon: file
+tables:
+  setting_group:
+    columns:
+      - type: pk
+      - name: icon
+        length: 31
+      - type: slug
+      - type: created_at
+      - type: updated_at
+    ifNotExists: true
+  setting_group_locale:
+    columns:
+      - name: locale_id
+        type: fk
+        isPrimary: true
+        references:
+          table: locale
+          column: id
+          onDelete: CASCADE
+      - name: group_id
+        type: fk
+        isPrimary: true
+        references:
+          table: setting_group
+          column: id
+          onDelete: CASCADE
+      - name: name
+        length: 63
+      - name: description
+        length: 255
+        isNullable: true
+      - type: created_at
+      - type: updated_at
+    ifNotExists: true
+  setting:
+    columns:
+      - type: pk
+      - name: group_id
+        type: fk
+        references:
+          table: setting_group
+          column: id
+          onDelete: CASCADE
+      - type: slug
+      - name: type
+        type: enum
+        enum:
+          - string
+          - array
+          - number
+          - boolean
+          - json
+        default: string
+      - name: value
+        length: 1023
+        isNullable: true
+      - name: user_override
+        type: boolean
+        default: false
+      - type: created_at
+      - type: updated_at
+    ifNotExists: true
+  setting_locale:
+    columns:
+      - name: locale_id
+        type: fk
+        isPrimary: true
+        references:
+          table: locale
+          column: id
+          onDelete: CASCADE
+      - name: setting_id
+        type: fk
+        isPrimary: true
+        references:
+          table: setting
+          column: id
+          onDelete: CASCADE
+      - name: description
+        length: 255
+        isNullable: true
+      - name: name
+        length: 63
+        isNullable: true
+      - type: created_at
+      - type: updated_at
+    ifNotExists: true
+  setting_user:
+    columns:
+      - name: user_id
+        type: fk
+        isPrimary: true
+        references:
+          table: user
+          column: id
+          onDelete: CASCADE
+      - name: setting_id
+        type: fk
+        isPrimary: true
+        references:
+          table: setting
+          column: id
+          onDelete: CASCADE
+      - name: value
+        length: 1023
+        isNullable: true
+      - type: created_at
+      - type: updated_at
+    ifNotExists: true