@gadmin2n/schematics 0.0.64 → 0.0.66

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/components/action-cell.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+
+import { ZoomInOutlined } from "@ant-design/icons";
+import { Button, Modal, Table } from "antd";
+import type { ColumnsType } from "antd/es/table";
+
+import { Text } from "components";
+import { AuditLogActionEnum } from "enums";
+import { AuditLog } from "types";
+import { renderLongColumnValue } from "helpers";
+
+import "./action-cell.css";
+
+export const ActionCell = ({ record }: { record: AuditLog }) => {
+  const [opened, setOpened] = useState(false);
+
+  const columns: ColumnsType<{
+    field: string;
+    from: any;
+    to: any;
+  }> = [
+    {
+      title: "Field",
+      dataIndex: "field",
+      key: "field",
+      render: (value) => <Text strong>{value}</Text>,
+      width: "20%",
+    },
+  ];
+
+  if (record.action === AuditLogActionEnum.update) {
+    columns.push({
+      title: "Old value",
+      dataIndex: "from",
+      key: "from",
+      width: "40%",
+      ellipsis: false,
+      render: (value) => {
+        if (value === null || value === undefined) {
+          return <Text type="secondary">-</Text>;
+        }
+        if (typeof value === "object") {
+          return renderLongColumnValue(JSON.stringify(value, null, 2));
+        }
+        return renderLongColumnValue(String(value));
+      },
+    });
+  }
+
+  columns.push({
+    title: "New value",
+    dataIndex: "to",
+    key: "to",
+    width: "40%",
+    ellipsis: false,
+    render: (value) => {
+      if (value === null || value === undefined) {
+        return <Text type="secondary">-</Text>;
+      }
+      if (typeof value === "object") {
+        return renderLongColumnValue(JSON.stringify(value, null, 2));
+      }
+      return renderLongColumnValue(String(value));
+    },
+  });
+
+  if (!record.data) {
+    return null;
+  }
+
+  const newData = JSON.parse(record.data || "{}");
+  const previousData = JSON.parse(record.previousData || "{}");
+  const changes = Object.entries(newData).map(([key, value]) => ({
+    field: key,
+    from: previousData[key],
+    to: value,
+  }));
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <Button
+          size="small"
+          icon={<ZoomInOutlined />}
+          onClick={() => setOpened((prev) => !prev)}
+        >
+          Details
+        </Button>
+      </div>
+      {opened && (
+        <Modal
+          open={opened}
+          onOk={() => setOpened(false)}
+          onCancel={() => setOpened(false)}
+          style={{ minWidth: "60vw" }}
+          styles={{
+            body: {
+              maxHeight: "500px",
+              overflow: "auto",
+            },
+          }}
+        >
+          <Table
+            dataSource={changes}
+            pagination={false}
+            rowKey="field"
+            bordered
+            size="small"
+            columns={columns}
+            style={{ marginTop: "48px" }}
+            rowClassName={(row) => {
+              return record.action === AuditLogActionEnum.update &&
+                row.from !== row.to
+                ? "highlight-changed-row"
+                : "";
+            }}
+          />
+        </Modal>
+      )}
+    </div>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/create.tsx

@@ -0,0 +1,113 @@
+
+import {
+  FieldDataType,
+  handleInitialValues,
+  handleOnFinish,
+  ModelType,
+  produceModel,
+} from '@gadmin2n/react-common';
+import { Create, useFileUploadState, useForm } from "@refinedev/antd";
+import { Form } from "antd";
+import { IResourceComponentsProps, useApiUrl, useTranslate } from "@refinedev/core";
+import React, { useContext, useState } from "react";
+import { getFormItem, onFormValuesChange } from "../../helpers";
+import { modelsMap, modelsEnum } from "../../generated/models.index";
+import {
+  auditFormConfig as formConfig,
+  auditFormPrismaSelect as formPrismaSelect,
+} from "../../generated/props/audit/config";
+import {
+  auditModel,
+  useRelation,
+} from "../../generated/props/audit/model";
+import { Audit } from "../../generated/types/prisma.types";
+import { AuditForm as transformClass } from "../../generated/props/audit/form.validator";
+import { BusinessContext } from 'components/contexts/business';
+
+export const AuditCreate: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = "audit";
+  const t = useTranslate();
+  
+  
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(
+      auditModel,
+      {
+        // all formItem attrs surport, https://ant.design/components/form#formitem
+        // description : { component : <MDEditor data-color-mode="light" /> },
+        // status : { normalize : (value: any) => value ? "1" : "0" },
+        // cron: {validator: { validator: runCronValidator },},
+      },
+      transformClass
+    );
+
+    const fields: FieldDataType[] = formConfig.fields
+      .map((fieldName: string) => model[fieldName])
+      .filter((field: FieldDataType) => field);
+
+    return [fields, model] as const;
+  });
+
+  const { formProps, saveButtonProps, onFinish, form } =
+    useForm<Audit>({
+      meta: { select: formPrismaSelect},
+    });
+  if (formProps.initialValues || formConfig.initialValues) {
+    formProps.initialValues = handleInitialValues(
+      formProps.initialValues || formConfig.initialValues || {},
+      fields,
+    );
+  }
+
+  const apiUrl = useApiUrl();
+  const { isLoading, onChange } = useFileUploadState();
+  const relationSelectProps = useRelation(modelsMap);
+
+  return (
+    <Create
+      saveButtonProps={{
+        ...saveButtonProps,
+        disabled: isLoading,
+      }}
+    >
+      <Form
+        {...formProps}
+        validateTrigger="onBlur"
+        onFinish={(values) => {
+          onFinish(
+            handleOnFinish(
+              {
+                ...values,
+                
+              },
+              fields
+            )
+          );
+        }}
+        layout="vertical"
+        form={form}
+        onValuesChange={onFormValuesChange(
+          form,
+          formConfig.reaction,
+        )}
+      >
+        {fields.map((field) => {
+          return getFormItem(
+            field,
+            resourceName,
+            t,
+            form,
+            formConfig.reaction,
+            modelsEnum,
+            model,
+            apiUrl,
+            relationSelectProps,
+            onChange
+          );
+        })}
+      </Form>
+    </Create>
+  );
+};
+  

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/edit.tsx

