@processmaker/screen-builder 3.0.1 → 3.0.3

package/src/components/renderer/file-upload.vue

@@ -61,32 +61,34 @@
           </ul>
         </template>
       </uploader-list>
-      <uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file">
+      <uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file" 
+        :class="this.files.length > 0 && !this.multipleUpload ? 'cf-single-file-upload' : ''"
+      > 
         <b-button
           v-if="!required"
           @click="cfSkipFileUpload"
-          class="btn cf-skip-btn mb-3"
+          class="btn cf-skip-btn"
+          :class="showMultiUploadButton ? 'mb-3' : ''"
         >
           <i class="fas fa-arrow-left mr-2"></i> {{ $t('Skip Uploading') }}
         </b-button>
-
         <uploader-btn
           :attrs="nativeButtonAttrs"
           :class="[
             { disabled: disabled }, 
             'btn',
-            showSingleUploadButton ? 'cf-single-upload-btn' : (showMultiUploadButton ? 'cf-multi-upload-btn' : '')
+            showSingleUploadButton || files.length === 0 && !showMultiUploadButton ? 'cf-single-upload-btn mt-3' : (showMultiUploadButton ? 'cf-multi-upload-btn' : '')
           ]"
           tabindex="0"
           v-on:keyup.native="browse"
           :aria-label="$attrs['aria-label']"
         >
-          <span v-if="showSingleUploadButton"><i class="far fa-image mr-2"></i> {{ $t('Add File/Photo') }}</span>
+          <span v-if="showSingleUploadButton || files.length === 0 && !showMultiUploadButton"><i class="far fa-image mr-2"></i> {{ $t('Add File/Photo') }}</span>
           <span v-else-if="showMultiUploadButton"><i class="fas fa-plus mr-2"></i> {{ $t('Add another') }}</span>
         </uploader-btn>
 
-        <b-button v-if="files.length !== 0" class="cf-file-upload-submit" variant="primary" @click="emitConversationalFormSubmit" :aria-label="$t('Submit')">
-          <i class="fas fa-paper-plane"></i> <span v-if="files.length !== 0 && showMultiUploadButton">{{ $t('Send All') }}</span>
+        <b-button v-if="files.length !== 0" class="cf-file-upload-submit" :class="!showMultiUploadButton ? 'w-100 mt-3' : ''" variant="primary" @click="emitConversationalFormSubmit" :aria-label="$t('Submit')">
+          <i class="fas fa-paper-plane"></i> <span v-if="showMultiUploadButton">{{ $t('Send All') }}</span> <span v-else>{{ $t('Submit File/Photo') }}</span>
         </b-button>
       </uploader-drop>
       
