Improve admin panel item loading and styling

src/store/admin.js

@@ -1,45 +1,66 @@
 import { computed } from 'vue';
 import { defineStore } from 'pinia';
 import { useCollection } from 'vuefire';
-import { collection, orderBy, query, where } from 'firebase/firestore';
+import { collection, orderBy, query } from 'firebase/firestore';
 import { db } from '@/config/firebaseConfig';
 import { useAuthStore } from '@/store/auth';
-import { useTrackerStore } from '@/store/tracker';
 
 export const useAdminStore = defineStore('admin', () => {
   const authStore = useAuthStore();
-  const trackerStore = useTrackerStore();
 
   // Users
   const users = useCollection(
     computed(
       () =>
-        authStore.isLoggedIn &&
-        query(collection(db, 'users'), orderBy('displayName', 'asc'))
+        authStore.isAdmin && query(collection(db, 'users'), orderBy('displayName', 'asc'))
     ),
     { ssrKey: 'users' }
   );
 
   // Items
-  const organizations = computed(() => trackerStore.organizations);
+  const itemQuery = (collectionPath) =>
+    authStore.isAdmin &&
+    query(
+      collection(db, collectionPath),
+      orderBy('archived', 'asc'),
+      orderBy('name', 'asc')
+    );
 
-  const departments = useCollection(
-    computed(
-      () =>
-        authStore.isLoggedIn &&
-        query(
-          collection(db, 'departments'),
-          where('archived', '==', false),
-          orderBy('name', 'asc')
-        )
-    ),
-    { ssrKey: 'departments' }
+  const isItemAdmin = (item) => {
+    if (authStore.isSuperAdmin) {
+      return true;
+    }
+    if (item.organization) {
+      return authStore.user.admin.includes(item.organization.split('/')[1]);
+    }
+    return authStore.user.admin.includes(item.id);
+  };
+
+  const filterItems = (items) => items.filter((i) => isItemAdmin(i));
+
+  const _organizations = useCollection(
+    computed(() => itemQuery('organizations')),
+    { maxRefDepth: 0, ssrKey: 'organizations' }
+  );
+  const organizations = computed(() => filterItems(_organizations.value));
+
+  const _departments = useCollection(
+    computed(() => itemQuery('departments')),
+    { maxRefDepth: 0, ssrKey: 'departments' }
+  );
+  const departments = computed(() => filterItems(_departments.value));
+
+  const _products = useCollection(
+    computed(() => itemQuery('products')),
+    { maxRefDepth: 0, ssrKey: 'products' }
   );
+  const products = computed(() => filterItems(_products.value));
 
   return {
     users,
     organizations,
     departments,
+    products,
   };
 });
 

src/views/Admin/CreateDepartment.vue

@@ -26,7 +26,7 @@ const breadcrumbs = computed(() => [
 
 const organizationOptions = computed(() =>
   organizations.value
-    .filter((o) => isSuperAdmin.value || user.value.admin.includes(o.id))
+    .filter((o) => !o.archived && (isSuperAdmin.value || user.value.admin.includes(o.id)))
     .map(({ id, name }) => ({ id, name }))
 );
 

src/views/Admin/CreateProduct.vue

@@ -26,7 +26,7 @@ const breadcrumbs = computed(() => [
 
 const departmentOptions = computed(() =>
   departments.value
-    .filter((o) => isSuperAdmin.value || user.value.admin.includes(o.id))
+    .filter((d) => !d.archived && (isSuperAdmin.value || user.value.admin.includes(d.id)))
     .map(({ id, name, organization }) => ({ id, name, organization_id: organization.id }))
 );
 

src/views/Admin/components/AddUsers.vue

@@ -38,10 +38,14 @@ async function save() {
 </script>
 
 <template>
-  <div class="p-size-16">
-    <slot name="back"></slot>
+  <slot name="back"></slot>
 
-    <FormSection class="mt-size-24">
+  <div class="add-users mt-size-16">
+    <h2 class="pkt-txt-22 mb-size-16">
+      {{ $t('admin.users.registerUsersButton') }}
+    </h2>
+
+    <FormSection>
       <FormComponent
         v-model="emails"
         input-type="textarea"
@@ -61,3 +65,10 @@ async function save() {
     </FormSection>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.add-users {
+  padding: 1rem;
+  background: var(--color-gray-light);
+}
+</style>

src/views/Admin/components/AdminAccessRequests.vue

@@ -53,16 +53,16 @@ function rejectRequest(request) {
           <PktButton
             :disabled="loading"
             skin="secondary"
-            data-cy="request-accept"
-            @onClick="acceptRequest(request)"
+            size="small"
+            @on-click="acceptRequest(request)"
           >
             {{ $t('btn.acceptRequest') }}
           </PktButton>
           <PktButton
             :disabled="loading"
             skin="secondary"
-            data-cy="request-reject"
-            @onClick="rejectRequest(request)"
+            size="small"
+            @on-click="rejectRequest(request)"
           >
             {{ $t('btn.rejectRequest') }}
           </PktButton>
@@ -73,15 +73,21 @@ function rejectRequest(request) {
 </template>
 
 <style lang="scss" scoped>
-.access-requests__list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin: 0 0 1.5rem;
-}
+.access-requests {
+  :deep(.pkt-alert__title) {
+    word-break: break-all;
+  }
 
-.access-requests__actions {
-  display: flex;
-  gap: 0.5rem;
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 0 0 1.5rem;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.5rem;
+  }
 }
 </style>