Feature/coordinators fix (#3245)

Author: rodrigo-barraza

auth-web/src/components/auth/account-settings/team-management/InvitationsDataTable.vue

@@ -30,7 +30,7 @@
     <template #[`item.action`]="{ item }">
       <!-- Resend Invitation -->
       <v-btn
-        v-can:EDIT_USER.hide
+        v-if="canApproveOrDeny()"
         icon
         class="mr-1"
         aria-label="Resend invitation"
@@ -43,7 +43,7 @@
 
       <!-- Remove Invitation -->
       <v-btn
-        v-can:EDIT_USER.hide
+        v-if="canApproveOrDeny()"
         icon
         aria-label="Remove Invitation"
         title="Remove Invitation"
@@ -60,12 +60,15 @@
 import { Component, Emit, Vue } from 'vue-property-decorator'
 import CommonUtils from '@/util/common-util'
 import { Invitation } from '@/models/Invitation'
+import { Role } from '@/util/constants'
 import { mapState } from 'pinia'
 import { useOrgStore } from '@/stores/org'
+import { useUserStore } from '@/stores/user'
 
 @Component({
   computed: {
-    ...mapState(useOrgStore, ['pendingOrgInvitations'])
+    ...mapState(useOrgStore, ['pendingOrgInvitations']),
+    ...mapState(useUserStore, ['currentUser'])
   }
 })
 export default class InvitationsDataTable extends Vue {
@@ -97,6 +100,10 @@ export default class InvitationsDataTable extends Vue {
     }
   ]
 
+  private canApproveOrDeny (): boolean {
+    return !this.currentUser.roles?.includes(Role.ContactCentreStaff)
+  }
+
   formatDate = CommonUtils.formatDisplayDate
 
   getIndexedTag (tag, index): string {

auth-web/src/components/auth/account-settings/team-management/MemberDataTable.vue

@@ -151,7 +151,6 @@
         <!-- Remove User -->
         <v-btn
           v-show="canRemove(item)"
-          v-can:EDIT_USER.hide
           icon
           aria-label="Remove Team Member"
           title="Remove Team Member"
@@ -436,6 +435,11 @@ export default class MemberDataTable extends Vue {
   }
 
   private canRemove (memberToRemove: Member): boolean {
+    // Contact Centre Staff can't remove anyone
+    if (this.currentUser.roles?.includes(Role.ContactCentreStaff)) {
+      return false
+    }
+
     // Can't remove yourself
     if (this.currentMembership.user?.username === memberToRemove.user.username) {
       return false

auth-web/src/components/auth/account-settings/team-management/PendingMemberDataTable.vue

@@ -28,7 +28,7 @@
     </template>
     <template #[`item.action`]="{ item }">
       <v-btn
-        v-can:EDIT_USER.hide
+        v-if="canApproveOrDeny()"
         icon
         class="mr-1"
         aria-label="Approve user access to this account"
@@ -39,7 +39,7 @@
         <v-icon>mdi-check-circle-outline</v-icon>
       </v-btn>
       <v-btn
-        v-can:EDIT_USER.hide
+        v-if="canApproveOrDeny()"
         icon
         aria-label="Deny access to this account"
         title="Deny access to this account"
@@ -54,19 +54,24 @@
 
 <script lang="ts">
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
+import { KCUserProfile } from 'sbc-common-components/src/models/KCUserProfile'
 import { Member } from '@/models/Organization'
+import { Role } from '@/util/constants'
 import { mapState } from 'pinia'
 /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 import moment from 'moment'
 import { useOrgStore } from '@/stores/org'
+import { useUserStore } from '@/stores/user'
 
 @Component({
   computed: {
-    ...mapState(useOrgStore, ['pendingOrgMembers'])
+    ...mapState(useOrgStore, ['pendingOrgMembers']),
+    ...mapState(useUserStore, ['currentUser'])
   }
 })
 export default class PendingMemberDataTable extends Vue {
   @Prop({ default: '' }) userNamefilterText: string
+  protected readonly currentUser!: KCUserProfile
   readonly pendingOrgMembers!: Member[]
   readonly headerPendingMembers = [
     {
@@ -83,6 +88,10 @@ export default class PendingMemberDataTable extends Vue {
     }
   ]
 
+  private canApproveOrDeny (): boolean {
+    return !this.currentUser.roles?.includes(Role.ContactCentreStaff)
+  }
+
   getIndexedTag (tag, index): string {
     return `${tag}-${index}`
   }