feature: nieskończona lista historii dr/rj scenerii

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -2,7 +2,7 @@
   <section class="scenery-dispatchers-history scenery-section">
     <Loading v-if="dataStatus != 2" />
 
-    <table class="scenery-history-table" v-else-if="dispatcherHistoryList.length">
+    <table class="scenery-history-table" v-else-if="historyList.length">
       <thead>
         <!-- <th>{{ $t('scenery.timetables-history-id') }}</th>
         <th>{{ $t('scenery.timetables-history-number') }}</th>
@@ -19,7 +19,7 @@
       </thead>
 
       <tbody>
-        <tr v-for="historyItem in dispatcherHistoryList">
+        <tr v-for="historyItem in historyList">
           <td>#{{ historyItem.stationHash }}</td>
           <td>
             <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
@@ -57,6 +57,7 @@
     </table>
 
     <div class="no-history" v-else>{{ $t('scenery.history-list-empty') }}</div>
+    <div ref="bottomDiv"></div>
   </section>
 </template>
 
@@ -70,24 +71,35 @@ import Station from '../../scripts/interfaces/Station';
 import { URLs } from '../../scripts/utils/apiURLs';
 import Loading from '../Global/Loading.vue';
 import styleMixin from '../../mixins/styleMixin';
+import listObserverMixin from '../../mixins/listObserverMixin';
 
 export default defineComponent({
   name: 'SceneryDispatchersHistory',
-  mixins: [dateMixin, styleMixin],
+  mixins: [dateMixin, styleMixin, listObserverMixin],
   props: {
     station: {
       type: Object as PropType<Station>,
       required: true,
     },
   },
+
   data() {
     return {
-      dispatcherHistoryList: [] as DispatcherHistory[],
+      historyList: [] as DispatcherHistory[],
       dataStatus: DataStatus.Loading,
     };
   },
+
+  mounted() {
+    this.mountObserver(this.fireObserverAction, this.$refs['bottomDiv'] as Element);
+  },
+
+  unmounted() {
+    this.unmountObserver();
+  },
+
   activated() {
-    this.fetchAPIData();
+    if (this.historyList.length == 0) this.fetchAPIData();
   },
   methods: {
     async fetchAPIData(countFrom = 0, countLimit = 30) {
@@ -95,12 +107,17 @@ export default defineComponent({
         const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
         const historyAPIData: DispatcherHistory[] = await (await axios.get(requestString)).data;
 
-        this.dispatcherHistoryList = historyAPIData;
+        this.historyList.push(...historyAPIData);
         this.dataStatus = DataStatus.Loaded;
       } catch (error) {
         console.error(error);
       }
     },
+
+    fireObserverAction() {
+      if (this.historyList.length > 0 && this.dataStatus == DataStatus.Loaded)
+        this.fetchAPIData(this.historyList.length);
+    },
   },
   components: { Loading },
 });

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -2,7 +2,7 @@
   <section class="scenery-timetables-history scenery-section">
     <Loading v-if="dataStatus != 2" />
 
-    <table class="scenery-history-table" v-else-if="sceneryHistoryList.length">
+    <table class="scenery-history-table" v-else-if="historyList.length">
       <thead>
         <th>{{ $t('scenery.timetables-history-id') }}</th>
         <th>{{ $t('scenery.timetables-history-number') }}</th>
@@ -13,7 +13,7 @@
       </thead>
 
       <tbody>
-        <tr v-for="historyItem in sceneryHistoryList">
+        <tr v-for="historyItem in historyList">
           <td>
             <router-link :to="`/journal/timetables?timetableId=${historyItem.id}`">#{{ historyItem.id }}</router-link>
           </td>
@@ -40,6 +40,7 @@
     </table>
 
     <div class="no-history" v-else>{{ $t('scenery.history-list-empty') }}</div>
+    <div ref="bottomDiv"></div>
   </section>
 </template>
 
@@ -52,37 +53,54 @@ import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfa
 import Station from '../../scripts/interfaces/Station';
 import { URLs } from '../../scripts/utils/apiURLs';
 import Loading from '../Global/Loading.vue';
+import listObserverMixin from '../../mixins/listObserverMixin';
 
 export default defineComponent({
   name: 'SceneryTimetablesHistory',
-  mixins: [dateMixin],
+  mixins: [dateMixin, listObserverMixin],
   props: {
     station: {
       type: Object as PropType<Station>,
       required: true,
     },
   },
+
   data() {
     return {
-      sceneryHistoryList: [] as TimetableHistory[],
+      historyList: [] as TimetableHistory[],
       dataStatus: DataStatus.Loading,
     };
   },
-  activated() {
+
-    this.fetchAPIData();
+  mounted() {
+    this.mountObserver(this.fireObserverAction, this.$refs['bottomDiv'] as Element);
   },
+
+  unmounted() {
+    this.unmountObserver();
+  },
+
+  activated() {
+    if (this.historyList.length == 0) this.fetchAPIData();
+  },
+
   methods: {
     async fetchAPIData(countFrom = 0, countLimit = 15) {
       try {
         const requestString = `${URLs.stacjownikAPI}/api/getIssuedTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
         const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
 
-        this.sceneryHistoryList = historyAPIData.timetables;
+        this.historyList.push(...historyAPIData.timetables);
         this.dataStatus = DataStatus.Loaded;
       } catch (error) {
         console.error(error);
       }
     },
+
+    fireObserverAction() {
+      if (this.historyList.length > 0 && this.dataStatus == DataStatus.Loaded)
+        this.fetchAPIData(this.historyList.length);
+    },
   },
   components: { Loading },
 });

src/mixins/listObserverMixin.ts

@@ -0,0 +1,24 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data: () => ({
+    observer: null as IntersectionObserver | null,
+    observerTarget: null as Element | null,
+  }),
+
+  methods: {
+    mountObserver(actionFunction: () => void, target: Element) {
+      this.observer = new IntersectionObserver((entries) => {
+        if (entries[0].intersectionRatio > 0) actionFunction();
+      });
+
+      this.observer.observe(target);
+    },
+
+    unmountObserver() {
+      if (!this.observerTarget) return;
+
+      this.observer?.unobserve(this.observerTarget);
+    },
+  },
+});