@akanjs/ui 0.0.149 → 0.0.151

package/cjs/Data/QueryMaker.js

@@ -0,0 +1,304 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var QueryMaker_exports = {};
+__export(QueryMaker_exports, {
+  default: () => QueryMaker
+});
+module.exports = __toCommonJS(QueryMaker_exports);
+var import_base = require("@akanjs/base");
+var import_client = require("@akanjs/client");
+var import_common = require("@akanjs/common");
+var import_constant = require("@akanjs/constant");
+var import_next = require("@akanjs/next");
+var import_store = require("@akanjs/store");
+var import_react = require("react");
+var import_bi = require("react-icons/bi");
+var import_DatePicker = require("../DatePicker");
+var import_Input = require("../Input");
+var import_Modal = require("../Modal");
+var import_Select = require("../Select");
+const searchQuerySetting = { queryKey: "search", arg: { $search: void 0 } };
+const byStatusQuerySetting = { queryKey: "byStatuses", arg: { statuses: null } };
+function QueryMaker({ className, sliceName, query }) {
+  const { l } = (0, import_next.usePage)();
+  const storeDo = import_store.st.do;
+  const cnst = (0, import_constant.getCnstMeta)(sliceName);
+  const isModelSearchable = (0, import_constant.hasTextField)(cnst.Full);
+  const summaryRef = cnst.Summary;
+  const { subMenu, filter } = import_store.st.use.searchParams();
+  const summaryQueryMap = (0, import_constant.getQueryMap)(summaryRef);
+  const filterRef = cnst.Filter;
+  const filterQueryMap = (0, import_constant.getFilterQueryMap)(filterRef);
+  const defaultQuerySetting = { ...isModelSearchable ? searchQuerySetting : byStatusQuerySetting, ...query ?? {} };
+  const isInitialized = (0, import_react.useRef)(false);
+  const [querySetting, setQuerySetting] = (0, import_react.useState)(defaultQuerySetting);
+  const getQuery = (0, import_react.useCallback)(
+    (querySetting2) => {
+      if (summaryQueryMap[querySetting2.queryKey]) {
+        const query2 = typeof summaryQueryMap[querySetting2.queryKey] === "function" ? summaryQueryMap[querySetting2.queryKey]() : summaryQueryMap[querySetting2.queryKey] ?? null;
+        if (!query2)
+          throw new Error(`Query not found`);
+        return query2;
+      } else if (querySetting2.queryKey === "search") {
+        const query2 = querySetting2.arg;
+        return query2;
+      } else {
+        const queryFn = (0, import_constant.getFilterQuery)(filterRef, querySetting2.queryKey);
+        const filterQueryArgMetas = (0, import_constant.getFilterArgMetas)(filterRef, querySetting2.queryKey);
+        const queryArgs = filterQueryArgMetas.map((queryArgMeta) => querySetting2.arg[queryArgMeta.name]);
+        const query2 = queryFn(...queryArgs);
+        return query2;
+      }
+    },
+    [filter]
+  );
+  const setQueryOfModel = (0, import_next.useDebounce)((querySetting2) => {
+    const query2 = getQuery(querySetting2);
+    if (!isInitialized.current) {
+      void storeDo[`init${(0, import_common.capitalize)(sliceName)}`](query2);
+      isInitialized.current = true;
+    } else
+      void storeDo[`setQueryArgsOf${(0, import_common.capitalize)(sliceName)}`](query2);
+  });
+  (0, import_react.useEffect)(() => {
+    if (filter && subMenu === sliceName)
+      setQuerySetting({ queryKey: filter, arg: {} });
+  }, [filter, subMenu]);
+  (0, import_react.useEffect)(() => {
+    setQueryOfModel(querySetting);
+  }, [querySetting]);
+  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex w-full items-center gap-4", className) }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, "Query", /* @__PURE__ */ React.createElement(
+    import_Select.Select,
+    {
+      value: querySetting.queryKey,
+      options: Object.keys(summaryQueryMap).map((queryKey) => ({
+        label: l.qry(sliceName, queryKey),
+        value: queryKey
+      })),
+      onChange: (queryKey) => {
+        const filterQueryArgMetas = (0, import_constant.getFilterArgMetas)(filterRef, queryKey);
+        const defaultArg = Object.fromEntries(
+          filterQueryArgMetas.map((queryArgMeta) => [
+            queryArgMeta.name,
+            queryArgMeta.nullable ? null : queryArgMeta.arrDepth ? { $in: [] } : queryArgMeta.default ? typeof queryArgMeta.default === "function" ? queryArgMeta.default() : queryArgMeta.default : import_base.scalarDefaultMap.get(queryArgMeta.modelRef) ?? null
+          ])
+        );
+        setQuerySetting({ queryKey, arg: defaultArg });
+      }
+    }
+  )), querySetting.queryKey === "search" ? /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-2" }, "Search", /* @__PURE__ */ React.createElement("label", { className: "input flex w-full items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "text",
+      className: "grow",
+      placeholder: "Type to search...",
+      value: querySetting.arg.$search ?? "",
+      onChange: (e) => {
+        setQuerySetting({ ...querySetting, arg: e.target.value ? { $search: e.target.value } : {} });
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(import_bi.BiSearch, { className: "size-4 opacity-70" }))) : summaryQueryMap[querySetting.queryKey] ? null : (0, import_constant.getFilterArgMetas)(filterRef, querySetting.queryKey).map((queryArgMeta, idx) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2", key: idx }, /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500" }, l.qarg(sliceName, querySetting.queryKey, queryArgMeta.name)), /* @__PURE__ */ React.createElement(
+    QueryArg,
+    {
+      queryArgMeta,
+      value: querySetting.arg[queryArgMeta.name],
+      onChange: (value) => {
+        setQuerySetting({
+          ...querySetting,
+          arg: { ...querySetting.arg, [queryArgMeta.name]: value }
+        });
+      }
+    }
+  ))));
+}
+function QueryArg({ queryArgMeta, value, onChange }) {
+  const argType = (0, import_constant.getGqlTypeStr)(queryArgMeta.modelRef);
+  if (queryArgMeta.enum && queryArgMeta.arrDepth && queryArgMeta.arrDepth < 2)
+    return /* @__PURE__ */ React.createElement(
+      QueryArg.Enum,
+      {
+        options: queryArgMeta.enum.values,
+        value,
+        onChange,
+        nullable: queryArgMeta.nullable,
+        multiple: queryArgMeta.arrDepth ? queryArgMeta.arrDepth >= 1 : false
+      }
+    );
+  return argType === "ID" ? /* @__PURE__ */ React.createElement(QueryArg.ID, { queryArgMeta, value, onChange }) : argType === "Int" ? /* @__PURE__ */ React.createElement(QueryArg.Int, { value, onChange }) : argType === "Float" ? /* @__PURE__ */ React.createElement(QueryArg.Float, { value, onChange }) : argType === "String" ? /* @__PURE__ */ React.createElement(QueryArg.String, { value, onChange }) : argType === "Boolean" ? /* @__PURE__ */ React.createElement(QueryArg.Boolean, { value, onChange }) : argType === "Date" ? /* @__PURE__ */ React.createElement(QueryArg.Date, { value, onChange }) : argType === "JSON" ? /* @__PURE__ */ React.createElement(QueryArg.Json, { value, onChange }) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+}
+const ArgEnum = ({ options, value, onChange, nullable, multiple }) => {
+  return /* @__PURE__ */ React.createElement(
+    import_Select.Select,
+    {
+      options: options.map((option) => ({
+        label: option.toString(),
+        value: option
+      })),
+      value: value ?? [],
+      onChange: (val) => {
+        onChange(val);
+      },
+      multiple
+    }
+  );
+};
+QueryArg.Enum = ArgEnum;
+const ArgID = ({ queryArgMeta, value, onChange }) => {
+  if (!queryArgMeta.ref)
+    return /* @__PURE__ */ React.createElement(
+      import_Input.Input,
+      {
+        inputClassName: "w-full",
+        value: value ?? "",
+        onChange: (value2) => {
+          onChange(value2 ? value2 : null);
+        },
+        validate: (e) => true
+      }
+    );
+  else
+    return /* @__PURE__ */ React.createElement(SelectIDWithRef, { queryArgMeta, value, onChange });
+};
+QueryArg.ID = ArgID;
+const SelectIDWithRef = ({ queryArgMeta, value, onChange }) => {
+  if (!queryArgMeta.ref)
+    throw new Error("No ref in queryArgMeta");
+  const [modalOpen, setModalOpen] = (0, import_react.useState)(false);
+  const storeUse = import_store.st.use;
+  const modelList = storeUse[`${queryArgMeta.ref}List`]();
+  const renderOption = queryArgMeta.renderOption ?? ((value2) => value2.id);
+  const selectedModel = value ? modelList.get(value) : null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "btn",
+      onClick: () => {
+        setModalOpen(true);
+      }
+    },
+    selectedModel ? renderOption(selectedModel) : `Select ${queryArgMeta.ref}`
+  ), /* @__PURE__ */ React.createElement(
+    import_Modal.Modal,
+    {
+      open: modalOpen,
+      onCancel: () => {
+        setModalOpen(false);
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-4 pb-[256px]" }, /* @__PURE__ */ React.createElement(QueryMaker, { sliceName: queryArgMeta.ref }), /* @__PURE__ */ React.createElement(
+      import_Select.Select,
+      {
+        options: modelList.map((model) => ({
+          label: renderOption(model),
+          value: model.id
+        })),
+        value,
+        onChange: (value2) => {
+          onChange(value2);
+        }
+      }
+    ))
+  ));
+};
+const ArgInt = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    import_Input.Input.Number,
+    {
+      inputClassName: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2 ?? 0);
+      },
+      validate: (e) => true
+    }
+  );
+};
+QueryArg.Int = ArgInt;
+const ArgFloat = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    import_Input.Input.Number,
+    {
+      inputClassName: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2 ?? 0);
+      },
+      validate: (e) => true
+    }
+  );
+};
+QueryArg.Float = ArgFloat;
+const ArgString = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    import_Input.Input,
+    {
+      inputClassName: "w-full",
+      value: value ?? "",
+      onChange: (value2) => {
+        onChange(value2 ? value2 : null);
+      },
+      validate: (e) => true
+    }
+  );
+};
+QueryArg.String = ArgString;
+const ArgBoolean = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    import_Input.Input.Checkbox,
+    {
+      className: "w-full",
+      checked: value,
+      onChange: (value2) => {
+        onChange(value2);
+      }
+    }
+  );
+};
+QueryArg.Boolean = ArgBoolean;
+const ArgDate = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    import_DatePicker.DatePicker,
+    {
+      className: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2);
+      }
+    }
+  );
+};
+QueryArg.Date = ArgDate;
+const ArgJson = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    import_Input.Input.TextArea,
+    {
+      validate: (e) => true,
+      className: "w-full",
+      inputClassName: "w-full min-h-[300px]",
+      value,
+      onPressEnter: (value2) => {
+        onChange(value2);
+      },
+      onChange: (value2) => {
+        onChange(value2);
+      }
+    }
+  );
+};
+QueryArg.Json = ArgJson;

