@kingteza/crud-component 1.0.4 → 1.0.6

package/dist/src/components/crud/ImageCrudField.js

@@ -0,0 +1,113 @@
+var O = Object.defineProperty;
+var _ = (e, a, t) => a in e ? O(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
+var h = (e, a, t) => _(e, typeof a != "symbol" ? a + "" : a, t);
+import { j as l } from "../../../_virtual/jsx-runtime.js";
+/* empty css          */
+import { EyeOutlined as A } from "@ant-design/icons";
+import { Form as x, Input as S, Avatar as D, Image as W } from "antd";
+import N from "path-browserify";
+import { useState as F, useCallback as q, useEffect as d } from "react";
+import z from "../../util/NumberUtil.js";
+import B from "../../util/ValidationUtil.js";
+import { v4 as G } from "uuid";
+import H from "../common/picker/ImagePicker.js";
+class J {
+}
+class te extends J {
+  constructor(t = "", s = "") {
+    super();
+    h(this, "rootPath");
+    h(this, "subPath");
+    this.rootPath = t, this.subPath = s;
+  }
+  cloneFilePath(t) {
+    const s = N.parse(t), r = `${s.name}_cloned_${z.randInt(1e5)}`;
+    return N.format({
+      dir: s.dir,
+      ext: s.ext,
+      name: r
+    });
+  }
+  generateFileName(t) {
+    return `${t.split(".")[0]}_${G().replace("-", "")}`;
+  }
+}
+function se({
+  name: e,
+  label: a,
+  required: t,
+  provider: s,
+  onUploading: r,
+  aspectRatio: P,
+  onRemoved: c,
+  fieldClassName: w,
+  hideLabel: V = !1,
+  listType: y
+}) {
+  const i = x.useFormInstance(), u = x.useWatch(e, i), [p, C] = F(!1), I = q(
+    async (n, $) => {
+      if ($) {
+        r == null || r(!0);
+        const m = n.name, o = m.split("."), g = o[o.length - 1], b = s.generateFileName(m), k = `${await s.getInitialPath()}/${b}.${g}`, E = await s.upload(n, k);
+        C(!0), r == null || r(!1), i.setFieldValue(e, E);
+      } else {
+        console.log(n);
+        const m = i.getFieldsValue(), o = await s.delete(m[e]);
+        c == null || c(), o && i.setFieldsValue({ [e]: null });
+      }
+    },
+    [i, e, c, r, s]
+  ), [f, j] = F();
+  return d(() => {
+    !p && u ? s.getRealUrl(u).then(j) : j(f);
+  }, [u, p, s, f]), /* @__PURE__ */ l.jsx(l.Fragment, { children: /* @__PURE__ */ l.jsxs(
+    x.Item,
+    {
+      rules: t ? B.required(a) : [],
+      label: V ? null : a,
+      required: t,
+      name: e,
+      children: [
+        /* @__PURE__ */ l.jsx(
+          H,
+          {
+            noStyle: !0,
+            listType: y,
+            aspectRatio: P,
+            values: f,
+            onRemove: (n) => {
+              n && I(n, !1);
+            },
+            onAdd: async (n) => {
+              n && await I(n, !0);
+            },
+            className: w
+          }
+        ),
+        /* @__PURE__ */ l.jsx(S, { hidden: !0 })
+      ]
+    }
+  ) });
+}
+const ae = ({ provider: e, value: a }) => {
+  const [t, s] = F();
+  return d(() => {
+    a && e.getRealUrl(a).then(s);
+  }, [e, a]), t ? /* @__PURE__ */ l.jsx(K, { url: t }) : /* @__PURE__ */ l.jsx(l.Fragment, {});
+}, K = ({ url: e }) => /* @__PURE__ */ l.jsx(D, { className: "p-0", children: /* @__PURE__ */ l.jsx(
+  W,
+  {
+    className: "m-0 p-0 position-relative",
+    src: e,
+    preview: {
+      mask: /* @__PURE__ */ l.jsx(A, {})
+    }
+  }
+) });
+export {
+  J as FileDownloadProvider,
+  te as FileUploadProvider,
+  K as ImageCellValue,
+  ae as ImageCrudCellValue,
+  se as default
+};

package/dist/src/components/crud/import/CrudImportButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../../_virtual/jsx-runtime.cjs"),s=require("@ant-design/icons"),u=require("react"),i=require("react-i18next"),c=require("../../../locale/hooks/translation-constants.cjs"),a=require("./CrudImportComponent.cjs"),l=require("../../common/button/Button.cjs");function p(n){const{t:r}=i.useTranslation(c.TRANSLATION_NAMESPACE),[o,e]=u.useState(!1);return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(a.default,{open:o,onCloseMethod:e,...n}),t.jsxRuntimeExports.jsx(l.default,{icon:t.jsxRuntimeExports.jsx(s.ImportOutlined,{}),onClick:()=>e(!0),children:r("str.import")})]})}exports.default=p;

package/dist/src/components/crud/import/CrudImportButton.js

@@ -0,0 +1,31 @@
+import { j as o } from "../../../../_virtual/jsx-runtime.js";
+import { ImportOutlined as e } from "@ant-design/icons";
+import { useState as p } from "react";
+import { useTranslation as s } from "react-i18next";
+import { TRANSLATION_NAMESPACE as i } from "../../../locale/hooks/translation-constants.js";
+import u from "./CrudImportComponent.js";
+import f from "../../common/button/Button.js";
+function I(r) {
+  const { t: m } = s(i), [n, t] = p(!1);
+  return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    /* @__PURE__ */ o.jsx(
+      u,
+      {
+        open: n,
+        onCloseMethod: t,
+        ...r
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      f,
+      {
+        icon: /* @__PURE__ */ o.jsx(e, {}),
+        onClick: () => t(!0),
+        children: m("str.import")
+      }
+    )
+  ] });
+}
+export {
+  I as default
+};

