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 { shallowRef } from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import EntityList from "@/components/EntityList";
 import EntityForm from "@/components/inputs/EntityForm";
@@ -51,7 +51,7 @@ export default {
         },
         {
           name: "Permissions",
-          component: PermissionList,
+          component: shallowRef(PermissionList),
           icon: "security",
           tooltip: "Manage permissions on the 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/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>

frontend/src/components/auth/GroupForm.vue

@@ -0,0 +1,66 @@
+<template>
+  <TextInput label="Name" :required="true" v-model="myGroup.name" :args="{id: 'name'}"/>
+  <DropdownSelect label="Parent" :required="false" v-model="myGroup.parent_id"
+                :args="{id: 'parent_id'}" :options="parentOptions"/>
+  <div class="d-grid gap-2 mt-1" v-if="showSaveButton">
+    <button type="button" class="btn btn-primary p-2" @click="onSave">
+      <i class="eos-icons me-1">save</i>
+      Save changes
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import _ from "lodash";
+import TextInput from "@/components/inputs/TextInput";
+import DropdownSelect from "@/components/inputs/DropdownSelect";
+import { useAuthStore } from "@/store/auth";
+
+const emit = defineEmits(["update"]);
+const props = defineProps({
+  group: {
+    type: Object,
+    required: false
+  },
+  showSaveButton: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+});
+
+const { groups, createGroup, updateGroup } = useAuthStore();
+
+const myGroup = ref({name: '', parent_id: null, id: null});
+if (props.group) {
+  myGroup.value = _.cloneDeep(props.group);
+}
+defineExpose({ myGroup });
+
+watch(() => props.group, () => {
+  if(props.group.id !== myGroup.value.id) {
+    myGroup.value = _.cloneDeep(props.group);
+  }
+})
+
+const parentOptions = computed(() => {
+  return Object.values(groups.value || {}).map(g => {return {text: g.name, value: g.id}});
+});
+
+async function onSave() {
+  const groupData = {
+    name: myGroup.value.name,
+    parent_id: myGroup.value.parent_id
+  }
+  let response;
+  if (myGroup.value?.id) {
+    await updateGroup(myGroup.value.id, groupData);
+  } else {
+    await createGroup(groupData);
+  }
+
+  myGroup.value = {name: '', parent_id: null, id: null};
+  emit("update", response);
+}
+</script>