ayanova/src/views/ay-history.vue

@@ -42,7 +42,18 @@
           </v-timeline-item>
         </v-timeline>
       </v-col>
-      <div>{{ obj }}</div>
+      <v-col cols="12">
+        <v-btn
+          block
+          color="primary"
+          large
+          v-if="moreAvailable"
+          text
+          @click="getDataFromApi()"
+          >{{ $ay.t("More") }}</v-btn
+        ></v-col
+      >
+      <!-- <div>{{ obj }}</div> -->
     </v-row>
   </v-card>
 </template>
@@ -54,6 +65,7 @@
 
 const FORM_KEY = "ay-history";
 const API_BASE_URL = "EventLog/";
+const DEFAULT_EVENTS_PAGE_SIZE = 200; 
 export default {
   created() {
     let vm = this;
@@ -77,7 +89,8 @@ export default {
       name: null,
       eventTypes: {},
       ayaTypes: {},
-      lastOffset: 0,
+      page: -1, //Note this must be -1 at start to work properly
+      moreAvailable: true,
       formState: {
         ready: false,
         loading: false,
@@ -146,9 +159,11 @@ export default {
       vm.formState.loading = true;
       window.$gz.form.deleteAllErrorBoxErrors(vm);
       let url = null;
+      vm.page += 1;
       //path: "/history/:ayatype/:recordid/:userlog?"
       ///EventLog/UserLog?UserId=2&Offset=2&Limit=2
       ///EventLog/ObjectLog?AyType=2&AyId=2&Offset=2&Limit=2
+
       if (vm.$route.params.userlog) {
         url = API_BASE_URL + "UserLog?UserId=" + vm.$route.params.recordid;
       } else {
@@ -160,7 +175,9 @@ export default {
           vm.$route.params.recordid;
       }
       //paging
-      url += "&Offset=" + vm.lastOffset;
+      url += "&Offset=" + vm.page * DEFAULT_EVENTS_PAGE_SIZE;
+      url += "&limit=" + DEFAULT_EVENTS_PAGE_SIZE;
+
       window.$gz.api
         .get(url)
         .then(res => {
@@ -180,9 +197,10 @@ export default {
             vm.formState.serverError = res.error;
             window.$gz.form.setErrorBoxErrors(vm);
           } else {
-            //TODO: PAGING update last offset
+            vm.moreAvailable = res.data.events.length == DEFAULT_EVENTS_PAGE_SIZE;
             vm.name = res.data.name;
             let temp = res.data.events;
+            let currentEventCount = vm.obj.length;
             let timeZoneName = window.$gz.locale.getBrowserTimeZoneName();
             let languageName = window.$gz.locale.getBrowserLanguages();
             let hour12 = window.$gz.store.state.locale.hour12;
@@ -196,10 +214,10 @@ export default {
                 hour12
               );
 
-              temp[i].index = i; //TODO: PAGING
+              temp[i].index = currentEventCount + i;
             }
 
-            vm.obj = temp; //TODO: PAGING
+            vm.obj = [...vm.obj, ...temp];
 
             //Update the form status
             window.$gz.form.setFormState({
@@ -343,8 +361,6 @@ function populateEventTypeList(vm) {
   };
 }
 
-//todo: need an object with all translated object type names and icons, maybe centralized as could be useful in other aspects?
-
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available