@worksafevictoria/wcl7.5 1.6.0 → 1.7.1

package/src/components/Paragraphs/TabulatedData/index.vue

@@ -16,6 +16,7 @@
         :borderless="false"
         :responsive="!isFluid"
         :stacked="!isFluid ? 'sm' : false"
+        :must-sort="true"
       >
         <template #head()="data">
           <span
@@ -26,23 +27,17 @@
           >
             {{ data.label }}
             <span class="sortImg" v-if="data.field.sortable">
-              <img
-                v-if="data.field.thAttr['aria-sort'] === 'none'"
-                :src="sortIconNeutral"
-                alt="image indicating no sort"
-                style="width: 0.55rem; height: 0.9rem"
-              />
               <img
                 v-if="data.field.thAttr['aria-sort'] === 'ascending'"
-                :src="sortIconAsc"
+                :src="CaretUp"
                 alt="image indicating ascending sort"
-                style="width: 0.55rem; height: 0.9rem"
+                class="iconAsc"
               />
               <img
                 v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
-                :src="sortIconDesc"
+                :src="CaretDown"
                 alt="image indicating descending sort"
-                style="width: 0.55rem; height: 0.9rem"
+                class="iconDesc"
               />
             </span>
           </span>
@@ -56,12 +51,14 @@
 </template>
 
 <script>
