Add updateModel to createForm header/footer

ServiceStack · Aug 9, 2024 · 9db6fea · 9db6fea
1 parent c8d8a3c
commit 9db6fea
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/components/AutoQueryGrid.vue b/src/components/AutoQueryGrid.vue
@@ -11,10 +11,10 @@
         <slot v-else-if="slots.createform" name="createform" :type="apis.Create.request.name" :configure="configureField" :done="createDone" :save="createSave"></slot>
         <AutoCreateForm ref="createForm" v-else :type="apis.Create.request.name" :configure="configureField" @done="createDone" @save="createSave">
             <template #header>
-                <slot name="formheader" form="create" :formInstance="createForm" :apis="apis" :type="dataModelName"></slot>
+                <slot name="formheader" form="create" :formInstance="createForm" :apis="apis" :type="dataModelName" :updateModel="setCreate"></slot>
             </template>
             <template #footer>
-                <slot name="formfooter" form="create" :formInstance="createForm" :apis="apis" :type="dataModelName"></slot>
+                <slot name="formfooter" form="create" :formInstance="createForm" :apis="apis" :type="dataModelName" :updateModel="setCreate"></slot>
             </template>
         </AutoCreateForm>
     </div>
@@ -461,6 +461,12 @@ async function saveApiPrefs(prefs:ApiPrefs) {
     await update()
 }
 
+function setCreate(props:any) {
+    if (!createForm.value) return
+    Object.assign(createForm.value?.model, props)
+    forceUpdate()
+}
+
 function setEdit(props:any) {
     Object.assign(edit.value, props)
     forceUpdate()

diff --git a/src/demo/App.vue b/src/demo/App.vue
@@ -105,7 +105,11 @@
     <MarkdownInput id="richtext" v-model="richtext" />
 
     <h1 class="my-8 text-3xl">AutoQueryGrid</h1>
-    <AutoQueryGrid class="mb-3" type="Tracks" modelTitle="Record" newButtonLabel="New CD" />
+    <AutoQueryGrid class="mb-3" type="Tracks" modelTitle="Record" newButtonLabel="New CD">
+      <template #formfooter="{ updateModel }">
+          <SecondaryButton @click="updateModel({ name:'Go' })">Go</SecondaryButton>
+      </template>
+    </AutoQueryGrid>
 
     <AutoQueryGrid class="mb-3" type="Customer" />
 
@@ -656,6 +660,7 @@ import { AllTypes, Authenticate,
     GameItem, CreateGameItem, QueryGameItem, QueryCoupons 
 } from './dtos'
 import Combobox from '../components/Combobox.vue'
+import SecondaryButton from '../components/SecondaryButton.vue'
 
 function classes(type:'array'|'object', tag:'div'|'table'|'thead'|'th'|'tr'|'td',depth:number,cls:string,index?:number) {
     if (type == 'array') {