Wskaźnik aktywnych filtrów dziennika RJ

src/components/JournalView/JournalOptions.vue

@@ -2,9 +2,10 @@
   <div class="filters-options" @keydown.esc="showOptions = false">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--filled btn--image" @click="showOptions = !showOptions" ref="button">
+    <button class="filter-button btn--filled btn--image" @click="showOptions = !showOptions" ref="button">
       <img :src="getIcon('filter2')" alt="Open filters" />
       {{ $t('options.filters') }} [F]
+      <span class="active-indicator" v-if="currentOptionsActive"></span>
     </button>
 
     <datalist id="search-driver">
@@ -116,6 +117,11 @@ export default defineComponent({
       type: Number as PropType<DataStatus>,
       default: DataStatus.Initialized,
     },
+
+    currentOptionsActive: {
+      type: Boolean,
+      default: false
+    }
   },
 
   data() {

src/styles/filters_options.scss

@@ -6,6 +6,15 @@
   margin-bottom: 0.5em;
 }
 
+.filter-button .active-indicator {
+  width: 7px;
+  height: 7px;
+  background-color: lightgreen;
+  border-radius: 50%;
+  
+  margin-left: 10px;
+}
+
 h1.option-title {
   position: relative;
   font-size: 1.1em;

src/views/JournalTimetables.vue

@@ -4,10 +4,11 @@
 
     <div class="journal_wrapper">
       <JournalOptions
-        @on-search-confirm="searchHistory"
+        @on-search-confirm="fetchHistoryData"
         @on-options-reset="resetOptions"
         :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
         :filters="journalTimetableFilters"
+        :currentOptionsActive="currentOptionsActive"
         :data-status="dataStatus"
       />
 
@@ -48,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, provide, reactive, Ref, ref } from 'vue';
+import { defineComponent, provide, reactive, Ref, ref, watch } from 'vue';
 import axios from 'axios';
 
 import DriverStats from '../components/JournalView/JournalDriverStats.vue';
@@ -87,11 +88,14 @@ export default defineComponent({
 
   data: () => ({
     currentQuery: '',
+    currentQueryArray: [] as string[],
+
     scrollDataLoaded: true,
     scrollNoMoreData: false,
 
     showReturnButton: false,
     statsCardOpen: false,
+    currentOptionsActive: false,
 
     timetableHistory: [] as TimetableHistory[],
     journalTimetableFilters,
@@ -131,19 +135,27 @@ export default defineComponent({
       countLimit,
 
       scrollElement,
+
       store: useStore(),
     };
   },
 
+  watch: {
+    currentQueryArray(q: string[]) {
+      this.currentOptionsActive =
+        q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1] != 'timetableId');
+    },
+  },
+
   // Handle route updates for route-links
-  beforeRouteUpdate(to, from) {
+  beforeRouteUpdate(to, _) {
     this.handleQueries(to.query);
-    this.searchHistory();
+    this.fetchHistoryData();
   },
 
   activated() {
     this.handleQueries(this.$route.query);
-    this.searchHistory();
+    this.fetchHistoryData();
   },
 
   methods: {
@@ -174,17 +186,7 @@ export default defineComponent({
       this.journalFilterActive = this.journalTimetableFilters[0];
       this.sorterActive.id = 'timetableId';
 
-      this.searchHistory();
-    },
-
-    searchHistory() {
-      this.fetchHistoryData({
-        searchers: this.searchersValues,
-        filter: this.journalFilterActive,
-      });
-
-      this.scrollNoMoreData = false;
-      this.scrollDataLoaded = true;
+      this.fetchHistoryData();
     },
 
     async addHistoryData() {
@@ -207,21 +209,16 @@ export default defineComponent({
       this.scrollDataLoaded = true;
     },
 
-    async fetchHistoryData(
-      props: {
-        searchers?: JournalTimetableSearchType;
-        filter?: JournalTimetableFilter;
-      } = {}
-    ) {
+    async fetchHistoryData() {
       this.dataStatus = DataStatus.Loading;
 
       const queries: string[] = [];
 
-      const driverName = props.searchers?.['search-driver'].trim();
-      const trainNo = props.searchers?.['search-train'].trim();
-      const authorName = props.searchers?.['search-dispatcher'].trim();
+      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 dateString = props.searchers?.['search-date'].trim();
       const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
       const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
@@ -239,7 +236,7 @@ export default defineComponent({
 
       queries.push('countLimit=15');
 
-      switch (props.filter?.id) {
+      switch (this.journalFilterActive.id) {
         case JournalFilterType.abandoned:
           queries.push('fulfilled=0', 'terminated=1');
           break;
@@ -257,6 +254,7 @@ export default defineComponent({
       }
 
       this.currentQuery = queries.join('&');
+      this.currentQueryArray = queries;
 
       try {
         const responseData: TimetableHistory[] = await (
@@ -285,6 +283,9 @@ export default defineComponent({
         this.dataStatus = DataStatus.Error;
         this.dataErrorMessage = 'Ups! Coś poszło nie tak!';
       }
+
+      this.scrollNoMoreData = false;
+      this.scrollDataLoaded = true;
     },
   },
 });