add asc desc ordering

Stevie-Ray · Jun 20, 2024 · 73a4f88 · 73a4f88
1 parent 0ae30f5
commit 73a4f88
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/src/components/molecules/dialog/WorkoutCommunityFilter/WorkoutCommunityFilter.vue b/src/components/molecules/dialog/WorkoutCommunityFilter/WorkoutCommunityFilter.vue
@@ -4,7 +4,8 @@ import { storeToRefs } from 'pinia'
 import { useWorkoutsStore } from '@/stores/workouts'
 import { useI18n } from 'vue-i18n'
 
-const { workoutsCommunityFilter, workoutsCommunity } = storeToRefs(useWorkoutsStore())
+const { workoutsCommunity, workoutsCommunityFilter, workoutsCommunityFilterDirection } =
+  storeToRefs(useWorkoutsStore())
 
 const { fetchCommunityWorkouts } = useWorkoutsStore()
 
@@ -20,6 +21,13 @@ const items: { filter: string; value: string }[] = [
   { filter: 'Level', value: 'level' }
 ]
 
+const toggleDirection = () => {
+  workoutsCommunityFilterDirection.value =
+    workoutsCommunityFilterDirection.value === 'asc' ? 'desc' : 'asc'
+  workoutsCommunity.value = []
+  fetchCommunityWorkouts()
+}
+
 watch(
   workoutsCommunityFilter,
   async (newFilter, oldFilter) => {
@@ -30,8 +38,6 @@ watch(
   },
   { deep: true }
 )
-
-// const sortOrder = ref('desc')
 </script>
 
 <template>
@@ -51,7 +57,7 @@ watch(
       <v-container>
         <v-row>
           <v-col cols="12">
-            <div class="d-flex flex-column">
+            <div class="d-flex align-center justify-center">
               <v-select
                 v-model="workoutsCommunityFilter"
                 :items="items"
@@ -60,8 +66,14 @@ watch(
                 item-value="value"
                 single-line
                 return-object
-              >
-              </v-select>
+                class="mr-2"
+              />
+              <v-btn
+                variant="text"
+                class="mb-4"
+                @click="toggleDirection"
+                :icon="workoutsCommunityFilterDirection === 'asc' ? '$arrowUp' : '$arrowDown'"
+              />
             </div>
           </v-col>
         </v-row>

diff --git a/src/plugins/vuetify/index.ts b/src/plugins/vuetify/index.ts
@@ -13,7 +13,9 @@ import {
   mdiAccountMultiple,
   mdiAccountVoice,
   mdiApple,
+  mdiArrowDown,
   mdiArrowLeft,
+  mdiArrowUp,
   mdiBellOutline,
   mdiBluetooth,
   mdiBluetoothOff,
@@ -108,7 +110,9 @@ export default createVuetify({
       accountMultiple: mdiAccountMultiple,
       accountVoice: mdiAccountVoice,
       apple: mdiApple,
+      arrowDown: mdiArrowDown,
       arrowLeft: mdiArrowLeft,
+      arrowUp: mdiArrowUp,
       bellOutline: mdiBellOutline,
       bluetooth: mdiBluetooth,
       bluetoothOff: mdiBluetoothOff,

diff --git a/src/stores/workouts.ts b/src/stores/workouts.ts
@@ -16,6 +16,7 @@ export const useWorkoutsStore = defineStore('workouts', () => {
     filter: 'Last Modified',
     value: 'updateTimestamp'
   })
+  const workoutsCommunityFilterDirection = ref<'desc' | 'asc'>('desc')
   const leaderboards = ref<Leaderboard[]>([])
 
   // Actions
@@ -59,7 +60,7 @@ export const useWorkoutsStore = defineStore('workouts', () => {
     const newWorkouts = await usersWorkoutsDb.readAll(
       constraints,
       workoutsCommunityFilter.value.value,
-      'desc',
+      workoutsCommunityFilterDirection.value,
       20,
       // @ts-expect-error DocumentSnapshot
       lastVisible
@@ -215,6 +216,7 @@ export const useWorkoutsStore = defineStore('workouts', () => {
     workouts,
     workoutsCommunity,
     workoutsCommunityFilter,
+    workoutsCommunityFilterDirection,
     leaderboards,
     fetchUserWorkouts,
     fetchCommunityWorkouts,