mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-01 12:18:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

async component loading for model editor components

Browse Source
This commit is contained in:
vabene1111
2024-10-08 07:44:17 +02:00
parent b857c9e4d9
commit 7d47fcf4e9
5 changed files with 20 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vue3/src/apps/tandoor/main.ts
View File

@@ -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'},
]

33
vue3/src/components/dialogs/ModelEditDialog.vue
View File

@@ -1,44 +1,19 @@
<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},
@@ -46,6 +21,8 @@ const props = defineProps({
closeAfterDelete: {default: true},
})
const editorComponent = shallowRef(defineAsyncComponent(() => import(`@/components/model_editors/${props.model}Editor.vue`)))
const dialog = ref(false)
function createEvent(arg: any) {

4
vue3/src/composables/useModelEditorFunctions.ts
View File

@@ -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

25
vue3/src/pages/ModelEditPage.vue
View File

@@ -2,21 +2,16 @@
<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>
@@ -24,19 +19,17 @@
<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>

5
vue3/src/pages/ModelListPage.vue
View File

@@ -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,7 +148,6 @@ 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://github.com/vuetifyjs/vuetify/issues/17966
if (page == 1 && Number(params.page) > 1 && !tablePageInitialized.value) {
@@ -156,6 +155,8 @@ function loadItems({page, itemsPerPage, search, sortBy, groupBy}) {
}
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