@processmaker/screen-builder 2.87.1 → 2.88.0

package/src/components/renderer/form-tasks.vue

@@ -1,48 +1,134 @@
 <template>
   <div v-if="showTable">
-    <vuetable
-      ref="vuetable"
-      :data-manager="dataManager"
-      :sort-order="sortOrder"
-      :api-mode="false"
-      :fields="fields"
+    <filter-table
+      :headers="tableHeaders"
       :data="tableData"
-      :css="css"
-      data-path="data"
-      pagination-path="meta"
+      :unread="unreadColumnName"
+      :loading="shouldShowLoader"
+      @table-row-mouseover="handleRowMouseover"
+      @table-row-mouseleave="handleRowMouseleave"
     >
-      <template slot="name" slot-scope="props">
-        <b-link
-          v-uni-id="props.rowData.id.toString()"
-          :href="onAction('edit', props.rowData, props.rowIndex)"
+      <template
+        v-for="(column, index) in tableHeaders"
+        v-slot:[column.field]
+      >
+        <div
+          :key="index"
+          style="display: inline-block"
         >
-          {{ props.rowData.element_name }}
-        </b-link>
+          <img
+            v-if="column.field === 'is_priority'"
+            src="../../assets/priority-header.svg"
+            alt="priority-header"
+            width="20"
+            height="20"
+          />
+          <span v-else>{{ $t(column.label) }}</span>
+        </div>
       </template>
-      <template slot="requestName" slot-scope="props">
-        <b-link
-          :href="onAction('showRequestSummary', props.rowData, props.rowIndex)"
+      <template
+        v-for="(row, rowIndex) in tableData.data"
+        v-slot:[`row-${rowIndex}`]
+      >
+        <td v-for="(header, colIndex) in tableHeaders"
+          :key="`${rowIndex}-${colIndex}`"
         >
-          #{{ props.rowData.process_request.id }}
-          {{ props.rowData.process_request.name }}
-        </b-link>
+          <template v-if="containsHTML(getNestedPropertyValue(row, header))">
+            <div
+              :id="`element-${rowIndex}-${colIndex}`"
+              :class="{ 'pm-table-truncate': header.truncate }"
+              :style="{ maxWidth: header.width + 'px' }"
+            >
+              <span v-html="sanitize(getNestedPropertyValue(row, header))"></span>
+            </div>
+            <b-tooltip
+              v-if="header.truncate"
+              :target="`element-${rowIndex}-${colIndex}`"
+              custom-class="pm-table-tooltip"
+              @show="checkIfTooltipIsNeeded"
+            >
+              {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
+            </b-tooltip>
+          </template>
+          <template v-else>
+            <template v-if="isComponent(row[header.field])">
+              <component
+                :is="row[header.field].component"
+                v-bind="row[header.field].props"
+              >
+              </component>
+            </template>
+            <template v-else>
+              <template v-if="header.field === 'due_at'">
+                <span
+                  :class="[
+                    'badge',
+                    'badge-' + row['color_badge'],
+                    'due-' + row['color_badge']
+                  ]"
+                >
+                  {{ formatRemainingTime(row.due_at) }}
+                </span>
+                <span>{{ getNestedPropertyValue(row, header) }}</span>
+              </template>
+              <template v-else-if="header.field === 'is_priority'">
+                <span>
+                  <img
+                    :src="getImgPriority(row[header.field])"
+                    :alt="row[header.field] ? 'priority' : 'no-priority'"
+                    width="20"
+                    height="20"
+                    @click.prevent="togglePriority(row.id, !row[header.field])"
+                  />
+                </span>
+              </template>
+              <template v-else>
+                <div
+                  :id="`element-${rowIndex}-${colIndex}`"
+                  :class="{ 'pm-table-truncate': header.truncate }"
+                  :style="{ maxWidth: header.width + 'px' }"
+                >
+                  {{ getNestedPropertyValue(row, header) }}
+                  <b-tooltip
+                    v-if="header.truncate"
+                    :target="`element-${rowIndex}-${colIndex}`"
+                    custom-class="pm-table-tooltip"
+                    @show="checkIfTooltipIsNeeded"
+                  >
+                    {{ getNestedPropertyValue(row, header) }}
+                  </b-tooltip>
+                </div>
+              </template>
+            </template>
+          </template>
+        </td>
       </template>
