OFMCC-5679 - Service delivery upload docs

frontend/src/assets/css/main.css

@@ -161,6 +161,13 @@ input[type='number'] {
   min-height: 150px;
 }
 
+.grey-card {
+  border: 1px solid #0000001a;
+  background-color: #0f0f0f09;
+  border-radius: 4px;
+  padding: 12px;
+}
+
 .blue-background {
   background-color: #003366;
 }

frontend/src/components/applications/review/ServiceDeliverySummary.vue

@@ -2,45 +2,71 @@
   <v-container fluid class="pa-2 pb-0">
     <template v-if="!readonly">
       <AppMissingInfoError
-        v-if="isEmpty(currentApplication?.licences)"
+        v-if="isEmpty(currentApplication?.licences) || !isCCOFMissingDetailComplete()"
         :to="{ name: APPLICATION_ROUTES.SERVICE_DELIVERY, hash: '#account-management', params: { applicationGuid: $route.params.applicationGuid } }">
         {{ APPLICATION_ERROR_MESSAGES.LICENCE_INFO }}
       </AppMissingInfoError>
+      <AppMissingInfoError v-else-if="!isSplitClassroomComplete()" :to="{ name: APPLICATION_ROUTES.SERVICE_DELIVERY, params: { applicationGuid: $route.params.applicationGuid } }">
+        {{ APPLICATION_ERROR_MESSAGES.SPLIT_CLASSROOM_INFO }}
+      </AppMissingInfoError>
       <AppMissingInfoError
         v-else-if="!currentApplication?.licenceDeclaration"
         :to="{ name: APPLICATION_ROUTES.SERVICE_DELIVERY, hash: '#confirmation', params: { applicationGuid: $route.params.applicationGuid } }">
         {{ APPLICATION_ERROR_MESSAGES.LICENCE_CONFIRMATION }}
       </AppMissingInfoError>
-      <AppMissingInfoError v-else-if="!isServiceDeliveryComplete" :to="{ name: APPLICATION_ROUTES.SERVICE_DELIVERY, params: { applicationGuid: $route.params.applicationGuid } }">
-        {{ !allCCOFMissingDetailComplete ? APPLICATION_ERROR_MESSAGES.LICENCE_INFO : APPLICATION_ERROR_MESSAGES.SPLIT_CLASSROOM_INFO }}
-      </AppMissingInfoError>
     </template>
     <v-expansion-panels v-if="showSummary" v-model="panel" multiple>
       <v-expansion-panel v-for="licence in licences" :key="licence.licenceId" :value="licence.licenceId">
         <v-expansion-panel-title>
           <LicenceHeader :licence="licence" />
         </v-expansion-panel-title>
         <v-expansion-panel-text>
-          <LicenceDetails :licence="licence" :readOnly="true" />
+          <v-card>
+            <LicenceDetails :licence="licence" :read-only="true" />
+          </v-card>
+          <v-card class="mt-4">
+            <AppDocumentUpload class="pa-4" :readonly="true" :document-label="DOCUMENT_LABELS.LICENCE" :document-type="`Licence ${licence.licence}`" :uploaded-documents="getLicenceDocument(licence)">
+              <AppMissingInfoError
+                v-if="!readonly && !getLicenceDocument(licence)?.length"
+                :to="{ name: APPLICATION_ROUTES.SERVICE_DELIVERY, hash: `#${licence.licenceId}`, params: { applicationGuid: $route.params.applicationGuid } }">
+                {{ APPLICATION_ERROR_MESSAGES.DOCUMENT_LICENCE_UPLOAD }}
+              </AppMissingInfoError>
+            </AppDocumentUpload>
+          </v-card>
         </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
