Disabling forms/buttons on Nav side if permissions not met

bcgov · Oct 9, 2024 · 2cfc18e · 2cfc18e
1 parent fc5edab
commit 2cfc18e
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 17 deletions.
diff --git a/frontend/src/components/file/DocumentCard.vue b/frontend/src/components/file/DocumentCard.vue
@@ -13,7 +13,8 @@ import spreadsheet from '@/assets/images/spreadsheet.svg';
 
 import DeleteDocument from '@/components/file/DeleteDocument.vue';
 import { Card } from '@/lib/primevue';
-import { FileCategory } from '@/utils/enums/application';
+import { useAuthZStore } from '@/store';
+import { Action, FileCategory, Initiative, Resource } from '@/utils/enums/application';
 import { formatDateLong } from '@/utils/formatters';
 import { getFileCategory } from '@/utils/utils';
 
@@ -58,7 +59,7 @@ const displayIcon = (mimeType = '') => {
 };
 
 function onClick() {
-  if (selectable) {
+  if (selectable && useAuthZStore().can(Initiative.HOUSING, Resource.DOCUMENT, Action.READ)) {
     isSelected.value = !isSelected.value;
     emit('document:clicked', { document: document, selected: isSelected.value });
   }
@@ -100,7 +101,10 @@ function onClick() {
         <h6 class="col-4 text-left mt-0 mb-0 pl-0 inline-block">
           {{ filesize(document.filesize) }}
         </h6>
-        <DeleteDocument :document="document" />
+        <DeleteDocument
+          :disabled="!useAuthZStore().can(Initiative.HOUSING, Resource.DOCUMENT, Action.DELETE)"
+          :document="document"
+        />
       </div>
     </template>
   </Card>

diff --git a/frontend/src/components/housing/enquiry/EnquiryListNavigator.vue b/frontend/src/components/housing/enquiry/EnquiryListNavigator.vue
@@ -15,7 +15,8 @@ import {
   useToast
 } from '@/lib/primevue';
 import { enquiryService } from '@/services';
-import { RouteName } from '@/utils/enums/application';
+import { useAuthZStore } from '@/store';
+import { Action, Initiative, Resource, RouteName } from '@/utils/enums/application';
 import { IntakeStatus } from '@/utils/enums/housing';
 import { formatDate } from '@/utils/formatters';
 import { toNumber } from '@/utils/utils';
@@ -241,6 +242,7 @@ function updateQueryParams() {
         <Button
           class="p-button-lg p-button-text p-button-danger p-0"
           aria-label="Delete enquiry"
+          :disabled="!useAuthZStore().can(Initiative.HOUSING, Resource.ENQUIRY, Action.DELETE)"
           @click="
             onDelete(data.enquiryId, data.activityId);
             selection = data;

diff --git a/frontend/src/components/housing/submission/SubmissionForm.vue b/frontend/src/components/housing/submission/SubmissionForm.vue
@@ -38,7 +38,7 @@ import type { IInputEvent } from '@/interfaces';
 import type { Submission, User } from '@/types';
 import { omit, setEmptyStringsToNull } from '@/utils/utils';
 
-// Interfacefs
+// Interfaces
 interface SubmissionForm extends Submission {
   locationAddress: string;
   user?: User;

diff --git a/frontend/src/components/housing/submission/SubmissionListNavigator.vue b/frontend/src/components/housing/submission/SubmissionListNavigator.vue
@@ -384,6 +384,7 @@ function updateQueryParams() {
         <Button
           class="p-button-lg p-button-text p-button-danger p-0"
           aria-label="Delete submission"
+          :disabled="!useAuthZStore().can(Initiative.HOUSING, Resource.SUBMISSION, Action.DELETE)"
           @click="
             onDelete(data.submissionId, data.activityId);
             selection = data;

diff --git a/frontend/src/components/note/NoteCard.vue b/frontend/src/components/note/NoteCard.vue
@@ -4,6 +4,8 @@ import { onMounted, ref } from 'vue';
 import NoteModal from '@/components/note/NoteModal.vue';
 import { Button, Card, Divider } from '@/lib/primevue';
 import { userService } from '@/services';
+import { useAuthZStore } from '@/store';
+import { Action, Initiative, Resource } from '@/utils/enums/application';
 import { formatDate, formatDateShort } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
@@ -49,6 +51,7 @@ onMounted(() => {
         <Button
           class="p-button-outlined"
           aria-label="Edit"
+          :disabled="!useAuthZStore().can(Initiative.HOUSING, Resource.NOTE, Action.UPDATE)"
           @click="noteModalVisible = true"
         >
           <font-awesome-icon

diff --git a/frontend/src/components/permit/PermitCard.vue b/frontend/src/components/permit/PermitCard.vue
@@ -5,7 +5,8 @@ import { computed, ref, watchEffect } from 'vue';
 import PermitModal from '@/components/permit/PermitModal.vue';
 import { Button, Card, Divider } from '@/lib/primevue';
 import { userService } from '@/services';
-import { useTypeStore } from '@/store';
+import { useAuthZStore, useTypeStore } from '@/store';
+import { Action, Initiative, Resource } from '@/utils/enums/application';
 import { formatDate, formatDateTime } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
@@ -58,6 +59,7 @@ watchEffect(() => {
         <Button
           class="p-button-outlined"
           aria-label="Edit"
+          :disabled="!useAuthZStore().can(Initiative.HOUSING, Resource.PERMIT, Action.UPDATE)"
           @click="permitModalVisible = true"
         >
           <font-awesome-icon

diff --git a/frontend/src/components/roadmap/Roadmap.vue b/frontend/src/components/roadmap/Roadmap.vue
@@ -17,8 +17,9 @@ import type { Ref } from 'vue';
 import type { Document } from '@/types';
 
 // Props
-const { activityId } = defineProps<{
+const { activityId, editable = true } = defineProps<{
   activityId: string;
+  editable?: boolean;
 }>();
 
 // Store
@@ -183,35 +184,43 @@ watchEffect(async () => {
         class="col-12 lg:col-6"
         name="to"
         label="To"
+        :disabled="!editable"
       />
       <div class="col" />
       <InputText
         class="col-12 lg:col-6"
         name="cc"
         label="CC"
+        :disabled="!editable"
       />
       <div class="col" />
       <InputText
         class="col-12 lg:col-6"
         name="bcc"
         label="BCC"
+        :disabled="!editable"
       />
       <div class="col" />
       <InputText
         class="col-12 lg:col-6"
         name="subject"
         label="Subject"
+        :disabled="!editable"
       />
       <div class="col" />
       <TextArea
         class="col-12"
         name="body"
         label="Note"
         :rows="10"
+        :disabled="!editable"
       />
       <div class="col-12"><label class="font-bold">Add attachments</label></div>
       <div class="col-12 pt-2">
-        <Button @click="fileSelectModalVisible = true">
+        <Button
+          :disabled="!editable"
+          @click="fileSelectModalVisible = true"
+        >
           <font-awesome-icon
             icon="fa-solid fa-plus"
             class="mr-1"
@@ -242,6 +251,7 @@ watchEffect(async () => {
           label="Send"
           type="submit"
           icon="pi pi-envelope"
+          :disabled="!editable"
         />
       </div>
     </div>

diff --git a/frontend/src/store/authzStore.ts b/frontend/src/store/authzStore.ts
@@ -94,7 +94,7 @@ export const useAuthZStore = defineStore('authz', () => {
   const getters = {
     can: computed(
       () => (initiative: Initiative, resource: Resource, action: Action, group?: GroupName) =>
-        state.permissions.value.find(
+        state.permissions.value.some(
           (x) =>
             initiative === x.initiative &&
             x.resource === resource &&

diff --git a/frontend/src/views/housing/enquiry/EnquiryView.vue b/frontend/src/views/housing/enquiry/EnquiryView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -7,12 +8,11 @@ import NoteCard from '@/components/note/NoteCard.vue';
 import NoteModal from '@/components/note/NoteModal.vue';
 import { Button, Message, TabPanel, TabView } from '@/lib/primevue';
 import { enquiryService, noteService, submissionService } from '@/services';
-import { RouteName } from '@/utils/enums/application';
+import { useAuthZStore, useEnquiryStore } from '@/store';
+import { Action, Initiative, Resource, RouteName } from '@/utils/enums/application';
 
 import type { Note, Submission } from '@/types';
 import type { Ref } from 'vue';
-import { useEnquiryStore } from '@/store';
-import { storeToRefs } from 'pinia';
 
 // Props
 const {
@@ -127,6 +127,7 @@ function onEnquiryFormSaved() {
       </Message>
       <span v-if="!loading && getEnquiry">
         <EnquiryForm
+          :editable="useAuthZStore().can(Initiative.HOUSING, Resource.ENQUIRY, Action.UPDATE)"
           :enquiry="getEnquiry"
           @enquiry-form:saved="onEnquiryFormSaved"
         />
@@ -139,6 +140,7 @@ function onEnquiryFormSaved() {
         </div>
         <Button
           aria-label="Add note"
+          :disabled="!useAuthZStore().can(Initiative.HOUSING, Resource.NOTE, Action.CREATE)"
           @click="noteModalVisible = true"
         >
           <font-awesome-icon

diff --git a/frontend/src/views/housing/submission/SubmissionView.vue b/frontend/src/views/housing/submission/SubmissionView.vue
@@ -16,7 +16,8 @@ import Roadmap from '@/components/roadmap/Roadmap.vue';
 import SubmissionForm from '@/components/housing/submission/SubmissionForm.vue';
 import { Button, Column, DataTable, IconField, InputIcon, InputText, TabPanel, TabView } from '@/lib/primevue';
 import { submissionService, documentService, enquiryService, noteService, permitService } from '@/services';
-import { useSubmissionStore, useTypeStore } from '@/store';
+import { useAuthZStore, useSubmissionStore, useTypeStore } from '@/store';
+import { Action, Initiative, Resource } from '@/utils/enums/application';
 import { formatDateLong } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
@@ -156,12 +157,18 @@ onMounted(async () => {
   <TabView v-model:activeIndex="activeTab">
     <TabPanel header="Information">
       <span v-if="!loading && getSubmission">
-        <SubmissionForm :submission="getSubmission" />
+        <SubmissionForm
+          :editable="useAuthZStore().can(Initiative.HOUSING, Resource.SUBMISSION, Action.UPDATE)"
+          :submission="getSubmission"
+        />
       </span>
     </TabPanel>
     <TabPanel header="Files">
       <div class="mb-3 border-dashed file-upload border-round-md">
-        <FileUpload :activity-id="activityId" />
+        <FileUpload
+          :activity-id="activityId"
+          :disabled="!useAuthZStore().can(Initiative.HOUSING, Resource.DOCUMENT, Action.CREATE)"
+        />
       </div>
       <div class="flex flex-row justify-content-between pb-3">
         <div class="flex align-items-center">
@@ -280,7 +287,12 @@ onMounted(async () => {
           <template #body="{ data }">
             <a
               href="#"
-              @click="documentService.downloadDocument(data.documentId, data.filename)"
+              @click="
+                () => {
+                  if (useAuthZStore().can(Initiative.HOUSING, Resource.DOCUMENT, Action.READ))
+                    documentService.downloadDocument(data.documentId, data.filename);
+                }
+              "
             >
               {{ data.filename }}
             </a>
@@ -322,7 +334,10 @@ onMounted(async () => {
           </template>
           <template #body="{ data }">
             <div class="flex justify-content-center">
-              <DeleteDocument :document="data" />
+              <DeleteDocument
+                :disabled="!useAuthZStore().can(Initiative.HOUSING, Resource.DOCUMENT, Action.DELETE)"
+                :document="data"
+              />
             </div>
           </template>
         </Column>
@@ -336,6 +351,7 @@ onMounted(async () => {
           </div>
           <Button
             aria-label="Add permit"
+            :disabled="!useAuthZStore().can(Initiative.HOUSING, Resource.PERMIT, Action.CREATE)"
             @click="permitModalVisible = true"
           >
             <font-awesome-icon
@@ -367,6 +383,7 @@ onMounted(async () => {
         </div>
         <Button
           aria-label="Add note"
+          :disabled="!useAuthZStore().can(Initiative.HOUSING, Resource.NOTE, Action.CREATE)"
           @click="noteModalVisible = true"
         >
           <font-awesome-icon
@@ -400,6 +417,7 @@ onMounted(async () => {
       <Roadmap
         v-if="!loading"
         :activity-id="activityId"
+        :editable="useAuthZStore().can(Initiative.HOUSING, Resource.ROADMAP, Action.CREATE)"
       />
     </TabPanel>
     <TabPanel header="Related enquiries">