-      <template slot="dueDate" slot-scope="props">
-        <span :class="classDueDate(props.rowData.due_at)">
-          {{ formatDate(props.rowData.due_at) }}
-        </span>
-      </template>
-      <template slot="completedDate" slot-scope="props">
-        <span class="text-dark">
-          {{ formatDate(props.rowData.completed_at) }}
-        </span>
-      </template>
-      <template slot="preview" slot-scope="props">
-        <span>
-          <i class="fa fa-eye" @click="previewTasks(props.rowData)" />
-        </span>
+    </filter-table>
+    <component
+      :is="taskTooltip"
+      v-show="isTooltipVisible"
+      :position="rowPosition"
+    >
+      <template v-slot:task-tooltip-body>
+        <div @mouseover="clearHideTimer" @mouseleave="hideTooltip">
+          <slot
+            name="tooltip"
+            :tooltip-row-data="tooltipRowData"
+            :preview-tasks="previewTasks"
+          >
+            <span>
+              <b-button
+                class="icon-button"
+                variant="light"
+                @click="previewTasks(tooltipRowData)"
+              >
+                <i class="fas fa-eye" />
+              </b-button>
+            </span>
+          </slot>
+        </div>
       </template>
-    </vuetable>
+    </component>
     <component :is="tasksPreview" ref="preview-sidebar" />
   </div>
   <div v-else>
@@ -71,6 +157,8 @@ export default {
       order_direction: "DESC",
       status: "",
       showTable: true,
+      tableHeaders: [],
+      pmqlSearch: "",
       sortOrder: [
         {
           field: "ID",
@@ -78,8 +166,16 @@ export default {
           direction: "DESC"
         }
       ],
+      advancedFilter: "",
       tasksPreview:
-        (window.SharedComponents && window.SharedComponents.TasksHome) || {}
+        (window.SharedComponents && window.SharedComponents.TasksHome) || {},
+      taskTooltip:
+        (window.SharedComponents && window.SharedComponents.TaskTooltip) || {},
+      rowPosition: {},
+      ellipsisShow: false,
+      isTooltipVisible: false,
+      disableRuleTooltip: false,
+      hiderTimer: null
     };
   },
   computed: {
@@ -88,8 +184,8 @@ export default {
     }
   },
   mounted() {
-    this.setFields();
-    this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
+    this.setupColumns();
+    this.pmql = `(user_id = ${ProcessMaker.user.id})`;
     this.fetch();
     this.$root.$on("dropdownSelectionTask", this.fetchData);
     this.$root.$on("searchTask", this.fetchSearch);
@@ -111,6 +207,10 @@ export default {
           pmql = this.pmql;
         }
 
+        if (this.pmqlSearch) {
+          pmql = pmql + "AND" + this.pmqlSearch;
+        }
+
         if (this.filterDropdowns !== undefined) {
           filterDropdowns = this.filterDropdowns;
         }
@@ -145,12 +245,20 @@ export default {
         ProcessMaker.apiClient
           .get(
             `tasks?page=${this.page}&include=process,processRequest,processRequest.user,user,data` +
-              `&pmql=${encodeURIComponent(pmql)}&per_page=${
-                this.perPage
-              }${filterParams}${this.getSortParam()}&non_system=true&${filterDropdowns}`
+              `&pmql=${encodeURIComponent(pmql)}
+              &per_page=${this.perPage}
+              ${filterParams}
+              ${this.getSortParam()}
+              ${this.advancedFilter}
+              &non_system=true&${filterDropdowns}`
           )
           .then((response) => {
             this.showTable = response.data.data.length !== 0;
+            for (const record of response.data.data) {
+              record["case_title"] = this.formatCaseTitle(record.process_request, record);
+              record["color_badge"] = this.formatColorBadge(record["due_at"]);
+              record["element_name"] = this.formatActiveTask(record);
+            }
             this.tableData = response.data;
             this.countResponse = this.tableData.meta.total;
             this.countOverdue = `${this.tableData.meta.in_overdue}`;
@@ -174,19 +282,81 @@ export default {
           });
       });
     },
