Add basic pagination support for model index, and view w/ rows

src/components/model-crud/ByjoveModelCrud.vue

@@ -58,7 +58,7 @@
     <div v-if="hasRows && mode == 'viewing'">
       <b-menu>
         <b-menu-list>
-          <b-menu-item v-for="row in rows"
+          <b-menu-item v-for="row in rowData.data"
                        :key="row.uuid"
                        tag="router-link"
                        :to="getRowPathPrefix() + '/' + row.uuid">
@@ -68,6 +68,14 @@
           </b-menu-item>
         </b-menu-list>
       </b-menu>
+      <b-pagination v-if="rowsPaginated"
+                    :total="rowData.total"
+                    :current.sync="rowPage"
+                    :per-page="rowsPerPage"
+                    @change="changeRowPagination"
+                    >
+        <!-- icon-pack="fas" -->
+      </b-pagination>
     </div>
 
     <slot name="footer"></slot>
@@ -97,6 +105,14 @@ export default {
             type: Boolean,
             default: false,
         },
+        rowsPaginated: {
+            type: Boolean,
+            default: true,
+        },
+        rowsPerPage: {
+            type: Number,
+            default: 20,
+        },
         apiRowsUrl: String,
         isRow: {
             type: Boolean,
@@ -121,7 +137,8 @@ export default {
     data: function() {
         return {
             record: {},
-            rows: [],
+            rowData: {},
+            rowPage: 1,
         }
     },
 
@@ -328,8 +345,12 @@ export default {
                 orderBy: 'modified',
                 ascending: 0,
             }
+            if (this.rowsPaginated) {
+                params.per_page = this.rowsPerPage
+                params.page = this.rowPage
+            }
             this.$http.get(this.getApiRowsUrl(), {params: params}).then(response => {
-                this.rows = response.data.data
+                this.rowData = response.data
 
             }, response => {
                 if (response.status == 403) { // forbidden; redirect to home page
@@ -349,6 +370,10 @@ export default {
             })
         },
 
+        changeRowPagination(value) {
+            this.fetchRows(this.record.uuid)
+        },
+
         save() {
             let url = this.getApiIndexUrl()
             if (this.mode != 'creating') {

src/components/model-index/ByjoveModelIndex.vue

@@ -19,7 +19,7 @@
 
     <b-menu>
       <b-menu-list>
-        <b-menu-item v-for="obj in records"
+        <b-menu-item v-for="obj in data.data"
                      :key="obj.uuid"
                      :label="renderLabel(obj)"
                      :tag="hasModelPerm('view') ? 'router-link' : 'a'"
@@ -27,6 +27,16 @@
         </b-menu-item>
       </b-menu-list>
     </b-menu>
+
+    <b-pagination v-if="paginated"
+                  :total="data.total"
+                  :current.sync="page"
+                  :per-page="perPage"
+                  @change="changePagination"
+                  >
+                  <!-- icon-pack="fas" -->
+    </b-pagination>
+
   </div>
 </template>
 
@@ -49,10 +59,19 @@ export default {
             type: Boolean,
             default: true,
         },
+        paginated: {
+            type: Boolean,
+            default: true,
+        },
+        perPage: {
+            type: Number,
+            default: 20,
+        },
     },
     data: function() {
         return {
-            records: [],
+            data: {},
+            page: 1,
         }
     },
     mounted() {
@@ -65,14 +84,22 @@ export default {
     },
     methods: {
 
+        changePagination(value) {
+            this.fetchData()
+        },
+
         fetchData() {
             let params = {
                 filters: JSON.stringify(this.apiIndexFilters),
                 orderBy: this.apiIndexSort.field,
                 ascending: (this.apiIndexSort.dir == 'asc') ? 1 : 0,
             }
+            if (this.paginated) {
+                params.per_page = this.perPage
+                params.page = this.page
+            }
             this.$http.get(this.getApiIndexUrl(), {params: params}).then(response => {
-                this.records = response.data.data
+                this.data = response.data
 
             }, response => {
                 if (response.status == 403) { // forbidden; redirect to home page