Migracja z wersji Vue 2 na Vue 3

src/views/StationsView.vue

@@ -1,14 +1,9 @@
 <template>
   <div class="stations-view">
-    <DonationModal
-      :modalHidden="modalHidden"
-      @toggleModal="toggleModal"
-    />
-
     <div class="wrapper">
       <div class="body">
         <div class="options-bar">
-          <action-button @click.native="() => toggleCardsState('filter')">
+          <action-button @click="() => toggleCardsState('filter')">
             <img
               class="button_icon"
               :src="require('@/assets/icon-filter2.svg')"
@@ -42,7 +37,7 @@
 
     <transition name="card-anim">
       <FilterCard
-        v-if="filterCardOpen"
+        :showCard="filterCardOpen"
         :exit="() => toggleCardsState('filter')"
         @changeFilterValue="changeFilterValue"
         @resetFilters="resetFilters"
@@ -52,10 +47,6 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
-
-import { Getter } from "vuex-class";
-
 import Station from "@/scripts/interfaces/Station";
 
 import StorageManager from "@/scripts/managers/storageManager";
@@ -68,128 +59,106 @@ import FilterCard from "@/components/StationsView/FilterCard.vue";
 import ActionButton from "@/components/Global/ActionButton.vue";
 import { StoreData } from "@/scripts/interfaces/StoreData";
 import { DataStatus } from "@/scripts/enums/DataStatus";
+import { computed, ComputedRef, defineComponent, reactive } from "vue";
+import { useStore } from "@/store";
+import { GETTERS } from "@/constants/storeConstants";
 
-@Component({
+export default defineComponent({
   components: {
     StationTable,
     FilterCard,
     ActionButton,
   },
-})
-export default class StationsView extends Vue {
-  STORAGE_KEY: string = "options_saved";
-  STORAGE_MODAL: string = "modal";
+  data: () => ({
+    trainIcon: require("@/assets/icon-train.svg"),
+    timetableIcon: require("@/assets/icon-timetable.svg"),
+    dolarIcon: require("@/assets/icon-dolar.svg"),
+    filterCardOpen: false,
+    modalHidden: true,
+    STORAGE_KEY: "options_saved",
+    inputs: inputData,
+  }),
+  setup() {
+    const store = useStore();
+    const filterManager = reactive(new StationFilterManager());
+    const focusedStationName = "";
 
-  trainIcon: string = require("@/assets/icon-train.svg");
-  timetableIcon: string = require("@/assets/icon-timetable.svg");
-  dolarIcon: string = require("@/assets/icon-dolar.svg");
+    const data: ComputedRef<StoreData> = computed(
+      () => store.getters[GETTERS.allData]
+    );
 
-  filterManager: StationFilterManager = new StationFilterManager();
-
-  focusedStationName: string = "";
-  filterCardOpen: boolean = false;
-  modalHidden: boolean = true;
-
-  inputs = inputData;
-
-  @Getter("getStationList") stationList!: Station[];
-  @Getter("getAllData") data!: StoreData;
-
-  get dataStatusClass() {
-    if (this.data.dataConnectionStatus == DataStatus.Loading) return "loading";
-    if (this.data.dataConnectionStatus == DataStatus.Error) return "error";
-
-    return "success";
-  }
-
-  get timetableDataStatusClass() {
-    if (this.data.timetableDataStatus == DataStatus.Loading) return "loading";
-    if (this.data.timetableDataStatus == DataStatus.Error) return "error";
-
-    return "success";
-  }
-
-  mounted() {
-    this.initializeOptionsStorage();
-    // this.initializeModalStorage();
-
-    window.addEventListener("keydown", (e: KeyboardEvent) => {
-      if (e.keyCode == 27 && this.focusedStationName != "") {
-        this.focusedStationName = "";
-      }
+    const computedStations: ComputedRef<Station[]> = computed(() => {
+      return filterManager.getFilteredStationList(
+        store.getters[GETTERS.stationList]
+      );
     });
-  }
 
-  initializeOptionsStorage() {
+    const getStatusClass = computed(() => {
+      if (data.value.dataConnectionStatus == DataStatus.Loading)
+        return "loading";
+      if (data.value.dataConnectionStatus == DataStatus.Error) return "error";
+      return "success";
+    });
+
+    const timetableDataStatusClass = computed(() => {
+      if (data.value.timetableDataStatus == DataStatus.Loading)
+        return "loading";
+      if (data.value.timetableDataStatus == DataStatus.Error) return "error";
+      return "success";
+    });
+
+    const focusedStationInfo = computed(() =>
+      computedStations.value.find(
+        (station) => station.stationName === focusedStationName
+      )
+    );
+
+    return {
+      data,
+      computedStations,
+      filterManager,
+      getStatusClass,
+      timetableDataStatusClass,
+      focusedStationName,
+      focusedStationInfo,
+    };
+  },
+  mounted() {
     if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
-
     this.inputs.options.forEach((option) => {
       const value = StorageManager.getBooleanValue(option.name);
-
       this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
       option.value = value;
     });
-
     this.inputs.sliders.forEach((slider) => {
       const value = StorageManager.getNumericValue(slider.name);
-
       this.changeFilterValue({ name: slider.name, value });
       slider.value = value;
     });
-  }
-
-  initializeModalStorage() {
-    if (StorageManager.isRegistered(`${this.STORAGE_MODAL}_hidden`))
-      this.modalHidden = StorageManager.getBooleanValue(
-        `${this.STORAGE_MODAL}_hidden`
-      );
-  }
-
-  toggleModal() {
-    this.modalHidden = !this.modalHidden;
-
-    StorageManager.setBooleanValue(
-      `${this.STORAGE_MODAL}_hidden`,
-      this.modalHidden
-    );
-  }
-
-  toggleCardsState(name: string): void {
-    if (name == "filter") {
-      this.filterCardOpen = !this.filterCardOpen;
-    }
-  }
-
-  changeSorter(index: number) {
-    this.filterManager.changeSorter(index);
-  }
-
-  changeFilterValue(filter: { name: string; value: number }) {
-    this.filterManager.changeFilterValue(filter);
-  }
-
-  resetFilters() {
-    this.filterManager.resetFilters();
-  }
-
-  get computedStations() {
-    return this.filterManager.getFilteredStationList(this.stationList);
-  }
-
-  closeCard() {
-    this.focusedStationName = "";
-  }
-
-  setFocusedStation(name: string) {
-    this.focusedStationName = this.focusedStationName == name ? "" : name;
-  }
-
-  get focusedStationInfo() {
-    return this.computedStations.find(
-      (station) => station.stationName === this.focusedStationName
-    );
-  }
-}
+  },
+  methods: {
+    toggleCardsState(name: string): void {
+      if (name == "filter") {
+        this.filterCardOpen = !this.filterCardOpen;
+      }
+    },
+    changeSorter(index: number) {
+      this.filterManager.changeSorter(index);
+    },
+    changeFilterValue(filter: { name: string; value: number }) {
+      this.filterManager.changeFilterValue(filter);
+    },
+    resetFilters() {
+      this.filterManager.resetFilters();
+    },
+    closeCard() {
+      this.focusedStationName = "";
+    },
+    setFocusedStation(name: string) {
+      this.focusedStationName = this.focusedStationName == name ? "" : name;
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
@@ -202,7 +171,7 @@ export default class StationsView extends Vue {
     transition: all $animDuration $animType;
   }
 
-  &-enter,
+  &-enter-from,
   &-leave-to {
     transform: translate(-50%, -50%) scale(0.85);
     opacity: 0;