Small problem with v-table in template node

Hi, it was not an easy ride, but I started to play with template node and vuetify elements, and starts to have some success.

I however see a small problem with some checkbox elements in table, however the code looks quite OK to me.... maybe very tired after so many tests all days long :slight_smile:

In the screenshot here the "SDP support" and "use as end point" columns should use tickbox based on incoming boolean values.... but they don't.

Here is a sample of code to test if you want to (some useless code in there as well, due to testing)

[
    {
        "id": "a8109b87e6229a16",
        "type": "change",
        "z": "9ae93a3fd6fb68a7",
        "name": "Add Headers",
        "rules": [
            {
                "t": "set",
                "p": "headers",
                "pt": "msg",
                "to": "[{\"title\":\"Icon\",\"value\":\"icon\"},{\"title\":\"Key\",\"value\":\"key\",\"sortable\":true,\"width\":\"10%\"},{\"title\":\"fDesc\",\"value\":\"fDescriptor.label\",\"sortable\":true},{\"title\":\"Custom Naming\",\"align\":\"center\",\"children\":[{\"title\":\"Label\",\"value\":\"descriptor.label\"},{\"title\":\"Description\",\"value\":\"descriptor.desc\"}]},{\"title\":\"CONTROL\",\"value\":\"control\",\"sortable\":false},{\"title\":\"ACTIVE\",\"value\":\"active\",\"sortable\":false,\"width\":\"3px\"},{\"title\":\"SDP Support\",\"value\":\"sdpSupport\",\"sortable\":false,\"width\":\"3px%\"},{\"title\":\"SIPS (2022-7)\",\"value\":\"sipsMode\",\"sortable\":false},{\"title\":\"Use as End Point\",\"value\":\"useAsEndpoint\",\"sortable\":false},{\"title\":\"TAGS\",\"value\":\"tags\",\"sortable\":false}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1310,
        "y": 720,
        "wires": [
            [
                "6f7530017cc4d98d"
            ]
        ]
    },
    {
        "id": "cfe09c9267365061",
        "type": "inject",
        "z": "9ae93a3fd6fb68a7",
        "name": "Ctrl true",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "tags",
                "v": "[\"Aud_2CH_LR\",\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"]",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R2bad3bf9-83fb-5007-b22d-28aee63168ff\",\"rev\":\"8-2de5ef04-3032-4c6f-b347-e6c422b1a697\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A02 (ST)\",\"label\":\"AMON01-01C01_RxA02\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-02_2CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":false,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R3094b947-9890-5518-93a3-776f075f3753\",\"rev\":\"7-5c4892c1-b41b-4d0f-88e1-51de506f430c\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A03 (RAW)\",\"label\":\"AMON01-01C01_RxA03\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-03_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R6e541466-f455-5b6f-9587-e63a68c98bf5\",\"rev\":\"7-ab162669-22de-419b-bddd-20b3c3768172\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A04 (RAW)\",\"label\":\"AMON01-01C01_RxA04\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-04_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.Rae1d5d6d-8281-511d-83e4-d3534a5ce840\",\"rev\":\"8-b0b6e014-030f-4e77-801a-79ab642f672a\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A01 (ST)\",\"label\":\"AMON01-01C01_RxA01\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"Stream \"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"}]",
        "payloadType": "json",
        "x": 1090,
        "y": 700,
        "wires": [
            [
                "a8109b87e6229a16"
            ]
        ]
    },
    {
        "id": "6f7530017cc4d98d",
        "type": "ui-template",
        "z": "9ae93a3fd6fb68a7",
        "group": "32ea454ed2e17d66",
        "page": "",
        "ui": "",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n  <!-- Provide an input text box to search the content -->\n  <v-text-field v-model=\"search\" label=\"Search\" prepend-inner-icon=\"mdi-magnify\" single-line variant=\"outlined\"\n    hide-details>\n  </v-text-field>\n\n  <v-data-table v-model:search=\"search\" :group-by=\"groupBy\" :items=\"msg?.payload\" :headers=\"msg?.headers\"\n    v-model=\"selected\" item-selectable=\"selectable\" select-strategy=\"all\" show-select return-object>\n    <template v-slot:header.current>\n      <div class=\"text-center\">Center-Aligned</div>\n    </template>\n\n    <template v-slot:item.descriptor.label=\"{ item }\">\n      <v-text-field v-model=\"item.descriptor.label\" density=\"compact\" variant=\"outlined\" type=\"text\"></v-text-field>\n    </template>\n\n    <template v-slot:item.descriptor.desc=\"{ item }\">\n      <v-text-field v-model=\"item.descriptor.desc\" density=\"compact\" clearable variant=\"outlined\" type=\"text\">\n      </v-text-field>\n    </template>\n\n    <template v-slot:item.control=\"{ item }\">\n      <!-- Test with CheckBox -->\n      <v-checkbox-btn v-model=\"item.control\" color=\"indigo\" @click=\"send({topic: 'ctrlStatusChange', payload: item})\">\n      </v-checkbox-btn>\n    </template>\n\n    <template v-slot:item.active=\"{ item }\">\n      <!-- Test with CheckBox -->\n      <v-checkbox-btn v-model=\"item.active\" color=\"green\" @click=\"send({topic: 'activeStatusChange', payload: item})\">\n      </v-checkbox-btn>\n    </template>\n\n    <template v-slot:item.sdpSupport=\"{ item }\">\n      <!-- Test with CheckBox -->\n      <v-checkbox-btn v-model=\"item.sdpSupport\" color=\"red\" @click=\"send({topic: 'sdpStatusChange', payload: item})\">\n      </v-checkbox-btn>\n    </template>\n\n    <template v-slot:item.useAsEndpoint=\"{ item }\">\n      <!-- Test with CheckBox -->\n      <v-checkbox-btn v-model=\"item.useAsEndpoint\" color=\"indigo\" @click=\"send({topic: 'endPointStatusChange', payload: item})\">\n      </v-checkbox-btn>\n\n    </template>\n\n    <template v-slot:item.tags=\"{ item }\">\n      <!-- Test Dropdown -->\n      <v-select :items=\"msg?.tags\" v-model=\"item.tags\" chips clearable multiple label=\"Choose Tags\" @update:model-value=\"send({topic: 'ctrlStatusChange', payload: item})\"></v-select>\n      {{ item.tags }}\n    </template>\n\n  </v-data-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        selected: [],\n        search: '',\n        value: []\n      }\n    },\n    watch: {\n      /*  \n      value: function () {\n      this.send({value: this.value})\n      },\n      */\n      selected: function () {\n        // Send a message to the Node-RED flow. If a non-Object value is sent, then Dashboard will automatically wrap that into a msg.payload object.\n        this.send({ topic: 'selected', payload: this.selected });\n      }\n    },\n    // Define functions that can be called from your <template> or <script> sections\n    methods: {\n/*\n      mvchanged: function () {\n        this.send({ payload: this.value, topic: \"v-select Update\" })\n      },\n*/\n    }\n  }\n</script>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1480,
        "y": 720,
        "wires": [
            [
                "c41dd6371bf2e64b"
            ]
        ]
    },
    {
        "id": "c41dd6371bf2e64b",
        "type": "debug",
        "z": "9ae93a3fd6fb68a7",
        "name": "debug 440",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1670,
        "y": 720,
        "wires": []
    },
    {
        "id": "f914a701e7b37e52",
        "type": "inject",
        "z": "9ae93a3fd6fb68a7",
        "name": "Ctrl false",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "headers",
                "v": "[{\"title\":\"Icon\",\"value\":\"icon\"},{\"title\":\"Key\",\"value\":\"key\",\"sortable\":true},{\"title\":\"fDesc\",\"value\":\"fDescriptor\",\"sortable\":true},{\"title\":\"Control\",\"value\":\"control\",\"sortable\":false},{\"title\":\"Tags\",\"value\":\"tags\",\"sortable\":false}]",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R2bad3bf9-83fb-5007-b22d-28aee63168ff\",\"rev\":\"8-2de5ef04-3032-4c6f-b347-e6c422b1a697\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A02 (ST)\",\"label\":\"AMON01-01C01_RxA02\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-02_2CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":false,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R3094b947-9890-5518-93a3-776f075f3753\",\"rev\":\"7-5c4892c1-b41b-4d0f-88e1-51de506f430c\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A03 (RAW)\",\"label\":\"AMON01-01C01_RxA03\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-03_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R6e541466-f455-5b6f-9587-e63a68c98bf5\",\"rev\":\"7-ab162669-22de-419b-bddd-20b3c3768172\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A04 (RAW)\",\"label\":\"AMON01-01C01_RxA04\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-04_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.Rae1d5d6d-8281-511d-83e4-d3534a5ce840\",\"rev\":\"8-b0b6e014-030f-4e77-801a-79ab642f672a\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A01 (ST)\",\"label\":\"AMON01-01C01_RxA01\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"Stream \"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"}]",
        "payloadType": "json",
        "x": 1100,
        "y": 740,
        "wires": [
            [
                "a8109b87e6229a16"
            ]
        ]
    },
    {
        "id": "32ea454ed2e17d66",
        "type": "ui-group",
        "name": "ViP device Management",
        "page": "0a322689e7d1be44",
        "width": "12",
        "height": "1",
        "order": 5,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "0a322689e7d1be44",
        "type": "ui-page",
        "name": "Nevion Device Managment",
        "ui": "e51c8ddc14062d86",
        "path": "/neviondevices",
        "icon": "home",
        "layout": "grid",
        "theme": "0d92c765bfad87e6",
        "order": 4,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "e51c8ddc14062d86",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "0d92c765bfad87e6",
        "type": "ui-theme",
        "name": "Basic Blue Theme",
        "colors": {
            "surface": "#4d58ff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

It is some wierd camel case auto conversion nonesense that vue does.

I cannot find the relevant info or solution right now but suffice to say, if you rename useAsEndpoint to useasendpoint it will work.

Joe (head maintainer of dasboard 2) probably knows the answer off the top of his head


PS, please tag posts about dashboard 2 with dashboard-2 to avoid additional confusion.

Hi, thanks.

The camelCase problem definitely makes sense, I knew and have seen this problem in the past, but as the data was there in the table I did not think it might be related....

Also concerning DB2 tag, I remember recently it was mentionned that all new dashboard posts would be related to DB2 by default... but maybe I did not get it correctly.

Will take care of that in the future.

Thanks again !

1 Like