@hedhog/admin 0.48.5 → 0.48.7

package/frontend/dashboard-user/components/dashboard-user.screen.tsx.ejs

@@ -0,0 +1,131 @@
+import { PageTitle } from '@/components/custom/page-title'
+import DataPanel from '@/components/panels/data-panel'
+import { useDashboardUserDelete } from '@/features/dashboard/dashboard-user'
+import { useApp } from '@/hooks/use-app'
+import { isPlural } from '@/lib/utils'
+import { DashboardUser } from '@/types/models'
+import { IconEdit, IconPlus, IconTrash } from '@tabler/icons-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import DashboardUserCreatePanel from './components/dashboard-user-create-panel'
+import DashboardUserUpdatePanel from './components/dashboard-user-update-panel'
+import DashboardUserCard from '@/components/cards/dashboard-user-card'
+
+export default function Page() {
+  const [selectedItems, setSelectedItems] = useState<DashboardUser[]>([])
+  const { mutate: deleteDashboardUser } = useDashboardUserDelete()
+  const { openSheet, confirm, closeSheet } = useApp()
+  const { t } = useTranslation([
+    'dashboard.dashboard-user',
+    'modules',
+    'actions',
+    'fields',
+  ])
+
+  const openCreate = () => {
+    const id = openSheet({
+      title: t('create', { ns: 'dashboard.dashboard-user' }),
+      description: t('createText', {
+        ns: 'dashboard.dashboard-user',
+      }),
+      children: () => (
+        <DashboardUserCreatePanel onCreated={() => closeSheet(id)} />
+      ),
+    })
+
+    return id
+  }
+
+  const openDelete = (items: DashboardUser[]) => {
+    return confirm({
+      title: `${t('delete', { ns: 'dashboard.dashboard-user' })} ${items.length} ${isPlural(items.length) ? t('items', { ns: 'actions' }) : t('item', { ns: 'actions' })}`,
+      description: t('deleteText', {
+        ns: 'dashboard.dashboard-user',
+      }),
+    })
+      .then(() =>
+        deleteDashboardUser(
+          items
+            .map((item) => (item as any).component_id)
+            .filter((id) => id !== undefined)
+        )
+      )
+      .catch(() => setSelectedItems(items))
+  }
+
+  const openUpdate = (item: DashboardUser) => {
+    const id = openSheet({
+      children: () => (
+        <DashboardUserUpdatePanel
+          data={item}
+          onUpdated={() => closeSheet(id)}
+        />
+      ),
+      title: t('edit', { ns: 'dashboard.dashboard-user' }),
+      description: t('editText', {
+        ns: 'dashboard.dashboard-user',
+      }),
+    })
+
+    return id
+  }
+
+  return (
+    <>
+      <PageTitle title={t('dashboard_user', { ns: 'modules' })} />
+      <DataPanel
+        url='/dashboard-user'
+        layout='grid'
+        id='dashboard-user'
+        selectable
+        render={(item: DashboardUser) => <DashboardUserCard item={item} />}
+        responsiveColumns={{
+          default: 1,
+          sm: 2,
+          md: 1,
+          lg: 2,
+          xl: 3,
+        }}
+        selected={selectedItems as DashboardUser[]}
+        multiple
+        hasSearch
+        onItemDoubleClick={(item) => openUpdate(item)}
+        menuActions={[
+          {
+            icon: <IconEdit className='mr-1 w-8 cursor-pointer' />,
+            label: t('edit', { ns: 'actions' }),
+            tooltip: t('editTooltip', { ns: 'dashboard.dashboard-user' }),
+            handler: (items: DashboardUser[]) => {
+              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: 'dashboard.dashboard-user',
+            }),
+            variant: 'destructive',
+            handler: (items: DashboardUser[]) => {
+              openDelete(items)
+            },
+            show: 'some',
+          },
+          {
+            icon: <IconPlus className='mr-1 w-8 cursor-pointer' />,
+            label: t('create', { ns: 'actions' }),
+            tooltip: t('createTooltip', {
+              ns: 'dashboard.dashboard-user',
+            }),
+            variant: 'default',
+            handler: () => {
+              openCreate()
+            },
+            show: 'none',
+          },
+        ]}
+      />
+    </>
+  )
+}

package/frontend/dashboard-user/components/update-panel.tsx.ejs

