zamiana infinite scrolla na przyciski

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -1,8 +1,9 @@
 <template>
-  <section class="scenery-dispatchers-history scenery-section">
-    <Loading v-if="dataStatus != 2" />
+  <section class="scenery-table-section">
+    <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
+    <div class="no-history" v-else-if="historyList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
 
-    <table class="scenery-history-table" v-else-if="historyList.length">
+    <table class="scenery-history-table" v-else="historyList.length">
       <thead>
         <th>{{ $t('scenery.dispatchers-history-hash') }}</th>
         <th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
@@ -48,10 +49,13 @@
         </tr>
       </tbody>
     </table>
-
-    <div class="no-history" v-else>{{ $t('scenery.history-list-empty') }}</div>
-    <div ref="bottomDiv"></div>
   </section>
+
+  <div class="bottom-info">
+    <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
+      {{ $t('scenery.bottom-info') }}
+    </button>
+  </div>
 </template>
 
 <script lang="ts">
@@ -80,36 +84,35 @@ export default defineComponent({
     return {
       historyList: [] as DispatcherHistory[],
       dataStatus: DataStatus.Loading,
+      DataStatus,
     };
   },
 
-  mounted() {
-    this.mountObserver(this.fireObserverAction, this.$refs['bottomDiv'] as Element);
+  async activated() {
+    // if (this.historyList.length == 0) {
+    const fetchedHistory = await this.fetchAPIData();
+    if (fetchedHistory) this.historyList = fetchedHistory;
+    // }
   },
 
-  unmounted() {
-    this.unmountObserver();
-  },
-
-  activated() {
-    if (this.historyList.length == 0) this.fetchAPIData();
-  },
   methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 30) {
+    async fetchAPIData(countFrom = 0, countLimit = 30): Promise<DispatcherHistory[] | null> {
       try {
+        this.dataStatus = DataStatus.Loading;
+
         const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
         const historyAPIData: DispatcherHistory[] = await (await axios.get(requestString)).data;
 
-        this.historyList.push(...historyAPIData);
         this.dataStatus = DataStatus.Loaded;
+        return historyAPIData;
       } catch (error) {
+        this.dataStatus = DataStatus.Error;
         console.error(error);
+        return null;
       }
     },
-
-    fireObserverAction() {
-      if (this.historyList.length > 0 && this.dataStatus == DataStatus.Loaded)
-        this.fetchAPIData(this.historyList.length);
+    navigateToHistory() {
+      this.$router.push(`/journal/dispatchers?sceneryName=${this.station.name}`);
     },
   },
   components: { Loading },