From c3481470cbfa0c43d1d8fbd4174537f0c327bf45 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 3 Jun 2023 15:49:15 +0200
Subject: [PATCH] =?UTF-8?q?optymalizacja=20zapyta=C5=84;=20filtr=20sceneri?=
 =?UTF-8?q?i=20pocz.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalOptions.vue |   8 +-
 src/locales/en.json                           |   5 +-
 src/locales/pl.json                           |   5 +-
 .../interfaces/api/TimetablesQueryParams.ts   |  18 +
 src/types/Journal/JournalTimetablesTypes.ts   |   6 +-
 src/views/JournalTimetables.vue               | 608 +++++++++---------
 6 files changed, 332 insertions(+), 318 deletions(-)
 create mode 100644 src/scripts/interfaces/api/TimetablesQueryParams.ts

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index ce8ca05..470a1ac 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -132,8 +132,8 @@ export default defineComponent({
 
     optionsType: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
 
   data() {
@@ -249,10 +249,6 @@ export default defineComponent({
       });
     },
 
-    focusEnd() {
-      console.log('focus end');
-    },
-
     onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
diff --git a/src/locales/en.json b/src/locales/en.json
index 3cf188f..819e7ee 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -99,19 +99,20 @@
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name",
     "search-author": "Timetable author name",
+    "search-issuedFrom": "Origin scenery name",
     "search-timetables-date": "Timetable date (CEST / GMT+2)",
     "search-dispatchers-date": "Service date (CEST / GMT+2)",
 
     "sort-mass": "mass",
     "sort-speed": "speed",
     "sort-length": "length",
-    "sort-distance": "distance",
+    "sort-routeDistance": "route distance",
     "sort-timetable": "train no.",
     "sort-progress": "route progress",
     "sort-delay": "current delay",
     "sort-id": "timetable id",
 
-    "sort-total-stops": "total stops",
+    "sort-allStopsCount": "total stops",
     "sort-beginDate": "date",
     "sort-timetableId": "timetable ID",
     "sort-timestampFrom": "date",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 98ca1b9..b02c2d1 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -99,11 +99,12 @@
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii",
     "search-author": "Nick autora rozkładu jazdy",
+    "search-issuedFrom": "Sceneria początkowa",
     "search-timetables-date": "Data rozkładu jazdy (czas polski)",
     "search-dispatchers-date": "Data służby (czas polski)",
 
-    "sort-distance": "kilometraż",
-    "sort-total-stops": "stacje",
+    "sort-routeDistance": "kilometraż",
+    "sort-allStopsCount": "stacje",
     "sort-beginDate": "data",
     "sort-timetableId": "ID rozkładu",
     "sort-timestampFrom": "data",
diff --git a/src/scripts/interfaces/api/TimetablesQueryParams.ts b/src/scripts/interfaces/api/TimetablesQueryParams.ts
new file mode 100644
index 0000000..131e865
--- /dev/null
+++ b/src/scripts/interfaces/api/TimetablesQueryParams.ts
@@ -0,0 +1,18 @@
+import { JournalTimetableSorter } from '../../../types/Journal/JournalTimetablesTypes';
+
+export interface TimetablesQueryParams {
+  driverName?: string;
+  trainNo?: string;
+  authorName?: string;
+  timestampFrom?: number;
+  timestampTo?: number;
+  issuedFrom?: string;
+
+  countFrom?: number;
+  countLimit?: number;
+
+  fulfilled?: number;
+  terminated?: number;
+
+  sortBy?: JournalTimetableSorter['id'];
+}
diff --git a/src/types/Journal/JournalTimetablesTypes.ts b/src/types/Journal/JournalTimetablesTypes.ts
index cf0ad24..d8d8864 100644
--- a/src/types/Journal/JournalTimetablesTypes.ts
+++ b/src/types/Journal/JournalTimetablesTypes.ts
@@ -1,6 +1,6 @@
 import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
 
-export type JournalTimetableSearchKey = 'search-driver' | 'search-train' | 'search-date' | 'search-dispatcher'; 
+export type JournalTimetableSearchKey = 'search-driver' | 'search-train' | 'search-date' | 'search-dispatcher' | 'search-issuedFrom'; 
 
 export type JournalTimetableSearchType = {
   [key in JournalTimetableSearchKey]: string;
@@ -13,6 +13,6 @@ export interface JournalTimetableFilter {
 }
 
 export interface JournalTimetableSorter {
-  id:  'timetableId' | 'beginDate' | 'distance' | 'total-stops';
-  dir: -1 | 1;
+  id: 'timetableId' | 'beginDate' | 'routeDistance' | 'allStopsCount';
+  dir: 'asc' | 'desc';
 }
diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue
index 4b82da7..9401528 100644
--- a/src/views/JournalTimetables.vue
+++ b/src/views/JournalTimetables.vue
@@ -1,305 +1,303 @@
-<template>
-  <section class="journal-timetables">
-    <JournalHeader />
-
-    <div class="journal_wrapper">
-      <JournalOptions
-        @on-search-confirm="fetchHistoryData"
-        @on-options-reset="resetOptions"
-        @on-refresh-data="fetchHistoryData"
-        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
-        :filters="journalTimetableFilters"
-        :currentOptionsActive="currentOptionsActive"
-        :data-status="dataStatus"
-        optionsType="timetables"
-      />
-
-      <JournalStats />
-
-      <div class="list_wrapper" @scroll="handleScroll">
-        <transition name="status-anim" mode="out-in">
-          <div :key="dataStatus">
-            <div class="journal_warning" v-if="store.isOffline">
-              {{ $t('app.offline') }}
-            </div>
-
-            <Loading v-else-if="dataStatus == DataStatus.Loading" />
-
-            <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
-              {{ $t('app.error') }}
-            </div>
-
-            <div v-else-if="timetableHistory.length == 0" class="journal_warning">
-              {{ $t('app.no-result') }}
-            </div>
-
-            <div v-else>
-              <JournalTimetablesList :timetableHistory="timetableHistory" />
-
-              <button
-                class="btn btn--option btn--load-data"
-                v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
-                @click="addHistoryData"
-              >
-                {{ $t('journal.load-data') }}
-              </button>
-            </div>
-          </div>
-        </transition>
-
-        <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
-        <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { defineComponent, provide, reactive, Ref, ref } from 'vue';
-import axios from 'axios';
-
-import DriverStats from '../components/JournalView/JournalDriverStats.vue';
-import Loading from '../components/Global/Loading.vue';
-import { JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes';
-import dateMixin from '../mixins/dateMixin';
-import routerMixin from '../mixins/routerMixin';
-import { DataStatus } from '../scripts/enums/DataStatus';
-import { JournalFilterType } from '../scripts/enums/JournalFilterType';
-import { TimetableHistory } from '../scripts/interfaces/api/TimetablesAPIData';
-import { URLs } from '../scripts/utils/apiURLs';
-import { useStore } from '../store/store';
-import JournalOptions from '../components/JournalView/JournalOptions.vue';
-import { JournalTimetableSearchType } from '../types/Journal/JournalTimetablesTypes';
-import modalTrainMixin from '../mixins/modalTrainMixin';
-import imageMixin from '../mixins/imageMixin';
-import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue';
-import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts';
-import JournalStats from '../components/JournalView/JournalStats.vue';
-import JournalHeader from '../components/JournalView/JournalHeader.vue';
-import { LocationQuery } from 'vue-router';
-
-const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
-
-export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, JournalStats, JournalHeader },
-  mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
-
-  name: 'JournalTimetables',
-
-  props: {
-    timetableId: {
-      type: String,
-    },
-  },
-
-  data: () => ({
-    currentQuery: '',
-    currentQueryArray: [] as string[],
-
-    scrollDataLoaded: true,
-    scrollNoMoreData: false,
-
-    showReturnButton: false,
-    statsCardOpen: false,
-    currentOptionsActive: false,
-
-    timetableHistory: [] as TimetableHistory[],
-    journalTimetableFilters,
-
-    dataStatus: DataStatus.Loading,
-    dataErrorMessage: '',
-
-    DataStatus,
-  }),
-
-  setup() {
-    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
-    const journalFilterActive = ref(journalTimetableFilters[0]);
-
-    const searchersValues = reactive({
-      'search-train': '',
-      'search-driver': '',
-      'search-dispatcher': '',
-      'search-date': '',
-    } as JournalTimetableSearchType);
-
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
-    provide('searchersValues', searchersValues);
-    provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
-
-    const scrollElement: Ref<HTMLElement | null> = ref(null);
-
-    return {
-      sorterActive,
-      journalFilterActive,
-      searchersValues,
-
-      countFromIndex,
-      countLimit,
-
-      scrollElement,
-
-      store: useStore(),
-    };
-  },
-
-  watch: {
-    currentQueryArray(q: string[]) {      
-      this.currentOptionsActive = q.length >= 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
-    },
-  },
-
-  // Handle route updates for route-links
-  beforeRouteUpdate(to, _) {
-    this.handleQueries(to.query);
-    this.fetchHistoryData();
-  },
-
-  activated() {
-    this.handleQueries(this.$route.query);
-    this.fetchHistoryData();
-  },
-
-
-  methods: {
-    handleScroll(e: Event) {
-      const listElement = e.target as HTMLElement;
-      const scrollTop = listElement.scrollTop;
-      const elementHeight = listElement.scrollHeight - listElement.offsetHeight;
-
-      if (!this.scrollDataLoaded || this.scrollNoMoreData || this.dataStatus != DataStatus.Loaded) return;
-
-      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
-    },
-
-    handleQueries(query: LocationQuery) {
-      if ('timetableId' in query) this.searchersValues['search-train'] = `#${query.timetableId}`;
-    },
-
-    setSearchers(date: string, driver: string, train: string, dispatcher: string) {
-      this.searchersValues['search-date'] = date;
-      this.searchersValues['search-driver'] = driver;
-      this.searchersValues['search-train'] = train;
-      this.searchersValues['search-dispatcher'] = dispatcher;
-    },
-
-    resetOptions() {
-      this.setSearchers('', '', '', '');
-
-      this.journalFilterActive = this.journalTimetableFilters[0];
-      this.sorterActive.id = 'timetableId';
-
-      this.fetchHistoryData();
-    },
-
-    async addHistoryData() {
-      this.scrollDataLoaded = false;
-
-      const countFrom = this.timetableHistory.length;
-
-      const responseData: TimetableHistory[] = await (
-        await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
-      ).data;
-
-      if (!responseData) return;
-
-      if (responseData.length == 0) {
-        this.scrollNoMoreData = true;
-        return;
-      }
-
-      this.timetableHistory.push(...responseData);
-      this.scrollDataLoaded = true;
-    },
-
-    async fetchHistoryData() {
-      // if(this.dataStatus == DataStatus.Loading) return;
-
-      const queries: string[] = [];
-
-      const driverName = this.searchersValues['search-driver'].trim();
-      const trainNo = this.searchersValues['search-train'].trim();
-      const authorName = this.searchersValues['search-dispatcher'].trim();
-      const dateString = this.searchersValues['search-date'].trim();
-
-      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
-      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
-
-      if (driverName) queries.push(`driverName=${driverName}`);
-      if (trainNo)
-        queries.push(trainNo.startsWith('#') ? `timetableId=${trainNo.replace('#', '')}` : `trainNo=${trainNo}`);
-      if (authorName) queries.push(`authorName=${authorName}`);
-      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
-
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
-      else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
-      else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
-      // else queries.push('sortBy=timetableId');
-
-      queries.push('countLimit=15');
-
-      switch (this.journalFilterActive.id) {
-        case JournalFilterType.abandoned:
-          queries.push('fulfilled=0', 'terminated=1');
-          break;
-
-        case JournalFilterType.active:
-          queries.push('terminated=0');
-          break;
-
-        case JournalFilterType.fulfilled:
-          queries.push('fulfilled=1');
-          break;
-
-        default:
-          break;
-      }
-
-      if (this.currentQuery != queries.join('&')) this.dataStatus = DataStatus.Loading;
-
-      this.currentQuery = queries.join('&');
-      this.currentQueryArray = queries;
-
-      try {
-        const responseData: TimetableHistory[] = await (
-          await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
-        ).data;
-
-        if (!responseData) {
-          this.dataStatus = DataStatus.Error;
-          this.dataErrorMessage = 'Brak danych!';
-          return;
-        }
-
-        if (!responseData) return;
-
-        // Response data exists
-        this.timetableHistory = responseData;
-
-        // Stats display
-        this.store.driverStatsName =
-          this.timetableHistory.length > 0 && this.searchersValues['search-driver'].trim()
-            ? this.timetableHistory[0].driverName
-            : '';
-
-        this.dataStatus = DataStatus.Loaded;
-      } catch (error) {
-        this.dataStatus = DataStatus.Error;
-        this.dataErrorMessage = 'Ups! Coś poszło nie tak!';
-      }
-
-      this.scrollNoMoreData = false;
-      this.scrollDataLoaded = true;
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
-</style>
-
+<template>
+  <section class="journal-timetables">
+    <JournalHeader />
+
+    <div class="journal_wrapper">
+      <JournalOptions
+        @on-search-confirm="fetchHistoryData"
+        @on-options-reset="resetOptions"
+        @on-refresh-data="fetchHistoryData"
+        :sorter-option-ids="['timetableId', 'beginDate', 'routeDistance', 'allStopsCount']"
+        :filters="journalTimetableFilters"
+        :currentOptionsActive="currentOptionsActive"
+        :data-status="dataStatus"
+        optionsType="timetables"
+      />
+
+      <JournalStats />
+
+      <div class="list_wrapper" @scroll="handleScroll">
+        <transition name="status-anim" mode="out-in">
+          <div :key="dataStatus">
+            <div class="journal_warning" v-if="store.isOffline">
+              {{ $t('app.offline') }}
+            </div>
+
+            <Loading v-else-if="dataStatus == DataStatus.Loading" />
+
+            <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+              {{ $t('app.error') }}
+            </div>
+
+            <div v-else-if="timetableHistory.length == 0" class="journal_warning">
+              {{ $t('app.no-result') }}
+            </div>
+
+            <div v-else>
+              <JournalTimetablesList :timetableHistory="timetableHistory" />
+
+              <button
+                class="btn btn--option btn--load-data"
+                v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
+                @click="addHistoryData"
+              >
+                {{ $t('journal.load-data') }}
+              </button>
+            </div>
+          </div>
+        </transition>
+
+        <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
+        <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, reactive, Ref, ref } from 'vue';
+import axios from 'axios';
+
+import DriverStats from '../components/JournalView/JournalDriverStats.vue';
+import Loading from '../components/Global/Loading.vue';
+import { JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes';
+import dateMixin from '../mixins/dateMixin';
+import routerMixin from '../mixins/routerMixin';
+import { DataStatus } from '../scripts/enums/DataStatus';
+import { TimetableHistory } from '../scripts/interfaces/api/TimetablesAPIData';
+import { URLs } from '../scripts/utils/apiURLs';
+import { useStore } from '../store/store';
+import JournalOptions from '../components/JournalView/JournalOptions.vue';
+import { JournalTimetableSearchType } from '../types/Journal/JournalTimetablesTypes';
+import modalTrainMixin from '../mixins/modalTrainMixin';
+import imageMixin from '../mixins/imageMixin';
+import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue';
+import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts';
+import JournalStats from '../components/JournalView/JournalStats.vue';
+import JournalHeader from '../components/JournalView/JournalHeader.vue';
+import { LocationQuery } from 'vue-router';
+import { TimetablesQueryParams } from '../scripts/interfaces/api/TimetablesQueryParams';
+import { JournalFilterType } from '../scripts/enums/JournalFilterType';
+
+const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
+
+export default defineComponent({
+  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, JournalStats, JournalHeader },
+  mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
+
+  name: 'JournalTimetables',
+
+  props: {
+    timetableId: {
+      type: String,
+    },
+  },
+
+  data: () => ({
+    currentQueryParams: {} as TimetablesQueryParams,
+
+    scrollDataLoaded: true,
+    scrollNoMoreData: false,
+
+    showReturnButton: false,
+    statsCardOpen: false,
+    currentOptionsActive: false,
+
+    timetableHistory: [] as TimetableHistory[],
+    journalTimetableFilters,
+
+    dataStatus: DataStatus.Loading,
+    dataErrorMessage: '',
+
+    DataStatus,
+  }),
+
+  setup() {
+    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 'desc' });
+    const journalFilterActive = ref(journalTimetableFilters[0]);
+
+    const searchersValues = reactive({
+      'search-train': '',
+      'search-driver': '',
+      'search-dispatcher': '',
+      'search-issuedFrom': '',
+      'search-date': '',
+    } as JournalTimetableSearchType);
+
+    const countFromIndex = ref(0);
+    const countLimit = 15;
+
+    provide('searchersValues', searchersValues);
+    provide('sorterActive', sorterActive);
+    provide('journalFilterActive', journalFilterActive);
+
+    const scrollElement: Ref<HTMLElement | null> = ref(null);
+
+    return {
+      sorterActive,
+      journalFilterActive,
+      searchersValues,
+
+      countFromIndex,
+      countLimit,
+
+      scrollElement,
+
+      store: useStore(),
+    };
+  },
+
+  watch: {
+    currentQueryArray(q: string[]) {
+      this.currentOptionsActive = q.length >= 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
+    },
+  },
+
+  // Handle route updates for route-links
+  beforeRouteUpdate(to, _) {
+    this.handleQueries(to.query);
+    this.fetchHistoryData();
+
+    console.log('test');
+  },
+
+  activated() {
+    this.handleQueries(this.$route.query);
+    this.fetchHistoryData();
+  },
+
+  methods: {
+    handleScroll(e: Event) {
+      const listElement = e.target as HTMLElement;
+      const scrollTop = listElement.scrollTop;
+      const elementHeight = listElement.scrollHeight - listElement.offsetHeight;
+
+      if (!this.scrollDataLoaded || this.scrollNoMoreData || this.dataStatus != DataStatus.Loaded) return;
+
+      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
+    },
+
+    handleQueries(query: LocationQuery) {
+      if ('timetableId' in query) this.searchersValues['search-train'] = `#${query.timetableId}`;
+    },
+
+    setSearchers(date: string, driver: string, train: string, dispatcher: string) {
+      this.searchersValues['search-date'] = date;
+      this.searchersValues['search-driver'] = driver;
+      this.searchersValues['search-train'] = train;
+      this.searchersValues['search-dispatcher'] = dispatcher;
+    },
+
+    resetOptions() {
+      this.setSearchers('', '', '', '');
+
+      this.journalFilterActive = this.journalTimetableFilters[0];
+      this.sorterActive.id = 'timetableId';
+
+      this.fetchHistoryData();
+    },
+
+    async addHistoryData() {
+      this.scrollDataLoaded = false;
+
+      this.currentQueryParams['countFrom'] = this.timetableHistory.length;
+
+      const responseData: TimetableHistory[] = await (
+        await axios.get(`${TIMETABLES_API_URL}`, {
+          params: { ...this.currentQueryParams },
+        })
+      ).data;
+
+      if (!responseData) return;
+
+      if (responseData.length == 0) {
+        this.scrollNoMoreData = true;
+        return;
+      }
+
+      this.timetableHistory.push(...responseData);
+      this.scrollDataLoaded = true;
+    },
+
+    async fetchHistoryData() {
+      const driverName = this.searchersValues['search-driver'].trim() || undefined;
+      const trainNo = this.searchersValues['search-train'].trim() || undefined;
+      const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
+      const dateString = this.searchersValues['search-date'].trim() || undefined;
+      const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
+
+      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
+      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
+
+      switch (this.journalFilterActive.id) {
+        case JournalFilterType.abandoned:
+          this.currentQueryParams['fulfilled'] = 0;
+          this.currentQueryParams['terminated'] = 1;
+          break;
+
+        case JournalFilterType.active:
+          this.currentQueryParams['terminated'] = 0;
+          break;
+
+        case JournalFilterType.fulfilled:
+          this.currentQueryParams['fulfilled'] = 1;
+          break;
+
+        default:
+          break;
+      }
+
+      this.currentQueryParams['driverName'] = driverName;
+      this.currentQueryParams['trainNo'] = trainNo;
+
+      this.currentQueryParams['countFrom'] = undefined;
+      this.currentQueryParams['countLimit'] = undefined;
+
+      this.currentQueryParams['authorName'] = authorName;
+      this.currentQueryParams['timestampFrom'] = timestampFrom;
+      this.currentQueryParams['timestampTo'] = timestampTo;
+      this.currentQueryParams['issuedFrom'] = issuedFrom;
+      this.currentQueryParams['sortBy'] = this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined;
+
+      this.dataStatus = DataStatus.Loading;
+
+      try {
+        const responseData: TimetableHistory[] = await (
+          await axios.get(`${TIMETABLES_API_URL}`, {
+            params: this.currentQueryParams,
+          })
+        ).data;
+
+        if (!responseData) {
+          this.dataStatus = DataStatus.Error;
+          this.dataErrorMessage = 'Brak danych!';
+          return;
+        }
+
+        if (!responseData) return;
+
+        // Response data exists
+        this.timetableHistory = responseData;
+
+        // Stats display
+        this.store.driverStatsName =
+          this.timetableHistory.length > 0 && this.searchersValues['search-driver'].trim()
+            ? this.timetableHistory[0].driverName
+            : '';
+
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        this.dataStatus = DataStatus.Error;
+        this.dataErrorMessage = 'Ups! Coś poszło nie tak!';
+      }
+
+      this.scrollNoMoreData = false;
+      this.scrollDataLoaded = true;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/JournalSection.scss';
+</style>