From 36894886403e5f43754ea2c6679e8430033d78e1 Mon Sep 17 00:00:00 2001
From: Hannah Brownson <hannahbrownson18@gmail.com>
Date: Mon, 15 Apr 2024 13:12:52 -0400
Subject: [PATCH 1/2] updating toggle icon changed single sort icon to two
 separate icons (chevron-up and chevron-down) updated toggleSortOrder to
 either asc or desc based on button selection added sortButtons to computed
 properties to calculate state of the sort buttons updated styling in order to
 change color of the selected sort state

---
 pkg/app-launcher/pages/index.vue | 62 +++++++++++++++++++++++++++++---
 1 file changed, 57 insertions(+), 5 deletions(-)

diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index 7d16d6f..76d4c84 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -26,6 +26,8 @@ export default {
       selectedView: 'grid',
       favoritedServices: [],
       searchQuery: '',
+      sortOrder: 'asc',
+      sortButtons: 'asc' ? { asc: true, desc: false } : { asc: false, desc: true },
       tableHeaders: [
         {
           name: 'name',
@@ -170,8 +172,17 @@ export default {
         value: cluster.id,
       }))];
     },
-    toggleSortOrder() {
-      this.tableHeaders[0].sortOrder = this.tableHeaders[0].sortOrder === 'asc' ? 'desc' : 'asc';
+    toggleSortOrder(sortOrder) {
+      const column = this.tableHeaders[0];
+      if (column.sortOrder === sortOrder && sortOrder === 'asc') {
+        return; // If already sorted in ascending order, do nothing
+      }
+      column.sortOrder = sortOrder;
+      if (sortOrder === 'asc') {
+        this.sortButtons = { asc: true, desc: false };
+      } else {
+        this.sortButtons = { asc: false, desc: true };
+      }
     },
     getEndpoints(service) {
       return (
@@ -259,6 +270,9 @@ export default {
         return [this.selectedClusterData]; // This just remakes use of selectedClusterData for single cluster view
       }
     },
+    sortButtons() {
+      return this.tableHeaders[0].sortOrder === 'asc' ? { asc: true, desc: false } : { asc: false, desc: true }
+    },
     sortedApps() {
       if (this.selectedClusterData) {
         const services = this.selectedClusterData.services.map((service) => ({
@@ -337,9 +351,17 @@ export default {
       <div class="search-input">
         <input v-model="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" />
       </div>
-      <button class="icon-button" @click="toggleSortOrder" v-if="selectedView === 'grid'">
-        <i class="icon icon-sort" />
-      </button>
+      <div class="sort-buttons" v-if="selectedView === 'grid'">
+        <div class="sort-button" :class="{ active: sortButtons.asc }" :disabled="!sortButtons.asc" @click="toggleSortOrder('asc')">
+          <i class="icon-chevron-up"></i>
+        </div>
+        <div class="sort-label">
+          <p>A-Z</p>
+        </div>
+        <div class="sort-button" :class="{ active: sortButtons.desc }" :disabled="!sortButtons.desc" @click="toggleSortOrder('desc')">
+          <i class="icon-chevron-down"></i>
+        </div>
+      </div>
       <div class="select-wrapper">
         <select v-model="selectedCluster" class="cluster-select">
           <option v-for="option in clusterOptions" :key="option.value" :value="option.value">
@@ -486,6 +508,36 @@ export default {
   font-size: 1.8rem;
 }
 
+.sort-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: none;
+  color: var(--primary);
+  font-size: 1.3rem;
+  display: flex;
+  align-items: center;
+}
+
+.sort-label {
+  color: var(--primary);
+  font-size: 1rem;
+}
+
+.sort-buttons {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.sort-button:hover {
+  color: var(--primary-hover);
+}
+
+.sort-button.active {
+  color:#555555;
+}
+
 .favorite-icon {
   margin-right: 1rem;
 }

From b69c54884c6eca22ba40b07358cf1c24c5fda101 Mon Sep 17 00:00:00 2001
From: Hannah Brownson <hannahbrownson18@gmail.com>
Date: Mon, 15 Apr 2024 15:31:04 -0400
Subject: [PATCH 2/2] Revising code based on feedback - Simplified
 `toggleSortOrder` - A-Z or Z-A implemented based on toggle status

---
 pkg/app-launcher/pages/index.vue | 34 +++++++++++---------------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index 76d4c84..63b71f1 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -26,8 +26,6 @@ export default {
       selectedView: 'grid',
       favoritedServices: [],
       searchQuery: '',
-      sortOrder: 'asc',
-      sortButtons: 'asc' ? { asc: true, desc: false } : { asc: false, desc: true },
       tableHeaders: [
         {
           name: 'name',
@@ -172,17 +170,8 @@ export default {
         value: cluster.id,
       }))];
     },
-    toggleSortOrder(sortOrder) {
-      const column = this.tableHeaders[0];
-      if (column.sortOrder === sortOrder && sortOrder === 'asc') {
-        return; // If already sorted in ascending order, do nothing
-      }
-      column.sortOrder = sortOrder;
-      if (sortOrder === 'asc') {
-        this.sortButtons = { asc: true, desc: false };
-      } else {
-        this.sortButtons = { asc: false, desc: true };
-      }
+    toggleSortOrder() {
+      this.tableHeaders[0].sortOrder = this.tableHeaders[0].sortOrder === 'asc' ? 'desc' : 'asc';
     },
     getEndpoints(service) {
       return (
@@ -227,6 +216,9 @@ export default {
     },
   },
   computed: {
+    aToZorZtoA() {
+      return this.tableHeaders[0].sortOrder === 'asc' ? 'A-Z' : 'Z-A';
+    },
     selectedClusterData() {
       const cluster = this.getCluster(this.selectedCluster);
       if (cluster) {
@@ -270,9 +262,6 @@ export default {
         return [this.selectedClusterData]; // This just remakes use of selectedClusterData for single cluster view
       }
     },
-    sortButtons() {
-      return this.tableHeaders[0].sortOrder === 'asc' ? { asc: true, desc: false } : { asc: false, desc: true }
-    },
     sortedApps() {
       if (this.selectedClusterData) {
         const services = this.selectedClusterData.services.map((service) => ({
@@ -351,14 +340,14 @@ export default {
       <div class="search-input">
         <input v-model="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" />
       </div>
-      <div class="sort-buttons" v-if="selectedView === 'grid'">
-        <div class="sort-button" :class="{ active: sortButtons.asc }" :disabled="!sortButtons.asc" @click="toggleSortOrder('asc')">
+      <div class="sort-buttons" v-if="selectedView === 'grid'" @click="toggleSortOrder()">
+        <div class="sort-button" :class="{ active: this.tableHeaders[0].sortOrder === 'asc' }" :disabled="this.tableHeaders[0].sortOrder === 'asc'">
           <i class="icon-chevron-up"></i>
         </div>
         <div class="sort-label">
-          <p>A-Z</p>
+          <p>{{ aToZorZtoA }}</p>
         </div>
-        <div class="sort-button" :class="{ active: sortButtons.desc }" :disabled="!sortButtons.desc" @click="toggleSortOrder('desc')">
+        <div class="sort-button" :class="{ active: this.tableHeaders[0].sortOrder === 'desc' }" :disabled="this.tableHeaders[0].sortOrder === 'desc'">
           <i class="icon-chevron-down"></i>
         </div>
       </div>
@@ -513,7 +502,7 @@ export default {
   border: none;
   cursor: pointer;
   padding: none;
-  color: var(--primary);
+  color:#555555;
   font-size: 1.3rem;
   display: flex;
   align-items: center;
@@ -522,6 +511,7 @@ export default {
 .sort-label {
   color: var(--primary);
   font-size: 1rem;
+  cursor: pointer;
 }
 
 .sort-buttons {
@@ -535,7 +525,7 @@ export default {
 }
 
 .sort-button.active {
-  color:#555555;
+  color: var(--primary);
 }
 
 .favorite-icon {