From 23d09e309a72aedd8d2c456cfc62ead1b1eb9e99 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Thu, 8 Feb 2024 13:28:24 +0000
Subject: [PATCH 1/4] Applying filters on Custom Columns in savedsearch

---
 .../components/shared/FilterTableBodyMixin.js | 37 +++++++++++++++++++
 .../requests/components/RequestsListing.vue   |  4 +-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/shared/FilterTableBodyMixin.js b/resources/js/components/shared/FilterTableBodyMixin.js
index 41b8c9aaea..d8bbf4c4d0 100644
--- a/resources/js/components/shared/FilterTableBodyMixin.js
+++ b/resources/js/components/shared/FilterTableBodyMixin.js
@@ -50,5 +50,42 @@ export default {
     getNestedPropertyValue(obj, path) {
       return get(obj, path);
     },
+    format(value, format, column, datax) {
+      let config = "";
+      if (format === "datetime") {
+        config = ProcessMaker.user.datetime_format;
+        value = this.checkCustomColumnData(column, datax, config, value);
+      }
+      if (format === "date") {
+        config = ProcessMaker.user.datetime_format.replace(/[\sHh:msaAzZ]/g, "");
+        value = this.checkCustomColumnData(column, datax, config, value);
+      }
+      return value;
+    },
+    convertUTCToLocal(value, config) {
+      if (value) {
+        if (moment(value).isValid()) {
+          return window.moment(value)
+            .format(config);
+        }
+        return value;
+      }
+      return "-";
+    },
+    checkCustomColumnData(columnName, dataColumn, config, originValue) {
+      let columnValue = "";
+      if (columnName.startsWith("data.")) {
+        columnName = columnName.substring("data.".length);
+        for (const key in dataColumn) {
+          if (key === columnName) {
+            columnValue = dataColumn[key];
+            return this.convertUTCToLocal(columnValue, config);
+          }
+        }
+      }
+      else{
+        return originValue;
+      }
+    }
   },
 };
diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index 5207d5f959..0843881abb 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -72,13 +72,13 @@
                   :class="{ 'pm-table-truncate': header.truncate }"
                   :style="{ maxWidth: header.width + 'px' }"
                 >
-                  {{ getNestedPropertyValue(row, header.field) }}
+                  {{ format(getNestedPropertyValue(row, header.field), header.format, header.field, row.data) }}
                   <b-tooltip
                     v-if="header.truncate"
                     :target="`element-${rowIndex}-${colIndex}`"
                     custom-class="pm-table-tooltip"
                   >
-                    {{ getNestedPropertyValue(row, header.field) }}
+                    {{ format(getNestedPropertyValue(row, header.field), header.format, header.field, row.data) }}
                   </b-tooltip>
                 </div>
               </template>

From 96d9ffde5ac473bed814be706cb084188344e1c5 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Thu, 8 Feb 2024 14:02:42 +0000
Subject: [PATCH 2/4] Adding format to TasksList

---
 resources/js/tasks/components/TasksList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index a57360d4db..9ecc663580 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -81,13 +81,13 @@
                     :class="{ 'pm-table-truncate': header.truncate }"
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ getNestedPropertyValue(row, header.field) }}
+                    {{ format(getNestedPropertyValue(row, header.field), header.format, header.field, row.data) }}
                     <b-tooltip
                       v-if="header.truncate"
                       :target="`element-${rowIndex}-${colIndex}`"
                       custom-class="pm-table-tooltip"
                     >
-                      {{ getNestedPropertyValue(row, header.field) }}
+                      {{ format(getNestedPropertyValue(row, header.field), header.format, header.field, row.data) }}
                     </b-tooltip>
                   </div>
                 </template>

From 554ded118b19e9e6045ca9b51418fb82bee4df04 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Thu, 8 Feb 2024 20:09:54 +0000
Subject: [PATCH 3/4] Refactoring code

---
 .../components/shared/FilterTableBodyMixin.js | 29 +++++--------------
 .../requests/components/RequestsListing.vue   | 10 +++----
 resources/js/tasks/components/TasksList.vue   | 12 ++++----
 3 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/resources/js/components/shared/FilterTableBodyMixin.js b/resources/js/components/shared/FilterTableBodyMixin.js
