Poprawki filtrów

src/components/TrainsView/TrainOptions.vue

@@ -22,15 +22,21 @@
         <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
 
         <div class="options_filters">
-          <button
+          <div class="filter-option" v-for="filter in trainFilterList">
-            v-for="filter in trainFilterList"
+            <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
-            class="filter-option btn--option"
+              {{ $t(`options.filter-${filter.id}`) }}
-            :class="{ checked: filter.isActive }"
+            </button>
-            :id="filter.id"
+          </div>
-            @click="onFilterChange(filter)"
+        </div>
-          >
+
-            {{ $t(`options.filter-${filter.id}`) }}
+        <div class="options_filters">
-          </button>
+          <div class="filter-option">
+            <button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button>
+          </div>
+
+          <div class="filter-option">
+            <button @click="resetAllFilters">ZRESETUJ FILTRY</button>
+          </div>
         </div>
 
         <h1>{{ $t('options.search-title') }}</h1>
@@ -66,7 +72,6 @@ import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
   components: { SelectBox, ActionButton },
-  emits: ['onSearchConfirm'],
   mixins: [imageMixin],
 
   props: {
@@ -105,13 +110,24 @@ export default defineComponent({
     onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
-      this.$emit('onSearchConfirm');
     },
 
     onFilterChange(filter: TrainFilter) {
       filter.isActive = !filter.isActive;
     },
 
+    clearAllFilters() {
+      this.trainFilterList.forEach((filter) => {
+        filter.isActive = false;
+      });
+    },
+
+    resetAllFilters() {
+      this.trainFilterList.forEach((filter) => {
+        filter.isActive = true;
+      });
+    },
+
     onInputClear(id: 'driver' | 'train') {
       if (id == 'driver') this.searchedDriver = '';
       if (id == 'train') this.searchedTrain = '';
@@ -226,16 +242,13 @@ h1 {
 }
 
 .filter-option {
-  &#abandoned {
+  button {
-    color: salmon;
+    color: white;
-  }
+    font-weight: bold;
 
-  &#fulfilled {
+    &[data-disabled='true'] {
-    color: lightgreen;
+      color: #888;
-  }
+    }
-
-  &#active {
-    color: lightblue;
   }
 }
 

src/styles/global.scss

@@ -230,10 +230,6 @@ button {
     border-radius: 0.25em;
     padding: 0.25em 0.5em;
 
-    &:hover:not(:disabled) {
-      background-color: #3c3c3c;
-    }
-
     &.checked {
       color: var(--clr-primary);
       font-weight: bold;