@@ -0,0 +1,122 @@
+
+import {
+  FieldDataType,
+  handleInitialValues,
+  handleOnFinish,
+  ModelType,
+  produceModel,
+} from "@gadmin2n/react-common";
+import { Edit, ListButton, RefreshButton, useFileUploadState, useForm } from "@refinedev/antd";
+import { Form } from "antd";
+import { IResourceComponentsProps, useApiUrl, useParsed, useTranslate } from "@refinedev/core";
+import { getFormItem, onFormValuesChange } from "../../helpers";
+import React, { useContext, useState } from "react";
+
+import { modelsMap, modelsEnum } from "../../generated/models.index";
+import {
+  auditFormConfig as formConfig,
+  auditFormPrismaSelect as formPrismaSelect,
+} from "../../generated/props/audit/config";
+import {
+  auditModel,
+  useRelation,
+} from "../../generated/props/audit/model";
+import { Audit } from "../../generated/types/prisma.types";
+import { AuditForm as transformClass } from "../../generated/props/audit/form.validator";
+import { BusinessContext } from 'components/contexts/business';
+
+export const AuditEdit: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = "audit";
+  const t = useTranslate();
+  
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(
+      auditModel,
+      {
+        // all formItem attrs surport, https://ant.design/components/form#formitem
+        // description : { component : <MDEditor data-color-mode="light" /> },
+        // status : { normalize : (value: any) => value ? "1" : "0" },
+        // cron: {validator: { validator: runCronValidator },},
+      },
+      transformClass
+    );
+
+    const fields: FieldDataType[] = formConfig.fields
+      .map((fieldName: string) => model[fieldName])
+      .filter((field: FieldDataType) => field);
+
+    return [fields, model] as const;
+  });
+
+  const { formProps, saveButtonProps, onFinish, form } =
+    useForm<Audit>({
+      meta: { select: formPrismaSelect},
+    });
+  formProps.initialValues = handleInitialValues(
+    formProps.initialValues || {},
+    fields
+  );
+
+  const apiUrl = useApiUrl();
+  const { isLoading, onChange } = useFileUploadState();
+
+  const relationSelectProps = useRelation(modelsMap);
+
+  return (
+    <Edit
+      saveButtonProps={{
+        ...saveButtonProps,
+        disabled: isLoading,
+      }}
+      headerButtons={
+        <>
+          <ListButton />
+          <RefreshButton
+            meta={{ select: formPrismaSelect}}
+          />
+        </>
+      }
+    >
+      <Form
+        {...formProps}
+        validateTrigger="onBlur"
+        onFinish={(values) => {
+          onFinish(
+            handleOnFinish(
+              {
+                ...values,
+                
+                id: undefined,
+              },
+              fields,
+              "edit"
+            )
+          );
+        }}
+        layout="vertical"
+        form={form}
+        onValuesChange={onFormValuesChange(
+          form,
+          formConfig.reaction,
+        )}
+      >
+        {fields.map((field) => {
+          return getFormItem(
+            field,
+            resourceName,
+            t,
+            form,
+            formConfig.reaction,
+            modelsEnum,
+            model,
+            apiUrl,
+            relationSelectProps,
+            onChange
+          );
+        })}
+      </Form>
+    </Edit>
+  );
+};
+  

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/index.ts

