From 19832badbfdf79834e27f39312838136a150752b Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Thu, 23 Jan 2025 11:58:46 -0400
Subject: [PATCH 1/3] FOUR-20639: S7: Add a Reset Table in the modal

---
 .../cases/casesMain/CasesDataSection.vue      | 11 ++--
 .../cases/casesMain/config/columns.js         | 14 ++++
 .../system/table/FilterableTable.vue          | 14 ++--
 .../filter/defaultFilter/FilterColumn.vue     | 64 +++++++++++++------
 resources/lang/en.json                        |  1 +
 resources/lang/es.json                        |  1 +
 6 files changed, 74 insertions(+), 31 deletions(-)

diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 11a619bbcd..9f5f74cc03 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -3,20 +3,18 @@
     <CaseFilter @enter="onChangeSearch" />
     <BadgesSection
       v-model="badgesData"
-      @remove="onRemoveBadge"
-    />
+      @remove="onRemoveBadge" />
     <FilterableTable
       ref="table"
       :columns="columnsConfig"
       :data="data"
       :placeholder="showPlaceholder"
       @changeFilter="onChangeFilter"
-    >
+      @resetFilters="onChangeFilter">
       <template #placeholder>
         <TablePlaceholder
           :placeholder="placeholderType"
-          class="tw-grow"
-        />
+          class="tw-grow" />
       </template>
     </FilterableTable>
     <Pagination
@@ -28,8 +26,7 @@
       :page="dataPagination.page"
       :pages="dataPagination.pages"
       @perPage="onPerPage"