@@ -0,0 +1,138 @@
+import FormPanel, { FormPanelRef } from '@/components/panels/form-panel'
+import { Overlay } from '@/components/custom/overlay'
+import { TabPanel } from '@/components/panels/tab-panel'
+import {
+  useDashboardUserGet,
+  useDashboardUserUpdate,
+} from '@/features/dashboard/dashboard-user'
+import useEffectAfterFirstUpdate from '@/hooks/use-effect-after-first-update'
+import { DashboardUser } from '@/types/models'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { EnumFieldType } from '@/enums/EnumFieldType'
+
+export type DashboardUserUpdatePanelProps = {
+  data: DashboardUser
+  onUpdated?: (data: DashboardUser) => void
+}
+
+const DashboardUserUpdatePanel = forwardRef(
+  ({ data, onUpdated }: DashboardUserUpdatePanelProps, ref) => {
+    const { t } = useTranslation(['actions', 'fields', 'translations'])
+    const { data: item, isLoading } = useDashboardUserGet(
+      (data as any).id as number
+    )
+
+    const { mutate: dashboardUserUpdate } = useDashboardUserUpdate()
+    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: 'item_id',
+                      label: {
+                        text: t('dashboard-user.item_id', { ns: 'fields' }),
+                      },
+                      type: EnumFieldType.COMBOBOX,
+                      required: true,
+                      url: '/dashboard-item',
+                      displayName: 'item',
+                      valueName: 'id',
+                    },
+
+                    {
+                      name: 'user_id',
+                      label: {
+                        text: t('dashboard-user.user_id', { ns: 'fields' }),
+                      },
+                      type: EnumFieldType.COMBOBOX,
+                      required: true,
+                      url: '/user',
+                      displayName: 'user',
+                      valueName: 'id',
+                    },
+
+                    {
+                      name: 'width',
+                      label: {
+                        text: t('dashboard-user.width', { ns: 'fields' }),
+                      },
+                      type: EnumFieldType.NUMBER,
+                      required: true,
+                    },
+
+                    {
+                      name: 'height',
+                      label: {
+                        text: t('dashboard-user.height', { ns: 'fields' }),
+                      },
+                      type: EnumFieldType.NUMBER,
+                      required: true,
+                    },
+
+                    {
+                      name: 'x_axis',
+                      label: {
+                        text: t('dashboard-user.x_axis', { ns: 'fields' }),
+                      },
+                      type: EnumFieldType.NUMBER,
+                      required: true,
+                    },
+
+                    {
+                      name: 'y_axis',
+                      label: {
+                        text: t('dashboard-user.y_axis', { ns: 'fields' }),
+                      },
+                      type: EnumFieldType.NUMBER,
+                      required: true,
+                    },
+                  ]}
+                  button={{ text: t('save', { ns: 'actions' }) }}
+                  onSubmit={(data) => {
+                    dashboardUserUpdate({
+                      id: data.id,
+                      data: {
+                        ...data,
+                        item_id: Number(data.item_id),
+                        user_id: Number(data.user_id),
+                        width: Number(data.width),
+                        height: Number(data.height),
+                        x_axis: Number(data.x_axis),
+                        y_axis: Number(data.y_axis),
+                      },
+                    })
+                    if (typeof onUpdated === 'function') {
+                      onUpdated(data)
+                    }
+                  }}
+                />
+              </Overlay>
+            ),
+          },
+        ]}
+      />
+    )
+  }
+)
+
+DashboardUserUpdatePanel.displayName = 'DashboardUserUpdatePanel'
+
+export default DashboardUserUpdatePanel;

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

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

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

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

package/frontend/dashboard-user/react-query/handlers.ts.ejs

@@ -0,0 +1,28 @@
+import { useDefaultMutation } from "@/hooks/use-default-mutation";
+import { useQuery } from "@tanstack/react-query";
+import { requests } from "./requests";
+
+const scope = "dashboard-user";
+
+export function useDashboardUserCreate() {
+  const { dashboardUserCreate } = requests();
+  return useDefaultMutation(scope, "create", dashboardUserCreate);
+}
+
+export function useDashboardUserDelete() {
+  const { dashboardUserDelete } = requests();
+  return useDefaultMutation(scope, "delete", dashboardUserDelete);
+}
+
+export function useDashboardUserUpdate() {
+  const { dashboardUserUpdate } = requests();
+  return useDefaultMutation(scope, "update", dashboardUserUpdate);
+}
+
+export function useDashboardUserGet(id: number) {
+  const { dashboardUserGet } = requests();
+  return useQuery({
+    queryKey: [scope, "get"],
+    queryFn: () => dashboardUserGet(id),
+  });
+}

package/frontend/dashboard-user/react-query/requests.ts.ejs

