Show only available sort fields

Author: JanisV

frontend/src/components/CoinListView.vue

@@ -22,6 +22,7 @@ const selectedSeries = ref(null)
 const selectedType = ref(null)
 const selectedPeriod = ref(null)
 const selectedMint = ref(null)
+const fields = ref([])
 
 const props = defineProps({
   settings: {
@@ -52,6 +53,18 @@ const onOpenFile = async () => {
   coinsList.value = []
   coinsList.value = await service.loadCoins()
   images.value = new Array(coinsList.value.length).fill('')
+
+  fields.value = ['title', 'year']
+  if (props.filters['status'].length > 1)
+    fields.value.push('status')
+  if (props.filters['country'].length > 1)
+    fields.value.push('country')
+  if (props.filters['series'].length > 1)
+    fields.value.push('series')
+  if (props.filters['type'].length > 1)
+    fields.value.push('type')
+  if (props.filters['period'].length > 1)
+    fields.value.push('period')
 }
 
 defineExpose({
@@ -110,7 +123,7 @@ const loadImage = async (index, coinId) => {
 
 <template>
   <v-container>
-    <SortItem :filters="filters['country']" :settings="settings" @sort-by-changed="onSortByChanged" v-model="sortedBy" v-model:reverse="reverseSort" />
+    <SortItem :fields="fields" :settings="settings" @sort-by-changed="onSortByChanged" v-model="sortedBy" v-model:reverse="reverseSort" />
   </v-container>
 
   <v-container>

frontend/src/components/SortItem.vue

@@ -1,9 +1,7 @@
 <script setup>
 import i18n from "@/i18n/index.js";
 
-const items = ['title', 'status', 'country', 'series', 'type', 'period']
-
-const props = defineProps(['filters', 'settings'])
+const props = defineProps(['fields', 'settings'])
 const emit = defineEmits(['sortByChanged'])
 const sortedBy = defineModel()
 const isReverse = defineModel('reverse')
@@ -14,12 +12,12 @@ const onChanged = async (val) => {
 </script>
 
 <template>
-  <v-row align="center" no-gutters>
+  <v-row align="center" no-gutters v-if="fields.length > 0">
     <v-col class="mr-4">
-      <v-select v-if="filters.length > 1"
+      <v-select
         v-model="sortedBy"
         hide-details
-        :items="items"
+        :items="fields"
         :label="i18n.global.t('Sort by')"
         :item-title="item => settings.fields[item]"
         @update:modelValue="onChanged"