index d8bbf4c4d0..dd64cfbaae 100644
--- a/resources/js/components/shared/FilterTableBodyMixin.js
+++ b/resources/js/components/shared/FilterTableBodyMixin.js
@@ -47,18 +47,18 @@ export default {
     formatCategory(categories) {
       return categories.map(item => item.name).join(', ');
     },
-    getNestedPropertyValue(obj, path) {
-      return get(obj, path);
+    getNestedPropertyValue(obj, header) {
+      return this.format(get(obj, header.field), header);
     },
-    format(value, format, column, datax) {
+    format(value, header) {
       let config = "";
-      if (format === "datetime") {
+      if (header.format === "datetime") {
         config = ProcessMaker.user.datetime_format;
-        value = this.checkCustomColumnData(column, datax, config, value);
+        value = this.convertUTCToLocal(value, config)
       }
-      if (format === "date") {
+      if (header.format === "date") {
         config = ProcessMaker.user.datetime_format.replace(/[\sHh:msaAzZ]/g, "");
-        value = this.checkCustomColumnData(column, datax, config, value);
+        value = this.convertUTCToLocal(value, config)
       }
       return value;
     },
@@ -72,20 +72,5 @@ export default {
       }
       return "-";
     },
-    checkCustomColumnData(columnName, dataColumn, config, originValue) {
-      let columnValue = "";
-      if (columnName.startsWith("data.")) {
-        columnName = columnName.substring("data.".length);
-        for (const key in dataColumn) {
-          if (key === columnName) {
-            columnValue = dataColumn[key];
-            return this.convertUTCToLocal(columnValue, config);
-          }
-        }
-      }
-      else{
-        return originValue;
-      }
-    }
   },
 };
diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index 0843881abb..43febe9b49 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -42,20 +42,20 @@
             v-for="(header, colIndex) in tableHeaders"
             :key="colIndex"
           >
-            <template v-if="containsHTML(getNestedPropertyValue(row, header.field))">
+            <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.field))"></span>
+                <span v-html="sanitize(getNestedPropertyValue(row, header))"></span>
               </div>
               <b-tooltip
                 v-if="header.truncate"
                 :target="`element-${rowIndex}-${colIndex}`"
                 custom-class="pm-table-tooltip"
               >
-                {{ sanitizeTooltip(getNestedPropertyValue(row, header.field)) }}
+                {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
               </b-tooltip>
             </template>
             <template v-else>
@@ -72,13 +72,13 @@
                   :class="{ 'pm-table-truncate': header.truncate }"
                   :style="{ maxWidth: header.width + 'px' }"
                 >
-                  {{ format(getNestedPropertyValue(row, header.field), header.format, header.field, row.data) }}
+                  {{ getNestedPropertyValue(row, header) }}
                   <b-tooltip
                     v-if="header.truncate"
                     :target="`element-${rowIndex}-${colIndex}`"
                     custom-class="pm-table-tooltip"
                   >
-                    {{ format(getNestedPropertyValue(row, header.field), header.format, header.field, row.data) }}
+                    {{ getNestedPropertyValue(row, header) }}
                   </b-tooltip>
                 </div>
               </template>
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index 9ecc663580..8b6efbe4f1 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -44,20 +44,20 @@
             v-for="(header, colIndex) in tableHeaders"
             :key="colIndex"
           >
-            <template v-if="containsHTML(getNestedPropertyValue(row, header.field))">
+            <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.field))"></span>
+                <span v-html="sanitize(getNestedPropertyValue(row, header))"></span>
               </div>
               <b-tooltip
                 v-if="header.truncate"
                 :target="`element-${rowIndex}-${colIndex}`"
                 custom-class="pm-table-tooltip"
               >
-                {{ sanitizeTooltip(getNestedPropertyValue(row, header.field)) }}
+                {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
               </b-tooltip>
             </template>
             <template v-else>
@@ -71,7 +71,7 @@
               <template v-else>
                 <template v-if="header.field === 'due_at'">
                   <span :class="['badge', 'badge-'+row['color_badge'], 'due-'+row['color_badge']]">
-                    {{ formatRemainingTime(getNestedPropertyValue(row, header.field)) }}
+                    {{ formatRemainingTime(getNestedPropertyValue(row, header)) }}
                   </span>
                   <span>{{ row["due_date"] }}</span>
                 </template>
@@ -81,13 +81,13 @@
                     :class="{ 'pm-table-truncate': header.truncate }"
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ format(getNestedPropertyValue(row, header.field), header.format, header.field, row.data) }}
+                    {{ getNestedPropertyValue(row, header) }}
                     <b-tooltip
                       v-if="header.truncate"
                       :target="`element-${rowIndex}-${colIndex}`"
                       custom-class="pm-table-tooltip"
                     >
-                      {{ format(getNestedPropertyValue(row, header.field), header.format, header.field, row.data) }}
+                      {{ getNestedPropertyValue(row, header) }}
                     </b-tooltip>
                   </div>
                 </template>

From 38058f176109032e58578fe5c51d0e6c803b7d1d Mon Sep 17 00:00:00 2001
From: Gustavo Bascope <gustavo.bascope@processmaker.com>
Date: Thu, 8 Feb 2024 16:17:56 -0400
Subject: [PATCH 4/4] Format date code refactor

---
 .../js/components/shared/FilterTable.vue      | 35 +++----------------
 .../components/CategoriesListing.vue          |  2 +-
 .../components/ArchivedProcessList.vue        |  2 +-
 .../processes/components/ProcessesListing.vue |  2 +-
 .../components/ProcessTemplatesListing.vue    |  2 +-
 5 files changed, 9 insertions(+), 34 deletions(-)

diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index f3fc0b3be4..ca0fd7f946 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -63,20 +63,20 @@
               v-for="(header, index) in headers"
               :key="index"
             >
-              <template v-if="containsHTML(getNestedPropertyValue(row, header.field))">
+              <template v-if="containsHTML(getNestedPropertyValue(row, header))">
                 <div
                   :id="`${tableName}-element-${rowIndex}-${index}`"
                   :class="{ 'pm-table-truncate': header.truncate }"
                   :style="{ maxWidth: header.width + 'px' }"
                 >
-                  <div v-html="sanitize(getNestedPropertyValue(row, header.field))"></div>
+                  <div v-html="sanitize(getNestedPropertyValue(row, header))"></div>
                 </div>
                 <b-tooltip
                   v-if="header.truncate"
                   :target="`${tableName}-element-${rowIndex}-${index}`"
                   custom-class="pm-table-tooltip"
                 >
-                  {{ sanitizeTooltip(getNestedPropertyValue(row, header.field)) }}
+                  {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
                 </b-tooltip>
               </template>
               <template v-else>
@@ -92,13 +92,13 @@
                     :class="{ 'pm-table-truncate': header.truncate }"
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ getNestedPropertyValue(row, header.field) }}
+                    {{ getNestedPropertyValue(row, header) }}
                     <b-tooltip
                       v-if="header.truncate"
                       :target="`${tableName}-element-${rowIndex}-${index}`"
                       custom-class="pm-table-tooltip"
                     >
-                      {{ getNestedPropertyValue(row, header.field) }}
+                      {{ getNestedPropertyValue(row, header) }}
                     </b-tooltip>
                   </div>
                 </template>
@@ -157,21 +157,6 @@ export default {
       resizingColumnIndex: -1,
     };
   },
-  watch: {
-    data() {
-      this.headers.forEach((column) => {
-        if (column.format) {
-          if (column.format === "datetime" || column.format === "date") {
-            if (this.data?.data?.forEach) {
-              this.data.data.forEach((element) => {
-                element[column.field] = this.formatDate(element[column.field], column.format);
-              });
-            }
-          }
-        }
-      });
-    },
-  },
   mounted() {
     this.$nextTick(() => {
       const ellipsisColumn = document.querySelectorAll(".pm-table-ellipsis-column");
@@ -222,16 +207,6 @@ export default {
         this.resizingColumnIndex = -1;
       }
     },
-    formatDate(date, mask) {
-      const dateTimeFormat = "MM/DD/YY HH:mm";
-      const dateFormat = "MM/DD/YY";
-      if (mask === "datetime") {
-        return date === null ? "-" : moment(date).format(dateTimeFormat);
-      }
-      if (mask === "date") {
-        return date === null ? "-" : moment(date).format(dateFormat);
-      }
-    },
     handleRowClick(row) {
       this.$emit("table-row-click", row);
     },
diff --git a/resources/js/processes/categories/components/CategoriesListing.vue b/resources/js/processes/categories/components/CategoriesListing.vue
index 3f906ffe17..b1d115bbda 100644
--- a/resources/js/processes/categories/components/CategoriesListing.vue
+++ b/resources/js/processes/categories/components/CategoriesListing.vue
@@ -79,7 +79,7 @@
                       <div
                         :style="{ maxWidth: header.width + 'px' }"
                       >
-                        {{ row[header.field] }}
+                        {{ getNestedPropertyValue(row, header) }}
                       </div>
                     </template>
                   </template>
diff --git a/resources/js/processes/components/ArchivedProcessList.vue b/resources/js/processes/components/ArchivedProcessList.vue
index ab6059bfb7..2fe7f5ad24 100644
--- a/resources/js/processes/components/ArchivedProcessList.vue
+++ b/resources/js/processes/components/ArchivedProcessList.vue
@@ -113,7 +113,7 @@
                   <div
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ row[header.field] }}
+                    {{ getNestedPropertyValue(row, header) }}
                   </div>
                 </template>
               </template>
diff --git a/resources/js/processes/components/ProcessesListing.vue b/resources/js/processes/components/ProcessesListing.vue
index ad520c703b..0f1043e254 100644
--- a/resources/js/processes/components/ProcessesListing.vue
+++ b/resources/js/processes/components/ProcessesListing.vue
@@ -113,7 +113,7 @@
                   <div
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ row[header.field] }}
+                    {{ getNestedPropertyValue(row, header) }}
                   </div>
                 </template>
               </template>
diff --git a/resources/js/templates/components/ProcessTemplatesListing.vue b/resources/js/templates/components/ProcessTemplatesListing.vue
index 980833bcea..1b5c926854 100644
--- a/resources/js/templates/components/ProcessTemplatesListing.vue
+++ b/resources/js/templates/components/ProcessTemplatesListing.vue
@@ -88,7 +88,7 @@
                   <div
                     :style="{ maxWidth: header.width + 'px' }"
                   >
-                    {{ row[header.field] }}
+                    {{ getNestedPropertyValue(row, header) }}
                   </div>
                 </template>
               </template>