@kingteza/crud-component 1.2.1 → 1.2.2

package/dist/crud/actions/index.es.js

@@ -0,0 +1,88 @@
+import { jsxs as E, Fragment as H, jsx as j } from "react/jsx-runtime";
+import { useRef as x, useCallback as V } from "react";
+import F from "../../common/button/CloneButtonTable.es.js";
+import k from "../../common/button/DeleteButtonTable.es.js";
+import { ExportButton as r } from "../../common/button/ExportButton.es.js";
+import C from "../../common/button/HideButtonTable.es.js";
+import R from "../../common/button/UpdateButtonTable.es.js";
+import I from "../modal/index.es.js";
+function a({
+  data: y,
+  idField: b = "id",
+  extraAction: q,
+  onUpdate: z,
+  onClickUpdate: h,
+  onClickClone: T,
+  onDelete: u,
+  onHide: G,
+  onExport: J,
+  isHiding: L,
+  isDeleting: N,
+  confirmHiding: _,
+  confirmDeleting: $,
+  closeViewOnClickUpdate: w,
+  recentUpdateOrDeleteId: Q,
+  setRecentUpdateOrDeleteId: v,
+  setOpenView: K,
+  inBuiltModalProps: f
+}) {
+  var X;
+  const g = q == null ? void 0 : q(y), S = x(null), W = V(
+    (m, A = !0, Y = !1) => {
+      var Z;
+      v == null || v(m[b]), f ? (Z = S.current) == null || Z.update(m, A, Y) : Y ? T == null || T(m) : h == null || h(m), w && (K == null || K(void 0));
+    },
+    [f, h]
+  );
+  return console.log({
+    onUpdate: z,
+    onClickUpdate: h,
+    onClickClone: T,
+    onDelete: u
+  }), (Array.isArray(g) ? (X = g == null ? void 0 : g.filter(Boolean)) != null && X.length : g) || z || h || f != null && f.onUpdate || T || f != null && f.onCreate || u || J || G ? /* @__PURE__ */ E(H, { children: [
+    f && /* @__PURE__ */ j(I, { ref: S, ...f }),
+    g,
+    (z || h || (f == null ? void 0 : f.onUpdate)) && /* @__PURE__ */ j(R, { value: y, onClick: (m) => W(m) }),
+    (T || (f == null ? void 0 : f.onCreate)) && /* @__PURE__ */ j(
+      F,
+      {
+        value: y,
+        onClick: (m) => W(m, !1, !0)
+      }
+    ),
+    J && /* @__PURE__ */ j(
+      r,
+      {
+        value: y,
+        onClick: async (m) => await J(m)
+      }
+    ),
+    G && /* @__PURE__ */ j(
+      C,
+      {
+        value: y,
+        disabled: L,
+        shouldConfirm: _,
+        loading: L && y[b] === Q,
+        onClick: async (m) => {
+          v == null || v(m[b]), await G({ [b]: m[b] });
+        }
+      }
+    ),
+    u && /* @__PURE__ */ j(
+      k,
+      {
+        value: y,
+        disabled: N,
+        shouldConfirm: $,
+        loading: N && y[b] === Q,
+        onClick: async (m) => {
+          v == null || v(m[b]), await u({ [b]: m[b] });
+        }
+      }
+    )
+  ] }) : void 0;
+}
+export {
+  a as default
+};

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

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

package/dist/crud/import/CrudImportButton.d.ts

