feat: show callout admin button for reviewers

apps/backend/src/api/dto/ContactDto.ts

@@ -163,6 +163,10 @@ export class GetContactDto extends BaseContactDto {
   @IsOptional()
   @ValidateNested({ each: true })
   tags?: GetContactTagDto[];
+
+  @IsOptional()
+  @IsBoolean()
+  isReviewer?: boolean;
 }
 
 export class UpdateContactDto extends BaseContactDto {

apps/backend/src/api/transformers/ContactTransformer.ts

@@ -1,10 +1,10 @@
 import { GetContactWith, RuleGroup } from "@beabee/beabee-common";
 import { TransformPlainToInstance } from "class-transformer";
-import { SelectQueryBuilder } from "typeorm";
+import { In, SelectQueryBuilder } from "typeorm";
 
-import { createQueryBuilder } from "@beabee/core/database";
+import { createQueryBuilder, getRepository } from "@beabee/core/database";
 import PaymentService from "@beabee/core/services/PaymentService";
-import { Contact, ContactRole } from "@beabee/core/models";
+import { CalloutReviewer, Contact, ContactRole } from "@beabee/core/models";
 
 import {
   GetContactDto,
@@ -80,6 +80,9 @@ class ContactTransformer extends BaseContactTransformer<
       }),
       ...(opts?.with?.includes(GetContactWith.Tags) && {
         tags: contact.tags.map((ct) => contactTagTransformer.convert(ct.tag))
+      }),
+      ...(opts?.with?.includes(GetContactWith.IsReviewer) && {
+        isReviewer: !!contact.isReviewer
       })
     };
   }
@@ -169,6 +172,26 @@ class ContactTransformer extends BaseContactTransformer<
         // Load tags after to ensure offset/limit work
         await contactTagTransformer.loadEntityTags(contacts);
       }
+
+      // Check if the user is a reviewer
+      // This is a bit hacky at the moment as it hard codes the logic of admins
+      // always being reviewers, this should be revisted in the future
+      if (query.with?.includes(GetContactWith.IsReviewer)) {
+        // Optimise to not run the query for non-admins
+        const nonAdmins = contacts.filter((c) => !c.hasRole("admin"));
+        const reviewers =
+          nonAdmins.length > 0
+            ? await getRepository(CalloutReviewer).find({
+                where: { contactId: In(nonAdmins.map((c) => c.id)) },
+                select: { contactId: true }
+              })
+            : [];
+        for (const contact of contacts) {
+          contact.isReviewer =
+            contact.hasRole("admin") ||
+            reviewers.some((r) => r.contactId === contact.id);
+        }
+      }
     }
   }
 

apps/frontend/src/layouts/menu/TheMenuList.vue

@@ -6,14 +6,14 @@
       :section="section"
       :is-first="index === 0"
     />
-    <div v-if="canAdmin" class="mt-2 bg-primary-10 py-2">
+    <div v-if="adminMenuVisible" class="mt-2 bg-primary-10 py-2">
       <TheMenuListSection
         v-for="(section, index) in adminMenu"
         :key="index"
         :section="section"
         :is-first="index === 0"
       />
-      <div v-if="!env.cnrMode" class="px-2 lg:px-4">
+      <div v-if="canAdmin && !env.cnrMode" class="px-2 lg:px-4">
         <div class="my-2 border-t border-primary-40" />
         <a href="/members" class="block text-body-80">
           <TheMenuListItem
@@ -42,11 +42,12 @@ import { canAdmin } from '../../store';
 import { logout } from '../../utils/api/auth';
 import env from '../../env';
 
-import { menu, adminMenu } from './menu-list';
+import { adminMenu, menu } from './menu-list';
 import {
   faSignInAlt,
   faWindowRestore,
 } from '@fortawesome/free-solid-svg-icons';
+import { computed } from 'vue';
 
 const { t } = useI18n();
 
@@ -55,4 +56,8 @@ const doLogout = () => {
   logout();
   router.push('/auth/login');
 };
+
+const adminMenuVisible = computed(() =>
+  adminMenu.value.some((section) => section.items.some((item) => item.visible))
+);
 </script>

