From a81cc4559bc87a77fa5d89ff938f29ad27a00ecb Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 10 Sep 2022 22:49:56 +0200
Subject: [PATCH] =?UTF-8?q?Poprawki=20w=20filtrach=20i=20ustawieniach=20dz?=
 =?UTF-8?q?iennik=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchers.vue        | 76 ++++++++++++-------
 src/components/JournalView/JournalOptions.vue | 45 ++++++++---
 .../JournalView/JournalTimetables.vue         | 15 ++--
 .../Journal/JournalTimetablesConsts.ts        |  4 +-
 src/styles/JournalSection.scss                |  7 ++
 src/types/Journal/JournalDispatcherTypes.ts   |  5 ++
 src/types/Journal/JournalTimetablesTypes.ts   |  4 +-
 7 files changed, 107 insertions(+), 49 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchers.vue b/src/components/JournalView/JournalDispatchers.vue
index c4e0977..14d0fb4 100644
--- a/src/components/JournalView/JournalDispatchers.vue
+++ b/src/components/JournalView/JournalDispatchers.vue
@@ -1,37 +1,49 @@
 <template>
   <section class="journal-timetables">
     <div class="journal_wrapper">
-      <JournalOptions @on-search-confirm="searchHistory" :sorter-option-ids="['timestampFrom', 'duration']" />
+      <JournalOptions
+        @on-search-confirm="searchHistory"
+        @on-options-reset="resetOptions"
+        :sorter-option-ids="['timestampFrom', 'duration']"
+        :data-status="dataStatus"
+      />
 
       <div class="list_wrapper" @scroll="handleScroll">
-        <transition name="warning" mode="out-in">
-          <div :key="dataStatus">
-            <Loading v-if="dataStatus == (DataStatus.Loading || DataStatus.Initialized)" />
+        <!-- <transition name="warning" mode="out-in"> -->
+        <!-- <div :key="dataStatus"> -->
+        <Loading
+          v-if="dataStatus == DataStatus.Initialized || (dataStatus == DataStatus.Loading && historyList.length == 0)"
+        />
 
-            <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
-              {{ $t('app.error') }}
-            </div>
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
+        </div>
 
-            <div class="journal_warning" v-else-if="historyList.length == 0">
-              {{ $t('app.no-result') }}
-            </div>
+        <div class="journal_warning" v-else-if="historyList.length == 0 && dataStatus != DataStatus.Loading">
+          {{ $t('app.no-result') }}
+        </div>
 
-            <div v-else>
-              <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
+        <div v-else>
+          <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
 
-              <button
-                class="btn btn--option btn--load-data"
-                v-if="!scrollNoMoreData && scrollDataLoaded"
-                @click="addHistoryData"
-              >
-                {{ $t('journal.load-data') }}
-              </button>
-            </div>
-          </div>
-        </transition>
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && computedHistoryList.length > 15"
+            @click="addHistoryData"
+          >
+            {{ $t('journal.load-data') }}
+          </button>
+        </div>
+        <!-- </div>
+        </transition> -->
 
-        <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
-        <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
+        <div class="journal_warning" v-if="scrollNoMoreData">
+          {{ $t('journal.no-further-data') }}
+        </div>
+
+        <div class="journal_warning" v-else-if="!scrollDataLoaded">
+          {{ $t('journal.loading-further-data') }}
+        </div>
       </div>
     </div>
   </section>
@@ -51,9 +63,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/Journal/JournalDispatcherTypes';
+import { JournalDispatcherSearcher, JournalDispatcherSorter } from '../../types/Journal/JournalDispatcherTypes';
 import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
-import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
+import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
 
 const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
 