@@ -0,0 +1,3 @@
+import { CrudImportComponentProps } from './CrudImportComponent';
+declare function CrudImportButton<T>(props: CrudImportComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export default CrudImportButton;

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

@@ -0,0 +1,30 @@
+import { jsxs as e, Fragment as p, jsx as o } from "react/jsx-runtime";
+import { ImportOutlined as i } from "@ant-design/icons";
+import { useState as s } from "react";
+import { useTranslationLib as u } from "../../locale/index.es.js";
+import f from "./CrudImportComponent.es.js";
+import l from "../../common/button/Button.es.js";
+function x(r) {
+  const { t: n } = u(), [m, t] = s(!1);
+  return /* @__PURE__ */ e(p, { children: [
+    /* @__PURE__ */ o(
+      f,
+      {
+        open: m,
+        onCloseMethod: t,
+        ...r
+      }
+    ),
+    /* @__PURE__ */ o(
+      l,
+      {
+        icon: /* @__PURE__ */ o(i, {}),
+        onClick: () => t(!0),
+        children: n("str.import")
+      }
+    )
+  ] });
+}
+export {
+  x as default
+};

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

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

package/dist/crud/import/CrudImportComponent.d.ts

@@ -0,0 +1,14 @@
+import { CrudFieldProps } from '../CrudComponent';
+import { DialogProps } from '../../types/DialogComponentProp';
+export interface CrudImportComponentProps<T> {
+    fields: CrudFieldProps<T>[];
+    importProps: CrudImportProps<T>;
+}
+export interface CrudImportProps<T> {
+    name: string;
+    onClickImport: (data: Array<T | any>, progressCallback: (progress: number) => void) => Promise<{
+        importJobId: string;
+    }>;
+}
+declare function CrudImportComponent<T>({ onCloseMethod, open, fields, importProps, }: DialogProps<never, boolean> & CrudImportComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export default CrudImportComponent;

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

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

package/dist/crud/index.d.ts

@@ -0,0 +1,23 @@
+export type { CheckboxBasedFieldProps, ColorPickerFieldProps, CrudComponentProps, CrudFieldGrid, CrudFieldProps, CrudPaginateProps, CrudPurpose, CrudWizardProp, DateBasedFieldProps, EnumCrudField, FormBuilderFunc, FormBuilderFunc0, GetFormFieldOptions, InitialCrudField, NumberBasedFieldProps, ObjectCrudField, SelectCrudField, SelectFieldItem, TextBasedFieldProps, TimeBasedFieldProps, } from './CrudComponent';
+export { default as CrudComponent } from './CrudComponent';
+export { default as CrudField, ColorCrudFieldComponent, SelectCrudFieldComponent, } from './CrudField';
+export { CrudForm, CrudFormFields } from './CrudForm';
+export type { CurdFormFieldsProps } from './CrudForm';
+export { default as CrudFormWizard } from './CrudFormWizard';
+export type { CrudFormWizardProps } from './CrudFormWizard';
+export type { CrudReportComponentProps, CrudReportSubmitForm, ReportCrudFields, SearchOnlyFields, } from './CrudReportComponent';
+export { default as CrudReportComponent } from './CrudReportComponent';
+export { default as CrudSearchComponent } from './CrudSearchComponent';
+export type { CrudSearchComponentProps, CrudSearchOption, } from './CrudSearchComponent';
+export { default as ImageCrudField, FileDownloadProvider, FileUploadProvider, ImageCellValue, ImageCrudCellValue, } from './ImageCrudField';
+export type { ImageCrudField as ImageCrudFieldProps } from './ImageCrudField';
+export { default as FileCrudField, FileCellValue, FileCrudCellValue, } from './FileCrudField';
+export type { FileCrudField as FileCrudFieldProps } from './FileCrudField';
+export { default as CrudImportComponent } from './import/CrudImportComponent';
+export type { CrudImportComponentProps, CrudImportProps, } from './import/CrudImportComponent';
+export { default as CrudImportButton } from './import/CrudImportButton';
+export { default as CrudActions } from './actions';
+export type { CrudActionsProps } from './actions';
+export { default as CrudModal } from './modal';
+export type { CrudModalProps, CrudModalRef } from './modal';
+export * from './view';

package/dist/crud/modal/index.cjs.js

@@ -0,0 +1 @@
+"use strict";const g=require("react/jsx-runtime"),B=require("antd"),t=require("react"),G=require("../CrudForm.cjs.js"),J=require("../CrudFormWizard.cjs.js"),K=require("../../locale/index.cjs.js"),H=require("../../util/CrudUtil.cjs.js"),Q=require("dayjs"),X=({fields:u,wizard:l,grid:I,fullWidthModal:M,isCreating:h,isUpdating:j,onCreate:b,onUpdate:v,idField:k="id",formBuilder:T},W)=>{const[s]=B.Form.useForm(),{t:C}=K.useTranslationLib(),[S,m]=t.useState(!1),[p,q]=t.useState("new"),[f,F]=t.useState(),[_,y]=t.useState(),[A,N]=t.useState(!1),[L,x]=t.useState(!1),[E,V]=t.useState(!1),P=t.useCallback(async c=>{var n;const d=l?c:await s.validateFields(),i=u.filter(a=>a.type==="color"),o={};for(const a of i){const e=H.getRealName(a.name,"upsertFieldName"),r=s.getFieldValue(e);o[e]=typeof r=="string"?r:(n=r==null?void 0:r.toHexString())==null?void 0:n.toUpperCase()}Object.assign(d,o),f&&v?(await v({...d,[k]:f[k]}),F(void 0)):!f&&b&&await b(d),y(void 0),s.resetFields(),m(!1)},[u,s,k,b,v,f,l]),R=t.useCallback(async c=>{N(c),x(!0)},[]),U=t.useCallback(async()=>{x(!0)},[]),O=t.useCallback(()=>{m(!0),q("new"),s.resetFields(),F(void 0),y(void 0)},[s]),D=t.useCallback(async(c,d=!0,i=!1)=>{try{V(!0),m(!0),q(i?"clone":"update");const o={};for(const n of u){const a=H.getRealName(n.name,"upsertFieldName"),e=c[a];if(i&&n.type==="image"){const r=e;try{const w=await n.provider.clone(r);o[a]=w;continue}catch{continue}}n.type==="date"||n.type==="time"?e&&(o[a]=Q(e)):n.type==="select"?n.multiple&&Array.isArray(e)?o[a]=e.map(r=>r[n.innerFieldId??"id"]):e&&typeof e=="object"?o[a]=e[n.innerFieldId??"id"]:(e&&typeof e=="string"||typeof e=="number")&&(o[a]=e):o[a]=e}s.setFieldsValue(o),y(o),d&&F(c)}finally{V(!1)}},[u,s]);t.useImperativeHandle(W,()=>({create:O,update:D}),[O,D]),t.useEffect(()=>{S&&(N(!1),x(!1))},[S]);const $=t.useCallback(async()=>{try{if(p==="clone"){const c=l?f:s.getFieldsValue(),d=u.filter(i=>i.type==="image");for(const i of d)c[i.name]&&i.provider.delete(c[i.name])}}finally{}l||s.resetFields(),y(void 0),F(void 0),m(!1)},[p,l,s,f,u]);return g.jsx(B.Modal,{width:M?"100%":void 0,title:C(p??"new"),open:S,confirmLoading:h||j,okText:C("str."+(p==="update"?"update":"save")),cancelText:C("str.cancel"),cancelButtonProps:{disabled:L,hidden:!!l},okButtonProps:{disabled:A,hidden:!!l},onCancel:$,onOk:()=>P(),destroyOnHidden:!0,children:g.jsxs(B.Spin,{spinning:E,children:[l?null:g.jsx(G.CrudForm,{purpose:p,fields:u,form:s,formBuilder:T,grid:I,onDeleteFile:U,onUploadFile:R}),l&&g.jsx(J,{submitting:h||j,className:"mt-2",onSave:P,updatingValue:_,fields:u,onDeleteFile:U,onUploadFile:R,purpose:p,wizard:l})]})})},Y=t.forwardRef(X);module.exports=Y;

package/dist/crud/modal/index.d.ts

@@ -0,0 +1,24 @@
+import { Ref } from 'react';
+import { CrudFieldProps, CrudWizardProp, FormBuilderFunc } from '../CrudComponent';
+import { default as IdProps } from '../../types/Id';
+export interface CrudModalProps<T, FormType> {
+    fields: CrudFieldProps<T>[];
+    wizard?: CrudWizardProp<T>[];
+    grid?: boolean;
+    fullWidthModal?: boolean;
+    isCreating?: boolean;
+    isUpdating?: boolean;
+    onCreate?: (data: FormType) => Promise<any>;
+    onUpdate?: (data: FormType & IdProps) => Promise<any>;
+    idField?: string;
+    formBuilder?: FormBuilderFunc<T>;
+}
+export interface CrudModalRef<T> {
+    create: () => void;
+    update: (data: T, shouldSetUpdatingField?: boolean, isClone?: boolean) => Promise<void>;
+}
+declare const CrudModal: <T, FormType = T>({ fields, wizard, grid, fullWidthModal, isCreating, isUpdating, onCreate, onUpdate, idField, formBuilder, }: CrudModalProps<T, FormType>, ref: Ref<CrudModalRef<T>>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: <T, FormType = T>(props: CrudModalProps<T, FormType> & {
+    ref?: Ref<CrudModalRef<T>>;
+}) => ReturnType<typeof CrudModal>;
+export default _default;

package/dist/crud/modal/index.es.js

@@ -0,0 +1,146 @@
+import { jsx as N, jsxs as G } from "react/jsx-runtime";
+import { Form as J, Modal as K, Spin as Q } from "antd";
+import { forwardRef as X, useState as u, useCallback as m, useImperativeHandle as Y, useEffect as Z } from "react";
+import { CrudForm as z } from "../CrudForm.es.js";
+import ee from "../CrudFormWizard.es.js";
+import { useTranslationLib as te } from "../../locale/index.es.js";
+import M from "../../util/CrudUtil.es.js";
+import oe from "dayjs";
+const ne = ({
+  fields: c,
+  wizard: l,
+  grid: R,
+  fullWidthModal: T,
+  isCreating: S,
+  isUpdating: V,
+  onCreate: v,
+  onUpdate: b,
+  idField: B = "id",
+  formBuilder: W
+}, _) => {
+  const [t] = J.useForm(), { t: h } = te(), [k, F] = u(!1), [p, x] = u("new"), [f, y] = u(), [A, g] = u(), [L, j] = u(!1), [E, C] = u(!1), [$, P] = u(!1), U = m(
+    async (i) => {
+      var o;
+      const d = l ? i : await t.validateFields(), a = c.filter((s) => s.type === "color"), n = {};
+      for (const s of a) {
+        const e = M.getRealName(s.name, "upsertFieldName"), r = t.getFieldValue(e);
+        n[e] = typeof r == "string" ? r : (o = r == null ? void 0 : r.toHexString()) == null ? void 0 : o.toUpperCase();
+      }
+      Object.assign(d, n), f && b ? (await b({
+        ...d,
+        [B]: f[B]
+      }), y(void 0)) : !f && v && await v(d), g(void 0), t.resetFields(), F(!1);
+    },
+    [c, t, B, v, b, f, l]
+  ), O = m(async (i) => {
+    j(i), C(!0);
+  }, []), D = m(async () => {
+    C(!0);
+  }, []), H = m(() => {
+    F(!0), x("new"), t.resetFields(), y(void 0), g(void 0);
+  }, [t]), I = m(
+    async (i, d = !0, a = !1) => {
+      try {
+        P(!0), F(!0), x(a ? "clone" : "update");
+        const n = {};
+        for (const o of c) {
+          const s = M.getRealName(
+            o.name,
+            "upsertFieldName"
+          ), e = i[s];
+          if (a && o.type === "image") {
+            const r = e;
+            try {
+              const w = await o.provider.clone(r);
+              n[s] = w;
+              continue;
+            } catch {
+              continue;
+            }
+          }
+          o.type === "date" || o.type === "time" ? e && (n[s] = oe(e)) : o.type === "select" ? o.multiple && Array.isArray(e) ? n[s] = e.map(
+            (r) => r[o.innerFieldId ?? "id"]
+          ) : e && typeof e == "object" ? n[s] = e[o.innerFieldId ?? "id"] : (e && typeof e == "string" || typeof e == "number") && (n[s] = e) : n[s] = e;
+        }
+        t.setFieldsValue(n), g(n), d && y(i);
+      } finally {
+        P(!1);
+      }
+    },
+    [c, t]
+  );
+  Y(
+    _,
+    () => ({
+      create: H,
+      update: I
+    }),
+    [H, I]
+  ), Z(() => {
+    k && (j(!1), C(!1));
+  }, [k]);
+  const q = m(async () => {
+    try {
+      if (p === "clone") {
+        const i = l ? f : t.getFieldsValue(), d = c.filter((a) => a.type === "image");
+        for (const a of d)
+          i[a.name] && a.provider.delete(i[a.name]);
+      }
+    } finally {
+    }
+    l || t.resetFields(), g(void 0), y(void 0), F(!1);
+  }, [p, l, t, f, c]);
+  return /* @__PURE__ */ N(
+    K,
+    {
+      width: T ? "100%" : void 0,
+      title: h(p ?? "new"),
+      open: k,
+      confirmLoading: S || V,
+      okText: h("str." + (p === "update" ? "update" : "save")),
+      cancelText: h("str.cancel"),
+      cancelButtonProps: {
+        disabled: E,
+        hidden: !!l
+      },
+      okButtonProps: {
+        disabled: L,
+        hidden: !!l
+      },
+      onCancel: q,
+      onOk: () => U(),
+      destroyOnHidden: !0,
+      children: /* @__PURE__ */ G(Q, { spinning: $, children: [
+        l ? null : /* @__PURE__ */ N(
+          z,
+          {
+            purpose: p,
+            fields: c,
+            form: t,
+            formBuilder: W,
+            grid: R,
+            onDeleteFile: D,
+            onUploadFile: O
+          }
+        ),
+        l && /* @__PURE__ */ N(
+          ee,
+          {
+            submitting: S || V,
+            className: "mt-2",
+            onSave: U,
+            updatingValue: A,
+            fields: c,
+            onDeleteFile: D,
+            onUploadFile: O,
+            purpose: p,
+            wizard: l
+          }
+        )
+      ] })
+    }
+  );
+}, pe = X(ne);
+export {
+  pe as default
+};

package/dist/crud/view/CrudDecListView.cjs.js

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

package/dist/crud/view/CrudDecListView.d.ts

@@ -0,0 +1,15 @@
+import { Breakpoint } from 'antd';
+import { CrudFieldProps } from '../CrudComponent';
+import { CrudActionsProps } from '../actions';
+import { CrudModalProps } from '../modal';
+export type DescListColumn = number | Partial<Record<Breakpoint, number>> | undefined;
+export interface CrudDecListViewProps<T, FormType = T> extends Omit<CrudActionsProps<T, FormType>, "inBuiltModalProps"> {
+    fields: CrudFieldProps<T>[];
+    data: T | undefined;
+    className?: string;
+    descListColumn?: DescListColumn;
+    layout?: "horizontal" | "vertical";
+    keepEmptyValues?: boolean;
+    inBuiltModalProps?: Omit<CrudModalProps<T, FormType>, "fields">;
+}
+export declare function CrudDecListView<T, FormType = T>({ className, fields, data, descListColumn, layout, keepEmptyValues, inBuiltModalProps, ...crudActionsProps }: Readonly<CrudDecListViewProps<T, FormType>>): import("react/jsx-runtime").JSX.Element;

package/dist/crud/view/CrudDecListView.es.js

@@ -0,0 +1,57 @@
+import { jsx as i, Fragment as v } from "react/jsx-runtime";
+import x from "../../common/description/DescList.es.js";
+import { useMemo as F } from "react";
+import { useTranslationLib as L } from "../../locale/index.es.js";
+import { getRendererValueCrudViewer as V } from "./CrudViewerUtil.es.js";
+import w from "../../util/CrudUtil.es.js";
+import D from "../actions/index.es.js";
+function _({
+  className: p,
+  fields: o,
+  data: r,
+  descListColumn: c = { xs: 1, md: 3, sm: 2, lg: 4 },
+  layout: f,
+  keepEmptyValues: b,
+  inBuiltModalProps: m,
+  ...n
+}) {
+  const { t: u } = L(), g = F(() => {
+    const l = o.filter(({ hidden: e, hideInDescList: t }) => !e && !t).map((e, t) => {
+      const C = w.getRealName(e.name);
+      return {
+        label: e.label,
+        noFormatting: !0,
+        value: V(e)(
+          r == null ? void 0 : r[C],
+          r,
+          t
+        )
+      };
+    }), s = r ? /* @__PURE__ */ i(
+      D,
+      {
+        data: r,
+        ...n,
+        inBuiltModalProps: m ? { ...m, fields: o } : void 0
+      }
+    ) : void 0;
+    return s && l.push({
+      label: u("str.action"),
+      value: s
+    }), l;
+  }, [r, o, u, n]);
+  return r ? /* @__PURE__ */ i(
+    x,
+    {
+      keepEmptyValues: b,
+      bordered: !0,
+      column: c,
+      className: p,
+      layout: f,
+      list: g
+    }
+  ) : /* @__PURE__ */ i(v, {});
+}
+export {
+  _ as CrudDecListView
+};

package/dist/crud/view/CrudViewer.cjs.js

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),xt=require("antd"),ft=require("@dnd-kit/core"),jt=require("@dnd-kit/modifiers"),yt=require("@dnd-kit/utilities"),d=require("@dnd-kit/sortable"),ht=require("../../common/button/Button.cjs.js"),qt=require("../../common/button/RefreshButton.cjs.js"),Ct=require("../../common/button/ViewButtonTable.cjs.js"),St=require("../actions/index.cjs.js"),It=require("../../common/table/table.cjs.js"),r=require("react"),lt=require("../../locale/index.cjs.js"),Rt=require("../CrudSearchComponent.cjs.js"),Mt=require("./CrudDecListView.cjs.js"),tt=require("./CrudViewerUtil.cjs.js"),dt=require("@ant-design/icons"),et=require("../../util/CrudUtil.cjs.js"),Tt=require("../../common/layout/VerticalSpace.cjs.js"),Bt=r.memo(It);function Dt({idField:n="id",loadingData:h,fields:m,isDeleting:T,isHiding:l,viewable:c=!1,paginateProps:j,onDelete:q,onHide:B,onUpdate:C,data:S=[],extraAction:D,onClickUpdate:V,minusHeight:E,scroll:k,onClickClone:v,className:z,expandable:$,size:p,bordered:A,descListColumn:ot,extraView:L,decListLayout:st,scrollToTop:Et,onClickRefresh:_,closeViewOnClickUpdate:G,onExport:J,confirmHiding:K,confirmDeleting:Q,rowClassName:X,actionWidth:Y=190,draggable:t,...rt}){const{t:Z}=lt.useTranslationLib(),P=r.useMemo(()=>m.map(({hideInTable:o,hidden:s,width:u,label:x,halign:I,...M})=>{const N=et.getRealName(M.name);return{title:x,width:u,key:N,dataIndex:N,hidden:o||s,align:I??(M.type==="number"?"right":void 0),render:tt.getRendererValueCrudViewer(M)}}),[m]),[i,R]=r.useState(),[W,H]=r.useState(),[y,U]=r.useState([]);r.useEffect(()=>{S&&U(S)},[S]),r.useEffect(()=>{S&&R(o=>{if(o)return S.find(s=>s[n]===o[n])})},[S,n,i]);const w=r.useCallback(o=>{var x;const{active:s,over:u}=o;if(t!=null&&t.onDragEnd&&(t==null||t.onDragEnd(o)),s.id!==(u==null?void 0:u.id)){const I=y.findIndex(f=>f[n]===s.id),M=y.findIndex(f=>f[n]===(u==null?void 0:u.id)),N=d.arrayMove(y,I,M);U(f=>{const it=f.findIndex(O=>O[n]===(s==null?void 0:s.id)),mt=f.findIndex(O=>O[n]===(u==null?void 0:u.id));return d.arrayMove(f,it,mt)}),(x=t==null?void 0:t.onDrag)==null||x.call(t,{newOrder:N.map(f=>f[n])})}},[y,n,t]),ct=r.useMemo(()=>{let o=typeof c=="string"?i==null?void 0:i[c]:void 0;if(typeof o=="object"){const s=m.find(u=>et.getRealName(u.name)===c);o=tt.getRendererValueCrudViewer(s)(o,i,0)}return o},[c,i,m]),a=r.useMemo(()=>({rowClassName:X,className:z,scroll:k??(E?{y:`calc(100vh - ${E})`}:void 0),id:"crud-table",bordered:A,size:p,expandable:$}),[X,z,k,E,A,p,$]),F=r.useMemo(()=>j?{total:j.count,onChange:j.setPage,current:j.page,pageSize:j.pageSize}:void 0,[j]),b=r.useMemo(()=>{const o=C||V||q||D||c,s=[];return t&&s.push({key:"key",align:"center",width:5,title:t==null?void 0:t.columnLabel,render:()=>e.jsx(Vt,{tooltip:t==null?void 0:t.tooltip})}),s.push(...P),o&&o&&s.push({title:Z("str.action"),fixed:"right",width:Y,render:(u,x)=>e.jsxs(e.Fragment,{children:[c&&e.jsx(Ct,{value:x,onClick:typeof c=="object"?()=>{var I;return(I=c.onClick)==null?void 0:I.call(c,x)}:R}),e.jsx(St,{data:x,idField:n,extraAction:D,onUpdate:C,onClickUpdate:V,onClickClone:v,onDelete:q,onHide:B,onExport:J,isHiding:l,isDeleting:T,confirmHiding:K,confirmDeleting:Q,closeViewOnClickUpdate:G,recentUpdateOrDeleteId:W,setRecentUpdateOrDeleteId:H,setOpenView:R})]})}),s},[P,C,V,q,D,c,Z,Y]),g=r.useMemo(()=>y.map(o=>o[n]),[y,n]),ut=r.useCallback(()=>{const o=e.jsx(Bt,{...a,dataSource:y,loading:h,components:t?{body:{row:Nt}}:void 0,pagination:F,columns:b});return t?e.jsx(ft.DndContext,{modifiers:[jt.restrictToVerticalAxis],onDragEnd:w,children:e.jsx(d.SortableContext,{items:g,strategy:d.verticalListSortingStrategy,children:o})}):o},[a,y,h,F,b,t,g,w]);return e.jsxs("div",{children:[typeof c=="boolean"||typeof c=="string"&&e.jsx(xt.Modal,{width:"100%",open:!!i,title:ct??e.jsx("div",{children:" "}),footer:e.jsx(e.Fragment,{}),closable:!0,onCancel:()=>R(void 0),children:!!i&&e.jsxs("div",{children:[e.jsx(Mt.CrudDecListView,{layout:st,descListColumn:ot,data:i,fields:m,idField:n,extraAction:D,onUpdate:C,onClickUpdate:V,onClickClone:v,onDelete:q,onHide:B,onExport:J,isHiding:l,isDeleting:T,confirmHiding:K,confirmDeleting:Q,closeViewOnClickUpdate:G,recentUpdateOrDeleteId:W,setRecentUpdateOrDeleteId:H,setOpenView:R}),L==null?void 0:L(i)]},i==null?void 0:i[n])}),e.jsx(Rt,{fields:m,...rt}),e.jsxs(Tt,{children:[!!_&&e.jsx(qt.RefreshButton,{onClick:_}),ut()]})]})}const nt=r.createContext({}),Vt=({tooltip:n})=>{const{setActivatorNodeRef:h,listeners:m}=r.useContext(nt);return e.jsx(ht,{type:"text",size:"small",tooltip:n,icon:e.jsx(dt.HolderOutlined,{}),style:{cursor:"move",border:"none"},ref:h,...m})},Nt=n=>{const{attributes:h,listeners:m,setNodeRef:T,setActivatorNodeRef:l,transform:c,transition:j,isDragging:q}=d.useSortable({id:n["data-row-key"]}),B={...n.style,transform:yt.CSS.Translate.toString(c),transition:j,...q?{position:"relative",zIndex:9999}:{}},C=r.useMemo(()=>({setActivatorNodeRef:l,listeners:m}),[l,m]);return e.jsx(nt.Provider,{value:C,children:e.jsx("tr",{...n,ref:T,style:B,...h})})};module.exports=Dt;