diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css index 6786f141..78e02d97 100644 --- a/frontend/src/assets/css/main.css +++ b/frontend/src/assets/css/main.css @@ -174,3 +174,11 @@ input[type='number'] { .v-table .v-table__wrapper { font-size: 1rem; } + +a.v-btn--active > .v-btn__overlay { + opacity: 0; +} + +html body .v-theme--ofmLightTheme { + --v-disabled-opacity: 0.8; +} diff --git a/frontend/src/components/settings/ManageUserDialog.vue b/frontend/src/components/settings/ManageUserDialog.vue index 916ee401..0644bc8a 100644 --- a/frontend/src/components/settings/ManageUserDialog.vue +++ b/frontend/src/components/settings/ManageUserDialog.vue @@ -11,14 +11,7 @@ BCeID: - + {{ user.userName }} @@ -69,7 +62,7 @@ item-value="id" label="Select Role" :rules="rules.required" - :disabled="isLoading" + :disabled="isLoading || isSameUser" density="compact" variant="outlined"> @@ -80,6 +73,7 @@ @@ -103,7 +97,9 @@ Cancel - {{ isAddingUser ? 'Add' : 'Update' }} + + {{ isAddingUser ? 'Add' : 'Update' }} + Next @@ -162,14 +158,17 @@ export default { ...mapState(useAppStore, ['userRoles']), ...mapState(useAuthStore, ['userInfo']), isAddingUser() { - return this.userOperationType === 'add'; + return this.userOperationType === 'add' }, isUpdatingUser() { - return this.userOperationType === 'update'; + return this.userOperationType === 'update' }, dialogTitle() { return this.isAddingUser ? 'Add new user' : 'Edit user' }, + isSameUser() { + return this.user.userName === this.userInfo.userName + }, }, watch: { show: { @@ -179,7 +178,7 @@ export default { }, updatingUser: { handler(value) { - this.userOperationType = Object.keys(value).length === 0 ? 'add' : 'update'; + this.userOperationType = Object.keys(value).length === 0 ? 'add' : 'update' this.selectedFacilityIds = value.facilities this.user = value }, @@ -206,23 +205,23 @@ export default { * Create or update user. */ async saveUser() { - this.$refs.userForm?.validate(); + this.$refs.userForm?.validate() if (!this.isFormComplete) { - return; + return } try { - this.isLoading = true; + this.isLoading = true if (this.isAddingUser) { - await this.createUser(); + await this.createUser() } else if (this.isUpdatingUser) { if (this.hasUserFacilityAccessChanged(this.selectedFacilityIds, this.user.facilities)) { - this.user.facilities = await this.getUpdatedFacilityAccess(this.user, this.selectedFacilityIds); + this.user.facilities = await this.getUpdatedFacilityAccess(this.user, this.selectedFacilityIds) } - await this.updateUser(this.user); - this.closeManageUserDialog(); + await this.updateUser(this.user) + this.closeManageUserDialog() } } finally { - this.isLoading = false; + this.isLoading = false } }, @@ -295,9 +294,9 @@ export default { */ hasUserFacilityAccessChanged(selectedFacilityIds, userFacilities) { if (selectedFacilityIds?.length !== userFacilities?.length) { - return true; + return true } - return selectedFacilityIds.some(facilityId => !userFacilities.includes(facilityId)); + return selectedFacilityIds.some((facilityId) => !userFacilities.includes(facilityId)) }, /** @@ -312,10 +311,10 @@ export default { const userFacilities = await this.getUserFacilities(user.contactId, false) // If user has no facilities, all selectedFacilities are to be added if (Object.keys(user.facilities).length === 0) { - facilitiesToAdd = selectedFacilities; + facilitiesToAdd = selectedFacilities } else { // Determine any new facilities to add/remove by comparing selectedFacilities to userFacilities - facilitiesToAdd = this.getFacilitiesToAdd(selectedFacilities, user.facilities); + facilitiesToAdd = this.getFacilitiesToAdd(selectedFacilities, user.facilities) facilitiesToRemove = this.getFacilitiesToRemove(selectedFacilities, userFacilities) // Update facilities to remove with bceidFacilityId and ofmPortalAccess (true) this.updateFacilitiesAccess(facilitiesToRemove, userFacilities, false) @@ -329,37 +328,35 @@ export default { * Filter facilities to administer. */ getSelectedFacilitiesByIds(selectedFacilityIds) { - return this.facilitiesToAdminister.filter(facility => selectedFacilityIds.includes(facility.facilityId)) + return this.facilitiesToAdminister.filter((facility) => selectedFacilityIds.includes(facility.facilityId)) }, /** * Get facilities to add. */ getFacilitiesToAdd(selectedFacilities, userFacilities) { - return selectedFacilities?.filter(selectedFacility => - !userFacilities?.some(userFacility => userFacility.facilityId === selectedFacility.facilityId)) + return selectedFacilities?.filter((selectedFacility) => !userFacilities?.some((userFacility) => userFacility.facilityId === selectedFacility.facilityId)) }, /** * Get facilities to remove. */ getFacilitiesToRemove(selectedFacility, userFacilities) { - return userFacilities?.filter(userFacility => - !selectedFacility?.some(selectedFacility => selectedFacility.facilityId === userFacility.facilityId)) + return userFacilities?.filter((userFacility) => !selectedFacility?.some((selectedFacility) => selectedFacility.facilityId === userFacility.facilityId)) }, /** * Update facilities to add/remove access (i.e. ofmPortalAccess = true/false), and update bceidFacilityId value from userFacilities */ updateFacilitiesAccess(facilitiesToAddOrRemove, userFacilities, accessStatus) { - facilitiesToAddOrRemove?.forEach(facilityToAddOrRemove => { - const userFacility = userFacilities.find(fac => fac.facilityId === facilityToAddOrRemove.facilityId) + facilitiesToAddOrRemove?.forEach((facilityToAddOrRemove) => { + const userFacility = userFacilities.find((fac) => fac.facilityId === facilityToAddOrRemove.facilityId) if (userFacility) { facilityToAddOrRemove.bceidFacilityId = userFacility.bceidFacilityId facilityToAddOrRemove.ofmPortalAccess = accessStatus } - }); - } + }) + }, }, } diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js index 89c51de1..1ec9c56e 100644 --- a/frontend/src/plugins/vuetify.js +++ b/frontend/src/plugins/vuetify.js @@ -8,7 +8,7 @@ import { createVuetify } from 'vuetify/dist/vuetify' import { fa } from 'vuetify/iconsets/fa' import { aliases, mdi } from 'vuetify/iconsets/mdi' -const myCustomLightTheme = { +const ofmLightTheme = { dark: false, colors: { primary: '#003366', @@ -30,9 +30,9 @@ export default createVuetify({ }, }, theme: { - defaultTheme: 'myCustomLightTheme', + defaultTheme: 'ofmLightTheme', themes: { - myCustomLightTheme, + ofmLightTheme, }, }, })