@processmaker/screen-builder 2.90.0 → 2.91.0

package/src/components/sortable/Sortable.vue

@@ -15,6 +15,7 @@
         <button
           type="button"
           class="btn sortable-btn-new"
+          v-bind="testActions.btnNew"
           @click="$emit('add-page', $event)"
         >
           <i class="fa fa-plus"></i>
@@ -23,26 +24,47 @@
     </div>
 
     <SortableList
+      :fields="fields"
       :items="items"
       :filtered-items="filteredItems"
+      :inline-edit="inlineEdit"
+      :disable-key="disableKey"
+      :data-test-actions="testActions"
       @ordered="$emit('ordered', $event)"
       @item-edit="$emit('item-edit', $event)"
       @item-delete="$emit('item-delete', $event)"
-    />
+    >
+      <template #options="{ item }">
+        <slot name="options" :item="item"></slot>
+      </template>
+    </SortableList>
   </div>
 </template>
 
 <script>
-import SortableList from './sortableList/SortableList.vue'
+import SortableList from './sortableList/SortableList.vue';
 
 export default {
   name: 'Sortable',
   components: {
-    SortableList
+    SortableList,
   },
   props: {
+    fields: { type: Array, required: true },
     items: { type: Array, required: true },
-    filterKey: { type: String, required: true },
+    disableKey: { type: String, default: null },
+    inlineEdit: { type: Boolean, default: true },
+    dataTestActions: {
+      type: Object,
+      default: () => ({}),
+    },
+    searchProperties: {
+      type: Array,
+      required: false,
+      default() {
+        return []; // Return a new instance of the array
+      },
+    },
   },
   data() {
     return {
@@ -54,34 +76,94 @@ export default {
           this.$set(item, "order", index + 1);
         }
         return item;
-      })
+      }),
+      defaultTestActions: {
+        tableBox: { 'data-test': 'sortable-table-box' },
+        btnNew: { 'data-test': 'sortable-btn-new' },
+        btnEdit: { 'data-test': 'sortable-btn-edit' },
+        btnDelete: { 'data-test': 'sortable-btn-remove' },
+      },
     };
   },