@@ -88,7 +100,7 @@ export default defineComponent({
   }),
 
   setup() {
-    const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
+    const sorterActive: JournalDispatcherSorter = reactive({ id: 'timestampFrom', dir: -1 });
     const journalFilterActive = ref({});
 
     const searchersValues = reactive({
@@ -152,6 +164,14 @@ export default defineComponent({
       if (scrollTop > elementHeight * 0.85) this.addHistoryData();
     },
 
+    resetOptions() {
+      this.searchersValues['search-station'] = '';
+      this.searchersValues['search-dispatcher'] = '';
+      this.sorterActive.id = 'timestampFrom';
+
+      this.searchHistory();
+    },
+
     searchHistory() {
       this.fetchHistoryData({
         searchers: this.searchersValues,
@@ -184,7 +204,7 @@ export default defineComponent({
     async fetchHistoryData(
       props: {
         searchers?: JournalDispatcherSearcher;
-        filter?: JournalFilter;
+        filter?: JournalTimetableFilter;
       } = {}
     ) {
       this.dataStatus = DataStatus.Loading;
diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 55da968..a02ce28 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -64,25 +64,31 @@
             </div>
 
             <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>
+
+              <action-button class="search-button" @click="onSearchConfirm">
+                {{ $t('options.search-button') }}
+              </action-button>
             </div>
           </div>
         </div>
+
+        <div class="data-status">
+          <span v-if="dataStatus == DataStatus.Loading"> Pobieranie danych...</span>
+          <span v-if="dataStatus == DataStatus.Loaded"> Pobrano dane </span>
+        </div>
       </div>
     </transition>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, PropType } from 'vue';
+import { defineComponent, inject, Prop, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
-import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 
@@ -98,14 +104,20 @@ export default defineComponent({
     },
 
     filters: {
-      type: Array as PropType<JournalFilter[]>,
+      type: Array as PropType<JournalTimetableFilter[]>,
       default: [],
     },
+
+    dataStatus: {
+      type: Number as PropType<DataStatus>,
+      default: DataStatus.Initialized,
+    },
   },
 
   data() {
     return {
       showOptions: false,
+      DataStatus,
     };
   },
 
@@ -113,7 +125,7 @@ export default defineComponent({
     return {
       searchersValues: inject('searchersValues') as { [key: string]: string },
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      journalFilterActive: inject('journalFilterActive') as JournalFilter,
+      journalFilterActive: inject('journalFilterActive') as JournalTimetableFilter,
     };
   },
 
@@ -133,7 +145,7 @@ export default defineComponent({
       this.$emit('onSearchConfirm');
     },
 
-    onFilterChange(filter: JournalFilter) {
+    onFilterChange(filter: JournalTimetableFilter) {
       this.journalFilterActive = filter;
       this.$emit('onSearchConfirm');
     },
@@ -255,7 +267,7 @@ h1 {
   }
 }
 
-.search_content > div {
+.search_content > .search {
   margin: 0.5em auto;
 }
 
@@ -265,14 +277,23 @@ h1 {
   margin: 0 auto;
 }
 
-.search_actions {
+.search_content > .search_actions {
   display: flex;
+  margin: 1em 0 0.5em 0;
 
   button {
     margin: 0.25em 0.5em;
   }
 }
 
+.data-status {
+  display: flex;
+  justify-content: center;
+  font-size: 1.1em;
+
+  height: 1.5em;
+}
+
 @include smallScreen() {
   h1 {
     text-align: center;
@@ -302,4 +323,4 @@ h1 {
     justify-content: center;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index b530a96..40557fd 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/src/components/JournalView/JournalTimetables.vue
@@ -10,18 +10,23 @@
         @on-options-reset="resetOptions"
         :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
         :filters="journalTimetableFilters"
+        :data-status="dataStatus"
       />
 
       <div class="list_wrapper" @scroll="handleScroll">
         <!-- <transition name="warning" mode="out-in"> -->
         <!-- <div :key="dataStatus"> -->
-        <Loading v-if="dataStatus == DataStatus.Loading || dataStatus == DataStatus.Initialized" />
+        <Loading
+          v-if="
+            dataStatus == DataStatus.Initialized || (dataStatus == DataStatus.Loading && timetableHistory.length == 0)
+          "
+        />
 
         <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
           {{ $t('app.error') }}
         </div>
 
-        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
+        <div v-else-if="timetableHistory.length == 0 && dataStatus != DataStatus.Loading" class="journal_warning">
           {{ $t('app.no-result') }}
         </div>
 
@@ -52,7 +57,7 @@ import axios from 'axios';
 
 import DriverStats from './DriverStats.vue';
 import Loading from '../Global/Loading.vue';
-import { JournalFilter, JournalSorter } from '../../types/Journal/JournalTimetablesTypes';
+import { JournalTimetableFilter, JournalTimetableSorter } from '../../types/Journal/JournalTimetablesTypes';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
@@ -99,7 +104,7 @@ export default defineComponent({
   }),
 
   setup() {
-    const sorterActive: JournalSorter = reactive({ id: 'timetableId', dir: 1 });
+    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
     const journalFilterActive = ref(journalTimetableFilters[0]);
 
     const searchersValues = reactive({
@@ -196,7 +201,7 @@ export default defineComponent({
     async fetchHistoryData(
       props: {
         searchers?: JorunalTimetableSearchType;
-        filter?: JournalFilter;
+        filter?: JournalTimetableFilter;
       } = {}
     ) {
       this.dataStatus = DataStatus.Loading;
diff --git a/src/constants/Journal/JournalTimetablesConsts.ts b/src/constants/Journal/JournalTimetablesConsts.ts
index 1d5702b..d969b7f 100644
--- a/src/constants/Journal/JournalTimetablesConsts.ts
+++ b/src/constants/Journal/JournalTimetablesConsts.ts
@@ -1,7 +1,7 @@
 import { JournalFilterType } from "../../scripts/enums/JournalFilterType";
-import { JournalFilter } from "../../types/Journal/JournalTimetablesTypes";
+import { JournalTimetableFilter } from "../../types/Journal/JournalTimetablesTypes";
 
-export const journalTimetableFilters: JournalFilter[] = [
+export const journalTimetableFilters: JournalTimetableFilter[] = [
   {
     id: JournalFilterType.all,
     filterSection: 'timetable-status',
diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss
index ea63cb0..bd946df 100644
--- a/src/styles/JournalSection.scss
+++ b/src/styles/JournalSection.scss
@@ -21,6 +21,7 @@
 .list_wrapper {
   overflow-y: scroll;
   height: 90vh;
+  min-height: 550px;
 
   padding-right: 0.2em;
 }
@@ -76,3 +77,9 @@
     flex-wrap: wrap;
   }
 }
+
+@media (orientation: landscape) {
+  .journal_wrapper {
+    font-size: 1em;
+  }
+}
diff --git a/src/types/Journal/JournalDispatcherTypes.ts b/src/types/Journal/JournalDispatcherTypes.ts
index abfd4a3..9de65af 100644
--- a/src/types/Journal/JournalDispatcherTypes.ts
+++ b/src/types/Journal/JournalDispatcherTypes.ts
@@ -1,3 +1,8 @@
 export type JournalDispatcherSearcher = {
   [key in 'search-dispatcher' | 'search-station']: string;
 };
+
+export interface JournalDispatcherSorter {
+  id: 'timestampFrom' | 'duration';
+  dir: -1 | 1;
+}
\ No newline at end of file
diff --git a/src/types/Journal/JournalTimetablesTypes.ts b/src/types/Journal/JournalTimetablesTypes.ts
index f3ff604..c38d3f4 100644
--- a/src/types/Journal/JournalTimetablesTypes.ts
+++ b/src/types/Journal/JournalTimetablesTypes.ts
@@ -4,13 +4,13 @@ export type JorunalTimetableSearchType = {
   [key in 'search-driver' | 'search-train' | 'search-date']: string;
 };
 
-export interface JournalFilter {
+export interface JournalTimetableFilter {
   id: JournalFilterType;
   filterSection: string;
   isActive: boolean;
 }
 
-export interface JournalSorter {
+export interface JournalTimetableSorter {
   id: 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
   dir: -1 | 1;
 }