@@ -0,0 +1,8 @@
+export * from './list';
+
+// Stub exports for generated/resources.tsx compatibility (gadmin2 generated imports)
+const EmptyComponent = () => null;
+export const AuditCreate = EmptyComponent;
+export const AuditEdit = EmptyComponent;
+export const AuditList = EmptyComponent;
+export const AuditShow = EmptyComponent;

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/index.tsx

@@ -0,0 +1,6 @@
+
+export * from "./list";
+export * from "./create";
+export * from "./edit";
+export * from "./show";
+  

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/list.tsx

@@ -0,0 +1,213 @@
+import {
+  DateField,
+  FilterDropdown,
+  getDefaultSortOrder,
+  List,
+  rangePickerFilterMapper,
+  useTable,
+} from "@refinedev/antd";
+import { getDefaultFilter, HttpError } from "@refinedev/core";
+
+import { SearchOutlined } from "@ant-design/icons";
+import {
+  DatePicker,
+  Input,
+  Radio,
+  Space,
+  Table,
+  Tag,
+  type TagProps,
+} from "antd";
+
+import { CustomAvatar, PaginationTotal } from "components";
+import { AuditLogActionEnum, auditLogActionOptions } from "enums";
+import { AuditLog } from "types";
+
+import { ActionCell } from "./components/action-cell";
+import { LIST_CONTENT_PROPS } from "constants/layout";
+
+
+const getActionColor = (action: string): TagProps["color"] => {
+  switch (action) {
+    case AuditLogActionEnum.create:
+      return "green";
+    case AuditLogActionEnum.update:
+      return "cyan";
+    case AuditLogActionEnum.delete:
+      return "red";
+    default:
+      return "default";
+  }
+};
+
+export const AuditLogPage = () => {
+  const { tableProps, filters, sorters } = useTable<
+    AuditLog,
+    HttpError,
+    Partial<AuditLog>
+  >({
+    resource: "audit",
+    pagination: {
+      pageSize: 20,
+    },
+    filters: {
+      initial: [
+        { field: "authorName", operator: "contains", value: "" },
+        { field: "resource", operator: "contains", value: "" },
+        { field: "timestamp", value: undefined as any, operator: "between" },
+      ],
+    },
+    sorters: {
+      initial: [{ field: "id", order: "desc" }],
+    },
+  });
+
+  // fix for ant design filter dropdown contains operator
+  filters.map((filter) => {
+    if (filter.operator === "contains" && Array.isArray(filter.value)) {
+      filter.value = filter.value.join(",");
+    }
+  });
+
+  return (
+    <div className="page-container">
+      <List breadcrumb={false} canCreate={false} contentProps={LIST_CONTENT_PROPS}>
+        <Table
+          className="audit-log-table"
+          {...tableProps}
+          rowKey="id"
+          scroll={{ x: true }}
+          pagination={{
+            ...tableProps.pagination,
+            showTotal: (total) => (
+              <PaginationTotal total={total} entityName="audit logs" />
+            ),
+          }}
+        >
+          <Table.Column
+            dataIndex="authorName"
+            title="User"
+            width="15%"
+            filterIcon={<SearchOutlined />}
+            render={(_, record: AuditLog) => {
+              return (
+                <Space>
+                  <CustomAvatar
+                    src={`https://rhrc.woa.com/photo/150/${record.authorName}.png`}
+                    name={record.authorName}
+                  />
+                  {record.authorName || "N/A"}
+                </Space>
+              );
+            }}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Input />
+              </FilterDropdown>
+            )}
+            defaultFilteredValue={getDefaultFilter(
+              "authorName",
+              filters,
+              "contains"
+            )}
+          />
+          <Table.Column
+            dataIndex="action"
+            title="Action"
+            render={(_, record: AuditLog) => {
+              return (
+                <Space>
+                  <Tag color={getActionColor(record.action)}>
+                    {
+                      auditLogActionOptions.find(
+                        (option) => option.value === record.action
+                      )?.label
+                    }
+                  </Tag>
+                </Space>
+              );
+            }}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Radio.Group>
+                  {auditLogActionOptions.map((option) => (
+                    <Radio key={option.value} value={option.value}>
+                      {option.label}
+                    </Radio>
+                  ))}
+                </Radio.Group>
+              </FilterDropdown>
+            )}
+            defaultFilteredValue={getDefaultFilter("action", filters, "eq")}
+          />
+          <Table.Column
+            dataIndex="resource"
+            title="Entity"
+            filterIcon={<SearchOutlined />}
+            filterDropdown={props => (
+              <FilterDropdown
+                {...(props as any)}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Input />
+              </FilterDropdown>
+            )}
+            defaultFilteredValue={getDefaultFilter("resource", filters, "contains")}
+          />
+          <Table.Column dataIndex="resourceId" title="Entity ID" />
+          <Table.Column
+            dataIndex="data"
+            title="Changes"
+            render={(_, record: AuditLog) => <ActionCell record={record} />}
+          />
+          <Table.Column
+            dataIndex="timestamp"
+            title="Date & Time"
+            width="15%"
+            render={(value) => (
+              <DateField
+                style={{ verticalAlign: "middle" }}
+                value={value}
+                format="YYYY-MM-DD hh:mm:ss"
+              />
+            )}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                mapValue={rangePickerFilterMapper}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <DatePicker.RangePicker />
+              </FilterDropdown>
+            )}
+            sorter
+            defaultFilteredValue={getDefaultFilter(
+              "timestamp",
+              filters,
+              "between"
+            )}
+            defaultSortOrder={getDefaultSortOrder("timestamp", sorters)}
+          />
+        </Table>
+      </List>
+    </div>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/show.tsx