+  computed: {
+    testActions() {
+      return { ...this.defaultTestActions, ...this.dataTestActions };
+    },
+  },
   watch: {
     search(value) {
-      this.filteredItems = this.filterItems(value, this.items);
+      this.filteredItems = this.filterItems(value, this.items, this.searchProperties);
     },
     items: {
       handler(newItems) {
         this.filteredItems = [...newItems];
 
         if (this.search.length > 0) {
-          this.filteredItems = this.filterItems(this.search, newItems);
+          this.filteredItems = this.filterItems(this.search, newItems, this.searchProperties);
         }
       },
       deep: true,
     },
   },
   methods: {
-    clearSearch(value) {
-      return value.trim().toLowerCase();
+    /**
+     * Filters items by searching within specified properties, including nested properties, considering substrings.
+     *
+     * @param {string} searchValue - The value to search for within item properties.
+     * @param {Array} items - The collection of items to filter.
+     * @param {Array} searchProperties - The properties to search within each item.
+     * @returns {Array} - The filtered items.
+     */
+    filterItems(searchValue, items, searchProperties) {
+      const cleanSearch = this.clearSearch(searchValue).toLowerCase();
+
+      return items.filter((item) => {
+        return this.propertyMatchesSearch(item, searchProperties, cleanSearch);
+      });
     },
-    filterItems(searchValue, items) {
-      const cleanSearch = this.clearSearch(searchValue);
-      return items.filter((item) => item[this.filterKey].toLowerCase().includes(cleanSearch));
+
+    /**
+     * Checks if any of the specified properties of an item match the cleaned search value as a substring.
+     *
+     * @param {Object} item - The item object to check.
+     * @param {Array} properties - The properties to search within each item.
+     * @param {string} cleanSearch - The cleaned and lowercase search value.
+     * @returns {boolean} - True if any property matches the search value, otherwise false.
+     */
+    propertyMatchesSearch(item, properties, cleanSearch) {
+      return properties.some((property) => {
+        const value = this.getPropertyValue(item, property);
+        if (value && typeof value === 'string') {
+          const normalizedValue = value.toLowerCase();
+          return normalizedValue.includes(cleanSearch);
+        }
+        return false;
+      });
+    },
+
+    /**
+     * Retrieves the value of a nested property within an object.
+     *
+     * @param {Object} obj - The object from which to retrieve the property value.
+     * @param {string} path - The path to the nested property, e.g., "item.title".
+     * @returns {*} - The value of the nested property if found, otherwise undefined.
+     */
+    getPropertyValue(obj, path) {
+      const parts = path.split('.');
+      return parts.reduce((acc, curr) => acc?.[curr], obj);
+    },
+
+    /**
+     * Cleans the search value by removing unwanted characters and trimming spaces.
+     *
+     * @param {string} searchValue - The value to be cleaned.
+     * @returns {string} - The cleaned search value.
+     */
+    clearSearch(searchValue) {
+      return searchValue.trim();
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped src="./sortable.scss"></style>

package/src/components/sortable/sortable.scss

@@ -1,12 +1,17 @@
 .sortable {
   &-box {
     font-family: "Open Sans", sans-serif !important;
+    overflow-x: auto;
   }
 
   &-search-box {
     display: flex;
     align-items: center;
     border-color: #cdddee !important;
+
+    & > input.form-control:focus {
+      border: 0 none !important;
+    }
   }
 
   &-search-icon {

package/src/components/sortable/sortableList/SortableList.vue

@@ -1,51 +1,90 @@
 <template>
   <div class="row mt-3">
-    <div class="col p-0 border rounded-lg sortable-list">
-      <div class="sortable-list-header">
-        <div class="sortable-item-icon"></div>
-        <div class="sortable-list-title">PAGE NAME</div>
-      </div>
-      <div class="sortable-container" @dragover="dragOver">
+    <div
+      class="p-0 border rounded-lg sortable-list"
+      v-bind="dataTestActions.tableBox"
+      @dragover="dragOver"
+    >
+      <div class="sortable-list-tr">
+        <div class="sortable-list-td"></div>
         <div
-          v-for="(item, index) in sortedItems"
-          :key="index"
-          :data-order="item.order"
-          :data-test="`item-${item.order}`"
-          :title="item.name"
-          draggable="true"
-          @dragstart="(event) => dragStart(event, item.order)"
-          @dragenter="(event) => dragEnter(event, item.order)"
-          @dragend="dragEnd"
-          class="sortable-item sortable-draggable"
+          v-for="field in fields"
+          :key="field.key"
+          class="sortable-list-td"
         >
+          <span class="sortable-list-separator">&nbsp;</span>
+          <span class="sortable-list-header">{{ field.label }}</span>
+        </div>
+        <div class="sortable-list-td">
+          <span class="sortable-list-separator">&nbsp;</span>
+        </div>
+      </div>
+      <div
+        v-for="(item, index) in sortedItems"
+        :key="`item-${index}`"
+        :data-order="item.order"
+        :data-test="`item-${item.order}`"
+        :title="item.name"
+        :class="[
+          'sortable-list-tr',
+          'sortable-item',
+          { 'sortable-item-disabled': isDisabled(item) },
+        ]"
+        draggable="true"
+        @dragstart="(event) => dragStart(event, item.order)"
+        @dragenter="(event) => dragEnter(event, item.order)"
+        @dragend="dragEnd"
+      >
+        <div class="sortable-list-td">
           <div class="sortable-item-icon">
             <i class="fas fa-bars"></i>
           </div>
-          <div class="rounded sortable-item-name">
-            <b-form-input
-              v-if="editRowIndex === index"
-              v-model="newName"
-              type="text"
-              autofocus
-              required
-              :state="validateState(newName, item)"
-              :error="validateError(newName, item)"
-              @blur.stop="onBlur(newName, item)"
-              @keydown.enter.stop="onBlur(newName, item)"
-              @keydown.esc.stop="onCancel(item)"
-              @focus="onFocus(item)"
-            />
-            <span v-else>{{ item.name }}</span>
-          </div>
+        </div>
+        <div
+          v-for="field in fields"
+          :key="field.key"
+          class="sortable-list-td sortable-item-prop"
+        >
+          <b-form-input
+            v-if="editRowIndex === index"
+            v-model="newName"
+            type="text"
+            autofocus
+            required
+            :state="validateState(newName, item)"
+            :error="validateError(newName, item)"
+            @blur.stop="onBlur(newName, item)"
+            @keydown.enter.stop="onBlur(newName, item)"
+            @keydown.esc.stop="onCancel(item)"
+            @focus="onFocus(item)"
+          />
+          <span v-else>{{ getItemValue(item, field.key, field.cb) }}</span>
+        </div>
+
+        <div class="sortable-list-td">
           <div class="border rounded-lg sortable-item-action">
             <button v-if="editRowIndex === index" class="btn">
               <i class="fas fa-check"></i>
             </button>
-            <button v-else class="btn" @click.stop="onClick(item, index)">
+            <button
+              v-else
+              v-b-tooltip="{ customClass: 'sortable-item-action-btn-tooltip' }"
+              class="btn"
+              :title="$t('Edit')"
+              v-bind="dataTestActions.btnEdit"
+              @click.stop="onClick(item, index)"
+            >
               <i class="fas fa-edit"></i>
             </button>
             <div class="sortable-item-vr"></div>
-            <button class="btn" @click="$emit('item-delete', item)">
+            <slot name="options" :item="item"></slot>
+            <button
+              v-b-tooltip="{ customClass: 'sortable-item-action-btn-tooltip' }"
+              class="btn"
+              :title="$t('Delete')"
+              v-bind="dataTestActions.btnDelete"
+              @click="$emit('item-delete', item)"
+            >
               <i class="fas fa-trash-alt"></i>
             </button>
           </div>
@@ -59,8 +98,12 @@
 export default {
   name: 'SortableList',
   props: {
+    fields: { type: Array, required: true },
     items: { type: Array, required: true },
     filteredItems: { type: Array, required: true },
+    inlineEdit: { type: Boolean, default: true },
+    disableKey: { type: String, default: null },
+    dataTestActions: { type: Object, required: true },
   },
   data() {
     return {
@@ -77,9 +120,22 @@ export default {
         this.refreshSort &&
         [...this.filteredItems].sort((a, b) => a.order - b.order);
       return sortedItems;
-    }
+    },
   },
   methods: {
+    /** Get the value of a nested field in an object
+     * @param {Object} item - The object to get the value from
+     * @param {String} fieldKey - The key of the field to get the value from
+     * @param {Function} cb - Callback function to apply to the value
+     *
+     * @returns {String} The value of the field
+     */
+    getItemValue(item, fieldKey, cb = null) {
+      return fieldKey.split('.').reduce((obj, key) => {
+        if (!obj[key]) return '';
+        return cb instanceof Function ? cb(obj[key]) : obj[key];
+      }, item);
+    },
     validateState(name, item) {
       const isEmpty = !name?.trim();
       const isDuplicated = this.items
@@ -120,6 +176,11 @@ export default {
       this.editRowIndex = null;
     },
     onClick(item, index) {
+      if (!this.inlineEdit) {
+        this.$emit("item-edit", item);
+        return;
+      }
+
       this.editRowIndex = index;
       this.$emit("item-edit", item);
     },
@@ -129,6 +190,9 @@ export default {
       this.draggedItem = order;
       // add dragging class to the element
       event.target.classList.add('dragging');
+      if (event?.dataTransfer) {
+        event.dataTransfer.effectAllowed = 'move';
+      }
     },
     dragEnter(event, order) {
       this.draggedOverItem = order;
@@ -185,8 +249,11 @@ export default {
     dragOver(event) {
       event.preventDefault();
     },
+    isDisabled(item) {
+      return this.disableKey ? item[this.disableKey] : false;
+    },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped src="./sortableList.scss"></style>

package/src/components/sortable/sortableList/sortableList.scss

@@ -2,44 +2,67 @@ $border-color: #cdddee;
 
 .sortable {
   &-list {
-    display: flex;
+    display: table;
     flex-direction: column;
+    width: 100%;
     border: 1px solid $border-color !important;
 
-    &-header {
-      display: flex;
-      align-items: center;
+    &-tr {
+      display: table-row;
+
+      &:last-child > .sortable-list-td {
+        border-bottom: none;
+      }
+    }
+
+    &-td {
+      display: table-cell;
       border-bottom: 1px solid $border-color;
+      white-space: nowrap;
+
+      &:first-child {
+        width: 60px;
+      }
+
+      &:nth-child(2) {
+        min-width: 30%;
+        width: auto;
+      }
+
+      &:not(:first-child):not(:nth-child(2)):not(:last-child) {
+        width: auto;
+      }
+
+      &:last-child {
+        width: 1%;
+        white-space: nowrap;
+      }
     }
 
-    &-title {
-      padding-left: 16px;
+    &-header {
+      padding: 16px 0 16px 16px;
       font-size: 14px;
-      font-weight: bold;
+      font-weight: 700;
       color: #566877;
+      text-transform: uppercase;
+      display: inline-block;
+      white-space: normal;
+    }
+    &-separator {
+      border-left: 1px solid $border-color;
+      display: inline-block;
+      padding: 0.5rem 0rem;
+      width: 1px;
     }
-  }
-
-  &-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 340px;
-    overflow-x: auto;
   }
 
   &-item {
-    display: flex;
-    align-items: center;
-    height: 56px;
-    border-bottom: 1px solid $border-color;
     cursor: move;
 
     &-icon {
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 64px;
       height: 56px;
     }
 
@@ -47,8 +70,7 @@ $border-color: #cdddee;
       color: #6A7888;
     }
 
-    &-name {
-      flex-grow: 1;
+    &-prop {
       padding: 8px 16px;
       font-size: 15px;
       color: #556271;
@@ -58,6 +80,18 @@ $border-color: #cdddee;
       display: flex;
       margin: 0 16px;
       border-color: $border-color !important;
+
+      &-btn-tooltip::v-deep {
+        & .tooltip-inner {
+          background-color: #EBEEF2 !important;
+          color: #444444 !important;
+        }
+
+        & .arrow:before {
+          border-top-color: #EBEEF2 !important;
+          border-bottom-color: #EBEEF2 !important;
+        }
+      }
     }
 
     &-vr {
@@ -65,9 +99,16 @@ $border-color: #cdddee;
       margin: 9px 0;
       border-right: 1px solid $border-color;
     }
+
+    &-disabled > .sortable-item-prop {
+      color: rgba(85, 98, 113, 0.5);
+    }
   }
 }
 
 .dragging {
   box-shadow: 0 1px 5px 0 rgba(86, 104, 119, 0.4);
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
 }