Bugfixes for attributes of type "reference"

* Load and show referenced entities in entity lists (fixes #81) * Load the selction dialog in the edit form (fixes #79)
SUSE · Oct 19, 2022 · 55ab659 · 55ab659
1 parent 8af85e3
commit 55ab659
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 17 deletions.
diff --git a/frontend/src/components/EntityList.vue b/frontend/src/components/EntityList.vue
@@ -65,6 +65,18 @@ export default {
       if (oldPage !== newPage) {
         this.getEntities({resetPage: false});
       }
+    },
+    'schema': {
+      async handler(newValue, oldValue) {
+        try {
+          if (newValue !== oldValue) {
+            await this.onUpdate();
+          }
+        } catch (e) {
+          console.error(e)
+        }
+      },
+      immediate: true
     }
   },
   methods: {
@@ -84,7 +96,7 @@ export default {
       }
       const response = await this.$api.getEntities({
         schemaSlug: this.schema.slug,
-        size: this.$refs.paginator.pageSize,
+        size: this.$refs.paginator?.pageSize || 10,
         page: this.currentPage,
         filters: this.filters,
         orderBy: this.orderBy,
@@ -120,12 +132,6 @@ export default {
       Promise.all(promises).then(() => this.getEntities({resetPage: true}));
     }
   },
-  async activated() {
-    await this.getEntities({resetPage: true}).then(() => null);
-  },
-  created() {
-    this.$watch("schema", this.onUpdate);
-  },
   data() {
     return {
       entities: [],
@@ -140,4 +146,3 @@ export default {
   }
 };
 </script>
-
diff --git a/frontend/src/components/RefEntity.vue b/frontend/src/components/RefEntity.vue
@@ -36,14 +36,35 @@ export default {
       entity: null
     }
   },
-  async activated() {
-    if (this.entityId) {
-      this.loading = true;
-      const params = {schemaSlug: this.schemaSlug, entityIdOrSlug: this.entityId};
-      this.entity = await this.$api.getEntity(params);
-      this.loading = false;
-    } else {
-      this.loading = false;
+  computed: {
+    schemaAndEntity() {
+      if (this.schemaSlug && this.entityId) {
+        return {schema: this.schemaSlug, entity: this.entityId};
+      }
+      return null;
+    }
+  },
+  methods: {
+    async load() {
+      if (this.entityId) {
+        this.loading = true;
+        const params = {schemaSlug: this.schemaSlug, entityIdOrSlug: this.entityId};
+        this.entity = await this.$api.getEntity(params);
+        this.loading = false;
+      } else {
+        this.loading = false;
+      }
+    }
+  },
+  watch: {
+    "schemaAndEntity": {
+      async handler(oldValue, newValue) {
+        if (oldValue !== newValue) {
+          await this.load();
+        }
+      },
+      immediate: true,
+      deep: true
     }
   }
 }
@@ -54,4 +75,4 @@ export default {
   width: 12rem;
   max-width: 25rem;
 }
-</style>
+</style>