@processmaker/screen-builder 2.87.0 → 2.88.0

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

@@ -1,54 +1,67 @@
 <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"
     >
-      <template slot="ids" slot-scope="props">
-        <b-link
-          class="text-nowrap"
-          :href="openRequest(props.rowData, props.rowIndex)"
+      <template
+        v-for="(row, rowIndex) in data.data"
+        v-slot:[`row-${rowIndex}`]
+      >
+        <td
+          v-for="(header, colIndex) in tableHeaders"
+          :key="`${rowIndex}-${colIndex}`"
         >
-          #{{ props.rowData.id }}
-        </b-link>
-      </template>
-      <template slot="name" slot-scope="props">
-        <span v-uni-id="props.rowData.id.toString()">{{
-          props.rowData.name
-        }}</span>
-      </template>
-      <template slot="status" slot-scope="props">
-        <span>
-          <i :class="`fas fa-circle text-${props.rowData.status.color}`" />
-          {{ props.rowData.status.label }}
-        </span>
-      </template>
-      <template slot="actions" slot-scope="props">
-        <div class="actions">
-          <div class="popout">
-            <b-btn
-              v-b-tooltip.hover
-              v-uni-aria-describedby="props.rowData.id.toString()"
-              variant="link"
-              :href="openRequest(props.rowData, props.rowIndex)"
-              :title="$t('Open Request')"
+          <template v-if="containsHTML(getNestedPropertyValue(row, header))">
+            <div
+              :id="`element-${rowIndex}-${colIndex}`"
+              :class="{ 'pm-table-truncate': header.truncate }"
+              :style="{ maxWidth: header.width + 'px' }"
             >
-              <i class="fas fa-caret-square-right fa-lg fa-fw" />
-            </b-btn>
-          </div>
-        </div>
+              <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"
+              />
+            </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>
+        </td>
       </template>
-    </vuetable>
+    </filter-table>
   </div>
   <div v-else>
-    <formEmpty link="Requests" title="No Requests to Show" :url="noDataUrl" />
+    <formEmpty link="Requests" title="No Cases to Show" :url="noDataUrl" />
   </div>
 </template>
 