apps/frontend/src/layouts/menu/TheMenuListSection.vue

@@ -1,12 +1,14 @@
 <template>
-  <nav class="px-2 text-body-80 lg:px-4">
-    <div v-if="!isFirst" class="my-2 border-t border-primary-40" />
+  <nav v-if="isVisible" class="px-2 text-body-80 lg:px-4">
     <div v-if="section.title" class="pb-2 md:hidden lg:inline-block">
       {{ t(section.title) }}
     </div>
-    <ul class="flex flex-col">
+    <ul
+      class="flex flex-col"
+      :class="!isFirst && 'my-2 border-t border-primary-40'"
+    >
       <template v-for="item in section.items" :key="item.href">
-        <li>
+        <li v-if="item.visible">
           <router-link :to="item.href">
             <TheMenuListItem
               :icon="item.icon"
@@ -28,13 +30,17 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import type { MenuSection } from './menu-list.interface';
 import TheMenuListItem from './TheMenuListItem.vue';
+import { computed } from 'vue';
 
-defineProps<{
+const props = defineProps<{
   section: MenuSection;
   isFirst: boolean;
 }>();
 
 const { t } = useI18n();
-
 const route = useRoute();
+
+const isVisible = computed(() =>
+  props.section.items.some((item) => item.visible)
+);
 </script>

apps/frontend/src/layouts/menu/menu-list.interface.ts

@@ -9,5 +9,6 @@ export interface MenuItem {
   title: string;
   href: string;
   icon: IconDefinition;
+  visible: boolean;
   isActive?: RegExp;
 }

apps/frontend/src/layouts/menu/menu-list.ts

@@ -13,134 +13,95 @@ import {
   faUsers,
 } from '@fortawesome/free-solid-svg-icons';
 import env from '@env';
+import { canAdmin, currentUser } from '@store/currentUser';
 
-export const menu = computed<MenuSection[]>(() =>
-  env.cnrMode
-    ? [
-        {
-          items: [
-            {
-              title: 'menu.account',
-              href: '/profile/account',
-              icon: faAddressCard,
-            },
-          ],
-        },
-      ]
-    : [
-        {
-          items: [
-            {
-              title: 'menu.home',
-              href: '/profile',
-              icon: faHouse,
-            },
-            {
-              title: 'menu.callouts',
-              href: '/callouts',
-              icon: faBullhorn,
-              isActive: /^\/callouts/,
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              title: 'menu.account',
-              href: '/profile/account',
-              icon: faAddressCard,
-            },
-            ...(generalContent.value.hideContribution
-              ? []
-              : [
-                  {
-                    title: 'menu.contribution',
-                    href: '/profile/contribution',
-                    icon: faCreditCard,
-                  },
-                ]),
-          ],
-        },
-      ]
-);
+export const menu = computed<MenuSection[]>(() => [
+  {
+    items: [
+      {
+        title: 'menu.home',
+        href: '/profile',
+        icon: faHouse,
+        visible: !env.cnrMode,
+      },
+      {
+        title: 'menu.callouts',
+        href: '/callouts',
+        icon: faBullhorn,
+        isActive: /^\/callouts/,
+        visible: !env.cnrMode,
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        title: 'menu.account',
+        href: '/profile/account',
+        icon: faAddressCard,
+        visible: !!currentUser.value,
+      },
+      {
+        title: 'menu.contribution',
+        href: '/profile/contribution',
+        icon: faCreditCard,
+        visible:
+          !!currentUser.value &&
+          !generalContent.value.hideContribution &&
+          !env.cnrMode,
+      },
+    ],
+  },
+]);
 
-export const adminMenu: MenuSection[] = env.cnrMode
-  ? [
+export const adminMenu = computed<MenuSection[]>(() => [
+  {
+    title: 'menu.admin',
+    items: [
+      {
+        title: 'menu.dashboard',
+        href: '/admin',
+        icon: faChartLine,
+        visible: canAdmin.value,
+      },
+      {
+        title: 'menu.contacts',
+        href: '/admin/contacts',
+        icon: faUsers,
+        isActive: /^\/admin\/contacts.*/,
+        visible: canAdmin.value,
+      },
       {
-        title: 'menu.admin',
-        items: [
-          {
-            title: 'menu.dashboard',
-            href: '/admin',
-            icon: faChartLine,
-          },
-          {
-            title: 'menu.contacts',
-            href: '/admin/contacts',
-            icon: faUsers,
-            isActive: /^\/admin\/contacts.*/,
-          },
-          {
-            title: 'menu.callouts',
-            href: '/admin/callouts',
-            icon: faBullhorn,
-            isActive: /^\/admin\/callouts.*/,
-          },
-        ],
+        title: 'menu.callouts',
+        href: '/admin/callouts',
+        icon: faBullhorn,
+        isActive: /^\/admin\/callouts.*/,
+        visible: canAdmin.value || !!currentUser.value?.isReviewer,
       },
       {
-        items: [
-          {
-            title: 'menu.adminSettings',
-            href: '/admin/settings',
-            icon: faCog,
-            isActive: /^\/admin\/settings.*/,
-          },
-        ],
+        title: 'menu.notices',
+        href: '/admin/notices',
+        icon: faSignHanging,
+        isActive: /^\/admin\/notices.*/,
+        visible: canAdmin.value && !env.cnrMode,
       },
-    ]
-  : [
+    ],
+  },
+  {
+    items: [
       {
-        title: 'menu.admin',
-        items: [
-          {
-            title: 'menu.dashboard',
-            href: '/admin',
-            icon: faChartLine,
-          },
-          {
-            title: 'menu.contacts',
-            href: '/admin/contacts',
-            icon: faUsers,
-            isActive: /^\/admin\/contacts.*/,
-          },
-          {
-            title: 'menu.callouts',
-            href: '/admin/callouts',
-            icon: faBullhorn,
-            isActive: /^\/admin\/callouts.*/,
-          },
-          {
-            title: 'menu.notices',
-            href: '/admin/notices',
-            icon: faSignHanging,
-            isActive: /^\/admin\/notices.*/,
-          },
-        ],
+        title: 'menu.membershipBuilder',
+        href: '/admin/membership-builder',
+        icon: faHandsHelping,
+        visible: canAdmin.value && !env.cnrMode,
       },
       {
-        items: [
-          {
-            title: 'menu.membershipBuilder',
-            href: '/admin/membership-builder',
-            icon: faHandsHelping,
-          },
-          {
-            title: 'menu.adminSettings',
-            href: '/admin/settings',
-            icon: faCog,
-            isActive: /^\/admin\/settings.*/,
-          },
-        ],
+        title: 'menu.adminSettings',
+        href: '/admin/settings',
+        icon: faCog,
+        isActive: /^\/admin\/settings.*/,
+        visible: canAdmin.value,
       },
-    ];
+    ],
+  },
+]);

apps/frontend/src/pages/index.vue

@@ -5,6 +5,13 @@ meta:
 <template><div /></template>
 <script lang="ts" setup>
 import { useRouter } from 'vue-router';
-import { canAdmin } from '../store';
-useRouter().replace(canAdmin.value ? '/admin' : '/profile');
+import { canAdmin, currentUser } from '../store';
+import env from '@env';
+useRouter().replace(
+  canAdmin.value
+    ? '/admin'
+    : env.cnrMode && currentUser.value?.isReviewer
+      ? '/admin/callouts'
+      : '/profile'
+);
 </script>

apps/frontend/src/pages/join/setup.vue

@@ -76,15 +76,15 @@ async function handleSubmitSetup(data: SetupContactData) {
     }),
   };
 
-  const updatedContact = await updateContact('me', {
+  await updateContact('me', {
     email: data.email,
     firstname: data.firstName,
     lastname: data.lastName,
     password: data.password,
     ...(Object.keys(profile).length > 0 && { profile }),
   });
 
-  await updateCurrentUser(updatedContact);
+  await updateCurrentUser();
 
   if (setupContent.value.surveySlug) {
     router.push({ path: '/join/survey' });