+
+    <v-card class="mt-4">
+      <AppDocumentUpload
+        class="pa-4"
+        :readonly="true"
+        :document-label="DOCUMENT_LABELS.HEALTH_AUTHORITY_REPORT"
+        :document-type="DOCUMENT_TYPES.HEALTH_AUTHORITY_REPORT"
+        :uploaded-documents="healthAuthorityReportDocument">
+        <AppMissingInfoError
+          v-if="!readonly && !isHealthAuthorityReportUploaded()"
+          :to="{ name: APPLICATION_ROUTES.SERVICE_DELIVERY, hash: '#health-authority-report-upload', params: { applicationGuid: $route.params.applicationGuid } }">
+          {{ APPLICATION_ERROR_MESSAGES.DOCUMENT_HA_REPORT_UPLOAD }}
+        </AppMissingInfoError>
+      </AppDocumentUpload>
+    </v-card>
   </v-container>
 </template>
 
 <script>
 import { isEmpty } from 'lodash'
-import { mapState } from 'pinia'
+import { mapState, mapActions } from 'pinia'
 
+import AppDocumentUpload from '@/components/ui/AppDocumentUpload.vue'
 import AppMissingInfoError from '@/components/ui/AppMissingInfoError.vue'
 import { useApplicationsStore } from '@/stores/applications'
 import LicenceHeader from '@/components/licences/LicenceHeader.vue'
 import LicenceDetails from '@/components/licences/LicenceDetails.vue'
