@kingteza/crud-component 1.21.1 → 1.22.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const n=require("react/jsx-runtime"),
|
|
2
|
-
`,t=new Blob([e],{type:"text/csv;charset=utf-8;"});
|
|
1
|
+
"use strict";const n=require("react/jsx-runtime"),T=require("@ant-design/icons"),O=require("papaparse"),f=require("antd"),L=require("file-saver"),r=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:o}){const[c,C]=r.useState([]),[k,g]=r.useState(!1),[D,S]=r.useState(0);r.useEffect(()=>{y||(C([]),g(!1))},[y]);const p=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(p.values()).flatMap(e=>{var t;return[e.name,...((t=e.importProps)==null?void 0:t.extraFields)??[]]}),[p]),M=r.useCallback(async function(){const e=`${A.join(",")}
|
|
2
|
+
`,t=new Blob([e],{type:"text/csv;charset=utf-8;"});L.saveAs(t,(o==null?void 0:o.name)+" - "+$.formatDateTimeWithSecond(new Date).replaceAll(":","-")+".csv")},[A,o==null?void 0:o.name]),{t:i}=R.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=O.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 p.entries()){const m=l[a],h=m||!isNaN(m);if(u.required&&!h)if((s=(t=u.importProps)==null?void 0:t.extraFields)!=null&&s.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=r.useCallback(e=>(t,s)=>{var l,a,u;const d=t||!isNaN(t);if(e.required&&!d){let m=i("err.validation.required");if((a=(l=e.importProps)==null?void 0:l.extraFields)!=null&&a.length){const h=(u=e.importProps)==null?void 0:u.extraFields;(h==null?void 0:h.find(E=>!s[E]))&&(m="Either one of these fields is required: "+[e.name,...h].join(", "))}return n.jsxs(f.Tooltip,{className:"d-flex",title:m,children:[n.jsx(T.WarningTwoTone,{twoToneColor:"#ee9702"}),t]})}return t},[i]),I=r.useCallback(async e=>{S(e)},[]),b=r.useCallback(async()=>{try{g(!0),await o.onClickImport(c,I),w(!1)}finally{g(!1),S(0)}},[c,o,w,I]),{modal:F}=f.App.useApp(),V=r.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=r.useMemo(()=>Array.from(p.values()).flatMap(e=>{var t,s,d,l;return e.type==="text"?[{...e,label:e.name,render:x(e)},...((s=(t=e.importProps)==null?void 0:t.extraFields)==null?void 0:s.map((a,u)=>({...e,name:a,label:a,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(a=>({...e,name:a,label:a,type:"text",render:x(e)})))??[]]:[{...e,label:e.name,render:x(e)}]}),[p,x]),W=r.useMemo(()=>N.map(e=>({...e,hideInTable:!1})),[N]);return n.jsxs(f.Modal,{title:[i("str.import"),o==null?void 0:o.name].filter(Boolean).join(" "),width:"100%",open:y,onOk:V,destroyOnHidden:!0,onCancel:()=>w(!1),okText:i("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(T.WarningTwoTone,{twoToneColor:"#ee9702"})})]}),children:[n.jsxs(f.Space,{children:[n.jsx(H,{onClick:M,icon:n.jsx(T.DownloadOutlined,{}),children:i("str.downloadCsvTemplate")}),n.jsx(U.ImportButton,{disabled:k,type:"default",onClick:_,accept:".csv",children:i("str.importCsvFile")})]}),n.jsx(f.Spin,{spinning:k,indicator:D?n.jsx(f.Progress,{type:"circle",percent:D*100,size:50,format:e=>`${parseInt(e)}%`}):void 0,children:n.jsx(z,{data:c,bordered:!0,size:"small",idField:"id_private_private",onDelete:B,confirmDeleting:!1,fields:W})})]})}module.exports=Y;
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { WarningTwoTone as B, DownloadOutlined as
|
|
3
|
-
import
|
|
4
|
-
import { Tooltip as V, App as
|
|
5
|
-
import { saveAs as
|
|
6
|
-
import { useState as
|
|
7
|
-
import { useTranslationLib as
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import { ImportButton as
|
|
12
|
-
function
|
|
13
|
-
onCloseMethod:
|
|
14
|
-
open:
|
|
15
|
-
fields:
|
|
1
|
+
import { jsxs as b, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { WarningTwoTone as B, DownloadOutlined as H } from "@ant-design/icons";
|
|
3
|
+
import R from "papaparse";
|
|
4
|
+
import { Tooltip as V, App as U, Modal as Y, Space as O, Spin as G, Progress as J } from "antd";
|
|
5
|
+
import { saveAs as K } from "file-saver";
|
|
6
|
+
import { useState as A, useEffect as Q, useMemo as w, useCallback as m } from "react";
|
|
7
|
+
import { useTranslationLib as X } from "../../locale/index.es.js";
|
|
8
|
+
import Z from "../view/CrudViewer.es.js";
|
|
9
|
+
import P from "../../util/DateUtil.es.js";
|
|
10
|
+
import ee from "../../common/button/Button.es.js";
|
|
11
|
+
import { ImportButton as te } from "../../common/button/ImportButton.es.js";
|
|
12
|
+
function ue({
|
|
13
|
+
onCloseMethod: x,
|
|
14
|
+
open: g,
|
|
15
|
+
fields: F,
|
|
16
16
|
importProps: o
|
|
17
17
|
}) {
|
|
18
|
-
const [
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}, [
|
|
22
|
-
const u =
|
|
18
|
+
const [l, v] = A([]), [C, k] = A(!1), [I, N] = A(0);
|
|
19
|
+
Q(() => {
|
|
20
|
+
g || (v([]), k(!1));
|
|
21
|
+
}, [g]);
|
|
22
|
+
const u = w(
|
|
23
23
|
() => new Map(
|
|
24
|
-
|
|
24
|
+
F.filter((e) => {
|
|
25
25
|
var t;
|
|
26
26
|
return !e.hidden && !((t = e.importProps) != null && t.hidden) && !e.readonly;
|
|
27
27
|
}).map((e) => [e.name, e])
|
|
28
28
|
),
|
|
29
|
-
[
|
|
30
|
-
),
|
|
29
|
+
[F]
|
|
30
|
+
), S = w(
|
|
31
31
|
() => Array.from(u.values()).flatMap((e) => {
|
|
32
32
|
var t;
|
|
33
33
|
return [
|
|
@@ -36,95 +36,143 @@ function de({
|
|
|
36
36
|
];
|
|
37
37
|
}),
|
|
38
38
|
[u]
|
|
39
|
-
), W =
|
|
39
|
+
), W = m(
|
|
40
40
|
async function() {
|
|
41
|
-
const e = `${
|
|
41
|
+
const e = `${S.join(",")}
|
|
42
42
|
`, t = new Blob([e], { type: "text/csv;charset=utf-8;" });
|
|
43
|
-
|
|
43
|
+
K(
|
|
44
44
|
t,
|
|
45
|
-
(o == null ? void 0 : o.name) + " - " +
|
|
45
|
+
(o == null ? void 0 : o.name) + " - " + P.formatDateTimeWithSecond(/* @__PURE__ */ new Date()).replaceAll(":", "-") + ".csv"
|
|
46
46
|
);
|
|
47
47
|
},
|
|
48
|
-
[
|
|
49
|
-
), { t:
|
|
48
|
+
[S, o == null ? void 0 : o.name]
|
|
49
|
+
), { t: a } = X(), L = m(async (e) => {
|
|
50
50
|
const t = new FileReader();
|
|
51
51
|
t.onerror = console.error, t.onload = async (r) => {
|
|
52
52
|
var n;
|
|
53
|
-
const
|
|
54
|
-
|
|
53
|
+
const c = (n = r == null ? void 0 : r.target) == null ? void 0 : n.result, s = R.parse(c, { header: !0 });
|
|
54
|
+
v(
|
|
55
|
+
s.data.map((d, f) => ({
|
|
56
|
+
...d,
|
|
57
|
+
id_private_private: "crud-import-" + f
|
|
58
|
+
}))
|
|
59
|
+
);
|
|
55
60
|
}, t.readAsText(e);
|
|
56
|
-
}, []),
|
|
57
|
-
|
|
61
|
+
}, []), M = m(
|
|
62
|
+
async (e) => {
|
|
63
|
+
v(l.filter((t) => t.id_private_private !== e));
|
|
64
|
+
},
|
|
65
|
+
[l]
|
|
66
|
+
), T = w(() => {
|
|
67
|
+
var t, r, c;
|
|
58
68
|
let e = !1;
|
|
59
|
-
for (const
|
|
69
|
+
for (const s of l)
|
|
60
70
|
for (const [n, d] of u.entries()) {
|
|
61
|
-
const
|
|
62
|
-
if (d.required && !
|
|
71
|
+
const f = s[n], h = f || !isNaN(f);
|
|
72
|
+
if (d.required && !h)
|
|
63
73
|
if ((r = (t = d.importProps) == null ? void 0 : t.extraFields) != null && r.length)
|
|
64
|
-
for (const
|
|
65
|
-
if (
|
|
74
|
+
for (const D of ((c = d.importProps) == null ? void 0 : c.extraFields) ?? [])
|
|
75
|
+
if (s[D] || !isNaN(s[D])) {
|
|
66
76
|
e = !1;
|
|
67
77
|
break;
|
|
68
78
|
} else return !0;
|
|
69
79
|
else return !0;
|
|
70
80
|
}
|
|
71
81
|
return e;
|
|
72
|
-
}, [
|
|
82
|
+
}, [l, u]), p = m(
|
|
73
83
|
(e) => (t, r) => {
|
|
74
|
-
var
|
|
75
|
-
const
|
|
76
|
-
if (e.required && !
|
|
77
|
-
let
|
|
78
|
-
if ((n = (
|
|
79
|
-
const
|
|
80
|
-
(
|
|
84
|
+
var s, n, d;
|
|
85
|
+
const c = t || !isNaN(t);
|
|
86
|
+
if (e.required && !c) {
|
|
87
|
+
let f = a("err.validation.required");
|
|
88
|
+
if ((n = (s = e.importProps) == null ? void 0 : s.extraFields) != null && n.length) {
|
|
89
|
+
const h = (d = e.importProps) == null ? void 0 : d.extraFields;
|
|
90
|
+
(h == null ? void 0 : h.find((q) => !r[q])) && (f = "Either one of these fields is required: " + [e.name, ...h].join(", "));
|
|
81
91
|
}
|
|
82
|
-
return /* @__PURE__ */
|
|
92
|
+
return /* @__PURE__ */ b(V, { className: "d-flex", title: f, children: [
|
|
83
93
|
/* @__PURE__ */ i(B, { twoToneColor: "#ee9702" }),
|
|
84
94
|
t
|
|
85
95
|
] });
|
|
86
96
|
}
|
|
87
97
|
return t;
|
|
88
98
|
},
|
|
89
|
-
[
|
|
90
|
-
),
|
|
91
|
-
|
|
92
|
-
}, []), y =
|
|
99
|
+
[a]
|
|
100
|
+
), E = m(async (e) => {
|
|
101
|
+
N(e);
|
|
102
|
+
}, []), y = m(async () => {
|
|
93
103
|
try {
|
|
94
|
-
|
|
104
|
+
k(!0), await o.onClickImport(l, E), x(!1);
|
|
95
105
|
} finally {
|
|
96
|
-
|
|
106
|
+
k(!1), N(0);
|
|
97
107
|
}
|
|
98
|
-
}, [
|
|
99
|
-
|
|
100
|
-
title:
|
|
101
|
-
content:
|
|
102
|
-
okText:
|
|
108
|
+
}, [l, o, x, E]), { modal: _ } = U.useApp(), z = m(async () => {
|
|
109
|
+
T ? _.warning ? _.warning({
|
|
110
|
+
title: a("str.warning"),
|
|
111
|
+
content: a("qus.importWithIssues"),
|
|
112
|
+
okText: a("str.import"),
|
|
103
113
|
onOk: y,
|
|
104
114
|
okCancel: !0,
|
|
105
115
|
closable: !0
|
|
106
116
|
}) : (console.error(
|
|
107
117
|
"You must wrap your react app with App component. https://ant.design/components/app"
|
|
108
|
-
), window.confirm(
|
|
109
|
-
}, [
|
|
110
|
-
|
|
111
|
-
|
|
118
|
+
), window.confirm(a("qus.importWithIssues")) && y()) : y();
|
|
119
|
+
}, [T, y, a]), j = w(
|
|
120
|
+
() => Array.from(u.values()).flatMap((e) => {
|
|
121
|
+
var t, r, c, s;
|
|
122
|
+
return e.type === "text" ? [
|
|
123
|
+
{
|
|
124
|
+
...e,
|
|
125
|
+
label: e.name,
|
|
126
|
+
render: p(e)
|
|
127
|
+
},
|
|
128
|
+
...((r = (t = e.importProps) == null ? void 0 : t.extraFields) == null ? void 0 : r.map((n, d) => ({
|
|
129
|
+
...e,
|
|
130
|
+
name: n,
|
|
131
|
+
label: n,
|
|
132
|
+
render: p(e)
|
|
133
|
+
}))) ?? []
|
|
134
|
+
] : e.type === "select" ? [
|
|
135
|
+
{
|
|
136
|
+
...e,
|
|
137
|
+
label: e.name,
|
|
138
|
+
type: "text",
|
|
139
|
+
render: p(e)
|
|
140
|
+
},
|
|
141
|
+
...((s = (c = e.importProps) == null ? void 0 : c.extraFields) == null ? void 0 : s.map((n) => ({
|
|
142
|
+
...e,
|
|
143
|
+
name: n,
|
|
144
|
+
label: n,
|
|
145
|
+
type: "text",
|
|
146
|
+
render: p(e)
|
|
147
|
+
}))) ?? []
|
|
148
|
+
] : [
|
|
149
|
+
{
|
|
150
|
+
...e,
|
|
151
|
+
label: e.name,
|
|
152
|
+
render: p(e)
|
|
153
|
+
}
|
|
154
|
+
];
|
|
155
|
+
}),
|
|
156
|
+
[u, p]
|
|
157
|
+
), $ = w(() => j.map((e) => ({ ...e, hideInTable: !1 })), [j]);
|
|
158
|
+
return /* @__PURE__ */ b(
|
|
159
|
+
Y,
|
|
112
160
|
{
|
|
113
|
-
title: [
|
|
161
|
+
title: [a("str.import"), o == null ? void 0 : o.name].filter(Boolean).join(" "),
|
|
114
162
|
width: "100%",
|
|
115
|
-
open:
|
|
116
|
-
onOk:
|
|
163
|
+
open: g,
|
|
164
|
+
onOk: z,
|
|
117
165
|
destroyOnHidden: !0,
|
|
118
|
-
onCancel: () =>
|
|
119
|
-
okText:
|
|
120
|
-
confirmLoading:
|
|
166
|
+
onCancel: () => x(!1),
|
|
167
|
+
okText: a("str.import"),
|
|
168
|
+
confirmLoading: C,
|
|
121
169
|
okButtonProps: {
|
|
122
|
-
disabled: !(
|
|
170
|
+
disabled: !(l != null && l.length)
|
|
123
171
|
},
|
|
124
|
-
footer: (e, { OkBtn: t, CancelBtn: r }) => /* @__PURE__ */
|
|
172
|
+
footer: (e, { OkBtn: t, CancelBtn: r }) => /* @__PURE__ */ b(O, { children: [
|
|
125
173
|
/* @__PURE__ */ i(r, {}),
|
|
126
174
|
/* @__PURE__ */ i(t, {}),
|
|
127
|
-
|
|
175
|
+
T && /* @__PURE__ */ i(
|
|
128
176
|
V,
|
|
129
177
|
{
|
|
130
178
|
className: "d-flex",
|
|
@@ -134,81 +182,49 @@ function de({
|
|
|
134
182
|
)
|
|
135
183
|
] }),
|
|
136
184
|
children: [
|
|
137
|
-
/* @__PURE__ */
|
|
185
|
+
/* @__PURE__ */ b(O, { children: [
|
|
138
186
|
/* @__PURE__ */ i(
|
|
139
|
-
|
|
187
|
+
ee,
|
|
140
188
|
{
|
|
141
189
|
onClick: W,
|
|
142
|
-
icon: /* @__PURE__ */ i(
|
|
143
|
-
children:
|
|
190
|
+
icon: /* @__PURE__ */ i(H, {}),
|
|
191
|
+
children: a("str.downloadCsvTemplate")
|
|
144
192
|
}
|
|
145
193
|
),
|
|
146
194
|
/* @__PURE__ */ i(
|
|
147
|
-
|
|
195
|
+
te,
|
|
148
196
|
{
|
|
149
|
-
disabled:
|
|
197
|
+
disabled: C,
|
|
150
198
|
type: "default",
|
|
151
199
|
onClick: L,
|
|
152
200
|
accept: ".csv",
|
|
153
|
-
children:
|
|
201
|
+
children: a("str.importCsvFile")
|
|
154
202
|
}
|
|
155
203
|
)
|
|
156
204
|
] }),
|
|
157
205
|
/* @__PURE__ */ i(
|
|
158
|
-
|
|
206
|
+
G,
|
|
159
207
|
{
|
|
160
|
-
spinning:
|
|
161
|
-
indicator:
|
|
162
|
-
|
|
208
|
+
spinning: C,
|
|
209
|
+
indicator: I ? /* @__PURE__ */ i(
|
|
210
|
+
J,
|
|
163
211
|
{
|
|
164
212
|
type: "circle",
|
|
165
|
-
percent:
|
|
213
|
+
percent: I * 100,
|
|
166
214
|
size: 50,
|
|
167
215
|
format: (e) => `${parseInt(e)}%`
|
|
168
216
|
}
|
|
169
217
|
) : void 0,
|
|
170
218
|
children: /* @__PURE__ */ i(
|
|
171
|
-
|
|
219
|
+
Z,
|
|
172
220
|
{
|
|
173
|
-
data:
|
|
221
|
+
data: l,
|
|
174
222
|
bordered: !0,
|
|
175
223
|
size: "small",
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
...e,
|
|
181
|
-
label: e.name,
|
|
182
|
-
render: p(e)
|
|
183
|
-
},
|
|
184
|
-
...((r = (t = e.importProps) == null ? void 0 : t.extraFields) == null ? void 0 : r.map((n) => ({
|
|
185
|
-
...e,
|
|
186
|
-
name: n,
|
|
187
|
-
label: n,
|
|
188
|
-
render: p(e)
|
|
189
|
-
}))) ?? []
|
|
190
|
-
] : e.type === "select" ? [
|
|
191
|
-
{
|
|
192
|
-
...e,
|
|
193
|
-
label: e.name,
|
|
194
|
-
type: "text",
|
|
195
|
-
render: p(e)
|
|
196
|
-
},
|
|
197
|
-
...((a = (l = e.importProps) == null ? void 0 : l.extraFields) == null ? void 0 : a.map((n) => ({
|
|
198
|
-
...e,
|
|
199
|
-
name: n,
|
|
200
|
-
label: n,
|
|
201
|
-
type: "text",
|
|
202
|
-
render: p(e)
|
|
203
|
-
}))) ?? []
|
|
204
|
-
] : [
|
|
205
|
-
{
|
|
206
|
-
...e,
|
|
207
|
-
label: e.name,
|
|
208
|
-
render: p(e)
|
|
209
|
-
}
|
|
210
|
-
];
|
|
211
|
-
})
|
|
224
|
+
idField: "id_private_private",
|
|
225
|
+
onDelete: M,
|
|
226
|
+
confirmDeleting: !1,
|
|
227
|
+
fields: $
|
|
212
228
|
}
|
|
213
229
|
)
|
|
214
230
|
}
|
|
@@ -218,5 +234,5 @@ function de({
|
|
|
218
234
|
);
|
|
219
235
|
}
|
|
220
236
|
export {
|
|
221
|
-
|
|
237
|
+
ue as default
|
|
222
238
|
};
|