mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-02 20:59:28 -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

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