Dodano sugestie wyszukiwania istniejących użytkowników w dziennikach

src/components/JournalView/JournalOptions.vue

@@ -7,6 +7,14 @@
       {{ $t('options.filters') }} [F]
     </button>
 
+    <datalist id="search-driver">
+      <option v-for="sugg in driverSuggestions" :value="sugg"></option>
+    </datalist>
+
+    <datalist id="search-dispatcher">
+      <option v-for="sugg in dispatcherSuggestions" :value="sugg"></option>
+    </datalist>
+
     <transition name="options-anim">
       <div class="options_wrapper" v-if="showOptions">
         <div class="options_content">
@@ -17,23 +25,15 @@
 
               <div class="search-box">
                 <input
-                  v-if="propName == 'search-date'"
                   class="search-input"
-                  id="date"
-                  type="date"
-                  min="2022-02-01"
-                  @keydown.enter="onSearchConfirm"
                   v-model="searchersValues[propName]"
-                />
-
-                <input
-                  v-else
-                  class="search-input"
                   @keydown.enter="onSearchConfirm"
                   @focus="preventKeyDown = true"
                   @blur="preventKeyDown = false"
                   :placeholder="$t(`options.${propName}`)"
-                  v-model="searchersValues[propName]"
+                  :type="propName == 'search-date' ? 'date' : 'text'"
+                  :min="propName == 'search-date' ? '2022-02-01' : undefined"
+                  :list="propName.toString()"
                 />
 
                 <button class="search-exit">
@@ -84,10 +84,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, Prop, PropType } from 'vue';
+import axios from 'axios';
+import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
 import keyMixin from '../../mixins/keyMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
+import { URLs } from '../../scripts/utils/apiURLs';
 import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
@@ -117,6 +119,12 @@ export default defineComponent({
   data() {
     return {
       showOptions: false,
+
+      driverSuggestions: [] as string[],
+      dispatcherSuggestions: [] as string[],
+
+      searchTimeout: 0,
+
       DataStatus,
     };
   },
@@ -138,6 +146,51 @@ export default defineComponent({
     },
   },
 
+  watch: {
+    async 'searchersValues.search-driver'(value: string | undefined) {
+      clearTimeout(this.searchTimeout);
+
+      if (!value || value == '') return;
+      if (value.length < 3) return;
+
+      this.searchTimeout = setTimeout(async () => {
+        try {
+          const driverSuggestions: string[] = await (
+            await axios.get(`${URLs.stacjownikAPI}/api/getDriverSuggestions?name=${value}`)
+          ).data;
+
+          this.driverSuggestions = driverSuggestions;
+        } catch (error) {
+          this.driverSuggestions = [];
+        }
+      }, 1500);
+
+      // this.loadingDriverSuggestions = true;
+
+      // this.loadingDriverSuggestions = false;
+      // this.nextSearchTimestamp = Date.now() + 100;
+    },
+
+    async 'searchersValues.search-dispatcher'(value: string | undefined) {
+      clearTimeout(this.searchTimeout);
+
+      if (!value || value == '') return;
+      if (value.length < 3) return;
+
+      this.searchTimeout = setTimeout(async () => {
+        try {
+          const dispatcherSuggestions: string[] = await (
+            await axios.get(`${URLs.stacjownikAPI}/api/getDispatcherSuggestions?name=${value}`)
+          ).data;
+
+          this.dispatcherSuggestions = dispatcherSuggestions;
+        } catch (error) {
+          this.dispatcherSuggestions = [];
+        }
+      }, 1500);
+    },
+  },
+
   methods: {
     // Override keyMixin function
     onKeyDownFunction() {

src/components/JournalView/JournalTimetables.vue

@@ -1,15 +1,14 @@
 <template>
   <section class="journal-timetables">
-    
     <div class="journal_wrapper">
       <JournalOptions
-      @on-search-confirm="searchHistory"
-      @on-options-reset="resetOptions"
-      :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
-      :filters="journalTimetableFilters"
-      :data-status="dataStatus"
+        @on-search-confirm="searchHistory"
+        @on-options-reset="resetOptions"
+        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
+        :filters="journalTimetableFilters"
+        :data-status="dataStatus"
       />
-      
+
       <DriverStats />
       <!-- <button @click="statsCardOpen = true">Stats</button> -->
 
@@ -106,7 +105,7 @@ export default defineComponent({
     const searchersValues = reactive({
       'search-train': '',
       'search-driver': '',
-      'search-author': '',
+      'search-dispatcher': '',
       'search-date': '',
     } as JorunalTimetableSearchType);
 
@@ -158,7 +157,7 @@ export default defineComponent({
       this.searchersValues['search-date'] = '';
       this.searchersValues['search-driver'] = '';
       this.searchersValues['search-train'] = '';
-      this.searchersValues['search-author'] = '';
+      this.searchersValues['search-dispatcher'] = '';
 
       this.journalFilterActive = this.journalTimetableFilters[0];
       this.sorterActive.id = 'timetableId';
@@ -208,7 +207,7 @@ export default defineComponent({
 
       const driverName = props.searchers?.['search-driver'].trim();
       const trainNo = props.searchers?.['search-train'].trim();
-      const authorName = props.searchers?.['search-author'].trim();
+      const authorName = props.searchers?.['search-dispatcher'].trim();
 
       const dateString = props.searchers?.['search-date'].trim();
       const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;