@gadmin2n/schematics 0.0.64 → 0.0.65

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

@@ -0,0 +1,342 @@
+import React, { type PropsWithChildren, useState } from "react";
+
+import {
+  DeleteButton,
+  EditButton,
+  FilterDropdown,
+  List,
+  ShowButton,
+  useTable,
+} from "@refinedev/antd";
+import { getDefaultFilter, type HttpError } from "@refinedev/core";
+
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Form, Input, Select, Space, Table, Tag } from "antd";
+import debounce from "lodash/debounce";
+
+import {
+  CustomAvatar,
+  PaginationTotal,
+  RoleStatusTag,
+  Text,
+} from "components";
+import { useRoles } from "hooks/useRoles";
+import { User } from "types";
+
+import { CreateModal } from "./components/create-modal";
+import { EditModal } from "./components/edit-modal";
+import { ShowDrawer } from "./components/show-drawer";
+import { LIST_CONTENT_PROPS } from "constants/layout";
+
+export const UserListPage: React.FC<PropsWithChildren> = ({ children }) => {
+  const [form] = Form.useForm();
+  
+  // Fetch roles from backend using custom hook
+  const { roleOptions, loading: rolesLoading } = useRoles();
+  
+  // We want to always parse the query string even when syncWithLocation is
+  // deactivated, for hotlinking to work properly.
+  // 转换布尔字段过滤器的值（从字符串 "Yes"/"No" 转为 boolean）
+  const transformBooleanFilters = (filters: any[]) => {
+    return filters.map((filter) => {
+      if (
+        (filter.field === "isApiKey" || filter.field === "isActive") &&
+        filter.operator === "eq"
+      ) {
+        let boolValue: boolean | undefined;
+        if (filter.value === "Yes" || filter.value === "Active") {
+          boolValue = true;
+        } else if (filter.value === "No" || filter.value === "Inactive") {
+          boolValue = false;
+        }
+        return { ...filter, value: boolValue };
+      }
+      return filter;
+    });
+  };
+
+  const {
+    tableProps,
+    searchFormProps,
+    filters,
+    sorters,
+    tableQuery: tableQueryResult,
+  } = useTable<User, HttpError, Partial<User>>({
+    resource: "user",
+    pagination: {
+      pageSize: 20,
+    },
+    onSearch: (values: Partial<User>) => {
+      return Object.entries(values)
+        .filter(([, value]) => value !== undefined && value !== "")
+        .map(([field, value]) => ({
+          field,
+          operator: "contains" as const,
+          value: value || "",
+        }));
+    },
+    // https://refine.dev/docs/ui-integrations/ant-design/components/filter-dropdown/#example
+    filters: {
+      initial: [
+        { field: "username", operator: "contains", value: "" },
+        { field: "roles", operator: "contains", value: "" },
+      ],
+      defaultBehavior: "merge",
+    },
+    sorters: {
+      initial: [],
+    },
+    meta: {
+      transformFn: transformBooleanFilters,
+    },
+  });
+
+  const onSearch = () => {
+    const values = form.getFieldsValue();
+    searchFormProps?.onFinish?.({
+      ...values,
+    });
+  };
+
+  const debouncedOnChange = debounce(onSearch, 500);
+
+  // fix for ant design filter dropdown contains operator
+  filters.map((filter) => {
+    if (filter.operator === "contains" && Array.isArray(filter.value)) {
+      filter.value = filter.value.join(",");
+    }
+  });
+
+  // 修改modal状态类型
+  const [showModal, setShowModal] = useState<{
+    type: "show" | "edit" | "create" | null;
+    id: number | null;
+  }>({
+    type: null,
+    id: null,
+  });
+
+  // 处理modal关闭
+  const handleModalClose = () => {
+    setShowModal({ type: null, id: null });
+  };
+
+  return (
+    <div className="page-container">
+      <List
+        breadcrumb={false}
+        contentProps={LIST_CONTENT_PROPS}
+        headerButtons={() => {
+          return (
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => setShowModal({ type: "create", id: null })}
+            >
+              Add User
+            </Button>
+          );
+        }}
+      >
+        <Table
+          {...tableProps}
+          pagination={{
+            ...tableProps.pagination,
+            showTotal: (total) => (
+              <PaginationTotal total={total} entityName="user" />
+            ),
+          }}
+          rowKey="id"
+        >
+          <Table.Column
+            dataIndex="userid"
+            title="User ID"
+            render={(_, record) => {
+              return (
+                <Space>
+                  <CustomAvatar
+                    shape="square"
+                    name={record.userid || ""}
+                    src={`https://rhrc.woa.com/photo/150/${record.userid}.png`}
+                  />
+                  <Text style={{ whiteSpace: "nowrap" }}>{record.userid}</Text>
+                </Space>
+              );
+            }}
+          />
+          <Table.Column
+            dataIndex="username"
+            title="User Name"
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Input />
+              </FilterDropdown>
+            )}
+            defaultFilteredValue={getDefaultFilter(
+              "username",
+              filters,
+              "contains"
+            )}
+            /*filterIcon={<SearchOutlined />}*/
+          />
+          <Table.Column
+            dataIndex="roles"
+            title="Roles"
+            defaultFilteredValue={getDefaultFilter(
+              "roles",
+              filters,
+              "contains"
+            )}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Select
+                  options={roleOptions}
+                  style={{ width: "150px" }}
+                  placeholder="Select Role"
+                  loading={rolesLoading}
+                />
+              </FilterDropdown>
+            )}
+            render={(value) => {
+              return JSON.parse(value || "[]").map(
+                (role: string) => (
+                  <RoleStatusTag key={role} role={role} />
+                )
+              );
+            }}
+          />
+          <Table.Column
+            dataIndex="isApiKey"
+            title="API Key"
+            defaultFilteredValue={getDefaultFilter("isApiKey", filters, "eq")}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                mapValue={(selectedKeys) => {
+                  if (selectedKeys?.[0] === "Yes") return true;
+                  if (selectedKeys?.[0] === "No") return false;
+                  return selectedKeys;
+                }}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Select
+                  style={{ width: "120px" }}
+                  placeholder="Select"
+                  allowClear
+                  options={[
+                    { label: "Yes", value: "Yes" },
+                    { label: "No", value: "No" },
+                  ]}
+                />
+              </FilterDropdown>
+            )}
+            render={(value) => (
+              <Tag color={value ? "blue" : "default"}>
+                {value ? "Yes" : "No"}
+              </Tag>
+            )}
+          />
+          <Table.Column
+            dataIndex="isActive"
+            title="Active"
+            defaultFilteredValue={getDefaultFilter("isActive", filters, "eq")}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                mapValue={(selectedKeys) => {
+                  if (selectedKeys?.[0] === "Active") return true;
+                  if (selectedKeys?.[0] === "Inactive") return false;
+                  return selectedKeys;
+                }}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Select
+                  style={{ width: "120px" }}
+                  placeholder="Select"
+                  allowClear
+                  options={[
+                    { label: "Active", value: "Active" },
+                    { label: "Inactive", value: "Inactive" },
+                  ]}
+                />
+              </FilterDropdown>
+            )}
+            render={(value) => (
+              <Tag color={value ? "green" : "red"}>
+                {value ? "Active" : "Inactive"}
+              </Tag>
+            )}
+          />
+          <Table.Column
+            fixed="right"
+            title="Actions"
+            dataIndex="actions"
+            render={(_, record) => {
+              return (
+                <Space>
+                  <ShowButton
+                    hideText
+                    size="small"
+                    style={{ backgroundColor: "transparent" }}
+                    onClick={() =>
+                      setShowModal({ type: "show", id: record.id })
+                    }
+                  />
+                  <EditButton
+                    hideText
+                    size="small"
+                    style={{ backgroundColor: "transparent" }}
+                    onClick={() =>
+                      setShowModal({ type: "edit", id: record.id })
+                    }
+                  />
+                  <DeleteButton
+                    hideText
+                    size="small"
+                    recordItemId={record.id}
+                    style={{ backgroundColor: "transparent" }}
+                  />
+                </Space>
+              );
+            }}
+          />
+        </Table>
+      </List>
+
+      {/* Show Drawer */}
+      {showModal.type === "show" && showModal.id && (
+        <ShowDrawer id={showModal.id} onClose={handleModalClose} />
+      )}
+
+      {/* Edit Modal */}
+      {showModal.type === "edit" && showModal.id && (
+        <EditModal id={showModal.id} onClose={handleModalClose} />
+      )}
+
+      {/* Create Modal */}
+      {showModal.type === "create" && (
+        <CreateModal onClose={handleModalClose} />
+      )}
+
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,14 @@
+export const UserSelect = {
+  id: true,
+  userid: true,
+  username: true,
+  roles: true,
+  isApiKey: true,
+  apiKey: true,
+  description: true,
+  isActive: true,
+  lastUsedAt: true,
+  creator: true,
+  createdAt: true,
+  updatedAt: true,
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/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 { User } from "../../generated/types/prisma.types"; //'.prisma/client/index';
+import {
+  userShowConfig as showConfig,
+  userShowPrismaSelect as showPrismaSelect,
+} from "../../generated/props/user/config";
+import { userModel } from "../../generated/props/user/model";
+import { modelsMap } from "generated/models.index";
+
+export const UserShow: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = "user";
+  const t = useTranslate();
+  
+  const { queryResult } = useShow<User>({
+    meta: { select: showPrismaSelect},
+  });
+  const { data, isLoading } = queryResult;
+  const record = data?.data;
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(userModel, {
+      // status: { render: xxxxx }
+    });
+
+    // getColumns is a function that returns an array of fields
+    const fields = getColumns("User", showConfig.fields, {
+      ...modelsMap,
+      User: { model, meta: modelsMap["User"].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>
+  );
+};
+

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/styles/antd.css

@@ -0,0 +1,132 @@
+.ant-modal {
+  .ant-modal-content {
+    padding: 0;
+  }
+
+  .ant-modal-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid #d9d9d9;
+    margin-bottom: 0px;
+  }
+
+  .ant-modal-close {
+    top: 20px;
+  }
+
+  .ant-modal-body {
+    padding: 20px 24px;
+  }
+
+  .ant-modal-footer {
+    padding: 20px 24px;
+    border-top: 1px solid #d9d9d9;
+    margin-top: 0px;
+  }
+}
+
+.kanban-update-modal {
+  .ant-modal-body {
+    padding: 0px;
+  }
+
+  .ant-modal-footer {
+    border-top: none;
+    text-align: unset;
+  }
+}
+
+.ant-select.kanban-users-form-select {
+  .ant-select-selector {
+    background-color: #fff;
+  }
+}
+
+.audit-log-table {
+  .ant-table {
+    .ant-table-tbody {
+      & > tr.ant-table-row:hover > td {
+        background: none !important;
+      }
+    }
+
+    .ant-table-cell {
+      vertical-align: top;
+    }
+  }
+}
+
+.ant-picker-calendar {
+  .ant-picker-panel {
+    .ant-picker-body {
+      .ant-picker-cell {
+        .ant-picker-calendar-date-content {
+          height: 92px;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}
+
+.ant-pagination-total-text {
+  margin-right: auto;
+  font-size: 14px !important;
+  color: rgba(0, 0, 0, 0.45) !important;
+  margin-inline-end: auto !important;
+}
+
+.ant-color-picker {
+  .ant-popover-content {
+    .ant-collapse-header {
+      display: none;
+    }
+  }
+}
+
+.ant-table-cell {
+  white-space: nowrap;
+}
+
+th.ant-table-column-sort {
+  background-color: #fafafa !important;
+}
+
+td.ant-table-column-sort {
+  background-color: #ffffff !important;
+}
+
+.ant-table-tbody > tr > td {
+  padding: 12px 11.25px 11px 16px !important;
+}
+
+/* .ant-table-tbody > tr:first-child > td {
+    padding: 0px !important;
+} */
+
+.ant-page-header-content {
+  padding-block-start: 8px;
+}
+
+tr.ant-table-measure-row {
+  visibility: collapse;
+}
+.ant-carousel .slick-prev,
+.ant-carousel .slick-next,
+.ant-carousel .slick-prev:hover,
+.ant-carousel .slick-next:hover {
+  font-size: inherit;
+  color: currentColor;
+}
+
+.ant-spin-nested-loading,
+.ant-spin-container {
+  width: 100%;
+  height: 100%;
+}
+
+.ant-picker-input > input[disabled] {
+  color: #777 !important;
+}
+.ant-table-expanded-row-level-1 {
+  background-color: #eee;
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/styles/fc.css

@@ -0,0 +1,58 @@
+:root {
+  --fc-today-bg-color: rgba(230, 244, 255, 1);
+}
+
+.fc-daygrid-day-number,
+.fc-col-header-cell-cushion {
+  color: rgba(0, 0, 0, 0.75) !important;
+  font-weight: 400;
+}
+
+.fc-event::after {
+  background-color: unset !important;
+}
+
+.fc-event:hover,
+.fc-event:focus {
+  background-color: unset;
+  box-shadow: unset;
+}
+
+.fc-event {
+  .fc-event-title,
+  .fc-event-time {
+    color: rgba(0, 0, 0, 0.65);
+    font-weight: 400 !important;
+    font-size: 12px;
+  }
+}
+
+.fc-daygrid-block-event,
+.fc-timegrid-event {
+  cursor: pointer;
+  .fc-event-time {
+    width: 35px;
+  }
+  .fc-event-title,
+  .fc-event-time {
+    color: #fff;
+    font-weight: 400 !important;
+    font-size: 12px;
+  }
+}
+
+.fc-timegrid-slot-label-cushion,
+.fc-list-day-text,
+.fc-list-day-side-text {
+  color: rgba(0, 0, 0, 0.75);
+}
+
+.fc-list-day {
+  position: relative;
+  z-index: 1;
+}
+
+.fc-event-title-container {
+  padding-left: 8px;
+  padding-right: 8px;
+}