AIMAAS #197: refactor users/groups state management

frontend/src/components/Entity.vue

@@ -15,12 +15,12 @@
     </div>
     </template>
   </BaseLayout>
-  <Tabbing :bind-args="currentProperties" :tabs="tabs" ref="entitytabbing"
+  <Tabbing :bind-args="bindArgs" :tabs="tabs" ref="entitytabbing"
            :tabEvents="{update: onUpdate}"/>
 </template>
 
 <script>
-import {shallowRef} from "vue";
+import { markRaw } from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import EntityForm from "@/components/inputs/EntityForm";
 import Changes from "@/components/change_review/Changes";
@@ -38,19 +38,19 @@ export default {
       tabs: [
         {
           name: 'Show/Edit',
-          component: shallowRef(EntityForm),
+          component: markRaw(EntityForm),
           icon: "mode_edit",
           tooltip: "Edit/show entity details"
         },
         {
           name: "Permissions",
-          component: PermissionList,
+          component: markRaw(PermissionList),
           icon: "security",
           tooltip: "Manage permissions on the entity"
         },
         {
           name: "History",
-          component: shallowRef(Changes),
+          component: markRaw(Changes),
           icon: "history",
           tooltip: 'Change history of entity'
         }
@@ -61,23 +61,13 @@ export default {
     title() {
       return this.entity?.name || this.$route.params.entitySlug || '-';
     },
-    currentProperties() {
-      const currIndex = this.$refs.entitytabbing?.currentTab || 0;
-      if (this.tabs[currIndex].component.name === "PermissionList") {
-        return {objectType: "Entity", objectId: this.entity?.id};
-      }
-      let props = {schema: this.activeSchema};
-
-      if (this.tabs[currIndex].component.name === "Changes") {
-        props.entitySlug = this.$route.params.entitySlug;
-      }
-
-      if (this.tabs[currIndex].component.name === "EntityForm") {
-        props.entity = this.entity;
-      }
-
-      return props;
-    }
+    bindArgs() {
+      return [
+        { schema: this.activeSchema, entity: this.entity },
+        { objectType: "Entity", objectId: this.entity?.id },
+        { schema: this.activeSchema, entitySlug: this.$route.params.entitySlug },
+      ]
+    },
   },
   methods: {
     async updateEntity() {

frontend/src/components/EntityList.vue

@@ -51,8 +51,6 @@
 </template>
 
 <script>
-import {computed} from "vue";
-
 import ConfirmButton from "@/components/inputs/ConfirmButton";
 import Pagination from "./layout/Pagination.vue";
 import EntityListTable from "@/components/EntityListTable";
@@ -79,13 +77,13 @@ export default {
     this.getEntities({resetPage: false});
   },
   computed: {
-    pages: computed(() => {
+    pages() {
       try {
         return this.$refs.paginator.pageCount;
       } catch (e) {
         return 0;
       }
-    }),
+    },
     numSelected() {
       return this.selected.length;
     },

frontend/src/components/Schema.vue

@@ -11,12 +11,12 @@
     </template>
   </BaseLayout>
 
-  <Tabbing :bind-args="currentProperties" :tabs="tabs" ref="schematabbing"/>
+  <Tabbing :bind-args="bindArgs" :tabs="tabs" ref="schematabbing"/>
 
 </template>
 
 <script>
-import {shallowRef} from "vue";
+import { markRaw } from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import EntityList from "@/components/EntityList";
 import EntityForm from "@/components/inputs/EntityForm";
@@ -33,31 +33,31 @@ export default {
       tabs: [
         {
           name: "Entities",
-          component: shallowRef(EntityList),
+          component: markRaw(EntityList),
           icon: "table_view",
           tooltip: "Show entities"
         },
         {
           name: "Edit / Show",
-          component: shallowRef(SchemaEdit),
+          component: markRaw(SchemaEdit),
           icon: "mode_edit",
           tooltip: "Edit/Show schema structure"
         },
         {
           name: "Add Entity",
-          component: shallowRef(EntityForm),
+          component: markRaw(EntityForm),
           icon: 'add_circle',
           tooltip: 'Add new entity'
         },
         {
           name: "Permissions",
-          component: PermissionList,
+          component: markRaw(PermissionList),
           icon: "security",
           tooltip: "Manage permissions on the schema"
         },
         {
           name: "History",
-          component: shallowRef(Changes),
+          component: markRaw(Changes),
           icon: 'history',
           tooltip: 'Change history of schema'
         }
@@ -66,18 +66,14 @@ export default {
   },
   inject: ['activeSchema'],
   computed: {
-    currentProperties() {
-      const currIndex = this.$refs.schematabbing?.currentTab || 0;
-      if (this.tabs[currIndex].component.name === "PermissionList") {
-        return {objectType: "Schema", objectId: this.activeSchema.id};
-      }
-
-      const props = {schema: this.activeSchema};
-
-      if (this.tabs[currIndex].component.name === "EntityList") {
-        props.advancedControls = true;
-      }
-      return props;
+    bindArgs() {
+      return [
+        { schema: this.activeSchema, advancedControls: true },
+        { schema: this.activeSchema },
+        { schema: this.activeSchema },
+        { objectType: "Schema", objectId: this.activeSchema?.id },
+        { schema: this.activeSchema },
+      ]
     },
     title() {
       try {

frontend/src/components/SearchPanel.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script>
-import {shallowRef} from "vue";
+import { markRaw } from "vue";
 import {TYPE_INPUT_MAP} from "@/utils";
 import IntegerInput from "@/components/inputs/IntegerInput.vue";
 import FloatInput from "@/components/inputs/FloatInput.vue";
@@ -148,7 +148,7 @@ export default {
         operator: null,
         value: null,
         operatorOptions: [],
-        component: shallowRef(TextInput)
+        component: markRaw(TextInput)
       });
     },
     clearFilters() {

frontend/src/components/auth/AuthManager.vue

@@ -4,63 +4,28 @@
       <li class="breadcrumb-item active">User Management</li>
     </template>
   </BaseLayout>
-
-  <Tabbing :bind-args="{}" :tabs="tabs" ref="admtabbing"/>
+  <Tabbing :tabs="tabs" ref="admtabbing" />
 </template>
 
-<script>
-import {computed, shallowRef} from "vue";
+<script setup>
+import { markRaw } from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import GroupManager from "@/components/auth/GroupManager";
 import UserManager from "@/components/auth/UserManager";
 import Tabbing from "@/components/layout/Tabbing";
-import {loadGroupData, loadUserData} from "@/composables/auth";
 
-export default {
-  name: "AuthManager",
-  components: {Tabbing, BaseLayout},
-  data() {
-    return {
-      groups: {},
-      users: {},
-      tree: {},
-      activeGroup: null,
-      tabs: [
-        {
-          name: "Groups",
-          component: shallowRef(GroupManager),
-          icon: "groups",
-          tooltip: "Manage groups"
-        },
-        {
-          name: "Users",
-          component: shallowRef(UserManager),
-          icon: "person",
-          tooltip: "Manage users"
-        }
-      ]
-    };
-  },
-  provide() {
-    return {
-      groups: computed(() => this.groups),
-      users: computed(() => this.users),
-      tree: computed(() => this.tree)
-    }
+const tabs = [
+  {
+    name: "Groups",
+    component: markRaw(GroupManager),
+    icon: "groups",
+    tooltip: "Manage groups",
   },
-  async activated() {
-    await this.loadData();
+  {
+    name: "Users",
+    component: markRaw(UserManager),
+    icon: "person",
+    tooltip: "Manage users",
   },
-  methods: {
-    async loadData() {
-      [this.groups, this.tree] = await loadGroupData(this.$api);
-      this.users = await loadUserData(this.$api);
-    },
-
-  }
-}
+];
 </script>
-
-<style scoped>
-
-</style>