FOUR-20591:Implement save / get configurations per user in FE

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, formattedFilter, 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(formattedFilter(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);
 });

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;
+};

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 formattedFilter = (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) => {