@hedhog/setting 0.0.5 → 0.0.8

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

@@ -0,0 +1,96 @@
+import FormPanel, {
+  FormPanelRef,
+  getFieldsLocale,
+} from "@/components/panels/form-panel";
+import { Overlay } from "@/components/custom/overlay";
+import { TabPanel } from "@/components/panels/tab-panel";
+import { EnumFieldType } from "@/enums/EnumFieldType";
+import { useSettingGet, useSettingUpdate } from "@/features/blog/setting";
+import useEffectAfterFirstUpdate from "@/hooks/use-effect-after-first-update";
+import { Setting } from "@/types/models";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+export type SettingUpdatePanelProps = {
+  data: Setting;
+  onUpdated?: (data: Setting) => void;
+};
+
+const SettingUpdatePanel = forwardRef(
+  ({ data, onUpdated }: SettingUpdatePanelProps, ref) => {
+    const { t } = useTranslation(["actions"]);
+    const { data: item, isLoading } = useSettingGet(data.id as number);
+    const { mutate: settingUpdate } = useSettingUpdate();
+    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: "group_id",
+                      label: { text: t("group_id", { ns: "translation" }) },
+                      type: EnumFieldType.TEXT,
+                      required: true,
+                    },
+
+                    {
+                      name: "type",
+                      label: { text: t("type", { ns: "translation" }) },
+                      type: EnumFieldType.TEXT,
+                      required: true,
+                    },
+
+                    {
+                      name: "value",
+                      label: { text: t("value", { ns: "translation" }) },
+                      type: EnumFieldType.TEXT,
+                      required: true,
+                    },
+
+                    {
+                      name: "user_override",
+                      label: {
+                        text: t("user_override", { ns: "translation" }),
+                      },
+                      type: EnumFieldType.TEXT,
+                      required: true,
+                    },
+
+                    ...getFieldsLocale([{ name: "name" }]),
+                  ]}
+                  button={{ text: t("save", { ns: "actions" }) }}
+                  onSubmit={(data) => {
+                    settingUpdate({ id: data.id, data });
+                    if (typeof onUpdated === "function") {
+                      onUpdated(data);
+                    }
+                  }}
+                />
+              </Overlay>
+            ),
+          },
+        ]}
+      />
+    );
+  },
+);
+
+SettingUpdatePanel.displayName = "SettingUpdatePanel";
+
+export default SettingUpdatePanel;

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

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

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

@@ -0,0 +1,11 @@
+{
+  "create": "Criar configuração",
+  "createText": "Preencha as informações da configuração.",
+  "createTooltip": "Criar nova configuração",
+  "delete": "Deletar configuração",
+  "deleteText": "Você tem certeza de que deseja deletar estas configurações?",
+  "deleteTooltip": "Deletar a configuração selecionada",
+  "edit": "Editar configuração",
+  "editText": "Ver e editar informações da configuração.",
+  "editTooltip": "Editar a configuração selecionada"
+}

package/frontend/setting/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";
+
+export function useSettingCreate() {
+  const { settingCreate } = requests();
+  return useDefaultMutation(scope, "create", settingCreate);
+}
+
+export function useSettingDelete() {
+  const { settingDelete } = requests();
+  return useDefaultMutation(scope, "delete", settingDelete);
+}
+
+export function useSettingUpdate() {
+  const { settingUpdate } = requests();
+  return useDefaultMutation(scope, "update", settingUpdate);
+}
+
+export function useSettingGet(id: number) {
+  const { settingGet } = requests();
+  return useQuery({
+    queryKey: [scope, "get"],
+    queryFn: () => settingGet(id),
+  });
+}

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

