@processmaker/screen-builder 3.0.1 → 3.0.2

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;
+    }
+  }
+}

package/src/components/task.vue

@@ -866,6 +866,7 @@ export default {
 
       if (
         elementDestinationValue &&
+        elementDestinationValue !== 'taskSource' &&
         data?.params[0]?.tokenId === this.taskId &&
         data?.params[0]?.requestStatus === 'ACTIVE'
       ) {

package/src/components/vue-form-builder.vue

@@ -245,7 +245,7 @@
                   v-model="element.items"
                   :validation-errors="validationErrors"
                   class="card-body"
-                  :class="elementCssClass(element)"
+                  :class="styleMode === 'Modern' ? elementCssClassModern(element) : elementCssClass(element)"
                   :selected="selected"
                   :config="element.config"
                   :ai-element="element"
@@ -299,7 +299,7 @@
                   :tabindex="element.config.interactive ? 0 : -1"
                   class="card-body m-0 pb-4 pt-4"
                   :class="[
-                    elementCssClass(element),
+                    styleMode === 'Modern' ? elementCssClassModern(element) : elementCssClass(element),
                     { 'prevent-interaction': !element.config.interactive }
                   ]"
                   @input="
@@ -376,7 +376,7 @@
               v-model="accordion.open"
             >
               <component
-                v-if="shouldShow(item)"
+                v-if="shouldShow(item, accordion)"
                 :is="item.type"
                 v-for="(item, index) in getInspectorFields(accordion)"
                 :key="index"
@@ -694,8 +694,10 @@ export default {
       collapse: {},
       groupOrder: {},
       searchProperties: ['name'],
-      showTemplatesPanel: false,
-      enableOption: true
+      enableOption: true,
+      enableDesignOption: true,
+      styleMode: null,
+      showTemplatesPanel: false
     };
   },
   computed: {
@@ -711,7 +713,7 @@ export default {
     clipboardItems() {
       return this.$store.getters["clipboardModule/clipboardItems"];
     },
-    
+
     sortedPages() {
       return [...this.config].sort((a, b) => a.order - b.order);
     },
@@ -855,6 +857,9 @@ export default {
     this.$root.$on("ai-form-progress-updated", (progress, nonce) => {
       this.updateProgress(progress, nonce);
     });
+    this.$root.$on("style-mode", (mode) => {
+      this.styleMode = mode;
+    });
     this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
@@ -876,7 +881,7 @@ export default {
         this.$refs.tabsBar.openClipboard();
       });
     },
-    shouldShow(item) {
+    shouldShow(item, accordion) {
       const sourceOptions = this.inspection.config[item.field]?.sourceOptions;
 
       if (sourceOptions === 'Variable') {
@@ -888,6 +893,21 @@ export default {
         this.enableOption = false;
       }
 
+      if(this.styleMode === "Modern") {
+        this.enableDesignOption = false;
+      } else {
+        this.enableDesignOption = true;
+      }
+
+      if(accordion.name === "Design") {
+        if(item.type === "ColorSelectRecord" && !this.enableDesignOption) {
+          return false;
+        }
+        if(item.type === "ColorSelectModern" && this.enableDesignOption ) {
+          return false;
+        }
+      }
+
       return !(item.if === "hideControl" && this.enableOption === false);
     },
     isCurrentPageEmpty(currentPage) {
@@ -1189,6 +1209,9 @@ export default {
       });
     },
     updateState() {
+      if (this.selected) {
+        this.checkAndRefreshUuids(this.selected, this.clipboardPage.items);
+      }
       // paste the clipboard items into the current page
       this.replaceClipboardContent(this.config);
       this.$store.dispatch("undoRedoModule/pushState", {
@@ -1523,6 +1546,26 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
+    /**
+     * Compares a config with an array and updates UUIDs if different.
+     *
+     * @param {Object} selected - The config to compare.
+     * @param {Array<Object>} clipboardItems - Array of configs to check.
+     * @returns {Array<Object>} - Updated array with new UUIDs.
+     */
+    checkAndRefreshUuids(selected, clipboardItems) {
+      return clipboardItems.map(config => {
+        // Use lodash to compare the config objects
+        const isEqual = _.isEqual(selected.config, config.config);
+
+        // If they are not equal, update the UUID
+        if (!isEqual) {
+          config.uuid = this.generateUUID(); // Update UUID
+        }
+
+        return config;
+      });
+    },
   }
 };
 </script>

package/src/form-builder-controls.js

@@ -46,6 +46,9 @@ import {
   tooltipProperty,
   LoadingSubmitButtonProperty,
   LabelSubmitButtonProperty,
+  bgcolorModern,
+  bgcolorPropertyRecord,
+  colorPropertyRecord,
 } from './form-control-common-properties';
 
 export default [
@@ -557,8 +560,17 @@ export default [
           },
           if: 'hideControl'
         },
-        colorProperty,
-        bgcolorProperty,
+        {
+          type: 'collectionDesignerMode',
+          field: 'designerMode',
+          config: {
+            label: 'Table Style',
+            helper: ''
+          }
+        },
+        colorPropertyRecord,
+        bgcolorPropertyRecord,
+        bgcolorModern
       ],
     },
   },

