- app version = 5.11.26 (#741)

- refactored file input rules to emit error messages - separated onFileSelected and onRemoveClicked to simplify code Co-authored-by: Severin Beauvais <[email protected]>
bcgov · Sep 28, 2024 · 5d44f91 · 5d44f91
1 parent cae87a1
commit 5d44f91
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-create-ui",
-  "version": "5.11.25",
+  "version": "5.11.26",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",

diff --git a/src/components/ContinuationIn/ContinuationAuthorization.vue b/src/components/ContinuationIn/ContinuationAuthorization.vue
@@ -103,6 +103,7 @@
             class="d-none mt-6"
             :maxSize="MAX_FILE_SIZE"
             :customErrorMessage.sync="customErrorMessage"
+            :isRequired="false"
             @fileValidity="onFileValidity($event)"
             @fileSelected="onFileSelected($event)"
           />
@@ -136,7 +137,7 @@
             class="remove-document-button"
             text
             color="primary"
-            @click="onFileSelected(null, index)"
+            @click="onRemoveClicked(index)"
           >
             <span>Remove</span>
             <v-icon dense>
@@ -330,18 +331,11 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
   /**
    * Called when FileUploadPreview tells us about a new or cleared file.
    * This is called right after the File Validity event.
-   * @param file the file to add or null to delete
-   * @param index the index of the file to delete
+   * @param file the file to add
    */
-  async onFileSelected (file: File, index = 0): Promise<void> {
-    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
-      }
-
+  async onFileSelected (file: File): Promise<void> {
+    // verify that file is specified and is valid
+    if (file && this.fileValidity) {
       // verify that file doesn't already exist
       if (this.authorization.files.find(f => f.file.name === file.name)) {
         // set error message
@@ -376,15 +370,22 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
       })
 
       this.isFileAdded = true
-    } else if (file === null) {
-      // null file means user clicked Remove button - proceed
-      // undefined file means file upload was cancelled - do nothing
+    }
+  }
+
+  /**
+   * Called when user clicks a Remove button.
+   * @param index the index of the file to remove
+   */
+  onRemoveClicked (index = NaN): void {
+    // safety check
+    if (index >= 0) {
       // delete file from Minio, not waiting for response and ignoring errors
       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
+      // clear any existing error message
+      this.customErrorMessage = ''
     }
   }
 

diff --git a/src/components/common/FileUploadPreview.vue b/src/components/common/FileUploadPreview.vue
@@ -1,17 +1,12 @@
 <template>
-  <v-form
-    ref="form"
-    class="file-upload-preview"
-    lazy-validation
-  >
+  <div class="file-upload-preview">
     <v-file-input
       id="file-input"
       v-model="fileUpload"
       :label="label"
       filled
       dense
       accept=".pdf"
-      :rules="fileUploadRules"
       show-size
       color="primary"
       :hint="hint"
@@ -20,7 +15,7 @@
       :error-messages="customErrorMessages"
       @change="onChange($event)"
     />
-  </v-form>
+  </div>
 </template>
 
 <script lang="ts">
@@ -50,32 +45,6 @@ export default class FileUploadPreview extends Mixins(DocumentMixin) {
   fileUpload = null as File
   customErrorMessages = [] as string[]
 
-  get fileUploadRules () {
-    return [
-      (file: File) => {
-        if (this.isRequired) {
-          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.'
-          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 true
-      }
-    ]
-  }
-
   /** Called when component is mounted. */
   async mounted (): Promise<void> {
     if (this.inputFile) {
@@ -88,25 +57,49 @@ export default class FileUploadPreview extends Mixins(DocumentMixin) {
 
   /** Programmatically opens the file selection dialog. Can be called externally. */
   public clickFileInput (): void {
+    // clear any previous error state
+    this.setCustomErrorMessage('')
+    // clear any existing file
+    this.fileUpload = null
     // find the find input element in THIS component (not globally)
     const element = this.$el.querySelector('#file-input') as HTMLElement
+    // click the file input element to open the file selection dialog
     element.click()
   }
 
-  // Note: the validation is done this way as opposed to being all defined in the validation rules(fileUploadRules)
-  //  above because Vuetify does not support async validation out of the box.  This was needed to work
-  //  around this limitation.  vuelidate does support this but this would mean introducing a component that
-  //  is using a different validation approach or updating all components to use vuelidate.  Have decided
-  //  to do this for the time being.
+  /**
+   * Validates the file input. Includes "rules" here because Vuetify does not support async validation.
+   * @param file The file to validate.
+   */
   private async validateFileInput (file: File): Promise<boolean> {
-    // clear any existing error messages
-    this.setCustomErrorMessage(null)
+    // clear any previous error state
+    this.setCustomErrorMessage('')
+
+    // check if required file is present
+    if (this.isRequired && !file) {
+      this.setCustomErrorMessage('File is required.')
+      return false
+    }
+
+    // check optional max size
+    if (file && this.maxSize) {
+      const maxSizeMB = this.maxSize / 1024
+      if (file.size > (this.maxSize * 1024)) {
+        this.setCustomErrorMessage('Exceeds maximum ' + maxSizeMB.toString() + ' MB file size.')
+        return false
+      }
+    }
 
-    // validate the form (using rules)
-    const isValid = this.$refs.form.validate()
-    if (!isValid) return false
+    // check file extension
+    if (file) {
+      const pattern = /^(.*)\.(pdf)$/i
+      if (!pattern.test(file.name)) {
+        this.setCustomErrorMessage('Invalid file extension.')
+        return false
+      }
+    }
 
-    // perform perform PDF validations
+    // perform PDF validations
     if (file) {
       if (typeof file.arrayBuffer === 'undefined') { return true }
       const fileInfo = await this.retrieveFileInfo(file)
@@ -130,7 +123,8 @@ export default class FileUploadPreview extends Mixins(DocumentMixin) {
         return false
       }
     }
-    // if we get this far then the file must be valid
+
+    // if we get this far then declare the file valid
     return true
   }