@@ -0,0 +1,55 @@
+import { useApp } from "@/hooks/use-app";
+import { Delete, PaginationParams, PaginationResult } from "@/types";
+import { Setting } from "@/types/models";
+import { HttpMethod } from "@/types/http-method";
+import { formatDataWithLocale } from "@hedhog/utils";
+
+export function requests() {
+  const { request } = useApp();
+
+  const settingList = async (params: PaginationParams) => {
+    return request<PaginationResult<Setting>>({
+      url: "/setting",
+      params,
+    }).then((res) => res.data);
+  };
+
+  const settingGet = async (id: number) => {
+    return request<Setting>({
+      url: `/setting/${id}`,
+    }).then((res) => res.data);
+  };
+
+  const settingCreate = async (data: Setting) => {
+    return request<Setting>({
+      url: "/setting",
+      method: HttpMethod.POST,
+      data: formatDataWithLocale(data),
+    }).then((res) => res.data);
+  };
+
+  const settingDelete = async (ids: number[]) => {
+    return request<Delete>({
+      url: "/setting",
+      data: { ids },
+      method: HttpMethod.DELETE,
+    }).then((res) => res.data);
+  };
+
+  const settingUpdate = async (params: { id: number; data: Setting }) => {
+    const { id, data } = params;
+    return request<Setting>({
+      url: `/setting/${id}`,
+      method: HttpMethod.PATCH,
+      data: formatDataWithLocale(data),
+    }).then((res) => res.data);
+  };
+
+  return {
+    settingCreate,
+    settingUpdate,
+    settingDelete,
+    settingList,
+    settingGet,
+  };
+}

package/frontend/setting-group/components/create-panel.tsx

@@ -0,0 +1,62 @@
+import FormPanel, {
+  FormPanelRef,
+  getFieldsLocale,
+} from "@/components/panels/form-panel";
+import { EnumFieldType } from "@/enums/EnumFieldType";
+import { useSettingGroupCreate } from "@/features/blog/setting-group";
+import { SettingGroup } from "@/types/models";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+export type SettingGroupCreatePanelRef = {
+  submit: () => void;
+};
+
+export type SettingGroupCreatePanelProps = {
+  onCreated?: (data: SettingGroup) => void;
+};
+
+const SettingGroupCreatePanel = forwardRef(
+  ({ onCreated }: SettingGroupCreatePanelProps, ref) => {
+    const formRef = useRef<FormPanelRef>(null);
+    const { t } = useTranslation(["actions"]);
+    const { mutateAsync: createSettingGroup } = useSettingGroupCreate();
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        submit: () => {
+          formRef.current?.submit();
+        },
+      }),
+      [formRef],
+    );
+
+    return (
+      <FormPanel
+        ref={formRef}
+        fields={[
+          {
+            name: "icon",
+            label: { text: t("icon", { ns: "translation" }) },
+            type: EnumFieldType.TEXT,
+            required: true,
+          },
+
+          ...getFieldsLocale([{ name: "name" }]),
+        ]}
+        button={{ text: t("create", { ns: "actions" }) }}
+        onSubmit={async (data) => {
+          const createdData = await createSettingGroup(data);
+          if (typeof onCreated === "function") {
+            onCreated(createdData);
+          }
+        }}
+      />
+    );
+  },
+);
+
+SettingGroupCreatePanel.displayName = "SettingGroupCreatePanel";
+
+export default SettingGroupCreatePanel;

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