@@ -72,13 +85,15 @@ export default {
       orderDirection: "DESC",
       additionalParams: "",
       showTable: true,
+      pmqlSearch: "",
       sortOrder: [
         {
           field: "id",
           sortField: "id",
           direction: "desc"
         }
-      ]
+      ],
+      tableHeaders: [],
     };
   },
   computed: {
@@ -87,7 +102,7 @@ export default {
     }
   },
   mounted() {
-    this.setFields();
+    this.setupColumns();
     this.pmql = `requester = "${Processmaker.user.username}"`;
     this.fetch();
     this.$root.$on("dropdownSelectionRequest", this.fetchData);
@@ -102,6 +117,10 @@ export default {
           pmql = this.pmql;
         }
 
+        if (this.pmqlSearch) {
+          pmql = pmql + "AND" + this.pmqlSearch;
+        }
+
         let { filter } = this;
 
         if (filter && filter.length) {
@@ -135,7 +154,8 @@ export default {
           .then((response) => {
             this.showTable = response.data.data.length !== 0;
             for (const record of response.data.data) {
-              // format Status
+              record.case_number = this.formatOpenCase(record, "case_number");
+              record.case_title = this.formatOpenCase(record, "case_title");
               record.status = this.formatStatus(record.status);
             }
             this.tableData = response.data;
@@ -158,39 +178,6 @@ export default {
           });
       });
     },
-    setFields() {
-      this.fields.push({
-        name: "__slot:ids",
-        field: "id",
-        sortField: "id",
-        sortable: true,
-        title: "#"
-      });
-
-      this.fields.push({
-        name: "__slot:name",
-        field: "name",
-        sortField: "name",
-        sortable: true,
-        title: () => this.$t("Name")
-      });
-
-      this.fields.push({
-        name: "__slot:status",
-        field: "status",
-        sortField: "status",
-        sortable: true,
-        title: () => this.$t("Status")
-      });
-
-      this.fields.push({
-        name: "__slot:actions",
-        title: ""
-      });
-      this.$nextTick(() => {
-        this.$refs.vuetable.normalizeFields();
-      });
-    },
     formatStatus(status) {
       let color = "";
       let label = "";
@@ -215,9 +202,20 @@ export default {
           color = "success";
           label = "In Progress";
       }
-      return { color, label };
+      return `<span class="badge badge-${color} status-${color}"> ${label} </span>`;
     },
-    openRequest(data, index) {
+    /**
+     * Add the formart to column to open a case in other tab
+     */
+    formatOpenCase(value, option) {
+      const attr = value;
+      if (option === "case_title") {
+        attr[option] = value.case_title_formatted || value.case_title || "";
+      }
+      return `<a href="${this.openRequest(value)}" class="text-nowrap"
+        target="_blank">${attr[option]}</a>`;
+    },
+    openRequest(data) {
       return `/requests/${data.id}`;
     },
     classDueDate(value) {
@@ -231,25 +229,114 @@ export default {
         : "text-dark";
     },
     fetchData(selectedOptions) {
-      if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "all") {
+      if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "View All") {
         this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "${selectedOptions[1]}")`;
       }
       if (
         selectedOptions[0] === "as_participant" &&
-        selectedOptions[1] !== "all"
+        selectedOptions[1] !== "View All"
       ) {
         this.pmql = `(status = "${selectedOptions[1]}") AND (participant = "${Processmaker.user.username}")`;
       }
-      if (selectedOptions[1] === "all") {
+      if (selectedOptions[1] === "View All") {
         this.pmql = `(user_id = ${ProcessMaker.user.id}) AND ((status = "In Progress") OR (status = "Completed"))`;
       }
       this.fetch();
     },
     fetchSearch(searchData) {
-      this.pmql = "";
-      this.pmql = searchData;
+      this.pmqlSearch = "";
+      this.pmqlSearch = searchData;
       this.fetch();
+    },
+    setupColumns() {
+      const columns = this.getColumns();
+      this.tableHeaders = this.getColumns();
+
+      columns.forEach((column) => {
+        const field = {
+          title: () => this.$t(column.label),
+        };
+
+        switch (column.field) {
+          case "id":
+            field.name = "__slot:ids";
+            field.title = "#";
+            break;
+          case "participants":
+            field.name = "__slot:participants";
+            break;
+          case "name":
+            field.name = "__slot:name";
+            break;
+          case "case_title":
+            field.name = "__slot:case_title";
+            break;
+          default:
+            field.name = column.name || column.field;
+        }
+
+        if (!field.field) {
+          field.field = column.field;
+        }
+
+        if (column.format === "datetime") {
+          field.callback = "formatDateUser|datetime";
+        }
+
+        if (column.format === "date") {
+          field.callback = "formatDateUser|date";
+        }
+
+        if (column.sortable === true && !field.sortField) {
+          field.sortField = column.field;
+        }
+
+        this.fields.push(field);
+      });
+
+      this.fields.push({
+        name: "__slot:actions",
+        title: ""
+      });
+    },
+    getColumns() {
+      return [
+        {
+          label: "Case #",
+          field: "case_number",
+          sortable: true,
+          default: true,
+          width: 96,
+          fixed_width: 96
+        },
+        {
+          label: "Case title",
+          field: "case_title",
+          sortable: true,
+          default: true,
+          truncate: true,
+          width: 314,
+          fixed_width: 314,
+          resizable: false
+        },
+        {
+          label: "Status",
+          field: "status",
+          sortable: true,
+          default: true,
+          width: 113,
+          fixed_width: 314,
+          resizable: false,
+          filter_subject: { type: "Status" }
+        }
+      ];
     }
   }
 };
 </script>
+
+<style scoped>
+.pm-table-container {
+  height: 300px;
+}
+</style>