@@ -0,0 +1,58 @@
+import { useApp } from "@/hooks/use-app";
+import { Delete, PaginationParams, PaginationResult } from "@/types";
+import { DashboardUser } from "@/types/models";
+import { HttpMethod } from "@/types/http-method";
+
+export function requests() {
+  const { request } = useApp();
+
+  const dashboardUserList = async (params: PaginationParams) => {
+    return request<PaginationResult<DashboardUser>>({
+      url: "/dashboard-user",
+      params,
+    }).then((res) => res.data);
+  };
+
+  const dashboardUserGet = async (id: number) => {
+    return request<DashboardUser>({
+      url: `/dashboard-user/${id}`,
+    }).then((res) => res.data);
+  };
+
+  const dashboardUserCreate = async (params: { data: DashboardUser }) => {
+    const { data } = params;
+    return request<DashboardUser>({
+      url: "/dashboard-user",
+      method: HttpMethod.POST,
+      data: data,
+    }).then((res) => res.data);
+  };
+
+  const dashboardUserDelete = async (ids: number[]) => {
+    return request<Delete>({
+      url: "/dashboard-user",
+      data: { ids },
+      method: HttpMethod.DELETE,
+    }).then((res) => res.data);
+  };
+
+  const dashboardUserUpdate = async (params: {
+    id: number;
+    data: DashboardUser;
+  }) => {
+    const { id, data } = params;
+    return request<DashboardUser>({
+      url: `/dashboard-user/${id}`,
+      method: HttpMethod.PATCH,
+      data: data,
+    }).then((res) => res.data);
+  };
+
+  return {
+    dashboardUserCreate,
+    dashboardUserUpdate,
+    dashboardUserDelete,
+    dashboardUserList,
+    dashboardUserGet,
+  };
+}

package/frontend/translation/fields/en.json

@@ -1 +1,23 @@
-{}
+{
+  "dashboard.slug": "Slug",
+  "dashboard.path": "Path",
+  "dashboard.name": "Name",
+  "dashboard_locale.name": "Name",
+  "dashboard-user.item_id": "Item",
+  "dashboard-user.user_id": "User",
+  "dashboard-user.width": "Width",
+  "dashboard-user.height": "Height",
+  "dashboard-user.x_axis": "X Axis",
+  "dashboard-user.y_axis": "Y Axis",
+  "dashboard-item.component_id": "Component",
+  "dashboard-item.dashboard_id": "Dashboard",
+  "dashboard-component.slug": "Slug",
+  "dashboard-component.path": "Path",
+  "dashboard-component.width": "Width",
+  "dashboard-component.min_width": "Min Width",
+  "dashboard-component.max_width": "Max Width",
+  "dashboard-component.height": "Height",
+  "dashboard-component.min_height": "Min Height",
+  "dashboard-component.max_height": "Max Height",
+  "dashboard-component.is_resizable": "Resizable"
+}

package/frontend/translation/fields/pt.json

@@ -1 +1,27 @@
-{}
+{
+  "dashboard_component.slug": "Slug",
+  "dashboard_component.path": "Caminho",
+  "dashboard_component.name": "Nome",
+  "dashboard_component_locale.name": "Nome",
+  "dashboard.slug": "Slug",
+  "dashboard.path": "Caminho",
+  "dashboard.name": "Nome",
+  "dashboard_locale.name": "Nome",
+  "dashboard-user.item_id": "Item",
+  "dashboard-user.user_id": "Usuário",
+  "dashboard-user.width": "Largura",
+  "dashboard-user.height": "Altura",
+  "dashboard-user.x_axis": "Eixo X",
+  "dashboard-user.y_axis": "Eixo Y",
+  "dashboard-item.component_id": "Componente",
+  "dashboard-item.dashboard_id": "Dashboard",
+  "dashboard-component.slug": "Slug",
+  "dashboard-component.path": "Caminho",
+  "dashboard-component.width": "Largura",
+  "dashboard-component.min_width": "Largura Mínima",
+  "dashboard-component.max_width": "Largura Máxima",
+  "dashboard-component.height": "Altura",
+  "dashboard-component.min_height": "Altura Mínima",
+  "dashboard-component.max_height": "Altura Máxima",
+  "dashboard-component.is_resizable": "Redimensionável"
+}

package/frontend/translation/modules/en.json

@@ -1 +1,6 @@
-{}
+{
+  "dashboard": "Dashboard",
+  "dashboard_item": "Dashboard Item",
+  "dashboard_user": "Dashboard User",
+  "dashboard_component": "Dashboard Component"
+}

package/frontend/translation/modules/pt.json

@@ -1 +1,6 @@
-{}
+{
+  "dashboard": "Dashboard",
+  "dashboard_item": "Item de Dashboard",
+  "dashboard_user": "Usuário de Dashboard",
+  "dashboard_component": "Componente de Dashboard"
+}