FOUR-20639: S7: Add a Reset Table in the modal

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -3,13 +3,26 @@
     <CaseFilter @enter="onChangeSearch" />
     <BadgesSection
       v-model="badgesData"
-      @remove="onRemoveBadge" />
+      @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"
+          @click="onResetTable">
+          <i class="fas fa-reply" />
+          <span>{{ $t("Reset Table") }}</span>
+        </div>
+      </template>
+    </BadgesSection>
     <FilterableTable
       ref="table"
       :columns="columnsConfig"
       :data="data"
       :placeholder="showPlaceholder"
-      @changeFilter="onChangeFilter">
+      @changeFilter="onChangeFilter"
+      @resetFilters="onChangeFilter">
       <template #placeholder>
         <TablePlaceholder
           :placeholder="placeholderType"
@@ -160,11 +173,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();
   });
 

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";

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: TruncatedGroupOptionsCell,
     params: {
@@ -123,6 +131,9 @@ export const participantsColumn = () => ({
   header: "Participants",
   resizable: true,
   width: 200,
+  filter: {
+    resetTable: true,
+  },
   cellRenderer: () => ({
     component: ParticipantsCell,
     params: {
@@ -147,6 +158,7 @@ export const statusColumn = () => ({
   filter: {
     dataType: "enum",
     operators: ["="],
+    resetTable: true,
     config: {
       options: [{
         label: t("In progress"),
@@ -177,6 +189,7 @@ export const startedColumn = () => ({
   filter: {
     dataType: "datetime",
     operators: ["between", ">", ">=", "<", "<="],
+    resetTable: true,
   },
 });
 
@@ -189,6 +202,7 @@ export const completedColumn = () => ({
   filter: {
     dataType: "datetime",
     operators: ["between", ">", ">=", "<", "<="],
+    resetTable: true,
   },
 });
 

resources/jscomposition/system/table/FilterableTable.vue

@@ -15,7 +15,8 @@
         :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" />
@@ -81,10 +82,24 @@ 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);
 };
 
+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;
@@ -97,5 +112,7 @@ const hasFilter = (index, column) => {
 
 defineExpose({
   removeFilter,
+  removeAllFilters,
+  addFilters,
 });
 </script>

resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue

@@ -11,27 +11,46 @@
 
       <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
+              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">
+              <i class="fas fa-reply" />
+              <span>{{ $t("Reset Table") }}</span>
+            </div>
           </div>
-
-          <FooterButtons
-            @cancel="onCancel"
-            @clear="onClear"
-            @apply="onApply" />
         </div>
       </template>
     </AppPopover>
@@ -102,6 +121,12 @@ const onClear = () => {
   show.value = false;
 };
 
+const onResetTable = () => {
+  emit("resetTable");
+
+  show.value = false;
+};
+
 const onChangeFilterOperator = (element) => {
   filterOperator.value = element;
 };

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",

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",