-import LicenceService from '@/services/licenceService'
-import { APPLICATION_ERROR_MESSAGES, APPLICATION_ROUTES } from '@/utils/constants'
+import { APPLICATION_ERROR_MESSAGES, APPLICATION_ROUTES, DOCUMENT_LABELS, DOCUMENT_TYPES } from '@/utils/constants'
 
 export default {
-  components: { AppMissingInfoError, LicenceHeader, LicenceDetails },
+  components: { AppDocumentUpload, AppMissingInfoError, LicenceHeader, LicenceDetails },
   props: {
     readonly: {
       type: Boolean,
@@ -58,34 +84,29 @@ export default {
   },
   computed: {
     ...mapState(useApplicationsStore, ['currentApplication']),
-    ...mapState(useApplicationsStore, ['isServiceDeliveryComplete']),
     allLicenceIDs() {
       return this.licences?.map((licence) => licence.licenceId)
     },
-    allCCOFMissingDetailComplete() {
-      return this.currentApplication?.licences.every((licence) => {
-        return licence.licenceDetails?.every(
-          (detail) =>
-            LicenceService.isOperationalSpacesValid(detail.operationalSpaces) &&
-            LicenceService.isEnrolledSpacesValid(detail.enrolledSpaces) &&
-            LicenceService.isWeeksInOperationValid(detail.weeksInOperation) &&
-            !isEmpty(detail.operationFromTime) &&
-            !isEmpty(detail.operationToTime) &&
-            !isEmpty(detail.weekDays),
-        )
-      })
-    },
     showSummary() {
-      return !isEmpty(this.currentApplication?.licences) && (this.readonly || this.isServiceDeliveryComplete)
+      return !isEmpty(this.currentApplication?.licences) && (this.readonly || this.isLicenceDetailComplete())
+    },
+    healthAuthorityReportDocument() {
+      return this.currentApplication?.uploadedDocuments?.filter((document) => document.documentType?.includes(DOCUMENT_TYPES.HEALTH_AUTHORITY_REPORT))
     },
   },
   async created() {
     this.panel = this.allLicenceIDs
     this.APPLICATION_ERROR_MESSAGES = APPLICATION_ERROR_MESSAGES
     this.APPLICATION_ROUTES = APPLICATION_ROUTES
+    this.DOCUMENT_LABELS = DOCUMENT_LABELS
+    this.DOCUMENT_TYPES = DOCUMENT_TYPES
   },
   methods: {
+    ...mapActions(useApplicationsStore, ['isCCOFMissingDetailComplete', 'isSplitClassroomComplete', 'isLicenceDetailComplete', 'isHealthAuthorityReportUploaded']),
     isEmpty,
+    getLicenceDocument(licence) {
+      return this.currentApplication?.uploadedDocuments?.filter((document) => document.documentType?.includes(licence?.licence))
+    },
   },
 }
 </script>

frontend/src/components/ui/AppDocumentUpload.vue

@@ -2,12 +2,12 @@
   <v-container fluid class="pa-0">
     <v-form ref="form" v-model="isValidForm">
       <v-row>
-        <v-col v-if="documentType" cols="12" sm="5" class="pb-0">
-          <AppLabel>{{ documentType }}</AppLabel>
+        <v-col v-if="documentLabel || documentType" cols="12" sm="7" class="pb-0">
+          <AppLabel>{{ documentLabel ?? documentType }}</AppLabel>
         </v-col>
-        <v-col cols="12" :sm="documentType ? '7' : '12'" :class="documentType ? 'd-flex flex-column align-end pr-4' : ''">
+        <v-col cols="12" :sm="documentType ? '5' : '12'" :class="documentType ? 'd-flex flex-column align-end pr-4' : ''">
           <div v-if="!documentType">{{ SUPPORTED_DOCUMENTS_MESSAGE }}</div>
-          <AppButton v-if="!loading && !readonly" :disabled="disabled" id="add-new-file" :primary="false" size="large" class="addFileButton" @click="addFile">Add File</AppButton>
+          <AppButton v-if="showAddFileButton" id="add-new-file" :disabled="disabled" :primary="false" size="large" class="add-file-button" @click="addFile">Add File</AppButton>
         </v-col>
       </v-row>
       <div v-if="documents.length > 0" class="mt-6">
@@ -20,7 +20,7 @@
               :rules="[...fileRules]"
               :accept="fileExtensionAccept"
               :disabled="loading"
-              @update:modelValue="validateFile(item.id)"></v-file-input>
+              @update:model-value="validateFile(item.id)"></v-file-input>
           </v-col>
           <v-col cols="11" md="7" class="pr-4">
             <v-text-field v-model.trim="item.description" :disabled="loading" placeholder="Enter a description (Optional)" counter maxlength="1000" dense clearable></v-text-field>
@@ -36,7 +36,7 @@
           <template #item.actionButtons="{ item }">
             <v-icon v-if="!loading && !readonly" small @click="$emit('deleteUploadedDocument', item.documentId, documentType)">mdi-delete</v-icon>
           </template>
-          <template v-slot:bottom><!-- no paging --></template>
+          <template #bottom><!-- no paging --></template>
         </v-data-table>
       </div>
       <div>
@@ -64,6 +64,10 @@ export default {
       required: false,
       default: undefined,
     },
+    documentLabel: {
+      type: String,
+      default: undefined,
+    },
     documentType: {
       type: String,
       required: false,
@@ -85,6 +89,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    uploadLimit: {
+      type: String,
+      default: undefined,
+    },
   },
   emits: ['update:modelValue', 'deleteUploadedDocument', 'validateDocumentsToUpload'],
   data() {
@@ -93,6 +101,14 @@ export default {
       isValidForm: false,
     }
   },
+  computed: {
+    uploadLimitReached() {
+      return this.uploadLimit && this.documents?.length + this.uploadedDocuments?.length >= Number(this.uploadLimit)
+    },
+    showAddFileButton() {
+      return !this.loading && !this.readonly && !this.uploadLimitReached
+    },
+  },
   watch: {
     documents: {
       handler() {
@@ -127,6 +143,9 @@ export default {
       { title: 'Description', key: 'description', width: '60%' },
       { title: '', key: 'actionButtons', sortable: false, width: '6%' },
     ]
+    if (!this.disabled && !this.readonly && !this.uploadLimitReached) {
+      this.addFile()
+    }
   },
   methods: {
     addFile() {
@@ -167,7 +186,7 @@ export default {
 }
 </script>
 <style scoped>
-.addFileButton {
+.add-file-button {
   font-size: 16px;
 }