Cleanup kodu

src/components/JournalView/JournalDispatchers.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
+import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
 import ActionButton from '../../components/Global/ActionButton.vue';
@@ -51,8 +51,9 @@ import { URLs } from '../../scripts/utils/apiURLs';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
 import JournalDispatchersList from './JournalDispatchersList.vue';
-import { JournalDispatcherSearcher } from '../../types/JournalDispatcherTypes';
+import { JournalDispatcherSearcher } from '../../types/Journal/JournalDispatcherTypes';
 import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
+import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
 
 const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
 

src/components/JournalView/JournalOptions.vue

@@ -34,27 +34,44 @@
           </div>
 
           <h1>{{ $t('options.search-title') }}</h1>
-          <div class="content_search">
+          <div class="search_content">
             <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
-              <label v-if="propName == 'search-date'">{{ $t('options.search-date') }}</label>
+              <label v-if="propName == 'search-date'" for="date">{{ $t('options.search-date') }}</label>
 
               <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"
-                  :type="propName == 'search-date' ? 'date' : 'input'"
                   @keydown.enter="onSearchConfirm"
                   :placeholder="$t(`options.${propName}`)"
                   v-model="searchersValues[propName]"
                 />
+
                 <button class="search-exit">
                   <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
                 </button>
               </div>
             </div>
 
-            <action-button class="search-button" @click="onSearchConfirm">
-              {{ $t('options.search-button') }}
-            </action-button>
+            <div class="search_actions">
+              <action-button class="search-button" @click="onSearchConfirm">
+                {{ $t('options.search-button') }}
+              </action-button>
+
+              <action-button class="search-button" @click="onResetButtonClick">
+                {{ $t('options.reset-button') }}
+              </action-button>
+            </div>
           </div>
         </div>
       </div>
@@ -63,14 +80,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, JournalFilter, PropType } from 'vue';
+import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
+import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
   components: { SelectBox, ActionButton },
-  emits: ['onSearchConfirm'],
+  emits: ['onSearchConfirm', 'onOptionsReset'],
   mixins: [imageMixin],
 
   props: {
@@ -128,6 +146,10 @@ export default defineComponent({
     onSearchConfirm() {
       this.$emit('onSearchConfirm');
     },
+
+    onResetButtonClick() {
+      this.$emit('onOptionsReset');
+    },
   },
 });
 </script>
@@ -218,16 +240,6 @@ h1 {
   padding: 0.25em 0.25em 0 0;
 }
 
-.content_search > div {
-  margin: 0.5em auto;
-}
-
-.content_search > button {
-  display: flex;
-  justify-content: center;
-  margin: 0 auto;
-}
-
 .options_filters {
   display: flex;
   flex-wrap: wrap;
@@ -258,6 +270,24 @@ h1 {
   }
 }
 
