reaktywne filtry URL w dzienniku RJ

src/components/JournalView/JournalOptions.vue

@@ -33,7 +33,7 @@
           <h1 class="option-title">{{ $t('options.search-title') }}</h1>
           <div class="search_content">
             <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
-              <label v-if="propName == 'search-date'" for="date">{{
+              <label v-if="propName == 'search-date'" for="search-date">{{
                 $t(`options.search-${optionsType}-date`)
               }}</label>
 
@@ -47,6 +47,7 @@
                   :placeholder="$t(`options.${propName}`)"
                   :type="propName == 'search-date' ? 'date' : 'text'"
                   :min="propName == 'search-date' ? '2022-02-01' : undefined"
+                  :id="`${propName}`"
                   :list="propName.toString()"
                 />
 

src/components/JournalView/typings.ts

@@ -20,10 +20,11 @@ export namespace Journal {
   };
 
   export const enum TimetableFilterId {
+    ALL_STATUSES = 'all-statuses',
     ACTIVE = 'active',
     FULFILLED = 'fulfilled',
     ABANDONED = 'abandoned',
-    ALL = 'all',
+    ALL_SPECIALS = 'all-specials',
     TWR = 'twr',
     SKR = 'skr',
     TWR_SKR = 'twr-skr'
@@ -31,13 +32,14 @@ export namespace Journal {
 
   export enum FilterSection {
     TIMETABLE_STATUS = 'timetable-status',
-    TWRSKR = 'twrskr'
+    SPECIAL = 'special'
   }
 
   export interface TimetableFilter {
     id: TimetableFilterId;
     filterSection: string;
     isActive: boolean;
+    default: boolean;
   }
 
   export type TimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops';

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -28,7 +28,7 @@
       <tbody>
         <tr v-for="historyItem in historyList" :key="historyItem.id">
           <td>
-            <router-link :to="`/journal/timetables?timetableId=${historyItem.id}`">
+            <router-link :to="`/journal/timetables?search-train=%23${historyItem.id}`">
               #{{ historyItem.id }}
             </router-link>
           </td>
@@ -37,11 +37,16 @@
             {{ historyItem.trainNo }}
           </td>
           <td>{{ historyItem.route.replace('|', ' -> ') }}</td>
-          <td>{{ historyItem.driverName }}</td>
+          <td>
+            <router-link :to="`/journal/timetables?search-driver=${historyItem.driverName}`">
+              {{ historyItem.driverName }}
+            </router-link>
+          </td>
+
           <td>
             <router-link
               v-if="historyItem.authorName"
-              :to="`/journal/timetables?authorName=${historyItem.authorName}`"
+              :to="`/journal/timetables?search-dispatcher=${historyItem.authorName}`"
               >{{ historyItem.authorName }}
             </router-link>
             <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
@@ -99,18 +104,20 @@ export default defineComponent({
   },
 
   methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 15) {
+    async fetchAPIData() {
       if (!this.station && !this.onlineScenery) {
         this.dataStatus = Status.Data.Loaded;
         return;
       }
 
       try {
-        const requestString = `api/getTimetables?issuedFrom=${
-          this.station?.name || this.onlineScenery?.name
-        }&countFrom=${countFrom}&countLimit=${countLimit}`;
-
-        const response: API.TimetableHistory.Response = await (await http.get(requestString)).data;
+        const response: API.TimetableHistory.Response = await (
+          await http.get('api/getTimetables', {
+            params: {
+              issuedFrom: this.station?.name
+            }
+          })
+        ).data;
 
         this.historyList = response;
 
@@ -121,9 +128,12 @@ export default defineComponent({
     },
 
     navigateToHistory() {
-      this.$router.push(
-        `/journal/timetables?issuedFrom=${this.station?.name || this.onlineScenery?.name}`
-      );
+      this.$router.push({
+        path: '/journal/timetables',
+        query: {
+          'search-issuedFrom': this.station?.name || this.onlineScenery?.name
+        }
+      });
     }
   },
   components: { Loading }