@akanjs/ui 0.9.50 → 0.9.52

package/cjs/Data/ListContainer.js

@@ -34,9 +34,9 @@ module.exports = __toCommonJS(ListContainer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_common = require("@akanjs/common");
-var import_constant = require("@akanjs/constant");
 var import_store = require("@akanjs/store");
 var import_file_saver = require("file-saver");
+var import_react = require("react");
 var import_ai = require("react-icons/ai");
 var import_Dropdown = require("../Dropdown");
 var import_Loading = require("../Loading");
@@ -84,7 +84,8 @@ function ListContainer({
     newModel: `new${modelClassName}`,
     refreshModel: `refresh${modelClassName}`,
     setSortOfModel: `setSortOf${modelClassName}`,
-    setLimitOfModel: `setLimitOf${modelClassName}`
+    setLimitOfModel: `setLimitOf${modelClassName}`,
+    modelSortKeys: `${modelName}SortKeys`
   };
   const namesOfSlice = {
     modelList: sliceName.replace(names.model, names.modelList),
@@ -98,9 +99,12 @@ function ListContainer({
     setSortOfModel: sliceName.replace(names.model, names.setSortOfModel),
     setLimitOfModel: sliceName.replace(names.model, names.setLimitOfModel)
   };
-  const cnstInfo = import_constant.constantInfo.getDatabase(sliceName);
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]();
   const sortOfModel = storeUse[namesOfSlice.sortOfModel]();
+  const modelInsight = storeUse[namesOfSlice.modelInsight]();
+  (0, import_react.useEffect)(() => {
+    void storeDo[namesOfSlice.initModel]();
+  }, []);
   const RenderTitle = renderTitle ?? ((model) => `${l(`${refName}.modelName`)} - ${model.id ? model.id : "New"}`);
   const ModelDashboard = () => {
     const summary = storeUse.summary();
@@ -112,8 +116,8 @@ function ListContainer({
   };
   const RenderQueryMaker = renderQueryMaker;
   const RenderInsight = () => {
-    const modelInsight = storeUse[namesOfSlice.modelInsight]();
-    return renderInsight ? renderInsight({ insight: modelInsight }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+    const modelInsight2 = storeUse[namesOfSlice.modelInsight]();
+    return renderInsight ? renderInsight({ insight: modelInsight2 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
   };
   const RenderTemplate = renderTemplate;
   const RenderTools = () => {
@@ -187,12 +191,27 @@ ${body}`], { type: "text/csv;charset=utf-8" });
     );
   };
   const RenderSort = () => {
-    return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Select.Select,
+      {
+        value: sortOfModel,
+        options: import_client.fetch[names.modelSortKeys]?.map((sortKey) => ({
+          label: l.field(refName, sortKey),
+          value: sortKey
+        })) ?? [],
+        onChange: (sortKey) => void storeDo[namesOfSlice.setSortOfModel](sortKey)
+      }
+    );
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("m-4", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-3 flex flex-wrap justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex pb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "prose text-lg", children: title ?? l.field(sliceName, "modelName") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "prose text-lg", children: [
+          title ?? l.field(sliceName, "modelName"),
+          "(",
+          modelInsight.count,
+          ")"
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ml-3 flex items-center", children: [
           renderTemplate && create ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "button",

package/esm/Data/ListContainer.js

@@ -1,10 +1,10 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { clsx, usePage } from "@akanjs/client";
+import { clsx, fetch, usePage } from "@akanjs/client";
 import { capitalize, deepObjectify } from "@akanjs/common";
-import { constantInfo } from "@akanjs/constant";
 import { st } from "@akanjs/store";
 import { saveAs } from "file-saver";
+import { useEffect } from "react";
 import {
   AiOutlineEllipsis,
   AiOutlineFileExcel,
@@ -58,7 +58,8 @@ function ListContainer({
     newModel: `new${modelClassName}`,
     refreshModel: `refresh${modelClassName}`,
     setSortOfModel: `setSortOf${modelClassName}`,
-    setLimitOfModel: `setLimitOf${modelClassName}`
+    setLimitOfModel: `setLimitOf${modelClassName}`,
+    modelSortKeys: `${modelName}SortKeys`
   };
   const namesOfSlice = {
     modelList: sliceName.replace(names.model, names.modelList),
@@ -72,9 +73,12 @@ function ListContainer({
     setSortOfModel: sliceName.replace(names.model, names.setSortOfModel),
     setLimitOfModel: sliceName.replace(names.model, names.setLimitOfModel)
   };
-  const cnstInfo = constantInfo.getDatabase(sliceName);
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]();
   const sortOfModel = storeUse[namesOfSlice.sortOfModel]();
+  const modelInsight = storeUse[namesOfSlice.modelInsight]();
+  useEffect(() => {
+    void storeDo[namesOfSlice.initModel]();
+  }, []);
   const RenderTitle = renderTitle ?? ((model) => `${l(`${refName}.modelName`)} - ${model.id ? model.id : "New"}`);
   const ModelDashboard = () => {
     const summary = storeUse.summary();
@@ -86,8 +90,8 @@ function ListContainer({
   };
   const RenderQueryMaker = renderQueryMaker;
   const RenderInsight = () => {
-    const modelInsight = storeUse[namesOfSlice.modelInsight]();
-    return renderInsight ? renderInsight({ insight: modelInsight }) : /* @__PURE__ */ jsx(Fragment, {});
+    const modelInsight2 = storeUse[namesOfSlice.modelInsight]();
+    return renderInsight ? renderInsight({ insight: modelInsight2 }) : /* @__PURE__ */ jsx(Fragment, {});
   };
   const RenderTemplate = renderTemplate;
   const RenderTools = () => {
@@ -161,12 +165,27 @@ ${body}`], { type: "text/csv;charset=utf-8" });
     );
   };
   const RenderSort = () => {
-    return null;
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        value: sortOfModel,
+        options: fetch[names.modelSortKeys]?.map((sortKey) => ({
+          label: l.field(refName, sortKey),
+          value: sortKey
+        })) ?? [],
+        onChange: (sortKey) => void storeDo[namesOfSlice.setSortOfModel](sortKey)
+      }
+    );
   };
   return /* @__PURE__ */ jsxs("div", { className: clsx("m-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex pb-1", children: [
-        /* @__PURE__ */ jsx("p", { className: "prose text-lg", children: title ?? l.field(sliceName, "modelName") }),
+        /* @__PURE__ */ jsxs("p", { className: "prose text-lg", children: [
+          title ?? l.field(sliceName, "modelName"),
+          "(",
+          modelInsight.count,
+          ")"
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "ml-3 flex items-center", children: [
           renderTemplate && create ? /* @__PURE__ */ jsxs(
             "button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/ui",
-  "version": "0.9.50",
+  "version": "0.9.52",
   "sourceType": "module",
   "publishConfig": {
     "access": "public"