- Added TablesList page

- Added Insert Record empty

src/components/CGridTableRec/CGridTableRec.ts

@@ -5,19 +5,28 @@ import { GlobalStore, UserStore } from '../../store/Modules/index'
 import { tools } from '../../store/Modules/tools'
 
 import { shared_consts } from '../../common/shared_vuejs'
-import { ICategory, IColGridTable } from '../../model'
+import { ICategory, IColGridTable, ITableRec } from '../../model'
 import { CTodo } from '../todos/CTodo'
 import { SingleProject } from '../projects/SingleProject'
 import { lists } from '../../store/Modules/lists'
 
 @Component({})
 export default class CGridTableRec extends Vue {
-  @Prop({ required: true }) public mytable: string
-  @Prop({ required: true }) public mytitle: string
-  @Prop({ required: true }) public mycolumns: any[]
-  @Prop({ required: true }) public colkey: string
+  @Prop({ required: false }) public prop_mytable: string
+  @Prop({ required: true }) public prop_mytitle: string
+  @Prop({ required: false, default: [] }) public prop_mycolumns: any[]
+  @Prop({ required: false, default: '' }) public prop_colkey: string
   @Prop({ required: false, default: '' }) public nodataLabel: string
   @Prop({ required: false, default: '' }) public noresultLabel: string
+  @Prop({ required: false, default: null }) public tablesList: ITableRec[]
+
+  public mytable: string
+  public mytitle: string
+  public mycolumns: any[]
+  public colkey: string
+
+  public tablesel: string = ''
+
   public $q
   public $t
   public loading: boolean = false
@@ -30,6 +39,7 @@ export default class CGridTableRec extends Vue {
   } = { sortBy: '', descending: false, page: 1, rowsNumber: 10, rowsPerPage: 10 }
 
   public serverData: any [] = []
+  public spinner_visible: boolean = false
 
   public idsel: string = ''
   public colsel: string = ''
@@ -61,11 +71,11 @@ export default class CGridTableRec extends Vue {
   }
 
   public selItem(item, colsel) {
-    console.log('item', item)
+    // console.log('item', item)
     this.selected = item
     this.idsel = item._id
     this.colsel = colsel
-    console.log('this.idsel', this.idsel)
+    // console.log('this.idsel', this.idsel)
   }
 
   public undoVal() {
@@ -84,9 +94,7 @@ export default class CGridTableRec extends Vue {
       // colkey: this.colkey,
       id: this.idsel,
       table: this.mytable,
-      fieldsvalue: {
-
-      }
+      fieldsvalue: {}
     }
 
     mydata.fieldsvalue[this.colsel] = newVal
@@ -103,15 +111,28 @@ export default class CGridTableRec extends Vue {
 
   public created() {
     // this.serverData = this.mylist.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
-    this.mycolumns.forEach((elem) => {
-      if (elem.field !== '')
-        this.colVisib.push(elem.field)
 
-      if (elem.visible && elem.field === '')
-        this.colExtra.push(elem.name)
+    this.mytable = this.prop_mytable
+    this.mytitle = this.prop_mytitle
+    this.mycolumns = this.prop_mycolumns
+    this.colkey = this.prop_colkey
 
-    })
+    this.changeTable(false)
+  }
 
+  public updatedcol() {
+    if (this.mycolumns) {
+      this.colVisib = []
+      this.colExtra = []
+      this.mycolumns.forEach((elem) => {
+        if (elem.field !== '')
+          this.colVisib.push(elem.field)
+
+        if (elem.visible && elem.field === '')
+          this.colExtra.push(elem.name)
+
+      })
+    }
   }
 
   get getrows() {
@@ -122,8 +143,13 @@ export default class CGridTableRec extends Vue {
     const { page, rowsPerPage, rowsNumber, sortBy, descending } = props.pagination
     const filter = props.filter
 
+    if (!this.mytable)
+      return
+
     this.loading = true
 
+    this.spinner_visible = true
+
     // update rowsCount with appropriate value
 
     // get all rows if "All" (0) is selected
@@ -133,13 +159,20 @@ export default class CGridTableRec extends Vue {
     const startRow = (page - 1) * rowsPerPage
     const endRow = startRow + fetchCount
 
-      // fetch data from "server"
+    // 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)
+      if (this.returnedData === []) {
+        this.serverData = []
+      } else {
+        if (this.serverData.length > 0)
+          this.serverData.splice(0, this.serverData.length, ...this.returnedData)
+        else
+          this.serverData = [...this.returnedData]
+      }
 
       // don't forget to update local pagination object
       this.pagination.page = page
@@ -149,6 +182,7 @@ export default class CGridTableRec extends Vue {
 
       // ...and turn of loading indicator
       this.loading = false
+      this.spinner_visible = false
     })
   }
 
@@ -174,8 +208,6 @@ export default class CGridTableRec extends Vue {
       descending
     }
 
-    console.table(params)
-
     const data = await GlobalStore.actions.loadTable(params)
 
     if (data) {
@@ -186,7 +218,9 @@ export default class CGridTableRec extends Vue {
       this.returnedCount = 0
     }
 
-      // if (!filter) {
+    return true
+
+    // if (!filter) {
     //   data = this.original.slice(startRow, startRow + count)
     // }
     // else {
@@ -244,6 +278,21 @@ export default class CGridTableRec extends Vue {
     return (col.disable || !this.canEdit) ? '' : 'colmodif'
   }
 
+  public async createNewRecord() {
+    this.loading = true
+
+    const mydata = {
+      table: this.mytable,
+      data: {}
+    }
+    const data = await GlobalStore.actions.saveTable(mydata)
+
+    this.serverData.push(data)
+    this.pagination.rowsNumber++
+
+    this.loading = false
+  }
+
   public saveFieldValue(mydata) {
     console.log('saveFieldValue', mydata)
 
@@ -259,11 +308,11 @@ export default class CGridTableRec extends Vue {
   }
 
   public mounted() {
-    this.mycolumns.forEach((rec: IColGridTable) => {
-      if (rec.label_trans)
-        rec.label = this.$t(rec.label_trans)
-    })
+    this.changeTable(false)
 
+  }
+
+  public refresh() {
     this.onRequest({
       pagination: this.pagination,
       filter: undefined
@@ -278,7 +327,8 @@ export default class CGridTableRec extends Vue {
 
   public ActionAfterYes(action, item) {
     if (action === lists.MenuAction.DELETE_RECTABLE) {
-      this.serverData.splice(this.serverData.indexOf(item), 1)
+      if (this.serverData.length > 0)
+        this.serverData.splice(this.serverData.indexOf(item), 1)
     }
   }
 
@@ -296,10 +346,51 @@ export default class CGridTableRec extends Vue {
 
   public visuValByType(col, val) {
     if (col.isdate) {
-      return tools.getstrDateTime(val)
+      if (val === undefined) {
+        return '[]'
+      } else {
+        return tools.getstrDateTime(val)
+      }
     } else {
-      return val
+      if (val === undefined) {
+        return '[]'
+      } else {
+        let mystr = tools.firstchars(val, tools.MAX_CHARACTERS)
+        if (val.length > tools.MAX_CHARACTERS)
+          mystr += '...'
+        return mystr
+      }
     }
   }
 
+  public changeTable(mysel) {
+    // console.log('changeTable')
+
+    let mytab = null
+    if (this.tablesList) {
+      if (!this.tablesel) {
+        this.tablesel = this.tablesList[0].value
+      }
+
+      mytab = this.tablesList.find((rec) => rec.value === this.tablesel)
+    }
+
+    if (mytab) {
+      this.mytitle = mytab.label
+      this.colkey = mytab.colkey
+      this.mycolumns = [...mytab.columns]
+    }
+
+    this.mycolumns.forEach((rec: IColGridTable) => {
+      if (rec.label_trans)
+        rec.label = this.$t(rec.label_trans)
+    })
+
+    if (mytab) {
+      this.mytable = mytab.value
+    }
+
+    this.updatedcol()
+    this.refresh()
+  }
 }