Merge branch 'develop' into feat/PR-1352

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue

@@ -32,18 +32,13 @@ export default {
       type: Boolean,
       default: false,
     },
-    sortParam: {
-      type: String,
-      default: 'last_activity_at',
-    },
-    sortOrder: {
-      type: String,
-      default: 'desc',
+    activeSortConfig: {
+      type: Object,
+      default: () => ({ last_activity_at: 'desc' }),
     },
   },
   data() {
     return {
-      sortConfig: {},
       sortOption: {
         sortAlways: true,
         sortChange: params => this.$emit('onSortChange', params),
@@ -88,7 +83,7 @@ export default {
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
           fixed: 'left',
           align: this.isRTL ? 'right' : 'left',
-          sortBy: this.sortConfig.name || '',
+          sortBy: this.activeSortConfig.name || '',
           width: 300,
           renderBodyCell: ({ row }) => (
             <woot-button
@@ -124,7 +119,7 @@ export default {
           key: 'email',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
           align: this.isRTL ? 'right' : 'left',
-          sortBy: this.sortConfig.email || '',
+          sortBy: this.activeSortConfig.email || '',
           width: 240,
           renderBodyCell: ({ row }) => {
             if (row.email)
@@ -145,21 +140,21 @@ export default {
         {
           field: 'phone_number',
           key: 'phone_number',
-          sortBy: this.sortConfig.phone_number || '',
+          sortBy: this.activeSortConfig.phone_number || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
           align: this.isRTL ? 'right' : 'left',
         },
         {
           field: 'company',
           key: 'company',
-          sortBy: this.sortConfig.company_name || '',
+          sortBy: this.activeSortConfig.company || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
           align: this.isRTL ? 'right' : 'left',
         },
         {
           field: 'city',
           key: 'city',
-          sortBy: this.sortConfig.city || '',
+          sortBy: this.activeSortConfig.city || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
           align: this.isRTL ? 'right' : 'left',
         },
@@ -168,7 +163,7 @@ export default {
           key: 'country',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
           align: this.isRTL ? 'right' : 'left',
-          sortBy: this.sortConfig.country || '',
+          sortBy: this.activeSortConfig.country || '',
           renderBodyCell: ({ row }) => {
             if (row.country) {
               return (
@@ -213,36 +208,20 @@ export default {
         {
           field: 'last_activity_at',
           key: 'last_activity_at',
-          sortBy: this.sortConfig.last_activity_at || '',
+          sortBy: this.activeSortConfig.last_activity_at || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
           align: this.isRTL ? 'right' : 'left',
         },
         {
           field: 'created_at',
           key: 'created_at',
-          sortBy: this.sortConfig.created_at || '',
+          sortBy: this.activeSortConfig.created_at || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
           align: this.isRTL ? 'right' : 'left',
         },
       ];
     },
   },
-  watch: {
-    sortOrder() {
-      this.setSortConfig();
-    },
-    sortParam() {
-      this.setSortConfig();
-    },
-  },
-  mounted() {
-    this.setSortConfig();
-  },
-  methods: {
-    setSortConfig() {
-      this.sortConfig = { [this.sortParam]: this.sortOrder };
-    },
-  },
 };
 </script>
 

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue

@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 import ContactsHeader from './Header.vue';
 import ContactsTable from './ContactsTable.vue';
@@ -39,6 +40,10 @@ export default {
       default: 0,
     },
   },
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+    return { uiSettings, updateUISettings };
+  },
   data() {
     return {
       searchQuery: '',
@@ -148,6 +153,9 @@ export default {
     },
   },
   mounted() {
+    if (this.uiSettings?.contacts_sort_config) {
+      this.sortConfig = this.uiSettings.contacts_sort_config;
+    }
     this.fetchContacts(this.pageParameter);
   },
   methods: {
@@ -155,19 +163,21 @@ export default {
       window.history.pushState({}, null, `${this.$route.path}?page=${page}`);
     },
     getSortAttribute() {
-      let sortAttr = Object.keys(this.sortConfig).reduce((acc, sortKey) => {
-        const sortOrder = this.sortConfig[sortKey];
-        if (sortOrder) {
-          const sortOrderSign = sortOrder === 'asc' ? '' : '-';
-          return `${sortOrderSign}${sortKey}`;
-        }
-        return acc;
-      }, '');
-      if (!sortAttr) {
-        this.sortConfig = { last_activity_at: 'desc' };
-        sortAttr = '-last_activity_at';
+      // Use UI settings if available, otherwise use the current sortConfig
+      const sortConfig =
+        this.uiSettings.contacts_sort_config || this.sortConfig;
+
+      const [sortKey, sortOrder] =
+        Object.entries(sortConfig).find(([, order]) => order) || [];
+
+      if (sortKey && sortOrder) {
+        const sortOrderSign = sortOrder === 'asc' ? '' : '-';
+        return `${sortOrderSign}${sortKey}`;
       }
-      return sortAttr;
+
+      // If no sort attribute is found, use the default
+      this.sortConfig = { last_activity_at: 'desc' };
+      return '-last_activity_at';
     },
     fetchContacts(page) {
       if (this.isContactAndLabelDashboard) {
@@ -267,6 +277,9 @@ export default {
     },
     onSortChange(params) {
       this.sortConfig = params;
+      this.updateUISettings({
+        contacts_sort_config: params,
+      });
       this.fetchContacts(this.meta.currentPage);
 
       const sortBy =
@@ -412,6 +425,7 @@ export default {
         :is-loading="uiFlags.isFetching"
         :on-click-contact="openContactInfoPanel"
         :active-contact-id="selectedContactId"
+        :active-sort-config="sortConfig"
         @onSortChange="onSortChange"
       />
       <TableFooter