refactor: journal dispatcher filters

src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue

@@ -1,43 +1,45 @@
 <template>
-  <div class="journal_warning" v-if="store.isOffline">
-    {{ $t('app.offline') }}
-  </div>
+  <div>
+    <div class="journal_warning" v-if="store.isOffline">
+      {{ $t('app.offline') }}
+    </div>
 
-  <Loading v-else-if="dataStatus == Status.Data.Loading" />
+    <Loading v-else-if="dataStatus == Status.Data.Loading" />
 
-  <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
-    {{ $t('app.error') }}
-  </div>
+    <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
+      {{ $t('app.error') }}
+    </div>
 
-  <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
-    {{ $t('app.no-result') }}
-  </div>
+    <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
+      {{ $t('app.no-result') }}
+    </div>
 
-  <div v-else>
-    <transition-group name="list-anim" class="journal-list" tag="ul">
-      <JournalDispatcherEntry
-        v-for="entry in dispatcherHistory"
-        :key="entry.id"
-        :entry="entry"
-        :onToggleShowExtraInfo="toggleExtraInfo"
-        :showExtraInfo="extraInfoIndexes.includes(entry.id)"
+    <div v-else>
+      <transition-group name="list-anim" class="journal-list" tag="ul">
+        <JournalDispatcherEntry
+          v-for="entry in dispatcherHistory"
+          :key="entry.id"
+          :entry="entry"
+          :onToggleShowExtraInfo="toggleExtraInfo"
+          :showExtraInfo="extraInfoIndexes.includes(entry.id)"
+        />
+      </transition-group>
+
+      <AddDataButton
+        :list="dispatcherHistory"
+        :scrollDataLoaded="scrollDataLoaded"
+        :scrollNoMoreData="scrollNoMoreData"
+        @addHistoryData="addHistoryData"
       />
-    </transition-group>
+    </div>
 
-    <AddDataButton
-      :list="dispatcherHistory"
-      :scrollDataLoaded="scrollDataLoaded"
-      :scrollNoMoreData="scrollNoMoreData"
-      @addHistoryData="addHistoryData"
-    />
-  </div>
+    <div class="journal_warning" v-if="scrollNoMoreData">
+      {{ $t('journal.no-further-data') }}
+    </div>
 
-  <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 class="journal_warning" v-else-if="!scrollDataLoaded">
+      {{ $t('journal.loading-further-data') }}
+    </div>
   </div>
 </template>
 
@@ -81,6 +83,15 @@ export default defineComponent({
     };
   },
 
