FOUR-23550: The configure size columns configuration is not keep

resources/jscomposition/base/table/BaseTable.vue

@@ -15,7 +15,8 @@
  v-for="(column, index) in columns"
  :key="index"
  :columns="columns"
- :column="column">
+ :column="column"
+ @stopResize="onStopResize">
  <slot :name="`theader-${column.field}`" />
  <template #filter>
  <slot :name="`theader-filter-${column.field}`" />
@@ -118,7 +119,7 @@ export default defineComponent({
  default: () => false,
  },
  },
- setup(props) {
+ setup(props, { emit }) {
  const slots = useSlots();
  const configRow = ref([]);
  const showContainer = ref(false);
@@ -141,13 +142,18 @@ export default defineComponent({
 
  const getShowContainer = (index) => configRow.value[index]?.showContainer;
 
+ const onStopResize = (column) => {
+ emit("stopResize", column);
+ };
+
  return {
  configRow,
  showContainer,
  toogleContainer,
  getShowContainer,
  getDefaultConfig,
  slots,
+ onStopResize,
  checkContainerRow,
  checkEllipsisMenu,
  tbody,

resources/jscomposition/base/table/THeader.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { isFunction } from "lodash";
-import { defineComponent, computed, ref } from "vue";
+import { defineComponent, computed } from "vue";
 import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
@@ -38,7 +38,12 @@ export default defineComponent({
  },
  },
  setup(props, { emit }) {
- const columnResize = columnResizeComposable(props.column);
+ const columnResize = columnResizeComposable({
+ column: props.column,
+ stopResize: () => {
+ emit("stopResize", props.column);
+ },
+ });
 
  const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
 

resources/jscomposition/base/table/composables/columnComposable.js

@@ -7,7 +7,7 @@ export default {};
  * @param {*} tableName
  * @returns
  */
-export const columnResizeComposable = (column) => {
+export const columnResizeComposable = ({ column, stopResize }) => {
  const startX = ref(0);
  const startWidth = ref(0);
  const isResizing = ref(false);
@@ -24,11 +24,12 @@ export const columnResizeComposable = (column) => {
  }
  };
 
- const stopResize = () => {
+ const stopResizeHandler = () => {
  if (isResizing.value) {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  isResizing.value = false;
+ stopResize?.();
  }
  };
 
@@ -39,15 +40,16 @@ export const columnResizeComposable = (column) => {
  startWidth.value = column.width || minWidth;
 
  document.addEventListener("mousemove", doResize);
- document.addEventListener("mouseup", stopResize);
+ document.addEventListener("mouseup", stopResizeHandler);
  };
 
  onUnmounted(() => {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  });
 
  return {
  startResize,
+ stopResizeHandler,
  };
 };

resources/jscomposition/cases/casesMain/App.vue

@@ -1,18 +1,8 @@
 <template>
  <div class="tw-flex tw-h-[90vh] ">
- <RouterView></RouterView>
+ <RouterView />
  </div>
 </template>
-<script>
-import { defineComponent } from "vue";
+<script setup>
 import { RouterView } from "vue-router";
-
-export default defineComponent({
- components: {
- RouterView,
- },
- setup() {
- return {};
- },
-});
 </script>

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -26,6 +26,7 @@
  class="tw-text-[#4F5154]"
  :placeholder="showPlaceholder"
  @changeFilter="onChangeFilter"
+ @stopResize="onStopResize"
  @resetFilters="onChangeFilter">
  <template #placeholder>
  <TablePlaceholder
@@ -53,10 +54,10 @@ import { useRouter, useRoute } from "vue-router/composables";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
-import { getColumns } from "./config/columns";
+import columns, { getColumns } from "./config/columns";
 import { FilterableTable, TablePlaceholder } from "../../system";
 import * as api from "./api";
-import { user } from "./variables";
+import { user, useStore } from "./variables";
 import {
  formatFilters, formatFilterBadges, formattedFilter, formatFilterSaved,
 } from "./utils";
@@ -79,6 +80,7 @@ const showPlaceholder = ref(false);
 const placeholderType = ref("loading");
 const route = useRoute();
 const defaultSort = ref("case_number:desc");
+const store = useStore();
 
 const dataPagination = ref({
  total: 0,
@@ -204,9 +206,36 @@ const autoPagination = () => {
  paginator.value.setPerPage(appropriateSize);
 };
 
+const updateUserConfiguration = async () => {
+ const userConf = store.getters["core:cases/getUserConfiguration"];
+
+ const response = await api.updateUserConfiguration(userConf);
+ return response;
+};
+
+const onStopResize = (column) => {
+ store.commit("core:cases/updateColumnWidth", {
+ column: column.field,
+ width: column.width,
+ });
+ updateUserConfiguration();
+};
+
+const updateColumnWithUserConfiguration = (columnsDefault) => {
+ const casesColumns = store.getters["core:cases/getCasesColumns"];
+
+ columnsDefault.forEach((column) => {
+ if (casesColumns[column.field]) {
+ column.width = casesColumns[column.field].width;
+ }
+ });
+
+ return columnsDefault;
+};
+
 onMounted(() => {
  columnsConfig.value = getColumns(props.listId);
-
+ columnsConfig.value = updateColumnWithUserConfiguration(columnsConfig.value);
  getFilters().then((response) => {
  const filtersSaved = formatFilterSaved(response.data.filters);
  filters.value = filtersSaved;

resources/jscomposition/cases/casesMain/api/index.js

@@ -575,3 +575,15 @@ export const getCaseFilters = async (status = "") => {
 
  return response.data;
 };
+
+export const getUserConfiguration = async () => {
+ const response = await api.get("users/configuration");
+
+ return response.data;
+};
+
+export const updateUserConfiguration = async (data) => {
+ const response = await api.put("users/configuration", data);
+
+ return response.data;
+};

resources/jscomposition/cases/casesMain/main.js

@@ -1,19 +1,33 @@
 import App from "./App.vue";
 import { routes } from "./routes";
+import { cases } from "./store";
+import { getUserConfiguration } from "./api";
 
 Vue.use(VueRouter);
+Vue.globalStore.registerModule("core:cases", cases);
 
 const router = new VueRouter({
  mode: "history",
  base: "/",
  routes,
 });
 
-new Vue({
- el: "#cases-main",
- router,
- components: {
- App,
- },
- render: (h) => h(App),
+const loadUserConfiguration = async () => {
+ const response = await getUserConfiguration();
+
+ Vue.globalStore.commit("core:cases/updateUserConfiguration", {
+ user_id: response.user_id,
+ ui_configuration: JSON.parse(response.ui_configuration),
+ });
+};
+
+loadUserConfiguration().then(() => {
+ new Vue({
+ el: "#cases-main",
+ router,
+ components: {
+ App,
+ },
+ render: (h) => h(App),
+ });
 });

resources/jscomposition/cases/casesMain/store/index.js

@@ -0,0 +1 @@
+export * from "./store";

resources/jscomposition/cases/casesMain/store/store.js

@@ -0,0 +1,39 @@
+// Store module vuex - cases
+export default {};
+
+export const cases = {
+ namespaced: true,
+ state: () => ({
+ userConfiguration: {},
+ }),
+ mutations: {
+ updateUserConfiguration: (state, config) => {
+ state.userConfiguration = config;
+ },
+ updateColumnWidth: (state, { column, width }) => {
+ if (!state.userConfiguration.ui_configuration) {
+ state.userConfiguration.ui_configuration = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases) {
+ state.userConfiguration.ui_configuration.cases = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases.columns) {
+ state.userConfiguration.ui_configuration.cases.columns = {};
+ }
+
+ state.userConfiguration.ui_configuration.cases.columns[column] = {
+ width,
+ };
+ },
+ },
+ getters: {
+ getUserConfiguration(state) {
+ return state.userConfiguration;
+ },
+ getCasesColumns(state) {
+ return state.userConfiguration.ui_configuration?.cases?.columns;
+ },
+ },
+};

resources/jscomposition/cases/casesMain/variables/index.js

@@ -3,3 +3,5 @@ export default {};
 export const api = window.ProcessMaker?.apiClient;
 
 export const user = currentUser;
+
+export const useStore = () => Vue.globalStore;

resources/jscomposition/system/table/FilterableTable.vue

@@ -5,7 +5,8 @@
  :data="data"
  :placeholder="placeholder"
  :config="config"
- class="tw-grow">
+ class="tw-grow"
+ @stopResize="onStopResize">
  <template
  v-for="(column, index) in columns"
  #[`theader-filter-${column.field}`]>
@@ -29,7 +30,7 @@ import { ref } from "vue";
 import { BaseTable } from "../../base";
 import { FilterColumn } from "./filter/defaultFilter/index";
 
-const emit = defineEmits(["changeFilter"]);
+const emit = defineEmits(["changeFilter", "stopResize"]);
 
 const props = defineProps({
  columns: {
@@ -117,6 +118,10 @@ const getHeightTBody = () => baseTable.value.$el.clientHeight - baseTable.value.
 
 const getHeightThead = () => baseTable.value.$refs.thead.clientHeight;
 
+const onStopResize = (column) => {
+ emit("stopResize", column);
+};
+
 defineExpose({
  removeFilter,
  removeAllFilters,

resources/jscomposition/base/table/BaseTable.vue

@@ -15,7 +15,8 @@
  v-for="(column, index) in columns"
  :key="index"
  :columns="columns"
- :column="column">
+ :column="column"
+ @stopResize="onStopResize">
  <slot :name="`theader-${column.field}`" />
  <template #filter>
  <slot :name="`theader-filter-${column.field}`" />
@@ -118,7 +119,7 @@ export default defineComponent({
  default: () => false,
  },
  },
- setup(props) {
+ setup(props, { emit }) {
  const slots = useSlots();
  const configRow = ref([]);
  const showContainer = ref(false);
@@ -141,13 +142,18 @@ export default defineComponent({
 
  const getShowContainer = (index) => configRow.value[index]?.showContainer;
 
+ const onStopResize = (column) => {
+ emit("stopResize", column);
+ };
+
  return {
  configRow,
  showContainer,
  toogleContainer,
  getShowContainer,
  getDefaultConfig,
  slots,
+ onStopResize,
  checkContainerRow,
  checkEllipsisMenu,
  tbody,

resources/jscomposition/base/table/THeader.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { isFunction } from "lodash";
-import { defineComponent, computed, ref } from "vue";
+import { defineComponent, computed } from "vue";
 import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
@@ -38,7 +38,12 @@ export default defineComponent({
  },
  },
  setup(props, { emit }) {
- const columnResize = columnResizeComposable(props.column);
+ const columnResize = columnResizeComposable({
+ column: props.column,
+ stopResize: () => {
+ emit("stopResize", props.column);
+ },
+ });
 
  const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
 

resources/jscomposition/base/table/composables/columnComposable.js

@@ -7,7 +7,7 @@ export default {};
  * @param {*} tableName
  * @returns
  */
-export const columnResizeComposable = (column) => {
+export const columnResizeComposable = ({ column, stopResize }) => {
  const startX = ref(0);
  const startWidth = ref(0);
  const isResizing = ref(false);
@@ -24,11 +24,12 @@ export const columnResizeComposable = (column) => {
  }
  };
 
- const stopResize = () => {
+ const stopResizeHandler = () => {
  if (isResizing.value) {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  isResizing.value = false;
+ stopResize?.();
  }
  };
 
@@ -39,15 +40,16 @@ export const columnResizeComposable = (column) => {
  startWidth.value = column.width || minWidth;
 
  document.addEventListener("mousemove", doResize);
- document.addEventListener("mouseup", stopResize);
+ document.addEventListener("mouseup", stopResizeHandler);
  };
 
  onUnmounted(() => {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  });
 
  return {
  startResize,
+ stopResizeHandler,
  };
 };

resources/jscomposition/cases/casesMain/App.vue

@@ -1,18 +1,8 @@
 <template>
  <div class="tw-flex tw-h-[90vh] ">
- <RouterView></RouterView>
+ <RouterView />
  </div>
 </template>
-<script>
-import { defineComponent } from "vue";
+<script setup>
 import { RouterView } from "vue-router";
-
-export default defineComponent({
- components: {
- RouterView,
- },
- setup() {
- return {};
- },
-});
 </script>

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -26,6 +26,7 @@
  class="tw-text-[#4F5154]"
  :placeholder="showPlaceholder"
  @changeFilter="onChangeFilter"
+ @stopResize="onStopResize"
  @resetFilters="onChangeFilter">
  <template #placeholder>
  <TablePlaceholder
@@ -53,10 +54,10 @@ import { useRouter, useRoute } from "vue-router/composables";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
-import { getColumns } from "./config/columns";
+import columns, { getColumns } from "./config/columns";
 import { FilterableTable, TablePlaceholder } from "../../system";
 import * as api from "./api";
-import { user } from "./variables";
+import { user, useStore } from "./variables";
 import {
  formatFilters, formatFilterBadges, formattedFilter, formatFilterSaved,
 } from "./utils";
@@ -79,6 +80,7 @@ const showPlaceholder = ref(false);
 const placeholderType = ref("loading");
 const route = useRoute();
 const defaultSort = ref("case_number:desc");
+const store = useStore();
 
 const dataPagination = ref({
  total: 0,
@@ -204,9 +206,36 @@ const autoPagination = () => {
  paginator.value.setPerPage(appropriateSize);
 };
 
+const updateUserConfiguration = async () => {
+ const userConf = store.getters["core:cases/getUserConfiguration"];
+
+ const response = await api.updateUserConfiguration(userConf);
+ return response;
+};
+
+const onStopResize = (column) => {
+ store.commit("core:cases/updateColumnWidth", {
+ column: column.field,
+ width: column.width,
+ });
+ updateUserConfiguration();
+};
+
+const updateColumnWithUserConfiguration = (columnsDefault) => {
+ const casesColumns = store.getters["core:cases/getCasesColumns"];
+
+ columnsDefault.forEach((column) => {
+ if (casesColumns[column.field]) {
+ column.width = casesColumns[column.field].width;
+ }
+ });
+
+ return columnsDefault;
+};
+
 onMounted(() => {
  columnsConfig.value = getColumns(props.listId);
-
+ columnsConfig.value = updateColumnWithUserConfiguration(columnsConfig.value);
  getFilters().then((response) => {
  const filtersSaved = formatFilterSaved(response.data.filters);
  filters.value = filtersSaved;

resources/jscomposition/cases/casesMain/api/index.js

@@ -575,3 +575,15 @@ export const getCaseFilters = async (status = "") => {
 
  return response.data;
 };
+
+export const getUserConfiguration = async () => {
+ const response = await api.get("users/configuration");
+
+ return response.data;
+};
+
+export const updateUserConfiguration = async (data) => {
+ const response = await api.put("users/configuration", data);
+
+ return response.data;
+};

resources/jscomposition/cases/casesMain/main.js

@@ -1,19 +1,33 @@
 import App from "./App.vue";
 import { routes } from "./routes";
+import { cases } from "./store";
+import { getUserConfiguration } from "./api";
 
 Vue.use(VueRouter);
+Vue.globalStore.registerModule("core:cases", cases);
 
 const router = new VueRouter({
  mode: "history",
  base: "/",
  routes,
 });
 
-new Vue({
- el: "#cases-main",
- router,
- components: {
- App,
- },
- render: (h) => h(App),
+const loadUserConfiguration = async () => {
+ const response = await getUserConfiguration();
+
+ Vue.globalStore.commit("core:cases/updateUserConfiguration", {
+ user_id: response.user_id,
+ ui_configuration: JSON.parse(response.ui_configuration),
+ });
+};
+
+loadUserConfiguration().then(() => {
+ new Vue({
+ el: "#cases-main",
+ router,
+ components: {
+ App,
+ },
+ render: (h) => h(App),
+ });
 });

resources/jscomposition/cases/casesMain/store/index.js

@@ -0,0 +1 @@
+export * from "./store";

resources/jscomposition/cases/casesMain/store/store.js

@@ -0,0 +1,39 @@
+// Store module vuex - cases
+export default {};
+
+export const cases = {
+ namespaced: true,
+ state: () => ({
+ userConfiguration: {},
+ }),
+ mutations: {
+ updateUserConfiguration: (state, config) => {
+ state.userConfiguration = config;
+ },
+ updateColumnWidth: (state, { column, width }) => {
+ if (!state.userConfiguration.ui_configuration) {
+ state.userConfiguration.ui_configuration = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases) {
+ state.userConfiguration.ui_configuration.cases = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases.columns) {
+ state.userConfiguration.ui_configuration.cases.columns = {};
+ }
+
+ state.userConfiguration.ui_configuration.cases.columns[column] = {
+ width,
+ };
+ },
+ },
+ getters: {
+ getUserConfiguration(state) {
+ return state.userConfiguration;
+ },
+ getCasesColumns(state) {
+ return state.userConfiguration.ui_configuration?.cases?.columns;
+ },
+ },
+};

resources/jscomposition/cases/casesMain/variables/index.js

@@ -3,3 +3,5 @@ export default {};
 export const api = window.ProcessMaker?.apiClient;
 
 export const user = currentUser;
+
+export const useStore = () => Vue.globalStore;

resources/jscomposition/system/table/FilterableTable.vue

@@ -5,7 +5,8 @@
  :data="data"
  :placeholder="placeholder"
  :config="config"
- class="tw-grow">
+ class="tw-grow"
+ @stopResize="onStopResize">
  <template
  v-for="(column, index) in columns"
  #[`theader-filter-${column.field}`]>
@@ -29,7 +30,7 @@ import { ref } from "vue";
 import { BaseTable } from "../../base";
 import { FilterColumn } from "./filter/defaultFilter/index";
 
-const emit = defineEmits(["changeFilter"]);
+const emit = defineEmits(["changeFilter", "stopResize"]);
 
 const props = defineProps({
  columns: {
@@ -117,6 +118,10 @@ const getHeightTBody = () => baseTable.value.$el.clientHeight - baseTable.value.
 
 const getHeightThead = () => baseTable.value.$refs.thead.clientHeight;
 
+const onStopResize = (column) => {
+ emit("stopResize", column);
+};
+
 defineExpose({
  removeFilter,
  removeAllFilters,

resources/jscomposition/base/table/BaseTable.vue

@@ -15,7 +15,8 @@
  v-for="(column, index) in columns"
  :key="index"
  :columns="columns"
- :column="column">
+ :column="column"
+ @stopResize="onStopResize">
  <slot :name="`theader-${column.field}`" />
  <template #filter>
  <slot :name="`theader-filter-${column.field}`" />
@@ -118,7 +119,7 @@ export default defineComponent({
  default: () => false,
  },
  },
- setup(props) {
+ setup(props, { emit }) {
  const slots = useSlots();
  const configRow = ref([]);
  const showContainer = ref(false);
@@ -141,13 +142,18 @@ export default defineComponent({
 
  const getShowContainer = (index) => configRow.value[index]?.showContainer;
 
+ const onStopResize = (column) => {
+ emit("stopResize", column);
+ };
+
  return {
  configRow,
  showContainer,
  toogleContainer,
  getShowContainer,
  getDefaultConfig,
  slots,
+ onStopResize,
  checkContainerRow,
  checkEllipsisMenu,
  tbody,

resources/jscomposition/base/table/THeader.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { isFunction } from "lodash";
-import { defineComponent, computed, ref } from "vue";
+import { defineComponent, computed } from "vue";
 import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
@@ -38,7 +38,12 @@ export default defineComponent({
  },
  },
  setup(props, { emit }) {
- const columnResize = columnResizeComposable(props.column);
+ const columnResize = columnResizeComposable({
+ column: props.column,
+ stopResize: () => {
+ emit("stopResize", props.column);
+ },
+ });
 
  const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
 

resources/jscomposition/base/table/composables/columnComposable.js

@@ -7,7 +7,7 @@ export default {};
  * @param {*} tableName
  * @returns
  */
-export const columnResizeComposable = (column) => {
+export const columnResizeComposable = ({ column, stopResize }) => {
  const startX = ref(0);
  const startWidth = ref(0);
  const isResizing = ref(false);
@@ -24,11 +24,12 @@ export const columnResizeComposable = (column) => {
  }
  };
 
- const stopResize = () => {
+ const stopResizeHandler = () => {
  if (isResizing.value) {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  isResizing.value = false;
+ stopResize?.();
  }
  };
 
@@ -39,15 +40,16 @@ export const columnResizeComposable = (column) => {
  startWidth.value = column.width || minWidth;
 
  document.addEventListener("mousemove", doResize);
- document.addEventListener("mouseup", stopResize);
+ document.addEventListener("mouseup", stopResizeHandler);
  };
 
  onUnmounted(() => {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  });
 
  return {
  startResize,
+ stopResizeHandler,
  };
 };

resources/jscomposition/cases/casesMain/App.vue

@@ -1,18 +1,8 @@
 <template>
  <div class="tw-flex tw-h-[90vh] ">
- <RouterView></RouterView>
+ <RouterView />
  </div>
 </template>
-<script>
-import { defineComponent } from "vue";
+<script setup>
 import { RouterView } from "vue-router";
-
-export default defineComponent({
- components: {
- RouterView,
- },
- setup() {
- return {};
- },
-});
 </script>

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -26,6 +26,7 @@
  class="tw-text-[#4F5154]"
  :placeholder="showPlaceholder"
  @changeFilter="onChangeFilter"
+ @stopResize="onStopResize"
  @resetFilters="onChangeFilter">
  <template #placeholder>
  <TablePlaceholder
@@ -53,10 +54,10 @@ import { useRouter, useRoute } from "vue-router/composables";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
-import { getColumns } from "./config/columns";
+import columns, { getColumns } from "./config/columns";
 import { FilterableTable, TablePlaceholder } from "../../system";
 import * as api from "./api";
-import { user } from "./variables";
+import { user, useStore } from "./variables";
 import {
  formatFilters, formatFilterBadges, formattedFilter, formatFilterSaved,
 } from "./utils";
@@ -79,6 +80,7 @@ const showPlaceholder = ref(false);
 const placeholderType = ref("loading");
 const route = useRoute();
 const defaultSort = ref("case_number:desc");
+const store = useStore();
 
 const dataPagination = ref({
  total: 0,
@@ -204,9 +206,36 @@ const autoPagination = () => {
  paginator.value.setPerPage(appropriateSize);
 };
 
+const updateUserConfiguration = async () => {
+ const userConf = store.getters["core:cases/getUserConfiguration"];
+
+ const response = await api.updateUserConfiguration(userConf);
+ return response;
+};
+
+const onStopResize = (column) => {
+ store.commit("core:cases/updateColumnWidth", {
+ column: column.field,
+ width: column.width,
+ });
+ updateUserConfiguration();
+};
+
+const updateColumnWithUserConfiguration = (columnsDefault) => {
+ const casesColumns = store.getters["core:cases/getCasesColumns"];
+
+ columnsDefault.forEach((column) => {
+ if (casesColumns[column.field]) {
+ column.width = casesColumns[column.field].width;
+ }
+ });
+
+ return columnsDefault;
+};
+
 onMounted(() => {
  columnsConfig.value = getColumns(props.listId);
-
+ columnsConfig.value = updateColumnWithUserConfiguration(columnsConfig.value);
  getFilters().then((response) => {
  const filtersSaved = formatFilterSaved(response.data.filters);
  filters.value = filtersSaved;

resources/jscomposition/cases/casesMain/api/index.js

@@ -575,3 +575,15 @@ export const getCaseFilters = async (status = "") => {
 
  return response.data;
 };
+
+export const getUserConfiguration = async () => {
+ const response = await api.get("users/configuration");
+
+ return response.data;
+};
+
+export const updateUserConfiguration = async (data) => {
+ const response = await api.put("users/configuration", data);
+
+ return response.data;
+};

resources/jscomposition/cases/casesMain/main.js

@@ -1,19 +1,33 @@
 import App from "./App.vue";
 import { routes } from "./routes";
+import { cases } from "./store";
+import { getUserConfiguration } from "./api";
 
 Vue.use(VueRouter);
+Vue.globalStore.registerModule("core:cases", cases);
 
 const router = new VueRouter({
  mode: "history",
  base: "/",
  routes,
 });
 
-new Vue({
- el: "#cases-main",
- router,
- components: {
- App,
- },
- render: (h) => h(App),
+const loadUserConfiguration = async () => {
+ const response = await getUserConfiguration();
+
+ Vue.globalStore.commit("core:cases/updateUserConfiguration", {
+ user_id: response.user_id,
+ ui_configuration: JSON.parse(response.ui_configuration),
+ });
+};
+
+loadUserConfiguration().then(() => {
+ new Vue({
+ el: "#cases-main",
+ router,
+ components: {
+ App,
+ },
+ render: (h) => h(App),
+ });
 });

resources/jscomposition/cases/casesMain/store/index.js

@@ -0,0 +1 @@
+export * from "./store";

resources/jscomposition/cases/casesMain/store/store.js

@@ -0,0 +1,39 @@
+// Store module vuex - cases
+export default {};
+
+export const cases = {
+ namespaced: true,
+ state: () => ({
+ userConfiguration: {},
+ }),
+ mutations: {
+ updateUserConfiguration: (state, config) => {
+ state.userConfiguration = config;
+ },
+ updateColumnWidth: (state, { column, width }) => {
+ if (!state.userConfiguration.ui_configuration) {
+ state.userConfiguration.ui_configuration = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases) {
+ state.userConfiguration.ui_configuration.cases = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases.columns) {
+ state.userConfiguration.ui_configuration.cases.columns = {};
+ }
+
+ state.userConfiguration.ui_configuration.cases.columns[column] = {
+ width,
+ };
+ },
+ },
+ getters: {
+ getUserConfiguration(state) {
+ return state.userConfiguration;
+ },
+ getCasesColumns(state) {
+ return state.userConfiguration.ui_configuration?.cases?.columns;
+ },
+ },
+};

resources/jscomposition/cases/casesMain/variables/index.js

@@ -3,3 +3,5 @@ export default {};
 export const api = window.ProcessMaker?.apiClient;
 
 export const user = currentUser;
+
+export const useStore = () => Vue.globalStore;

resources/jscomposition/system/table/FilterableTable.vue

@@ -5,7 +5,8 @@
  :data="data"
  :placeholder="placeholder"
  :config="config"
- class="tw-grow">
+ class="tw-grow"
+ @stopResize="onStopResize">
  <template
  v-for="(column, index) in columns"
  #[`theader-filter-${column.field}`]>
@@ -29,7 +30,7 @@ import { ref } from "vue";
 import { BaseTable } from "../../base";
 import { FilterColumn } from "./filter/defaultFilter/index";
 
-const emit = defineEmits(["changeFilter"]);
+const emit = defineEmits(["changeFilter", "stopResize"]);
 
 const props = defineProps({
  columns: {
@@ -117,6 +118,10 @@ const getHeightTBody = () => baseTable.value.$el.clientHeight - baseTable.value.
 
 const getHeightThead = () => baseTable.value.$refs.thead.clientHeight;
 
+const onStopResize = (column) => {
+ emit("stopResize", column);
+};
+
 defineExpose({
  removeFilter,
  removeAllFilters,

resources/jscomposition/base/table/BaseTable.vue

@@ -15,7 +15,8 @@
  v-for="(column, index) in columns"
  :key="index"
  :columns="columns"
- :column="column">
+ :column="column"
+ @stopResize="onStopResize">
  <slot :name="`theader-${column.field}`" />
  <template #filter>
  <slot :name="`theader-filter-${column.field}`" />
@@ -118,7 +119,7 @@ export default defineComponent({
  default: () => false,
  },
  },
- setup(props) {
+ setup(props, { emit }) {
  const slots = useSlots();
  const configRow = ref([]);
  const showContainer = ref(false);
@@ -141,13 +142,18 @@ export default defineComponent({
 
  const getShowContainer = (index) => configRow.value[index]?.showContainer;
 
+ const onStopResize = (column) => {
+ emit("stopResize", column);
+ };
+
  return {
  configRow,
  showContainer,
  toogleContainer,
  getShowContainer,
  getDefaultConfig,
  slots,
+ onStopResize,
  checkContainerRow,
  checkEllipsisMenu,
  tbody,

resources/jscomposition/base/table/THeader.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { isFunction } from "lodash";
-import { defineComponent, computed, ref } from "vue";
+import { defineComponent, computed } from "vue";
 import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
@@ -38,7 +38,12 @@ export default defineComponent({
  },
  },
  setup(props, { emit }) {
- const columnResize = columnResizeComposable(props.column);
+ const columnResize = columnResizeComposable({
+ column: props.column,
+ stopResize: () => {
+ emit("stopResize", props.column);
+ },
+ });
 
  const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
 

resources/jscomposition/base/table/composables/columnComposable.js

@@ -7,7 +7,7 @@ export default {};
  * @param {*} tableName
  * @returns
  */
-export const columnResizeComposable = (column) => {
+export const columnResizeComposable = ({ column, stopResize }) => {
  const startX = ref(0);
  const startWidth = ref(0);
  const isResizing = ref(false);
@@ -24,11 +24,12 @@ export const columnResizeComposable = (column) => {
  }
  };
 
- const stopResize = () => {
+ const stopResizeHandler = () => {
  if (isResizing.value) {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  isResizing.value = false;
+ stopResize?.();
  }
  };
 
@@ -39,15 +40,16 @@ export const columnResizeComposable = (column) => {
  startWidth.value = column.width || minWidth;
 
  document.addEventListener("mousemove", doResize);
- document.addEventListener("mouseup", stopResize);
+ document.addEventListener("mouseup", stopResizeHandler);
  };
 
  onUnmounted(() => {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  });
 
  return {
  startResize,
+ stopResizeHandler,
  };
 };

resources/jscomposition/cases/casesMain/App.vue

@@ -1,18 +1,8 @@
 <template>
  <div class="tw-flex tw-h-[90vh] ">
- <RouterView></RouterView>
+ <RouterView />
  </div>
 </template>
-<script>
-import { defineComponent } from "vue";
+<script setup>
 import { RouterView } from "vue-router";
-
-export default defineComponent({
- components: {
- RouterView,
- },
- setup() {
- return {};
- },
-});
 </script>

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -26,6 +26,7 @@
  class="tw-text-[#4F5154]"
  :placeholder="showPlaceholder"
  @changeFilter="onChangeFilter"
+ @stopResize="onStopResize"
  @resetFilters="onChangeFilter">
  <template #placeholder>
  <TablePlaceholder
@@ -53,10 +54,10 @@ import { useRouter, useRoute } from "vue-router/composables";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
-import { getColumns } from "./config/columns";
+import columns, { getColumns } from "./config/columns";
 import { FilterableTable, TablePlaceholder } from "../../system";
 import * as api from "./api";
-import { user } from "./variables";
+import { user, useStore } from "./variables";
 import {
  formatFilters, formatFilterBadges, formattedFilter, formatFilterSaved,
 } from "./utils";
@@ -79,6 +80,7 @@ const showPlaceholder = ref(false);
 const placeholderType = ref("loading");
 const route = useRoute();
 const defaultSort = ref("case_number:desc");
+const store = useStore();
 
 const dataPagination = ref({
  total: 0,
@@ -204,9 +206,36 @@ const autoPagination = () => {
  paginator.value.setPerPage(appropriateSize);
 };
 
+const updateUserConfiguration = async () => {
+ const userConf = store.getters["core:cases/getUserConfiguration"];
+
+ const response = await api.updateUserConfiguration(userConf);
+ return response;
+};
+
+const onStopResize = (column) => {
+ store.commit("core:cases/updateColumnWidth", {
+ column: column.field,
+ width: column.width,
+ });
+ updateUserConfiguration();
+};
+
+const updateColumnWithUserConfiguration = (columnsDefault) => {
+ const casesColumns = store.getters["core:cases/getCasesColumns"];
+
+ columnsDefault.forEach((column) => {
+ if (casesColumns[column.field]) {
+ column.width = casesColumns[column.field].width;
+ }
+ });
+
+ return columnsDefault;
+};
+
 onMounted(() => {
  columnsConfig.value = getColumns(props.listId);
-
+ columnsConfig.value = updateColumnWithUserConfiguration(columnsConfig.value);
  getFilters().then((response) => {
  const filtersSaved = formatFilterSaved(response.data.filters);
  filters.value = filtersSaved;

resources/jscomposition/cases/casesMain/api/index.js

@@ -575,3 +575,15 @@ export const getCaseFilters = async (status = "") => {
 
  return response.data;
 };
+
+export const getUserConfiguration = async () => {
+ const response = await api.get("users/configuration");
+
+ return response.data;
+};
+
+export const updateUserConfiguration = async (data) => {
+ const response = await api.put("users/configuration", data);
+
+ return response.data;
+};

resources/jscomposition/cases/casesMain/main.js

@@ -1,19 +1,33 @@
 import App from "./App.vue";
 import { routes } from "./routes";
+import { cases } from "./store";
+import { getUserConfiguration } from "./api";
 
 Vue.use(VueRouter);
+Vue.globalStore.registerModule("core:cases", cases);
 
 const router = new VueRouter({
  mode: "history",
  base: "/",
  routes,
 });
 
-new Vue({
- el: "#cases-main",
- router,
- components: {
- App,
- },
- render: (h) => h(App),
+const loadUserConfiguration = async () => {
+ const response = await getUserConfiguration();
+
+ Vue.globalStore.commit("core:cases/updateUserConfiguration", {
+ user_id: response.user_id,
+ ui_configuration: JSON.parse(response.ui_configuration),
+ });
+};
+
+loadUserConfiguration().then(() => {
+ new Vue({
+ el: "#cases-main",
+ router,
+ components: {
+ App,
+ },
+ render: (h) => h(App),
+ });
 });

resources/jscomposition/cases/casesMain/store/index.js

@@ -0,0 +1 @@
+export * from "./store";

resources/jscomposition/cases/casesMain/store/store.js

@@ -0,0 +1,39 @@
+// Store module vuex - cases
+export default {};
+
+export const cases = {
+ namespaced: true,
+ state: () => ({
+ userConfiguration: {},
+ }),
+ mutations: {
+ updateUserConfiguration: (state, config) => {
+ state.userConfiguration = config;
+ },
+ updateColumnWidth: (state, { column, width }) => {
+ if (!state.userConfiguration.ui_configuration) {
+ state.userConfiguration.ui_configuration = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases) {
+ state.userConfiguration.ui_configuration.cases = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases.columns) {
+ state.userConfiguration.ui_configuration.cases.columns = {};
+ }
+
+ state.userConfiguration.ui_configuration.cases.columns[column] = {
+ width,
+ };
+ },
+ },
+ getters: {
+ getUserConfiguration(state) {
+ return state.userConfiguration;
+ },
+ getCasesColumns(state) {
+ return state.userConfiguration.ui_configuration?.cases?.columns;
+ },
+ },
+};

resources/jscomposition/cases/casesMain/variables/index.js

@@ -3,3 +3,5 @@ export default {};
 export const api = window.ProcessMaker?.apiClient;
 
 export const user = currentUser;
+
+export const useStore = () => Vue.globalStore;

resources/jscomposition/system/table/FilterableTable.vue

@@ -5,7 +5,8 @@
  :data="data"
  :placeholder="placeholder"
  :config="config"
- class="tw-grow">
+ class="tw-grow"
+ @stopResize="onStopResize">
  <template
  v-for="(column, index) in columns"
  #[`theader-filter-${column.field}`]>
@@ -29,7 +30,7 @@ import { ref } from "vue";
 import { BaseTable } from "../../base";
 import { FilterColumn } from "./filter/defaultFilter/index";
 
-const emit = defineEmits(["changeFilter"]);
+const emit = defineEmits(["changeFilter", "stopResize"]);
 
 const props = defineProps({
  columns: {
@@ -117,6 +118,10 @@ const getHeightTBody = () => baseTable.value.$el.clientHeight - baseTable.value.
 
 const getHeightThead = () => baseTable.value.$refs.thead.clientHeight;
 
+const onStopResize = (column) => {
+ emit("stopResize", column);
+};
+
 defineExpose({
  removeFilter,
  removeAllFilters,

resources/jscomposition/base/table/BaseTable.vue

@@ -15,7 +15,8 @@
  v-for="(column, index) in columns"
  :key="index"
  :columns="columns"
- :column="column">
+ :column="column"
+ @stopResize="onStopResize">
  <slot :name="`theader-${column.field}`" />
  <template #filter>
  <slot :name="`theader-filter-${column.field}`" />
@@ -118,7 +119,7 @@ export default defineComponent({
  default: () => false,
  },
  },
- setup(props) {
+ setup(props, { emit }) {
  const slots = useSlots();
  const configRow = ref([]);
  const showContainer = ref(false);
@@ -141,13 +142,18 @@ export default defineComponent({
 
  const getShowContainer = (index) => configRow.value[index]?.showContainer;
 
+ const onStopResize = (column) => {
+ emit("stopResize", column);
+ };
+
  return {
  configRow,
  showContainer,
  toogleContainer,
  getShowContainer,
  getDefaultConfig,
  slots,
+ onStopResize,
  checkContainerRow,
  checkEllipsisMenu,
  tbody,

resources/jscomposition/base/table/THeader.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { isFunction } from "lodash";
-import { defineComponent, computed, ref } from "vue";
+import { defineComponent, computed } from "vue";
 import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
@@ -38,7 +38,12 @@ export default defineComponent({
  },
  },
  setup(props, { emit }) {
- const columnResize = columnResizeComposable(props.column);
+ const columnResize = columnResizeComposable({
+ column: props.column,
+ stopResize: () => {
+ emit("stopResize", props.column);
+ },
+ });
 
  const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
 

resources/jscomposition/base/table/composables/columnComposable.js

@@ -7,7 +7,7 @@ export default {};
  * @param {*} tableName
  * @returns
  */
-export const columnResizeComposable = (column) => {
+export const columnResizeComposable = ({ column, stopResize }) => {
  const startX = ref(0);
  const startWidth = ref(0);
  const isResizing = ref(false);
@@ -24,11 +24,12 @@ export const columnResizeComposable = (column) => {
  }
  };
 
- const stopResize = () => {
+ const stopResizeHandler = () => {
  if (isResizing.value) {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  isResizing.value = false;
+ stopResize?.();
  }
  };
 
@@ -39,15 +40,16 @@ export const columnResizeComposable = (column) => {
  startWidth.value = column.width || minWidth;
 
  document.addEventListener("mousemove", doResize);
- document.addEventListener("mouseup", stopResize);
+ document.addEventListener("mouseup", stopResizeHandler);
  };
 
  onUnmounted(() => {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  });
 
  return {
  startResize,
+ stopResizeHandler,
  };
 };

resources/jscomposition/cases/casesMain/App.vue

@@ -1,18 +1,8 @@
 <template>
  <div class="tw-flex tw-h-[90vh] ">
- <RouterView></RouterView>
+ <RouterView />
  </div>
 </template>
-<script>
-import { defineComponent } from "vue";
+<script setup>
 import { RouterView } from "vue-router";
-
-export default defineComponent({
- components: {
- RouterView,
- },
- setup() {
- return {};
- },
-});
 </script>

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -26,6 +26,7 @@
  class="tw-text-[#4F5154]"
  :placeholder="showPlaceholder"
  @changeFilter="onChangeFilter"
+ @stopResize="onStopResize"
  @resetFilters="onChangeFilter">
  <template #placeholder>
  <TablePlaceholder
@@ -53,10 +54,10 @@ import { useRouter, useRoute } from "vue-router/composables";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
-import { getColumns } from "./config/columns";
+import columns, { getColumns } from "./config/columns";
 import { FilterableTable, TablePlaceholder } from "../../system";
 import * as api from "./api";
-import { user } from "./variables";
+import { user, useStore } from "./variables";
 import {
  formatFilters, formatFilterBadges, formattedFilter, formatFilterSaved,
 } from "./utils";
@@ -79,6 +80,7 @@ const showPlaceholder = ref(false);
 const placeholderType = ref("loading");
 const route = useRoute();
 const defaultSort = ref("case_number:desc");
+const store = useStore();
 
 const dataPagination = ref({
  total: 0,
@@ -204,9 +206,36 @@ const autoPagination = () => {
  paginator.value.setPerPage(appropriateSize);
 };
 
+const updateUserConfiguration = async () => {
+ const userConf = store.getters["core:cases/getUserConfiguration"];
+
+ const response = await api.updateUserConfiguration(userConf);
+ return response;
+};
+
+const onStopResize = (column) => {
+ store.commit("core:cases/updateColumnWidth", {
+ column: column.field,
+ width: column.width,
+ });
+ updateUserConfiguration();
+};
+
+const updateColumnWithUserConfiguration = (columnsDefault) => {
+ const casesColumns = store.getters["core:cases/getCasesColumns"];
+
+ columnsDefault.forEach((column) => {
+ if (casesColumns[column.field]) {
+ column.width = casesColumns[column.field].width;
+ }
+ });
+
+ return columnsDefault;
+};
+
 onMounted(() => {
  columnsConfig.value = getColumns(props.listId);
-
+ columnsConfig.value = updateColumnWithUserConfiguration(columnsConfig.value);
  getFilters().then((response) => {
  const filtersSaved = formatFilterSaved(response.data.filters);
  filters.value = filtersSaved;

resources/jscomposition/cases/casesMain/api/index.js

@@ -575,3 +575,15 @@ export const getCaseFilters = async (status = "") => {
 
  return response.data;
 };
+
+export const getUserConfiguration = async () => {
+ const response = await api.get("users/configuration");
+
+ return response.data;
+};
+
+export const updateUserConfiguration = async (data) => {
+ const response = await api.put("users/configuration", data);
+
+ return response.data;
+};

resources/jscomposition/cases/casesMain/main.js

@@ -1,19 +1,33 @@
 import App from "./App.vue";
 import { routes } from "./routes";
+import { cases } from "./store";
+import { getUserConfiguration } from "./api";
 
 Vue.use(VueRouter);
+Vue.globalStore.registerModule("core:cases", cases);
 
 const router = new VueRouter({
  mode: "history",
  base: "/",
  routes,
 });
 
-new Vue({
- el: "#cases-main",
- router,
- components: {
- App,
- },
- render: (h) => h(App),
+const loadUserConfiguration = async () => {
+ const response = await getUserConfiguration();
+
+ Vue.globalStore.commit("core:cases/updateUserConfiguration", {
+ user_id: response.user_id,
+ ui_configuration: JSON.parse(response.ui_configuration),
+ });
+};
+
+loadUserConfiguration().then(() => {
+ new Vue({
+ el: "#cases-main",
+ router,
+ components: {
+ App,
+ },
+ render: (h) => h(App),
+ });
 });

resources/jscomposition/cases/casesMain/store/index.js

@@ -0,0 +1 @@
+export * from "./store";

resources/jscomposition/cases/casesMain/store/store.js

@@ -0,0 +1,39 @@
+// Store module vuex - cases
+export default {};
+
+export const cases = {
+ namespaced: true,
+ state: () => ({
+ userConfiguration: {},
+ }),
+ mutations: {
+ updateUserConfiguration: (state, config) => {
+ state.userConfiguration = config;
+ },
+ updateColumnWidth: (state, { column, width }) => {
+ if (!state.userConfiguration.ui_configuration) {
+ state.userConfiguration.ui_configuration = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases) {
+ state.userConfiguration.ui_configuration.cases = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases.columns) {
+ state.userConfiguration.ui_configuration.cases.columns = {};
+ }
+
+ state.userConfiguration.ui_configuration.cases.columns[column] = {
+ width,
+ };
+ },
+ },
+ getters: {
+ getUserConfiguration(state) {
+ return state.userConfiguration;
+ },
+ getCasesColumns(state) {
+ return state.userConfiguration.ui_configuration?.cases?.columns;
+ },
+ },
+};

resources/jscomposition/cases/casesMain/variables/index.js

@@ -3,3 +3,5 @@ export default {};
 export const api = window.ProcessMaker?.apiClient;
 
 export const user = currentUser;
+
+export const useStore = () => Vue.globalStore;

resources/jscomposition/system/table/FilterableTable.vue

@@ -5,7 +5,8 @@
  :data="data"
  :placeholder="placeholder"
  :config="config"
- class="tw-grow">
+ class="tw-grow"
+ @stopResize="onStopResize">
  <template
  v-for="(column, index) in columns"
  #[`theader-filter-${column.field}`]>
@@ -29,7 +30,7 @@ import { ref } from "vue";
 import { BaseTable } from "../../base";
 import { FilterColumn } from "./filter/defaultFilter/index";
 
-const emit = defineEmits(["changeFilter"]);
+const emit = defineEmits(["changeFilter", "stopResize"]);
 
 const props = defineProps({
  columns: {
@@ -117,6 +118,10 @@ const getHeightTBody = () => baseTable.value.$el.clientHeight - baseTable.value.
 
 const getHeightThead = () => baseTable.value.$refs.thead.clientHeight;
 
+const onStopResize = (column) => {
+ emit("stopResize", column);
+};
+
 defineExpose({
  removeFilter,
  removeAllFilters,

resources/jscomposition/base/table/BaseTable.vue

@@ -15,7 +15,8 @@
  v-for="(column, index) in columns"
  :key="index"
  :columns="columns"
- :column="column">
+ :column="column"
+ @stopResize="onStopResize">
  <slot :name="`theader-${column.field}`" />
  <template #filter>
  <slot :name="`theader-filter-${column.field}`" />
@@ -118,7 +119,7 @@ export default defineComponent({
  default: () => false,
  },
  },
- setup(props) {
+ setup(props, { emit }) {
  const slots = useSlots();
  const configRow = ref([]);
  const showContainer = ref(false);
@@ -141,13 +142,18 @@ export default defineComponent({
 
  const getShowContainer = (index) => configRow.value[index]?.showContainer;
 
+ const onStopResize = (column) => {
+ emit("stopResize", column);
+ };
+
  return {
  configRow,
  showContainer,
  toogleContainer,
  getShowContainer,
  getDefaultConfig,
  slots,
+ onStopResize,
  checkContainerRow,
  checkEllipsisMenu,
  tbody,

resources/jscomposition/base/table/THeader.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { isFunction } from "lodash";
-import { defineComponent, computed, ref } from "vue";
+import { defineComponent, computed } from "vue";
 import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
@@ -38,7 +38,12 @@ export default defineComponent({
  },
  },
  setup(props, { emit }) {
- const columnResize = columnResizeComposable(props.column);
+ const columnResize = columnResizeComposable({
+ column: props.column,
+ stopResize: () => {
+ emit("stopResize", props.column);
+ },
+ });
 
  const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
 

resources/jscomposition/base/table/composables/columnComposable.js

@@ -7,7 +7,7 @@ export default {};
  * @param {*} tableName
  * @returns
  */
-export const columnResizeComposable = (column) => {
+export const columnResizeComposable = ({ column, stopResize }) => {
  const startX = ref(0);
  const startWidth = ref(0);
  const isResizing = ref(false);
@@ -24,11 +24,12 @@ export const columnResizeComposable = (column) => {
  }
  };
 
- const stopResize = () => {
+ const stopResizeHandler = () => {
  if (isResizing.value) {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  isResizing.value = false;
+ stopResize?.();
  }
  };
 
@@ -39,15 +40,16 @@ export const columnResizeComposable = (column) => {
  startWidth.value = column.width || minWidth;
 
  document.addEventListener("mousemove", doResize);
- document.addEventListener("mouseup", stopResize);
+ document.addEventListener("mouseup", stopResizeHandler);
  };
 
  onUnmounted(() => {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  });
 
  return {
  startResize,
+ stopResizeHandler,
  };
 };

resources/jscomposition/cases/casesMain/App.vue

@@ -1,18 +1,8 @@
 <template>
  <div class="tw-flex tw-h-[90vh] ">
- <RouterView></RouterView>
+ <RouterView />
  </div>
 </template>
-<script>
-import { defineComponent } from "vue";
+<script setup>
 import { RouterView } from "vue-router";
-
-export default defineComponent({
- components: {
- RouterView,
- },
- setup() {
- return {};
- },
-});
 </script>

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -26,6 +26,7 @@
  class="tw-text-[#4F5154]"
  :placeholder="showPlaceholder"
  @changeFilter="onChangeFilter"
+ @stopResize="onStopResize"
  @resetFilters="onChangeFilter">
  <template #placeholder>
  <TablePlaceholder
@@ -53,10 +54,10 @@ import { useRouter, useRoute } from "vue-router/composables";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
-import { getColumns } from "./config/columns";
+import columns, { getColumns } from "./config/columns";
 import { FilterableTable, TablePlaceholder } from "../../system";
 import * as api from "./api";
-import { user } from "./variables";
+import { user, useStore } from "./variables";
 import {
  formatFilters, formatFilterBadges, formattedFilter, formatFilterSaved,
 } from "./utils";
@@ -79,6 +80,7 @@ const showPlaceholder = ref(false);
 const placeholderType = ref("loading");
 const route = useRoute();
 const defaultSort = ref("case_number:desc");
+const store = useStore();
 
 const dataPagination = ref({
  total: 0,
@@ -204,9 +206,36 @@ const autoPagination = () => {
  paginator.value.setPerPage(appropriateSize);
 };
 
+const updateUserConfiguration = async () => {
+ const userConf = store.getters["core:cases/getUserConfiguration"];
+
+ const response = await api.updateUserConfiguration(userConf);
+ return response;
+};
+
+const onStopResize = (column) => {
+ store.commit("core:cases/updateColumnWidth", {
+ column: column.field,
+ width: column.width,
+ });
+ updateUserConfiguration();
+};
+
+const updateColumnWithUserConfiguration = (columnsDefault) => {
+ const casesColumns = store.getters["core:cases/getCasesColumns"];
+
+ columnsDefault.forEach((column) => {
+ if (casesColumns[column.field]) {
+ column.width = casesColumns[column.field].width;
+ }
+ });
+
+ return columnsDefault;
+};
+
 onMounted(() => {
  columnsConfig.value = getColumns(props.listId);
-
+ columnsConfig.value = updateColumnWithUserConfiguration(columnsConfig.value);
  getFilters().then((response) => {
  const filtersSaved = formatFilterSaved(response.data.filters);
  filters.value = filtersSaved;

resources/jscomposition/cases/casesMain/api/index.js

@@ -575,3 +575,15 @@ export const getCaseFilters = async (status = "") => {
 
  return response.data;
 };
+
+export const getUserConfiguration = async () => {
+ const response = await api.get("users/configuration");
+
+ return response.data;
+};
+
+export const updateUserConfiguration = async (data) => {
+ const response = await api.put("users/configuration", data);
+
+ return response.data;
+};

resources/jscomposition/cases/casesMain/main.js

@@ -1,19 +1,33 @@
 import App from "./App.vue";
 import { routes } from "./routes";
+import { cases } from "./store";
+import { getUserConfiguration } from "./api";
 
 Vue.use(VueRouter);
+Vue.globalStore.registerModule("core:cases", cases);
 
 const router = new VueRouter({
  mode: "history",
  base: "/",
  routes,
 });
 
-new Vue({
- el: "#cases-main",
- router,
- components: {
- App,
- },
- render: (h) => h(App),
+const loadUserConfiguration = async () => {
+ const response = await getUserConfiguration();
+
+ Vue.globalStore.commit("core:cases/updateUserConfiguration", {
+ user_id: response.user_id,
+ ui_configuration: JSON.parse(response.ui_configuration),
+ });
+};
+
+loadUserConfiguration().then(() => {
+ new Vue({
+ el: "#cases-main",
+ router,
+ components: {
+ App,
+ },
+ render: (h) => h(App),
+ });
 });

resources/jscomposition/cases/casesMain/store/index.js

@@ -0,0 +1 @@
+export * from "./store";

resources/jscomposition/cases/casesMain/store/store.js

@@ -0,0 +1,39 @@
+// Store module vuex - cases
+export default {};
+
+export const cases = {
+ namespaced: true,
+ state: () => ({
+ userConfiguration: {},
+ }),
+ mutations: {
+ updateUserConfiguration: (state, config) => {
+ state.userConfiguration = config;
+ },
+ updateColumnWidth: (state, { column, width }) => {
+ if (!state.userConfiguration.ui_configuration) {
+ state.userConfiguration.ui_configuration = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases) {
+ state.userConfiguration.ui_configuration.cases = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases.columns) {
+ state.userConfiguration.ui_configuration.cases.columns = {};
+ }
+
+ state.userConfiguration.ui_configuration.cases.columns[column] = {
+ width,
+ };
+ },
+ },
+ getters: {
+ getUserConfiguration(state) {
+ return state.userConfiguration;
+ },
+ getCasesColumns(state) {
+ return state.userConfiguration.ui_configuration?.cases?.columns;
+ },
+ },
+};

resources/jscomposition/cases/casesMain/variables/index.js

@@ -3,3 +3,5 @@ export default {};
 export const api = window.ProcessMaker?.apiClient;
 
 export const user = currentUser;
+
+export const useStore = () => Vue.globalStore;

resources/jscomposition/system/table/FilterableTable.vue

@@ -5,7 +5,8 @@
  :data="data"
  :placeholder="placeholder"
  :config="config"
- class="tw-grow">
+ class="tw-grow"
+ @stopResize="onStopResize">
  <template
  v-for="(column, index) in columns"
  #[`theader-filter-${column.field}`]>
@@ -29,7 +30,7 @@ import { ref } from "vue";
 import { BaseTable } from "../../base";
 import { FilterColumn } from "./filter/defaultFilter/index";
 
-const emit = defineEmits(["changeFilter"]);
+const emit = defineEmits(["changeFilter", "stopResize"]);
 
 const props = defineProps({
  columns: {
@@ -117,6 +118,10 @@ const getHeightTBody = () => baseTable.value.$el.clientHeight - baseTable.value.
 
 const getHeightThead = () => baseTable.value.$refs.thead.clientHeight;
 
+const onStopResize = (column) => {
+ emit("stopResize", column);
+};
+
 defineExpose({
  removeFilter,
  removeAllFilters,

resources/jscomposition/base/table/BaseTable.vue

@@ -15,7 +15,8 @@
  v-for="(column, index) in columns"
  :key="index"
  :columns="columns"
- :column="column">
+ :column="column"
+ @stopResize="onStopResize">
  <slot :name="`theader-${column.field}`" />
  <template #filter>
  <slot :name="`theader-filter-${column.field}`" />
@@ -118,7 +119,7 @@ export default defineComponent({
  default: () => false,
  },
  },
- setup(props) {
+ setup(props, { emit }) {
  const slots = useSlots();
  const configRow = ref([]);
  const showContainer = ref(false);
@@ -141,13 +142,18 @@ export default defineComponent({
 
  const getShowContainer = (index) => configRow.value[index]?.showContainer;
 
+ const onStopResize = (column) => {
+ emit("stopResize", column);
+ };
+
  return {
  configRow,
  showContainer,
  toogleContainer,
  getShowContainer,
  getDefaultConfig,
  slots,
+ onStopResize,
  checkContainerRow,
  checkEllipsisMenu,
  tbody,

resources/jscomposition/base/table/THeader.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { isFunction } from "lodash";
-import { defineComponent, computed, ref } from "vue";
+import { defineComponent, computed } from "vue";
 import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
@@ -38,7 +38,12 @@ export default defineComponent({
  },
  },
  setup(props, { emit }) {
- const columnResize = columnResizeComposable(props.column);
+ const columnResize = columnResizeComposable({
+ column: props.column,
+ stopResize: () => {
+ emit("stopResize", props.column);
+ },
+ });
 
  const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
 

resources/jscomposition/base/table/composables/columnComposable.js

@@ -7,7 +7,7 @@ export default {};
  * @param {*} tableName
  * @returns
  */
-export const columnResizeComposable = (column) => {
+export const columnResizeComposable = ({ column, stopResize }) => {
  const startX = ref(0);
  const startWidth = ref(0);
  const isResizing = ref(false);
@@ -24,11 +24,12 @@ export const columnResizeComposable = (column) => {
  }
  };
 
- const stopResize = () => {
+ const stopResizeHandler = () => {
  if (isResizing.value) {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  isResizing.value = false;
+ stopResize?.();
  }
  };
 
@@ -39,15 +40,16 @@ export const columnResizeComposable = (column) => {
  startWidth.value = column.width || minWidth;
 
  document.addEventListener("mousemove", doResize);
- document.addEventListener("mouseup", stopResize);
+ document.addEventListener("mouseup", stopResizeHandler);
  };
 
  onUnmounted(() => {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  });
 
  return {
  startResize,
+ stopResizeHandler,
  };
 };

resources/jscomposition/cases/casesMain/App.vue

@@ -1,18 +1,8 @@
 <template>
  <div class="tw-flex tw-h-[90vh] ">
- <RouterView></RouterView>
+ <RouterView />
  </div>
 </template>
-<script>
-import { defineComponent } from "vue";
+<script setup>
 import { RouterView } from "vue-router";
-
-export default defineComponent({
- components: {
- RouterView,
- },
- setup() {
- return {};
- },
-});
 </script>

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -26,6 +26,7 @@
  class="tw-text-[#4F5154]"
  :placeholder="showPlaceholder"
  @changeFilter="onChangeFilter"
+ @stopResize="onStopResize"
  @resetFilters="onChangeFilter">
  <template #placeholder>
  <TablePlaceholder
@@ -53,10 +54,10 @@ import { useRouter, useRoute } from "vue-router/composables";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
-import { getColumns } from "./config/columns";
+import columns, { getColumns } from "./config/columns";
 import { FilterableTable, TablePlaceholder } from "../../system";
 import * as api from "./api";
-import { user } from "./variables";
+import { user, useStore } from "./variables";
 import {
  formatFilters, formatFilterBadges, formattedFilter, formatFilterSaved,
 } from "./utils";
@@ -79,6 +80,7 @@ const showPlaceholder = ref(false);
 const placeholderType = ref("loading");
 const route = useRoute();
 const defaultSort = ref("case_number:desc");
+const store = useStore();
 
 const dataPagination = ref({
  total: 0,
@@ -204,9 +206,36 @@ const autoPagination = () => {
  paginator.value.setPerPage(appropriateSize);
 };
 
+const updateUserConfiguration = async () => {
+ const userConf = store.getters["core:cases/getUserConfiguration"];
+
+ const response = await api.updateUserConfiguration(userConf);
+ return response;
+};
+
+const onStopResize = (column) => {
+ store.commit("core:cases/updateColumnWidth", {
+ column: column.field,
+ width: column.width,
+ });
+ updateUserConfiguration();
+};
+
+const updateColumnWithUserConfiguration = (columnsDefault) => {
+ const casesColumns = store.getters["core:cases/getCasesColumns"];
+
+ columnsDefault.forEach((column) => {
+ if (casesColumns[column.field]) {
+ column.width = casesColumns[column.field].width;
+ }
+ });
+
+ return columnsDefault;
+};
+
 onMounted(() => {
  columnsConfig.value = getColumns(props.listId);
-
+ columnsConfig.value = updateColumnWithUserConfiguration(columnsConfig.value);
  getFilters().then((response) => {
  const filtersSaved = formatFilterSaved(response.data.filters);
  filters.value = filtersSaved;

resources/jscomposition/cases/casesMain/api/index.js

@@ -575,3 +575,15 @@ export const getCaseFilters = async (status = "") => {
 
  return response.data;
 };
+
+export const getUserConfiguration = async () => {
+ const response = await api.get("users/configuration");
+
+ return response.data;
+};
+
+export const updateUserConfiguration = async (data) => {
+ const response = await api.put("users/configuration", data);
+
+ return response.data;
+};

resources/jscomposition/cases/casesMain/main.js

@@ -1,19 +1,33 @@
 import App from "./App.vue";
 import { routes } from "./routes";
+import { cases } from "./store";
+import { getUserConfiguration } from "./api";
 
 Vue.use(VueRouter);
+Vue.globalStore.registerModule("core:cases", cases);
 
 const router = new VueRouter({
  mode: "history",
  base: "/",
  routes,
 });
 
-new Vue({
- el: "#cases-main",
- router,
- components: {
- App,
- },
- render: (h) => h(App),
+const loadUserConfiguration = async () => {
+ const response = await getUserConfiguration();
+
+ Vue.globalStore.commit("core:cases/updateUserConfiguration", {
+ user_id: response.user_id,
+ ui_configuration: JSON.parse(response.ui_configuration),
+ });
+};
+
+loadUserConfiguration().then(() => {
+ new Vue({
+ el: "#cases-main",
+ router,
+ components: {
+ App,
+ },
+ render: (h) => h(App),
+ });
 });

resources/jscomposition/cases/casesMain/store/index.js

@@ -0,0 +1 @@
+export * from "./store";

resources/jscomposition/cases/casesMain/store/store.js

@@ -0,0 +1,39 @@
+// Store module vuex - cases
+export default {};
+
+export const cases = {
+ namespaced: true,
+ state: () => ({
+ userConfiguration: {},
+ }),
+ mutations: {
+ updateUserConfiguration: (state, config) => {
+ state.userConfiguration = config;
+ },
+ updateColumnWidth: (state, { column, width }) => {
+ if (!state.userConfiguration.ui_configuration) {
+ state.userConfiguration.ui_configuration = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases) {
+ state.userConfiguration.ui_configuration.cases = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases.columns) {
+ state.userConfiguration.ui_configuration.cases.columns = {};
+ }
+
+ state.userConfiguration.ui_configuration.cases.columns[column] = {
+ width,
+ };
+ },
+ },
+ getters: {
+ getUserConfiguration(state) {
+ return state.userConfiguration;
+ },
+ getCasesColumns(state) {
+ return state.userConfiguration.ui_configuration?.cases?.columns;
+ },
+ },
+};

resources/jscomposition/cases/casesMain/variables/index.js

@@ -3,3 +3,5 @@ export default {};
 export const api = window.ProcessMaker?.apiClient;
 
 export const user = currentUser;
+
+export const useStore = () => Vue.globalStore;

resources/jscomposition/system/table/FilterableTable.vue

@@ -5,7 +5,8 @@
  :data="data"
  :placeholder="placeholder"
  :config="config"
- class="tw-grow">
+ class="tw-grow"
+ @stopResize="onStopResize">
  <template
  v-for="(column, index) in columns"
  #[`theader-filter-${column.field}`]>
@@ -29,7 +30,7 @@ import { ref } from "vue";
 import { BaseTable } from "../../base";
 import { FilterColumn } from "./filter/defaultFilter/index";
 
-const emit = defineEmits(["changeFilter"]);
+const emit = defineEmits(["changeFilter", "stopResize"]);
 
 const props = defineProps({
  columns: {
@@ -117,6 +118,10 @@ const getHeightTBody = () => baseTable.value.$el.clientHeight - baseTable.value.
 
 const getHeightThead = () => baseTable.value.$refs.thead.clientHeight;
 
+const onStopResize = (column) => {
+ emit("stopResize", column);
+};
+
 defineExpose({
  removeFilter,
  removeAllFilters,

resources/jscomposition/base/table/BaseTable.vue

@@ -15,7 +15,8 @@
  v-for="(column, index) in columns"
  :key="index"
  :columns="columns"
- :column="column">
+ :column="column"
+ @stopResize="onStopResize">
  <slot :name="`theader-${column.field}`" />
  <template #filter>
  <slot :name="`theader-filter-${column.field}`" />
@@ -118,7 +119,7 @@ export default defineComponent({
  default: () => false,
  },
  },
- setup(props) {
+ setup(props, { emit }) {
  const slots = useSlots();
  const configRow = ref([]);
  const showContainer = ref(false);
@@ -141,13 +142,18 @@ export default defineComponent({
 
  const getShowContainer = (index) => configRow.value[index]?.showContainer;
 
+ const onStopResize = (column) => {
+ emit("stopResize", column);
+ };
+
  return {
  configRow,
  showContainer,
  toogleContainer,
  getShowContainer,
  getDefaultConfig,
  slots,
+ onStopResize,
  checkContainerRow,
  checkEllipsisMenu,
  tbody,

resources/jscomposition/base/table/THeader.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { isFunction } from "lodash";
-import { defineComponent, computed, ref } from "vue";
+import { defineComponent, computed } from "vue";
 import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
@@ -38,7 +38,12 @@ export default defineComponent({
  },
  },
  setup(props, { emit }) {
- const columnResize = columnResizeComposable(props.column);
+ const columnResize = columnResizeComposable({
+ column: props.column,
+ stopResize: () => {
+ emit("stopResize", props.column);
+ },
+ });
 
  const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
 

resources/jscomposition/base/table/composables/columnComposable.js

@@ -7,7 +7,7 @@ export default {};
  * @param {*} tableName
  * @returns
  */
-export const columnResizeComposable = (column) => {
+export const columnResizeComposable = ({ column, stopResize }) => {
  const startX = ref(0);
  const startWidth = ref(0);
  const isResizing = ref(false);
@@ -24,11 +24,12 @@ export const columnResizeComposable = (column) => {
  }
  };
 
- const stopResize = () => {
+ const stopResizeHandler = () => {
  if (isResizing.value) {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  isResizing.value = false;
+ stopResize?.();
  }
  };
 
@@ -39,15 +40,16 @@ export const columnResizeComposable = (column) => {
  startWidth.value = column.width || minWidth;
 
  document.addEventListener("mousemove", doResize);
- document.addEventListener("mouseup", stopResize);
+ document.addEventListener("mouseup", stopResizeHandler);
  };
 
  onUnmounted(() => {
  document.removeEventListener("mousemove", doResize);
- document.removeEventListener("mouseup", stopResize);
+ document.removeEventListener("mouseup", stopResizeHandler);
  });
 
  return {
  startResize,
+ stopResizeHandler,
  };
 };

resources/jscomposition/cases/casesMain/App.vue

@@ -1,18 +1,8 @@
 <template>
  <div class="tw-flex tw-h-[90vh] ">
- <RouterView></RouterView>
+ <RouterView />
  </div>
 </template>
-<script>
-import { defineComponent } from "vue";
+<script setup>
 import { RouterView } from "vue-router";
-
-export default defineComponent({
- components: {
- RouterView,
- },
- setup() {
- return {};
- },
-});
 </script>

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -26,6 +26,7 @@
  class="tw-text-[#4F5154]"
  :placeholder="showPlaceholder"
  @changeFilter="onChangeFilter"
+ @stopResize="onStopResize"
  @resetFilters="onChangeFilter">
  <template #placeholder>
  <TablePlaceholder
@@ -53,10 +54,10 @@ import { useRouter, useRoute } from "vue-router/composables";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
-import { getColumns } from "./config/columns";
+import columns, { getColumns } from "./config/columns";
 import { FilterableTable, TablePlaceholder } from "../../system";
 import * as api from "./api";
-import { user } from "./variables";
+import { user, useStore } from "./variables";
 import {
  formatFilters, formatFilterBadges, formattedFilter, formatFilterSaved,
 } from "./utils";
@@ -79,6 +80,7 @@ const showPlaceholder = ref(false);
 const placeholderType = ref("loading");
 const route = useRoute();
 const defaultSort = ref("case_number:desc");
+const store = useStore();
 
 const dataPagination = ref({
  total: 0,
@@ -204,9 +206,36 @@ const autoPagination = () => {
  paginator.value.setPerPage(appropriateSize);
 };
 
+const updateUserConfiguration = async () => {
+ const userConf = store.getters["core:cases/getUserConfiguration"];
+
+ const response = await api.updateUserConfiguration(userConf);
+ return response;
+};
+
+const onStopResize = (column) => {
+ store.commit("core:cases/updateColumnWidth", {
+ column: column.field,
+ width: column.width,
+ });
+ updateUserConfiguration();
+};
+
+const updateColumnWithUserConfiguration = (columnsDefault) => {
+ const casesColumns = store.getters["core:cases/getCasesColumns"];
+
+ columnsDefault.forEach((column) => {
+ if (casesColumns[column.field]) {
+ column.width = casesColumns[column.field].width;
+ }
+ });
+
+ return columnsDefault;
+};
+
 onMounted(() => {
  columnsConfig.value = getColumns(props.listId);
-
+ columnsConfig.value = updateColumnWithUserConfiguration(columnsConfig.value);
  getFilters().then((response) => {
  const filtersSaved = formatFilterSaved(response.data.filters);
  filters.value = filtersSaved;

resources/jscomposition/cases/casesMain/api/index.js

@@ -575,3 +575,15 @@ export const getCaseFilters = async (status = "") => {
 
  return response.data;
 };
+
+export const getUserConfiguration = async () => {
+ const response = await api.get("users/configuration");
+
+ return response.data;
+};
+
+export const updateUserConfiguration = async (data) => {
+ const response = await api.put("users/configuration", data);
+
+ return response.data;
+};

resources/jscomposition/cases/casesMain/main.js

@@ -1,19 +1,33 @@
 import App from "./App.vue";
 import { routes } from "./routes";
+import { cases } from "./store";
+import { getUserConfiguration } from "./api";
 
 Vue.use(VueRouter);
+Vue.globalStore.registerModule("core:cases", cases);
 
 const router = new VueRouter({
  mode: "history",
  base: "/",
  routes,
 });
 
-new Vue({
- el: "#cases-main",
- router,
- components: {
- App,
- },
- render: (h) => h(App),
+const loadUserConfiguration = async () => {
+ const response = await getUserConfiguration();
+
+ Vue.globalStore.commit("core:cases/updateUserConfiguration", {
+ user_id: response.user_id,
+ ui_configuration: JSON.parse(response.ui_configuration),
+ });
+};
+
+loadUserConfiguration().then(() => {
+ new Vue({
+ el: "#cases-main",
+ router,
+ components: {
+ App,
+ },
+ render: (h) => h(App),
+ });
 });

resources/jscomposition/cases/casesMain/store/index.js

@@ -0,0 +1 @@
+export * from "./store";

resources/jscomposition/cases/casesMain/store/store.js

@@ -0,0 +1,39 @@
+// Store module vuex - cases
+export default {};
+
+export const cases = {
+ namespaced: true,
+ state: () => ({
+ userConfiguration: {},
+ }),
+ mutations: {
+ updateUserConfiguration: (state, config) => {
+ state.userConfiguration = config;
+ },
+ updateColumnWidth: (state, { column, width }) => {
+ if (!state.userConfiguration.ui_configuration) {
+ state.userConfiguration.ui_configuration = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases) {
+ state.userConfiguration.ui_configuration.cases = {};
+ }
+
+ if (!state.userConfiguration.ui_configuration.cases.columns) {
+ state.userConfiguration.ui_configuration.cases.columns = {};
+ }
+
+ state.userConfiguration.ui_configuration.cases.columns[column] = {
+ width,
+ };
+ },
+ },
+ getters: {
+ getUserConfiguration(state) {
+ return state.userConfiguration;
+ },
+ getCasesColumns(state) {
+ return state.userConfiguration.ui_configuration?.cases?.columns;
+ },
+ },
+};

resources/jscomposition/cases/casesMain/variables/index.js

@@ -3,3 +3,5 @@ export default {};
 export const api = window.ProcessMaker?.apiClient;
 
 export const user = currentUser;
+
+export const useStore = () => Vue.globalStore;

resources/jscomposition/system/table/FilterableTable.vue

@@ -5,7 +5,8 @@
  :data="data"
  :placeholder="placeholder"
  :config="config"
- class="tw-grow">
+ class="tw-grow"
+ @stopResize="onStopResize">
  <template
  v-for="(column, index) in columns"
  #[`theader-filter-${column.field}`]>
@@ -29,7 +30,7 @@ import { ref } from "vue";
 import { BaseTable } from "../../base";
 import { FilterColumn } from "./filter/defaultFilter/index";
 
-const emit = defineEmits(["changeFilter"]);
+const emit = defineEmits(["changeFilter", "stopResize"]);
 
 const props = defineProps({
  columns: {
@@ -117,6 +118,10 @@ const getHeightTBody = () => baseTable.value.$el.clientHeight - baseTable.value.
 
 const getHeightThead = () => baseTable.value.$refs.thead.clientHeight;
 
+const onStopResize = (column) => {
+ emit("stopResize", column);
+};
+
 defineExpose({
  removeFilter,
  removeAllFilters,