@@ -0,0 +1,61 @@
+
+import { ModelType, getColumns, produceModel } from "@gadmin2n/react-common";
+import { CloneButton, DeleteButton, EditButton, ListButton, RefreshButton, Show } from "@refinedev/antd";
+import { IResourceComponentsProps, useShow, useTranslate } from "@refinedev/core";
+import React, { useState } from "react";
+import { getShowField } from "../../helpers";
+import type { Audit } from "../../generated/types/prisma.types"; //'.prisma/client/index';
+import {
+  auditShowConfig as showConfig,
+  auditShowPrismaSelect as showPrismaSelect,
+} from "../../generated/props/audit/config";
+import { auditModel } from "../../generated/props/audit/model";
+import { modelsMap } from "generated/models.index";
+
+export const AuditShow: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = "audit";
+  const t = useTranslate();
+  
+  const { queryResult } = useShow<Audit>({
+    meta: { select: showPrismaSelect},
+  });
+  const { data, isLoading } = queryResult;
+  const record = data?.data;
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(auditModel, {
+      // status: { render: xxxxx }
+    });
+
+    // getColumns is a function that returns an array of fields
+    const fields = getColumns("Audit", showConfig.fields, {
+      ...modelsMap,
+      Audit: { model, meta: modelsMap["Audit"].meta },
+    });
+
+    return [fields, model] as const;
+  });
+
+  return (
+    <Show
+      isLoading={isLoading}
+      headerButtons={
+        <>
+          <ListButton/>
+          <EditButton recordItemId={record?.id} />
+          <CloneButton recordItemId={record?.id} />
+          <DeleteButton recordItemId={record?.id} />
+          <RefreshButton
+            recordItemId={record?.id}
+            meta={{ select: showPrismaSelect}}
+          />
+        </>
+      }
+    >
+      {fields.map((field: any) => {
+        return getShowField(field, resourceName, record, t, model, modelsMap);
+      })}
+    </Show>
+  );
+};
+