@baseplate-dev/project-builder-web
Version:
Web interface for constructing project builder JSON
4 lines (3 loc) • 30.4 kB
JavaScript
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-BsqYBobW.js","assets/_virtual___federation_fn_import-C4el_tlG.js","assets/jsx-runtime-D_zvdyIk.js","assets/index-c0qeY2gs.js","assets/index-DqHVrEeL.js","assets/_commonjsHelpers-CqkleIqs.js","assets/index--XHV4ygU.js","assets/index.esm-C5MSuOl4.js","assets/sortBy-C9bvycg5.js","assets/immer-B7fdkLVi.js","assets/index-Dqph-b0R.css","assets/index-DcEdWL9A.js","assets/index-BTIQ5pQz.js"])))=>i.map(i=>d[i]);
import{i as c}from"./_virtual___federation_fn_import-C4el_tlG.js";import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{s as N,S as q,l as je,h as Fe,_ as L,i as M}from"./index-BsqYBobW.js";import{u as De}from"./use-definition-schema-Dyj6xH4G.js";import{g as ee,s as te,b as V,e as I,f as Y}from"./index.esm-C5MSuOl4.js";import{H as J,L as Q,c as X,A as Z}from"./index--XHV4ygU.js";var Ie=class S{constructor(t,i,n){this.control=t,this.path=i,this.cache=n}static create(t,i){return new S(t,"",i)}focus(t){var i,n,l,s,a,u;const d=t.toString(),p=this.path?`${this.path}.${d}`:d,b=(i=this.cache)==null?void 0:i.get(p,this.reflectedKey);if(b)return b;if(Array.isArray(this.override)){const[h]=this.override,f=new S(this.control,p,this.cache);return f.isArrayItemReflection=!0,f.override=h,(n=this.cache)==null||n.set(f,p),f}else if(this.override){const h=ee(this.override,d);if(!h){const f=new S(this.control,p,this.cache);return(l=this.cache)==null||l.set(f,p),f}if(this.isArrayItemReflection){const f=`${this.path}.${h.path}`,x=new S(this.control,f,this.cache);return(s=this.cache)==null||s.set(x,f),x}else return(a=this.cache)==null||a.set(h,p),h}const j=new S(this.control,p,this.cache);return(u=this.cache)==null||u.set(j,p),j}reflect(t){var i,n,l;const s=(i=this.cache)==null?void 0:i.get(this.path,t);if(s)return s;const a=new S(this.control,this.path,this.cache),u=new Proxy({},{get:(p,b)=>typeof b=="string"?a.focus(b):p}),d=t(u,a);if(Array.isArray(d)){const p=new S(this.control,this.path,this.cache);return a.path="",p.override=t(u,a),p.reflectedKey=t,(n=this.cache)==null||n.set(p,this.path,t),p}else return a.override=d,a.path=this.path,a.reflectedKey=t,(l=this.cache)==null||l.set(a,this.path,t),a}map(t,i){return t.map((n,l,s)=>{const a=this.focus(l.toString());return i(n,a,l,s,this)})}interop(t){var i;return t?t(this.control,this.path):((i=this.interopCache)!=null||(this.interopCache={control:this.control,name:this.path||void 0,...this.override?{getTransformer:this.getTransformer.bind(this),setTransformer:this.setTransformer.bind(this)}:{}}),this.interopCache)}narrow(){return this}assert(){return this}defined(){return this}cast(){return this}getTransformer(t){const[i]=Array.isArray(this.override)?this.override:[this.override];if(!t||!i)return t;const n={};return Object.entries(i).forEach(([l,s])=>{const a=s;if(!a)return;const u=ee(t,a.path);te(n,l,u)}),n}setTransformer(t){const[i]=Array.isArray(this.override)?this.override:[this.override];if(!t||!i)return t;const n={};return Object.entries(t).forEach(([l,s])=>{const a=i[l];a&&te(n,a.path,s)}),n}},Se=class{constructor(o){this.cache=new Map,o._subscribe({formState:{values:!0},exact:!0,callback:()=>{o._names.unMount.forEach(t=>{this.delete(t)})}})}get(o,t){const i=this.cache.get(o);if(i)return t?i.complex.get(t):i.plain}set(o,t,i){let n=this.cache.get(t);n||(n={complex:new WeakMap},this.cache.set(t,n)),i?n.complex.set(i,o):n.plain=o}has(o,t){var i,n;return t?(n=(i=this.cache.get(o))==null?void 0:i.complex.has(t))!=null?n:!1:this.cache.has(o)}delete(o){for(const t of this.cache.keys())t.startsWith(o)&&this.cache.delete(t)}clear(){this.cache.clear()}};const{useMemo:Ae}=await c("react");function Ce(o,t=[]){return Ae(()=>{const i=new Se(o.control);return Ie.create(o.control,i)},[o.control,...t])}const{ModelUtils:$e}=await c("@baseplate-dev/project-builder-lib"),{createAdminCrudInputWebConfig:Te,useProjectDefinition:Ee}=await c("@baseplate-dev/project-builder-lib/web"),{SelectFieldController:ne}=await c("@baseplate-dev/ui-components");function Re({formProps:o,name:t,model:i,embeddedFormOptions:n}){const{definition:l}=Ee(),s=$e.getRelationsToModel(l,i.id).map(d=>({label:`${d.relation.foreignRelationName} (${d.model.name})`,value:d.relation.foreignId})),a=t,u=o.control;return e.jsxs(e.Fragment,{children:[e.jsx(ne,{label:"Relation Name",control:u,name:`${a}.modelRelationRef`,options:s}),e.jsx(ne,{label:"Embedded Form",control:u,name:`${a}.embeddedFormRef`,options:n})]})}const Ne=Te({name:"embedded",pluginKey:void 0,label:"Embedded",getNewInput:()=>({label:"",type:"embedded",modelRelationRef:"",embeddedFormRef:""}),Form:Re}),{createAdminCrudInputWebConfig:Le,useProjectDefinition:_e}=await c("@baseplate-dev/project-builder-lib/web"),{SelectFieldController:ie}=await c("@baseplate-dev/ui-components");function We({formProps:o,name:t,model:i,embeddedFormOptions:n}){const{definitionContainer:l}=_e(),s=i.model.relations?.map(d=>({label:`${d.name} (${l.nameFromId(d.modelRef)})`,value:d.id}))??[],a=t,u=o.control;return e.jsxs(e.Fragment,{children:[e.jsx(ie,{label:"Relation Name",control:u,name:`${a}.localRelationRef`,options:s}),e.jsx(ie,{label:"Embedded Form",control:u,name:`${a}.embeddedFormRef`,options:n})]})}const Pe=Le({name:"embeddedLocal",pluginKey:void 0,label:"Embedded Local",getNewInput:()=>({label:"",type:"embeddedLocal",embeddedFormRef:"",localRelationRef:""}),Form:We}),{createAdminCrudInputWebConfig:Ve}=await c("@baseplate-dev/project-builder-lib/web"),{SelectFieldController:Me}=await c("@baseplate-dev/ui-components");function Oe({formProps:o,name:t,model:i}){const n=i.model.fields.filter(a=>a.type==="enum").map(a=>({label:a.name,value:a.id})),l=t,s=o.control;return e.jsx(Me,{label:"Enum Field",control:s,name:`${l}.modelFieldRef`,options:n})}const ke=Ve({name:"enum",pluginKey:void 0,label:"Enum",getNewInput:()=>({label:"",type:"enum",modelFieldRef:""}),Form:Oe}),{createAdminCrudInputWebConfig:Ue,useProjectDefinition:Be}=await c("@baseplate-dev/project-builder-lib/web"),{InputFieldController:_,SelectFieldController:Ke}=await c("@baseplate-dev/ui-components");function ze({formProps:o,name:t,model:i}){const{definitionContainer:n}=Be(),l=i.model.relations?.map(u=>({label:`${u.name} (${n.nameFromId(u.modelRef)})`,value:u.id}))??[],s=t,a=o.control;return e.jsxs(e.Fragment,{children:[e.jsx(Ke,{label:"Local Relation Name",control:a,name:`${s}.localRelationRef`,options:l}),e.jsx(_,{label:"Label Expression (e.g. name)",control:a,name:`${s}.labelExpression`}),e.jsx(_,{label:"Value Expression (e.g. id)",control:a,name:`${s}.valueExpression`}),e.jsx(_,{label:"Default Label (optional)",control:a,name:`${s}.defaultLabel`}),e.jsx(_,{label:"Empty Label (optional) - only if field is nullable",control:a,name:`${s}.nullLabel`})]})}const He=Ue({name:"foreign",pluginKey:void 0,label:"Foreign",getNewInput:()=>({label:"",type:"foreign",localRelationRef:"",labelExpression:"",valueExpression:"",defaultLabel:"",nullLabel:""}),Form:ze}),{createAdminCrudInputWebConfig:Ge}=await c("@baseplate-dev/project-builder-lib/web"),{InputFieldController:qe,SelectFieldController:Ye}=await c("@baseplate-dev/ui-components");function Je({formProps:o,name:t,model:i}){const n=i.model.fields.map(a=>({label:a.name,value:a.id})),l=t,s=o.control;return e.jsxs(e.Fragment,{children:[e.jsx(Ye,{label:"Field",control:s,name:`${l}.modelFieldRef`,options:n}),e.jsx(qe,{label:"Validation (zod), e.g. z.string().min(1) (optional)",control:s,name:`${l}.validation`})]})}const Qe=Ge({name:"text",pluginKey:void 0,label:"Text",getNewInput:()=>({label:"",type:"text",modelFieldRef:""}),Form:Je}),oe=[Ne,Pe,ke,He,Qe],{createAdminCrudInputSchema:Xe,ModelUtils:Ze}=await c("@baseplate-dev/project-builder-lib"),{adminCrudInputWebSpec:et,useDefinitionSchema:tt,useProjectDefinition:nt}=await c("@baseplate-dev/project-builder-lib/web"),{Button:le,Dialog:it,DialogContent:ot,DialogDescription:lt,DialogFooter:st,DialogHeader:at,DialogTitle:rt,InputFieldController:ct,SelectFieldController:dt}=await c("@baseplate-dev/ui-components"),{useEffect:mt,useId:ut}=await c("react");function pt({open:o,onOpenChange:t,field:i,modelRef:n,embeddedFormOptions:l,isNew:s=!1,onSave:a}){const{definition:u,pluginContainer:d}=nt(),p=tt(Xe),b=n?Ze.byIdOrThrow(u,n):void 0,j=d.getPluginSpec(et),h=j.getInputWebConfigs(oe).map(C=>({label:C.label,value:C.name})),f=V({resolver:N(p),values:i??{type:"text",label:""}}),{control:x,handleSubmit:F,formState:{isDirty:w},reset:g}=f;mt(()=>{o&&!i&&g({type:"text",label:""})},[o,i,g]);const v=I({control:x,name:"type"}),y=v?j.getInputWebConfig(v,oe):void 0,D=y?.Form,m=F(C=>{a(C),t(!1)}),r=ut();return e.jsx(it,{open:o,onOpenChange:t,children:e.jsx(ot,{className:"sm:max-w-[500px]",children:e.jsxs("form",{id:r,onSubmit:C=>(C.stopPropagation(),m(C)),children:[e.jsxs(at,{children:[e.jsx(rt,{children:s?"Add Field":"Edit Field"}),e.jsx(lt,{children:s?"Configure the new form field settings.":"Update the field settings below."})]}),e.jsxs("div",{className:"space-y-4 py-4",children:[e.jsx(dt,{label:"Type",control:x,options:h,name:"type"}),e.jsx(ct,{label:"Label",control:x,name:"label",placeholder:"Enter field label"}),D&&b&&e.jsx(D,{formProps:f,name:"",model:b,embeddedFormOptions:l,pluginKey:y.pluginKey})]}),e.jsxs(st,{children:[e.jsx(le,{type:"button",variant:"outline",onClick:()=>{t(!1)},children:"Cancel"}),e.jsxs(le,{form:r,type:"submit",disabled:!w,children:[s?"Add":"Update"," Field"]})]})]})})})}const{Button:O,RecordView:ft,RecordViewActions:bt,RecordViewItem:se,RecordViewItemList:ht,useConfirmDialog:xt}=await c("@baseplate-dev/ui-components"),{useState:k}=await c("react");function ge({className:o,formProps:t,embeddedFormOptions:i}){const{control:n}=t,{requestConfirm:l}=xt(),{fields:s,append:a,remove:u,update:d,move:p}=Y({control:n,name:"form.fields"}),[b,j]=k(void 0),[h,f]=k(!1),[x,F]=k(!1),w=I({control:n,name:"form.fields"});function g(r){const C=w[r];l({title:"Delete Field",content:`Are you sure you want to delete the field "${C.label||"Untitled"}"?`,onConfirm:()=>{u(r)}})}function v(r){j(w[r]),f(!0)}function y(){j(void 0),F(!0)}function D(r){if(b){const C=w.findIndex(we=>we.id===b.id);C!==-1&&d(C,r)}else a(r)}const m=s.map((r,C)=>({id:r.id,element:e.jsxs(ft,{children:[e.jsxs(ht,{children:[e.jsx(se,{title:"Label",children:e.jsx("div",{className:"flex items-center gap-2",children:r.label})}),e.jsx(se,{title:"Type",children:r.type})]}),e.jsxs(bt,{children:[e.jsx(O,{variant:"ghost",size:"icon",title:"Edit","aria-label":"Edit field",onClick:()=>{v(C)},children:e.jsx(J,{})}),e.jsx(O,{variant:"ghostDestructive",size:"icon",title:"Delete","aria-label":"Delete field",onClick:()=>{g(C)},children:e.jsx(Q,{})})]})]},r.id)}));return e.jsxs("div",{className:X("space-y-4",o),children:[s.length===0?e.jsx("p",{className:"pt-4 text-style-muted",children:"No fields configured. Add fields to create your form."}):e.jsx("div",{className:"flex w-full flex-col gap-2",children:e.jsx(q,{listItems:m,sortItems:p})}),e.jsx(pt,{open:h||x,onOpenChange:r=>{r||(f(!1),F(!1),j(void 0))},field:b,modelRef:I({control:n,name:"modelRef"})||"",embeddedFormOptions:i,isNew:x,onSave:D}),e.jsxs(O,{variant:"secondary",size:"sm",onClick:y,children:[e.jsx(Z,{}),"Add Field"]})]})}const{useMemo:jt}=await c("react");function Ct(o){const t=Y(o);return{fields:jt(()=>o.getTransformer?t.fields.map(o.getTransformer):t.fields,[t.fields,o.getTransformer]),move:t.move,remove:t.remove,swap:t.swap,prepend:(n,l)=>{if(!o.setTransformer)return t.prepend(n,l);const s=Array.isArray(n)?n.map(o.setTransformer):o.setTransformer(n);t.prepend(s,l)},append:(n,l)=>{if(!o.setTransformer)return t.append(n,l);const s=Array.isArray(n)?n.map(o.setTransformer):o.setTransformer(n);t.append(s,l)},insert:(n,l,s)=>{if(!o.setTransformer)return t.insert(n,l,s);const a=Array.isArray(l)?l.map(o.setTransformer):o.setTransformer(l);t.insert(n,a,s)},update:(n,l)=>{if(!o.setTransformer)return t.update(n,l);const s=o.setTransformer(l);t.update(n,s)},replace:n=>{if(!o.setTransformer)return t.replace(n);const l=o.setTransformer(n);t.replace(l)}}}const{adminCrudColumnEntityType:gt}=await c("@baseplate-dev/project-builder-lib"),{createAdminCrudColumnWebConfig:vt,useProjectDefinition:yt}=await c("@baseplate-dev/project-builder-lib/web"),{InputFieldController:ae,SelectFieldController:wt}=await c("@baseplate-dev/ui-components");function Ft({formProps:o,model:t}){const{control:i}=o,{definitionContainer:n}=yt(),l=t.model.relations?.map(s=>({label:`${s.name} (${n.nameFromId(s.modelRef)})`,value:s.id}))??[];return e.jsxs(e.Fragment,{children:[e.jsx(wt,{label:"Local Relation",control:i,name:"localRelationRef",options:l,placeholder:"Select a relation"}),e.jsx(ae,{label:"Label Expression",control:i,name:"labelExpression",placeholder:"e.g. name",description:"Field to display from the related model"}),e.jsx(ae,{label:"Value Expression",control:i,name:"valueExpression",placeholder:"e.g. id",description:"Field to use for matching the relation"})]})}const Dt=vt({name:"foreign",pluginKey:void 0,label:"Foreign Column",isAvailableForModel:(o,t)=>(o.models.find(n=>n.id===t)?.model.relations?.length??0)>0,Form:Ft,getNewColumn:()=>({id:gt.generateNewId(),type:"foreign",label:"",localRelationRef:"",labelExpression:"",valueExpression:""})}),{adminCrudColumnEntityType:It}=await c("@baseplate-dev/project-builder-lib"),{createAdminCrudColumnWebConfig:St}=await c("@baseplate-dev/project-builder-lib/web"),{SelectFieldController:At}=await c("@baseplate-dev/ui-components");function $t({formProps:o,model:t}){const{control:i}=o,n=t.model.fields.map(l=>({label:l.name,value:l.id}));return e.jsx(At,{label:"Field",control:i,name:"modelFieldRef",options:n,placeholder:"Select a field"})}const Tt=St({name:"text",pluginKey:void 0,label:"Text Column",Form:$t,isAvailableForModel:()=>!0,getNewColumn:()=>({id:It.generateNewId(),type:"text",label:"",modelFieldRef:""})}),re=[Dt,Tt],{createAdminCrudColumnSchema:Et,ModelUtils:Rt}=await c("@baseplate-dev/project-builder-lib"),{adminCrudColumnWebSpec:Nt,useDefinitionSchema:Lt,useProjectDefinition:_t}=await c("@baseplate-dev/project-builder-lib/web"),{Button:ce,Dialog:Wt,DialogContent:Pt,DialogDescription:Vt,DialogFooter:Mt,DialogHeader:Ot,DialogTitle:kt,InputFieldController:Ut,SelectFieldController:Bt}=await c("@baseplate-dev/ui-components"),{useEffect:Kt,useId:zt}=await c("react");function Ht({open:o,onOpenChange:t,column:i,modelRef:n,isNew:l=!1,onSave:s}){const{definition:a,pluginContainer:u}=_t(),d=Lt(Et),p=n?Rt.byIdOrThrow(a,n):void 0,b=u.getPluginSpec(Nt),j=b.getColumnWebConfigs(re).filter(r=>n&&r.isAvailableForModel(a,n)).map(r=>({label:r.label,value:r.name})),h=V({resolver:N(d),values:i??{type:"text",label:""}}),{control:f,handleSubmit:x,formState:{isDirty:F},reset:w}=h;Kt(()=>{o&&!i&&w({type:"text",label:""})},[o,i,w]);const g=I({control:f,name:"type"}),v=g?b.getColumnWebConfig(g,re):void 0,y=v?.Form,D=x(r=>{s(r),t(!1)}),m=zt();return e.jsx(Wt,{open:o,onOpenChange:t,children:e.jsx(Pt,{className:"sm:max-w-[425px]",children:e.jsxs("form",{id:m,onSubmit:r=>(r.stopPropagation(),D(r)),children:[e.jsxs(Ot,{children:[e.jsx(kt,{children:l?"Add Column":"Edit Column"}),e.jsx(Vt,{children:l?"Configure the new table column settings.":"Update the column settings below."})]}),e.jsxs("div",{className:"space-y-4 py-4",children:[e.jsx(Bt,{label:"Type",control:f,options:j,name:"type"}),e.jsx(Ut,{label:"Label",control:f,name:"label",placeholder:"Enter column label"}),y&&p&&e.jsx(y,{formProps:h,model:p,pluginKey:v.pluginKey})]}),e.jsxs(Mt,{children:[e.jsx(ce,{type:"button",variant:"outline",onClick:()=>{t(!1)},children:"Cancel"}),e.jsxs(ce,{form:m,type:"submit",disabled:!F,children:[l?"Add":"Update"," Column"]})]})]})})})}const{Button:U,RecordView:Gt,RecordViewActions:qt,RecordViewItem:de,RecordViewItemList:Yt,useConfirmDialog:Jt}=await c("@baseplate-dev/ui-components"),{useState:B}=await c("react");function ve({className:o,lens:t,modelRef:i}){const{requestConfirm:n}=Jt(),{fields:l,append:s,remove:a,update:u,move:d}=Ct(t.interop()),[p,b]=B(void 0),[j,h]=B(!1),[f,x]=B(!1);function F(m){const r=l[m];n({title:"Delete Column",content:`Are you sure you want to delete the column "${r.label||"Untitled"}"?`,onConfirm:()=>{a(m)}})}const w=I(t.interop());function g(m){b(w[m]),h(!0)}function v(){b(void 0),x(!0)}function y(m){if(p){const r=w.findIndex(C=>C.id===p.id);r!==-1&&u(r,m)}else s(m)}const D=l.map((m,r)=>({id:m.id,element:e.jsxs(Gt,{children:[e.jsxs(Yt,{children:[e.jsx(de,{title:"Label",children:e.jsx("div",{className:"flex items-center gap-2",children:e.jsx("span",{children:m.label||e.jsx("span",{className:"text-muted-foreground",children:"Untitled Column"})})})}),e.jsx(de,{title:"Type",children:m.type})]}),e.jsxs(qt,{children:[e.jsx(U,{variant:"ghost",size:"icon",title:"Edit","aria-label":"Edit column",onClick:()=>{g(r)},children:e.jsx(J,{})}),e.jsx(U,{variant:"ghostDestructive",size:"icon",title:"Delete","aria-label":"Delete column",onClick:()=>{F(r)},children:e.jsx(Q,{})})]})]},m.id)}));return e.jsxs("div",{className:X("space-y-4",o),children:[l.length===0?e.jsx("p",{className:"pt-4 text-style-muted",children:"No columns configured. Add columns to display data in your table."}):e.jsx("div",{className:"flex w-full flex-col gap-2",children:e.jsx(q,{listItems:D,sortItems:d})}),e.jsx(Ht,{open:j||f,onOpenChange:m=>{m||(h(!1),x(!1),b(void 0))},column:p,modelRef:i,isNew:f,onSave:y}),e.jsxs(U,{variant:"secondary",size:"sm",onClick:v,children:[e.jsx(Z,{}),"Add Column"]})]})}const{createAdminCrudEmbeddedFormSchema:Qt}=await c("@baseplate-dev/project-builder-lib"),{useDefinitionSchema:Xt,useProjectDefinition:ye}=await c("@baseplate-dev/project-builder-lib/web"),{Button:G,CheckboxFieldController:Zt,InputFieldController:en,SelectFieldController:me,Table:tn,TableBody:nn,TableCell:W,TableHead:P,TableHeader:on,TableRow:ue,toast:ln}=await c("@baseplate-dev/ui-components"),{useId:sn}=await c("react");function an({items:o,edit:t,remove:i}){const{definitionContainer:n}=ye();return e.jsxs(tn,{className:"max-w-6xl",children:[e.jsx(on,{children:e.jsxs(ue,{children:[e.jsx(P,{children:"Form Name"}),e.jsx(P,{children:"Model Name"}),e.jsx(P,{children:"Type"}),e.jsx(P,{children:"Actions"})]})}),e.jsx(nn,{children:o.map((l,s)=>e.jsxs(ue,{children:[e.jsx(W,{children:l.name}),e.jsx(W,{children:n.nameFromId(l.modelRef)}),e.jsx(W,{children:l.type}),e.jsxs(W,{className:"space-x-4",children:[e.jsx(G,{variant:"link",size:"none",onClick:()=>{t(s)},children:"Edit"}),e.jsx(G,{variant:"linkDestructive",size:"none",onClick:()=>{i(s)},children:"Remove"})]})]},l.id))})]})}const rn=[{label:"Object",value:"object"},{label:"List",value:"list"}];function cn({initialData:o,onSubmit:t,embeddedFormOptions:i}){const{definition:n}=ye(),l=Xt(Qt),s=V({resolver:N(l),defaultValues:o}),{handleSubmit:a,control:u,watch:d}=s,p=n.models.map(x=>({label:x.name,value:x.id})),b=d("type"),j=d("modelRef"),h=Ce({control:u}),f=sn();return e.jsxs("form",{onSubmit:x=>{x.stopPropagation(),a(t)(x).catch(F=>{ln.error(je(F))})},id:f,className:"space-y-4",children:[e.jsx(en,{label:"Name",control:u,name:"name"}),e.jsx(me,{label:"Type",control:u,name:"type",options:rn}),e.jsx(Zt,{label:"Include ID Field? (useful for list types)",control:u,name:"includeIdField"}),e.jsx(me,{label:"Model",control:u,options:p,name:"modelRef"}),b==="list"&&e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Table"}),e.jsx(ve,{lens:h.focus("table.columns"),modelRef:j})]}),e.jsx("h2",{children:"Form"}),e.jsx(ge,{formProps:s,embeddedFormOptions:i}),e.jsx(G,{type:"submit",form:f,children:"Save"})]})}const{createAdminCrudActionWebConfig:dn}=await c("@baseplate-dev/project-builder-lib/web"),mn=dn({name:"delete",pluginKey:void 0,label:"Delete",isAvailableForModel:()=>!0,getNewAction:()=>({type:"delete",position:"dropdown"})}),{createAdminCrudActionWebConfig:un}=await c("@baseplate-dev/project-builder-lib/web"),pn=un({name:"edit",pluginKey:void 0,label:"Edit",isAvailableForModel:()=>!0,getNewAction:()=>({type:"edit",position:"inline"})}),pe=[pn,mn],{createAdminCrudActionSchema:fn,ModelUtils:bn}=await c("@baseplate-dev/project-builder-lib"),{adminCrudActionWebSpec:hn,useDefinitionSchema:xn,useProjectDefinition:jn}=await c("@baseplate-dev/project-builder-lib/web"),{Button:fe,Dialog:Cn,DialogContent:gn,DialogDescription:vn,DialogFooter:yn,DialogHeader:wn,DialogTitle:Fn,SelectFieldController:be}=await c("@baseplate-dev/ui-components"),{useEffect:Dn,useId:In}=await c("react");function Sn({open:o,onOpenChange:t,action:i,modelRef:n,isNew:l=!1,onSave:s}){const{definition:a,pluginContainer:u}=jn(),d=xn(fn),p=n?bn.byIdOrThrow(a,n):void 0,b=u.getPluginSpec(hn),j=b.getActionWebConfigs(pe).filter(r=>n&&r.isAvailableForModel(a,n)).map(r=>({label:r.label,value:r.name})),h=V({resolver:N(d),values:i??{type:"edit",position:"inline"}}),{control:f,handleSubmit:x,formState:{isDirty:F},reset:w}=h;Dn(()=>{o&&!i&&w({type:"edit",position:"inline"})},[o,i,w]);const g=I({control:f,name:"type"}),v=g?b.getActionWebConfig(g,pe):void 0,y=v?.Form,D=x(r=>{s(r),t(!1)}),m=In();return e.jsx(Cn,{open:o,onOpenChange:t,children:e.jsx(gn,{className:"sm:max-w-[500px]",children:e.jsxs("form",{id:m,onSubmit:r=>(r.stopPropagation(),D(r)),children:[e.jsxs(wn,{children:[e.jsx(Fn,{children:l?"Add Action":"Edit Action"}),e.jsx(vn,{children:l?"Configure the new table action settings.":"Update the action settings below."})]}),e.jsxs("div",{className:"space-y-4 py-4",children:[e.jsx(be,{label:"Type",control:f,options:j,name:"type"}),e.jsx(be,{label:"Position",control:f,options:[{label:"Inline",value:"inline"},{label:"Dropdown",value:"dropdown"}],name:"position"}),y&&p&&e.jsx(y,{formProps:h,model:p,pluginKey:v.pluginKey})]}),e.jsxs(yn,{children:[e.jsx(fe,{type:"button",variant:"outline",onClick:()=>{t(!1)},children:"Cancel"}),e.jsxs(fe,{form:m,type:"submit",disabled:!F,children:[l?"Add":"Update"," Action"]})]})]})})})}const{Button:K,RecordView:An,RecordViewActions:$n,RecordViewItem:he,RecordViewItemList:Tn,useConfirmDialog:En}=await c("@baseplate-dev/ui-components"),{useState:z}=await c("react");function Rn({className:o,control:t,modelRef:i}){const{requestConfirm:n}=En(),{fields:l,append:s,remove:a,update:u,move:d}=Y({control:t,name:"table.actions"}),[p,b]=z(void 0),[j,h]=z(!1),[f,x]=z(!1);function F(m){const r=l[m];n({title:"Delete Action",content:`Are you sure you want to delete the "${r.type}" action?`,onConfirm:()=>{a(m)}})}const w=I({control:t,name:"table.actions"});function g(m){b(w?.[m]),h(!0)}function v(){b(void 0),x(!0)}function y(m){if(p){const r=(w??[]).findIndex(C=>C.id===p.id);r!==-1&&u(r,m)}else s(m)}const D=l.map((m,r)=>({id:m.id,element:e.jsxs(An,{children:[e.jsxs(Tn,{children:[e.jsx(he,{title:"Type",children:e.jsx("div",{className:"flex items-center gap-2",children:e.jsx("span",{className:"capitalize",children:m.type})})}),e.jsx(he,{title:"Position",children:m.position})]}),e.jsxs($n,{children:[e.jsx(K,{variant:"ghost",size:"icon",title:"Edit","aria-label":"Edit action",onClick:()=>{g(r)},children:e.jsx(J,{})}),e.jsx(K,{variant:"ghostDestructive",size:"icon",title:"Delete","aria-label":"Delete action",onClick:()=>{F(r)},children:e.jsx(Q,{})})]})]},m.id)}));return e.jsxs("div",{className:X("space-y-4",o),children:[l.length===0?e.jsx("p",{className:"pt-4 text-style-muted",children:"No actions configured. Add actions to enable row operations."}):e.jsx("div",{className:"flex w-full flex-col gap-2",children:e.jsx(q,{listItems:D,sortItems:d})}),e.jsx(Sn,{open:j||f,onOpenChange:m=>{m||(h(!1),x(!1),b(void 0))},action:p,modelRef:i??"",isNew:f,onSave:y}),e.jsxs(K,{variant:"secondary",size:"sm",onClick:v,children:[e.jsx(Z,{}),"Add Action"]})]})}const{useProjectDefinition:Nn}=await c("@baseplate-dev/project-builder-lib/web"),{CheckboxFieldController:Ln,ComboboxFieldController:xe,SectionListSection:A,SectionListSectionContent:$,SectionListSectionDescription:T,SectionListSectionHeader:E,SectionListSectionTitle:R}=await c("@baseplate-dev/ui-components");function _n({formProps:o}){const{control:t}=o,{definition:i}=Nn(),n=Ce({control:t}),l=i.models.map(d=>({label:d.name,value:d.id})),s=I({control:t,name:"modelRef"}),a=i.models.find(d=>d.id===s)?.model.fields.map(d=>({label:d.name,value:d.id}))??[],u=I({control:t,name:"embeddedForms"})?.map(d=>({label:d.name,value:d.id}))??[];return e.jsxs(e.Fragment,{children:[e.jsxs(A,{children:[e.jsxs(E,{children:[e.jsx(R,{children:"Model Configuration"}),e.jsx(T,{children:"Configure the data model and basic settings for this CRUD section."})]}),e.jsxs($,{className:"space-y-6",children:[e.jsx(xe,{label:"Model",control:t,options:l,name:"modelRef"}),e.jsx(xe,{label:"Name Field",control:t,options:a,description:"The field to use as the name of the record (used in breadcrumbs/title of edit page)",name:"nameFieldRef"}),e.jsx(Ln,{label:"Disable Create?",control:t,name:"disableCreate"})]})]}),e.jsxs(A,{children:[e.jsxs(E,{children:[e.jsx(R,{children:"Table Configuration"}),e.jsx(T,{children:"Configure which columns to display in the data table."})]}),e.jsx($,{children:e.jsx(ve,{lens:n.focus("table.columns"),modelRef:s})})]}),e.jsxs(A,{children:[e.jsxs(E,{children:[e.jsx(R,{children:"Table Actions"}),e.jsx(T,{children:"Configure actions available for each row in the table. Drag to reorder."})]}),e.jsx($,{children:e.jsx(Rn,{control:t,modelRef:s})})]}),e.jsxs(A,{children:[e.jsxs(E,{children:[e.jsx(R,{children:"Form Configuration"}),e.jsx(T,{children:"Configure the form fields for creating and editing records."})]}),e.jsx($,{children:e.jsx(ge,{formProps:o,embeddedFormOptions:u})})]}),e.jsxs(A,{children:[e.jsxs(E,{children:[e.jsx(R,{children:"Embedded Forms"}),e.jsx(T,{children:"Configure embedded forms for related data objects."})]}),e.jsx($,{children:e.jsx(Fe.LabelledController,{control:t,name:"embeddedForms",renderForm:d=>e.jsx(cn,{...d,embeddedFormOptions:u}),renderTable:d=>e.jsx(an,{...d}),defaultValue:{type:"object"}})})]})]})}const{AsyncComboboxField:Wn,useControllerMerged:Pn}=await c("@baseplate-dev/ui-components");async function Vn(){const o=await L(()=>import("./index-BsqYBobW.js").then(s=>s.A),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10])),t=await L(()=>import("./index-DcEdWL9A.js"),__vite__mapDeps([11,6,1])),i=await L(()=>import("./index--XHV4ygU.js").then(s=>s.R),__vite__mapDeps([6,1])),n=await L(()=>import("./index-BTIQ5pQz.js"),__vite__mapDeps([12,6,1]));return[o,t,i,n].map(s=>Object.entries(s).filter(([,a])=>typeof a=="function").map(([a,u])=>({label:a,value:a,icon:u}))).flat()}function Mn({...o}){return e.jsx(Wn,{placeholder:"Select an icon",...o,loadOptions:t=>Vn().then(i=>i.filter(n=>!t||n.label.toLowerCase().includes(t.toLowerCase())).sort((n,l)=>n.label.localeCompare(l.label)).slice(0,20)),renderItemLabel:t=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.icon,{className:"size-4"}),t.label]})})}function On({name:o,control:t,...i}){const{field:n,fieldState:{error:l}}=Pn({name:o,control:t},i),s=i;return e.jsx(Mn,{error:l?.message,...s,...n,value:n.value??null})}const{adminSectionEntityType:kn,createWebAdminSectionSchema:Un}=await c("@baseplate-dev/project-builder-lib"),{useBlockUnsavedChangesNavigate:Bn,useProjectDefinition:Kn,useResettableForm:zn}=await c("@baseplate-dev/project-builder-lib/web"),{Button:H,ComboboxFieldController:Hn,Dialog:Gn,DialogClose:qn,DialogContent:Yn,DialogDescription:Jn,DialogFooter:Qn,DialogHeader:Xn,DialogTitle:Zn,DialogTrigger:ei,FormActionBar:ti,InputFieldController:ni,SectionList:ii,SectionListSection:oi,SectionListSectionContent:li,SectionListSectionDescription:si,SectionListSectionHeader:ai,SectionListSectionTitle:ri}=await c("@baseplate-dev/ui-components"),{useNavigate:ci}=await c("@tanstack/react-router"),hi=function(){const{app:t,section:i}=M.useLoaderData(),{appKey:n,sectionKey:l}=M.useParams(),s=ci({from:M.fullPath}),{definition:a,saveDefinitionWithFeedback:u,isSavingDefinition:d}=Kn(),p=De(Un),b=a.features.map(g=>({label:g.name,value:g.id})),j=zn({resolver:N(p),values:i}),{control:h,handleSubmit:f,reset:x}=j,F=f(g=>{const{id:v,...y}=g;return u(D=>{const m=D.apps.find(C=>C.id===t.id);if(m?.type!=="web"||!m.adminApp)return;const r=m.adminApp.sections?.findIndex(C=>C.id===kn.idFromKey(l));r!==void 0&&r>=0&&m.adminApp.sections&&(m.adminApp.sections[r]={...y,id:i.id})})}),w=()=>{u(g=>{const v=g.apps.find(y=>y.id===t.id);v?.type!=="web"||!v.adminApp||(v.adminApp.sections=v.adminApp.sections?.filter(y=>y.id!==i.id))},{successMessage:`Successfully deleted section "${i.name}"!`,onSuccess:()=>{s({to:"/admin-sections/$appKey",params:{appKey:n}}).catch(je)}})};return Bn({control:h,reset:x,onSubmit:F}),e.jsxs("div",{className:"relative flex h-full flex-1 flex-col overflow-hidden",children:[e.jsx("div",{className:"max-w-7xl space-y-4 border-b p-4",children:e.jsxs("div",{className:"flex items-center justify-between space-x-4",children:[e.jsxs("div",{children:[e.jsx("h2",{children:i.name}),e.jsxs("p",{className:"text-base text-muted-foreground",children:[i.type," section"]})]}),e.jsxs(Gn,{children:[e.jsx(ei,{asChild:!0,children:e.jsx(H,{variant:"secondary",children:"Delete"})}),e.jsxs(Yn,{children:[e.jsxs(Xn,{children:[e.jsxs(Zn,{children:["Delete ",i.name]}),e.jsxs(Jn,{className:"sr-only",children:["Are you sure you want to delete"," ",e.jsx("strong",{children:i.name}),"?"]})]}),e.jsxs("p",{children:["Are you sure you want to delete ",e.jsx("strong",{children:i.name}),"?"]}),e.jsx("p",{className:"text-style-muted",children:"This action will permanently remove the admin section from your application. This cannot be undone."}),e.jsxs(Qn,{children:[e.jsx(qn,{asChild:!0,children:e.jsx(H,{variant:"secondary",children:"Cancel"})}),e.jsx(H,{variant:"destructive",onClick:w,disabled:d,children:"Delete Section"})]})]})]})]})}),e.jsx("div",{className:"mb-(--action-bar-height) flex flex-1 overflow-y-auto",style:{"--action-bar-height":"52px"},children:e.jsxs("form",{onSubmit:F,className:"w-full max-w-7xl space-y-4 p-4",children:[e.jsxs(ii,{children:[e.jsxs(oi,{children:[e.jsxs(ai,{children:[e.jsx(ri,{children:"General"}),e.jsx(si,{children:"Basic configuration for your admin section."})]}),e.jsxs(li,{className:"space-y-6",children:[e.jsx(ni,{label:"Name",control:h,name:"name",autoComplete:"off"}),e.jsx(Hn,{label:"Feature",control:h,options:b,name:"featureRef"}),e.jsx(On,{label:"Icon",control:h,name:"icon",description:"Choose an icon to represent this section"})]})]}),e.jsx(_n,{formProps:j})]}),e.jsx(ti,{form:j})]})})]},i.id)};export{hi as component};
//# sourceMappingURL=edit._sectionKey-BapTzpqc.js.map