+  watch: {
+    '$route.query': {
+      deep: true,
+      handler() {
+        this.extraInfoIndexes.length = 0;
+      }
+    }
+  },
+
   methods: {
     toggleExtraInfo(id: number) {
       const existingIdx = this.extraInfoIndexes.indexOf(id);

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -94,6 +94,7 @@ export default defineComponent({
       }
     }
   },
+  
   methods: {
     toggleExtraInfo(id: number) {
       const existingIdx = this.extraInfoIndexes.indexOf(id);

src/components/JournalView/typings.ts

@@ -19,7 +19,7 @@ export namespace Journal {
   };
 
   export type TimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
-  export type DispatcherSorterKey = 'timestampFrom' | 'duration';
+  export type DispatcherSorterKey = 'timestampFrom' | 'currentDuration';
 
   export interface DispatcherSorter {
     id: DispatcherSorterKey;

src/locales/en.json

@@ -193,7 +193,7 @@
     "sort-beginDate": "date",
     "sort-timetableId": "timetable ID",
     "sort-timestampFrom": "date",
-    "sort-duration": "duration",
+    "sort-currentDuration": "duration",
 
     "filter-noComments": "NO COMMENTS",
     "filter-withComments": "COMMENTS",

src/locales/pl.json

@@ -182,7 +182,7 @@
     "sort-beginDate": "data",
     "sort-timetableId": "ID rozkładu",
     "sort-timestampFrom": "data",
-    "sort-duration": "czas dyżuru",
+    "sort-currentDuration": "czas dyżuru",
     "sort-id": "id rozkładu",
 
     "sort-mass": "masa",

src/views/JournalDispatchers.vue

@@ -7,8 +7,8 @@
         <JournalOptions
           @on-search-confirm="fetchHistoryData"
           @on-options-reset="resetOptions"
-          @on-refresh-data="fetchHistoryData(true)"
-          :sorter-option-ids="['timestampFrom', 'duration']"
+          @on-refresh-data="fetchHistoryData"
+          :sorter-option-ids="['timestampFrom', 'currentDuration']"
           :data-status="dataStatus"
           :current-options-active="currentOptionsActive"
           optionsType="dispatchers"
@@ -59,6 +59,28 @@ const statsButtons: Journal.StatsButton[] = [
   }
 ];
 
+interface DispatchersQueryParams {
+  dispatcherName?: string;
+  stationName?: string;
+  stationHash?: string;
+  timestampFrom?: number;
+  timestampTo?: number;
+  countFrom?: number;
+  countLimit?: number;
+  sortBy?: Journal.DispatcherSorter['id'];
+}
+
+const defaultQueryParams: DispatchersQueryParams = {
+  countLimit: 30,
+  sortBy: 'timestampFrom',
+  countFrom: undefined,
+  dispatcherName: undefined,
+  stationHash: undefined,
+  stationName: undefined,
+  timestampFrom: undefined,
+  timestampTo: undefined
+};
+
 export default defineComponent({
   components: {
     JournalOptions,
@@ -83,9 +105,8 @@ export default defineComponent({
   data: () => ({
     statsButtons,
 
-    currentQuery: '',
-    currentQueryArray: [] as string[],
     dataRefreshedAt: null as Date | null,
+    currentQueryParams: {} as DispatchersQueryParams,
 
     scrollDataLoaded: true,
     scrollNoMoreData: false,
@@ -109,9 +130,6 @@ export default defineComponent({
       'search-date': ''
     } as Journal.DispatcherSearchType);
 
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
     provide('sorterActive', sorterActive);
     provide('journalFilterActive', journalFilterActive);
     provide('searchersValues', searchersValues);
@@ -126,19 +144,17 @@ export default defineComponent({
       sorterActive,
       searchersValues,
 
-      countFromIndex,
-      countLimit,
-
-      scrollElement,
-      maxCount: ref(15)
+      scrollElement
     };
   },
 
   watch: {
-    currentQueryArray(q: string[]) {
-      this.currentOptionsActive =
-        q.length > 2 ||
-        q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1] != 'timestampFrom');
+    currentQueryParams(queryParams: DispatchersQueryParams) {
+      this.currentOptionsActive = Object.keys(queryParams).some(
+        (k) =>
+          queryParams[k as keyof DispatchersQueryParams] !=
+          defaultQueryParams[k as keyof DispatchersQueryParams]
+      );
     },
 
     'mainStore.dispatcherStatsData'(stats) {
@@ -234,13 +250,10 @@ export default defineComponent({
 
     async addHistoryData() {
       this.scrollDataLoaded = false;
-
-      this.countFromIndex = this.historyList.length;
+      this.currentQueryParams['countFrom'] = this.historyList.length;
 
       const responseData: API.DispatcherHistory.Response = await (
-        await this.apiStore.client!.get(
-          `api/getDispatchers?${this.currentQuery}&countFrom=${this.countFromIndex}`
-        )
+        await this.apiStore.client!.get(`api/getDispatchers`, { params: this.currentQueryParams })
       ).data;
 
       if (!responseData) return;
@@ -254,43 +267,38 @@ export default defineComponent({
       this.scrollDataLoaded = true;
     },
 
-    async fetchHistoryData(reset = false) {
-      const queries: string[] = [];
+    async fetchHistoryData() {
+      const queryParams: DispatchersQueryParams = {};
 
-      const dispatcher = this.searchersValues['search-dispatcher'].trim();
-      const station = this.searchersValues['search-station'].trim();
-      const dateString = this.searchersValues['search-date'].trim();
+      const dispatcherName = this.searchersValues['search-dispatcher'].trim() || undefined;
+      const stationName = this.searchersValues['search-station'].trim() || undefined;
+      const dateString = this.searchersValues['search-date'].trim() || undefined;
 
       const timestampFrom = dateString
         ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000
         : undefined;
+
       const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
-      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
-      
-      if (station.startsWith("#")) queries.push(`stationHash=${station.slice(1)}`);
-      else if (station.length > 0) queries.push(`stationName=${station}`);
+      queryParams['dispatcherName'] = dispatcherName;
+      queryParams['timestampFrom'] = timestampFrom;
+      queryParams['timestampTo'] = timestampTo;
+      queryParams['countLimit'] = 30;
 
-      if (timestampFrom && timestampTo)
-        queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
+      if (stationName && stationName.startsWith('#'))
+        queryParams['stationHash'] = stationName.slice(1);
+      else queryParams['stationName'] = stationName;
 
-      // API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
-      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
-      else queries.push('sortBy=timestampFrom');
+      queryParams['sortBy'] = this.sorterActive.id;
 
-      queries.push('countLimit=30');
+      if (JSON.stringify(this.currentQueryParams) != JSON.stringify(queryParams))
+        this.dataStatus = Status.Data.Loading;
 
-      if (this.currentQuery != queries.join('&')) this.dataStatus = Status.Data.Loading;
-
-      this.currentQuery = queries.join('&');
-      this.currentQueryArray = queries;
+      this.currentQueryParams = queryParams;
 
       try {
-        if (reset) this.dataStatus = Status.Data.Loading;
-
         const responseData: API.DispatcherHistory.Response = await (
-          await this.apiStore.client!.get(`api/getDispatchers?${this.currentQuery}`)
+          await this.apiStore.client!.get(`api/getDispatchers`, { params: this.currentQueryParams })
         ).data;
 
         if (!responseData) {

src/views/JournalTimetables.vue

@@ -124,8 +124,6 @@ interface TimetablesQueryParams {
   timetableId?: string;
 
   authorName?: string;
-  // timestampFrom?: number;
-  // timestampTo?: number;
 
   dateFrom?: string;
   dateTo?: string;
@@ -335,7 +333,7 @@ export default defineComponent({
 
       const responseData: API.TimetableHistory.Response = await (
         await this.apiStore.client!.get('api/getTimetables', {
-          params: { ...this.currentQueryParams }
+          params: this.currentQueryParams
         })
       ).data;