layout filtrów dzienników

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>

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;

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();
     },