Skip to content

Commit ef03608

Browse files
pmPaulispmPaulis
authored
Merge pull request #7928 from ProcessMaker/feature/FOUR-20639
FOUR-20639: S7: Add a Reset Table in the modal
2 parents 9c710b2 + 6be1a52 commit ef03608

7 files changed

Lines changed: 130 additions & 43 deletions

File tree

‎resources/jscomposition/cases/casesMain/CasesDataSection.vue‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,26 @@
33
<CaseFilter @enter="onChangeSearch" />
44
<BadgesSection
55
v-model="badgesData"
6-
@remove="onRemoveBadge" />
6+
@remove="onRemoveBadge">
7+
<template #endsection>
8+
<div
9+
id="reset-table-btn"
10+
class="tw-flex tw-text-gray-500 tw-space-x-2 tw-bg-transparent
11+
tw-text-xs tw-border-l tw-border-gray-300 tw-pl-2
12+
hover:tw-opacity-80 hover:tw-cursor-pointer tw-justify-center tw-items-center"
13+
@click="onResetTable">
14+
<i class="fas fa-reply" />
15+
<span>{{ $t("Reset Table") }}</span>
16+
</div>
17+
</template>
18+
</BadgesSection>
719
<FilterableTable
820
ref="table"
921
:columns="columnsConfig"
1022
:data="data"
1123
:placeholder="showPlaceholder"
12-
@changeFilter="onChangeFilter">
24+
@changeFilter="onChangeFilter"
25+
@resetFilters="onChangeFilter">
1326
<template #placeholder>
1427
<TablePlaceholder
1528
:placeholder="placeholderType"
@@ -160,11 +173,22 @@ const onRemoveBadge = async (badge, index) => {
160173
await hookGetData();
161174
};
162175
176+
const onResetTable = async () => {
177+
filters.value = [];
178+
badgesData.value = [];
179+
dataPagination.value.page = 1; // Reset page to 1
180+
saveFilters(filters.value);
181+
182+
table.value.removeAllFilters();
183+
await hookGetData();
184+
};
185+
163186
onMounted(async () => {
164187
getFilters().then((response) => {
165188
const filtersSaved = formatFilterSaved(response.data.filters);
166189
filters.value = filtersSaved;
167190
badgesData.value = formatFilterBadges(filtersSaved, columnsConfig.value);
191+
table.value.addFilters(filtersSaved);
168192
hookGetData();
169193
});
170194

‎resources/jscomposition/cases/casesMain/components/BadgesSection.vue‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
11
<template>
2-
<transition-group
3-
name="badge"
4-
tag="div"
5-
class="tw-flex tw-space-x-1">
6-
<Badge
7-
v-for="(item, index) in data"
8-
:key="item.fieldName"
9-
:id="`badge-${item.fieldName.replace(/\s+/g, '-')}`"
10-
class="tw-text-xs tw-bg-gray-100"
11-
color="gray">
12-
<span>
13-
<span class=" tw-font-bold"> {{ item.fieldName }} </span>
14-
<span> {{ item.operator }} </span>
15-
<span> {{ item.value }} </span>
2+
<div class="tw-flex tw-justify-between">
3+
<transition-group
4+
name="badge"
5+
tag="div"
6+
class="tw-flex tw-space-x-1">
7+
<Badge
8+
v-for="(item, index) in data"
9+
:id="`badge-${item.fieldName.replace(/\s+/g, '-')}`"
10+
:key="item.fieldName"
11+
class="tw-text-xs tw-bg-gray-100"
12+
color="gray">
13+
<span>
14+
<span class=" tw-font-bold"> {{ item.fieldName }} </span>
15+
<span> {{ item.operator }} </span>
16+
<span> {{ item.value }} </span>
1617

17-
<i
18-
class="fas fa-times tw-pl-1 hover:tw-cursor-pointer"
19-
@click="onClose(item, index)" />
20-
</span>
21-
</Badge>
22-
</transition-group>
18+
<i
19+
class="fas fa-times tw-pl-1 hover:tw-cursor-pointer"
20+
@click="onClose(item, index)" />
21+
</span>
22+
</Badge>
23+
</transition-group>
24+
<slot
25+
v-if="data.length"
26+
name="endsection" />
27+
</div>
2328
</template>
2429
<script setup>
2530
import { computed } from "vue";

‎resources/jscomposition/cases/casesMain/config/columns.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const caseNumberColumn = () => ({
3737
filter: {
3838
dataType: "string",
3939
operators: ["=", ">", ">=", "in", "between"],
40+
resetTable: true,
4041
},
4142
cellRenderer: () => ({
4243
component: LinkCell,
@@ -60,6 +61,7 @@ export const caseTitleColumn = () => ({
6061
filter: {
6162
dataType: "string",
6263
operators: ["=", ">", ">=", "in", "between"],
64+
resetTable: true,
6365
},
6466
});
6567

@@ -68,6 +70,9 @@ export const processColumn = () => ({
6870
header: "Process",
6971
resizable: true,
7072
width: 200,
73+
filter: {
74+
resetTable: true,
75+
},
7176
cellRenderer: () => ({
7277
component: TruncatedColumn,
7378
params: {
@@ -81,6 +86,9 @@ export const taskColumn = () => ({
8186
header: t("Current Task"),
8287
resizable: true,
8388
width: 200,
89+
filter: {
90+
resetTable: true,
91+
},
8492
cellRenderer: () => ({
8593
component: TruncatedGroupOptionsCell,
8694
params: {
@@ -123,6 +131,9 @@ export const participantsColumn = () => ({
123131
header: "Participants",
124132
resizable: true,
125133
width: 200,
134+
filter: {
135+
resetTable: true,
136+
},
126137
cellRenderer: () => ({
127138
component: ParticipantsCell,
128139
params: {
@@ -147,6 +158,7 @@ export const statusColumn = () => ({
147158
filter: {
148159
dataType: "enum",
149160
operators: ["="],
161+
resetTable: true,
150162
config: {
151163
options: [{
152164
label: t("In progress"),
@@ -177,6 +189,7 @@ export const startedColumn = () => ({
177189
filter: {
178190
dataType: "datetime",
179191
operators: ["between", ">", ">=", "<", "<="],
192+
resetTable: true,
180193
},
181194
});
182195

@@ -189,6 +202,7 @@ export const completedColumn = () => ({
189202
filter: {
190203
dataType: "datetime",
191204
operators: ["between", ">", ">=", "<", "<="],
205+
resetTable: true,
192206
},
193207
});
194208

‎resources/jscomposition/system/table/FilterableTable.vue‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
:filter="column.filter"
1616
:value="getFilter(index, column)"
1717
@change="e=> onChangeFilter(column, e, index)"
18-
@clear="e=> onClear(column, e, index)" />
18+
@clear="e=> onClear(column, e, index)"
19+
@resetTable="e=> onResetTable()" />
1920
</template>
2021
<template #placeholder>
2122
<slot name="placeholder" />
@@ -81,10 +82,24 @@ const onClear = (column, val, index) => {
8182
emit("changeFilter", filters.value);
8283
};
8384
85+
const onResetTable = () => {
86+
filters.value = [];
87+
88+
emit("resetFilters", filters.value);
89+
};
90+
8491
const removeFilter = (index) => {
8592
filters.value.splice(index, 1);
8693
};
8794
95+
const removeAllFilters = () => {
96+
filters.value = [];
97+
};
98+
99+
const addFilters = (filtersValue) => {
100+
filters.value = filtersValue;
101+
};
102+
88103
const getFilter = (index, column) => {
89104
const filter = filters.value.find((e) => e.field === column.field);
90105
return filter || null;
@@ -97,5 +112,7 @@ const hasFilter = (index, column) => {
97112
98113
defineExpose({
99114
removeFilter,
115+
removeAllFilters,
116+
addFilters,
100117
});
101118
</script>

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

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,46 @@
1111

1212
<template #content>
1313
<div
14-
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
15-
tw-font-normal tw-bg-white tw-text-gray-600tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
16-
<SortingButtons
17-
@asc="onAsc"
18-
@desc="onDesc" />
19-
20-
<div class="tw-grow tw-overflow-auto tw-space-y-4">
21-
<FilterOperator
22-
:key="key"
23-
ref="filterOperatorsRef"
24-
:value="filterOperator"
25-
:operators="filter.operators"
26-
:type="filter.dataType"
27-
:config="filter.config"
28-
@change="(e) => onChangeFilterOperator(e)" />
14+
class="tw-shadow-md tw-text-xs tw-space-y-2 tw-flex tw-flex-col tw-justify-between
15+
tw-font-normal tw-bg-white tw-text-gray-600 tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
16+
<div
17+
v-if="filter.operators"
18+
class="tw-flex tw-flex-col tw-space-y-2 tw-px-4 tw-pt-4">
19+
<SortingButtons
20+
@asc="onAsc"
21+
@desc="onDesc" />
22+
23+
<div class="tw-grow tw-overflow-auto tw-space-y-4">
24+
<FilterOperator
25+
:key="key"
26+
ref="filterOperatorsRef"
27+
:value="filterOperator"
28+
:operators="filter.operators"
29+
:type="filter.dataType"
30+
:config="filter.config"
31+
@change="(e) => onChangeFilterOperator(e)" />
32+
</div>
33+
34+
<FooterButtons
35+
@cancel="onCancel"
36+
@clear="onClear"
37+
@apply="onApply" />
38+
</div>
39+
<div
40+
v-if="filter.resetTable"
41+
:class="{
42+
'tw-border-t': filter.operators,
43+
}"
44+
class="tw-flex tw-border-gray-300 tw-justify-start tw-p-4">
45+
<div
46+
id="reset-table-btn"
47+
class="tw-flex tw-text-gray-500 tw-space-x-2 tw-bg-transparent
48+
hover:tw-opacity-80 hover:tw-cursor-pointer tw-justify-center tw-items-center"
49+
@click="onResetTable">
50+
<i class="fas fa-reply" />
51+
<span>{{ $t("Reset Table") }}</span>
52+
</div>
2953
</div>
30-
31-
<FooterButtons
32-
@cancel="onCancel"
33-
@clear="onClear"
34-
@apply="onApply" />
3554
</div>
3655
</template>
3756
</AppPopover>
@@ -102,6 +121,12 @@ const onClear = () => {
102121
show.value = false;
103122
};
104123
124+
const onResetTable = () => {
125+
emit("resetTable");
126+
127+
show.value = false;
128+
};
129+
105130
const onChangeFilterOperator = (element) => {
106131
filterOperator.value = element;
107132
};

‎resources/lang/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1418,6 +1418,7 @@
14181418
"Reset Translations": "Reset Translations",
14191419
"Reset Your Password": "Reset Your Password",
14201420
"Reset": "Reset",
1421+
"Reset Table": "Reset Table",
14211422
"Resource": "Resource",
14221423
"Resources": "Resources",
14231424
"Response Body": "Response Body",

‎resources/lang/es.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -685,6 +685,7 @@
685685
"Leave empty to continue until exit condition is satisfied": "Dejar vacío para continuar hasta que se cumpla la condición de salida",
686686
"When FEEL expression evaluates to true then exit loop": "Cuando la expresión FEEL se evalúe como verdadera, entonces salir del bucle",
687687
"Reset": "Restablecer",
688+
"Reset Table": "Restablecer tabla",
688689
"Reset to initial scale": "Restablecer a escala inicial",
689690
"Restore": "Restaurar",
690691
"Rich Text Content": "Contenido de texto enriquecido",

0 commit comments

Comments
 (0)