@@ -0,0 +1,107 @@
+import { PageTitle } from "@/components/custom/page-title";
+import DataPanel from "@/components/panels/data-panel";
+import { useSettingGroupDelete } from "@/features/blog/setting-group";
+import { useApp } from "@/hooks/use-app";
+import { isPlural } from "@/lib/utils";
+import { SettingGroup } from "@/types/models";
+import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SettingGroupCreatePanel from "./components/setting-group-create-panel";
+import SettingGroupUpdatePanel from "./components/setting-group-update-panel";
+
+export default function Page() {
+  const [selectedItems, setSelectedItems] = useState<SettingGroup[]>([]);
+  const { mutate: deleteSettingGroup } = useSettingGroupDelete();
+  const { openSheet, confirm, closeSheet } = useApp();
+  const { t } = useTranslation(["setting-group", "modules", "actions"]);
+
+  const openCreate = () => {
+    const id = openSheet({
+      title: t("create", { ns: "actions" }),
+      description: t("createText", { ns: "setting-group" }),
+      children: () => (
+        <SettingGroupCreatePanel onCreated={() => closeSheet(id)} />
+      ),
+    });
+
+    return id;
+  };
+
+  const openDelete = (items: SettingGroup[]) => {
+    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-group" }),
+    })
+      .then(() =>
+        deleteSettingGroup(
+          items.map((item) => item.id).filter((id) => id !== undefined),
+        ),
+      )
+      .catch(() => setSelectedItems(items));
+  };
+
+  const openUpdate = (item: SettingGroup) => {
+    const id = openSheet({
+      children: () => (
+        <SettingGroupUpdatePanel data={item} onUpdated={() => closeSheet(id)} />
+      ),
+      title: t("edit", { ns: "setting-group" }),
+      description: t("editText", { ns: "setting-group" }),
+    });
+
+    return id;
+  };
+
+  return (
+    <>
+      <PageTitle title={t("settingGroup", { ns: "modules" })} />
+      <DataPanel
+        url="/setting-group"
+        layout="table"
+        id="setting-group"
+        selectable
+        columns={[
+          { key: "id", header: "ID", width: 64 },
+          { key: "name", header: t("name", { ns: "setting-group" }) },
+        ]}
+        selected={selectedItems as SettingGroup[]}
+        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-group" }),
+            handler: (items: SettingGroup[]) => {
+              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-group" }),
+            variant: "destructive",
+            handler: (items: SettingGroup[]) => {
+              openDelete(items);
+            },
+            show: "some",
+          },
+          {
+            icon: <IconPlus className="mr-1 w-8 cursor-pointer" />,
+            label: t("create", { ns: "actions" }),
+            tooltip: t("createTooltip", { ns: "setting-group" }),
+            variant: "default",
+            handler: () => {
+              openCreate();
+            },
+            show: "none",
+          },
+        ]}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,76 @@
+import FormPanel, {
+  FormPanelRef,
+  getFieldsLocale,
+} from "@/components/panels/form-panel";
+import { Overlay } from "@/components/custom/overlay";
+import { TabPanel } from "@/components/panels/tab-panel";
+import { EnumFieldType } from "@/enums/EnumFieldType";
+import {
+  useSettingGroupGet,
+  useSettingGroupUpdate,
+} from "@/features/blog/setting-group";
+import useEffectAfterFirstUpdate from "@/hooks/use-effect-after-first-update";
+import { SettingGroup } from "@/types/models";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+export type SettingGroupUpdatePanelProps = {
+  data: SettingGroup;
+  onUpdated?: (data: SettingGroup) => void;
+};
+
+const SettingGroupUpdatePanel = forwardRef(
+  ({ data, onUpdated }: SettingGroupUpdatePanelProps, ref) => {
+    const { t } = useTranslation(["actions"]);
+    const { data: item, isLoading } = useSettingGroupGet(data.id as number);
+    const { mutate: settingGroupUpdate } = useSettingGroupUpdate();
+    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: "icon",
+                      label: { text: t("icon", { ns: "translation" }) },
+                      type: EnumFieldType.TEXT,
+                      required: true,
+                    },
+
+                    ...getFieldsLocale([{ name: "name" }]),
+                  ]}
+                  button={{ text: t("save", { ns: "actions" }) }}
+                  onSubmit={(data) => {
+                    settingGroupUpdate({ id: data.id, data });
+                    if (typeof onUpdated === "function") {
+                      onUpdated(data);
+                    }
+                  }}
+                />
+              </Overlay>
+            ),
+          },
+        ]}
+      />
+    );
+  },
+);
+
+SettingGroupUpdatePanel.displayName = "SettingGroupUpdatePanel";
+
+export default SettingGroupUpdatePanel;

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

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

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

@@ -0,0 +1,11 @@
+{
+  "create": "Criar grupo de configurações",
+  "createText": "Preencha as informações do grupo de configurações.",
+  "createTooltip": "Criar novo grupo de configurações",
+  "delete": "Excluir grupo de configurações",
+  "deleteText": "Você tem certeza de que deseja excluir esses grupos de configurações?",
+  "deleteTooltip": "Excluir o grupo de configurações selecionado",
+  "edit": "Editar grupo de configurações",
+  "editText": "Visualizar e editar informações do grupo de configurações.",
+  "editTooltip": "Editar o grupo de configurações selecionado"
+}

