Skip to content

Commit

Permalink
AIMAAS #197: refactor users/groups state management
Browse files Browse the repository at this point in the history
  • Loading branch information
jonas-brr committed Mar 27, 2024
1 parent 914bc16 commit 28a588d
Show file tree
Hide file tree
Showing 21 changed files with 1,564 additions and 1,392 deletions.
34 changes: 12 additions & 22 deletions frontend/src/components/Entity.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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'
}
Expand All @@ -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() {
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/components/EntityList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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;
},
Expand Down
26 changes: 11 additions & 15 deletions frontend/src/components/Schema.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -51,7 +51,7 @@ export default {
},
{
name: "Permissions",
component: PermissionList,
component: shallowRef(PermissionList),
icon: "security",
tooltip: "Manage permissions on the schema"
},
Expand All @@ -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 {
Expand Down
65 changes: 15 additions & 50 deletions frontend/src/components/auth/AuthManager.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
79 changes: 0 additions & 79 deletions frontend/src/components/auth/GroupEdit.vue

This file was deleted.

66 changes: 66 additions & 0 deletions frontend/src/components/auth/GroupForm.vue
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 28a588d

Please sign in to comment.