package/dist/src/components/crud/import/CrudImportComponent.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../../../_virtual/jsx-runtime.cjs"),g=require("@ant-design/icons"),M=require("papaparse"),d=require("antd"),B=require("file-saver"),o=require("react"),O=require("react-i18next"),V=require("../../../locale/hooks/translation-constants.cjs"),W=require("../view/CrudViewer.cjs"),_=require("../../../util/DateUtil.cjs"),L=require("../../common/button/Button.cjs"),z=require("../../common/button/ImportButton.cjs");function $({onCloseMethod:b,open:C,fields:T,importProps:a}){const[u,q]=o.useState([]),[E,h]=o.useState(!1),[w,v]=o.useState(0);o.useEffect(()=>{C||(q([]),h(!1))},[C]);const f=o.useMemo(()=>new Map(T.filter(e=>{var t;return!e.hidden&&!((t=e.importProps)!=null&&t.hidden)&&!e.readonly}).map(e=>[e.name,e])),[T]),S=o.useMemo(()=>Array.from(f.values()).flatMap(e=>{var t;return[e.name,...((t=e.importProps)==null?void 0:t.extraFields)??[]]}),[f]),D=o.useCallback(async function(){const e=`${S.join(",")}
+`,t=new Blob([e],{type:"text/csv;charset=utf-8;"});B.saveAs(t,(a==null?void 0:a.name)+" - "+_.default.formatDateTimeWithSecond(new Date).replaceAll(":","-")+".csv")},[S,a==null?void 0:a.name]),{t:l}=O.useTranslation(V.TRANSLATION_NAMESPACE),I=o.useCallback(async e=>{const t=new FileReader;t.onerror=console.error,t.onload=async r=>{var n;const c=(n=r==null?void 0:r.target)==null?void 0:n.result,i=M.parse(c,{header:!0});q(i.data)},t.readAsText(e)},[]),y=o.useMemo(()=>{var t,r,c;let e=!1;for(const i of u)for(const[n,x]of f.entries()){const j=i[n],m=j||!isNaN(j);if(x.required&&!m)if((r=(t=x.importProps)==null?void 0:t.extraFields)!=null&&r.length)for(const R of((c=x.importProps)==null?void 0:c.extraFields)??[])if(i[R]||!isNaN(i[R])){e=!1;break}else return!0;else return!0}return e},[u,f]),p=o.useCallback(e=>(t,r)=>{var i,n,x;const c=t||!isNaN(t);if(e.required&&!c){let j=l("err.validation.required");if((n=(i=e.importProps)==null?void 0:i.extraFields)!=null&&n.length){const m=(x=e.importProps)==null?void 0:x.extraFields;(m==null?void 0:m.find(N=>!r[N]))&&(j="Either one of these fields is required: "+[e.name,...m].join(", "))}return s.jsxRuntimeExports.jsxs(d.Tooltip,{className:"d-flex",title:j,children:[s.jsxRuntimeExports.jsx(g.WarningTwoTone,{twoToneColor:"#ee9702"}),t]})}return t},[l]),A=o.useCallback(async e=>{v(e)},[]),k=o.useCallback(async()=>{try{h(!0),await a.onClickImport(u,A),b(!1)}finally{h(!1),v(0)}},[u,a,b,A]),F=o.useCallback(async()=>{y?d.Modal.warn({title:l("str.warning"),content:l("qus.importWithIssues"),okText:l("str.import"),onOk:k,okCancel:!0,closable:!0}):k()},[y,k,l]);return s.jsxRuntimeExports.jsxs(d.Modal,{title:[l("str.import"),a==null?void 0:a.name].filter(Boolean).join(" "),width:"100%",open:C,onOk:F,destroyOnClose:!0,onCancel:()=>b(!1),okText:l("str.import"),confirmLoading:E,okButtonProps:{disabled:!(u!=null&&u.length)},footer:(e,{OkBtn:t,CancelBtn:r})=>s.jsxRuntimeExports.jsxs(d.Space,{children:[s.jsxRuntimeExports.jsx(r,{}),s.jsxRuntimeExports.jsx(t,{}),y&&s.jsxRuntimeExports.jsx(d.Tooltip,{className:"d-flex",title:"Some fields have issue. Please review before submit.",children:s.jsxRuntimeExports.jsx(g.WarningTwoTone,{twoToneColor:"#ee9702"})})]}),children:[s.jsxRuntimeExports.jsxs(d.Space,{children:[s.jsxRuntimeExports.jsx(L.default,{onClick:D,icon:s.jsxRuntimeExports.jsx(g.DownloadOutlined,{}),children:l("str.downloadCsvTemplate")}),s.jsxRuntimeExports.jsx(z.ImportButton,{disabled:E,type:"default",onClick:I,accept:".csv",children:l("str.importCsvFile")})]}),s.jsxRuntimeExports.jsx(d.Spin,{spinning:E,indicator:w?s.jsxRuntimeExports.jsx(d.Progress,{type:"circle",percent:w*100,size:50,format:e=>`${parseInt(e)}%`}):void 0,children:s.jsxRuntimeExports.jsx(W.default,{data:u,bordered:!0,size:"small",fields:Array.from(f.values()).flatMap(e=>{var t,r,c,i;return e.type==="text"?[{...e,label:e.name,render:p(e)},...((r=(t=e.importProps)==null?void 0:t.extraFields)==null?void 0:r.map(n=>({...e,name:n,label:n,render:p(e)})))??[]]:e.type==="select"?[{...e,label:e.name,type:"text",render:p(e)},...((i=(c=e.importProps)==null?void 0:c.extraFields)==null?void 0:i.map(n=>({...e,name:n,label:n,type:"text",render:p(e)})))??[]]:[{...e,label:e.name,render:p(e)}]})})})]})}exports.default=$;

package/dist/src/components/crud/import/CrudImportComponent.js

@@ -0,0 +1,221 @@
+import { j as r } from "../../../../_virtual/jsx-runtime.js";
+import { WarningTwoTone as S, DownloadOutlined as R } from "@ant-design/icons";
+import W from "papaparse";
+import { Tooltip as q, Modal as B, Space as O, Spin as z, Progress as _ } from "antd";
+import { saveAs as $ } from "file-saver";
+import { useState as k, useEffect as U, useMemo as T, useCallback as m } from "react";
+import { useTranslation as G } from "react-i18next";
+import { TRANSLATION_NAMESPACE as H } from "../../../locale/hooks/translation-constants.js";
+import J from "../view/CrudViewer.js";
+import K from "../../../util/DateUtil.js";
+import Q from "../../common/button/Button.js";
+import { ImportButton as X } from "../../common/button/ImportButton.js";
+function ce({
+  onCloseMethod: h,
+  open: y,
+  fields: v,
+  importProps: o
+}) {
+  const [c, A] = k([]), [j, b] = k(!1), [N, D] = k(0);
+  U(() => {
+    y || (A([]), b(!1));
+  }, [y]);
+  const u = T(
+    () => new Map(
+      v.filter((e) => {
+        var t;
+        return !e.hidden && !((t = e.importProps) != null && t.hidden) && !e.readonly;
+      }).map((e) => [e.name, e])
+    ),
+    [v]
+  ), E = T(
+    () => Array.from(u.values()).flatMap((e) => {
+      var t;
+      return [
+        e.name,
+        ...((t = e.importProps) == null ? void 0 : t.extraFields) ?? []
+      ];
+    }),
+    [u]
+  ), V = m(
+    async function() {
+      const e = `${E.join(",")}
+`, t = new Blob([e], { type: "text/csv;charset=utf-8;" });
+      $(
+        t,
+        (o == null ? void 0 : o.name) + " - " + K.formatDateTimeWithSecond(/* @__PURE__ */ new Date()).replaceAll(":", "-") + ".csv"
+      );
+    },
+    [E, o == null ? void 0 : o.name]
+  ), { t: l } = G(H), M = m(async (e) => {
+    const t = new FileReader();
+    t.onerror = console.error, t.onload = async (n) => {
+      var s;
+      const i = (s = n == null ? void 0 : n.target) == null ? void 0 : s.result, a = W.parse(i, { header: !0 });
+      A(a.data);
+    }, t.readAsText(e);
+  }, []), C = T(() => {
+    var t, n, i;
+    let e = !1;
+    for (const a of c)
+      for (const [s, d] of u.entries()) {
+        const x = a[s], f = x || !isNaN(x);
+        if (d.required && !f)
+          if ((n = (t = d.importProps) == null ? void 0 : t.extraFields) != null && n.length)
+            for (const g of ((i = d.importProps) == null ? void 0 : i.extraFields) ?? [])
+              if (a[g] || !isNaN(a[g])) {
+                e = !1;
+                break;
+              } else return !0;
+          else return !0;
+      }
+    return e;
+  }, [c, u]), p = m(
+    (e) => (t, n) => {
+      var a, s, d;
+      const i = t || !isNaN(t);
+      if (e.required && !i) {
+        let x = l("err.validation.required");
+        if ((s = (a = e.importProps) == null ? void 0 : a.extraFields) != null && s.length) {
+          const f = (d = e.importProps) == null ? void 0 : d.extraFields;
+          (f == null ? void 0 : f.find((I) => !n[I])) && (x = "Either one of these fields is required: " + [e.name, ...f].join(", "));
+        }
+        return /* @__PURE__ */ r.jsxs(q, { className: "d-flex", title: x, children: [
+          /* @__PURE__ */ r.jsx(S, { twoToneColor: "#ee9702" }),
+          t
+        ] });
+      }
+      return t;
+    },
+    [l]
+  ), F = m(async (e) => {
+    D(e);
+  }, []), w = m(async () => {
+    try {
+      b(!0), await o.onClickImport(c, F), h(!1);
+    } finally {
+      b(!1), D(0);
+    }
+  }, [c, o, h, F]), L = m(async () => {
+    C ? B.warn({
+      title: l("str.warning"),
+      content: l("qus.importWithIssues"),
+      okText: l("str.import"),
+      onOk: w,
+      okCancel: !0,
+      closable: !0
+    }) : w();
+  }, [C, w, l]);
+  return /* @__PURE__ */ r.jsxs(
+    B,
+    {
+      title: [l("str.import"), o == null ? void 0 : o.name].filter(Boolean).join(" "),
+      width: "100%",
+      open: y,
+      onOk: L,
+      destroyOnClose: !0,
+      onCancel: () => h(!1),
+      okText: l("str.import"),
+      confirmLoading: j,
+      okButtonProps: {
+        disabled: !(c != null && c.length)
+      },
+      footer: (e, { OkBtn: t, CancelBtn: n }) => /* @__PURE__ */ r.jsxs(O, { children: [
+        /* @__PURE__ */ r.jsx(n, {}),
+        /* @__PURE__ */ r.jsx(t, {}),
+        C && /* @__PURE__ */ r.jsx(
+          q,
+          {
+            className: "d-flex",
+            title: "Some fields have issue. Please review before submit.",
+            children: /* @__PURE__ */ r.jsx(S, { twoToneColor: "#ee9702" })
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ r.jsxs(O, { children: [
+          /* @__PURE__ */ r.jsx(
+            Q,
+            {
+              onClick: V,
+              icon: /* @__PURE__ */ r.jsx(R, {}),
+              children: l("str.downloadCsvTemplate")
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            X,
+            {
+              disabled: j,
+              type: "default",
+              onClick: M,
+              accept: ".csv",
+              children: l("str.importCsvFile")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r.jsx(
+          z,
+          {
+            spinning: j,
+            indicator: N ? /* @__PURE__ */ r.jsx(
+              _,
+              {
+                type: "circle",
+                percent: N * 100,
+                size: 50,
+                format: (e) => `${parseInt(e)}%`
+              }
+            ) : void 0,
+            children: /* @__PURE__ */ r.jsx(
+              J,
+              {
+                data: c,
+                bordered: !0,
+                size: "small",
+                fields: Array.from(u.values()).flatMap((e) => {
+                  var t, n, i, a;
+                  return e.type === "text" ? [
+                    {
+                      ...e,
+                      label: e.name,
+                      render: p(e)
+                    },
+                    ...((n = (t = e.importProps) == null ? void 0 : t.extraFields) == null ? void 0 : n.map((s) => ({
+                      ...e,
+                      name: s,
+                      label: s,
+                      render: p(e)
+                    }))) ?? []
+                  ] : e.type === "select" ? [
+                    {
+                      ...e,
+                      label: e.name,
+                      type: "text",
+                      render: p(e)
+                    },
+                    ...((a = (i = e.importProps) == null ? void 0 : i.extraFields) == null ? void 0 : a.map((s) => ({
+                      ...e,
+                      name: s,
+                      label: s,
+                      type: "text",
+                      render: p(e)
+                    }))) ?? []
+                  ] : [
+                    {
+                      ...e,
+                      label: e.name,
+                      render: p(e)
+                    }
+                  ];
+                })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ce as default
+};

package/dist/src/components/crud/view/CrudDecListView.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../../_virtual/jsx-runtime.cjs"),R=require("../../common/description/DescList.cjs"),b=require("react"),f=require("react-i18next"),g=require("../../../locale/hooks/translation-constants.cjs"),p=require("./CrudViewerUtil.cjs");function q({className:l,fields:u,data:e,descListColumn:c={xs:1,md:3,sm:2,lg:4},layout:m,action:t,keepEmptyValues:x}){const{t:i}=f.useTranslation(g.TRANSLATION_NAMESPACE),j=b.useMemo(()=>{const o=u.filter(({hidden:r,hideInDescList:s})=>!r&&!s).map((r,s)=>({label:r.label,noFormatting:!0,value:p.getRendererValueCrudViewer(r)(e==null?void 0:e[r.name],e,s)}));return t&&o.push({label:i("str.action"),value:t}),o},[t,e,u,i]);return e?n.jsxRuntimeExports.jsx(R.default,{keepEmptyValues:x,bordered:!0,column:c,className:l,layout:m,list:j}):n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{})}exports.CrudDecListView=q;

package/dist/src/components/crud/view/CrudDecListView.js

@@ -0,0 +1,42 @@
+import { j as m } from "../../../../_virtual/jsx-runtime.js";
+import x from "../../common/description/DescList.js";
+import { useMemo as b } from "react";
+import { useTranslation as g } from "react-i18next";
+import { TRANSLATION_NAMESPACE as j } from "../../../locale/hooks/translation-constants.js";
+import { getRendererValueCrudViewer as A } from "./CrudViewerUtil.js";
+function V({
+  className: u,
+  fields: s,
+  data: r,
+  descListColumn: l = { xs: 1, md: 3, sm: 2, lg: 4 },
+  layout: f,
+  action: o,
+  keepEmptyValues: p
+}) {
+  const { t: i } = g(j), c = b(() => {
+    const n = s.filter(({ hidden: e, hideInDescList: t }) => !e && !t).map((e, t) => ({
+      label: e.label,
+      noFormatting: !0,
+      value: A(e)(
+        r == null ? void 0 : r[e.name],
+        r,
+        t
+      )
+    }));
+    return o && n.push({ label: i("str.action"), value: o }), n;
+  }, [o, r, s, i]);
+  return r ? /* @__PURE__ */ m.jsx(
+    x,
+    {
+      keepEmptyValues: p,
+      bordered: !0,
+      column: l,
+      className: u,
+      layout: f,
+      list: c
+    }
+  ) : /* @__PURE__ */ m.jsx(m.Fragment, {});
+}
+export {
+  V as CrudDecListView
+};

package/dist/src/components/crud/view/CrudViewer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../../_virtual/jsx-runtime.cjs"),D=require("antd"),k=require("../../common/button/CloneButtonTable.cjs"),H=require("../../common/button/DeleteButtonTable.cjs"),U=require("../../common/button/ExportButton.cjs"),F=require("../../common/button/HideButtonTable.cjs"),tt=require("../../common/button/RefreshButton.cjs"),et=require("../../common/button/UpdateButtonTable.cjs"),st=require("../../common/button/ViewButtonTable.cjs"),rt=require("../../common/layout/VerticalSpace.cjs"),ut=require("../../common/table/table.cjs"),l=require("react"),nt=require("react-i18next"),ot=require("../../../locale/hooks/translation-constants.cjs"),xt=require("../CrudSearchComponent.cjs"),ct=require("./CrudDecListView.cjs"),_=require("./CrudViewerUtil.cjs");function jt({idField:r="id",loadingData:L,fields:c,isDeleting:q,isHiding:d,viewable:o=!1,paginateProps:i,onDelete:a,onHide:v,onUpdate:R,data:E=[],extraAction:m,onClickUpdate:x,minusHeight:S,scroll:N,onClickClone:f,className:z,expandable:$,size:w,bordered:A,descListColumn:G,extraView:p,decListLayout:J,scrollToTop:lt,onClickRefresh:g,closeViewOnClickUpdate:b,onExport:B,confirmHiding:C,confirmDeleting:I,rowClassName:K,actionWidth:Q=190,...W}){const{t:X}=nt.useTranslation(ot.TRANSLATION_NAMESPACE),M=l.useMemo(()=>c.map(({hideInTable:e,hidden:s,width:j,name:n,label:Z,halign:P,...O})=>({title:Z,width:j,key:n,dataIndex:n,hidden:e||s,align:P??(O.type==="number"?"right":void 0),render:_.getRendererValueCrudViewer(O)})),[c]),[u,h]=l.useState(),[T,y]=l.useState();l.useEffect(()=>{E&&h(e=>{if(e)return E.find(s=>s[r]===e[r])})},[E,r,u]);const V=l.useCallback(e=>{var j;const s=m==null?void 0:m(e);return(Array.isArray(s)?(j=s==null?void 0:s.filter(Boolean))!=null&&j.length:s)||R||x||f||a?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[s,(R||x)&&t.jsxRuntimeExports.jsx(et.default,{value:e,onClick:n=>{y(n[r]),x==null||x(e),b&&h(void 0)}}),f&&t.jsxRuntimeExports.jsx(k.default,{value:e,onClick:n=>f(n)}),B&&t.jsxRuntimeExports.jsx(U.ExportButton,{value:e,onClick:async n=>await B(n)}),v&&t.jsxRuntimeExports.jsx(F.default,{value:e,disabled:d,shouldConfirm:C,loading:d&&e[r]===T,onClick:async n=>{y(n[r]),await v({[r]:n[r]})}}),a&&t.jsxRuntimeExports.jsx(H.default,{value:e,disabled:q,shouldConfirm:I,loading:q&&e[r]===T,onClick:async n=>{y(n[r]),await a({[r]:n[r]})}})]}):void 0},[b,I,C,m,r,q,d,f,x,a,B,v,R,T]),Y=l.useMemo(()=>{let e=typeof o=="string"?u==null?void 0:u[o]:void 0;if(typeof e=="object"){const s=c.find(j=>j.name===o);e=_.getRendererValueCrudViewer(s)(e,u,0)}return e},[o,u,c]);return t.jsxRuntimeExports.jsxs("div",{children:[o&&t.jsxRuntimeExports.jsx(D.Modal,{width:"100%",open:!!u,title:Y??t.jsxRuntimeExports.jsx("div",{children:" "}),footer:t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{}),closable:!0,onCancel:()=>h(void 0),children:!!u&&t.jsxRuntimeExports.jsxs("div",{children:[t.jsxRuntimeExports.jsx(ct.CrudDecListView,{layout:J,descListColumn:G,data:u,fields:c,action:V(u)}),p==null?void 0:p(u)]},u==null?void 0:u[r])}),t.jsxRuntimeExports.jsx(xt.default,{fields:c,...W}),t.jsxRuntimeExports.jsxs(rt.default,{children:[!!g&&t.jsxRuntimeExports.jsx(tt.RefreshButton,{onClick:g}),t.jsxRuntimeExports.jsx(ut.default,{rowClassName:K,className:z,scroll:N??(S?{y:`calc(100vh - ${S})`}:void 0),id:"crud-table",dataSource:E,loading:L,bordered:A,size:w,expandable:$,pagination:i?{total:i.count,onChange:i.setPage,current:i.page,pageSize:i.pageSize}:void 0,columns:R||x||a||m||o?[...M,{title:X("str.action"),dataIndex:"",fixed:"right",width:Q,render:(e,s)=>t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[o&&t.jsxRuntimeExports.jsx(st.default,{value:s,onClick:h}),V(s)]})}]:M})]})]})}exports.default=jt;

package/dist/src/components/crud/view/CrudViewer.js

@@ -0,0 +1,217 @@
+import { j as r } from "../../../../_virtual/jsx-runtime.js";
+import { Modal as k } from "antd";
+import H from "../../common/button/CloneButtonTable.js";
+import U from "../../common/button/DeleteButtonTable.js";
+import { ExportButton as F } from "../../common/button/ExportButton.js";
+import rr from "../../common/button/HideButtonTable.js";
+import { RefreshButton as or } from "../../common/button/RefreshButton.js";
+import tr from "../../common/button/UpdateButtonTable.js";
+import sr from "../../common/button/ViewButtonTable.js";
+import mr from "../../common/layout/VerticalSpace.js";
+import ur from "../../common/table/table.js";
+import { useMemo as L, useState as _, useEffect as nr, useCallback as er } from "react";
+import { useTranslation as fr } from "react-i18next";
+import { TRANSLATION_NAMESPACE as cr } from "../../../locale/hooks/translation-constants.js";
+import lr from "../CrudSearchComponent.js";
+import { CrudDecListView as jr } from "./CrudDecListView.js";
+import { getRendererValueCrudViewer as V } from "./CrudViewerUtil.js";
+function Or({
+  idField: s = "id",
+  loadingData: $,
+  fields: f,
+  isDeleting: y,
+  isHiding: B,
+  viewable: n = !1,
+  paginateProps: l,
+  onDelete: j,
+  onHide: p,
+  onUpdate: h,
+  data: v = [],
+  extraAction: a,
+  onClickUpdate: e,
+  minusHeight: I,
+  scroll: q,
+  onClickClone: T,
+  className: A,
+  expandable: G,
+  size: J,
+  bordered: K,
+  descListColumn: Q,
+  extraView: i,
+  decListLayout: W,
+  scrollToTop: ar,
+  onClickRefresh: C,
+  closeViewOnClickUpdate: R,
+  onExport: S,
+  confirmHiding: E,
+  confirmDeleting: M,
+  rowClassName: X,
+  actionWidth: Y = 190,
+  ...Z
+}) {
+  const { t: d } = fr(cr), N = L(
+    () => f.map(
+      ({ hideInTable: o, hidden: t, width: c, name: u, label: w, halign: D, ...z }) => ({
+        title: w,
+        width: c,
+        key: u,
+        dataIndex: u,
+        hidden: o || t,
+        align: D ?? (z.type === "number" ? "right" : void 0),
+        render: V(z)
+      })
+    ),
+    [f]
+  ), [m, x] = _(), [b, g] = _();
+  nr(() => {
+    v && x((o) => {
+      if (o)
+        return v.find((t) => t[s] === o[s]);
+    });
+  }, [v, s, m]);
+  const O = er(
+    (o) => {
+      var c;
+      const t = a == null ? void 0 : a(o);
+      return (Array.isArray(t) ? (c = t == null ? void 0 : t.filter(Boolean)) != null && c.length : t) || h || e || T || j ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        t,
+        (h || e) && /* @__PURE__ */ r.jsx(
+          tr,
+          {
+            value: o,
+            onClick: (u) => {
+              g(u[s]), e == null || e(o), R && x(void 0);
+            }
+          }
+        ),
+        T && /* @__PURE__ */ r.jsx(H, { value: o, onClick: (u) => T(u) }),
+        S && /* @__PURE__ */ r.jsx(
+          F,
+          {
+            value: o,
+            onClick: async (u) => await S(u)
+          }
+        ),
+        p && /* @__PURE__ */ r.jsx(
+          rr,
+          {
+            value: o,
+            disabled: B,
+            shouldConfirm: E,
+            loading: B && o[s] === b,
+            onClick: async (u) => {
+              g(u[s]), await p({ [s]: u[s] });
+            }
+          }
+        ),
+        j && /* @__PURE__ */ r.jsx(
+          U,
+          {
+            value: o,
+            disabled: y,
+            shouldConfirm: M,
+            loading: y && o[s] === b,
+            onClick: async (u) => {
+              g(u[s]), await j({ [s]: u[s] });
+            }
+          }
+        )
+      ] }) : void 0;
+    },
+    [
+      R,
+      M,
+      E,
+      a,
+      s,
+      y,
+      B,
+      T,
+      e,
+      j,
+      S,
+      p,
+      h,
+      b
+    ]
+  ), P = L(() => {
+    let o = typeof n == "string" ? m == null ? void 0 : m[n] : void 0;
+    if (typeof o == "object") {
+      const t = f.find((c) => c.name === n);
+      o = V(t)(
+        o,
+        m,
+        0
+      );
+    }
+    return o;
+  }, [n, m, f]);
+  return /* @__PURE__ */ r.jsxs("div", { children: [
+    n && /* @__PURE__ */ r.jsx(
+      k,
+      {
+        width: "100%",
+        open: !!m,
+        title: P ?? /* @__PURE__ */ r.jsx("div", { children: " " }),
+        footer: /* @__PURE__ */ r.jsx(r.Fragment, {}),
+        closable: !0,
+        onCancel: () => x(void 0),
+        children: !!m && /* @__PURE__ */ r.jsxs("div", { children: [
+          /* @__PURE__ */ r.jsx(
+            jr,
+            {
+              layout: W,
+              descListColumn: Q,
+              data: m,
+              fields: f,
+              action: O(m)
+            }
+          ),
+          i == null ? void 0 : i(m)
+        ] }, m == null ? void 0 : m[s])
+      }
+    ),
+    /* @__PURE__ */ r.jsx(lr, { fields: f, ...Z }),
+    /* @__PURE__ */ r.jsxs(mr, { children: [
+      !!C && /* @__PURE__ */ r.jsx(or, { onClick: C }),
+      /* @__PURE__ */ r.jsx(
+        ur,
+        {
+          rowClassName: X,
+          className: A,
+          scroll: q ?? (I ? {
+            y: `calc(100vh - ${I})`
+          } : void 0),
+          id: "crud-table",
+          dataSource: v,
+          loading: $,
+          bordered: K,
+          size: J,
+          expandable: G,
+          pagination: l ? {
+            total: l.count,
+            onChange: l.setPage,
+            current: l.page,
+            pageSize: l.pageSize
+          } : void 0,
+          columns: h || e || j || a || n ? [
+            ...N,
+            {
+              title: d("str.action"),
+              dataIndex: "",
+              fixed: "right",
+              width: Y,
+              render: (o, t) => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                n && /* @__PURE__ */ r.jsx(sr, { value: t, onClick: x }),
+                O(t)
+              ] })
+            }
+          ] : N
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Or as default
+};

package/dist/src/components/crud/view/CrudViewerUtil.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../../_virtual/jsx-runtime.cjs"),m=require("@ant-design/icons"),s=require("antd"),j=require("../../common/show-more/index.cjs"),d=require("../FileCrudField.cjs"),v=require("../ImageCrudField.cjs"),y=require("../../../locale/hooks/translation-constants.cjs"),C=require("i18next"),r=require("../../../util/DateUtil.cjs"),x=require("../../../util/NumberUtil.cjs");function g({type:a,render:i,...n}){return a==="object"?(t,u,e)=>typeof i=="function"?i(t,u,e):"":a==="select"?(t,u,e)=>{const o=n;let l=o.multiple?Array.isArray(t)?t.map(f=>f==null?void 0:f[o.innerFieldLabel??"name"]):void 0:t==null?void 0:t[o.innerFieldLabel??"name"];return(!l&&typeof t=="string"||typeof t=="number")&&(l=t),typeof i=="function"?i(l,u,e):Array.isArray(l)?l.join(", "):l}:a==="number"?(t,u,e)=>typeof i=="function"?i(t,u,e):n!=null&&n.int?x.default.toInt(t,n.formatted):x.default.toMoney(t):a==="enum"?(t,u,e)=>{var l;const o=C.t(((l=n==null?void 0:n.translation)==null?void 0:l[t??""])??t,{ns:y.TRANSLATION_NAMESPACE});return typeof i=="function"?i(t,u,e):o}:a==="date"?(t,u,e)=>{if(!t)return"-";const o=n!=null&&n.formatTime?r.default.formatDateTime(t):r.default.formatDate(t);return typeof i=="function"?i(t,u,e):o}:a==="checkbox"?(t,u,e)=>typeof i=="function"?i(t,u,e):t?c.jsxRuntimeExports.jsx(m.CheckOutlined,{}):c.jsxRuntimeExports.jsx(m.CloseOutlined,{}):a==="image"?(t,u,e)=>typeof i=="function"?i(t,u,e):c.jsxRuntimeExports.jsx(v.ImageCrudCellValue,{value:t,provider:n.provider}):a==="file"?(t,u,e)=>typeof i=="function"?i(t,u,e):c.jsxRuntimeExports.jsx(d.FileCrudCellValue,{value:t,provider:n.provider}):a==="time"?(t,u,e)=>{if(!t)return"-";const o=n==null?void 0:n.format,l=n==null?void 0:n.use12Hours,f=r.default.formatTime(t,o||(l?"hh:mm:ss A":void 0));return typeof i=="function"?i(t,u,e):f}:a==="color"?(t,u,e)=>typeof i=="function"?i(t,u,e):typeof t=="string"&&t.startsWith("#")?c.jsxRuntimeExports.jsx(s.Tooltip,{title:t,children:c.jsxRuntimeExports.jsx(s.Avatar,{style:{backgroundColor:t}})}):String(t):a==="textarea"?(t,u,e)=>{const o=(n==null?void 0:n.truncated)??1;return typeof i=="function"?i(t,u,e):o?c.jsxRuntimeExports.jsx(j.ShowMore,{lines:o===!0?1:o,children:t}):t}:typeof i=="function"?i:t=>t}exports.getRendererValueCrudViewer=g;