From a7af9404af7f9207d63e9fc8afd0de45956af771 Mon Sep 17 00:00:00 2001 From: Teodora Pavlova <27234545+TeodoraPavlova@users.noreply.github.com> Date: Tue, 30 Apr 2024 14:59:48 +0300 Subject: [PATCH 1/4] Load schema on demand (fixes #203) --- frontend/src/App.vue | 1 - frontend/src/components/Entity.vue | 194 +++++++++--------- frontend/src/components/EntityBulkEdit.vue | 134 ++++++------ frontend/src/components/Schema.vue | 164 ++++++++------- frontend/src/components/SchemaEdit.vue | 4 +- .../inputs/ReferencedEntitySelect.vue | 2 +- frontend/src/store/schema.js | 19 ++ 7 files changed, 275 insertions(+), 243 deletions(-) create mode 100644 frontend/src/store/schema.js diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 07c543d..934914d 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -63,7 +63,6 @@ export default { }, provide() { return { - activeSchema: computed(() => this.activeSchema), availableSchemas: computed(() => this.$refs.schemalist.schemas), updatePendingRequests: this.onPendingReviews, apiInfo: computed(() => this.apiInfo) diff --git a/frontend/src/components/Entity.vue b/frontend/src/components/Entity.vue index b471120..ef45fd9 100644 --- a/frontend/src/components/Entity.vue +++ b/frontend/src/components/Entity.vue @@ -1,113 +1,115 @@ - - - - - {{ activeSchema?.name || 'n/a' }} - - - {{ title }} + + + + + + + {{ activeSchema?.name || 'n/a' }} + + + {{ title }} + + + + delete + This entity is deleted. + + + + - - - delete - This entity is deleted. - - - - + - diff --git a/frontend/src/components/EntityBulkEdit.vue b/frontend/src/components/EntityBulkEdit.vue index c5a9457..d54e364 100644 --- a/frontend/src/components/EntityBulkEdit.vue +++ b/frontend/src/components/EntityBulkEdit.vue @@ -1,87 +1,85 @@ - - - - - {{ activeSchema?.name || 'n/a' }} - - - Bulk Editor - - + + + + + {{ activeSchema?.name || 'n/a' }} + + + Bulk Editor + + + :batch-mode="true" :ref="el => { entityFormRefs[`e_form_${e.id}`] = el }" + v-on:save-all="saveAll"/> - - - diff --git a/frontend/src/components/Schema.vue b/frontend/src/components/Schema.vue index 7944489..eb1f8ed 100644 --- a/frontend/src/components/Schema.vue +++ b/frontend/src/components/Schema.vue @@ -1,22 +1,25 @@ - - - {{ title }} + + + + + {{ title }} + + + + delete + This schema is deleted. + + + + - - - delete - This schema is deleted. - - - - - - + - + +watch( + route, + () => { + loading.value = true; + getSchema().then(() => loading.value = false); + }, + { + immediate: true + } +); + + \ No newline at end of file diff --git a/frontend/src/components/SchemaEdit.vue b/frontend/src/components/SchemaEdit.vue index 9cd31ed..92cfcf2 100644 --- a/frontend/src/components/SchemaEdit.vue +++ b/frontend/src/components/SchemaEdit.vue @@ -49,6 +49,7 @@ export default { name: "SchemaEdit", components: {EditAttributes, TextInput, Checkbox}, props: ["schema"], + emits: ["update-schema"], inject: ["availableSchemas"], data() { return { @@ -115,8 +116,9 @@ export default { schemaSlug: this.schema.slug, body: toSend, }); - if (response.status === 200) { + if (response?.id) { this.$router.push({name: 'schema-view', params: {schemaSlug: this.schema.slug}}); + this.$emit('update-schema'); } }, }, diff --git a/frontend/src/components/inputs/ReferencedEntitySelect.vue b/frontend/src/components/inputs/ReferencedEntitySelect.vue index 3ae8229..a10d97c 100644 --- a/frontend/src/components/inputs/ReferencedEntitySelect.vue +++ b/frontend/src/components/inputs/ReferencedEntitySelect.vue @@ -39,7 +39,7 @@ export default { components: {BaseInput, EntityList, ModalDialog}, emits: ["changed", "selected", "update:modelValue"], props: ["args", "label", "modelValue", "fkSchemaId", "selectType", "required"], - inject: ["activeSchema", "availableSchemas"], + inject: ["availableSchemas"], data() { return { loading: true, diff --git a/frontend/src/store/schema.js b/frontend/src/store/schema.js new file mode 100644 index 0000000..eee5449 --- /dev/null +++ b/frontend/src/store/schema.js @@ -0,0 +1,19 @@ +import {ref} from 'vue'; +import {api} from '@/composables/api'; +import {useRoute} from 'vue-router'; + +export const useSchema = () => { + const activeSchema = ref(null); + const route = useRoute(); + const getSchema = async () => { + const slug = route.params.schemaSlug; + if (slug) { + activeSchema.value = await api.getSchema({slugOrId: slug}); + } + } + + return { + activeSchema, + getSchema + } +} \ No newline at end of file From 0df05ef69cfec10ef260dedab64ffe0c983761d2 Mon Sep 17 00:00:00 2001 From: Teodora Pavlova <27234545+TeodoraPavlova@users.noreply.github.com> Date: Tue, 7 May 2024 13:27:08 +0300 Subject: [PATCH 2/4] apply suggestions --- frontend/src/components/Entity.vue | 6 +++--- frontend/src/components/Schema.vue | 14 ++++++++------ 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/Entity.vue b/frontend/src/components/Entity.vue index ef45fd9..a4933d9 100644 --- a/frontend/src/components/Entity.vue +++ b/frontend/src/components/Entity.vue @@ -90,9 +90,9 @@ async function getEntity() { } } -async function onUpdate(entity) { - if (entity) { - entity.value = entity; +async function onUpdate(editEntity) { + if (editEntity) { + entity.value = editEntity; } } diff --git a/frontend/src/components/Schema.vue b/frontend/src/components/Schema.vue index eb1f8ed..3b88c78 100644 --- a/frontend/src/components/Schema.vue +++ b/frontend/src/components/Schema.vue @@ -86,16 +86,18 @@ onUpdated(() => { } }); -async function onSchemaUpdate() { - await getSchema(); +function init() { + loading.value = true; + getSchema().then(() => loading.value = false); +} + +function onSchemaUpdate() { + init(); } watch( route, - () => { - loading.value = true; - getSchema().then(() => loading.value = false); - }, + () => init(), { immediate: true } From 3f563c3dba148e82b9cd440dc8f4355e55fb1898 Mon Sep 17 00:00:00 2001 From: Teodora Pavlova <27234545+TeodoraPavlova@users.noreply.github.com> Date: Wed, 8 May 2024 15:17:35 +0300 Subject: [PATCH 3/4] refactor move schema.js to composables --- frontend/src/components/Entity.vue | 2 +- frontend/src/components/EntityBulkEdit.vue | 2 +- frontend/src/components/Schema.vue | 2 +- frontend/src/{store => composables}/schema.js | 0 4 files changed, 3 insertions(+), 3 deletions(-) rename frontend/src/{store => composables}/schema.js (100%) diff --git a/frontend/src/components/Entity.vue b/frontend/src/components/Entity.vue index a4933d9..46fde45 100644 --- a/frontend/src/components/Entity.vue +++ b/frontend/src/components/Entity.vue @@ -31,7 +31,7 @@ import Tabbing from "@/components/layout/Tabbing"; import PermissionList from "@/components/auth/PermissionList"; import EntityBulkAdd from "@/components/EntityBulkAdd"; import Placeholder from "@/components/layout/Placeholder"; -import {useSchema} from "@/store/schema"; +import {useSchema} from "@/composables/schema"; import {useRoute} from "vue-router"; import {api} from "@/composables/api"; diff --git a/frontend/src/components/EntityBulkEdit.vue b/frontend/src/components/EntityBulkEdit.vue index d54e364..d4ff442 100644 --- a/frontend/src/components/EntityBulkEdit.vue +++ b/frontend/src/components/EntityBulkEdit.vue @@ -25,7 +25,7 @@ import BaseLayout from "@/components/layout/BaseLayout"; import EntityForm from "@/components/inputs/EntityForm"; import Placeholder from "@/components/layout/Placeholder"; import {ref, computed, watch} from "vue"; -import {useSchema} from "@/store/schema"; +import {useSchema} from "@/composables/schema"; import {useRoute} from "vue-router"; import {api} from "@/composables/api"; import {alertStore} from "@/composables/alert"; diff --git a/frontend/src/components/Schema.vue b/frontend/src/components/Schema.vue index 3b88c78..53a06d7 100644 --- a/frontend/src/components/Schema.vue +++ b/frontend/src/components/Schema.vue @@ -28,7 +28,7 @@ import Changes from "@/components/change_review/Changes"; import Tabbing from "@/components/layout/Tabbing"; import PermissionList from "@/components/auth/PermissionList"; import Placeholder from "@/components/layout/Placeholder"; -import {useSchema} from "@/store/schema"; +import {useSchema} from "@/composables/schema"; import {useRoute} from "vue-router"; const {getSchema, activeSchema} = useSchema(); diff --git a/frontend/src/store/schema.js b/frontend/src/composables/schema.js similarity index 100% rename from frontend/src/store/schema.js rename to frontend/src/composables/schema.js From c4610c5efd8006b4e92fa083e51c3dec647823fe Mon Sep 17 00:00:00 2001 From: Teodora Pavlova <27234545+TeodoraPavlova@users.noreply.github.com> Date: Wed, 8 May 2024 15:39:52 +0300 Subject: [PATCH 4/4] rename event update-schema to updateSchema in order to find occurrences easily --- frontend/src/components/SchemaEdit.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/SchemaEdit.vue b/frontend/src/components/SchemaEdit.vue index 92cfcf2..9100743 100644 --- a/frontend/src/components/SchemaEdit.vue +++ b/frontend/src/components/SchemaEdit.vue @@ -49,7 +49,7 @@ export default { name: "SchemaEdit", components: {EditAttributes, TextInput, Checkbox}, props: ["schema"], - emits: ["update-schema"], + emits: ["updateSchema"], inject: ["availableSchemas"], data() { return { @@ -118,7 +118,7 @@ export default { }); if (response?.id) { this.$router.push({name: 'schema-view', params: {schemaSlug: this.schema.slug}}); - this.$emit('update-schema'); + this.$emit('updateSchema'); } }, },