From 8d74de75faba037252fce8d229420982e7588bfd Mon Sep 17 00:00:00 2001
From: TeodoraPavlova <27234545+TeodoraPavlova@users.noreply.github.com>
Date: Wed, 8 May 2024 15:52:24 +0300
Subject: [PATCH] Load schema on demand (fixes #203) (#207)

* Load schema on demand (fixes #203)
* refactor move schema.js to composables
* rename event update-schema to updateSchema in order to find occurrences easily
---
 frontend/src/App.vue                          |   1 -
 frontend/src/components/Entity.vue            | 194 +++++++++---------
 frontend/src/components/EntityBulkEdit.vue    | 134 ++++++------
 frontend/src/components/Schema.vue            | 166 ++++++++-------
 frontend/src/components/SchemaEdit.vue        |   4 +-
 .../inputs/ReferencedEntitySelect.vue         |   2 +-
 frontend/src/composables/schema.js            |  19 ++
 7 files changed, 277 insertions(+), 243 deletions(-)
 create mode 100644 frontend/src/composables/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..46fde45 100644
--- a/frontend/src/components/Entity.vue
+++ b/frontend/src/components/Entity.vue
@@ -1,113 +1,115 @@
 <template>
-  <BaseLayout>
-    <template v-slot:additional_breadcrumbs>
-      <li class="breadcrumb-item">
-        <router-link :to="{name: 'schema-view', params: {schemaSlug: activeSchema?.slug || 'n-a'}}">
-          {{ activeSchema?.name || 'n/a' }}
-        </router-link>
-      </li>
-      <li class="breadcrumb-item active">{{ title }}</li>
+  <Placeholder :big="true" :loading="loading">
+    <template v-slot:content>
+      <BaseLayout>
+        <template v-slot:additional_breadcrumbs>
+          <li class="breadcrumb-item">
+            <router-link :to="{name: 'schema-view', params: {schemaSlug: activeSchema?.slug || 'n-a'}}">
+              {{ activeSchema?.name || 'n/a' }}
+            </router-link>
+          </li>
+          <li class="breadcrumb-item active">{{ title }}</li>
+        </template>
+        <template v-slot:actions>
+          <div v-if="entity?.deleted" class="alert alert-danger p-2">
+            <i class="eos-icons me-2">delete</i>
+            This entity is deleted.
+          </div>
+        </template>
+      </BaseLayout>
+      <Tabbing :bind-args="bindArgs" :tabs="tabs" :tabEvents="{update: onUpdate}"/>
     </template>
-    <template v-slot:actions>
-      <div v-if="entity?.deleted" class="alert alert-danger p-2">
-        <i class="eos-icons me-2">delete</i>
-        This entity is deleted.
-    </div>
-    </template>
-  </BaseLayout>
-  <Tabbing :bind-args="bindArgs" :tabs="tabs" ref="entitytabbing"
-           :tabEvents="{update: onUpdate}"/>
+  </Placeholder>
 </template>
 
-<script>
-import { markRaw } from "vue";
+<script setup>
+import {markRaw, ref, computed, watch} from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import EntityForm from "@/components/inputs/EntityForm";
 import Changes from "@/components/change_review/Changes";
 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 "@/composables/schema";
+import {useRoute} from "vue-router";
+import {api} from "@/composables/api";
 
-export default {
-  name: "Entity",
-  components: {BaseLayout, Tabbing},
-  inject: ["activeSchema"],
-  emits: ["pending-reviews"],
-  data() {
-    return {
-      entity: null,
-      tabs: [
-        {
-          name: 'Show/Edit',
-          component: markRaw(EntityForm),
-          icon: "mode_edit",
-          tooltip: "Edit/show entity details"
-        },
-        {
-          name: "Bulk Add (copy Attributes)",
-          component: markRaw(EntityBulkAdd),
-          icon: "add_circle",
-          tooltip: "Copy over entity attributes to new entities"
-        },
-        {
-          name: "Permissions",
-          component: markRaw(PermissionList),
-          icon: "security",
-          tooltip: "Manage permissions on the entity"
-        },
-        {
-          name: "History",
-          component: markRaw(Changes),
-          icon: "history",
-          tooltip: 'Change history of entity'
-        }
-      ]
-    };
-  },
-  computed: {
-    title() {
-      return this.entity?.name || this.$route.params.entitySlug || '-';
-    },
-    bindArgs() {
-      return [
-        { schema: this.activeSchema, entity: this.entity },
-        { schema: this.activeSchema, entity: this.entity },
-        { objectType: "Entity", objectId: this.entity?.id },
-        { schema: this.activeSchema, entitySlug: this.$route.params.entitySlug },
-      ]
-    },
+const {getSchema, activeSchema} = useSchema();
+const route = useRoute();
+const entity = ref(null);
+const loading = ref(true);
+const tabs = ref([
+  {
+    name: 'Show/Edit',
+    component: markRaw(EntityForm),
+    icon: "mode_edit",
+    tooltip: "Edit/show entity details"
   },
-  methods: {
-    async getEntity() {
-      if (this.$route.params.entitySlug && this.$route.params.schemaSlug) {
-        const params = {
-          schemaSlug: this.$route.params.schemaSlug,
-          entityIdOrSlug: this.$route.params.entitySlug
-        };
-        this.entity = await this.$api.getEntity(params);
-      } else {
-        this.entity = null;
-      }
-    },
-    async onUpdate(entity) {
-      if (entity) {
-        this.entity = entity;
-      }
-    }
+  {
+    name: "Bulk Add (copy Attributes)",
+    component: markRaw(EntityBulkAdd),
+    icon: "add_circle",
+    tooltip: "Copy over entity attributes to new entities"
   },
-  async activated() {
-    await this.getEntity();
+  {
+    name: "Permissions",
+    component: markRaw(PermissionList),
+    icon: "security",
+    tooltip: "Manage permissions on the entity"
   },
-  watch: {
-    entity(newValue) {
-      if (newValue?.name) {
-        document.title = newValue.name;
-      }
+  {
+    name: "History",
+    component: markRaw(Changes),
+    icon: "history",
+    tooltip: 'Change history of entity'
+  }
+]);
+
+const title = computed(() => {
+  return entity.value?.name || route.params.entitySlug || '-';
+});
+const bindArgs = computed(() => {
+  return [
+    {schema: activeSchema.value, entity: entity.value},
+    {schema: activeSchema.value, entity: entity.value},
+    {objectType: "Entity", objectId: entity.value?.id},
+    {schema: activeSchema.value, entitySlug: route.params.entitySlug},
+  ]
+});
+
+async function getEntity() {
+  if (route.params.entitySlug && route.params.schemaSlug) {
+    const params = {
+      schemaSlug: route.params.schemaSlug,
+      entityIdOrSlug: route.params.entitySlug
+    };
+    entity.value = await api.getEntity(params);
+  } else {
+    entity.value = null;
+  }
+}
+
+async function onUpdate(editEntity) {
+  if (editEntity) {
+    entity.value = editEntity;
+  }
+}
+
+watch(entity, (newValue) => {
+  if (newValue?.name) {
+    document.title = newValue.name;
+  }
+});
+watch(
+    route,
+    () => {
+      loading.value = true;
+      Promise.all([getSchema(), getEntity()])
+          .then(() => loading.value = false);
     },
-    $route: {
-      handler: "getEntity",
+    {
       immediate: true
-    },
-  }
-};
+    }
+);
 </script>
diff --git a/frontend/src/components/EntityBulkEdit.vue b/frontend/src/components/EntityBulkEdit.vue
index c5a9457..d4ff442 100644
--- a/frontend/src/components/EntityBulkEdit.vue
+++ b/frontend/src/components/EntityBulkEdit.vue
@@ -1,87 +1,85 @@
 <template>
-  <BaseLayout>
-    <template v-slot:additional_breadcrumbs>
-      <li class="breadcrumb-item active">
-        <router-link :to="{name: 'schema-view', params: {schemaSlug: activeSchema?.slug || 'n-a'}}">
-          {{ activeSchema?.name || 'n/a' }}
-        </router-link>
-      </li>
-      <li class="breadcrumb-item active">Bulk Editor</li>
-    </template>
-  </BaseLayout>
   <Placeholder :big="true" :loading="loading">
     <template v-slot:content>
+      <BaseLayout>
+        <template v-slot:additional_breadcrumbs>
+          <li class="breadcrumb-item active">
+            <router-link :to="{name: 'schema-view', params: {schemaSlug: activeSchema?.slug || 'n-a'}}">
+              {{ activeSchema?.name || 'n/a' }}
+            </router-link>
+          </li>
+          <li class="breadcrumb-item active">Bulk Editor</li>
+        </template>
+      </BaseLayout>
       <div v-for="e of entities" :key="e.id" class="border mb-3 p-2">
         <EntityForm :entity="e" :schema="activeSchema"
-                    :batch-mode="true"  :ref="`e_form_${e.id}`" v-on:save-all="saveAll" />
+                    :batch-mode="true" :ref="el => { entityFormRefs[`e_form_${e.id}`] = el }"
+                    v-on:save-all="saveAll"/>
       </div>
     </template>
   </Placeholder>
 </template>
 
-<script>
+<script setup>
 import BaseLayout from "@/components/layout/BaseLayout";
 import EntityForm from "@/components/inputs/EntityForm";
-import Placeholder from "@/components/layout/Placeholder.vue";
+import Placeholder from "@/components/layout/Placeholder";
+import {ref, computed, watch} from "vue";
+import {useSchema} from "@/composables/schema";
+import {useRoute} from "vue-router";
+import {api} from "@/composables/api";
+import {alertStore} from "@/composables/alert";
 
-export default {
-  name: "EntityBulkEdit",
-  components: {BaseLayout, EntityForm, Placeholder},
-  inject: ['activeSchema'],
-  data() {
-    return {
-      entities: [],
-      loading: true
-    }
-  },
-  computed: {
-    entityIds() {
-      return this.entities.map(x => x.id);
+const {getSchema, activeSchema} = useSchema();
+const route = useRoute();
+const entities = ref([]);
+const loading = ref(true);
+const entityFormRefs = ref([]);
+
+const entityIds = computed(() => {
+  return entities.value.map(x => x.id);
+});
+
+async function getEntityData() {
+  const schemaSlug = route.params.schemaSlug;
+  if (!schemaSlug) {
+    return
+  }
+
+  const queryIds = (route.query?.entity || []);
+  entities.value = entities.value.filter(x => queryIds.includes(x.id));
+  const promises = queryIds
+      .map(x => parseInt(x))
+      .filter(x => !entityIds.value.includes(x))
+      .map(x => api.getEntity({schemaSlug: schemaSlug, entityIdOrSlug: x}));
+  Promise.all(promises).then(x => {
+    entities.value = entities.value.concat(x);
+  });
+}
+
+async function saveAll() {
+  const promises = Object.entries(entityFormRefs.value)
+      .map(x => x[1].updateEntity());
+  Promise.all(promises).then(x => {
+    if (x.every(y => y === null)) {
+      alertStore.push(
+          "warning",
+          "None of the entities were changed. Therefore no changes were sent to server."
+      );
     }
-  },
-  methods: {
-    async getEntityData() {
-      const schemaSlug = this.$route.params.schemaSlug;
-      if (!schemaSlug) {
-        return
-      }
+  });
+}
 
-      const queryIds = (this.$route.query?.entity || []);
-      this.entities = this.entities.filter(x => queryIds.includes(x.id));
-      this.loading = true;
-      const promises = queryIds
-          .map(x => parseInt(x))
-          .filter(x => !this.entityIds.includes(x))
-          .map(x => this.$api.getEntity({schemaSlug: schemaSlug, entityIdOrSlug: x}));
-      Promise.all(promises).then(x => {
-        this.entities = this.entities.concat(x);
-        this.loading = false;
-      })
+watch(
+    route,
+    () => {
+      loading.value = true;
+      Promise.all([getSchema(), getEntityData()])
+          .then(() => loading.value = false);
     },
-    async saveAll() {
-      const promises = Object.entries(this.$refs)
-          .filter(x => x[0].startsWith("e_form_"))
-          .map(x => x[1][0].updateEntity());
-      Promise.all(promises).then(x => {
-        if (x.every(y => y === null)) {
-          this.$alerts.push(
-              "warning",
-              "None of the entities were changed. Therefore no changes were sent to server."
-          );
-        }
-      });
-    }
-  },
-  watch: {
-    $route: {
-      handler: "getEntityData",
+    {
       immediate: true,
       deep: true
-    },
-  }
-}
+    }
+);
 </script>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/components/Schema.vue b/frontend/src/components/Schema.vue
index 7944489..53a06d7 100644
--- a/frontend/src/components/Schema.vue
+++ b/frontend/src/components/Schema.vue
@@ -1,22 +1,25 @@
 <template>
-  <BaseLayout>
-    <template v-slot:additional_breadcrumbs>
-      <li class="breadcrumb-item active">{{ title }}</li>
+  <Placeholder :big="true" :loading="loading">
+    <template v-slot:content>
+      <BaseLayout>
+        <template v-slot:additional_breadcrumbs>
+          <li class="breadcrumb-item active">{{ title }}</li>
+        </template>
+        <template v-slot:actions>
+          <div v-if="activeSchema?.deleted" class="alert alert-danger p-2">
+            <i class="eos-icons me-2">delete</i>
+            This schema is deleted.
+          </div>
+        </template>
+      </BaseLayout>
+      <Tabbing :bind-args="bindArgs" :tabs="tabs"
+               :tabEvents="{updateSchema: onSchemaUpdate}"/>
     </template>
-    <template v-slot:actions>
-      <div v-if="activeSchema?.deleted" class="alert alert-danger p-2">
-        <i class="eos-icons me-2">delete</i>
-        This schema is deleted.
-    </div>
-    </template>
-  </BaseLayout>
-
-  <Tabbing :bind-args="bindArgs" :tabs="tabs" ref="schematabbing"/>
-
+  </Placeholder>
 </template>
 
-<script>
-import { markRaw } from "vue";
+<script setup>
+import {markRaw, ref, computed, watch, onUpdated} from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import EntityList from "@/components/EntityList";
 import EntityForm from "@/components/inputs/EntityForm";
@@ -24,69 +27,80 @@ import SchemaEdit from "@/components/SchemaEdit";
 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 "@/composables/schema";
+import {useRoute} from "vue-router";
 
-export default {
-  name: "Schema",
-  components: {BaseLayout, Tabbing},
-  data: function () {
-    return {
-      tabs: [
-        {
-          name: "Entities",
-          component: markRaw(EntityList),
-          icon: "table_view",
-          tooltip: "Show entities"
-        },
-        {
-          name: "Edit / Show",
-          component: markRaw(SchemaEdit),
-          icon: "mode_edit",
-          tooltip: "Edit/Show schema structure"
-        },
-        {
-          name: "Add Entity",
-          component: markRaw(EntityForm),
-          icon: 'add_circle',
-          tooltip: 'Add new entity'
-        },
-        {
-          name: "Permissions",
-          component: markRaw(PermissionList),
-          icon: "security",
-          tooltip: "Manage permissions on the schema"
-        },
-        {
-          name: "History",
-          component: markRaw(Changes),
-          icon: 'history',
-          tooltip: 'Change history of schema'
-        }
-      ],
-    }
+const {getSchema, activeSchema} = useSchema();
+const route = useRoute();
+const loading = ref(true);
+const tabs = ref([
+  {
+    name: "Entities",
+    component: markRaw(EntityList),
+    icon: "table_view",
+    tooltip: "Show entities"
   },
-  inject: ['activeSchema'],
-  computed: {
-    bindArgs() {
-      return [
-        { schema: this.activeSchema, advancedControls: true },
-        { schema: this.activeSchema },
-        { schema: this.activeSchema },
-        { objectType: "Schema", objectId: this.activeSchema?.id },
-        { schema: this.activeSchema },
-      ]
-    },
-    title() {
-      try {
-        return this.activeSchema.name;
-      } catch (e) {
-        return "n/a";
-      }
-    }
+  {
+    name: "Edit / Show",
+    component: markRaw(SchemaEdit),
+    icon: "mode_edit",
+    tooltip: "Edit/Show schema structure"
+  },
+  {
+    name: "Add Entity",
+    component: markRaw(EntityForm),
+    icon: 'add_circle',
+    tooltip: 'Add new entity'
   },
-  updated() {
-    if (this.activeSchema?.name) {
-        document.title = this.activeSchema.name;
-      }
+  {
+    name: "Permissions",
+    component: markRaw(PermissionList),
+    icon: "security",
+    tooltip: "Manage permissions on the schema"
+  },
+  {
+    name: "History",
+    component: markRaw(Changes),
+    icon: 'history',
+    tooltip: 'Change history of schema'
+  }
+]);
+
+const bindArgs = computed(() => {
+  return [
+    {schema: activeSchema.value, advancedControls: true},
+    {schema: activeSchema.value},
+    {schema: activeSchema.value},
+    {objectType: "Schema", objectId: activeSchema.value?.id},
+    {schema: activeSchema.value},
+  ]
+});
+const title = computed(() => {
+  return activeSchema.value?.name || "n/a";
+});
+
+onUpdated(() => {
+  if (activeSchema.value?.name) {
+    document.title = activeSchema.value.name;
   }
+});
+
+function init() {
+  loading.value = true;
+  getSchema().then(() => loading.value = false);
+}
+
+function onSchemaUpdate() {
+  init();
 }
-</script>
+
+watch(
+    route,
+    () => init(),
+    {
+      immediate: true
+    }
+);
+
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/SchemaEdit.vue b/frontend/src/components/SchemaEdit.vue
index 9cd31ed..9100743 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: ["updateSchema"],
   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('updateSchema');
       }
     },
   },
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/composables/schema.js b/frontend/src/composables/schema.js
new file mode 100644
index 0000000..eee5449
--- /dev/null
+++ b/frontend/src/composables/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