async component loading for model editor components

TandoorRecipes · Oct 8, 2024 · 7d47fcf · 7d47fcf
1 parent b857c9e
commit 7d47fcf
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 49 deletions.
diff --git a/vue3/src/apps/tandoor/main.ts b/vue3/src/apps/tandoor/main.ts
@@ -50,7 +50,7 @@ const routes = [
  {path: '/recipe/edit/:recipe_id', component: RecipeEditPage, name: 'edit_recipe', props: true},
 
  {path: '/list/:model?', component: ModelListPage, props: true, name: 'ModelListPage'},
- {path: '/edit/:model?/:id', component: ModelEditPage, props: true, name: 'ModelEditPage'},
+ {path: '/edit/:model/:id?', component: ModelEditPage, props: true, name: 'ModelEditPage'},
 
 ]
 

diff --git a/vue3/src/components/dialogs/ModelEditDialog.vue b/vue3/src/components/dialogs/ModelEditDialog.vue
@@ -1,51 +1,28 @@
 <template>
  <v-dialog max-width="600" activator="parent" v-model="dialog">
- <supermarket-category-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'SupermarketCategory'"></supermarket-category-editor>
- <unit-conversion-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'UnitConversion'" :disabled-fields="disabledFields"></unit-conversion-editor>
- <property-type-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'PropertyType'" :disabled-fields="disabledFields"></property-type-editor>
- <access-token-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'AccessToken'"></access-token-editor>
- <invite-link-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'InviteLink'"></invite-link-editor>
- <supermarket-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'Supermarket'"></supermarket-editor>
- <automation-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'Automation'"></automation-editor>
- <user-space-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'UserSpace'"></user-space-editor>
- <meal-type-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'MealType'"></meal-type-editor>
- <property-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'Property'"></property-editor>
- <food-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'Food'"></food-editor>
+ <component :is="editorComponent" :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false"></component>
  </v-dialog>
 </template>
 
 <script setup lang="ts">
 
 
-import {PropType, ref} from "vue";
-import AccessTokenEditor from "@/components/model_editors/AccessTokenEditor.vue";
-import {AccessToken, Food} from "@/openapi";
-import InviteLinkEditor from "@/components/model_editors/InviteLinkEditor.vue";
-import UserSpaceEditor from "@/components/model_editors/UserSpaceEditor.vue";
-import MealTypeEditor from "@/components/model_editors/MealTypeEditor.vue";
-import PropertyEditor from "@/components/model_editors/PropertyEditor.vue";
-import UnitConversionEditor from "@/components/model_editors/UnitConversionEditor.vue";
-import FoodEditor from "@/components/model_editors/FoodEditor.vue";
-import SupermarketEditor from "@/components/model_editors/SupermarketEditor.vue";
-import SupermarketCategoryEditor from "@/components/model_editors/SupermarketCategoryEditor.vue";
-import PropertyTypeEditor from "@/components/model_editors/PropertyTypeEditor.vue";
-import AutomationEditor from "@/components/model_editors/AutomationEditor.vue";
+import {defineAsyncComponent, PropType, ref, shallowRef} from "vue";
 import {EditorSupportedModels} from "@/types/Models";
 
 const emit = defineEmits(['create', 'save', 'delete'])
 
 const props = defineProps({
- model: {
- type: String as PropType<EditorSupportedModels>,
- required: true,
- },
+ model: { type: String as PropType<EditorSupportedModels>, required: true, },
  item: {default: null},
  disabledFields: {default: []},
  closeAfterCreate: {default: true},
  closeAfterSave: {default: true},
  closeAfterDelete: {default: true},
 })
 
