From 2769b03cc8729e1323c96c85ff6eebb618fa5b04 Mon Sep 17 00:00:00 2001
From: Jeffrey Otano <otano.jeffrey@gmail.com>
Date: Thu, 2 May 2024 15:11:52 -0600
Subject: [PATCH] feat: Add ability to sort canned responses (#9330)

Co-authored-by: jeffOtano <jeff@rinsed.com>
---
 .../dashboard/settings/canned/Index.vue       | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index dd070097a..379d4af6f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -32,9 +32,25 @@
             <th
               v-for="thHeader in $t('CANNED_MGMT.LIST.TABLE_HEADER')"
               :key="thHeader"
-              class="last:text-right"
+              class="last:text-right first:m-0 first:p-0"
             >
-              {{ thHeader }}
+              <p v-if="thHeader !== $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')">
+                {{ thHeader }}
+              </p>
+
+              <button
+                v-if="thHeader === $t('CANNED_MGMT.LIST.TABLE_HEADER[0]')"
+                class="cursor-pointer flex items-center p-0"
+                @click="toggleSort"
+              >
+                <p class="uppercase">
+                  {{ thHeader }}
+                </p>
+                <fluent-icon
+                  class="mb-2 ml-2"
+                  :icon="sortOrder === 'asc' ? 'chevron-up' : 'chevron-down'"
+                />
+              </button>
             </th>
           </thead>
           <tbody>
@@ -132,6 +148,7 @@ export default {
       cannedResponseAPI: {
         message: '',
       },
+      sortOrder: 'asc',
     };
   },
   computed: {
@@ -156,9 +173,20 @@ export default {
   },
   mounted() {
     // Fetch API Call
-    this.$store.dispatch('getCannedResponse');
+    this.$store.dispatch('getCannedResponse').then(() => {
+      this.toggleSort();
+    });
   },
   methods: {
+    toggleSort() {
+      this.records.sort((a, b) => {
+        if (this.sortOrder === 'asc') {
+          return a.short_code.localeCompare(b.short_code);
+        }
+        return b.short_code.localeCompare(a.short_code);
+      });
+      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
+    },
     showAlert(message) {
       // Reset loading, current selected agent
       this.loading[this.selectedResponse.id] = false;