TrainTable: nowe działanie widoku SRJP

src/views/TrainsView.vue

@@ -4,31 +4,26 @@
       <div class="options-bar">
         <TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" />
 
-        <TrainOptions
-          :queryTrain="train"
-          @changeSorter="changeSorter"
-          @changeSearchedTrain="changeSearchedTrain"
-          @changeSearchedDriver="changeSearchedDriver"
-        />
+        <TrainOptions />
       </div>
 
-      <TrainTable :computedTrains="computedTrains" :queryTrain="train" />
+      <TrainTable :trains="computedTrains" />
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, provide, reactive, ref } from "vue";
+import { computed, ComputedRef, defineComponent, provide, reactive, Ref, ref } from 'vue';
 
-import { DataStatus } from "@/scripts/enums/DataStatus";
-import Train from "@/scripts/interfaces/Train";
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import Train from '@/scripts/interfaces/Train';
 
-import TrainTable from "@/components/TrainsView/TrainTable.vue";
-import TrainStats from "@/components/TrainsView/TrainStats.vue";
-import TrainOptions from "@/components/TrainsView/TrainOptions.vue";
+import TrainTable from '@/components/TrainsView/TrainTable.vue';
+import TrainStats from '@/components/TrainsView/TrainStats.vue';
+import TrainOptions from '@/components/TrainsView/TrainOptions.vue';
 
-import { useStore } from "@/store";
-import { GETTERS } from "@/constants/storeConstants";
+import { useStore } from '@/store';
+import { GETTERS } from '@/constants/storeConstants';
 
 const filteredTrainList = (
   trainList: Train[],
@@ -39,39 +34,29 @@ const filteredTrainList = (
   return trainList
     .filter(
       (train) =>
-        (searchedTrain.length > 0
-          ? train.trainNo.toString().includes(searchedTrain)
-          : true) &&
-        (searchedDriver.length > 0
-          ? train.driverName
-              .toLowerCase()
-              .includes(searchedDriver.toLowerCase())
-          : true)
+        (searchedTrain.length > 0 ? train.trainNo.toString().includes(searchedTrain) : true) &&
+        (searchedDriver.length > 0 ? train.driverName.toLowerCase().includes(searchedDriver.toLowerCase()) : true)
     )
     .sort((a: Train, b: Train) => {
       switch (sorterActive.id) {
-        case "mass":
+        case 'mass':
           if (a.mass > b.mass) return sorterActive.dir;
           return -sorterActive.dir;
 
-        case "distance":
-          if (
-            (a.timetableData?.routeDistance || -1) >
-            (b.timetableData?.routeDistance || -1)
-          )
-            return sorterActive.dir;
+        case 'distance':
+          if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
 
           return -sorterActive.dir;
 
-        case "speed":
+        case 'speed':
           if (a.speed > b.speed) return sorterActive.dir;
           return -sorterActive.dir;
 
-        case "timetable":
+        case 'timetable':
           if (a.trainNo > b.trainNo) return sorterActive.dir;
           return -sorterActive.dir;
 
-        case "length":
+        case 'length':
           if (a.length > b.length) return sorterActive.dir;
           return -sorterActive.dir;
 
@@ -80,7 +65,7 @@ const filteredTrainList = (
       }
 
       return 0;
-    })
+    });
 };
 
 export default defineComponent({
@@ -90,38 +75,36 @@ export default defineComponent({
     TrainOptions,
   },
 
-  props: ["train"],
+  props: ['train'],
 
   data: () => ({
-    statsIcon: require("@/assets/icon-stats.svg"),
+    statsIcon: require('@/assets/icon-stats.svg'),
     trainStatsOpen: false,
-    queryTrain: "",
+    queryTrain: '',
   }),
 
-  setup() {
+  setup(props) {
     const store = useStore();
 
-    const trainList: ComputedRef<Train[]> = computed(
-      () => store.getters[GETTERS.trainList]
-    );
+    const trainList: ComputedRef<Train[]> = computed(() => store.getters[GETTERS.trainList]);
 
-    const timetableDataStatus: ComputedRef<DataStatus> = computed(
-      () => store.getters[GETTERS.timetableDataStatus]
-    );
+    const timetableDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.timetableDataStatus]);
 
-    const sorterActive = ref({ id: "distance", dir: -1 });
-    const searchedDriver = ref("");
-    const searchedTrain = ref("");
+    const sorterActive = ref({ id: 'distance', dir: -1 });
+    const searchedDriver = ref('');
+    const searchedTrain = ref('');
+
+    const queryTrain = ref(props.train) as Ref<string>;
+
+    provide('searchedTrain', searchedTrain);
+    provide('searchedDriver', searchedDriver);
+    provide('sorterActive', sorterActive);
+    provide('queryTrain', queryTrain);
 
     const computedTrains: ComputedRef<Train[]> = computed(() => {
       if (timetableDataStatus.value != DataStatus.Loaded) return [];
 
-      return filteredTrainList(
-        trainList.value,
-        searchedTrain.value,
-        searchedDriver.value,
-        sorterActive.value
-      );
+      return filteredTrainList(trainList.value, searchedTrain.value, searchedDriver.value, sorterActive.value);
     });
 
     /* Provide list for TrainStats category filter */
@@ -134,28 +117,14 @@ export default defineComponent({
       searchedTrain,
       searchedDriver,
       sorterActive,
-      chosenTrainCategories
+      chosenTrainCategories,
     };
   },
-
-  methods: {
-    changeSearchedTrain(trainNo: string) {
-      this.searchedTrain = trainNo;
-    },
-
-    changeSearchedDriver(name: string) {
-      this.searchedDriver = name;
-    },
-
-    changeSorter(sorter: { id: string; dir: number }) {
-      this.sorterActive = sorter;
-    },
-  },
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/responsive.scss";
+@import '../styles/responsive.scss';
 
 .trains-view {
   min-height: 100%;