From cf9991d8a0a890a4337f2367d975683e73951321 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 12 Jun 2023 00:51:17 +0200
Subject: [PATCH] =?UTF-8?q?layout=20filtr=C3=B3w=20dziennik=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalOptions.vue | 20 ++++++++---------
 src/styles/filters_options.scss               | 22 +++++++++----------
 src/views/JournalTimetables.vue               |  8 +++++--
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 28a2d58..c0813c6 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -49,15 +49,6 @@
                 </button>
               </div>
             </div>
-
-            <div class="search_actions">
-              <button class="btn--action" @click="onResetButtonClick">
-                {{ $t('options.reset-button') }}
-              </button>
-              <button class="btn--action" @click="onSearchButtonConfirm">
-                {{ $t('options.search-button') }}
-              </button>
-            </div>
           </div>
 
           <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
@@ -75,7 +66,7 @@
 
           <h1 class="option-title" v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
 
-          <div class="options_filter-sections" v-if="filterList">
+          <div class="options_filter-sections" v-if="filters.length != 0 && filterList">
             <section class="filter-section" v-for="section in JournalFilterSection">
               <p>{{ $t(`options.filter-section-${section}`) }}</p>
 
@@ -92,6 +83,15 @@
               </div>
             </section>
           </div>
+
+          <div class="options_actions">
+            <button class="btn--action" @click="onResetButtonClick">
+              {{ $t('options.reset-button') }}
+            </button>
+            <button class="btn--action" @click="onSearchButtonConfirm">
+              {{ $t('options.search-button') }}
+            </button>
+          </div>
         </div>
       </div>
     </transition>
diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss
index fb92009..adcab45 100644
--- a/src/styles/filters_options.scss
+++ b/src/styles/filters_options.scss
@@ -122,17 +122,6 @@ h1.option-title {
     margin: 0.5em auto;
   }
 
-  .search_actions {
-    display: flex;
-    gap: 0.5em;
-    margin: 1em 0;
-    width: 100%;
-
-    button {
-      width: 100%;
-    }
-  }
-
   .search-box {
     .search-exit {
       position: absolute;
@@ -143,6 +132,17 @@ h1.option-title {
   }
 }
 
+.options_actions {
+  display: flex;
+  gap: 0.5em;
+  width: 100%;
+  margin-top: 1em;
+
+  button {
+    width: 100%;
+  }
+}
+
 @include smallScreen() {
   h1 {
     text-align: center;
diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue
index 8fc6419..7fea211 100644
--- a/src/views/JournalTimetables.vue
+++ b/src/views/JournalTimetables.vue
@@ -122,7 +122,7 @@ export default defineComponent({
     const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 'desc' });
     // const journalFilterActive = ref(journalTimetableFilters[0]);
     const initFilters: readonly JournalFilter[] = JSON.parse(JSON.stringify(journalTimetableFilters));
-    const filterList = reactive([...initFilters]);
+    const filterList: JournalFilter[] = reactive(JSON.parse(JSON.stringify(initFilters)));
 
     const searchersValues = reactive({
       'search-train': '',
@@ -145,6 +145,7 @@ export default defineComponent({
       sorterActive,
       searchersValues,
       filterList,
+      initFilters,
 
       countFromIndex,
       countLimit,
@@ -198,9 +199,12 @@ export default defineComponent({
     resetOptions() {
       this.setSearchers('', '', '', '', '');
 
-      // this.journalFilterActive = this.journalTimetableFilters[0];
       this.sorterActive.id = 'timetableId';
 
+      this.filterList.forEach(
+        (f) => (f.isActive = this.initFilters.find((initFilter) => initFilter.id == f.id)?.isActive || false)
+      );
+
       this.fetchHistoryData();
     },