22995 Added spinner + extra error handling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "business-create-ui",
-  "version": "5.11.24",
+  "version": "5.11.25",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",

src/components/ContinuationIn/ContinuationAuthorization.vue

@@ -84,6 +84,7 @@
             color="primary"
             class="btn-outlined-primary mt-4"
             :disabled="numFiles >= 5"
+            :loading="isDocumentLoading"
             @click="onClickAddDocumentButton()"
           >
             <v-icon>mdi-plus</v-icon>
@@ -238,6 +239,7 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
   fileValidity = false
   customErrorMessage = ''
   isFileAdded = false
+  isDocumentLoading = false
 
   /**
    * The minimum date for the Authorization Date:
@@ -332,25 +334,34 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
    * @param index the index of the file to delete
    */
   async onFileSelected (file: File, index = 0): Promise<void> {
-    // verify that file is valid
-    if (this.fileValidity && file) {
+    if (file) {
+      // verify that file is valid
+      if (!this.fileValidity) {
+        // if file loader hasn't set an error message, set default message
+        if (!this.customErrorMessage) this.customErrorMessage = 'Invalid file.'
+        return // don't add to array
+      }
+
       // verify that file doesn't already exist
       if (this.authorization.files.find(f => f.file.name === file.name)) {
-        // put file uploader into manual error mode by setting custom error message
-        this.customErrorMessage = 'Duplicate file'
+        // set error message
+        this.customErrorMessage = 'Duplicate file.'
         return // don't add to array
       }
 
       // try to upload to Minio
       let psu: PresignedUrlIF
       try {
+        this.isDocumentLoading = true
         psu = await this.getPresignedUrl(file.name)
         const res = await this.uploadToUrl(psu.preSignedUrl, file, psu.key, this.getKeycloakGuid)
         if (!res || res.status !== StatusCodes.OK) throw new Error()
       } catch {
-        // put file uploader into manual error mode by setting custom error message
+        // set error message
         this.customErrorMessage = this.UPLOAD_FAILED_MESSAGE
         return // don't add to array
+      } finally {
+        this.isDocumentLoading = false
       }
 
       // add file to array
@@ -372,6 +383,8 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
       this.deleteDocument(this.authorization.files[index].fileKey).catch(() => null)
       // remove file from array
       this.authorization.files.splice(index, 1)
+      // clear previous error message, if any
+      this.customErrorMessage = null
     }
   }
 

src/components/common/FileUploadPreview.vue

@@ -54,22 +54,22 @@ export default class FileUploadPreview extends Mixins(DocumentMixin) {
     return [
       (file: File) => {
         if (this.isRequired) {
-          return !!file || this.inputFileLabel + ' is required'
+          return !!file || this.inputFileLabel + ' is required.'
         }
         return true
       },
       (file: File) => {
         if (file && this.maxSize) {
           const maxSizeMB = this.maxSize / 1024
-          const errorMsg = 'Exceeds maximum ' + maxSizeMB.toString() + ' MB file size'
+          const errorMsg = 'Exceeds maximum ' + maxSizeMB.toString() + ' MB file size.'
           return (file?.size <= (this.maxSize * 1024)) || errorMsg
         }
         return true
       },
       (file: File) => {
         if (file) {
           const pattern = /^(.*)\.(pdf)$/i
-          return pattern.test(file.name) || 'Invalid file extension'
+          return pattern.test(file.name) || 'Invalid file extension.'
         }
         return true
       }
@@ -111,15 +111,15 @@ export default class FileUploadPreview extends Mixins(DocumentMixin) {
       if (typeof file.arrayBuffer === 'undefined') { return true }
       const fileInfo = await this.retrieveFileInfo(file)
       if (!fileInfo) {
-        this.setCustomErrorMessage('Invalid PDF file')
+        this.setCustomErrorMessage('Invalid PDF file.')
         return false
       }
       if (fileInfo.isEncrypted) {
-        this.setCustomErrorMessage('File must be unencrypted')
+        this.setCustomErrorMessage('File must not be encrypted.')
         return false
       }
       if (fileInfo.isContentLocked) {
-        this.setCustomErrorMessage('File content cannot be locked')
+        this.setCustomErrorMessage('File content cannot be locked.')
         return false
       }
       const isPageSizeValid = await this.validatePageSize(file)

src/mixins/document-mixin.ts

@@ -14,7 +14,7 @@ export default class DocumentMixin extends Vue {
       pointsPerInch: 72,
       width: 8.5,
       height: 11,
-      validationErrorMsg: 'Document must be set to fit onto 8.5” x 11” letter-size paper'
+      validationErrorMsg: 'Document must be set to fit onto 8.5” x 11” letter-size paper.'
     }
   }
 

tests/unit/FileUploadPreview.spec.ts

@@ -94,7 +94,7 @@ describe('FileUploadPreview component', () => {
     await fileInput.trigger('change')
     const messages = wrapper.findAll('.error--text .v-messages__message')
     expect(messages.length).toBe(1)
-    expect(messages.at(0).text()).toBe('File is required')
+    expect(messages.at(0).text()).toBe('File is required.')
 
     wrapper.destroy()
   })
@@ -128,7 +128,7 @@ describe('FileUploadPreview component', () => {
     await fileInput.trigger('change')
     const messages = wrapper.findAll('.error--text .v-messages__message')
     expect(messages.length).toBe(1)
-    expect(messages.at(0).text()).toBe('Exceeds maximum 10 MB file size')
+    expect(messages.at(0).text()).toBe('Exceeds maximum 10 MB file size.')
 
     wrapper.destroy()
   })
@@ -187,7 +187,7 @@ describe('FileUploadPreview component', () => {
     await waitForUpdate(5)
     const messages = wrapper.findAll('.error--text .v-messages__message')
     expect(messages.length).toBe(1)
-    expect(messages.at(0).text()).toBe('Document must be set to fit onto 8.5” x 11” letter-size paper')
+    expect(messages.at(0).text()).toBe('Document must be set to fit onto 8.5” x 11” letter-size paper.')
 
     wrapper.destroy()
   }, 10000)
@@ -209,7 +209,7 @@ describe('FileUploadPreview component', () => {
     await waitForUpdate(5)
     const messages = wrapper.findAll('.error--text .v-messages__message')
     expect(messages.length).toBe(1)
-    expect(messages.at(0).text()).toBe('Document must be set to fit onto 8.5” x 11” letter-size paper')
+    expect(messages.at(0).text()).toBe('Document must be set to fit onto 8.5” x 11” letter-size paper.')
 
     wrapper.destroy()
   }, 10000)
@@ -231,7 +231,7 @@ describe('FileUploadPreview component', () => {
     await waitForUpdate(3)
     const messages = wrapper.findAll('.error--text .v-messages__message')
     expect(messages.length).toBe(1)
-    expect(messages.at(0).text()).toBe('File must be unencrypted')
+    expect(messages.at(0).text()).toBe('File must not be encrypted.')
 
     wrapper.destroy()
   })
@@ -254,7 +254,7 @@ describe('FileUploadPreview component', () => {
     await waitForUpdate(3)
     const messages = wrapper.findAll('.error--text .v-messages__message')
     expect(messages.length).toBe(1)
-    expect(messages.at(0).text()).toBe('File content cannot be locked')
+    expect(messages.at(0).text()).toBe('File content cannot be locked.')
 
     wrapper.destroy()
   })