Filter items in admin panel depending on admin level

CHANGELOG.md

@@ -42,6 +42,8 @@ All notable changes to this project will be documented in this file. The format
   of parent measurements when switching between items.
 - The edit button for key result values is now only visible to users with the
   appropriate permissions.
+- Organizations, departments, and products in the admin panel are now filtered
+  based on the admin level of the current user.
 
 ### Security
 

src/views/Admin/CreateDepartment.vue

@@ -30,7 +30,7 @@
           :label="$t('admin.department.parentOrganisation')"
           select-label="name"
           rules="required"
-          :select-options="organizations"
+          :select-options="organizationOptions"
           data-cy="dep-parentOrg"
         />
 
@@ -86,7 +86,13 @@ export default {
   }),
 
   computed: {
-    ...mapState(['organizations', 'users']),
+    ...mapState(['organizations', 'users', 'user']),
+
+    organizationOptions() {
+      return this.user.superAdmin
+        ? this.organizations
+        : this.organizations.filter((o) => this.user.admin.includes(o.id));
+    },
   },
 
   methods: {

src/views/Admin/CreateProduct.vue

@@ -28,7 +28,7 @@
           :label="$t('admin.product.parentDepartment')"
           select-label="name"
           rules="required"
-          :select-options="departments"
+          :select-options="departmentOptions"
         />
 
         <div class="pkt-form-group">
@@ -82,7 +82,13 @@ export default {
   }),
 
   computed: {
-    ...mapState(['departments', 'users']),
+    ...mapState(['departments', 'users', 'user']),
+
+    departmentOptions() {
+      return this.user.superAdmin
+        ? this.departments
+        : this.departments.filter((d) => this.user.admin.includes(d.organization.id));
+    },
   },
 
   methods: {

src/views/Admin/components/AdminItems.vue

@@ -171,53 +171,42 @@ export default {
   },
 
   watch: {
-    showArchived: {
+    user: {
       immediate: true,
-      handler() {
-        this.$bind(
-          'organizations',
-          db
-            .collection('organizations')
-            .where('archived', 'in', [false, this.showArchived])
-            .orderBy('slug')
-        );
-        this.$bind(
-          'departments',
-          db
-            .collection('departments')
-            .where('archived', 'in', [false, this.showArchived])
-            .orderBy('slug')
-        );
-        this.$bind(
-          'products',
-          db
-            .collection('products')
-            .where('archived', 'in', [false, this.showArchived])
-            .orderBy('slug')
-        );
-      },
+      handler: 'bindItems',
+    },
+
+    showArchived: {
+      immediate: false,
+      handler: 'bindItems',
     },
 
     organizations: {
       immediate: true,
       handler() {
-        this.filteredOrgs = this.organizations;
+        this.filteredOrgs = this.user.superAdmin
+          ? this.organizations
+          : this.organizations.filter((o) => this.user.admin.includes(o.id));
         this.fuseOrgs = new Fuse(this.filteredOrgs, fuseSettings);
       },
     },
 
     departments: {
       immediate: true,
       handler() {
-        this.filteredDeps = this.departments;
+        this.filteredDeps = this.user.superAdmin
+          ? this.departments
+          : this.departments.filter((d) => this.user.admin.includes(d.organization.id));
         this.fuseDeps = new Fuse(this.filteredDeps, fuseSettings);
       },
     },
 
     products: {
       immediate: true,
       handler() {
-        this.filteredProds = this.products;
+        this.filteredProds = this.user.superAdmin
+          ? this.products
+          : this.products.filter((p) => this.user.admin.includes(p.organization.id));
         this.fuseProds = new Fuse(this.filteredProds, fuseSettings);
       },
     },
@@ -248,6 +237,19 @@ export default {
   },
 
   methods: {
+    bindItems() {
+      for (const collection of ['organizations', 'departments', 'products']) {
+        this.$bind(
+          collection,
+          db
+            .collection(collection)
+            .where('archived', 'in', [false, this.showArchived])
+            .orderBy('slug'),
+          { wait: true }
+        );
+      }
+    },
+
     itemLink(slug) {
       return {
         name: 'ItemAbout',