diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue index 470a1ac..aa7988e 100644 --- a/src/components/JournalView/JournalOptions.vue +++ b/src/components/JournalView/JournalOptions.vue @@ -103,6 +103,7 @@ import { useStore } from '../../store/store'; import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes'; import ActionButton from '../Global/ActionButton.vue'; import SelectBox from '../Global/SelectBox.vue'; +import { JournalFilterSection } from '../../scripts/enums/JournalFilterType'; export default defineComponent({ components: { SelectBox, ActionButton }, @@ -139,6 +140,7 @@ export default defineComponent({ data() { return { showOptions: false, + JournalFilterSection, driverSuggestions: [] as string[], dispatcherSuggestions: [] as string[], diff --git a/src/constants/Journal/JournalTimetablesConsts.ts b/src/constants/Journal/JournalTimetablesConsts.ts index d969b7f..45dea71 100644 --- a/src/constants/Journal/JournalTimetablesConsts.ts +++ b/src/constants/Journal/JournalTimetablesConsts.ts @@ -1,28 +1,28 @@ -import { JournalFilterType } from "../../scripts/enums/JournalFilterType"; -import { JournalTimetableFilter } from "../../types/Journal/JournalTimetablesTypes"; +import { JournalFilterSection, JournalFilterType } from '../../scripts/enums/JournalFilterType'; +import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes'; export const journalTimetableFilters: JournalTimetableFilter[] = [ { - id: JournalFilterType.all, - filterSection: 'timetable-status', + id: JournalFilterType.ALL, + filterSection: JournalFilterSection.TIMETABLE_STATUS, isActive: true, }, { - id: JournalFilterType.active, - filterSection: 'timetable-status', + id: JournalFilterType.ACTIVE, + filterSection: JournalFilterSection.TIMETABLE_STATUS, isActive: false, }, { - id: JournalFilterType.fulfilled, - filterSection: 'timetable-status', + id: JournalFilterType.FULFILLED, + filterSection: JournalFilterSection.TIMETABLE_STATUS, isActive: false, }, { - id: JournalFilterType.abandoned, - filterSection: 'timetable-status', + id: JournalFilterType.ABANDONED, + filterSection: JournalFilterSection.TIMETABLE_STATUS, isActive: false, }, ]; diff --git a/src/scripts/enums/JournalFilterType.ts b/src/scripts/enums/JournalFilterType.ts index e47ea45..72a8512 100644 --- a/src/scripts/enums/JournalFilterType.ts +++ b/src/scripts/enums/JournalFilterType.ts @@ -1,6 +1,14 @@ -export const enum JournalFilterType { - active = "active", - fulfilled = "fulfilled", - abandoned = "abandoned", - all = "all" -} +export const enum JournalFilterType { + ACTIVE = 'active', + FULFILLED = 'fulfilled', + ABANDONED = 'abandoned', + ALL = 'all', + TWR = 'twr', + SKR = 'skr', +} + +export enum JournalFilterSection { + TIMETABLE_STATUS = 'timetable-status', + TWR = 'twr', + SKR = 'skr', +} diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss index dc28240..a9dc50c 100644 --- a/src/styles/filters_options.scss +++ b/src/styles/filters_options.scss @@ -16,7 +16,7 @@ height: 7px; background-color: lightgreen; border-radius: 50%; - + margin-left: 10px; } diff --git a/src/types/Journal/JournalTimetablesTypes.ts b/src/types/Journal/JournalTimetablesTypes.ts index d8d8864..bc08c9f 100644 --- a/src/types/Journal/JournalTimetablesTypes.ts +++ b/src/types/Journal/JournalTimetablesTypes.ts @@ -1,6 +1,11 @@ -import { JournalFilterType } from '../../scripts/enums/JournalFilterType'; +import { JournalFilterSection, JournalFilterType } from '../../scripts/enums/JournalFilterType'; -export type JournalTimetableSearchKey = 'search-driver' | 'search-train' | 'search-date' | 'search-dispatcher' | 'search-issuedFrom'; +export type JournalTimetableSearchKey = + | 'search-driver' + | 'search-train' + | 'search-date' + | 'search-dispatcher' + | 'search-issuedFrom'; export type JournalTimetableSearchType = { [key in JournalTimetableSearchKey]: string; @@ -8,7 +13,7 @@ export type JournalTimetableSearchType = { export interface JournalTimetableFilter { id: JournalFilterType; - filterSection: string; + filterSection: JournalFilterSection; isActive: boolean; } diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue index 9401528..12da0b5 100644 --- a/src/views/JournalTimetables.vue +++ b/src/views/JournalTimetables.vue @@ -58,23 +58,26 @@ import { defineComponent, provide, reactive, Ref, ref } from 'vue'; import axios from 'axios'; -import DriverStats from '../components/JournalView/JournalDriverStats.vue'; -import Loading from '../components/Global/Loading.vue'; -import { JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes'; +import imageMixin from '../mixins/imageMixin'; import dateMixin from '../mixins/dateMixin'; import routerMixin from '../mixins/routerMixin'; +import modalTrainMixin from '../mixins/modalTrainMixin'; + +import DriverStats from '../components/JournalView/JournalDriverStats.vue'; +import JournalOptions from '../components/JournalView/JournalOptions.vue'; +import JournalStats from '../components/JournalView/JournalStats.vue'; +import JournalHeader from '../components/JournalView/JournalHeader.vue'; +import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue'; +import Loading from '../components/Global/Loading.vue'; + +import { JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes'; import { DataStatus } from '../scripts/enums/DataStatus'; import { TimetableHistory } from '../scripts/interfaces/api/TimetablesAPIData'; import { URLs } from '../scripts/utils/apiURLs'; import { useStore } from '../store/store'; -import JournalOptions from '../components/JournalView/JournalOptions.vue'; import { JournalTimetableSearchType } from '../types/Journal/JournalTimetablesTypes'; -import modalTrainMixin from '../mixins/modalTrainMixin'; -import imageMixin from '../mixins/imageMixin'; -import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue'; import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts'; -import JournalStats from '../components/JournalView/JournalStats.vue'; -import JournalHeader from '../components/JournalView/JournalHeader.vue'; + import { LocationQuery } from 'vue-router'; import { TimetablesQueryParams } from '../scripts/interfaces/api/TimetablesQueryParams'; import { JournalFilterType } from '../scripts/enums/JournalFilterType'; @@ -148,8 +151,8 @@ export default defineComponent({ }, watch: { - currentQueryArray(q: string[]) { - this.currentOptionsActive = q.length >= 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]); + currentQueryParams(q: TimetablesQueryParams) { + this.currentOptionsActive = Object.values(q).some((v) => v !== undefined); }, }, @@ -181,15 +184,16 @@ export default defineComponent({ if ('timetableId' in query) this.searchersValues['search-train'] = `#${query.timetableId}`; }, - setSearchers(date: string, driver: string, train: string, dispatcher: string) { + setSearchers(date: string, driver: string, train: string, dispatcher: string, issuedFrom: string) { this.searchersValues['search-date'] = date; this.searchersValues['search-driver'] = driver; this.searchersValues['search-train'] = train; this.searchersValues['search-dispatcher'] = dispatcher; + this.searchersValues['search-issuedFrom'] = issuedFrom; }, resetOptions() { - this.setSearchers('', '', '', ''); + this.setSearchers('', '', '', '', ''); this.journalFilterActive = this.journalTimetableFilters[0]; this.sorterActive.id = 'timetableId'; @@ -229,37 +233,47 @@ export default defineComponent({ const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined; const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined; + const queryParams: TimetablesQueryParams = {}; + switch (this.journalFilterActive.id) { - case JournalFilterType.abandoned: - this.currentQueryParams['fulfilled'] = 0; - this.currentQueryParams['terminated'] = 1; + case JournalFilterType.ABANDONED: + queryParams['fulfilled'] = 0; + queryParams['terminated'] = 1; break; - case JournalFilterType.active: - this.currentQueryParams['terminated'] = 0; + case JournalFilterType.ACTIVE: + queryParams['fulfilled'] = undefined; + queryParams['terminated'] = 0; break; - case JournalFilterType.fulfilled: - this.currentQueryParams['fulfilled'] = 1; + case JournalFilterType.FULFILLED: + queryParams['terminated'] = undefined; + queryParams['fulfilled'] = 1; + break; + case JournalFilterType.ALL: + queryParams['terminated'] = undefined; + queryParams['fulfilled'] = undefined; break; default: break; } - this.currentQueryParams['driverName'] = driverName; - this.currentQueryParams['trainNo'] = trainNo; + queryParams['driverName'] = driverName; + queryParams['trainNo'] = trainNo; - this.currentQueryParams['countFrom'] = undefined; - this.currentQueryParams['countLimit'] = undefined; + queryParams['countFrom'] = undefined; + queryParams['countLimit'] = undefined; - this.currentQueryParams['authorName'] = authorName; - this.currentQueryParams['timestampFrom'] = timestampFrom; - this.currentQueryParams['timestampTo'] = timestampTo; - this.currentQueryParams['issuedFrom'] = issuedFrom; - this.currentQueryParams['sortBy'] = this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined; + queryParams['authorName'] = authorName; + queryParams['timestampFrom'] = timestampFrom; + queryParams['timestampTo'] = timestampTo; + queryParams['issuedFrom'] = issuedFrom; + queryParams['sortBy'] = this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined; - this.dataStatus = DataStatus.Loading; + if (JSON.stringify(this.currentQueryParams) != JSON.stringify(queryParams)) this.dataStatus = DataStatus.Loading; + + this.currentQueryParams = queryParams; try { const responseData: TimetableHistory[] = await (