filtry URL dziennika DR

src/components/JournalView/JournalDispatchersList.vue

@@ -33,7 +33,7 @@
                 <tr v-for="historyItem in dispatcherHistory" :key="historyItem.id">
                   <td>
                     <router-link
-                      :to="`/journal/dispatchers?sceneryName=${historyItem.stationName}`"
+                      :to="`/journal/dispatchers?search-station=${historyItem.stationName}`"
                     >
                       <b>{{ historyItem.stationName }}</b>
                     </router-link>
@@ -41,7 +41,7 @@
                   <td>#{{ historyItem.stationHash }}</td>
                   <td>
                     <router-link
-                      :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`"
+                      :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
                     >
                       <b
                         v-if="isDonator(historyItem.dispatcherName)"
@@ -167,8 +167,6 @@ export default defineComponent({
 
   computed: {
     computedDispatcherHistory() {
-      console.log(this.dispatcherHistory.length);
-
       return this.dispatcherHistory.reduce(
         (acc, historyItem, i) => {
           if (this.isAnotherDay(i - 1, i))

src/components/JournalView/JournalOptions.vue

@@ -41,7 +41,7 @@
                 <input
                   class="search-input"
                   v-model="searchersValues[propName]"
-                  @keydown.enter="onSearchConfirm"
+                  @keydown.enter="searchConfirm"
                   @focus="preventKeyDown = true"
                   @blur="preventKeyDown = false"
                   :placeholder="$t(`options.${propName}`)"
@@ -199,6 +199,36 @@ export default defineComponent({
   },
 
   methods: {
+    // filters & sorters from URL params
+    handleRouteParams() {
+      this.$router.push({
+        query: {
+          ...this.$route.query,
+          'sorter-active':
+            this.sorterOptionIds.indexOf(`${this.sorterActive.id}`) != 0
+              ? 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 }
+          )
+        }
+      });
+    },
+
     refreshData() {
       this.$emit('onRefreshData');
     },
@@ -233,7 +263,7 @@ export default defineComponent({
     onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
     },
 
     onFilterChange(filter: Journal.TimetableFilter) {
@@ -243,25 +273,27 @@ export default defineComponent({
         .forEach((f) => (f.isActive = false));
       filter.isActive = true;
 
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
     },
 
     onInputClear(id: any) {
       this.searchersValues[id] = '';
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
     },
 
-    onSearchConfirm() {
+    searchConfirm() {
       this.$emit('onSearchConfirm');
+      this.handleRouteParams();
     },
 
     onSearchButtonConfirm() {
       this.showOptions = false;
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
     },
 
     onResetButtonClick() {
       this.$emit('onOptionsReset');
+      this.handleRouteParams();
     }
   }
 });

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -19,7 +19,9 @@
         <tr v-for="historyItem in historyList" :key="historyItem.id">
           <td>#{{ historyItem.stationHash }}</td>
           <td>
-            <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
+            <router-link
+              :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
+            >
               <b>{{ historyItem.dispatcherName }}</b>
             </router-link>
           </td>