cob-cli 2.12.0 → 2.12.1

package/templates/dashboards/dash/src/components/Menu.vue

@@ -1,10 +1,12 @@
 <template>
     <ul class="space-y-2 text-slate-700 decoration-slate-700">
-        <li v-for="(item, i) in componentData.items" :key="item.text + i"
+        <li v-for="(menuItem, i) in menuItems" 
+            :key="'menuItem-' + i"
             :class="'transition ease-in-out duration-300 rounded-md border border-cobline border-l-2 border-l-sky-600 shadow-sm transform hover:translate-x-0.5 '
-                    + item.text_style">
-            <a :href="item.link" class="flex items-center font-light py-1 px-3">
-                <span v-html="item.text"/>
+                    + menuItem.style"
+        >
+            <a :href="menuItem.link" class="flex items-center font-light py-1 px-3" >
+                <span v-html="menuItem.text"/>
             </a>
         </li>
     </ul>
@@ -14,6 +16,15 @@
 export default {
     props: {
         componentData: Object
+    },
+    computed: {
+        menuItems() { 
+            return this.componentData['Text'].map( m => ({
+                text: m['Text'],
+                link: m['Link'],
+                style: m['Style Text'],
+            }))
+        }
     }
 }
 </script>

package/templates/dashboards/dash/src/components/Title.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="text-slate-700 uppercase tracking-wider border-b border-b-cobline/50 pb-1 text-xs text-center">
-        <span v-html="componentData.title_text"/>
+    <div :class="'text-slate-700 uppercase tracking-wider border-b border-b-cobline/50 pb-1 text-xs text-center ' + style">
+        <span v-html="title"/>
     </div>
 </template>
 
@@ -8,6 +8,14 @@
 export default {
     props: {
         componentData: Object
+    },
+    computed: {
+        title() { 
+            return this.componentData['Title'] 
+        },
+        style() { 
+            return this.componentData['Style Text'] 
+        },
     }
 }
 </script>

package/templates/dashboards/dash/src/components/Totals.vue

@@ -10,10 +10,10 @@
         <tbody>
             <tr v-for="(line, i) in lines" :key="'line'+i"
                 class="text-slate-700">
-                <td :class="'py-2 ' + line.text_style">{{ line.text }}</td>
-                <td v-for="(badge, j) in line.values" :key="'badge'+j"
+                <td :class="'py-2 ' + line.style">{{ line.name }}</td>
+                <td v-for="(value, j) in line.values" :key="'value'+j"
                     class="py-2 text-right">
-                    <TotalsBadge :badge-data="badge" />
+                    <TotalsValue :value-data="value" />
                 </td>
             </tr>
         </tbody>
@@ -21,11 +21,24 @@
 </template>
 
 <script>
-import TotalsBadge from './TotalsBadge.vue'
+import TotalsValue from './TotalsValue.vue'
 export default {
-    components: { TotalsBadge },
+    components: { TotalsValue },
     props: { componentData: Object },
     computed: {
+        headers() { 
+            return this.componentData['Header'][0]['Text'].filter(x => !!x).map(h => h['Text']) 
+        },
+        headers_style() { 
+            return this.componentData['Header'][0]['Style Header'] 
+        },
+        lines() { 
+            return this.componentData['Line'].map( l => ({
+                name : l['Line'],
+                style : l['Style Line'],
+                values: l['Value']
+            }))
+        },
         valuesGridClass() {
             const dynamicClasses = {
                 1: "grid-cols-1",
@@ -44,10 +57,7 @@ export default {
             }
             // Grid with cols == amount of values
             return "grid " + dynamicClasses[this.lines[0].values.length]
-        },
-        headers() { return this.componentData.headers.filter(x => !!x) },
-        headers_style() { return this.componentData.headers_style },
-        lines() { return this.componentData.lines }
+        }
     }
 }
 </script>

package/templates/dashboards/dash/src/components/{TotalsBadge.vue → TotalsValue.vue}

@@ -1,6 +1,6 @@
 <template>
     <div :class="{'animate-pulse':signalChange}">
-        <a :href="badgeData.dash_info.href" :class="valueClass" class="relative inline-flex">
+        <a :href="valueData.dash_info.href" :class="valueClass" class="relative inline-flex">
             <span v-html="value"/>
 
             <svg v-if="updating" class="absolute animate-spin -top-1 -right-1 h-2 w-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -15,7 +15,7 @@
 
 export default {
     props: {
-        badgeData: Object
+        valueData: Object
     },
     data () {
       return {
@@ -32,19 +32,19 @@ export default {
     },
     computed: {
         updating() {
-            return this.badgeData.dash_info.state == "updating" || this.badgeData.dash_info.state == "loading"
+            return this.valueData.dash_info.state == "updating" || this.valueData.dash_info.state == "loading"
         },
         value() {
-            if(this.badgeData.dash_info.state == "loading") return "L"
-            if(this.badgeData.dash_info.state == "error") return "E"
-            if(isNaN(this.badgeData.dash_info.value)) {
-                return this.badgeData.dash_info.value
+            if(this.valueData.dash_info.state == "loading") return "L"
+            if(this.valueData.dash_info.state == "error") return "E"
+            if(isNaN(this.valueData.dash_info.value)) {
+                return this.valueData.dash_info.value
             } else {
-                return new Intl.NumberFormat('en-US', {}).format(this.badgeData.dash_info.value) 
+                return new Intl.NumberFormat('en-US', {}).format(this.valueData.dash_info.value) 
             }
         },
         state() {
-            return this.badgeData.dash_info.state
+            return this.valueData.dash_info.state
         },
         valueClass() {
             let c = "relative transition ease-in-out px-2 py-1 rounded-md text-center font-mono font-semibold transition border ring-offset-1 hover:ring-2"
@@ -59,10 +59,10 @@ export default {
                 "Fallback":   "text-slate-700 ring-slate-700",
             }
 
-            if(this.badgeData.dash_info.state == "loading") return c + " " + lookup["Warning"]
-            if(this.badgeData.dash_info.state == "error") return c + " " + lookup["Important"]
+            if(this.valueData.dash_info.state == "loading") return c + " " + lookup["Warning"]
+            if(this.valueData.dash_info.state == "error") return c + " " + lookup["Important"]
 
-            return c + " " + (this.badgeData.dash_info.value == 0 ? lookup["Gray"] : lookup[this.badgeData.style] ? lookup[this.badgeData.style] : lookup["Fallback"])
+            return c + " " + (this.valueData.dash_info.value == 0 ? lookup["Gray"] : lookup[this.valueData.style] ? lookup[this.valueData.style] : lookup["Fallback"])
         }
     }
 }

package/templates/dashboards/dash/src/dashboard.html

@@ -20,10 +20,15 @@
 <% } %>
       <style>section.custom-resource{visibility: hidden;opacity:0;}</style>
       <div id="app"></div>
-      <script>
+      <script>           
             // mimes: .cob-app tem estilos globais que se aplicam a elementos vuetify que mudam o aspecto previsto
             let section = document.getElementsByClassName("custom-resource")[0];
             section && section.classList.remove("cob-app"); //TODO: validar que isto é a melhor opção (considerar remover class na ui-all)
+
+            // se header não está visivel posiciona o top a 0
+            if(document.getElementById("header").style['display'] == 'none') {
+                  section.style['top'] = "0px"
+            }
       </script>
 <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
       <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>