package/src/form-control-common-properties.js

@@ -1,6 +1,33 @@
 import Tooltip from './components/inspector/tooltip';
 import DeviceVisibility from './components/inspector/device-visibility';
 
+export const bgcolorModern = {
+  type: 'ColorSelectModern',
+  field: 'bgcolormodern',
+  config: {
+    label: '',
+    helper: '',
+    options: [
+      {
+        value: 'alert alert-primary',
+        content: 'primary',
+      },
+      {
+        value: 'alert alert-success',
+        content: 'success',
+      },
+      {
+        value: 'alert alert-warning',
+        content: 'warning',
+      },
+      {
+        value: 'alert alert-secondary',
+        content: 'secondary',
+      },
+    ],
+  },
+};
+
 export const bgcolorProperty = {
   type: 'ColorSelect',
   field: 'bgcolor',
@@ -44,6 +71,49 @@ export const bgcolorProperty = {
   },
 };
 
+export const bgcolorPropertyRecord = {
+  type: 'ColorSelectRecord',
+  field: 'bgcolor',
+  config: {
+    label: 'Background Color',
+    helper: 'Set the element\'s background color',
+    options: [
+      {
+        value: 'alert alert-primary',
+        content: 'primary',
+      },
+      {
+        value: 'alert alert-secondary',
+        content: 'secondary',
+      },
+      {
+        value: 'alert alert-success',
+        content: 'success',
+      },
+      {
+        value: 'alert alert-danger',
+        content: 'danger',
+      },
+      {
+        value: 'alert alert-warning',
+        content: 'warning',
+      },
+      {
+        value: 'alert alert-info',
+        content: 'info',
+      },
+      {
+        value: 'alert alert-light',
+        content: 'light',
+      },
+      {
+        value: 'alert alert-dark',
+        content: 'dark',
+      },
+    ],
+  },
+};
+
 export const colorProperty = {
   type: 'ColorSelect',
   field: 'color',
@@ -87,6 +157,49 @@ export const colorProperty = {
   },
 };
 
+export const colorPropertyRecord = {
+  type: 'ColorSelectRecord',
+  field: 'color',
+  config: {
+    label: 'Text Color',
+    helper: 'Set the element\'s text color',
+    options: [
+      {
+        value: 'text-primary',
+        content: 'primary',
+      },
+      {
+        value: 'text-secondary',
+        content: 'secondary',
+      },
+      {
+        value: 'text-success',
+        content: 'success',
+      },
+      {
+        value: 'text-danger',
+        content: 'danger',
+      },
+      {
+        value: 'text-warning',
+        content: 'warning',
+      },
+      {
+        value: 'text-info',
+        content: 'info',
+      },
+      {
+        value: 'text-light',
+        content: 'light',
+      },
+      {
+        value: 'text-dark',
+        content: 'dark',
+      },
+    ],
+  },
+};
+
 // Ref https://mathiasbynens.be/notes/javascript-identifiers
 export const javascriptReservedKeywords = 'null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false';
 
@@ -96,8 +209,8 @@ export const keyNameProperty = {
   config: {
     label: 'Variable Name',
     name: 'Variable Name',
-    // Update tests/e2e/specs/Builder.spec.js when changing this
-    validation: 'regex:/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$/|required|not_in:' + javascriptReservedKeywords,
+    // Update tests/e2e/specs/Builder.spec.js when changing dot_notation
+    validation: 'dot_notation|required|not_in:' + javascriptReservedKeywords,
     helper: 'A variable name is a symbolic name to reference information.',
   },
 };

package/src/mixins/Clipboard.js

@@ -58,11 +58,17 @@ export default {
     addUuidToElements(screenConfig) {
       const replaceInPage = (page) => {
         page.items.forEach((item, index) => {
-          if (!item.uuid) {
-            item.uuid = this.generateUUID();
-          }
-          if (item.items) {
-            replaceInPage(item);
+          if (item instanceof Array) {
+            // multi-column each item in the column
+            replaceInPage({ items: item });
+          } else {
+            // loop through children
+            if (!item.uuid) {
+              item.uuid = this.generateUUID();
+            }
+            if (item.items) {
+              replaceInPage(item);
+            }
           }
         });
       }

package/src/mixins/HasColorProperty.js

@@ -7,6 +7,11 @@ export default {
       element.config.color ? css.push(element.config.color) : null;
       return css.join(' ');
     },
+    elementCssClassModern(element) {
+      const css = [];
+      element.config.bgcolormodern ? css.push(element.config.bgcolormodern) : null;
+      return css.join(' ');
+    }
   },
 };