@kingteza/crud-component 1.22.0 → 1.22.2

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

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

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

@@ -1,33 +1,33 @@
-import { jsxs as y, jsx as i } from "react/jsx-runtime";
-import { WarningTwoTone as S, DownloadOutlined as z } from "@ant-design/icons";
-import $ from "papaparse";
-import { Tooltip as B, App as H, Modal as R, Space as V, Spin as U, Progress as Y } from "antd";
-import { saveAs as G } from "file-saver";
-import { useState as I, useEffect as J, useMemo as D, useCallback as m } from "react";
-import { useTranslationLib as K } from "../../locale/index.es.js";
-import Q from "../view/CrudViewer.es.js";
-import X from "../../util/DateUtil.es.js";
-import Z from "../../common/button/Button.es.js";
-import { ImportButton as P } from "../../common/button/ImportButton.es.js";
-function fe({
-  onCloseMethod: w,
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import { WarningTwoTone as B, DownloadOutlined as H } from "@ant-design/icons";
+import R from "papaparse";
+import { Tooltip as V, App as U, Modal as Y, Space as O, Spin as G, Progress as J } from "antd";
+import { saveAs as K } from "file-saver";
+import { useState as A, useEffect as Q, useMemo as w, useCallback as f } from "react";
+import { useTranslationLib as X } from "../../locale/index.es.js";
+import Z from "../view/CrudViewer.es.js";
+import P from "../../util/DateUtil.es.js";
+import ee from "../../common/button/Button.es.js";
+import { ImportButton as te } from "../../common/button/ImportButton.es.js";
+function pe({
+  onCloseMethod: g,
   open: x,
-  fields: A,
+  fields: F,
   importProps: o
 }) {
-  const [l, g] = I([]), [v, C] = I(!1), [F, N] = I(0);
-  J(() => {
-    x || (g([]), C(!1));
+  const [l, v] = A([]), [C, k] = A(!1), [I, N] = A(0);
+  Q(() => {
+    x || (v([]), k(!1));
   }, [x]);
-  const p = D(
+  const p = w(
     () => new Map(
-      A.filter((e) => {
+      F.filter((e) => {
         var t;
         return !e.hidden && !((t = e.importProps) != null && t.hidden) && !e.readonly;
       }).map((e) => [e.name, e])
     ),
-    [A]
-  ), E = D(
+    [F]
+  ), S = w(
     () => Array.from(p.values()).flatMap((e) => {
       var t;
       return [
@@ -36,189 +36,195 @@ function fe({
       ];
     }),
     [p]
-  ), O = m(
+  ), W = f(
     async function() {
-      const e = `${E.join(",")}
+      const e = `${S.join(",")}
 `, t = new Blob([e], { type: "text/csv;charset=utf-8;" });
-      G(
+      K(
         t,
-        (o == null ? void 0 : o.name) + " - " + X.formatDateTimeWithSecond(/* @__PURE__ */ new Date()).replaceAll(":", "-") + ".csv"
+        (o == null ? void 0 : o.name) + " - " + P.formatDateTimeWithSecond(/* @__PURE__ */ new Date()).replaceAll(":", "-") + ".csv"
       );
     },
-    [E, o == null ? void 0 : o.name]
-  ), { t: a } = K(), W = m(async (e) => {
+    [S, o == null ? void 0 : o.name]
+  ), { t: a } = X(), L = f(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, s = $.parse(c, { header: !0 });
-      g(s.data.map((d, f) => ({ ...d, id_private_private: "crud-import-" + f })));
+      const c = (n = r == null ? void 0 : r.target) == null ? void 0 : n.result, s = R.parse(c, { header: !0 });
+      v(
+        s.data.map((d, m) => ({
+          ...d,
+          id_private_private: "crud-import-" + m
+        }))
+      );
     }, t.readAsText(e);
-  }, []), L = m(async (e) => {
-    g(l.filter((t) => t.id_private_private !== e));
-  }, [l]), T = D(() => {
+  }, []), M = f(
+    async (e) => {
+      console.log("Deleting item from import component", e, l), v((t) => t.filter((r) => r.id_private_private !== e));
+    },
+    [l]
+  ), T = w(() => {
     var t, r, c;
     let e = !1;
     for (const s of l)
       for (const [n, d] of p.entries()) {
-        const f = s[n], u = f || !isNaN(f);
-        if (d.required && !u)
+        const m = s[n], h = m || !isNaN(m);
+        if (d.required && !h)
           if ((r = (t = d.importProps) == null ? void 0 : t.extraFields) != null && r.length)
-            for (const k of ((c = d.importProps) == null ? void 0 : c.extraFields) ?? [])
-              if (s[k] || !isNaN(s[k])) {
+            for (const D of ((c = d.importProps) == null ? void 0 : c.extraFields) ?? [])
+              if (s[D] || !isNaN(s[D])) {
                 e = !1;
                 break;
               } else return !0;
           else return !0;
       }
     return e;
-  }, [l, p]), h = m(
+  }, [l, p]), u = f(
     (e) => (t, r) => {
       var s, n, d;
       const c = t || !isNaN(t);
       if (e.required && !c) {
-        let f = a("err.validation.required");
+        let m = a("err.validation.required");
         if ((n = (s = e.importProps) == null ? void 0 : s.extraFields) != null && n.length) {
-          const u = (d = e.importProps) == null ? void 0 : d.extraFields;
-          (u == null ? void 0 : u.find((q) => !r[q])) && (f = "Either one of these fields is required: " + [e.name, ...u].join(", "));
+          const h = (d = e.importProps) == null ? void 0 : d.extraFields;
+          (h == null ? void 0 : h.find((q) => !r[q])) && (m = "Either one of these fields is required: " + [e.name, ...h].join(", "));
         }
-        return /* @__PURE__ */ y(B, { className: "d-flex", title: f, children: [
-          /* @__PURE__ */ i(S, { twoToneColor: "#ee9702" }),
+        return /* @__PURE__ */ b(V, { className: "d-flex", title: m, children: [
+          /* @__PURE__ */ i(B, { twoToneColor: "#ee9702" }),
           t
         ] });
       }
       return t;
     },
     [a]
-  ), _ = m(async (e) => {
+  ), E = f(async (e) => {
     N(e);
-  }, []), b = m(async () => {
+  }, []), y = f(async () => {
     try {
-      C(!0), await o.onClickImport(l, _), w(!1);
+      k(!0), await o.onClickImport(l, E), g(!1);
     } finally {
-      C(!1), N(0);
+      k(!1), N(0);
     }
-  }, [l, o, w, _]), { modal: j } = H.useApp(), M = m(async () => {
-    T ? j.warning ? j.warning({
+  }, [l, o, g, E]), { modal: _ } = U.useApp(), z = f(async () => {
+    T ? _.warning ? _.warning({
       title: a("str.warning"),
       content: a("qus.importWithIssues"),
       okText: a("str.import"),
-      onOk: b,
+      onOk: y,
       okCancel: !0,
       closable: !0
     }) : (console.error(
       "You must wrap your react app with App component. https://ant.design/components/app"
-    ), window.confirm(a("qus.importWithIssues")) && b()) : b();
-  }, [T, b, a]);
-  return /* @__PURE__ */ y(
-    R,
+    ), window.confirm(a("qus.importWithIssues")) && y()) : y();
+  }, [T, y, a]), j = w(
+    () => Array.from(p.values()).flatMap((e) => {
+      var t, r, c, s;
+      return e.type === "text" ? [
+        {
+          ...e,
+          label: e.name,
+          render: u(e)
+        },
+        ...((r = (t = e.importProps) == null ? void 0 : t.extraFields) == null ? void 0 : r.map((n, d) => ({
+          ...e,
+          name: n,
+          label: n,
+          render: u(e)
+        }))) ?? []
+      ] : e.type === "select" ? [
+        {
+          ...e,
+          label: e.name,
+          type: "text",
+          render: u(e)
+        },
+        ...((s = (c = e.importProps) == null ? void 0 : c.extraFields) == null ? void 0 : s.map((n) => ({
+          ...e,
+          name: n,
+          label: n,
+          type: "text",
+          render: u(e)
+        }))) ?? []
+      ] : [
+        {
+          ...e,
+          label: e.name,
+          render: u(e)
+        }
+      ];
+    }),
+    [p, u]
+  ), $ = w(() => j.map((e) => ({ ...e, hideInTable: !1 })), [j]);
+  return /* @__PURE__ */ b(
+    Y,
     {
       title: [a("str.import"), o == null ? void 0 : o.name].filter(Boolean).join(" "),
       width: "100%",
       open: x,
-      onOk: M,
+      onOk: z,
       destroyOnHidden: !0,
-      onCancel: () => w(!1),
+      onCancel: () => g(!1),
       okText: a("str.import"),
-      confirmLoading: v,
+      confirmLoading: C,
       okButtonProps: {
         disabled: !(l != null && l.length)
       },
-      footer: (e, { OkBtn: t, CancelBtn: r }) => /* @__PURE__ */ y(V, { children: [
+      footer: (e, { OkBtn: t, CancelBtn: r }) => /* @__PURE__ */ b(O, { children: [
         /* @__PURE__ */ i(r, {}),
         /* @__PURE__ */ i(t, {}),
         T && /* @__PURE__ */ i(
-          B,
+          V,
           {
             className: "d-flex",
             title: "Some fields have issue. Please review before submit.",
-            children: /* @__PURE__ */ i(S, { twoToneColor: "#ee9702" })
+            children: /* @__PURE__ */ i(B, { twoToneColor: "#ee9702" })
           }
         )
       ] }),
       children: [
-        /* @__PURE__ */ y(V, { children: [
+        /* @__PURE__ */ b(O, { children: [
           /* @__PURE__ */ i(
-            Z,
+            ee,
             {
-              onClick: O,
-              icon: /* @__PURE__ */ i(z, {}),
+              onClick: W,
+              icon: /* @__PURE__ */ i(H, {}),
               children: a("str.downloadCsvTemplate")
             }
           ),
           /* @__PURE__ */ i(
-            P,
+            te,
             {
-              disabled: v,
+              disabled: C,
               type: "default",
-              onClick: W,
+              onClick: L,
               accept: ".csv",
               children: a("str.importCsvFile")
             }
           )
         ] }),
         /* @__PURE__ */ i(
-          U,
+          G,
           {
-            spinning: v,
-            indicator: F ? /* @__PURE__ */ i(
-              Y,
+            spinning: C,
+            indicator: I ? /* @__PURE__ */ i(
+              J,
               {
                 type: "circle",
-                percent: F * 100,
+                percent: I * 100,
                 size: 50,
                 format: (e) => `${parseInt(e)}%`
               }
             ) : void 0,
             children: /* @__PURE__ */ i(
-              Q,
+              Z,
               {
                 data: l,
                 bordered: !0,
                 size: "small",
                 idField: "id_private_private",
-                onDelete: L,
+                onDelete: M,
                 confirmDeleting: !1,
-                fields: Array.from(p.values()).flatMap((e) => {
-                  var t, r, c, s;
-                  return e.type === "text" ? [
-                    {
-                      ...e,
-                      label: e.name,
-                      hideInTable: !1,
-                      render: h(e)
-                    },
-                    ...((r = (t = e.importProps) == null ? void 0 : t.extraFields) == null ? void 0 : r.map((n, d) => ({
-                      ...e,
-                      name: n,
-                      label: n,
-                      hideInTable: !1,
-                      render: h(e)
-                    }))) ?? []
-                  ] : e.type === "select" ? [
-                    {
-                      ...e,
-                      label: e.name,
-                      hideInTable: !1,
-                      type: "text",
-                      render: h(e)
-                    },
-                    ...((s = (c = e.importProps) == null ? void 0 : c.extraFields) == null ? void 0 : s.map((n) => ({
-                      ...e,
-                      name: n,
-                      label: n,
-                      hideInTable: !1,
-                      type: "text",
-                      render: h(e)
-                    }))) ?? []
-                  ] : [
-                    {
-                      ...e,
-                      label: e.name,
-                      hideInTable: !1,
-                      render: h(e)
-                    }
-                  ];
-                })
+                fields: $
               }
             )
           }
@@ -228,5 +234,5 @@ function fe({
   );
 }
 export {
-  fe as default
+  pe as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kingteza/crud-component",
   "private": false,
-  "version": "1.22.0",
+  "version": "1.22.2",
   "description": "React CRUD component library with Ant Design",
   "keywords": [
     "react",