@gadmin2n/schematics 0.0.64 → 0.0.65

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/components/form-modal.tsx

@@ -0,0 +1,188 @@
+import React, { useState } from "react";
+
+import { useModalForm } from "@refinedev/antd";
+import { type HttpError, type RedirectAction } from "@refinedev/core";
+
+import { Button, Form, Input, Modal, Select, Space, Switch } from "antd";
+import { ReloadOutlined } from "@ant-design/icons";
+
+import { useRoles } from "hooks/useRoles";
+import { User } from "types";
+
+import { UserSelect } from "../queries";
+
+const generateApiKey = () => crypto.randomUUID();
+
+type Props = {
+  action: "create" | "edit";
+  id?: number;
+  redirect?: RedirectAction;
+  onMutationSuccess?: () => void;
+  onCancel?: () => void;
+};
+
+export const UserFormModal: React.FC<Props> = ({
+  action,
+  id,
+  redirect,
+  onCancel,
+  onMutationSuccess,
+}) => {
+  const [isApiKey, setIsApiKey] = useState(false);
+  const [usernameTouched, setUsernameTouched] = useState(false);
+
+  // Fetch roles from backend using custom hook
+  const { roleOptions, loading: rolesLoading } = useRoles();
+
+  const { formProps, modalProps, onFinish, close, form } = useModalForm<
+    User,
+    HttpError,
+    Partial<User>
+  >({
+    resource: "user",
+    action,
+    id,
+    defaultVisible: true,
+    redirect,
+    onMutationSuccess: () => {
+      onMutationSuccess?.();
+    },
+    meta: {
+      select: UserSelect,
+    },
+  });
+
+  // fix react-query cache data type error
+  if (
+    formProps.initialValues?.roles &&
+    typeof formProps.initialValues.roles === "string"
+  ) {
+    formProps.initialValues.roles = JSON.parse(formProps.initialValues.roles);
+  }
+
+  // sync isApiKey state with form initial values
+  React.useEffect(() => {
+    if (formProps.initialValues?.isApiKey !== undefined) {
+      setIsApiKey(formProps.initialValues.isApiKey);
+    }
+  }, [formProps.initialValues?.isApiKey]);
+
+  const handleGenerateApiKey = () => {
+    const newKey = generateApiKey();
+    form.setFieldsValue({ apiKey: newKey });
+  };
+
+  const handleIsApiKeyChange = (checked: boolean) => {
+    setIsApiKey(checked);
+    if (checked && !form.getFieldValue("apiKey")) {
+      handleGenerateApiKey();
+    }
+    if (checked) {
+      form.setFieldsValue({ isActive: true });
+    }
+  };
+
+  formProps.onFinish = (values) => {
+    onFinish({ ...values, roles: JSON.stringify(values.roles) });
+  };
+
+  return (
+    <Modal
+      {...modalProps}
+      width={560}
+      onCancel={() => {
+        if (onCancel) {
+          onCancel();
+          return;
+        }
+        //TODO: modalProps.onCancel expect an event so, I used close. Actually both of them are same.
+        close();
+      }}
+      title={action === "create" ? "Create User" : "Edit User"}
+    >
+      <Form {...formProps} layout="vertical">
+        <Form.Item rules={[{ required: true }]} name="userid" label="User ID(WecomId 或者 太湖帐号名)">
+          <Input
+            placeholder="Please enter user ID"
+            onChange={(e) => {
+              if (action === "create" && !usernameTouched) {
+                form.setFieldsValue({ username: e.target.value });
+              }
+            }}
+          />
+        </Form.Item>
+
+        <Form.Item
+          rules={[{ required: true }]}
+          name="username"
+          label="Username(一般设置为和上面的 User ID 一样)"
+        >
+          <Input
+            placeholder="Please enter username"
+            onChange={() => {
+              if (!usernameTouched) setUsernameTouched(true);
+            }}
+          />
+        </Form.Item>
+
+        <Form.Item rules={[{ required: true }]} name="roles" label="Roles">
+          <Select
+            mode="multiple"
+            placeholder="Please select roles"
+            options={roleOptions}
+            loading={rolesLoading}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="isActive"
+          label="Is Active"
+          valuePropName="checked"
+          initialValue={true}
+        >
+          <Switch />
+        </Form.Item>
+
+        <Form.Item
+          name="isApiKey"
+          label="Is API Key User(用来提供给其他开发者以apikey的方式来访问)"
+          valuePropName="checked"
+        >
+          <Switch onChange={handleIsApiKeyChange} />
+        </Form.Item>
+
+        {isApiKey && (
+          <>
+            <Form.Item
+              label="API Key"
+              rules={[{ required: isApiKey, message: "Please generate API Key" }]}
+            >
+              <Space.Compact style={{ width: "100%" }}>
+                <Form.Item name="apiKey" noStyle>
+                  <Input
+                    placeholder="Click button to generate API Key"
+                    style={{ fontFamily: "monospace" }}
+                  />
+                </Form.Item>
+                <Button
+                  type="primary"
+                  icon={<ReloadOutlined />}
+                  onClick={handleGenerateApiKey}
+                >
+                  {form.getFieldValue("apiKey") ? "Regenerate" : "Generate"}
+                </Button>
+              </Space.Compact>
+            </Form.Item>
+
+            <Form.Item name="description" label="Description">
+              <Input.TextArea
+                rows={2}
+                placeholder="Please enter description for this API Key"
+              />
+            </Form.Item>
+          </>
+        )}
+      </Form>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,5 @@
+export * from "./create-modal";
+export * from "./edit-modal";
+export * from "./form-modal";
+export * from "./role-tag";
+export * from "./show-drawer";

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/components/role-tag.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { CrownOutlined, StarOutlined, UserOutlined } from "@ant-design/icons";
+import { Tag, type TagProps } from "antd";
+
+type Props = {
+  role: any;
+};
+
+export const RoleTag: React.FC<Props> = ({ role }) => {
+  const variants: {
+    [key in any]: {
+      color: TagProps["color"];
+      icon: React.ReactNode;
+    };
+  } = {
+    ADMIN: {
+      color: "red",
+      icon: <CrownOutlined />,
+    },
+    SALES_INTERN: {
+      color: "blue",
+      icon: <UserOutlined />,
+    },
+    SALES_PERSON: {
+      color: "geekblue",
+      icon: <UserOutlined />,
+    },
+    SALES_MANAGER: {
+      color: "cyan",
+      icon: <StarOutlined />,
+    },
+  };
+
+  const text = role.replace("_", " ").toLowerCase();
+
+  return (
+    <Tag
+      style={{
+        textTransform: "capitalize",
+      }}
+      color={variants[role].color}
+      icon={variants[role].icon}
+    >
+      {text}
+    </Tag>
+  );
+};

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

@@ -0,0 +1,140 @@
+import React from "react";
+
+import { TagField } from "@refinedev/antd";
+import { useShow } from "@refinedev/core";
+
+import { CloseOutlined } from "@ant-design/icons";
+import { Button, Drawer, Space, Tag, Typography } from "antd";
+import dayjs from "dayjs";
+
+import styles from "styles/show-drawer.module.css";
+import { User } from "types";
+
+import { UserSelect } from "../queries";
+
+const { Title, Text } = Typography;
+
+interface ShowDrawerProps {
+  id?: number;
+  onClose: () => void;
+}
+
+export const ShowDrawer: React.FC<ShowDrawerProps> = ({ id, onClose }) => {
+  const { query } = useShow<User>({
+    resource: "user",
+    id,
+    meta: {
+      select: UserSelect,
+    },
+  });
+
+  const { data, isLoading, isError } = query;
+
+  if (isError) {
+    onClose();
+    return null;
+  }
+
+  const {
+    userid,
+    username,
+    roles,
+    isApiKey,
+    apiKey,
+    description,
+    isActive,
+    lastUsedAt,
+    creator,
+    createdAt,
+    updatedAt,
+  } = data?.data ?? {};
+
+  return (
+    <Drawer
+      open
+      onClose={onClose}
+      loading={isLoading}
+      width={756}
+      styles={{
+        body: { background: "#f5f5f5", padding: 0 },
+        header: { display: "none" },
+      }}
+    >
+      <div className={styles.header}>
+        <Button type="text" icon={<CloseOutlined />} onClick={onClose} />
+      </div>
+      <div className={styles.container}>
+        <div key="id">
+          <Title level={5}>ID</Title>
+          <Text>{id}</Text>
+        </div>
+        <div key="userid">
+          <Title level={5}>User ID</Title>
+          <Text>{userid}</Text>
+        </div>
+        <div key="username">
+          <Title level={5}>User Name</Title>
+          <Text>{username || "-"}</Text>
+        </div>
+        <div key="roles">
+          <Title level={5}>Roles</Title>
+          <Space>
+            {(Array.isArray(roles) ? roles : JSON.parse(roles || "[]"))?.map?.(
+              (v: string) => (
+                <TagField key={v} value={String(v)} />
+              )
+            )}
+          </Space>
+        </div>
+        <div key="isApiKey">
+          <Title level={5}>Is API Key</Title>
+          <Tag color={isApiKey ? "blue" : "default"}>
+            {isApiKey ? "Yes" : "No"}
+          </Tag>
+        </div>
+        {isApiKey && (
+          <>
+            <div key="apiKey">
+              <Title level={5}>API Key</Title>
+              <Text copyable={{ text: apiKey || "" }} style={{ fontFamily: "monospace" }}>
+                {apiKey || "-"}
+              </Text>
+            </div>
+            <div key="description">
+              <Title level={5}>Description</Title>
+              <Text>{description || "-"}</Text>
+            </div>
+            <div key="lastUsedAt">
+              <Title level={5}>Last Used At</Title>
+              <Text>
+                {lastUsedAt ? dayjs(lastUsedAt).format("YYYY-MM-DD HH:mm:ss") : "-"}
+              </Text>
+            </div>
+          </>
+        )}
+        <div key="isActive">
+          <Title level={5}>Is Active</Title>
+          <Tag color={isActive ? "green" : "red"}>
+            {isActive ? "Active" : "Inactive"}
+          </Tag>
+        </div>
+        <div key="creator">
+          <Title level={5}>Creator</Title>
+          <Text>{creator || "-"}</Text>
+        </div>
+        <div key="createdAt">
+          <Title level={5}>Created At</Title>
+          <Text>
+            {createdAt ? dayjs(createdAt).format("YYYY-MM-DD HH:mm:ss") : "-"}
+          </Text>
+        </div>
+        <div key="updatedAt">
+          <Title level={5}>Updated At</Title>
+          <Text>
+            {updatedAt ? dayjs(updatedAt).format("YYYY-MM-DD HH:mm:ss") : "-"}
+          </Text>
+        </div>
+      </div>
+    </Drawer>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/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 {
+  userFormConfig as formConfig,
+  userFormPrismaSelect as formPrismaSelect,
+} from "../../generated/props/user/config";
+import {
+  userModel,
+  useRelation,
+} from "../../generated/props/user/model";
+import { User } from "../../generated/types/prisma.types";
+import { UserForm as transformClass } from "../../generated/props/user/form.validator";
+import { BusinessContext } from 'components/contexts/business';
+
+export const UserCreate: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = "user";
+  const t = useTranslate();
+  
+  
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(
+      userModel,
+      {
+        // 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<User>({
+      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/user/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 {
+  userFormConfig as formConfig,
+  userFormPrismaSelect as formPrismaSelect,
+} from "../../generated/props/user/config";
+import {
+  userModel,
+  useRelation,
+} from "../../generated/props/user/model";
+import { User } from "../../generated/types/prisma.types";
+import { UserForm as transformClass } from "../../generated/props/user/form.validator";
+import { BusinessContext } from 'components/contexts/business';
+
+export const UserEdit: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = "user";
+  const t = useTranslate();
+  
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(
+      userModel,
+      {
+        // 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<User>({
+      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/user/index.ts

@@ -0,0 +1,8 @@
+export * from "./list";
+
+// Stub exports for generated/resources.tsx compatibility
+const EmptyComponent = () => null;
+export const UserCreate = EmptyComponent;
+export const UserEdit = EmptyComponent;
+export const UserList = EmptyComponent;
+export const UserShow = EmptyComponent;

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

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