-      @go="onGo"
-    />
+      @go="onGo" />
   </div>
 </template>
 <script setup>
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index ea5e9a9fa9..44d07abe01 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -37,6 +37,7 @@ export const caseNumberColumn = () => ({
   filter: {
     dataType: "string",
     operators: ["=", ">", ">=", "in", "between"],
+    resetTable: true,
   },
   cellRenderer: () => ({
     component: LinkCell,
@@ -60,6 +61,7 @@ export const caseTitleColumn = () => ({
   filter: {
     dataType: "string",
     operators: ["=", ">", ">=", "in", "between"],
+    resetTable: true,
   },
 });
 
@@ -68,6 +70,9 @@ export const processColumn = () => ({
   header: "Process",
   resizable: true,
   width: 200,
+  filter: {
+    resetTable: true,
+  },
   cellRenderer: () => ({
     component: TruncatedColumn,
     params: {
@@ -81,6 +86,9 @@ export const taskColumn = () => ({
   header: t("Current Task"),
   resizable: true,
   width: 200,
+  filter: {
+    resetTable: true,
+  },
   cellRenderer: () => ({
     component: TruncatedOptionsCell,
     params: {
@@ -101,6 +109,9 @@ export const participantsColumn = () => ({
   header: "Participants",
   resizable: true,
   width: 200,
+  filter: {
+    resetTable: true,
+  },
   cellRenderer: () => ({
     component: ParticipantsCell,
     params: {
@@ -125,6 +136,7 @@ export const statusColumn = () => ({
   filter: {
     dataType: "enum",
     operators: ["="],
+    resetTable: true,
     config: {
       options: [{
         label: t("In progress"),
@@ -155,6 +167,7 @@ export const startedColumn = () => ({
   filter: {
     dataType: "datetime",
     operators: ["between", ">", ">=", "<", "<="],
+    resetTable: true,
   },
 });
 
@@ -167,6 +180,7 @@ export const completedColumn = () => ({
   filter: {
     dataType: "datetime",
     operators: ["between", ">", ">=", "<", "<="],
+    resetTable: true,
   },
 });
 
diff --git a/resources/jscomposition/system/table/FilterableTable.vue b/resources/jscomposition/system/table/FilterableTable.vue
index 11b6d11a7d..da789434f6 100644
--- a/resources/jscomposition/system/table/FilterableTable.vue
+++ b/resources/jscomposition/system/table/FilterableTable.vue
@@ -3,19 +3,19 @@
     :columns="columns"
     :data="data"
     :placeholder="placeholder"
-    class="tw-grow"
-  >
+    class="tw-grow">
     <template
       v-for="(column, index) in columns"
       #[`theader-filter-${column.field}`]>
       <FilterColumn
-        :id="column.field"
         v-if="column.filter"
+        :id="column.field"
         :key="`default-${index}-${hasFilter(index,column)}`"
         :filter="column.filter"
         :value="getFilter(index, column)"
         @change="e=> onChangeFilter(column, e, index)"
-        @clear="e=> onClear(column, e, index)" />
+        @clear="e=> onClear(column, e, index)"
+        @resetTable="e=> onResetTable()" />
     </template>
     <template #placeholder>
       <slot name="placeholder" />
@@ -77,6 +77,12 @@ const onClear = (column, val, index) => {
   emit("changeFilter", filters.value);
 };
 
+const onResetTable = () => {
+  filters.value = [];
+
+  emit("resetFilters", filters.value);
+};
+
 const removeFilter = (index) => {
   filters.value.splice(index, 1);
 };
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
index d99eeefe2e..ae77b1eac0 100644
--- a/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
+++ b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
@@ -11,27 +11,45 @@
 
       <template #content>
         <div
-          class="tw-shadow-md tw-text-xs tw-p-4 tw-h-60 tw-space-y-2 tw-flex tw-flex-col tw-justify-between
-            tw-font-normal tw-bg-white tw-text-gray-600tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
-          <SortingButtons
-            @asc="onAsc"
-            @desc="onDesc" />
-
-          <div class="tw-grow tw-overflow-auto tw-space-y-4">
-            <FilterOperator
-              :key="key"
-              ref="filterOperatorsRef"
-              :value="filterOperator"
-              :operators="filter.operators"
-              :type="filter.dataType"
-              :config="filter.config"
-              @change="(e) => onChangeFilterOperator(e)" />
+          class="tw-shadow-md tw-text-xs tw-space-y-2 tw-flex tw-flex-col tw-justify-between
+            tw-font-normal tw-bg-white tw-text-gray-600 tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
+          <div
+            v-if="filter.operators"
+            class="tw-flex tw-flex-col tw-space-y-2 tw-px-4 tw-pt-4">
+            <SortingButtons
+              @asc="onAsc"
+              @desc="onDesc" />
+
+            <div class="tw-grow tw-overflow-auto tw-space-y-4">
+              <FilterOperator
+                :key="key"
+                ref="filterOperatorsRef"
+                :value="filterOperator"
+                :operators="filter.operators"
+                :type="filter.dataType"
+                :config="filter.config"
+                @change="(e) => onChangeFilterOperator(e)" />
+            </div>
+
+            <FooterButtons
+              @cancel="onCancel"
+              @clear="onClear"
+              @apply="onApply" />
+          </div>
+          <div
+            v-if="filter.resetTable"
+            :class="{
+              'tw-border-t': filter.operators,
+            }"
+            class="tw-flex tw-border-gray-300 tw-justify-start tw-p-4">
+            <div
+              class="tw-flex tw-text-gray-500 tw-space-x-2 tw-bg-transparent
+                hover:tw-opacity-80 hover:tw-cursor-pointer tw-justify-center tw-items-center"
+              @click="onResetTable">
+              <i class="fas fa-reply" />
+              <span>{{ $t("Reset Table") }}</span>
+            </div>
           </div>
-
-          <FooterButtons
-            @cancel="onCancel"
-            @clear="onClear"
-            @apply="onApply" />
         </div>
       </template>
     </AppPopover>
@@ -102,6 +120,12 @@ const onClear = () => {
   show.value = false;
 };
 
+const onResetTable = () => {
+  emit("resetTable");
+
+  show.value = false;
+};
+
 const onChangeFilterOperator = (element) => {
   filterOperator.value = element;
 };
diff --git a/resources/lang/en.json b/resources/lang/en.json
index fac3dc5ca1..e04352c351 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -1418,6 +1418,7 @@
   "Reset Translations": "Reset Translations",
   "Reset Your Password": "Reset Your Password",
   "Reset": "Reset",
+  "Reset Table": "Reset Table",
   "Resource": "Resource",
   "Resources": "Resources",
   "Response Body": "Response Body",
diff --git a/resources/lang/es.json b/resources/lang/es.json
index e953873051..182fe16191 100644
--- a/resources/lang/es.json
+++ b/resources/lang/es.json
@@ -685,6 +685,7 @@
   "Leave empty to continue until exit condition is satisfied": "Dejar vacío para continuar hasta que se cumpla la condición de salida",
   "When FEEL expression evaluates to true then exit loop": "Cuando la expresión FEEL se evalúe como verdadera, entonces salir del bucle",
   "Reset": "Restablecer",
+  "Reset Table": "Restablecer tabla",
   "Reset to initial scale": "Restablecer a escala inicial",
   "Restore": "Restaurar",
   "Rich Text Content": "Contenido de texto enriquecido",

From 09205603c3db03cc735cfe6d6c98817ba7a9a0ba Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Fri, 24 Jan 2025 08:54:00 -0400
Subject: [PATCH 2/3] FOUR-20639: S7: Add a Reset Table in the modal

---
 .../cases/casesMain/CasesDataSection.vue      | 24 +++++++++-
 .../casesMain/components/BadgesSection.vue    | 45 ++++++++++---------
 .../system/table/FilterableTable.vue          | 10 +++++
 3 files changed, 58 insertions(+), 21 deletions(-)

diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 9f5f74cc03..eacbd5d128 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -3,7 +3,18 @@
     <CaseFilter @enter="onChangeSearch" />
     <BadgesSection
       v-model="badgesData"
-      @remove="onRemoveBadge" />
+      @remove="onRemoveBadge">
+      <template #endsection>
+        <div
+          class="tw-flex tw-text-gray-500 tw-space-x-2 tw-bg-transparent
+            tw-text-xs tw-border-l tw-border-gray-300 tw-pl-2
+            hover:tw-opacity-80 hover:tw-cursor-pointer tw-justify-center tw-items-center"
+          @click="onResetTable">
+          <i class="fas fa-reply" />
+          <span>{{ $t("Reset Table") }}</span>
+        </div>
+      </template>
+    </BadgesSection>
     <FilterableTable
       ref="table"
       :columns="columnsConfig"
@@ -161,11 +172,22 @@ const onRemoveBadge = async (badge, index) => {
   await hookGetData();
 };
 
+const onResetTable = async () => {
+  filters.value = [];
+  badgesData.value = [];
+  dataPagination.value.page = 1; // Reset page to 1
+  saveFilters(filters.value);
+
+  table.value.removeAllFilters();
+  await hookGetData();
+};
+
 onMounted(async () => {
   getFilters().then((response) => {
     const filtersSaved = formatFilterSaved(response.data.filters);
     filters.value = filtersSaved;
     badgesData.value = formatFilterBadges(filtersSaved, columnsConfig.value);
+    table.value.addFilters(filtersSaved);
     hookGetData();
   });
 
diff --git a/resources/jscomposition/cases/casesMain/components/BadgesSection.vue b/resources/jscomposition/cases/casesMain/components/BadgesSection.vue
index d530259b22..0d4698e401 100644
--- a/resources/jscomposition/cases/casesMain/components/BadgesSection.vue
+++ b/resources/jscomposition/cases/casesMain/components/BadgesSection.vue
@@ -1,25 +1,30 @@
 <template>
-  <transition-group
-    name="badge"
-    tag="div"
-    class="tw-flex tw-space-x-1">
-    <Badge
-      v-for="(item, index) in data"
-      :key="item.fieldName"
-      :id="`badge-${item.fieldName.replace(/\s+/g, '-')}`"
-      class="tw-text-xs tw-bg-gray-100"
-      color="gray">
-      <span>
-        <span class=" tw-font-bold"> {{ item.fieldName }} </span>
-        <span> {{ item.operator }} </span>
-        <span> {{ item.value }} </span>
+  <div class="tw-flex tw-justify-between">
+    <transition-group
+      name="badge"
+      tag="div"
+      class="tw-flex tw-space-x-1">
+      <Badge
+        v-for="(item, index) in data"
+        :id="`badge-${item.fieldName.replace(/\s+/g, '-')}`"
+        :key="item.fieldName"
+        class="tw-text-xs tw-bg-gray-100"
+        color="gray">
+        <span>
+          <span class=" tw-font-bold"> {{ item.fieldName }} </span>
+          <span> {{ item.operator }} </span>
+          <span> {{ item.value }} </span>
 
-        <i
-          class="fas fa-times tw-pl-1 hover:tw-cursor-pointer"
-          @click="onClose(item, index)" />
-      </span>
-    </Badge>
-  </transition-group>
+          <i
+            class="fas fa-times tw-pl-1 hover:tw-cursor-pointer"
+            @click="onClose(item, index)" />
+        </span>
+      </Badge>
+    </transition-group>
+    <slot
+      v-if="data.length"
+      name="endsection" />
+  </div>
 </template>
 <script setup>
 import { computed } from "vue";
diff --git a/resources/jscomposition/system/table/FilterableTable.vue b/resources/jscomposition/system/table/FilterableTable.vue
index a66388c7c4..5e3a354680 100644
--- a/resources/jscomposition/system/table/FilterableTable.vue
+++ b/resources/jscomposition/system/table/FilterableTable.vue
@@ -92,6 +92,14 @@ const removeFilter = (index) => {
   filters.value.splice(index, 1);
 };
 
+const removeAllFilters = () => {
+  filters.value = [];
+};
+
+const addFilters = (filtersValue) => {
+  filters.value = filtersValue;
+};
+
 const getFilter = (index, column) => {
   const filter = filters.value.find((e) => e.field === column.field);
   return filter || null;
@@ -104,5 +112,7 @@ const hasFilter = (index, column) => {
 
 defineExpose({
   removeFilter,
+  removeAllFilters,
+  addFilters,
 });
 </script>

From 6be1a523d452c0c2019dcd5a3c52c0d04524e9d9 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Fri, 24 Jan 2025 12:21:31 -0400
Subject: [PATCH 3/3] FOUR-20639: S7: Add a Reset Table in the modal

---
 resources/jscomposition/cases/casesMain/CasesDataSection.vue     | 1 +
 .../system/table/filter/defaultFilter/FilterColumn.vue           | 1 +
 2 files changed, 2 insertions(+)

diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index eacbd5d128..239ee71bd4 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -6,6 +6,7 @@
       @remove="onRemoveBadge">
       <template #endsection>
         <div
+          id="reset-table-btn"
           class="tw-flex tw-text-gray-500 tw-space-x-2 tw-bg-transparent
             tw-text-xs tw-border-l tw-border-gray-300 tw-pl-2
             hover:tw-opacity-80 hover:tw-cursor-pointer tw-justify-center tw-items-center"
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
index ae77b1eac0..51e78c7eb3 100644
--- a/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
+++ b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
@@ -43,6 +43,7 @@
             }"
             class="tw-flex tw-border-gray-300 tw-justify-start tw-p-4">
             <div
+              id="reset-table-btn"
               class="tw-flex tw-text-gray-500 tw-space-x-2 tw-bg-transparent
                 hover:tw-opacity-80 hover:tw-cursor-pointer tw-justify-center tw-items-center"
               @click="onResetTable">