cob-cli 2.12.0 → 2.13.1

package/templates/dashboards/dash/src/App.vue

@@ -13,8 +13,9 @@
 <script>
 import axios from 'axios';
 import { umLoggedin } from '@cob/rest-api-wrapper';
-import { instancesList, domainCount, definitionCount, fieldSum } from '@cob/dashboard-info';
+import { instancesList } from '@cob/dashboard-info';
 import Dashboard from './Dashboard.vue'
+import {parseDashboard} from './collector.js'
 
 export default {
     name: 'App',
@@ -27,231 +28,50 @@ export default {
         error:"",
         currentDashboardInstance: null,
         dashboard: null,
+        page_title: null
     }),
     created() {
         umLoggedin().then( userInfo => this.userInfo = userInfo )
         //At the initial load we get the dashboard instance from the url
-        let page_title = document.getElementById("dash").getAttribute('data-name')
-        this.currentDashboardInstance = instancesList("Dashboard", "page_title.raw:\"" + page_title+"\"", 1, { changeCB: this.loadDashboard })
+        this.page_title = document.getElementById("dash").getAttribute('data-name')
+        this.currentDashboardInstance = instancesList("Dashboard", "page_title.raw:\"" + this.page_title + "\"", 1)
 
         $('section.custom-resource').on('resume', (e, params) => {
-            //register this callback to every anchor navigation. In these cases we get the dashboard instance from the first param of the callback
-            this.currentDashboardInstance.changeArgs({query:"page_title.raw:\""+params[0]+"\""})
+            //register this callback to every anchor navigation. In these cases we get the dashboard instance from the first param to the callback
+            this.page_title = params[0]
+            this.currentDashboardInstance.changeArgs({query:"page_title.raw:\"" + this.page_title + "\""})
         });
     },
