SAML; Dashboard

app/assets/app/cobalt/Listing.component.js

@@ -0,0 +1,30 @@
+import { Component } from '../../lib/vues6/vues6.js'
+
+const template = `
+<div>
+    <h2 class="mb-4" v-if="definition.title">{{ definition.title }}</h2>
+    <table class="table">
+        <thead>
+            <tr>
+                <th scope="col">#</th>
+                <th scope="col" v-for="col of definition.columns">{{ col.name }}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(row, index) of definition.data">
+                <th scope="row">{{ index + 1 }}</th>
+                <td v-for="col of definition.columns">
+                    <span v-if="col.renderer === 'boolean'">{{ col.field ? 'Yes' : 'No' }}</span>
+                    <span v-if="col.renderer !== 'boolean'">{{ col.field in row ? row[col.field] : '-' }}</span>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+`
+
+export default class ListingComponent extends Component {
+    static get selector() { return 'cobalt-listing' }
+    static get template() { return template }
+    static get props() { return ['definition'] }
+}