fix: remember sort order for competitors page

frontend/components/Table/Competitors.vue

@@ -4,6 +4,9 @@ import type { PropType } from 'vue'
 import type { Filters } from '~/utils/filter'
 import type { CompetitorWithAgeGender } from '~~/utils/ageClass'
 
+const route = useRoute()
+const router = useRouter()
+
 const props = defineProps({
  competitors: {
  type: Array as PropType<CompetitorWithAgeGender[]>,
@@ -13,8 +16,10 @@ const props = defineProps({
 })
 
 type Column = keyof CompetitorWithAgeGender
-const ascending = ref(false)
-const activeColumn = ref<Column>('id')
+const ascending = ref(route.query.ascending === 'true')
+const activeColumn = ref<Column>(
+ (queryToString(route.query.sort_by) as Column) || 'id',
+)
 
 const sortedResults = computed(() =>
  props.competitors
@@ -33,6 +38,16 @@ const ariaSorted = computed(
  [activeColumn.value]: ascending.value ? 'descending' : 'ascending',
  }),
 )
+
+watch([activeColumn, ascending], () => {
+ router.replace({
+ query: {
+ ...route.query,
+ sort_by: activeColumn.value,
+ ascending: ascending.value ? 'true' : 'false',
+ },
+ })
+})
 </script>
 <template>
  <table v-if="sortedResults.length > 0" class="w-full">