-import SectionGroup from './../../Containers/SectionGroup/index.vue'
-import RichText from '../../Paragraphs/RichText/index.vue'
-import { BTable } from 'bootstrap-vue-next'
+import SectionGroup from "./../../Containers/SectionGroup/index.vue";
+import RichText from "../../Paragraphs/RichText/index.vue";
+import { BTable } from "bootstrap-vue-next";
+import CaretUp from "./../../../assets/icons/caret-up.svg?url";
+import CaretDown from "./../../../assets/icons/caret-down.svg?url";
 
 export default {
-  name: 'TabulatedData',
+  name: "TabulatedData",
   components: { SectionGroup, RichText, BTable },
   props: {
     items: {
@@ -82,7 +79,7 @@ export default {
     },
     caption: {
       type: String,
-      default: '',
+      default: "",
       required: false,
     },
     sortBy: {
@@ -93,42 +90,33 @@ export default {
   },
   data() {
     return {
-      newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
+      newSortBy: this.sortBy ? [{ key: this.sortBy, order: "asc" }] : [],
       //sortDesc: false,
-      sortIconNeutral:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-      sortIconDesc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-      sortIconAsc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-    }
+      CaretUp,
+      CaretDown,
+    };
   },
   computed: {
     isFluid() {
-      return this.isFixedWidth
+      return this.isFixedWidth;
     },
   },
   methods: {
     accessSort(fieldVar) {
-      //this.sortBy = fieldVar.key
-      if (
-        fieldVar.thAttr['aria-sort'] === 'none' ||
-        fieldVar.thAttr['aria-sort'] === 'descending'
-      ) {
-        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
-        //this.sortDesc = false
+      const currentSort = fieldVar.thAttr["aria-sort"];
+      if (currentSort === "ascending") {
+        this.newSortBy = [{ key: fieldVar.key, order: "desc" }];
       } else {
-        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
-        //this.sortDesc = true
+        this.newSortBy = [{ key: fieldVar.key, order: "asc" }];
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss">
 .paragraph--tabulated-data {
-  @import '../../../includes/scss/all';
+  @import "../../../includes/scss/all";
 
   .section-group__block {
     margin-top: -32px;
@@ -146,6 +134,7 @@ export default {
   .table td {
     margin: 1rem;
     vertical-align: middle;
+    padding: 12px;
     @media screen and (max-width: 540px) {
       margin: 0.5rem;
     }
@@ -155,6 +144,8 @@ export default {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
+    align-items: center;
+    width: 100%;
   }
 
   .rtl {
@@ -163,7 +154,7 @@ export default {
 
   .sortImg {
     vertical-align: middle;
-    margin-left: 5px;
+    margin-left: auto;
   }
 
   .b-table-sortable-column svg {

package/src/components/SubComponents/Breadcrumb/index.vue

@@ -42,6 +42,10 @@ export default {
 
     .breadcrumb-item a {
       color: $black !important;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
 

package/src/components/SubComponents/FormInstance/components/renderer/index.vue

@@ -12,10 +12,14 @@
       @nextPage="next($event)"
       @prevPage="prev($event)"
     ></formio>
+    <BModal centered v-model="modal" title="File Error" ok-only>
+      {{ fileMessage }}</BModal
+    >
   </div>
 </template>
 
 <script>
+import { BModal } from 'bootstrap-vue-next'
 import { Form, Formio } from '@formio/vue'
 import '@fortawesome/fontawesome-free/css/all.min.css'
 import '@fortawesome/fontawesome-free/css/v4-shims.min.css'
@@ -23,7 +27,7 @@ import 'formiojs/dist/formio.builder.min.css'
 
 export default {
   name: 'FormRenderer',
-  components: { formio: Form },
+  components: { formio: Form, BModal },
   props: {
     formiodefinition: {
       type: Object,
@@ -46,6 +50,8 @@ export default {
       debouncedSubmission: this.debounce(this.submit, 250),
       firstEl: null,
       started: false,
+      modal: false,
+      fileMessage: '',
     }
   },
   mounted() {
@@ -100,7 +106,7 @@ export default {
         }
       }
     },
-    changed(_e, event) {
+    async changed(_e, event) {
       // File upload validation
       if (event.changed?.component.type === 'file') {
         const maxFiles = event.changed.component.fileMaxCount || 1
@@ -122,17 +128,27 @@ export default {
         const maxTotalBytes = convertToBytes(maxTotalSize)
         const files = event.changed.instance.dataValue || []
         if (files.length > maxFiles) {
-          event.changed.instance.dataValue = files.slice(0, files.length - 1)
+          event.changed.instance.dataValue = files.slice(0, maxFiles)
+          this.fileMessage = `You have exceeded the maximum number of files allowed. Only the first ${maxFiles} files have been uploaded.`
+          this.modal = true
+
           event.changed.instance.triggerChange()
           event.changed.instance.triggerRedraw()
-          alert(`You can only upload up to ${maxFiles} files.`)
         }
-        const totalSize = files.reduce((sum, file) => sum + (file.size || 0), 0)
+        let totalSize = files.reduce((sum, file) => sum + (file.size || 0), 0)
         if (totalSize > maxTotalBytes) {
-          event.changed.instance.dataValue = files.slice(0, files.length - 1)
+          let limit = []
+          while (totalSize > maxTotalBytes) {
+            const file = files.pop()
+            limit.push(file.name)
+            totalSize -= file.size
+          }
+          event.changed.instance.dataValue = files //.slice(0, files.length - 1)
+          this.fileMessage = `You have exceeded the maximum total file size allowed. Only ${files.length} files have been uploaded.`
+          this.modal = true
+          console.log('🚀 ~ changed ~ limit.length:', limit.length)
           event.changed.instance.triggerChange()
           event.changed.instance.triggerRedraw()
-          alert(`Total file size cannot exceed ${maxTotalSize}.`)
           return
         }
       }

package/src/components/SubComponents/FormInstance/models/overrides/file.js

@@ -39,8 +39,13 @@ export class FileFormElement extends BaseFormElement {
       webcam: false,
       multiple: true,
       description: `No more than ${this.webformElement['#multiple']} files accepted. Maximum total size is ${this.webformElement['#max_filesize']}MB.`,
-      filePattern:
-        '*.png,*.jpg,*.jpeg,*.pdf,*.doc,*.docx,*.xls,*.xlsx,*.csv,*.txt',
+      filePattern: this.webformElement['#file_extensions']
+        ? this.webformElement['#file_extensions']
+            .split(' ')
+            .map((ext) => `.${ext}`)
+            .join(',')
+        : '',
+
       fileKey: `files[${this.webformElement['#name']}]`,
       fileMaxSize: `${this.webformElement['#max_filesize']}MB`,
       fileMaxCount: this.webformElement['#multiple'],