+const editorComponent = shallowRef(defineAsyncComponent(() => import(`@/components/model_editors/${props.model}Editor.vue`)))
+
 const dialog = ref(false)
 
 function createEvent(arg: any) {

diff --git a/vue3/src/composables/useModelEditorFunctions.ts b/vue3/src/composables/useModelEditorFunctions.ts
@@ -35,7 +35,7 @@ export function useModelEditorFunctions<T>(modelName: string, emit: any) {
  function setupState(item: T | null, itemId: number | string | undefined,
  newItemFunction: () => void = () => {},
  existingItemFunction: () => void = () => {}): Promise<T | undefined> {
- if (item === null && itemId === undefined) {
+ if (item === null && (itemId === undefined || itemId == '')) {
  // neither item nor itemId given => new item
 
  if (modelClass.value.model.disableCreate) {
@@ -51,7 +51,7 @@ export function useModelEditorFunctions<T>(modelName: string, emit: any) {
  existingItemFunction()
  loading.value = false
  return Promise.resolve(editingObj.value)
- } else if (itemId !== undefined) {
+ } else if (itemId !== undefined && itemId != '') {
  // itemId is given => fetch from server and return item
  loading.value = true
 

diff --git a/vue3/src/pages/ModelEditPage.vue b/vue3/src/pages/ModelEditPage.vue
@@ -2,41 +2,34 @@
  <v-container>
  <v-row>
  <v-col>
- <v-card >
+ <v-card>
  <v-card-text class="pt-2 pb-2">
- <v-btn  variant="flat" @click="router.go(-1)" prepend-icon="fa-solid fa-arrow-left">{{ $t('Back')}}</v-btn>
+ <v-btn variant="flat" @click="router.go(-1)" prepend-icon="fa-solid fa-arrow-left">{{ $t('Back') }}</v-btn>
  </v-card-text>
  </v-card>
  </v-col>
  </v-row>
  <v-row>
  <v-col>
- <food-editor :item-id="id" v-if="model == 'Food'" @delete="router.go(-1)"></food-editor>
- <unit-editor :item-id="id" v-if="model == 'Unit'" @delete="router.go(-1)"></unit-editor>
- <keyword-editor :item-id="id" v-if="model == 'Keyword'" @delete="router.go(-1)"></keyword-editor>
- <supermarket-editor :item-id="id" v-if="model == 'Supermarket'" @delete="router.go(-1)"></supermarket-editor>
- <property-type-editor :item-id="id" v-if="model == 'PropertyType'" @delete="router.go(-1)"></property-type-editor>
- <automation-editor :item-id="id" v-if="model == 'Automation'" @delete="router.go(-1)"></automation-editor>
+ <component :is="editorComponent" :item-id="id" @delete="router.go(-1)"></component>
  </v-col>
  </v-row>
  </v-container>
 </template>
 
 <script setup lang="ts">
 
-import FoodEditor from "@/components/model_editors/FoodEditor.vue";
 import {useRouter} from "vue-router";
-import UnitEditor from "@/components/model_editors/UnitEditor.vue";
-import KeywordEditor from "@/components/model_editors/KeywordEditor.vue";
-import SupermarketEditor from "@/components/model_editors/SupermarketEditor.vue";
-import PropertyTypeEditor from "@/components/model_editors/PropertyTypeEditor.vue";
-import AutomationEditor from "@/components/model_editors/AutomationEditor.vue";
+import {EditorSupportedModels} from "@/types/Models";
+import {defineAsyncComponent, PropType, shallowRef} from "vue";
 
 const props = defineProps({
- model: {type: String, default: 'Food'},
- id: {type: String, required: true},
+ model: {type: String as PropType<EditorSupportedModels>, required: true},
+ id: {type: String, required: false, default: undefined},
 })
 
+const editorComponent = shallowRef(defineAsyncComponent(() => import(`@/components/model_editors/${props.model}Editor.vue`)))
+
 const router = useRouter()
 
 </script>

diff --git a/vue3/src/pages/ModelListPage.vue b/vue3/src/pages/ModelListPage.vue
@@ -83,7 +83,7 @@ type VDataTableProps = InstanceType<typeof VDataTable>['$props']
 const {t} = useI18n()
 const router = useRouter()
 
-const params = useUrlSearchParams('history', {initialValue: {page: "1", pageSize: "10"}})
+const params = useUrlSearchParams('history', {initialValue: {page: "1"}})
 
 const props = defineProps({
  model: {
@@ -148,14 +148,15 @@ onBeforeMount(() => {
  */
 // TODO proper typescript signature, this is just taken from vuetify example, must be a better solution
 function loadItems({page, itemsPerPage, search, sortBy, groupBy}) {
- console.log('load items called', page, params.page, itemsPerPage, params.pageSize)
  loading.value = true
  // TODO workaround for initial page bug see https:/vuetifyjs/vuetify/issues/17966
  if (page == 1 && Number(params.page) > 1 && !tablePageInitialized.value) {
  page = Number(params.page)
  }
  tablePageInitialized.value = true
  params.page = page.toString()
+ useUserPreferenceStore().deviceSettings.general_tableItemsPerPage = itemsPerPage
+
  genericModel.value.list({page: page, pageSize: itemsPerPage, query: search}).then((r: any) => {
  items.value = r.results
  itemCount.value = r.count