@@ -156,6 +158,10 @@ export default {
     this.removeDefaultClasses();
   },
   mounted() {
+    if (this.value) {
+      this.fetchFiles();
+    }
+    
     this.$root.$on('set-upload-data-name',
       (recordList, index, id) => this.listenRecordList(recordList, index, id));
 
@@ -270,7 +276,7 @@ export default {
       return this.screenType === 'conversational-forms';
     },
     showSingleUploadButton() {
-      return this.files.length === 0 || !this.multipleUpload;
+      return this.files.length === 0 && !this.multipleUpload;
     },
     showMultiUploadButton() {
       return this.files.length !== 0 && this.multipleUpload;
@@ -402,7 +408,6 @@ export default {
     },
     setRequestFiles() {
       _.set(window, `PM4ConfigOverrides.requestFiles["${this.fileDataName}"]`, this.files);
-      console.log("!!!!!! SET REQUEST FILES", this.valueToSend());
       this.$emit('input', this.valueToSend());
     },
     valueToSend() {
@@ -491,7 +496,7 @@ export default {
         }
         this.$delete(this.nativeFiles, id);
       }
-
+      this.$emit('file-deleted', this.files);
     },
     addToFiles(fileInfo) {
       if (this.multipleUpload) {
@@ -528,6 +533,19 @@ export default {
         this.prefix = parent.loopContext + '.';
       }
     },
+    validateFile(file, acceptFiles){
+      const extensions = acceptFiles.filter(item => item.startsWith('.'));
+      const mimeTypes = acceptFiles.filter(item => !item.startsWith('.'));
+      const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
+      const fileType = file.fileType;
+      const isExtensionValid = extensions.includes(fileExtension);
+      const isMimeTypeValid = mimeTypes.includes(fileType);
+
+      if (!isExtensionValid && !isMimeTypeValid) {
+        return false;
+      }
+      return true;
+    },
     addFile(file) {
       if (this.disabled) {
         file.ignored = true;
@@ -544,7 +562,7 @@ export default {
 
       if (this.filesAccept) {
         file.ignored = true;
-        if (this.filesAccept.indexOf(file.fileType) !== -1) {
+        if (this.validateFile(file, this.filesAccept)) {
           file.ignored = false;
         }
         if (file.ignored) {
@@ -583,6 +601,10 @@ export default {
       }
 
       if (displayMessage.length > 0) {
+        const data = JSON.parse(displayMessage);
+        if (data.message) {
+          displayMessage = data.message;
+        }
         window.ProcessMaker.alert(`${this.$t('File Upload Error:')}  ${displayMessage}`, 'danger');
       }
 
@@ -612,7 +634,6 @@ export default {
         this.$set(this.nativeFiles, id, rootFile);
         this.addToFiles(fileInfo);
       } else {
-        console.log("!!!!!! FILE UPLOADED", name);
         this.$emit('input', name);
       }
     },
@@ -686,7 +707,29 @@ export default {
     },
     cfSkipFileUpload() {
       this.$emit('cf-skip-file-upload');
-    }
+    },
+    async fetchFiles() {
+      const fileIds = Array.isArray(this.value) ? this.value : [this.value];
+
+      const fetchPromises = fileIds.map(async (file) => {
+        const id = file?.file ?? file;
+        const endpoint = `files/${id}`;
+        try {
+            const response = await ProcessMaker.apiClient.get(endpoint);
+            if (response?.data) {
+                const fileExists = this.files.some(existingFile => existingFile.id === response.data.id);
+                // Check if the file already exists in the list before adding it.
+                if (!fileExists) {
+                    this.files.push(response.data);
+                }
+            }
+        } catch (error) {
+            console.error(`Failed to fetch file ${id}`, error);
+        }
+      });
+
+      return await Promise.all(fetchPromises);
+    },
   },
 };
 </script>
@@ -750,4 +793,8 @@ export default {
   box-shadow: 0px 12px 24px -12px #0000001F;
 }
 
+.form-control-file.cf-single-file-upload label {
+  display: none;
+}
+
 </style>

package/src/components/renderer/form-collection-record-control.vue

@@ -16,6 +16,7 @@
 <script>
 import VueFormRenderer from "../vue-form-renderer.vue";
 import CollectionRecordsList from "../inspector/collection-records-list.vue";
+import _ from 'lodash';
 
 const globalObject = typeof window === "undefined" ? global : window;
 
@@ -179,12 +180,12 @@ export default {
               this.selDisplayMode === "View" ? viewScreen : editScreen;
           
           this.loadScreen(this.screenCollectionId);
-
+         
           //This section validates if Collection has draft data
           if(this.taskDraft?.draft?.data == null || this.taskDraft.draft.data === '') {
             this.localData = respData;
           }else{
-            this.localData = this.taskDraft.draft.data;
+            this.localData = _.merge({}, respData, this.taskDraft.draft.data);
           }
           
         })
@@ -212,9 +213,9 @@ export default {
     },
     record(record) {
       this.hasMustache = false;
-      if (record && !isNaN(record) && record > 0 && this.collection) {
+      if (record && !isNaN(record) && record > 0 && this.collection.collectionId) {
         this.selRecordId = record;
-        this.loadRecordCollection(this.selCollectionId, record, this.collectionmode);
+        this.loadRecordCollection(this.collection.collectionId, record, this.selDisplayMode);
       } else {
         if (this.isMustache(record)) {
           this.callbackRecord();

package/src/components/renderer/form-collection-view-control.vue

@@ -206,9 +206,9 @@ export default {
     },
     record(record) {
       this.hasMustache = false;
-      if (record && !isNaN(record) && record > 0 && this.collection) {
+      if (record && !isNaN(record) && record > 0 && this.collection.collectionId) {
         this.selRecordId = record;
-        this.loadRecordCollection(this.selCollectionId, record, this.collectionmode);
+        this.loadRecordCollection(this.collection.collectionId, record, this.collectionmode);
       } else {
         if (this.isMustache(record)) {
           this.callbackRecord();

package/src/components/renderer/form-masked-input.vue

@@ -41,7 +41,7 @@
       <input
         v-else
         v-model="localValue"
-        v-bind="componentConfig"
+        v-bind="componentConfigEncField"
         v-uni-id="name"
         :name="name"
         class="form-control"
@@ -231,6 +231,7 @@ export default {
       labelBtn: '',
       errorEncryptedField: '',
       concealExecuted: false,
+      componentConfigEncField: null,
     };
   },
   computed: {
@@ -289,17 +290,18 @@ export default {
      * "encrypted" attribute is enabled
      */
     if (this.encryptedConfig?.encrypted) {
+      this.componentConfigEncField = JSON.parse(JSON.stringify(this.componentConfig));
       if (uuidValidate(this.localValue)) {
         this.inputType = "password";
         this.iconBtn = "fas fa-eye";
         this.labelBtn = this.$t("Reveal");
         this.concealExecuted = true;
-        this.componentConfig.readonly = true;
+        this.componentConfigEncField.readonly = true;
       } else {
         this.inputType = "text";
         this.iconBtn = "fas fa-eye-slash";
         this.labelBtn = this.$t("Conceal");
-        this.componentConfig.readonly = false;
+        this.componentConfigEncField.readonly = this.componentConfig.readonly;
       }
     } else {
       this.inputType = this.dataType;
@@ -381,7 +383,7 @@ export default {
       this.iconBtn = "fas fa-eye";
       this.labelBtn = this.$t("Reveal");
       this.concealExecuted = true;
-      this.componentConfig.readonly = true;
+      this.componentConfigEncField.readonly = true;
       this.errorEncryptedField = "";
 
       // Assign uuid from encrypted data
@@ -392,7 +394,7 @@ export default {
       this.inputType = this.dataType;
       this.iconBtn = "fas fa-eye-slash";
       this.labelBtn = this.$t("Conceal");
-      this.componentConfig.readonly = false;
+      this.componentConfigEncField.readonly = this.componentConfig.readonly;
 
       // Assign value decrypted
       this.localValue = decryptedValue;

package/src/components/renderer/form-record-list.vue

@@ -4,7 +4,7 @@
       <div class="col">
         <h4>{{ label }}</h4>
       </div>
-      <div class="col text-right">
+      <div v-if="styleMode === 'Classic'" class="col text-right">
         <button
           v-if="editable && !selfReferenced"
           class="btn btn-primary"
@@ -21,6 +21,7 @@
     <template v-else>
         <b-table
           ref="vuetable"
+          :class="tableClassModern"
           :per-page="perPage"
           :data-manager="dataManager"
           :fields="tableFields"
@@ -32,7 +33,9 @@
           :empty-text="$t('No Data Available')"
           :current-page="currentPage"
           data-cy="table"
+          :tbody-tr-class="rowClass"
         >
+        
           <!-- Slot header for checkbox (Select All) -->
           <template #head(checkbox)="data">
             <b-form-checkbox
@@ -61,7 +64,7 @@
           </template>
 
           <template #cell()="{ index, field, item }">
-
+            
             <template v-if="isFiledownload(field, item)">
               <span href="#" @click="downloadFile(item, field.key, index)">{{
                 mustache(field.key, item)
@@ -86,35 +89,71 @@
                 aria-label="Actions"
               >
                 <button
-                  class="btn btn-primary"
+                :class="{
+                    btn: true,
+                    'btn-primary': styleMode === 'Classic'
+                  }"
                   :title="$t('Edit')"
                   data-cy="edit-row"
                   @click="showEditForm(index, item.row_id)"
                 >
-                  <i class="fas fa-edit" />
+
+                  <i v-if="styleMode === 'Classic'" class="fas fa-edit"></i>
+                  <img v-else src="../../assets/pencil-square.svg" alt="edit" />
                 </button>
+
                 <button
-                  class="btn btn-danger"
+                  :class="{
+                    btn: true,
+                    'btn-danger': styleMode === 'Classic'
+                  }"
                   :title="$t('Delete')"
                   data-cy="remove-row"
-                  @click="showDeleteConfirmation(index, item.row_id)"
+                  popover="manual"
+                  @click="styleMode === 'Modern' 
+                  ? togglePopover(index, $event, item.row_id) 
+                  : showDeleteConfirmation(index, item.row_id)"
+                  ref="deleteButton"
                 >
-                  <i class="fas fa-trash-alt" />
+                  <i v-if="styleMode === 'Classic'" class="fas fa-trash-alt" />
+                  <img v-else src="../../assets/Shape.svg" alt="delete" />
                 </button>
+
+                <div v-show="isPopoverVisible === index" class="popover-content">
+                  <p>Are you sure you want to delete it?</p>
+                  <button class="btn btn-light" @click="hidePopover">CANCEL</button>
+                  <button class="btn btn-danger" @click="popover_remove()">DELETE</button>
+                </div>
+
               </div>
             </div>
           </template>
+         
         </b-table>
-      <b-pagination
-        v-if="tableData.total > perPage && (perPage !== 0)"
-        v-model="currentPage"
-        data-cy="table-pagination"
-        :total-rows="tableData.total"
-        :per-page="perPage"
-        :aria-label="$t('Pagination')"
-        aria-controls="vuetable"
-        @change="onChangePage"
-      />
+        <div class="d-flex justify-content-between align-items-center">
+          <div class="col text-left">
+            <b-pagination
+              v-if="tableData.total > perPage && (perPage !== 0)"
+              v-model="currentPage"
+              data-cy="table-pagination"
+              :total-rows="tableData.total"
+              :per-page="perPage"
+              :aria-label="$t('Pagination')"
+              aria-controls="vuetable"
+              @change="onChangePage"
+            />
+          </div>
+          <div v-if="styleMode === 'Modern'" class="col text-right">
+            <button
+              v-if="editable && !selfReferenced"
+              class="btn btn-link text-primary class-button-modern"
+              data-cy="add-row"
+              @click="showAddForm"
+            >
+              <span class="mr-1">+</span> {{ $t("Add") }}
+            </button>
+          </div>
+        </div>
     </template>
 
     <b-modal
@@ -199,6 +238,7 @@
     >
       <p>{{ $t("The form to be displayed is not assigned.") }}</p>
     </b-modal>
+    
     <div v-if="editable && selfReferenced" class="alert alert-danger">
       {{
         $t(
@@ -241,7 +281,9 @@ export default {
     "formWatchers",
     "_perPage",
     "source",
-    "paginationOption"
+    "paginationOption",
+    "designerMode",
+    "bgcolormodern"
   ],
   data() {
     return {
@@ -278,10 +320,30 @@ export default {
       selectedRows: [],
       selectedIndex: null, 
       rows: [],
-      selectAll: false
+      selectAll: false,
+      styleMode: "Classic",
+      isPopoverVisible: null,
+      popoverPosition: { top: '0px', left: '0px' }
     };
   },
   computed: {
+    tableClassModern() {
+      if (this.styleMode === 'Modern') {
+        switch (this.bgcolormodern) {
+          case 'alert alert-primary':
+            return 'record-list-table-primary';
+          case 'alert alert-success':
+            return 'record-list-table-success';
+          case 'alert alert-warning':
+            return 'record-list-table-warning';
+          case 'alert alert-secondary':
+            return 'record-list-table-secondary';
+          default:
+            return 'record-list-table-secondary';
+        }
+      }
+      return '';
+    },
     indeterminate() {
       return this.selectedRows.length > 0 && this.selectedRows.length < this.tableData.data.length;
     },
@@ -420,9 +482,37 @@ export default {
       this.onCollectionChange(this.source?.collectionFields?.collectionId, this.source?.collectionFields?.pmql);
     }
     
+    this.setStyleMode(this.designerMode?.designerOptions);
     this.$root.$emit("record-list-option", this.source?.sourceOptions);
   },
   methods: {
+    togglePopover(index, event, rowId) {
+      this.deleteIndex = _.find(this.tableData.data, { row_id: rowId });
+      this.isPopoverVisible = this.isPopoverVisible === index ? null : index;
+      if (this.isPopoverVisible !== null) {
+        const rect = event.target.getBoundingClientRect();
+        this.popoverPosition = {
+          top: `${rect.bottom + window.scrollY}px`,
+          left: `${rect.left + window.scrollX}px`
+        };
+      }
+    },
+    hidePopover() {
+      this.isPopoverVisible = null;
+    },
+    popover_remove() {
+      this.remove();
+      this.hidePopover();
+    },
+    rowClass(item) {
+      return this.isRowSelected(item) ? 'sel-row' : '';
+    },
+    isRowSelected(item) {
+      return this.selectedRows.includes(item) || this.selectedRow === item;
+    },
+    setStyleMode(value) {
+      this.styleMode = value ? value : "Classic";
+    },
     selectAllRows() {
       if (this.allRowsSelected) {
         const updatedRows = this.tableData.data.map((item, index) => {
@@ -769,13 +859,100 @@ export default {
       // Emit the newly updated data model
       this.$emit("input", data);
       this.$root.$emit("removed-record", this, recordData);
-    }
+    },
   }
 };
 </script>
 
-<style>
-.table td.table-column {
-  max-width: 300px;
+<style lang="scss">
+@import '../sortable/tableStyles.scss';
+.popover-content {
+  background-color: white;
+  border: 1px solid #ddd;
+  padding: 10px;
+  border-radius: 5px;
+  position: fixed;
+  z-index: 1000;
+  width: 285px;
+  text-align: center;
+  margin-top: 30px;
+}
+.popover-content p {
+  margin: 0 0 10px;
+}
+.popover-content .btn-light {
+  margin-right: 5px;
+}
+.sel-row {
+  background-color: #eaf2ff;
+}
+.class-button-modern {
+  font-size: 14px; 
+  font-weight: bold; 
+  text-decoration: none;
+}
+
+.record-list-table-base {
+  border-collapse: separate;
+  border-spacing: 0;
+ 
+  thead th {
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    &:first-child {
+      border-top-left-radius: 10px;
+      border-left: 1px solid;
+    }
+    &:last-child {
+      border-top-right-radius: 10px;
+      border-right: 1px solid;
+    }
+  }
+
+  tbody tr {
+    td {
+      border-bottom: 1px solid;
+    }
+    
+    td:first-child {
+      border-left: 1px solid;
+    }
+
+    td:last-child {
+      border-right: 1px solid;
+    }
+
+    &:last-child {
+      td:first-child {
+        border-bottom-left-radius: 10px;
+      }
+      td:last-child {
+        border-bottom-right-radius: 10px;
+      }
+    }
+  }
+
+  th:not(:first-child):not(:last-child),
+  td:not(:first-child):not(:last-child) {
+    border-left: none;
+    border-right: none;
+  }
 }
+
+.record-list-table-primary {
+  @include record-list-table($primary-bg-color, $primary-border-color);
+}
+
+.record-list-table-success {
+  @include record-list-table($success-bg-color, $success-border-color);
+}
+
+.record-list-table-warning {
+  @include record-list-table($warning-bg-color, $warning-border-color);
+}
+
+.record-list-table-secondary {
+  @include record-list-table($secondary-bg-color, $secondary-border-color);
+}
+
 </style>

package/src/components/sortable/tableStyles.scss

@@ -0,0 +1,42 @@
+$primary-bg-color: #f8fbff;
+$primary-border-color: #e6efff;
+
+$success-bg-color: #71d188;
+$success-border-color: #28a745;
+
+$warning-bg-color: #fff3cd;
+$warning-border-color: #ffc107;
+
+$secondary-bg-color: #fbfbfc;
+$secondary-border-color: #f3f5f7;
+
+@mixin record-list-table($bg-color, $border-color) {
+  @extend .record-list-table-base;
+
+  thead th {
+    background-color: $bg-color;
+    border-top-color: $border-color;
+    border-bottom-color: $border-color;
+    &:first-child {
+      border-left-color: $border-color;
+    }
+    &:last-child {
+      border-right-color: $border-color;
+    }
+  }
+
+  tbody tr {
+    td {
+      border-color: $border-color;
+      border-top: solid 0;
+    }
+
+    td:first-child {
+      border-left-color: $border-color;
+    }
+
+    td:last-child {
+      border-right-color: $border-color;
+    }
+  }
+}