+    formatActiveTask(row) {
+      return `
+      <a href="${this.openTask(row)}"
+        data-cy="active-task-data"
+        class="text-nowrap">
+        ${row.element_name}
+      </a>`;
+    },
+    formatColorBadge(date) {
+      const days = this.remainingTime(date);
+      return days >= 0 ? "primary" : "danger";
+    },
+    formatCaseTitle(processRequest, record) {
+      const draftBadge = this.verifyDraft(record);
+      return `
+        ${draftBadge}
+        <a href="${this.openRequest(processRequest)}" class="text-nowrap">
+         ${this.getCaseTitle(processRequest, record)}
+        </a>`;
+    },
+    getCaseTitle(process, record) {
+      return (
+        process.case_title_formatted ||
+        process.case_title ||
+        record.case_title ||
+        ""
+      );
+    },
+    verifyDraft(record) {
+      let draftBadge = "";
+      if (record.draft && record.status !== "CLOSED") {
+        draftBadge = `
+          <span class ="badge badge-warning status-warnig">
+            ${this.$t("Draft")}
+          </span>
+        `;
+      }
+      return draftBadge;
+    },
+    openTask(data) {
+      return `/tasks/${data.id}/edit`;
+    },
+    openRequest(data) {
+      return `/requests/${data.id}`;
+    },
     getColumns() {
       const columns = [
         {
           label: "Task",
-          field: "task",
+          field: "element_name",
           sortable: true,
-          default: true
+          default: true,
+          width: 153,
+          fixed_width: 153,
+          resizable: false
+        },
+        {
+          label: "Priority",
+          field: "is_priority",
+          sortable: false,
+          default: true,
+          width: 48,
+          fixed_width: 48,
+          resizable: false
         },
         {
-          label: "Request",
-          field: "request",
+          label: "Case title",
+          field: "case_title",
+          name: "__slot:case_number",
           sortable: true,
-          default: true
+          default: true,
+          width: 314,
+          truncate: true,
+          fixed_width: 314,
+          resizable: false
         }
       ];
 
@@ -195,19 +365,26 @@ export default {
           label: "Completed",
           field: "completed_at",
           sortable: true,
-          default: true
+          default: true,
+          width: 220,
+          fixed_width: 220,
+          resizable: false
         });
       } else {
         columns.push({
           label: "Due",
           field: "due_at",
           sortable: true,
-          default: true
+          default: true,
+          width: 220,
+          fixed_width: 220,
+          resizable: false
         });
       }
       return columns;
     },