package/cjs/Data/TableList.js

@@ -0,0 +1,139 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TableList_exports = {};
+__export(TableList_exports, {
+  default: () => TableList
+});
+module.exports = __toCommonJS(TableList_exports);
+var import_common = require("@akanjs/common");
+var import_next = require("@akanjs/next");
+var import_store = require("@akanjs/store");
+var import_react = __toESM(require("react"));
+var import_Model = require("../Model");
+var import_Table = require("../Table");
+var import_Item = require("./Item");
+var import_Pagination = __toESM(require("./Pagination"));
+function TableList({
+  className,
+  init,
+  queryArgs = [],
+  sliceName,
+  columns,
+  actions,
+  renderTemplate,
+  renderTitle,
+  renderView,
+  onItemClick
+}) {
+  const { l } = (0, import_next.usePage)();
+  const storeUse = import_store.st.use;
+  const storeDo = import_store.st.do;
+  const storeGet = import_store.st.get;
+  const refName = import_store.st.slice[sliceName].refName;
+  const [modelName, modelClassName] = [refName, (0, import_common.capitalize)(refName)];
+  const names = {
+    model: modelName,
+    modelId: `${modelName}Id`,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    initModel: `init${modelClassName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    initModel: sliceName.replace(names.model, names.initModel)
+  };
+  const modelList = storeUse[namesOfSlice.modelList]();
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+  const RenderTemplate = ({ id }) => {
+    const Edit = renderTemplate;
+    return Edit ? /* @__PURE__ */ import_react.default.createElement(Edit, { ...{ [names.modelId]: id } }) : null;
+  };
+  (0, import_react.useEffect)(() => {
+    if (queryArgs.length)
+      void storeDo[namesOfSlice.initModel](...queryArgs, init);
+  }, []);
+  const cols = (0, import_react.useMemo)(() => {
+    const firstCol = {
+      ...(0, import_Item.convToAntdColumn)(columns[0]),
+      title: typeof columns[0] !== "string" && columns[0].title ? columns[0].title : l.field(
+        sliceName,
+        typeof columns[0] === "string" ? columns[0] : columns[0].key
+      )
+    };
+    return [
+      {
+        ...firstCol,
+        render: (value, model, idx) => /* @__PURE__ */ import_react.default.createElement("div", { key: `${model.id}-${idx}`, className: "flex items-center" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mr-2" }, firstCol.render ? firstCol.render(value, model) : value), actions && (typeof actions === "function" ? actions(model, idx) : actions).filter((action) => typeof action === "string").map((action, idx2) => /* @__PURE__ */ import_react.default.createElement(
+          import_Item.Action,
+          {
+            key: `${model.id}-${action}`,
+            model,
+            action,
+            sliceName
+          }
+        )))
+      },
+      ...columns.slice(1).map((col) => ({
+        ...(0, import_Item.convToAntdColumn)(col),
+        title: typeof col !== "string" && col.title ? col.title : l.field(sliceName, typeof col === "string" ? col : col.key)
+      })),
+      ...actions ? [
+        {
+          key: "actions",
+          dataIndex: "id",
+          title: l("shared.actions"),
+          render: (_, model, idx) => /* @__PURE__ */ import_react.default.createElement("div", { className: "flex gap-1" }, (typeof actions === "function" ? actions(model, idx) : actions).filter((action) => typeof action !== "string").map((action, idx2) => /* @__PURE__ */ import_react.default.createElement(import_Item.Action, { key: `${model.id}-${idx2}`, model, action, sliceName })))
+        }
+      ] : []
+    ];
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className }, /* @__PURE__ */ import_react.default.createElement(
+    import_Table.Table,
+    {
+      dataSource: modelListLoading ? [] : [...modelList],
+      columns: cols,
+      loading: !!modelListLoading,
+      size: "small",
+      rowKey: (model) => model.id,
+      pagination: false,
+      onRow: (model, idx) => ({
+        onClick: () => onItemClick?.(model, idx)
+      })
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(import_Pagination.default, { sliceName }), !modelListLoading ? modelList.map((model) => /* @__PURE__ */ import_react.default.createElement("div", { key: model.id }, /* @__PURE__ */ import_react.default.createElement(import_Model.Model.EditModal, { id: model.id, sliceName, renderTitle }, /* @__PURE__ */ import_react.default.createElement(RenderTemplate, { id: model.id })), renderView ? /* @__PURE__ */ import_react.default.createElement(
+    import_Model.Model.ViewModal,
+    {
+      id: model.id,
+      sliceName,
+      renderTitle,
+      renderView
+    }
+  ) : null)) : null);
+}

package/cjs/Data/index.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Data_exports = {};
+__export(Data_exports, {
+  Data: () => Data
+});
+module.exports = __toCommonJS(Data_exports);
+var import_index = require("./index_");
+const Data = {
+  CardList: import_index.CardList,
+  Dashboard: import_index.Dashboard,
+  Insight: import_index.Insight,
+  Item: import_index.Item,
+  ListContainer: import_index.ListContainer,
+  Pagination: import_index.Pagination,
+  TableList: import_index.TableList,
+  QueryMaker: import_index.QueryMaker
+};

package/cjs/Data/index_.js

@@ -0,0 +1,49 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  CardList: () => CardList,
+  Dashboard: () => Dashboard,
+  Insight: () => Insight,
+  Item: () => Item,
+  ListContainer: () => ListContainer,
+  Pagination: () => Pagination,
+  QueryMaker: () => QueryMaker,
+  TableList: () => TableList
+});
+module.exports = __toCommonJS(index_exports);
+var import_next = require("@akanjs/next");
+const CardList = (0, import_next.lazy)(() => import("./CardList"));
+const Dashboard = (0, import_next.lazy)(() => import("./Dashboard"));
+const Insight = (0, import_next.lazy)(() => import("./Insight"));
+const Item = (0, import_next.lazy)(() => import("./Item"));
+const ListContainer = (0, import_next.lazy)(() => import("./ListContainer"));
+const Pagination = (0, import_next.lazy)(() => import("./Pagination"));
+const TableList = (0, import_next.lazy)(() => import("./TableList"));
+const QueryMaker = (0, import_next.lazy)(() => import("./QueryMaker"));