From 531108c25aa4f4befa302cbed21da958b6e5929f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 22 Sep 2022 15:08:22 +0200
Subject: [PATCH] =?UTF-8?q?Wygl=C4=85d=20filtr=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalOptions.vue | 45 +++++++------
 src/components/TrainsView/TrainOptions.vue    | 66 +++++++++++--------
 2 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index ba106b4..cfb88de 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -10,29 +10,6 @@
     <transition name="options-anim">
       <div class="options_wrapper" v-if="showOptions">
         <div class="options_content">
-          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
-
-          <div class="options_sorters">
-            <div v-for="opt in translatedSorterOptions">
-              <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
-                {{ opt.value.toUpperCase() }}
-              </button>
-            </div>
-          </div>
-
-          <h1 class="option-title" v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
-          <div class="options_filters">
-            <button
-              v-for="filter in filters"
-              class="filter-option btn--option"
-              :class="{ checked: journalFilterActive.id === filter.id }"
-              :id="filter.id"
-              @click="onFilterChange(filter)"
-            >
-              {{ $t(`options.filter-${filter.id}`) }}
-            </button>
-          </div>
-
           <h1 class="option-title">{{ $t('options.search-title') }}</h1>
           <div class="search_content">
             <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
@@ -75,6 +52,28 @@
               </action-button>
             </div>
           </div>
+
+          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
+          <div class="options_sorters">
+            <div v-for="opt in translatedSorterOptions">
+              <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
+                {{ opt.value.toUpperCase() }}
+              </button>
+            </div>
+          </div>
+
+          <h1 class="option-title" v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
+          <div class="options_filters">
+            <button
+              v-for="filter in filters"
+              class="filter-option btn--option"
+              :class="{ checked: journalFilterActive.id === filter.id }"
+              :id="filter.id"
+              @click="onFilterChange(filter)"
+            >
+              {{ $t(`options.filter-${filter.id}`) }}
+            </button>
+          </div>
         </div>
 
         <!-- <div class="data-status">
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 5b4d3eb..c511bbd 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="filters-options">
+  <div class="filters-options" @keydown.esc="showOptions = false">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--image" @click="showOptions = !showOptions">
+    <button class="btn--image" @click="toggleShowOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
       {{ $t('options.filters') }} [F]
     </button>
@@ -10,37 +10,12 @@
     <transition name="options-anim">
       <div class="options_wrapper" v-if="showOptions">
         <div class="options_content">
-          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
-          <div class="options_sorters">
-            <div v-for="opt in translatedSorterOptions">
-              <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
-                {{ opt.value.toUpperCase() }}
-              </button>
-            </div>
-          </div>
-
-          <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
-          <div class="options_filters">
-            <div class="filter-option" v-for="filter in trainFilterList">
-              <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
-                {{ $t(`options.filter-${filter.id}`) }}
-              </button>
-            </div>
-          </div>
-          <div class="options_filters">
-            <div class="filter-option">
-              <button @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
-            </div>
-            <div class="filter-option">
-              <button @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
-            </div>
-          </div>
-
           <h1 class="option-title">{{ $t('options.search-title') }}</h1>
           <div class="search_content">
             <div class="search-box">
               <input
                 class="search-input"
+                ref="initFocusedElement"
                 @focus="preventKeyDown = true"
                 @blur="preventKeyDown = false"
                 :placeholder="$t(`options.search-train`)"
@@ -64,6 +39,33 @@
               </button>
             </div>
           </div>
+
+          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
+          <div class="options_sorters">
+            <div v-for="opt in translatedSorterOptions">
+              <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
+                {{ opt.value.toUpperCase() }}
+              </button>
+            </div>
+          </div>
+
+          <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
+          <div class="options_filters">
+            <div class="filter-option" v-for="filter in trainFilterList">
+              <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
+                {{ $t(`options.filter-${filter.id}`) }}
+              </button>
+            </div>
+          </div>
+
+          <div class="options_filters">
+            <div class="filter-option">
+              <button @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
+            </div>
+            <div class="filter-option">
+              <button @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
+            </div>
+          </div>
         </div>
       </div>
     </transition>
@@ -117,7 +119,15 @@ export default defineComponent({
   methods: {
     // Override keyMixin function
     onKeyDownFunction() {
+      this.toggleShowOptions();
+    },
+
+    toggleShowOptions() {
       this.showOptions = !this.showOptions;
+
+      // this.$nextTick(() => {
+      //   if (this.showOptions) (this.$refs['initFocusedElement'] as any)?.focus();
+      // });
     },
 
     onSorterChange(item: { id: string | number; value: string }) {