Show data Table with pagination (startRow, endRow, filter, sorting)

src/components/CGridTableRec/CGridTableRec.ts

@@ -1,38 +1,46 @@
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
 
-import { UserStore } from '../../store/Modules/index'
+import { GlobalStore, UserStore } from '../../store/Modules/index'
 import { tools } from '../../store/Modules/tools'
 
 import { shared_consts } from '../../common/shared_vuejs'
 import { ICategory } from '../../model'
+import { CTodo } from '../todos/CTodo'
+import { SingleProject } from '../projects/SingleProject'
 
-@Component({
-
-})
+@Component({})
 export default class CGridTableRec extends Vue {
-  @Prop({required: true}) public mytitle: string
-  @Prop({required: true}) public mylist: any[]
-  @Prop({required: true}) public mycolumns: any[]
-  @Prop({required: true}) public colkey: string
+  @Prop({ required: true }) public mytable: string
+  @Prop({ required: true }) public mytitle: string
+  @Prop({ required: true }) public mylist: any[]
+  @Prop({ required: true }) public mycolumns: any[]
+  @Prop({ required: true }) public colkey: string
   public $q
   public $t
   public loading: boolean = false
-  public paginationControl: {
+  public pagination: {
+    sortBy: string,
+    descending: boolean
+    rowsNumber: number
     page: number,
     rowsPerPage: number // specifying this determines pagination is server-side
-  } = { page: 1, rowsPerPage: 10 }
+  } = { sortBy: '', descending: false, page: 1, rowsNumber: 10, rowsPerPage: 10 }
 
   public serverData: any [] = []
 
   public idsel: string = ''
   public colsel: string = ''
+  public valPrec: string = ''
 
   public separator: 'horizontal'
   public filter: string = ''
-  public selected: any[] = []
+  public selected: any
   public dark: boolean = true
 
+  public returnedData
+  public returnedCount
+
   get tableClass() {
     if (this.dark) {
       return 'bg-black'
@@ -41,11 +49,21 @@ export default class CGridTableRec extends Vue {
 
   public selItem(item, colsel) {
     console.log('item', item)
+    this.selected = item
     this.idsel = item._id
     this.colsel = colsel
     console.log('this.idsel', this.idsel)
   }
 
+  public undoVal() {
+    console.log('undoVal', 'colsel', this.colsel, 'valprec', this.valPrec, 'this.colkey', this.colkey, 'this.selected', this.selected)
+    console.table(this.serverData)
+    if (this.colsel)
+      this.selected[this.colsel] = this.valPrec
+    // this.serverData[this.colsel] = this.valPrec
+
+  }
+
   public SaveValue(newVal, valinitial) {
     console.log('SaveValue', newVal, 'selected', this.selected)
 
@@ -53,6 +71,7 @@ export default class CGridTableRec extends Vue {
 
     mydata[this.colsel] = newVal
     mydata[this.colkey] = this.idsel
+    this.valPrec = valinitial
 
     console.log('this.idsel', this.idsel, 'this.colsel', this.colsel)
     console.table(mydata)
@@ -62,6 +81,140 @@ export default class CGridTableRec extends Vue {
 
   public created() {
 
-    this.serverData = this.mylist.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
+    // this.serverData = this.mylist.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
   }
+
+  get getrows() {
+    return this.pagination.rowsNumber
+  }
+
+  public onRequest(props) {
+    const { page, rowsPerPage, rowsNumber, sortBy, descending } = props.pagination
+    const filter = props.filter
+
+    this.loading = true
+
+    // update rowsCount with appropriate value
+
+    // get all rows if "All" (0) is selected
+    const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage
+
+    // calculate starting row of data
+    const startRow = (page - 1) * rowsPerPage
+    const endRow = startRow + fetchCount
+
+      // fetch data from "server"
+    this.fetchFromServer(startRow, endRow, filter, sortBy, descending).then((ris) => {
+
+      this.pagination.rowsNumber = this.getRowsNumberCount(filter)
+
+      // clear out existing data and add new
+      this.serverData.splice(0, this.serverData.length, ...this.returnedData)
+
+      // don't forget to update local pagination object
+      this.pagination.page = page
+      this.pagination.rowsPerPage = rowsPerPage
+      this.pagination.sortBy = sortBy
+      this.pagination.descending = descending
+
+      // ...and turn of loading indicator
+      this.loading = false
+    })
+  }
+
+  // emulate ajax call
+  // SELECT * FROM ... WHERE...LIMIT...
+  public async fetchFromServer(startRow, endRow, filter, sortBy, descending) {
+
+    let myobj = null
+    if (sortBy) {
+      myobj = {}
+      if (descending)
+        myobj[sortBy] = -1
+      else
+        myobj[sortBy] = 1
+    }
+
+    const params = {
+      table: this.mytable,
+      startRow,
+      endRow,
+      filter,
+      sortBy: myobj,
+      descending
+    }
+
+    console.table(params)
+
+    const data = await GlobalStore.actions.loadTable(params)
+
+    if (data) {
+      this.returnedData = data.rows
+      this.returnedCount = data.count
+    } else {
+      this.returnedData = []
+      this.returnedCount = 0
+    }
+
+      // if (!filter) {
+    //   data = this.original.slice(startRow, startRow + count)
+    // }
+    // else {
+    //   let found = 0
+    //   for (let index = startRow, items = 0; index < this.original.length && items < count; ++index) {
+    //     let row = this.original[index]
+    //     // match filter?
+    //     if (!row['name'].includes(filter)) {
+    //       // get a different row, until one is found
+    //       continue
+    //     }
+    //     ++found
+    //     if (found >= startRow) {
+    //       data.push(row)
+    //       ++items
+    //     }
+    //   }
+    // }
+
+    // handle sortBy
+    // if (sortBy) {
+    //   data.sort((a, b) => {
+    //     let x = descending ? b : a
+    //     let y = descending ? a : b
+    //     if (sortBy === 'desc') {
+    //       // string sort
+    //       return x[sortBy] > y[sortBy] ? 1 : x[sortBy] < y[sortBy] ? -1 : 0
+    //     }
+    //     else {
+    //       // numeric sort
+    //       return parseFloat(x[sortBy]) - parseFloat(y[sortBy])
+    //     }
+    //   })
+    // }
+  }
+
+  // emulate 'SELECT count(*) FROM ...WHERE...'
+  public getRowsNumberCount(filter) {
+
+    // if (!filter) {
+    //   return this.original.length
+    // }
+    // let count = 0
+    // this.original.forEach((treat) => {
+    //   if (treat['name'].includes(filter)) {
+    //     ++count
+    //   }
+    // })
+    // return count
+
+    return this.returnedCount
+  }
+
+  public mounted() {
+    this.onRequest({
+      pagination: this.pagination,
+      filter: undefined
+    })
+  }
+
 }

src/components/CGridTableRec/CGridTableRec.vue

@@ -1,17 +1,26 @@
 <template>
     <div class="q-pa-sm">
+        <!--<div class="col-2 q-table__title">{{ mytitle }}</div>-->
+
+        <!--<q-space/>-->
+        <!--<p style="color:red"> Rows: {{ getrows }}</p>-->
+
+
         <q-table
                 :title="mytitle"
                 :data="serverData"
                 :columns="mycolumns"
                 :filter="filter"
-                :pagination.sync="paginationControl"
-                :row-key="colkey">
+                :pagination.sync="pagination"
+                :row-key="colkey"
+                :loading="loading"
+                @request="onRequest"
+                binary-state-sort
+        >
+
+
 
             <!--<template v-slot:top="props">-->
-            <div class="col-2 q-table__title">{{ mytitle }}</div>
-
-            <q-space/>
 
             <q-tr slot="body" slot-scope="props" :props="props">