package/frontend/setting-group/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-group";
+
+export function useSettingGroupCreate() {
+  const { settingGroupCreate } = requests();
+  return useDefaultMutation(scope, "create", settingGroupCreate);
+}
+
+export function useSettingGroupDelete() {
+  const { settingGroupDelete } = requests();
+  return useDefaultMutation(scope, "delete", settingGroupDelete);
+}
+
+export function useSettingGroupUpdate() {
+  const { settingGroupUpdate } = requests();
+  return useDefaultMutation(scope, "update", settingGroupUpdate);
+}
+
+export function useSettingGroupGet(id: number) {
+  const { settingGroupGet } = requests();
+  return useQuery({
+    queryKey: [scope, "get"],
+    queryFn: () => settingGroupGet(id),
+  });
+}

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

@@ -0,0 +1,58 @@
+import { useApp } from "@/hooks/use-app";
+import { Delete, PaginationParams, PaginationResult } from "@/types";
+import { SettingGroup } from "@/types/models";
+import { HttpMethod } from "@/types/http-method";
+import { formatDataWithLocale } from "@hedhog/utils";
+
+export function requests() {
+  const { request } = useApp();
+
+  const settingGroupList = async (params: PaginationParams) => {
+    return request<PaginationResult<SettingGroup>>({
+      url: "/setting-group",
+      params,
+    }).then((res) => res.data);
+  };
+
+  const settingGroupGet = async (id: number) => {
+    return request<SettingGroup>({
+      url: `/setting-group/${id}`,
+    }).then((res) => res.data);
+  };
+
+  const settingGroupCreate = async (data: SettingGroup) => {
+    return request<SettingGroup>({
+      url: "/setting-group",
+      method: HttpMethod.POST,
+      data: formatDataWithLocale(data),
+    }).then((res) => res.data);
+  };
+
+  const settingGroupDelete = async (ids: number[]) => {
+    return request<Delete>({
+      url: "/setting-group",
+      data: { ids },
+      method: HttpMethod.DELETE,
+    }).then((res) => res.data);
+  };
+
+  const settingGroupUpdate = async (params: {
+    id: number;
+    data: SettingGroup;
+  }) => {
+    const { id, data } = params;
+    return request<SettingGroup>({
+      url: `/setting-group/${id}`,
+      method: HttpMethod.PATCH,
+      data: formatDataWithLocale(data),
+    }).then((res) => res.data);
+  };
+
+  return {
+    settingGroupCreate,
+    settingGroupUpdate,
+    settingGroupDelete,
+    settingGroupList,
+    settingGroupGet,
+  };
+}

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

@@ -0,0 +1,71 @@
+import FormPanel, { FormPanelRef } from "@/components/panels/form-panel";
+import { EnumFieldType } from "@/enums/EnumFieldType";
+import { useSettingUserCreate } from "@/features/blog/setting-user";
+import { SettingUser } from "@/types/models";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+export type SettingUserCreatePanelRef = {
+  submit: () => void;
+};
+
+export type SettingUserCreatePanelProps = {
+  onCreated?: (data: SettingUser) => void;
+};
+
+const SettingUserCreatePanel = forwardRef(
+  ({ onCreated }: SettingUserCreatePanelProps, ref) => {
+    const formRef = useRef<FormPanelRef>(null);
+    const { t } = useTranslation(["actions"]);
+    const { mutateAsync: createSettingUser } = useSettingUserCreate();
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        submit: () => {
+          formRef.current?.submit();
+        },
+      }),
+      [formRef],
+    );
+
+    return (
+      <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("create", { ns: "actions" }) }}
+        onSubmit={async (data) => {
+          const createdData = await createSettingUser(data);
+          if (typeof onCreated === "function") {
+            onCreated(createdData);
+          }
+        }}
+      />
+    );
+  },
+);
+
+SettingUserCreatePanel.displayName = "SettingUserCreatePanel";
+
+export default SettingUserCreatePanel;