From dcec65c54804b56671c3e35f856573e21ceb71d2 Mon Sep 17 00:00:00 2001 From: Fabio Date: Fri, 17 Jan 2025 16:56:22 -0400 Subject: [PATCH 1/3] FOUR-20591:Implement save / get configurations per user in FE --- .../cases/casesMain/CasesDataSection.vue | 23 +++++++++- .../cases/casesMain/api/index.js | 14 ++++++ .../cases/casesMain/utils/filters.js | 46 +++++++++++++++++++ 3 files changed, 81 insertions(+), 2 deletions(-) diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue index 0e4a7c2c46..98442fd676 100644 --- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue +++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue @@ -42,7 +42,9 @@ import { getColumns } from "./config/columns"; import { FilterableTable, TablePlaceholder } from "../../system"; import * as api from "./api"; import { user } from "./variables"; -import { formatFilters, formatFilterBadges } from "./utils"; +import { + formatFilters, formatFilterBadges, fortmattedFilter, formatFilterSaved, +} from "./utils"; const props = defineProps({ listId: { @@ -78,6 +80,11 @@ const setMetaPagination = (meta) => { }; }; +const getFilters = async () => { + const response = await api.getCaseFilters(route.params?.id); + return response; +}; + const getData = async () => { const sortFilter = filters.value.find((e) => e.sortable); // Searching the filter sortable @@ -131,7 +138,14 @@ const onChangeSearch = async (val) => { await hookGetData(); }; +const saveFilters = async (filtersData) => { + const response = await api.saveCaseFilters(fortmattedFilter(filtersData), route.params?.id); + return response; +}; + const onChangeFilter = async (filtersData) => { + // saveFilters(filtersData); + filters.value = filtersData; dataPagination.value.page = 1; // Reset page to 1 @@ -151,7 +165,12 @@ const onRemoveBadge = async (badge, index) => { }; onMounted(async () => { - await hookGetData(); + getFilters().then((response) => { + const filtersSaved = formatFilterSaved(response.data.filters); + filters.value = filtersSaved; + badgesData.value = formatFilterBadges(filtersSaved, columnsConfig.value); + hookGetData(); + }); columnsConfig.value = getColumns(props.listId); }); diff --git a/resources/jscomposition/cases/casesMain/api/index.js b/resources/jscomposition/cases/casesMain/api/index.js index 909283bd76..267290a579 100644 --- a/resources/jscomposition/cases/casesMain/api/index.js +++ b/resources/jscomposition/cases/casesMain/api/index.js @@ -561,3 +561,17 @@ export const getCounters = async (data) => { return response.data; }; + +export const saveCaseFilters = async (data, status = "") => { + const type = status !== "" ? `|$${status}` : ""; + const response = await api.put(`/users/store_filter_configuration/casesFilter${type}`, data); + + return response.data; +}; + +export const getCaseFilters = async (status = "") => { + const type = status !== "" ? `|$${status}` : ""; + const response = await api.get(`/users/get_filter_configuration/casesFilter${type}`); + + return response.data; +}; diff --git a/resources/jscomposition/cases/casesMain/utils/filters.js b/resources/jscomposition/cases/casesMain/utils/filters.js index d6c515d1e8..066bc6ec36 100644 --- a/resources/jscomposition/cases/casesMain/utils/filters.js +++ b/resources/jscomposition/cases/casesMain/utils/filters.js @@ -3,6 +3,7 @@ import { formatDate } from "../../../utils"; export const formatFilters = (filters) => { const response = filters.map((element) => { let { value } = element; + let label = ""; if (!element.operator) { return null; @@ -15,6 +16,7 @@ export const formatFilters = (filters) => { // Case status is a dropdown filter, using for the API if (element.field === "case_status") { value = element.value.value; + label = element.value.label; } return { @@ -24,12 +26,56 @@ export const formatFilters = (filters) => { }, operator: element.operator, value: value || "", + label, + _column_field: element.field, }; }); return response.filter((e) => e); }; +export const getFilterOrder = (filters) => { + let response = {}; + filters.forEach((element) => { + if (element.sortable) { + response = { + by: element.field, + direction: element.sortable, + }; + } + }); + return response; +}; + +export const fortmattedFilter = (filters) => { + const response = formatFilters(filters); + const order = getFilterOrder(filters); + return { + filters: [...response], + order, + }; +}; + +export const formatFilterSaved = (filters) => { + const response = filters.map((element) => { + let value = ""; + if (element.subject.value === "case_status") { + value = { + value: element.value, + label: element.label, + }; + } else { + value = element.value; + } + return { + field: element.subject.value, + operator: element.operator, + value, + }; + }); + return response.filter((e) => e); +}; + // Format filters to convert in badges data export const formatFilterBadges = (filters, columns) => { const response = filters.map((element) => { From 7ca6e8b14ef95252bf2ca0c27d216148ef669bc2 Mon Sep 17 00:00:00 2001 From: Fabio Date: Fri, 17 Jan 2025 17:21:28 -0400 Subject: [PATCH 2/3] CR --- resources/jscomposition/cases/casesMain/CasesDataSection.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue index 98442fd676..c421f6c863 100644 --- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue +++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue @@ -144,7 +144,7 @@ const saveFilters = async (filtersData) => { }; const onChangeFilter = async (filtersData) => { - // saveFilters(filtersData); + saveFilters(filtersData); filters.value = filtersData; dataPagination.value.page = 1; // Reset page to 1 From e1a00cb2dc26b3e050b0e4c38b56bd5a679755eb Mon Sep 17 00:00:00 2001 From: Fabio Date: Fri, 17 Jan 2025 17:23:21 -0400 Subject: [PATCH 3/3] spell --- resources/jscomposition/cases/casesMain/CasesDataSection.vue | 4 ++-- resources/jscomposition/cases/casesMain/utils/filters.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue index c421f6c863..4cabeffa53 100644 --- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue +++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue @@ -43,7 +43,7 @@ import { FilterableTable, TablePlaceholder } from "../../system"; import * as api from "./api"; import { user } from "./variables"; import { - formatFilters, formatFilterBadges, fortmattedFilter, formatFilterSaved, + formatFilters, formatFilterBadges, formattedFilter, formatFilterSaved, } from "./utils"; const props = defineProps({ @@ -139,7 +139,7 @@ const onChangeSearch = async (val) => { }; const saveFilters = async (filtersData) => { - const response = await api.saveCaseFilters(fortmattedFilter(filtersData), route.params?.id); + const response = await api.saveCaseFilters(formattedFilter(filtersData), route.params?.id); return response; }; diff --git a/resources/jscomposition/cases/casesMain/utils/filters.js b/resources/jscomposition/cases/casesMain/utils/filters.js index 066bc6ec36..7649d11e9e 100644 --- a/resources/jscomposition/cases/casesMain/utils/filters.js +++ b/resources/jscomposition/cases/casesMain/utils/filters.js @@ -47,7 +47,7 @@ export const getFilterOrder = (filters) => { return response; }; -export const fortmattedFilter = (filters) => { +export const formattedFilter = (filters) => { const response = formatFilters(filters); const order = getFilterOrder(filters); return {