+.search_content > div {
+  margin: 0.5em auto;
+}
+
+.search_content > button {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.search_actions {
+  display: flex;
+
+  button {
+    margin: 0.25em 0.5em;
+  }
+}
+
 @include smallScreen() {
   h1 {
     text-align: center;
@@ -309,4 +339,4 @@ h1 {
   //   }
   // }
 }
-</style>
+</style>

src/components/JournalView/JournalTimetables.vue

@@ -7,6 +7,7 @@
     <div class="journal_wrapper">
       <JournalOptions
         @on-search-confirm="searchHistory"
+        @on-options-reset="resetOptions"
         :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
         :filters="journalTimetableFilters"
       />
@@ -46,12 +47,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
+import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
 import DriverStats from './DriverStats.vue';
 import Loading from '../Global/Loading.vue';
-import { journalTimetableFilters } from '../../data/journalFilters';
+import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
@@ -60,10 +61,11 @@ import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData
 import { URLs } from '../../scripts/utils/apiURLs';
 import { useStore } from '../../store/store';
 import JournalOptions from './JournalOptions.vue';
-import { JournalTimetableSearcher } from '../../types/JournalTimetablesTypes';
+import { JournalTimetableSearcher } from '../../types/Journal/JournalTimetablesTypes';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import imageMixin from '../../mixins/imageMixin';
 import JournalTimetablesList from './JournalTimetablesList.vue';
+import { journalTimetableFilters } from '../../constants/Journal/JournalTimetablesConsts';
 
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
 
@@ -150,6 +152,12 @@ export default defineComponent({
       if (scrollTop > elementHeight * 0.85) this.addHistoryData();
     },
 
+    resetOptions() {
+      Object.values(this.searchersValues).map((_) => '');
+      this.journalFilterActive = this.journalTimetableFilters[0];
+      this.sorterActive.id = 'timetableId';
+    },
+
     searchHistory() {
       this.fetchHistoryData({
         searchers: this.searchersValues,

src/components/TrainsView/TrainOptions.vue

@@ -59,7 +59,7 @@
 <script lang="ts">
 import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
-import { TrainFilter } from '../../types/TrainOptionsTypes';
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 

src/constants/Journal/JournalTimetablesConsts.ts

@@ -0,0 +1,28 @@
+import { JournalFilterType } from "../../scripts/enums/JournalFilterType";
+import { JournalFilter } from "../../types/Journal/JournalTimetablesTypes";
+
+export const journalTimetableFilters: JournalFilter[] = [
+  {
+    id: JournalFilterType.all,
+    filterSection: 'timetable-status',
+    isActive: true,
+  },
+
+  {
+    id: JournalFilterType.active,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+
+  {
+    id: JournalFilterType.fulfilled,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+
+  {
+    id: JournalFilterType.abandoned,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+];

src/constants/Trains/TrainOptionsConsts.ts

@@ -1,5 +1,5 @@
-import { TrainFilterType } from "../scripts/enums/TrainFilterType";
-import { TrainFilter } from "../types/TrainOptionsTypes";
+import { TrainFilterType } from '../../scripts/enums/TrainFilterType';
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
 
 export const trainFilters: TrainFilter[] = [
   {
@@ -56,5 +56,5 @@ export const sorterOptions = [
   {
     id: 'length',
     value: 'długość',
-  }
-];
+  },
+];

src/data/journalFilters.ts

@@ -1,30 +0,0 @@
-import { JournalFilter } from "vue";
-import { JournalFilterType } from "../scripts/enums/JournalFilterType";
-
-export const journalTimetableFilters: JournalFilter[] = [
-    {
-        id: JournalFilterType.all,
-        filterSection: "timetable-status",
-        isActive: true
-    },
-
-    {
-        id: JournalFilterType.active,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-
-    {
-        id: JournalFilterType.fulfilled,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-
-    {
-        id: JournalFilterType.abandoned,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-]
-
-export const journalDispatcherFilters: JournalFilter[] = []

src/locales/en.json

@@ -75,6 +75,7 @@
     "donate": "DONATE",
 
     "search-button": "Search",
+    "reset-button": "Reset",
 
     "sort-title": "SORT BY:",
     "filter-title": "FILTER BY:",

src/locales/pl.json

@@ -77,7 +77,8 @@
     "donate": "WESPRZYJ",
 
     "search-button": "Szukaj",
-
+    "reset-button": "Zresetuj",
+    
     "sort-title": "SORTUJ WG:",
     "filter-title": "FILTRUJ WG:",
     "search-title": "SZUKAJ:",

src/scripts/managers/trainFilterManager.ts

@@ -1,4 +1,4 @@
-import { TrainFilter } from "../../types/TrainOptionsTypes";
+import { TrainFilter } from "../../types/Trains/TrainOptionsTypes";
 import { TrainFilterType } from "../enums/TrainFilterType";
 import Train from "../interfaces/Train";
 import TrainStop from "../interfaces/TrainStop";

src/types/Journal/JournalTimetablesTypes.ts

@@ -0,0 +1,11 @@
+import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
+
+export type JournalTimetableSearcher = {
+  [key in 'search-driver' | 'search-train' | 'search-date']: string;
+};
+
+export interface JournalFilter {
+  id: JournalFilterType;
+  filterSection: string;
+  isActive: boolean;
+}

src/types/JournalTimetablesTypes.ts

@@ -1,3 +0,0 @@
-export type JournalTimetableSearcher = {
-  [key in 'search-driver' | 'search-train' | 'search-date']: string;
-};

src/types/Trains/TrainOptionsTypes.ts

@@ -1,4 +1,4 @@
-import { TrainFilterType } from "../scripts/enums/TrainFilterType";
+import { TrainFilterType } from "../../scripts/enums/TrainFilterType";
 
 export interface TrainFilter {
   id: TrainFilterType;

src/views/TrainsView.vue

@@ -15,11 +15,11 @@ import { computed, ComputedRef, defineComponent, provide, reactive, ref } from '
 import TrainOptions from '../components/TrainsView/TrainOptions.vue';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
-import { trainFilters } from '../data/trainOptions';
+import { trainFilters } from '../constants/Trains/TrainOptionsConsts';
 import Train from '../scripts/interfaces/Train';
 import { filteredTrainList } from '../scripts/managers/trainFilterManager';
 import { useStore } from '../store/store';
-import { TrainFilter } from '../types/TrainOptionsTypes';
+import { TrainFilter } from '../types/Trains/TrainOptionsTypes';
 
 export default defineComponent({
   components: {

src/vuex.d.ts

@@ -1,26 +0,0 @@
-import { ComponentCustomProperties } from 'vue'
-import { Store } from 'vuex'
-import { JournalFilterType } from './scripts/enums/JournalFilterType';
-import { TrainFilterType } from './scripts/enums/TrainFilterType';
-
-declare module '@vue/runtime-core' {
-  // declare your own store states
-  interface State {
-    count: number
-  }
-
-  // provide typings for `this.$store`
-  interface ComponentCustomProperties {
-    $store: Store<State>
-  }
-
-  
-
-  interface JournalFilter {
-    id: JournalFilterType;
-    filterSection: string;
-    isActive: boolean;
-  }
-
-
-}