Merge pull request #108 from bcgov/ofmcc-1456-account-management-edit…

…-roles

Implementation for OFMCC-1456 - Account Management - Edit Roles

frontend/src/components/account-mgmt/EditFacilityContacts.vue

@@ -47,14 +47,14 @@
                         <template v-slot:item.role="{ item }">
                           {{ getRoleNameById(item.role) }}
                         </template>
-                        <template v-slot:item.actions="{ item }">
+                        <template v-if="editable" v-slot:item.actions="{ item }">
                           <v-row v-if="editMode" justify="end">
                             <AppButton variant="text" :disabled="loading">
                               <v-icon icon="fa:fa-regular fa-trash-can" class="transaction-icon" @click="deleteContact(item)"></v-icon>
                             </AppButton>
                           </v-row>
                         </template>
-                        <template v-slot:[`header.actions`]>
+                        <template v-if="editable" v-slot:[`header.actions`]>
                           <v-row v-if="!editMode" justify="end">
                             <AppButton variant="text" :disabled="parentInEditMode || loading">
                               <v-icon icon="fa:fa-regular fa-edit" class="transaction-icon" @click="toggleEditMode()"></v-icon>
@@ -64,7 +64,7 @@
                       </v-data-table>
                     </v-col>
                   </v-row>
-                  <v-row v-if="editMode">
+                  <v-row v-if="editMode && editable">
                     <v-col cols="12" class="pb-4">
                       <v-row justify="end">
                         <AppButton id="cancel" :primary="false" size="large" :loading="loading" class="mr-6" @click="cancelEditContacts()">Cancel</AppButton>
