@tachybase/plugin-block-step-form
Version:
Provides Step form card.
5 lines (4 loc) • 13 kB
JavaScript
(function(a,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("@tachybase/client"),require("react/jsx-runtime"),require("react"),require("@tachybase/schema"),require("antd"),require("react-i18next")):typeof define=="function"&&define.amd?define(["exports","@tachybase/client","react/jsx-runtime","react","@tachybase/schema","antd","react-i18next"],o):(a=typeof globalThis!="undefined"?globalThis:a||self,o(a["@tachybase/plugin-block-step-form"]={},a["@tachybase/client"],a.jsxRuntime,a.react,a["@tachybase/schema"],a.antd,a["react-i18next"]))})(this,function(a,o,s,u,S,P,D){"use strict";var he=Object.defineProperty,xe=Object.defineProperties;var ge=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var G=(a,o,s)=>o in a?he(a,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[o]=s,y=(a,o)=>{for(var s in o||(o={}))_.call(o,s)&&G(a,s,o[s]);if(N)for(var s of N(o))U.call(o,s)&&G(a,s,o[s]);return a},k=(a,o)=>xe(a,ge(o));var H=(a,o)=>{var s={};for(var u in a)_.call(a,u)&&o.indexOf(u)<0&&(s[u]=a[u]);if(a!=null&&N)for(var u of N(a))o.indexOf(u)<0&&U.call(a,u)&&(s[u]=a[u]);return s};var w=(a,o,s)=>new Promise((u,S)=>{var P=A=>{try{B(s.next(A))}catch(h){S(h)}},D=A=>{try{B(s.throw(A))}catch(h){S(h)}},B=A=>A.done?u(A.value):Promise.resolve(A.value).then(P,D);B((s=s.apply(a,o)).next())});const B=u.createContext({}),A=B.Provider;function h(){return u.useContext(B)}const J="BlockStepForm".toLowerCase(),M="block-step-form";function z(){return D.useTranslation(M)}const d=(e,t={ns:M})=>o.tval(e,t),$=r=>{var i=r,{title:e}=i,t=H(i,["title"]);const n=S.uid();return{type:"void",name:n,"x-component":"StepFormContainer","x-component-props":{uid:n,title:e},properties:{step:{type:"void","x-component":"FormV2","x-component-props":{uid:n},properties:{grid:{type:"void","x-component":"Grid","x-initializer":"form:configureFields",properties:{}}}}}}};function K(e){const t=[],r=n=>{n["x-component"]==="CollectionField"?t.push(n):n.properties&&Object.keys(n.properties).forEach(c=>r(n.properties[c]))};return r(e),t.map(n=>{const c=[];let p=n;for(;p.parent&&p!==e;)c.unshift(p.name),p=p.parent;return c.join(".")})}function Q(e,t){return Number.isInteger(e)&&Number.isInteger(t)&&e!==t&&e>=0&&t>=0}const X=()=>{const e=S.useFieldSchema(),t=h(),{form:r,items:i,currentStep:n}=t;return s.jsxs("div",{children:[s.jsx(s.Fragment,{children:i.map((c,p)=>s.jsx("div",{style:{visibility:n===p?"visible":"hidden",height:n===p?"auto":0,opacity:n===p?1:0,transition:"all 0.3s ease-in-out",overflow:"hidden"},children:s.jsx(S.RecursionField,{name:`step.${p}`,schema:i[p].contentSchema,onlyRenderProperties:!0})},c.name))}),s.jsx(o.FormV2,{form:r,children:s.jsx(S.RecursionField,{schema:e,onlyRenderProperties:!0,filterProperties:c=>c["x-component"]!=="StepFormContainer"})})]})},Y=o.createStyles(({css:e})=>({addStep:e`
border-color: var(--colorSettings);
color: var(--colorSettings);
`})),Z=e=>{const{onClick:t}=e,{designable:r}=o.useDesignable(),{t:i}=z(),{styles:n}=Y();return r?s.jsx(P.Button,{className:n.addStep,type:"dashed",icon:s.jsx(o.Icon,{type:"PlusOutlined"}),style:{marginLeft:24,marginTop:12},onClick:t,children:i("Add Step")}):null},V=new o.SchemaSettings({name:"settings:stepsFormStepTitleSettings",items:[{name:"SchemaSettingsStepTitleItem",Component:()=>{const{t:e}=z(),t=S.useFieldSchema(),r=h();return s.jsx(o.SchemaSettingsModalItem,{title:e("Edit"),schema:{type:"object",title:e("Edit"),properties:{title:{type:"string",title:e("Title"),default:t["x-content"],"x-decorator":"FormItem","x-component":"Input"}}},onSubmit:i=>{const{title:n}=i;r.changeStepTitle(t.name,n)}})}},{name:"SchemaSettingDeleteItem",Component:()=>{const{t:e}=z(),t=S.useFieldSchema(),r=h();return s.jsx(o.SchemaSettingsItem,{title:e("Delete"),onClick:()=>{r.deleteStep(t.name)}})}}]}),R=({name:e,title:t,contentSchema:r})=>({type:"void",properties:{[e]:{type:"void","x-decorator":"BlockItem","x-component":"div","x-component-props":{style:{paddingTop:"12px",marginTop:"-12px"}},"x-toolbar":"TableColumnSchemaToolbar","x-settings":V.name,"x-template-uid":r==null?void 0:r["x-template-uid"],"x-content":t}}}),ee=e=>{const{title:t,contentSchema:r,name:i,index:n}=e,c=`${t}${n}`,p=R({title:t,name:i,contentSchema:r});return s.jsx(S.RecursionField,{name:c,schema:p},c)},te=e=>{const{items:t=[],current:r}=e,i=u.useMemo(()=>t.map((n,c)=>({title:s.jsx(ee,k(y({},n),{index:c}))})),[t]);return s.jsx(P.Steps,{className:"",current:r,items:i})},oe=()=>{const e=h(),{items:t,currentStep:r,handleStepReorder:i,addStep:n}=e;return s.jsxs("div",{style:{display:"flex",overflow:"auto"},children:[s.jsx(o.DndContext,{onDragEnd:i,children:s.jsx(te,{current:r,items:t})}),s.jsx(Z,{onClick:n})]})},se=o.withDynamicSchemaProps(({collection:e,dataSource:t,isEdit:r})=>{const i=S.useFieldSchema(),[n,c]=u.useState(0),{t:p}=z(),{form:g}=o.useFormBlockProps(),{dn:F,insertBeforeEnd:I}=o.useDesignable(),q=P.App.useApp(),C=i==null?void 0:i.reduceProperties((l,m)=>{var f;if(`${m==null?void 0:m["x-component"]}`.includes("StepFormContainer")){m["x-linkage-rules"]=(f=i.parent)==null?void 0:f["x-linkage-rules"];const v=m["x-component-props"]||{},{title:x,uid:b,name:de,index:Se}=v;l.push({index:Se,uid:b,name:de,title:x||m.title,contentSchema:m})}return l},[]).sort((l,m)=>l.index-m.index),T=C.length,ue={isEdit:r,form:g,items:C,stepsCount:T,currentStep:n,setCurrentStep:c,addStep:()=>{const l=$({title:`${p("Step")} ${T+1}`,dataSource:t,collection:e,isEdit:r});I(l)},nextStep:()=>w(null,null,function*(){var l;try{const m=C[n].contentSchema,f=K(m),v=g.query("*").map(x=>x).filter(x=>{var b;return f.includes((b=x.address)==null?void 0:b.entire)}).map(x=>{var b;return(b=x.validate)==null?void 0:b.call(x)});yield Promise.all(v),c(n===T-1?n:n+1)}catch(m){console.error(m),P.message.warning((l=m.messages)==null?void 0:l[0])}}),previousStep:()=>{c(n===0?n:n-1)},deleteStep:l=>{if(T===1){P.message.warning(d("Cannot delete the last step."));return}q.modal.confirm({title:d("Confirm to delete step"),content:d("Are you sure to delete this step?"),onOk:()=>{F.remove(i.properties[l])}})},changeStepTitle:(l,m)=>{const f=i.properties[l];F.emit("patch",{schema:{"x-uid":f["x-uid"],"x-component-props":k(y({},f["x-component-props"]),{title:m})}})},stepDragEnd:(l,m)=>{if(!Q(l,m))return;const f=C.splice(l,1)[0];l<m?C.splice(m,0,f):m===0?C.unshift(f):C.splice(m,0,f),C.forEach((v,x)=>{const b=i.properties[v.name];b["x-index"]=x+200,b["x-component-props"].index=x+200}),F.emit("batchPatch",{schemas:C.map(v=>({"x-uid":v["x-uid"],"x-index":v["x-index"],"x-component-props":k(y({},v["x-component-props"]),{index:v["x-index"]})}))}),F.refresh()}};return s.jsxs(A,{value:ue,children:[s.jsx(oe,{}),s.jsx(X,{})]})},{displayName:"StepFormList"}),ne=()=>null;function re(e){const t=h();return k(y({},e),{useCustomizeRequestActionProps:o.useCustomizeRequestActionProps,disabled:t.currentStep!==t.stepsCount-1})}function ie(){const e=h(),{currentStep:t,stepsCount:r,nextStep:i}=e;return{disabled:t===r-1,onClick:()=>w(null,null,function*(){yield i()})}}function ae(){const e=h(),{currentStep:t,previousStep:r}=e;return{disabled:t===0,onClick:()=>w(null,null,function*(){yield r()})}}function ce(){const e=h(),t=o.useCreateActionProps(),r=o.useUpdateActionProps(),{message:i}=P.App.useApp();return{htmlType:"submit",disabled:e.currentStep!==e.stepsCount-1,onClick:()=>w(null,null,function*(){var n,c,p,g;try{if(!(e!=null&&e.form))throw new Error("Form context not initialized");e.isEdit?yield(n=r==null?void 0:r.onClick)==null?void 0:n.call(r):yield(c=t==null?void 0:t.onClick)==null?void 0:c.call(t),e.setCurrentStep(0)}catch(F){const I=F==null?void 0:F[0];if(I!=null&&I.address){const q=e.form.getFormGraph(),C=(p=q==null?void 0:q[I.address])==null?void 0:p.title,T=((g=I.messages)==null?void 0:g[0])||"Validation failed";i.warning(`${C||""} ${T}`)}else console.error("System error:",F),i.error("Operation failed due to system error");throw F}})}}const j=new o.SchemaSettings({name:"actionSettings:stepsFormNext",items:[{name:"editButton",Component:o.ButtonEditor,useComponentProps:()=>o.useSchemaToolbar().buttonEditorProps},{name:"remove",type:"remove"}]}),L=new o.SchemaSettings({name:"actionSettings:stepsFormPrevious",items:[{name:"editButton",Component:o.ButtonEditor,useComponentProps:()=>o.useSchemaToolbar().buttonEditorProps},{name:"remove",type:"remove"}]});function pe(e,t){return k(y(y({},e),t),{"x-uid":S.uid()})}const O=new o.SchemaInitializer({name:"stepsForm:configureActions",title:d("Configure actions",{ns:"core"}),icon:"SettingOutlined",items:[{type:"item",title:d("Previous"),name:"previousAction",Component:()=>{const e=o.useSchemaInitializerItem();return s.jsx(o.InitializerWithSwitch,k(y({},e),{item:e,type:"x-action",schema:{type:"void",title:d("Previous"),"x-component":"Action","x-use-component-props":"useStepsFormPreviousActionProps","x-toolbar":"ActionSchemaToolbar","x-settings":L.name,"x-action":"stepsform:previous","x-align":"right"}}))}},{type:"item",name:"nextAction",title:d("Next"),Component:()=>{const e=o.useSchemaInitializerItem();return s.jsx(o.InitializerWithSwitch,k(y({},e),{item:e,type:"x-action",schema:{type:"void",title:d("Next"),"x-component":"Action","x-use-component-props":"useStepsFormNextActionProps","x-toolbar":"ActionSchemaToolbar","x-settings":j.name,"x-action":"stepsform:next","x-align":"right"}}))}},{type:"item",title:d("Done"),name:"doneAction",Component:e=>{const t=h(),{isEdit:r}=t,i={title:d("Done"),"x-component":"Action","x-component-props":{type:"primary"},"x-use-component-props":"useStepsFormSubmitActionProps","x-toolbar":"ActionSchemaToolbar","x-action":"submit","x-action-settings":{triggerWorkflows:[]}};return s.jsx(o.ActionInitializer,{schema:k(y({},i),{"x-settings":r?"actionSettings:updateSubmit":"actionSettings:createSubmit"})})}},{title:d("Request action"),name:"requestAction",Component:()=>{const{insert:e}=o.useSchemaInitializer(),t=o.useSchemaInitializerItem(),i=o.useAPIClient().resource("customRequests"),n={title:d("Custom request"),"x-component":"CustomRequestAction","x-action":"customize:stepsform:request","x-toolbar":"ActionSchemaToolbar","x-settings":"actionSettings:customRequest","x-decorator":"CustomRequestAction.Decorator","x-uid":S.uid(),"x-action-settings":{onSuccess:{manualClose:!1,redirecting:!1,successMessage:d("Request success")}},"x-use-component-props":"useStepsFormCustomActionProps"},c=()=>w(null,null,function*(){var p;try{const g=pe(n,t.schema);(p=t==null?void 0:t.schemaInitialize)==null||p.call(t,g),e(g),yield i.create({values:{key:g["x-uid"]}})}catch(g){console.error("Custom request failed:",g),P.message.error(d("Request failed"))}});return s.jsx(o.SchemaInitializerItem,k(y({},t),{onClick:c}))},useVisible(){const e=o.useCollection();return!["view","file","sql"].includes(e.template)||(e==null?void 0:e.writableView)}}]}),W=new o.SchemaSettings({name:"blockSettings:stepsForm",items:[{name:"StepsForm",Component:o.SchemaSettingsBlockTitleItem},{type:"remove",name:"remove",componentProps:{removeParentsIfNoChildren:!0,breakRemoveOn:{"x-component":"Grid"}}}]}),me=({dataSource:e="main",collection:t,isEdit:r=!1,isCusomeizeCreate:i=!1,stepTitle:n="Step 1"})=>({type:"void","x-decorator":"FormBlockProvider","x-decorator-props":{dataSource:e,collection:t,isCustomizedCreate:i},"x-use-decorator-props":r?"useEditFormBlockDecoratorProps":"useCreateFormBlockDecoratorProps","x-component":"CardItem","x-toolbar":"BlockSchemaToolbar","x-settings":W.name,"x-acl-action":`${t}:${r?"update":"create"}`,properties:{step:{type:"void",title:n,"x-component":"StepFormCard","x-component-props":{collection:t,dataSource:e,isEdit:r},properties:{step1:$({title:n}),actionBar:{type:"void","x-initializer":O.name,"x-component":"ActionBar","x-component-props":{layout:"one-column",style:{marginTop:24}}}}}}}),E={name:J,Component:"DataBlockInitializer",useComponentProps:()=>{const{insert:e}=o.useSchemaInitializer(),{t}=z();return{title:d("Step form"),icon:"RightSquareOutlined",onCreateBlockSchema:({item:r})=>{const{dataSource:i,collectionName:n,name:c}=r,p=me({dataSource:i,collection:n||c,isEdit:!1,stepTitle:`${t("Step")} 1`,isCusomeizeCreate:!0});e(p)}}}};class le extends o.Plugin{load(){return w(this,null,function*(){this.app.addComponents({StepFormCard:se,StepFormContainer:ne}),this.app.addScopes({useStepsFormNextActionProps:ie,useStepsFormPreviousActionProps:ae,useStepsFormSubmitActionProps:ce,useStepsFormCustomActionProps:re}),this.app.schemaSettingsManager.add(W,V,L,j),this.app.schemaInitializerManager.add(O),this.app.schemaInitializerManager.addItem("page:addBlock","dataBlocks.stepForm",E),this.app.schemaInitializerManager.addItem("popup:common:addBlock","dataBlocks.stepForm",E),this.app.schemaInitializerManager.addItem("popup:addNew:addBlock","dataBlocks.stepForm",E)})}}a.default=le,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});