From 38d6ee6dd2e641b957a458db30e47251ae1ea6a2 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 21 Nov 2025 06:21:27 +0530
Subject: [PATCH] chore: Save company list sorting preferences in UI settings
 (#12916)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request Template

## Description

This PR saves the company list sorting preferences (field and order) in
the user’s UI settings. The sort state is initialized from the stored
preferences when the component mounts, defaulting to `-created_at` if
none exist.

Fixes
https://linear.app/chatwoot/issue/CW-5992/save-sort-filter-to-ui-settings

## Type of change
- [x] New feature (non-breaking change which adds functionality)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../companies/pages/CompaniesIndex.vue        | 52 +++++++++++++------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue b/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
index 3e86c97f4..d1e548a00 100644
--- a/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
@@ -1,14 +1,16 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, reactive } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import { debounce } from '@chatwoot/utils';
 
 import CompaniesListLayout from 'dashboard/components-next/Companies/CompaniesListLayout.vue';
 import CompaniesCard from 'dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue';
 
+const DEFAULT_SORT_FIELD = 'created_at';
 const DEBOUNCE_DELAY = 300;
 
 const store = useStore();
@@ -16,19 +18,33 @@ const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 
+const { updateUISettings, uiSettings } = useUISettings();
+
 const searchQuery = computed(() => route.query?.search || '');
 const searchValue = ref(searchQuery.value);
 const pageNumber = computed(() => Number(route.query?.page) || 1);
 
-const activeSort = computed(() => {
-  const sortParam = route.query?.sort || 'name';
-  return sortParam.startsWith('-') ? sortParam.slice(1) : sortParam;
+const parseSortSettings = (sortString = '') => {
+  const hasDescending = sortString.startsWith('-');
+  const sortField = hasDescending ? sortString.slice(1) : sortString;
+  return {
+    sort: sortField || DEFAULT_SORT_FIELD,
+    order: hasDescending ? '-' : '',
+  };
+};
+
+const { companies_sort_by: companySortBy = `-${DEFAULT_SORT_FIELD}` } =
+  uiSettings.value ?? {};
+const { sort: initialSort, order: initialOrder } =
+  parseSortSettings(companySortBy);
+
+const sortState = reactive({
+  activeSort: initialSort,
+  activeOrdering: initialOrder,
 });
 
-const activeOrdering = computed(() => {
-  const sortParam = route.query?.sort || 'name';
-  return sortParam.startsWith('-') ? '-' : '';
-});
+const activeSort = computed(() => sortState.activeSort);
+const activeOrdering = computed(() => sortState.activeOrdering);
 
 const companies = useMapGetter('companies/getCompaniesList');
 const meta = useMapGetter('companies/getMeta');
@@ -36,11 +52,10 @@ const uiFlags = useMapGetter('companies/getUIFlags');
 
 const isFetchingList = computed(() => uiFlags.value.fetchingList);
 
-const sortParam = computed(() => {
-  return activeOrdering.value === '-'
-    ? `-${activeSort.value}`
-    : activeSort.value;
-});
+const buildSortAttr = () =>
+  `${sortState.activeOrdering}${sortState.activeSort}`;
+
+const sortParam = computed(() => buildSortAttr());
 
 const updateURLParams = (page, search = '', sort = '') => {
   const query = {
@@ -96,9 +111,14 @@ const onPageChange = page => {
   fetchCompanies(page, searchValue.value, sortParam.value);
 };
 
-const handleSort = ({ sort, order }) => {
-  const newSortParam = order === '-' ? `-${sort}` : sort;
-  fetchCompanies(1, searchValue.value, newSortParam);
+const handleSort = async ({ sort, order }) => {
+  Object.assign(sortState, { activeSort: sort, activeOrdering: order });
+
+  await updateUISettings({
+    companies_sort_by: buildSortAttr(),
+  });
+
+  fetchCompanies(1, searchValue.value, buildSortAttr());
 };
 
 onMounted(() => {