-    methods: {
-        loadDashboard(newResult) {         
-            if(newResult.value.length > 0) {
+    watch: {
+        'currentDashboardInstance.state'(state) {
+            if(state == "loading" || state == "updating") {
                 this.state = "Loading"
-                let instance = newResult.value[0].id
-                axios.get("/recordm/recordm/instances/" + instance)
+            } else if(state == "error") {
+                this.error = "Error: error getting dashboard"
+                this.state = "Error"
+            } else if( this.currentDashboardInstance.value.length > 0) {
+                this.state = "Loading"
+                let instanceId = this.currentDashboardInstance.value[0].id
+                axios.get("/recordm/recordm/instances/" + instanceId)
                     .then(resp => {
-                        let raw_dashboard = resp.data
-                        const dashboard_thunk = this.parseDashboard(raw_dashboard)
-                        this.dashboard = this.createDashboardFromThunk(dashboard_thunk)
-                        this.state = "Ready"
+                        try {
+                            this.dashboard = parseDashboard(resp.data)
+                            this.state = "Ready"
+                        }
+                        catch(e) {
+                            this.error = "Error: error processing dashboard " + instanceId
+                            this.state = "Error"
+                        }
+                    })
+                    .catch( (e) => {
+                        this.error = "Error: error getting dashboard " + instanceId
+                        this.state = "Error"
                     })
-                    .catch( (e) => this.error = "Error: error getting dashboard", this.state = "Error" )
             } else {
-                this.error = "Error: invalid dashboard"
+                this.error = "Error: dashboard '" + this.page_title + "' not found"
                 this.state = "Error"
             }
-        },
-        createDashboardFromThunk(dashboard) {
-            dashboard.boards.forEach(b => b.components.forEach(c => {
-                if (c.component_type == "Totals")
-                    c.lines.forEach(l => {
-                        l.values = l.values.map(v => {
-                            if(v.args[2] && v.args[2].startsWith("{")) {
-                                v.args[2] = JSON.parse(v.args[2])
-                            }
-                            return ({
-                                dash_info: this[v.type].apply(this, v.args), // Return DashInfo, which is used by the component
-                                style: v.style
-                            })
-                        })
-                    })
-            }))
-            return dashboard
-        },
-        parseDashboard(raw_dashboard_origin) {
-            // Parse raw dashboard
-
-            let raw_dashboard = JSON.parse(JSON.stringify(raw_dashboard_origin)) // TODO: Is this deep copy slow?
-            let dashboard = {
-                page_title: undefined,
-                grid_cols: undefined,
-                max_width: undefined,
-                boards: [],
-                permission: undefined
-            }
-
-            let _ignore = raw_dashboard.fields.shift() // Dashboard Info Label
-
-            const raw_page = raw_dashboard.fields.shift()
-            console.assert(raw_page.fieldDefinition.name == "Page Title")
-            dashboard.page_title = raw_page.value 
-
-            const raw_grid_cols = raw_dashboard.fields.shift()
-            console.assert(raw_grid_cols.fieldDefinition.name == "Grid Columns")
-            dashboard.grid_cols = raw_grid_cols.value
-
-            const raw_max_width = raw_dashboard.fields.shift()
-            console.assert(raw_max_width.fieldDefinition.name == "Max Width")
-            dashboard.max_width = raw_max_width.value
-
-            const raw_permission = raw_dashboard.fields.shift() // remove last value from raw_page fields (permission) leaving raw_page fields as a list of boards
-            console.assert(raw_permission.fieldDefinition.name == "Permission")
-            dashboard.permission = raw_permission.value
-
-            _ignore = raw_dashboard.fields.shift() // Boards Label
-
-            const raw_boards = raw_dashboard.fields // raw page fields without the last field which was /permission/
-
-            for (let raw_board of raw_boards) {
-                console.assert(raw_board.fieldDefinition.name == "Board Title")
-                let board = {
-                    board_title: raw_board.value,
-                    row_span: undefined,
-                    col_span: undefined,
-                    components: [ ]
-                }
-
-                const raw_col_span = raw_board.fields.shift()
-                console.assert(raw_col_span.fieldDefinition.name == "Col Span")
-                board.col_span = raw_col_span.value
-
-                const raw_row_span = raw_board.fields.shift()
-                console.assert(raw_row_span.fieldDefinition.name == "Row Span")
-                board.row_span = raw_row_span.value
-
-                const raw_components = raw_board.fields
-
-                for (let raw_component of raw_components) {
-                    console.assert(raw_component.fieldDefinition.name == "Component")
-
-                    const componentsTypes = {
-                        'Totals': {
-                            headers: [],
-                            headers_style: null,
-                            lines: []
-                        },
-                        'Menu': {
-                            items: []
-                        },
-                        'Title': {
-                            title_text: null
-                        }
-                    }
-
-                    let component = {
-                        component_type: raw_component.value,
-                        ...JSON.parse(JSON.stringify(componentsTypes[raw_component.value] ? componentsTypes[raw_component.value] : {}))
-                    }
-
-                    const raw_parts = raw_component.fields
-                    if (component.component_type == 'Totals') { /// {{{
-
-                        let raw_headers = raw_parts.shift().fields // "Pop" first element (Headers)
-                        const raw_header_style = raw_headers.pop() // and its last field (Headers Style)
-                        console.assert(raw_header_style.fieldDefinition.name == "Style Header")
-                        component.headers_style = raw_header_style.value 
-                        component.headers = raw_headers.map(x => x["value"])
-
-                        const raw_lines = raw_parts.filter(x => x.fieldDefinition.name == "Line")
-
-                        for (let raw_line of raw_lines) {
-
-                            let line = {
-                                text: raw_line.value,
-                                text_style: undefined,
-                                values: [
-                                    /*
-                                {
-                                type: undefined,
-                                args: []
-                                style: undefined
-                                }
-                                     */
-                                ]
-                            }
-
-                            const raw_text_style = raw_line.fields.pop() // Style Line (Last field)
-                            console.assert(raw_text_style.fieldDefinition.name == "Style Line")
-                            line.text_style = raw_text_style.value
-
-                            line.values = raw_line.fields.map(v => { // Remaining list of Values
-                                console.assert(v.fieldDefinition.name == "Value")
-                                const value_type = v.value
-
-                                const raw_style = v.fields.shift()
-                                console.assert(raw_style.fieldDefinition.name == "Style Value")
-
-                                const args = v.fields.map(v => v.value)
-
-                                return {
-                                    type: value_type,
-                                    style: raw_style.value,
-                                    args: args
-                                }
-                            })
-
-                            component.lines.push(line)
-
-                        }
-
-                    } /// }}}
-                    else if (component.component_type == 'Menu') { /// {{{
-
-                        const raw_items = raw_parts.filter(x => x.fieldDefinition.name == "Text") // We removed the 2 first fields and only have the lines left
-
-                        for (let raw_item of raw_items) {
-
-                            let item = {
-                                text: raw_item.value,
-                                text_style: undefined,
-                                link: undefined
-                            }
-
-                            const raw_link = raw_item.fields.shift() // Link
-                            console.assert(raw_link.fieldDefinition.name == "Link")
-                            item.link = raw_link.value
-
-                            const raw_text_style = raw_item.fields.shift() // Style Text
-                            console.assert(raw_text_style.fieldDefinition.name == "Style Text")
-                            item.text_style = raw_text_style.value
-
-                            component.items.push(item)
-                        }
-
-                    } /// }}}
-                    else if (component.component_type == 'Title') { /// {{{
-                        const raw_items = raw_parts.filter(x => x.fieldDefinition.name == "Title") // We removed the 2 first fields and only have the lines left
-                        console.assert(raw_items.length == 1)
-                        component.title_text = raw_items[0].value
-                    } /// }}}
-                    else if (component.component_type == null) {
-                        // Empty component
-                    }
-                    else console.error("Undefined component type!", component.component_type)
-
-                    board.components.push(component)
-                }
-
-                dashboard.boards.push(board)
-            }
-
-            console.log("finished parsing!", dashboard)
-            return dashboard
-        },
-
-        // Register functions for dynamic use in createDashboardFromThunk
-        definitionCount: definitionCount,
-        domainCount: domainCount,
-        fieldSum: fieldSum,
-        link(url, icon) {
-            return { value: icon, href: url, state: undefined, isLink: true }
         }
     }
 };
-</script>
+</script>

package/templates/dashboards/dash/src/Dashboard.vue

@@ -1,15 +1,17 @@
 <template>
     <div :class="'flex ' + maxWidthClass">
-        <!-- <BoardsNav class="w-48" /> and pl-2 on the page -->
-        <BoardsPage class="w-full h-full" :grid-cols="dashboard.grid_cols">
+        <BoardsPage class="w-full h-full" :grid-cols="gridColumns">
             <Board 
-                v-for="board in dashboard.boards" 
-                :key="board.board_title" 
-                :title="board.board_title" :show-title="board.show_board_title" :row-span="board.row_span" :col-span="board.col_span">
+                v-for="(board,i) in boards" 
+                    :key="'board-' + i" 
+                    :title="board.title"
+                    :row-span="board.rowSpan" 
+                    :col-span="board.colSpan"
+                >
                 <template v-for="(component, i) in board.components">
-                    <Totals v-if="component.component_type == 'Totals'" :component-data="component" :key="component.component_type + i" />
-                    <Menu v-if="component.component_type == 'Menu'"     :component-data="component" :key="component.component_type + i" />
-                    <Title v-if="component.component_type == 'Title'"   :component-data="component" :key="component.component_type + i" />
+                    <Totals v-if="component.type == 'Totals'" :component-data="component.data" :key="'component-' + i" />
+                    <Menu   v-if="component.type == 'Menu'"   :component-data="component.data" :key="'component-' + i" />
+                    <Title  v-if="component.type == 'Title'"  :component-data="component.data" :key="'component-' + i" />
                 </template>
             </Board>
         </BoardsPage>
@@ -17,7 +19,6 @@
 </template>
 
 <script>
-import BoardsNav from './components/BoardsNav.vue'
 import BoardsPage from './components/BoardsPage.vue'
 import Board from './components/Board.vue'
 import Totals from './components/Totals.vue'
@@ -25,9 +26,28 @@ import Menu from './components/Menu.vue'
 import Title from './components/Title.vue'
 
 export default {
-    components: { BoardsNav, BoardsPage, Board, Totals, Menu, Title },
+    components: { BoardsPage, Board, Totals, Menu, Title },
     props: { dashboard: Object },
     computed: {
+        gridColumns() { 
+            return this.dashboard['Grid Columns'] 
+        },
+        maxWidth() {
+            return this.dashboard['Max Width'] 
+        },
+        boards() {
+            return this.dashboard['Board Title'].map( b => ({
+                title: b['Board Title'],
+                rowSpan: b['Row Span'],
+                colSpan: b['Col Span'],
+                components: b['Component'].map( c => ({
+                    type: c['Component'],
+                    data: c
+
+                }))
+            }))
+        },
+
         maxWidthClass() {
             // The full class name lookup is important for tailwind to build all classes
             const lookup = {
@@ -39,7 +59,7 @@ export default {
                 "6xl": "max-w-6xl",
                 "full": "max-w-full"
             }
-            return "mx-auto " + lookup[this.dashboard.max_width]
+            return "mx-auto " + lookup[this.maxWidth]
         }
     }
 }