Poprawiono działanie filtrów historii rozkładów

src/components/Global/SelectBox.vue

@@ -2,29 +2,22 @@
   <div class="select-box">
     <div class="select-box_content">
       <button class="selected" @click="toggleBox">
-        {{ computedSelectedItem.value }}
+        <span class="text--primary">{{prefix}}</span> {{ computedSelectedItem.value }}
       </button>
 
       <ul class="options" :ref="(el) => (listRef = el)">
         <li class="option" v-for="(item, i) in itemList" :key="item.id">
           <transition
             name="unfold"
-            :style="`
+            :style="
+              `
             --delay-in: ${i * 55}ms; 
-            --delay-out: ${(itemList.length - 1 - i) * 55}ms`"
+            --delay-out: ${(itemList.length - 1 - i) * 55}ms`
+            "
           >
             <label :for="item.id" v-if="listOpen">
-              <input
-                type="button"
-                :id="item.id"
-                name="select-box"
-                @click="selectOption(item)"
-              />
-              <span
-                :style="
-                  computedSelectedItem.id == item.id ? 'color: gold;' : ''
-                "
-              >
+              <input type="button" :id="item.id" name="select-box" @click="selectOption(item)" />
+              <span :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''">
                 {{ item.value }}
               </span>
             </label>
@@ -40,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref } from "@vue/runtime-core";
+import { computed, defineComponent, Ref, ref } from '@vue/runtime-core';
 
 interface Item {
   id: string | number;
@@ -48,7 +41,7 @@ interface Item {
 }
 
 export default defineComponent({
-  emits: ["selected"],
+  emits: ['selected'],
 
   props: {
     itemList: {
@@ -60,11 +53,16 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+
+    prefix: {
+      type: String,
+      default: '',
+    },
   },
 
   data: () => ({
-    ascIcon: require("@/assets/icon-arrow-asc.svg"),
-    descIcon: require("@/assets/icon-arrow-desc.svg"),
+    ascIcon: require('@/assets/icon-arrow-asc.svg'),
+    descIcon: require('@/assets/icon-arrow-desc.svg'),
   }),
 
   setup(props) {
@@ -77,10 +75,7 @@ export default defineComponent({
     let selectedItem: Ref<Item> = ref(props.itemList[props.defaultItemIndex]);
 
     const computedSelectedItem = computed(() => {
-      return (
-        props.itemList.find((item) => item.id === selectedItem.value.id) ||
-        props.itemList[props.defaultItemIndex]
-      );
+      return props.itemList.find((item) => item.id === selectedItem.value.id) || props.itemList[props.defaultItemIndex];
     });
 
     return {
@@ -98,7 +93,7 @@ export default defineComponent({
       this.selectedItem = item;
       this.listOpen = false;
 
-      this.$emit("selected", item);
+      this.$emit('selected', item);
     },
 
     toggleBox(e: Event) {
@@ -116,7 +111,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/variables.scss";
+@import '../../styles/variables.scss';
 
 .unfold {
   &-enter-from,
@@ -244,4 +239,4 @@ li.option {
     cursor: pointer;
   }
 }
-</style>
+</style>

src/components/JournalView/JournalOptions.vue

@@ -4,12 +4,11 @@
       <div class="options_content">
         <div class="content_select">
           <select-box
-            :title="$t('journal.option-distance')"
             :itemList="translatedSorterOptions"
             :defaultItemIndex="0"
             @selected="changeSorter"
+            :prefix="$t('journal.sort-prefix')"
           />
-
         </div>
 
         <div class="content_search">
@@ -61,7 +60,7 @@ export default defineComponent({
   setup() {
     const { t } = useI18n();
 
-    const sorterOptions = ['distance', 'total-stops'];
+    const sorterOptions = ['date', 'distance', 'total-stops'];
 
     const translatedSorterOptions = computed(() =>
       sorterOptions.map((id) => ({
@@ -83,11 +82,11 @@ export default defineComponent({
     changeSorter(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
+
+      this.$emit('changedOptions');
     },
 
     search() {
-      console.log('gituwa');
-
       this.$emit('changedOptions');
     },
 
@@ -118,7 +117,6 @@ export default defineComponent({
     display: flex;
     flex-wrap: wrap;
 
-
     @include smallScreen() {
       justify-content: center;
     }
@@ -129,14 +127,13 @@ export default defineComponent({
     flex-direction: column;
     align-items: flex-start;
 
-    .content_search, .content_select {
+    .content_search,
+    .content_select {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
     }
 
-
-
     @include smallScreen() {
       padding: 0 1em;