Merge branch 'main' into feat/APPLAUNCHER-28__global_card_cluster_name

krumIO · Apr 15, 2024 · 4882b61 · 4882b61
2 parents 1b5dc20 + 9e28462
commit 4882b61
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 4 deletions.
diff --git a/pkg/app-launcher/components/ClusterActions.vue b/pkg/app-launcher/components/ClusterActions.vue
@@ -10,6 +10,10 @@ export default {
             type: Boolean,
             required: true,
         },
+        sortOrder: {
+            type: String,
+            required: true,
+        },
         selectedCluster: {
             type: String,
             required: true,
@@ -19,6 +23,12 @@ export default {
             required: true,
         },
     },
+    computed: {
+        aToZorZtoA() {
+            console.log(this.$store.getters['i18n/t']('appLauncher.aToZ'));
+            return this.sortOrder === 'asc' ? this.$store.getters['i18n/t']('appLauncher.aToZ') : this.$store.getters['i18n/t']('appLauncher.zToA');
+        },
+    },
     emits: ['update:search-query', 'toggle-sort', 'update:selected-cluster', 'set-view'],
 };
 </script>
@@ -28,9 +38,17 @@ export default {
         <div class="search-input">
             <input :value="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" @input="$emit('update:search-query', $event.target.value)" />
         </div>
-        <button class="icon-button" @click="$emit('toggle-sort')" v-if="isGridView">
-            <i class="icon icon-sort" />
-        </button>
+        <div class="sort-buttons" v-if="isGridView" @click="$emit('toggle-sort')">
+            <div class="sort-button" :class="{ active: sortOrder === 'asc' }" :disabled="sortOrder === 'asc'">
+                <i class="icon-chevron-up"></i>
+            </div>
+            <div class="sort-label">
+                <p>{{ aToZorZtoA }}</p>
+            </div>
+            <div class="sort-button" :class="{ active: sortOrder === 'desc' }" :disabled="sortOrder === 'desc'">
+                <i class="icon-chevron-down"></i>
+            </div>
+        </div>
         <div class="select-wrapper">
             <select :value="selectedCluster" class="cluster-select" @change="$emit('update:selected-cluster', $event.target.value)">
                 <option v-for="option in clusterOptions" :key="option.value" :value="option.value">
@@ -72,10 +90,37 @@ export default {
     font-size: 1.8rem;
 }
 
-.icon-button:hover {
+.sort-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: none;
+    color: #555555;
+    font-size: 1.3rem;
+    display: flex;
+    align-items: center;
+}
+
+.sort-label {
+    color: var(--primary);
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+.sort-buttons {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.sort-button:hover {
     color: var(--primary-hover);
 }
 
+.sort-button.active {
+    color: var(--primary);
+}
+
 .search-input {
     text-align: right;
     justify-content: flex-end;

diff --git a/pkg/app-launcher/l10n/en-us.yaml b/pkg/app-launcher/l10n/en-us.yaml
@@ -12,3 +12,5 @@ appLauncher:
   selectCluster: Select a cluster
   globalApps: Global Apps
   filter: Filter
+  aToZ: A-Z
+  zToA: Z-A
diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
@@ -210,6 +210,9 @@ export default {
     },
   },
   computed: {
+    aToZorZtoA() {
+      return this.tableHeaders[0].sortOrder === 'asc' ? 'A-Z' : 'Z-A';
+    },
     displayedClusterData() {
       if (this.selectedCluster === 'ALL_CLUSTERS') {
         const allClustersData = this.servicesByCluster.map(cluster => ({
@@ -279,6 +282,7 @@ export default {
       :is-grid-view="selectedView === 'grid'"
       :selected-cluster="selectedCluster"
       :cluster-options="clusterOptions"
+      :sort-order="tableHeaders[0].sortOrder"
       @update:search-query="updateSearchQuery"
       @toggle-sort="toggleSortOrder"
       @update:selected-cluster="selectedCluster = $event"
@@ -350,4 +354,12 @@ export default {
   top: 0;
   z-index: 1;
 }
+
+.favorite-icon {
+  margin-right: 1rem;
+}
+
+.icon-button:hover {
+  color: var(--primary-hover);
+}
 </style>