cob-cli 2.7.0 → 2.9.0

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

@@ -0,0 +1,49 @@
+<template>
+    <li :class="wrapperClass">
+        <div class="py-4 px-5 space-y-2">
+            <slot></slot>
+        </div>
+    </li>
+</template>
+
+<script>
+export default {
+    props: {
+        rowSpan: String,
+        colSpan: String,
+        title: String,
+        showTitle: Boolean
+    },
+    computed: {
+        wrapperClass() {
+            const c = "w-full bg-cobbg rounded-md border border-cobline" // hover:ring-1 ring-slate-400/50 ring-offset-1;
+
+            // Force possible dynamic classes to be loaded
+            const dynamicRowClasses = {
+                1:  "md:row-span-1",
+                2:  "md:row-span-2",
+                3:  "md:row-span-3",
+                4:  "md:row-span-4",
+                5:  "md:row-span-5",
+                6:  "md:row-span-6",
+                full: "md:row-span-full"
+            }
+            const rspan = this.rowSpan ? " " + dynamicRowClasses[this.rowSpan] : "";
+
+            // Force possible dynamic classes to be loaded
+            const dynamicColClasses = {
+                1:  "md:col-span-1",
+                2:  "md:col-span-2",
+                3:  "md:col-span-3",
+                4:  "md:col-span-4",
+                5:  "md:col-span-5",
+                6:  "md:col-span-6",
+                full: "md:col-span-full"
+            }
+            const cspan = this.colSpan ?  " " + dynamicColClasses[this.colSpan] : ""; 
+
+            return c + rspan + cspan;
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+    <aside class="overflow-y-auto py-2 px-3 bg-white rounded-lg">
+        <ul class="space-y-2">
+            <li>
+                <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-gray-100">
+                   <svg class="w-6 h-6 text-gray-400 transition duration-75" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
+                   <span class="ml-3">Dashboard</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-gray-100">
+                   <svg class="w-6 h-6 text-gray-400 transition duration-75" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
+                   <span class="ml-3">Alternative</span>
+                </a>
+            </li>
+        </ul>
+    </aside>
+</template>
+
+<script>
+export default {
+}
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+    <ul :class="wrapperClass">
+        <slot></slot>
+    </ul>
+</template>
+
+<script>
+export default {
+    props: { gridCols: String },
+    computed: {
+        wrapperClass() {
+            const c = "grid grid-cols-1 gap-2 content-center md:grid-flow-row-dense";
+
+            // Force possible dynamic classes to be loaded
+            const dynamicClasses = {
+                1: "md:grid-cols-1",
+                2: "md:grid-cols-2",
+                3: "md:grid-cols-3",
+                4: "md:grid-cols-4",
+                5: "md:grid-cols-5",
+                6: "md:grid-cols-6",
+                7: "md:grid-cols-7",
+                8: "md:grid-cols-8",
+                9: "md:grid-cols-9",
+                10: "md:grid-cols-10",
+                11: "md:grid-cols-11",
+                12: "md:grid-cols-12",
+                none: "md:grid-cols-none"
+            }
+
+            const gcols = this.gridCols ? " " + dynamicClasses[this.gridCols] : "";
+            return c + gcols;
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,19 @@
+<template>
+    <ul class="space-y-2 text-slate-700 decoration-slate-700">
+        <li v-for="(item, i) in componentData.items" :key="item.text + 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"/>
+            </a>
+        </li>
+    </ul>
+</template>
+
+<script>
+export default {
+    props: {
+        componentData: Object
+    }
+}
+</script>

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

@@ -0,0 +1,13 @@
+<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>
+</template>
+
+<script>
+export default {
+    props: {
+        componentData: Object
+    }
+}
+</script>

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

@@ -0,0 +1,53 @@
+<template>
+    <table class="w-full table-auto">
+        <thead v-if="headers.length > 0">
+            <tr class="uppercase text-xs text-slate-700 tracking-wider underline underline-offset-4">
+                <td :class="'py-2 ' + headers_style">{{ headers[0] }}</td>
+                <td v-for="header in headers.slice(1)" :key="header"
+                    :class="'py-2 text-right ' + headers_style">{{ header }}</td>
+            </tr>
+        </thead>
+        <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"
+                    class="py-2 text-right">
+                    <TotalsBadge :badge-data="badge" />
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script>
+import TotalsBadge from './TotalsBadge.vue'
+export default {
+    components: { TotalsBadge },
+    props: { componentData: Object },
+    computed: {
+        valuesGridClass() {
+            const dynamicClasses = {
+                1: "grid-cols-1",
+                2: "grid-cols-2",
+                3: "grid-cols-3",
+                4: "grid-cols-4",
+                5: "grid-cols-5",
+                6: "grid-cols-6",
+                7: "grid-cols-7",
+                8: "grid-cols-8",
+                9: "grid-cols-9",
+                10: "grid-cols-10",
+                11: "grid-cols-11",
+                12: "grid-cols-12",
+                none: "grid-cols-none"
+            }
+            // 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

@@ -0,0 +1,69 @@
+<template>
+    <div :class="{'animate-pulse':signalChange}">
+        <a :href="badgeData.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">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+        </a>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        badgeData: Object
+    },
+    data () {
+      return {
+        signalChange: false
+      }
+    },
+    watch: {
+      state(newState) {
+        if(newState == "ready") {
+            this.signalChange = true;
+            setTimeout( () => this.signalChange = false,8000)
+        }
+      }
+    },
+    computed: {
+        updating() {
+            return this.badgeData.dash_info.state == "updating" || this.badgeData.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
+            } else {
+                return new Intl.NumberFormat('en-US', {}).format(this.badgeData.dash_info.value) 
+            }
+        },
+        state() {
+            return this.badgeData.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"
+
+            const lookup = {
+                "Info":      "text-sky-600 border-sky-600 bg-sky-200/10 ring-sky-600",
+                "Success":   "text-lime-500  border-lime-500 bg-lime-200/10 ring-lime-500",
+                "Warning":   "text-amber-500 border-amber-500 bg-amber-200/10 ring-amber-500",
+                "Important": "text-rose-600  border-rose-600 bg-rose-200/10 ring-rose-600",
+
+                "Gray":       "text-gray-400 border-gray-200 bg-gray-200/10 ring-gray-200",
+                "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"]
+
+            return c + " " + (this.badgeData.dash_info.value == 0 ? lookup["Gray"] : lookup[this.badgeData.style] ? lookup[this.badgeData.style] : lookup["Fallback"])
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,34 @@
+<% if (htmlWebpackPlugin.options.rmIntegrated == false) { %>  
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta http-equiv="X-UA-Compatible" content="IE=edge">
+      <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
+<% } %>      
+<% for (var css in htmlWebpackPlugin.files.css) { %>
+      <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="preload" as="style">
+      <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+<% } %>
+<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+      <link href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" rel="preload" as="script">
+<% } %>
+<% if (htmlWebpackPlugin.options.rmIntegrated == false) { %>  
+    </head>
+    <body>
+<% } %>
+      <style>section.custom-resource{visibility: hidden;opacity:0;}</style>
+      <div id="app"></div>
+      <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)
+      </script>
+<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+      <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
+<% } %>
+<% if (htmlWebpackPlugin.options.rmIntegrated == false) { %>  
+    </body>
+  </html>
+<% } %>

package/templates/dashboards/dash/src/input.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Reverte hide feito no dashboard.html */
+section.custom-resource {
+    visibility: visible !important;
+    opacity: 1 !important;
+}

package/templates/dashboards/dash/src/main.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+import "./output.css";
+import './assets/css/all.min.css';
+
+new Vue({
+  render: function (h) { return h(App) }
+}).$mount('#app')