@kingteza/crud-component 1.0.12 → 1.0.14

package/dist/components/crud/FileCrudField.js

@@ -0,0 +1,227 @@
+import { j as e } from "../../_virtual/jsx-runtime.js";
+/* empty css          */
+import { Form as F, Upload as W, Modal as z } from "antd";
+import M from "../../node_modules/mime/dist/src/index.js";
+import { useState as d, useCallback as N, useEffect as S, useMemo as E } from "react";
+import { TRANSLATION_NAMESPACE as G } from "../../locale/hooks/translation-constants.js";
+import J from "../../util/ValidationUtil.js";
+import g from "../common/button/Button.js";
+import K from "../common/layout/VerticalSpace.js";
+import Q from "../../node_modules/@ant-design/icons/es/icons/FileOutlined.js";
+import X from "../../node_modules/@ant-design/icons/es/icons/FilePptOutlined.js";
+import Y from "../../node_modules/@ant-design/icons/es/icons/FileExcelOutlined.js";
+import Z from "../../node_modules/@ant-design/icons/es/icons/FileTextOutlined.js";
+import m from "../../node_modules/@ant-design/icons/es/icons/FileWordOutlined.js";
+import v from "../../node_modules/@ant-design/icons/es/icons/FilePdfOutlined.js";
+import y from "../../node_modules/@ant-design/icons/es/icons/FileImageOutlined.js";
+import { useTranslation as T } from "../../node_modules/react-i18next/dist/es/useTranslation.js";
+import tt from "../../node_modules/@ant-design/icons/es/icons/ExportOutlined.js";
+function It({
+  name: o,
+  label: t,
+  required: r,
+  provider: s,
+  onUploading: l,
+  onRemoved: f,
+  fieldClassName: x,
+  accept: I,
+  rules: U,
+  maxCount: C = 1,
+  block: k,
+  ...O
+}) {
+  const u = F.useFormInstance(), h = F.useWatch(o, u), [P, $] = d(!1), [R, _] = d(!1), L = N(
+    async (n) => {
+      var c, a;
+      try {
+        const { file: i } = n, j = i.name;
+        $(!0), _(!0), l == null || l(!0);
+        const w = j ?? "", b = w.split("."), B = b[b.length - 1], H = s.generateFileName(w), A = `${await s.getInitialPath()}/${H}.${B}`;
+        console.log({ filePath: A });
+        const D = await s.upload(
+          { ...i, originFileObj: i },
+          A
+        );
+        l == null || l(!1), u.setFieldValue(o, D), (c = n.onSuccess) == null || c.call(n, D);
+      } catch (i) {
+        (a = n.onError) == null || a.call(n, i);
+      } finally {
+        $(!1);
+      }
+    },
+    [u, o, l, s]
+  ), [p, V] = d([]);
+  S(() => {
+    !R && h && Promise.all(
+      (Array.isArray(h) ? h : [h]).map(
+        async (n) => {
+          const c = M.getType(n), a = n.split("/").pop(), i = await s.getRealUrl(n);
+          return {
+            uid: n,
+            url: i,
+            type: c,
+            name: a
+          };
+        }
+      )
+    ).then((n) => V(() => {
+      const c = n.map(({ url: a, type: i, uid: j, name: w }) => ({ uid: j, url: a, type: i, response: j, thumbUrl: a, name: w }));
+      return console.log(c), c;
+    }));
+  }, [h, R, P, s]);
+  const q = N(
+    async (n) => {
+      const c = n.response, a = c || u.getFieldValue(o);
+      await s.delete(a), f == null || f(), n && u.setFieldsValue({ [o]: null });
+    },
+    [u, o, f, s]
+  );
+  return /* @__PURE__ */ e.jsxs(
+    F.Item,
+    {
+      label: t,
+      required: r,
+      name: o,
+      className: x,
+      rules: [
+        ...r ? J.required(t) : [],
+        ...U ?? []
+      ],
+      children: [
+        /* @__PURE__ */ e.jsx("input", { hidden: !0 }),
+        /* @__PURE__ */ e.jsx(
+          W,
+          {
+            ...O,
+            fileList: p,
+            className: ((p == null ? void 0 : p.length) ?? 0) >= C ? "hide-upload" : "",
+            maxCount: C,
+            customRequest: L,
+            onRemove: q,
+            listType: "picture",
+            onChange: ({ fileList: n }) => {
+              V(n);
+            },
+            style: k ? { width: "100%" } : void 0,
+            children: /* @__PURE__ */ e.jsx(g, { loading: P, children: "Upload File" })
+          }
+        )
+      ]
+    }
+  );
+}
+const Ct = ({ provider: o, value: t }) => {
+  const [r, s] = d();
+  return S(() => {
+    t && o.getRealUrl(t).then((l) => {
+      s({
+        mimeType: M.getType(t),
+        url: l,
+        fileName: t.split("/").pop() ?? t
+      });
+    });
+  }, [o, t]), r ? /* @__PURE__ */ e.jsx(
+    et,
+    {
+      fileName: r.fileName,
+      url: r == null ? void 0 : r.url,
+      mimeType: r == null ? void 0 : r.mimeType
+    }
+  ) : /* @__PURE__ */ e.jsx(e.Fragment, {});
+}, et = ({ url: o, mimeType: t = "", fileName: r }) => {
+  const s = E(() => t != null && t.includes("image") ? "image" : t != null && t.includes("pdf") ? "pdf" : t != null && t.includes("word") ? "word" : t != null && t.includes("text") ? "text" : t != null && t.includes("presentation") ? "presentation" : t != null && t.includes("excel") || t != null && t.includes("spreadsheet") ? "excel" : "file", [t]), l = E(() => {
+    switch (s) {
+      case "image":
+        return /* @__PURE__ */ e.jsx(y, {});
+      case "pdf":
+        return /* @__PURE__ */ e.jsx(v, {});
+      case "word":
+        return /* @__PURE__ */ e.jsx(m, {});
+      case "text":
+        return /* @__PURE__ */ e.jsx(Z, {});
+      case "excel":
+        return /* @__PURE__ */ e.jsx(Y, {});
+      case "presentation":
+        return /* @__PURE__ */ e.jsx(X, {});
+      default:
+        return /* @__PURE__ */ e.jsx(Q, {});
+    }
+  }, [s]), [f, x] = d(!1), { t: I } = T(G);
+  return s !== "file" && s !== "text" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      z,
+      {
+        open: f,
+        title: r,
+        onCancel: () => x(!1),
+        footer: /* @__PURE__ */ e.jsx(e.Fragment, {}),
+        width: "100%",
+        style: { top: "8px", minHeight: "700px" },
+        destroyOnClose: !0,
+        children: /* @__PURE__ */ e.jsxs(K, { children: [
+          /* @__PURE__ */ e.jsx(
+            g,
+            {
+              tooltip: r,
+              icon: /* @__PURE__ */ e.jsx(tt, {}),
+              target: "_blank",
+              href: o,
+              style: { textDecoration: "none" },
+              children: I("str.openInNewTab")
+            }
+          ),
+          s === "image" ? /* @__PURE__ */ e.jsx("img", { src: o, alt: r, style: { width: "100%" } }) : s === "pdf" ? /* @__PURE__ */ e.jsxs("iframe", { title: r, src: o, width: "100%", height: "700px", children: [
+            "This browser does not support PDFs. Please download the PDF to view it:",
+            /* @__PURE__ */ e.jsx("a", { href: o, children: "Download PDF" }),
+            "."
+          ] }) : /* @__PURE__ */ e.jsxs(
+            "iframe",
+            {
+              title: r,
+              src: `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
+                o
+              )}`,
+              width: "100%",
+              height: "700px",
+              children: [
+                "This browser does not support open ",
+                s.toUpperCase(),
+                ". Please download the",
+                s.toUpperCase(),
+                " to view it:",
+                /* @__PURE__ */ e.jsxs("a", { href: o, children: [
+                  "Download ",
+                  s.toUpperCase()
+                ] }),
+                "."
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      g,
+      {
+        tooltip: r,
+        icon: l,
+        shape: "circle",
+        onClick: () => x(!0)
+      }
+    )
+  ] }) : /* @__PURE__ */ e.jsx(
+    g,
+    {
+      tooltip: r,
+      icon: l,
+      target: "_blank",
+      href: o,
+      shape: "circle"
+    }
+  );
+};
+export {
+  et as FileCellValue,
+  Ct as FileCrudCellValue,
+  It as default
+};

package/dist/components/crud/ImageCrudField.cjs

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

package/dist/components/crud/ImageCrudField.js

@@ -0,0 +1,113 @@
+var A = Object.defineProperty;
+var E = (e, a, t) => a in e ? A(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
+var h = (e, a, t) => E(e, typeof a != "symbol" ? a + "" : a, t);
+import { j as l } from "../../_virtual/jsx-runtime.js";
+/* empty css          */
+import { Form as x, Input as O, Avatar as S, Image as D } from "antd";
+import N from "../../_virtual/index.js";
+import { useState as F, useCallback as W, useEffect as w } from "react";
+import q from "../../util/NumberUtil.js";
+import z from "../../util/ValidationUtil.js";
+import B from "../common/picker/ImagePicker.js";
+import G from "../../node_modules/uuid/dist/esm-browser/v4.js";
+import H from "../../node_modules/@ant-design/icons/es/icons/EyeOutlined.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_${q.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: I,
+  onRemoved: c,
+  fieldClassName: d,
+  hideLabel: V = !1,
+  listType: C
+}) {
+  const i = x.useFormInstance(), u = x.useWatch(e, i), [P, $] = F(!1), p = W(
+    async (n, g) => {
+      if (g) {
+        r == null || r(!0);
+        const m = n.name, o = m.split("."), y = o[o.length - 1], b = s.generateFileName(m), k = `${await s.getInitialPath()}/${b}.${y}`, _ = await s.upload(n, k);
+        $(!0), r == null || r(!1), i.setFieldValue(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 w(() => {
+    !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 ? z.required(a) : [],
+      label: V ? null : a,
+      required: t,
+      name: e,
+      children: [
+        /* @__PURE__ */ l.jsx(
+          B,
+          {
+            noStyle: !0,
+            listType: C,
+            aspectRatio: I,
+            values: f,
+            onRemove: (n) => {
+              n && p(n, !1);
+            },
+            onAdd: async (n) => {
+              n && await p(n, !0);
+            },
+            className: d
+          }
+        ),
+        /* @__PURE__ */ l.jsx(O, { hidden: !0 })
+      ]
+    }
+  ) });
+}
+const ae = ({ provider: e, value: a }) => {
+  const [t, s] = F();
+  return w(() => {
+    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(S, { className: "p-0", children: /* @__PURE__ */ l.jsx(
+  D,
+  {
+    className: "m-0 p-0 position-relative",
+    src: e,
+    preview: {
+      mask: /* @__PURE__ */ l.jsx(H, {})
+    }
+  }
+) });
+export {
+  J as FileDownloadProvider,
+  te as FileUploadProvider,
+  K as ImageCellValue,
+  ae as ImageCrudCellValue,
+  se as default
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";const s=require("../../../_virtual/jsx-runtime.cjs"),M=require("../../../_virtual/papaparse.min.cjs"),d=require("antd"),B=require("../../../_virtual/FileSaver.min.cjs"),o=require("react"),O=require("../../../locale/hooks/translation-constants.cjs"),V=require("../view/CrudViewer.cjs"),_=require("../../../util/DateUtil.cjs"),L=require("../../common/button/Button.cjs"),W=require("../../common/button/ImportButton.cjs"),z=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),N=require("../../../node_modules/@ant-design/icons/es/icons/WarningTwoTone.cjs"),$=require("../../../node_modules/@ant-design/icons/es/icons/DownloadOutlined.cjs");function U({onCloseMethod:E,open:b,fields:q,importProps:a}){const[u,w]=o.useState([]),[C,h]=o.useState(!1),[T,g]=o.useState(0);o.useEffect(()=>{b||(w([]),h(!1))},[b]);const f=o.useMemo(()=>new Map(q.filter(e=>{var t;return!e.hidden&&!((t=e.importProps)!=null&&t.hidden)&&!e.readonly}).map(e=>[e.name,e])),[q]),v=o.useMemo(()=>Array.from(f.values()).flatMap(e=>{var t;return[e.name,...((t=e.importProps)==null?void 0:t.extraFields)??[]]}),[f]),F=o.useCallback(async function(){const e=`${v.join(",")}
+`,t=new Blob([e],{type:"text/csv;charset=utf-8;"});B.FileSaver_minExports.saveAs(t,(a==null?void 0:a.name)+" - "+_.formatDateTimeWithSecond(new Date).replaceAll(":","-")+".csv")},[v,a==null?void 0:a.name]),{t:l}=z.useTranslation(O.TRANSLATION_NAMESPACE),D=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});w(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(A=>!r[A]))&&(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(N,{twoToneColor:"#ee9702"}),t]})}return t},[l]),S=o.useCallback(async e=>{g(e)},[]),k=o.useCallback(async()=>{try{h(!0),await a.onClickImport(u,S),E(!1)}finally{h(!1),g(0)}},[u,a,E,S]),I=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:b,onOk:I,destroyOnClose:!0,onCancel:()=>E(!1),okText:l("str.import"),confirmLoading:C,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(N,{twoToneColor:"#ee9702"})})]}),children:[s.jsxRuntimeExports.jsxs(d.Space,{children:[s.jsxRuntimeExports.jsx(L,{onClick:F,icon:s.jsxRuntimeExports.jsx($,{}),children:l("str.downloadCsvTemplate")}),s.jsxRuntimeExports.jsx(W.ImportButton,{disabled:C,type:"default",onClick:D,accept:".csv",children:l("str.importCsvFile")})]}),s.jsxRuntimeExports.jsx(d.Spin,{spinning:C,indicator:T?s.jsxRuntimeExports.jsx(d.Progress,{type:"circle",percent:T*100,size:50,format:e=>`${parseInt(e)}%`}):void 0,children:s.jsxRuntimeExports.jsx(V,{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)}]})})})]})}module.exports=U;

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

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

package/dist/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"),g=require("../../../locale/hooks/translation-constants.cjs"),p=require("./CrudViewerUtil.cjs"),q=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs");function C({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}=q.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,{keepEmptyValues:x,bordered:!0,column:c,className:l,layout:m,list:j}):n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{})}exports.CrudDecListView=C;

package/dist/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 { TRANSLATION_NAMESPACE as g } from "../../../locale/hooks/translation-constants.js";
+import { getRendererValueCrudViewer as j } from "./CrudViewerUtil.js";
+import { useTranslation as A } from "../../../node_modules/react-i18next/dist/es/useTranslation.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 } = A(g), c = b(() => {
+    const n = s.filter(({ hidden: e, hideInDescList: t }) => !e && !t).map((e, t) => ({
+      label: e.label,
+      noFormatting: !0,
+      value: j(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/components/crud/view/CrudViewer.cjs

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