@@ -123,6 +123,11 @@ export default {
       required: false,
       default: false,
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   emits: ['save-contact-updates', 'edit-mode-changed'],
   data() {

frontend/src/components/facilities/FacilityInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="mt-2 pa-4" variant="outlined">
+  <v-card class="pa-4" variant="outlined">
     <v-skeleton-loader :loading="loading" type="table-tbody">
       <v-container fluid class="pa-0">
         <v-row v-if="!isApplicationPage" no-gutters>
@@ -12,7 +12,7 @@
             </v-row>
           </v-col>
           <v-col cols="3" lg="6">
-            <v-row no-gutters justify="end">
+            <v-row v-if="editable" no-gutters justify="end">
               <AppButton variant="text" :disabled="loading">
                 <v-icon icon="fa:fa-regular fa-pen-to-square" class="transaction-icon" @click="editFacility()"></v-icon>
               </AppButton>
@@ -201,6 +201,11 @@ export default {
         return {}
       },
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     loading: {
       type: Boolean,
       default: false,

frontend/src/components/organizations/OrganizationInfo.vue

@@ -68,12 +68,6 @@
                   <v-col cols="11" sm="3" md="3" lg="3" class="ma-2">
                     <AppLabel>Mailing Address:</AppLabel>
                   </v-col>
-                  <v-col></v-col>
-                  <v-col v-if="editable" cols="11" sm="8" md="8" lg="8" class="ma-2">
-                    <v-row no-gutters justify="end">
-                      <v-icon v-show="!editMode" icon="fa:fa-regular fa-pen-to-square" @click="toggleEditMode()"></v-icon>
-                    </v-row>
-                  </v-col>
                 </v-row>
                 <v-row no-gutters>
                   <v-col cols="11" sm="3" md="3" lg="3" class="ma-2">

frontend/src/router/index.js

@@ -187,23 +187,11 @@ const router = createRouter({
         requiresAuth: true,
       },
     },
-    {
-      path: '/manage-users',
-      name: 'manage-users',
-      component: ManageUsersView,
-      meta: {
-        requiresAuth: true,
-        role: ROLES.ACCOUNT_MANAGEMENT,
-        showFacility: false,
-      },
-      children: [],
-    },
     {
       path: '/account-mgmt',
       component: EmptyRouterView,
       meta: {
         requiresAuth: true,
-        role: ROLES.ACCOUNT_MANAGEMENT,
         showFacility: false,
       },
       children: [
@@ -222,6 +210,14 @@ const router = createRouter({
           name: 'manage-facility',
           component: ManageFacilityView,
         },
+        {
+          path: 'manage-users',
+          name: 'manage-users',
+          component: ManageUsersView,
+          meta: {
+            role: ROLES.ACCOUNT_MANAGEMENT,
+          },
+        },
       ],
     },
     {

frontend/src/views/HomeView.vue

@@ -54,7 +54,7 @@
           </v-card-text>
         </v-card>
       </v-col>
-      <v-col cols="12" md="6" lg="4" v-if="hasRole(ROLES.ACCOUNT_MANAGEMENT)">
+      <v-col cols="12" md="6" lg="4">
         <v-card class="home-card" prepend-icon="mdi-cog-outline" title="Account Management" @click="$router.push({ name: 'account-mgmt' })">
           <v-card-text>
             Donec iaculis nec quam vel congue. Fusce consequat mattis rhoncus. Sed id ipsum sed purus placerat euismod vel ut erat. Nullam ligula leo, fermentum vel interdum sit amet, tempor at nunc.
@@ -66,16 +66,7 @@
 </template>
 
 <script>
-import { mapActions } from 'pinia'
-
-import rolesMixin from '@/mixins/rolesMixin.js'
-import { useAuthStore } from '@/stores/auth'
-
 export default {
-  mixins: [rolesMixin],
-  methods: {
-    ...mapActions(useAuthStore, ['hasRole']),
-  },
 }
 </script>
 

frontend/src/views/account-mgmt/AccountMgmtView.vue

@@ -9,7 +9,7 @@
           </template>
           <router-link :to="{ name: 'manage-organization' }">Manage Organization/Facilities</router-link>
         </v-list-item>
-        <v-list-item>
+        <v-list-item v-if="isAccountManager">
           <template v-slot:prepend>
             <v-icon>mdi-account-group</v-icon>
           </template>
@@ -23,8 +23,20 @@
 
 <script>
 import AppBackButton from '@/components/ui/AppBackButton.vue'
+import rolesMixin from '@/mixins/rolesMixin.js'
+import { mapActions } from 'pinia'
+import { useAuthStore } from '@/stores/auth'
 
 export default {
   components: { AppBackButton },
+  mixins: [rolesMixin],
+  computed: {
+    isAccountManager() {
+      return this.hasRole(this.ROLES.ACCOUNT_MANAGEMENT)
+    },
+  },
+  methods: {
+    ...mapActions(useAuthStore, ['hasRole']),
+  },
 }
 </script>

frontend/src/views/account-mgmt/ManageFacilityView.vue

@@ -2,25 +2,25 @@
   <v-container fluid>
     <h1>Update Facility Information</h1>
     <v-row>
-      <v-col class="ml-6 mt-6 pb-0">
+      <v-col class="pl-9 pt-10 pb-0">
         <h4>Facility Details</h4>
       </v-col>
+      <v-col v-if="editable" class="pb-1 pt-7">
+        <v-row no-gutters justify="end" class="">
+          <AppButton size="large" width="300px" :loading="loading" @click="openChangeRequestDialog()">Submit a Change Request</AppButton>
+        </v-row>
+      </v-col>
     </v-row>
     <v-row>
       <v-col class="ml-6 pt-0 pb-0">
-        <FacilityInfo :loading="loading" :facility="facility" class="mt-0" />
+        <FacilityInfo :loading="loading" :facility="facility" />
       </v-col>
     </v-row>
     <v-row>
       <v-col class="ml-6 pb-1 pt-6">
         <h4>Licences</h4>
       </v-col>
       <v-col class="d-flex justify-end align-end pb-1 pt-0">
-        <AppButton id="add-licence-button" :primary="false" size="large" width="250px" class="mr-4" @click="addEditLicense()">
-          <v-icon left>mdi-plus</v-icon>
-          Add New Licence
-        </AppButton>
-
         <AppButton v-if="licences?.length > 0 && isEmpty(panel)" id="expand-button" :primary="false" size="large" width="200px" @click="togglePanels()">
           <v-icon>mdi-arrow-expand-vertical</v-icon>
           Expand All
@@ -37,13 +37,8 @@
           <v-skeleton-loader :loading="loading" type="table-tbody">
             <v-expansion-panels v-if="licences?.length > 0" v-model="panel" multiple>
               <v-expansion-panel v-for="licence in licences" :key="licence.licenceId" :value="licence.licenceId">
-                <v-expansion-panel-title class="header-label">
+                <v-expansion-panel-title>
                   <LicenceHeader :licence="licence" />
-                  <v-col cols="auto">
-                    <AppButton variant="text" :disabled="loading">
-                      <v-icon icon="fa:fa-regular fa-pen-to-square" class="transaction-icon" @click.stop="addEditLicense(licence.licenceId)"></v-icon>
-                    </AppButton>
-                  </v-col>
                 </v-expansion-panel-title>
                 <v-expansion-panel-text>
                   <LicenceDetails :licence="licence" />
@@ -90,14 +85,14 @@
                   <ContactInfo :loading="loading" :contact="primaryContact" vCardVariant="flat" class="mt-0" />
                 </v-col>
                 <v-col cols="1">
-                  <v-row v-if="!editModePrimaryContact" no-gutters justify="end">
+                  <v-row v-if="editable && !editModePrimaryContact" no-gutters justify="end">
                     <AppButton variant="text" :disabled="editMode || loading">
                       <v-icon icon="fa:fa-regular fa-edit" class="transaction-icon" @click="toggleEditPrimaryContact()"></v-icon>
                     </AppButton>
                   </v-row>
                 </v-col>
               </v-row>
-              <v-row v-if="editModePrimaryContact">
+              <v-row v-if="editable && editModePrimaryContact">
                 <v-col cols="12">
                   <v-row justify="end">
                     <AppButton id="cancel" :primary="false" size="large" :loading="loading" class="mr-6" @click="toggleEditPrimaryContact()">Cancel</AppButton>
@@ -118,6 +113,7 @@
       :contactsForAdd="expenseAuthoritiesAvailableForAdd"
       :atLeastOneContactMandatory="true"
       :parentInEditMode="editMode"
+      :editable="editable"
       @save-contact-updates="saveExpenseAuthorityUpdates"
       @edit-mode-changed="contactEditModeChange" />
     <EditFacilityContacts
@@ -127,6 +123,7 @@
       :contacts="additionalContacts"
       :contactsForAdd="additionalContactsAvailableForAdd"
       :parentInEditMode="editMode"
+      :editable="editable"
       @save-contact-updates="saveAdditionalContactUpdates"
       @edit-mode-changed="contactEditModeChange" />
     <v-row>
@@ -144,10 +141,13 @@ import AppButton from '@/components/ui/AppButton.vue'
 import AppBackButton from '@/components/ui/AppBackButton.vue'
 import AppLabel from '@/components/ui/AppLabel.vue'
 import alertMixin from '@/mixins/alertMixin'
+import rolesMixin from '@/mixins/rolesMixin.js'
 import rules from '@/utils/rules'
 import { ApiRoutes } from '@/utils/constants'
 import { useAppStore } from '@/stores/app'
 import { mapState } from 'pinia'
+import { mapActions } from 'pinia'
+import { useAuthStore } from '@/stores/auth'
 import ApiService from '@/common/apiService'
 import FacilityService from '@/services/facilityService'
 import LicenceService from '@/services/licenceService'
@@ -161,7 +161,7 @@ import { isEmpty } from 'lodash'
 export default {
   name: 'ManageFacilityView',
   components: { AppButton, AppBackButton, AppLabel, FacilityInfo, EditFacilityContacts, ContactInfo, LicenceHeader, LicenceDetails },
-  mixins: [alertMixin],
+  mixins: [alertMixin, rolesMixin],
   data() {
     return {
       facilityId: null,
@@ -180,6 +180,7 @@ export default {
   },
   computed: {
     ...mapState(useAppStore, ['getRoleNameById']),
+    ...mapState(useAuthStore, ['userInfo']),
     expenseAuthorities() {
       return this.contacts?.filter((contact) => contact.isExpenseAuthority)
     },
@@ -198,6 +199,9 @@ export default {
     allLicenceIDs() {
       return this.licences?.map((licence) => licence.licenceId)
     },
+    editable() {
+      return this.hasRole(this.ROLES.ACCOUNT_MANAGEMENT) && this.hasAccessToFacility(this.facilityId)
+    },
     sortedContacts() {
       if (!this.contacts) return []
       const contactsCopy = [...this.contacts]
@@ -213,6 +217,7 @@ export default {
     this.primaryContactLastSaved = this.primaryContact
   },
   methods: {
+    ...mapActions(useAuthStore, ['hasRole']),
     /**
      * Load the data for the page
      */
@@ -342,13 +347,6 @@ export default {
       await this.saveContactUpdates('isAdditionalContact', 'Additional Contact', contactsToAdd, contactsToRemove)
     },
 
-    /**
-     * Add a new licence category
-     */
-    addEditLicense(licenceId) {
-      this.setWarningAlert('This feature is not yet implemented')
-    },
-
     /**
      * Toggle expansion panels
      */
@@ -362,6 +360,20 @@ export default {
     contactEditModeChange(editMode) {
       this.editMode = editMode
     },
+
+    /**
+     * Check if user has access to facility
+     */
+    hasAccessToFacility(facilityId) {
+      return this.userInfo?.facilities?.some((facility) => facility.facilityId === facilityId)
+    },
+
+    /**
+     * Open the Change Request dialog
+    */
+    openChangeRequestDialog() {
+      this.setWarningAlert('This feature is not yet implemented')
+    },
   },
 }
 </script>