B4J Question [BANanoVueMaterial] Dinamic change value

[micro]

Hi to all
I always continue with the same test project

[BANanoVueMaterial] How to create dynamic data-table from database schema & data [SOLVED]

Hi the next step .....but always with the same problem of updating the component (VMDataTable) dt1 = VMDataTable in a module gestDatiArc is show and only the indication of the number of records in the pagination is updated but it does not show the name of the columns and records I read as you...

www.b4x.com

I have inserted a label under the table that must indicate the number of records processed by the query
I followed your advice but I'm probably wrong
(see in the code '<<<<<)

Sub Process_Globals
    Public currentable As String
    Public name As String = "gestdatiarc"
    Private vm As BANanoVM
    Private BANano As BANano  'ignore
    Private vue As BANanoVue
    Public lnamecol As List
    Public ltypecol As List
    Private dt1 As VMDataTable
    Private lbcount As VMLabel  '<<<<<
    Private countrecord As Int  '<<<<<
End Sub

Public Sub Code
    vm = pgIndex.vm
    vue = vm.vue
    Dim cont As VMContainer = vm.CreateContainer(name, Me)
    'hide this container
    cont.Hide
    '
    cont.AddRows(5).AddColumns12
    '
    dt1 = vm.CreateDataTable("dt1", "name", Me)
    'dt1.SetTitle("?")
    dt1.AddSearch
    dt1.AddDivider
    dt1.AddNew("btnNew", "mdi-plus", "Add a new record")
    dt1.AddDivider
    dt1.SetClearSort
    dt1.SetItemsperpage("10")
    dt1.SetPage("1")
    dt1.SetMultiSort(True)
    'NB: Add action buttons, these are based on templates and should be pre-defined
    dt1.AddEditThrash
    'dt1.AddDownload
    'dt1.AddMenuV
    'dt1.AddClone
    'dt1.AddPrint
    dt1.SetExternalPagination
    dt1.SetCalculateWidths(True)
    dt1.SetOnInput("dt1_input")
    dt1.SetIconDimensions("edit", "32px", "success")
    dt1.SetIconDimensions("delete", "32p", "error")
    dt1.AddToContainer(cont, 1, 1)
    '
    lbcount = vm.CreateLabel("lblcount").SetText("{{ countrecord }}").SetSpan '<<<<< this lock the code
    lbcount.SetH6
    lbcount.AddToContainer(cont, 2,1)
    'add container to page
    vm.AddContainer(cont)
    'register the sub routine
    vm.SetMethod(Me, "LoadDatitb")
End Sub

Sub LoadDatitb
    'get the table name from the state
    currentable = vm.getdata("currentable")
    Log(currentable)
    If currentable = "" Then Return
    vm.PagePause
    'vm.ShowLoading
    'update the table title
    lnamecol.Clear
    ltypecol.Clear
    Dim dbSchema As BANanoMySQLE
    dbSchema.Initialize(pgIndex.db, "", "", "")
    dbSchema.Execute($"DESCRIBE ${currentable.ToUpperCase}"$)
    dbSchema.json = BANano.CallInlinePHPWait(dbSchema.MethodName, dbSchema.Build)
    dbSchema.FromJSON
    If dbSchema.OK = False Then
        vm.ShowSnackBarError(dbSchema.error)
        'vm.HideLoading
        vm.PageResume
        Return
    End If
    For Each fld As Map In dbSchema.Result
        lnamecol.Add(fld.Get("Field"))
        ltypecol.add(fld.Get("Type"))
    Next
    'define a new variable for records to avoid conflicts
    Dim dbRecords As BANanoMySQLE
    dbRecords.Initialize(pgIndex.db, "", "", "")
    dbRecords.Execute($"SELECT * FROM ${currentable}"$)
    dbRecords.json = BANano.CallInlinePHPWait(dbRecords.MethodName, dbRecords.Build)
    dbRecords.FromJSON
    'reset everything about the table
    dt1.Reset
    'add the new columns
    For Each colName As String In lnamecol
        dt1.AddColumn(colName, colName)
    Next
    'ensure the action buttons are visible
    dt1.AddEditThrash
    'dt1.AddDownload
    'dt1.AddMenuV
    'dt1.AddClone
    'dt1.AddPrint
    'build the new columns
    dt1.ResetColumns
    dt1.UpdateTitle(currentable.ToUpperCase)
    'set the items of the table
    dt1.SetDataSource(dbRecords.result)
    vm.SetData("countrecord", dbRecords.result.size) '<<<<<
    '
    dt1.SetColumnWidth("id", 0) '<<<<< not work
    'vm.HideLoading
    vm.PageResume
End Sub

Thanks

 

[Mashiane]

Hi

In terms of VueJS, anything enclosed in {{ x }} means the value of x must be read from the VueJS "state". This can never be a normal Dim variable. To set the state in BVM and read it, you call

vm.SetData("x", 1)

And to read it you use

Dim x as int = vm.GetData("x")

VueJS "state" is like declaring variables within the memory state of VueJS so that it knows what to use internally inside your code.

This is the same when you "bind" a property variable when creating components. For example, to enable functionality to make an element disabled and enabled at runtime, you need to bind the "disabled" property of the element.

For example

<input :disabled="isdisabled"></input>

:disabled here is same as v-bind:disabled, you are saying, bind the property to the vuejs "state" variable named isdisabled.

To change this during runtime execution you would write

'To Disable
vm.SetData("isdisabled", true) or

'Enable
vm.SetData("isdisabled", false)

Also, when you "bind" a state variable, you need to initialize it in the state, So you need to...

vm.setdata("countrecord", 0)

before

lbcount = vm.CreateLabel("lblcount").SetText("{{ countrecord }}").SetSpan

So when the app is run, the label will show 0.

You want to change the value at runtime, so you can later say

vm.SetData("countrecord", 10)

The possibility that its not working well its because you need to initialize the "state" variable first in VueJS for it to be known, because without this [vm.setdata("countrecord", 0)], its unknown.

All the best.

 

[micro]

Thanks Mash, now work.
Another question, how i can capture event when I write in the search text box for update lbcount?

also, why can't i hide the ID column?

dt1.SetColumnWidth("id", 0) '<<<<< not work

 

[Mashiane]

how i can capture event when I write in the search text box

The vuetify API has various events for most of the controls. The issue is which event to capture?

Check the Vuetify API docs for the event you want to be captured, exists, the search i think is based on a text field.

 

[micro]

The vuetify API has various events for most of the controls. The issue is which event to capture?

I just have to update the record number when I type in the search text box

And this?

dt1.SetColumnWidth("id", 0) '<<<<< not work

Thanks

 

[Mashiane]

1. At the current moment, there are no events built into the text fields in BVM. I will add these in the next version.
2. Also, for hiding columns, there is no built in method to do that like .HideColum(?) etc. I will have to add a way around that for the next version.