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=${
+        const response: API.TimetableHistory.Response = await (
-          this.station?.name || this.onlineScenery?.name
+          await http.get('api/getTimetables', {
-        }&countFrom=${countFrom}&countLimit=${countLimit}`;
+            params: {
-
+              issuedFrom: this.station?.name
-        const response: API.TimetableHistory.Response = await (await http.get(requestString)).data;
+            }
+          })
+        ).data;
 
         this.historyList = response;
 
@@ -121,9 +128,12 @@ export default defineComponent({
     },
 
     navigateToHistory() {
-      this.$router.push(
+      this.$router.push({
-        `/journal/timetables?issuedFrom=${this.station?.name || this.onlineScenery?.name}`
+        path: '/journal/timetables',
-      );
+        query: {
+          'search-issuedFrom': this.station?.name || this.onlineScenery?.name
+        }
+      });
     }
   },
   components: { Loading }

src/locales/en.json

@@ -144,7 +144,8 @@
     "filter-withComments": "COMMENTS",
     "filter-twr": "HIGH RISK CARGO",
     "filter-skr": "EXCEEDED GAUGE",
-    "filter-twr-skr": "ALL TYPES",
+    "filter-twr-skr": "BOTH TYPES",
+    "filter-all-specials": "ALL",
     "filter-common": "NO WARNINGS",
     "filter-passenger": "PASSENGER",
     "filter-freight": "FREIGHT",
@@ -156,9 +157,9 @@
     "filter-clear": "CLEAR FILTERS",
 
     "filter-section-timetable-status": "TIMETABLE STATUS",
-    "filter-section-twrskr": "WARNINGS",
+    "filter-section-special": "SPECIAL TYPE",
 
-    "filter-all": "ALL ENTRIES",
+    "filter-all-statuses": "ALL",
     "filter-abandoned": "ABANDONED",
     "filter-fulfilled": "FULFILLED",
     "filter-active": "ACTIVE"

src/locales/pl.json

@@ -133,7 +133,8 @@
     "filter-noComments": "BEZ UWAG",
     "filter-twr": "WYS. RYZYKA",
     "filter-skr": "SKRAJNIA",
-    "filter-twr-skr": "WSZYSTKIE",
+    "filter-twr-skr": "TWR/SKR",
+    "filter-all-statuses": "WSZYSTKIE",
     "filter-common": "ZWYKŁE",
     "filter-passenger": "PASAŻERSKIE",
     "filter-freight": "TOWAROWE",
@@ -145,9 +146,9 @@
     "filter-clear": "WYŁĄCZ FILTRY",
 
     "filter-section-timetable-status": "STATUS ROZKŁADU JAZDY",
-    "filter-section-twrskr": "UWAGI",
+    "filter-section-special": "TYPY SPECJALNE",
 
-    "filter-all": "WSZYSTKIE",
+    "filter-all-specials": "WSZYSTKIE",
     "filter-abandoned": "PORZUCONE",
     "filter-fulfilled": "WYPEŁNIONE",
     "filter-active": "AKTYWNE"

src/views/JournalDispatchers.vue

@@ -166,6 +166,15 @@ export default defineComponent({
   },
 
   methods: {
+    handleRouteParams() {
+      this.$router.push({
+        query: {
+          'search-date': this.searchersValues['search-date'] || undefined,
+          'search-station': this.searchersValues['search-station'] || undefined,
+          'search-dispatcher': this.searchersValues['search-dispatcher'] || undefined
+        }
+      });
+    },
     handleScroll(e: Event) {
       const listElement = e.target as HTMLElement;
       const scrollTop = listElement.scrollTop;
@@ -178,21 +187,19 @@ export default defineComponent({
     },
 
     handleQueries(query: LocationQuery) {
-      const queryKeys = Object.keys(query);
+      // if (queryKeys.includes('sceneryName')) this.setSearchers('', `${query.sceneryName}`, '');
-
+      // if (queryKeys.includes('dispatcherName'))
-      if (queryKeys.includes('sceneryName')) this.setSearchers('', `${query.sceneryName}`, '');
+      //   this.setSearchers('', '', `${query.dispatcherName}`);
-      if (queryKeys.includes('dispatcherName'))
-        this.setSearchers('', '', `${query.dispatcherName}`);
     },
 
-    setSearchers(date: string, station: string, dispatcher: string) {
+    setSearchers(searchers: { [key: string]: string }) {
-      this.searchersValues['search-date'] = date;
+      this.searchersValues['search-date'] = searchers['search-date'] ?? '';
-      this.searchersValues['search-station'] = station;
+      this.searchersValues['search-station'] = searchers['search-station'] ?? '';
-      this.searchersValues['search-dispatcher'] = dispatcher;
+      this.searchersValues['search-dispatcher'] = searchers['search-dispatcher'] ?? '';
     },
 
     resetOptions() {
-      this.setSearchers('', '', '');
+      this.setSearchers({});
       this.sorterActive.id = 'timestampFrom';
 
       this.fetchHistoryData();

src/views/JournalTimetables.vue

@@ -5,9 +5,9 @@
     <div class="journal_wrapper">
       <div class="journal_top-bar">
         <JournalOptions
-          @on-search-confirm="fetchHistoryData"
+          @onSearchConfirm="onSearchConfirm"
-          @on-options-reset="resetOptions"
+          @onOptionsReset="resetOptions"
-          @on-refresh-data="fetchHistoryData"
+          @onRefreshData="fetchHistoryData"
           :sorter-option-ids="['timetableId', 'beginDate', 'routeDistance', 'allStopsCount']"
           :filters="journalTimetableFilters"
           :currentOptionsActive="currentOptionsActive"
@@ -58,45 +58,58 @@ import http from '../http';
 
 export const journalTimetableFilters: Journal.TimetableFilter[] = [
   {
-    id: Journal.TimetableFilterId.ALL,
+    id: Journal.TimetableFilterId.ALL_STATUSES,
     filterSection: Journal.FilterSection.TIMETABLE_STATUS,
-    isActive: true
+    isActive: true,
+    default: true
   },
 
   {
     id: Journal.TimetableFilterId.ACTIVE,
     filterSection: Journal.FilterSection.TIMETABLE_STATUS,
-    isActive: false
+    isActive: false,
+    default: false
   },
 
   {
     id: Journal.TimetableFilterId.FULFILLED,
     filterSection: Journal.FilterSection.TIMETABLE_STATUS,
-    isActive: false
+    isActive: false,
+    default: false
   },
 
   {
     id: Journal.TimetableFilterId.ABANDONED,
     filterSection: Journal.FilterSection.TIMETABLE_STATUS,
-    isActive: false
+    isActive: false,
+    default: false
   },
 
   {
-    id: Journal.TimetableFilterId.TWR_SKR,
+    id: Journal.TimetableFilterId.ALL_SPECIALS,
-    filterSection: Journal.FilterSection.TWRSKR,
+    filterSection: Journal.FilterSection.SPECIAL,
-    isActive: true
+    isActive: true,
+    default: true
   },
 
   {
     id: Journal.TimetableFilterId.TWR,
-    filterSection: Journal.FilterSection.TWRSKR,
+    filterSection: Journal.FilterSection.SPECIAL,
-    isActive: false
+    isActive: false,
+    default: false
   },
 
   {
     id: Journal.TimetableFilterId.SKR,
-    filterSection: Journal.FilterSection.TWRSKR,
+    filterSection: Journal.FilterSection.SPECIAL,
-    isActive: false
+    isActive: false,
+    default: false
+  },
+  {
+    id: Journal.TimetableFilterId.TWR_SKR,
+    filterSection: Journal.FilterSection.SPECIAL,
+    isActive: false,
+    default: false
   }
 ];
 
@@ -176,10 +189,11 @@ export default defineComponent({
 
   setup() {
     const sorterActive: Journal.TimetableSorter = reactive({ id: 'timetableId', dir: 'desc' });
-    // const journalFilterActive = ref(journalTimetableFilters[0]);
+
     const initFilters: readonly Journal.TimetableFilter[] = JSON.parse(
       JSON.stringify(journalTimetableFilters)
     );
+
     const filterList: Journal.TimetableFilter[] = reactive(JSON.parse(JSON.stringify(initFilters)));
 
     const searchersValues = reactive({
@@ -235,6 +249,38 @@ export default defineComponent({
   },
 
   methods: {
+    onSearchConfirm() {
+      this.handleRouteParams();
+
+      this.fetchHistoryData();
+    },
+
+    handleRouteParams() {
+      this.$router.push({
+        query: {
+          ...this.$route.query,
+          'sorter-active': this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined,
+          ...Object.keys(this.searchersValues).reduce(
+            (acc, k) => {
+              const searchVal = this.searchersValues[k as Journal.TimetableSearchKey];
+
+              acc[k] = searchVal || undefined;
+
+              return acc;
+            },
+            {} as { [k: string]: string | undefined }
+          ),
+          ...this.filterList.reduce(
+            (acc, f) => {
+              if (f.isActive) acc[f.filterSection] = f.default ? undefined : f.id;
+              return acc;
+            },
+            {} as { [k: string]: string | undefined }
+          )
+        }
+      });
+    },
+
     handleScroll(e: Event) {
       const listElement = e.target as HTMLElement;
       const scrollTop = listElement.scrollTop;
@@ -247,32 +293,28 @@ export default defineComponent({
     },
 
     handleQueries(query: LocationQuery) {
-      const queryKeys = Object.keys(query);
+      this.setOptions(query as any);
-
-      if (queryKeys.includes('timetableId'))
-        this.setSearchers('', '', `#${query.timetableId}`, '', '');
-      if (queryKeys.includes('issuedFrom'))
-        this.setSearchers('', '', '', '', `${query.issuedFrom}`);
-      if (queryKeys.includes('authorName'))
-        this.setSearchers('', '', '', `${query.authorName}`, '');
     },
 
-    setSearchers(
+    setOptions(options: { [key: string]: string }) {
-      date: string,
+      this.searchersValues['search-date'] = options['search-date'] ?? '';
-      driver: string,
+      this.searchersValues['search-driver'] = options['search-driver'] ?? '';
-      train: string,
+      this.searchersValues['search-train'] = options['search-train'] ?? '';
-      dispatcher: string,
+      this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
-      issuedFrom: string
+      this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
-    ) {
+
-      this.searchersValues['search-date'] = date;
+      this.sorterActive.id =
-      this.searchersValues['search-driver'] = driver;
+        (options['sorter-active'] as Journal.TimetableSorterKey) ?? 'timetableId';
-      this.searchersValues['search-train'] = train;
+
-      this.searchersValues['search-dispatcher'] = dispatcher;
+      this.filterList.forEach((f) => {
-      this.searchersValues['search-issuedFrom'] = issuedFrom;
+        f.isActive =
+          options[f.filterSection] === f.id ||
+          (options[f.filterSection] === undefined && f.default);
+      });
     },
 
     resetOptions() {
-      this.setSearchers('', '', '', '', '');
+      this.setOptions({});
 
       this.sorterActive.id = 'timetableId';
 
@@ -282,6 +324,7 @@ export default defineComponent({
             this.initFilters.find((initFilter) => initFilter.id == f.id)?.isActive || false)
       );
 
+      this.handleRouteParams();
       this.fetchHistoryData();
     },
 
@@ -340,12 +383,12 @@ export default defineComponent({
               queryParams['fulfilled'] = 1;
               break;
 
-            case Journal.TimetableFilterId.ALL:
+            case Journal.TimetableFilterId.ALL_STATUSES:
               queryParams['terminated'] = undefined;
               queryParams['fulfilled'] = undefined;
               break;
 
-            case Journal.TimetableFilterId.TWR_SKR:
+            case Journal.TimetableFilterId.ALL_SPECIALS:
               queryParams['twr'] = undefined;
               queryParams['skr'] = undefined;
               break;
@@ -356,7 +399,12 @@ export default defineComponent({
               break;
 
             case Journal.TimetableFilterId.SKR:
-              queryParams['twr'] = undefined;
+              queryParams['twr'] = 0;
+              queryParams['skr'] = 1;
+              break;
+
+            case Journal.TimetableFilterId.TWR_SKR:
+              queryParams['twr'] = 1;
               queryParams['skr'] = 1;
               break;