-    setFields() {
+    setupColumns() {
+      this.tableHeaders = this.getColumns();
       const columns = this.getColumns();
 
       columns.forEach((column) => {
@@ -221,6 +398,10 @@ export default {
             field.field = "element_name";
             field.sortField = "element_name";
             break;
+          case "is_priority":
+            field.name = "__slot:is_priority";
+            field.field = "is_priority";
+            break;
           case "request":
             field.name = "__slot:requestName";
             field.sortField = "process_requests.id,process_requests.name";
@@ -254,10 +435,6 @@ export default {
         name: "__slot:preview",
         title: ""
       });
-
-      this.$nextTick(() => {
-        this.$refs.vuetable.normalizeFields();
-      });
     },
     formatDate(value, format) {
       format = format || "";
@@ -298,9 +475,15 @@ export default {
         : "text-dark";
     },
     fetchData(selectedOption) {
-      if (selectedOption === "In Progress" || selectedOption === "all") {
-        this.filterDropdowns = "";
-        this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
+      this.filterDropdowns = "";
+      this.pmql = `(user_id = ${ProcessMaker.user.id})`
+      this.advancedFilter = "";
+      if (selectedOption === "Self-service") {
+        this.pmql = "";
+        this.advancedFilter = `&advanced_filter=[${encodeURIComponent('{"subject":{"type":"Status","value":"status"},"operator":"=","value":"Self Service"}')}]`;
+      }
+      if (selectedOption === "In Progress") {
+        this.pmql = this.pmql + `AND (status = "In Progress")`;
       }
       if (selectedOption === "Overdue") {
         this.filterDropdowns = "overdue=true";
@@ -308,10 +491,126 @@ export default {
       this.fetch();
     },
     fetchSearch(searchData) {
-      this.pmql = "";
-      this.pmql = searchData;
+      this.pmqlSearch = "";
+      this.pmqlSearch = searchData;
       this.fetch();
+    },
+    formatRemainingTime(date) {
+      const millisecondsPerDay = 1000 * 60 * 60 * 24;
+      const remaining = this.remainingTime(date);
+      const daysRemaining = Math.ceil(remaining / millisecondsPerDay);
+      if (daysRemaining <= 1 && daysRemaining >= -1) {
+        const hoursRemaining = Math.ceil(remaining / (1000 * 60 * 60));
+        return `${hoursRemaining}H`;
+      }
+
+      return `${daysRemaining}D`;
+    },
+    remainingTime(date) {
+      date = moment(date);
+      if (!date.isValid()) {
+        return 0;
+      }
+      return date.diff(this.now);
+    },
+    sanitizeTooltip(html) {
+      let cleanHtml = html.replace(/<script(.*?)>[\s\S]*?<\/script>/gi, "");
+      cleanHtml = cleanHtml.replace(/<style(.*?)>[\s\S]*?<\/style>/gi, "");
+      cleanHtml = cleanHtml.replace(
+        /<(?!img|input|meta|time|button|select|textarea|datalist|progress|meter)[^>]*>/gi,
+        ""
+      );
+      cleanHtml = cleanHtml.replace(/\s+/g, " ");
+
+      return cleanHtml;
+    },
+    getImgPriority(data) {
+      return data ? "/img/priority.svg" : "/img/no-priority.svg";
+    },
+    togglePriority(taskId, isPriority) {
+      ProcessMaker.apiClient
+        .put(`tasks/${taskId}/setPriority`, { is_priority: isPriority })
+        .then(() => {
+          this.fetch();
+        });
+    },
+    handleRowMouseover(row) {
+      debugger;
+      if (this.ellipsisShow) {
+        this.isTooltipVisible = !this.disableRuleTooltip;
+        this.clearHideTimer();
+        return;
+      }
+      this.clearHideTimer();
+
+      const tableContainer = document.getElementById("table-container");
+      const rectTableContainer = tableContainer.getBoundingClientRect();
+      const topAdjust = rectTableContainer.top;
+
+      let elementHeight = 28;
+
+      this.isTooltipVisible = !this.disableRuleTooltip;
+      this.tooltipRowData = row;
+
+      const rowElement = document.getElementById(`row-${row.id}`);
+      let yPosition = 0;
+
+      const rect = rowElement.getBoundingClientRect();
+      yPosition = rect.top + window.scrollY;
+
+      const selectedFiltersBar = document.querySelector(
+        ".selected-filters-bar"
+      );
+      const selectedFiltersBarHeight = selectedFiltersBar
+        ? selectedFiltersBar.offsetHeight
+        : 0;
+
+      elementHeight -= selectedFiltersBarHeight;
+
+      const rightBorderX = rect.right;
+
+      const bottomBorderY = yPosition - topAdjust - elementHeight + 100;
+
+      this.rowPosition = {
+        x: rightBorderX,
+        y: bottomBorderY
+      };
+    },
+    handleRowMouseleave() {
+      this.startHideTimer();
+    },
+    startHideTimer() {
+      this.hideTimer = setTimeout(() => {
+        this.hideTooltip();
+      }, 500);
+    },
+    clearHideTimer() {
+      clearTimeout(this.hideTimer);
+    },
+    hideTooltip() {
+      if (this.ellipsisShow) {
+        return;
+      }
+      this.isTooltipVisible = false;
     }
   }
 };
 </script>
+
+<style scoped>
+.due-danger {
+  background-color: rgba(237, 72, 88, 0.2);
+  color: rgba(237, 72, 88, 1);
+  font-weight: 600;
+  border-radius: 5px;
+}
+.due-primary {
+  background: rgba(205, 221, 238, 1);
+  color: rgba(86, 104, 119, 1);
+  font-weight: 600;
+  border-radius: 5px;
+}
+.pm-table-container {
+  height: 300px;
+}
+</style>

package/src/components/task.vue

@@ -23,7 +23,6 @@
           <vue-form-renderer
             ref="renderer"
             v-model="requestData"
-            :class="{ loading: loadingTask }"
             :config="screen.config"
             :computed="screen.computed"
             :custom-css="screen.custom_css"
@@ -121,7 +120,6 @@ export default {
       refreshScreen: 0,
       redirecting: null,
       loadingButton: false,
-      loadingTask: false,
     };
   },
   watch: {
@@ -321,9 +319,6 @@ export default {
           })
           .catch(() => {
             this.hasErrors = true;
-          })
-          .finally(() => {
-            this.loadingTask = false;
           });
       });
     },
@@ -623,9 +618,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.loading {
-  pointer-events: none;
-}
-</style>

package/src/form-builder-controls.js

@@ -951,10 +951,10 @@ export default [
             label: "List Table",
             options: [
               { value: "My Tasks", content: "My Tasks" },
-              { value: "My Requests", content: "My Requests" },
+              { value: "My Requests", content: "My Cases" },
               {
                 value: "Start New Request",
-                content: "Start New Request"
+                content: "Start New Case"
               }
             ]
           }

package/src/mixins/datatable.js

@@ -1,3 +1,5 @@
+import { get } from "lodash";
+
 export default {
   data() {
     return {
@@ -28,6 +30,90 @@ export default {
       }
       this.orderDirection = sortOrder[0].direction;
       this.fetch();
+    },
+    getNestedPropertyValue(obj, header) {
+      return this.format(get(obj, header.field), header);
+    },
+    format(value, header) {
+      let config = "";
+      if (header.format === "datetime") {
+        config = ProcessMaker.user.datetime_format;
+        value = this.convertUTCToLocal(value, config);
+      }
+      if (header.format === "date") {
+        config = ProcessMaker.user.datetime_format.replace(
+          /[\sHh:msaAzZ]/g,
+          ""
+        );
+        value = this.convertUTCToLocal(value, config);
+      }
+      return value;
+    },
+    convertUTCToLocal(value, config) {
+      if (value) {
+        if (moment(value).isValid()) {
+          return window.moment(value).format(config);
+        }
+        return value;
+      }
+      return "-";
+    },
+    containsHTML(text) {
+      const doc = new DOMParser().parseFromString(text, "text/html");
+      return Array.from(doc.body.childNodes).some(
+        (node) => node.nodeType === Node.ELEMENT_NODE
+      );
+    },
+    isComponent(content) {
+      if (content && typeof content === "object") {
+        return content.component && typeof content.props === "object";
+      }
+      return false;
+    },
+    sanitize(html) {
+      return this.removeScripts(html);
+    },
+    removeScripts(input) {
+      const doc = new DOMParser().parseFromString(input, "text/html");
+
+      const scripts = doc.querySelectorAll("script");
+      scripts.forEach((script) => {
+        script.remove();
+      });
+
+      const styles = doc.querySelectorAll("style");
+      styles.forEach((style) => {
+        style.remove();
+      });
+
+      return doc.body.innerHTML;
+    },
+    changePage(page) {
+      this.page = page;
+      this.fetch();
+    },
+    changePerPage(value) {
+      this.perPage = value;
+      this.fetch();
+    },
+    formatAvatar(user) {
+      return {
+        component: "AvatarImage",
+        props: {
+          size: "25",
+          "input-data": user,
+          "hide-name": false,
+          "name-clickable": true
+        }
+      };
+    },
+    formatCategory(categories) {
+      return categories.map((item) => item.name).join(", ");
+    },
+    checkIfTooltipIsNeeded(e, v) {
+      if (e.target.offsetWidth >= e.target.scrollWidth) {
+        e.preventDefault();
+      }
     }
   }
 };