@voxgig/build 4.1.0 → 4.3.0

package/tm/web/web/src/cmp/admin.js.frag

@@ -0,0 +1,254 @@
+// Entity admin: a django-admin-style generic CRUD UI, driven entirely by
+// the compiled model (fetched from /model.json). The entity_admin plugin
+// owns the model + per-entity message mapping (state); the
+// <vg-entity-admin> component renders nav / list / form and talks to the
+// plugin (and through it, the backend) only via bus messages.
+
+import { bus, emit } from '../bus.js'
+
+
+// Fields managed by the system, not the form.
+const SYS_FIELDS = ['id', 'owner_id', 't_c', 't_m', 't_mh', 't_ch']
+
+
+bus.use(function entity_admin() {
+  const seneca = this
+
+  let model = null
+
+  // Entities from the model: [{ zone, name, canon, fields }]
+  function entities() {
+    const out = []
+    const ent = (model && model.main.ent) || {}
+    for (const zone of Object.keys(ent)) {
+      if ('sys' === zone) {
+        continue
+      }
+      for (const name of Object.keys(ent[zone])) {
+        out.push({
+          zone,
+          name,
+          canon: zone + '/' + name,
+          fields: ent[zone][name].field || {},
+        })
+      }
+    }
+    return out
+  }
+
+  // Message mapping convention: entity zone/name -> aim:<zone>,<verb>:<name>.
+  function msgFor(canon, verb) {
+    const [zone, name] = canon.split('/')
+    return { aim: zone, [verb]: name }
+  }
+
+  seneca.add('cmp:entity_admin,load:model', function (msg, reply) {
+    if (model) {
+      return reply({ ok: true, entities: entities() })
+    }
+    fetch('/model.json').then((r) => r.json()).then((m) => {
+      model = m
+      reply({ ok: true, entities: entities() })
+    }).catch((e) => reply({ ok: false, why: String(e) }))
+  })
+
+  seneca.add('cmp:entity_admin,list:item', function (msg, reply) {
+    this.act(msgFor(msg.canon, 'list'), function (err, out) {
+      reply(err ? { ok: false, why: err.message } : out)
+    })
+  })
+
+  seneca.add('cmp:entity_admin,save:item', function (msg, reply) {
+    this.act({ ...msgFor(msg.canon, 'save'), item: msg.item },
+      function (err, out) {
+        if (!err && out.ok) {
+          emit('entity', { canon: msg.canon })
+        }
+        reply(err ? { ok: false, why: err.message } : out)
+      })
+  })
+
+  seneca.add('cmp:entity_admin,remove:item', function (msg, reply) {
+    this.act({ ...msgFor(msg.canon, 'remove'), id: msg.id },
+      function (err, out) {
+        if (!err && out.ok) {
+          emit('entity', { canon: msg.canon })
+        }
+        reply(err ? { ok: false, why: err.message } : out)
+      })
+  })
+})
+
+
+function inputFor(fname, fdef, value) {
+  const kind = (fdef && fdef.kind) || 'String'
+  const val = null == value ? '' : value
+  if ('Boolean' === kind) {
+    return `<input name="${fname}" type="checkbox" ${true === value ? 'checked' : ''} />`
+  }
+  if ('Number' === kind) {
+    return `<input name="${fname}" type="number" value="${val}" />`
+  }
+  return `<input name="${fname}" type="text" value="${String(val).replace(/"/g, '&quot;')}" />`
+}
+
+
+class VgEntityAdmin extends HTMLElement {
+  constructor() {
+    super()
+    this.canon = null
+    this.editing = null   // item being edited, or {} for new
+  }
+
+  connectedCallback() {
+    this.render()
+  }
+
+  async render() {
+    const res = await bus.post('cmp:entity_admin,load:model')
+    if (!res.ok) {
+      this.innerHTML = `<p>model load failed: ${res.why}</p>`
+      return
+    }
+    this.entities = res.entities
+    if (null == this.canon && 0 < res.entities.length) {
+      this.canon = res.entities[0].canon
+    }
+
+    const nav = res.entities.map((e) =>
+      `<a href="#" class="vg-nav ${e.canon === this.canon ? 'sel' : ''}"
+        data-canon="${e.canon}">${e.canon}</a>`).join(' ')
+
+    this.innerHTML = `
+      <div class="vg-admin">
+        <nav>${nav}</nav>
+        <div id="vg-list"></div>
+        <div id="vg-form"></div>
+      </div>`
+
+    for (const a of this.querySelectorAll('.vg-nav')) {
+      a.onclick = (ev) => {
+        ev.preventDefault()
+        this.canon = a.dataset.canon
+        this.editing = null
+        this.render()
+      }
+    }
+
+    await this.renderList()
+    this.renderForm()
+  }
+
+  entdef() {
+    return this.entities.find((e) => e.canon === this.canon)
+  }
+
+  async renderList() {
+    const out = await bus.post('cmp:entity_admin,list:item',
+      { canon: this.canon })
+    const items = (out.ok && out.list) || []
+    const fields = Object.keys(this.entdef().fields)
+      .filter((f) => !SYS_FIELDS.includes(f))
+
+    const head = fields.map((f) => `<th>${f}</th>`).join('')
+    const rows = items.map((item) => `
+      <tr data-id="${item.id}">
+        ${fields.map((f) => `<td>${null == item[f] ? '' : item[f]}</td>`).join('')}
+        <td>
+          <button class="vg-edit" data-id="${item.id}">edit</button>
+          <button class="vg-del" data-id="${item.id}">delete</button>
+        </td>
+      </tr>`).join('')
+
+    this.querySelector('#vg-list').innerHTML = `
+      <h2>${this.canon} <button id="vg-new">new</button></h2>
+      <table class="vg-table">
+        <thead><tr>${head}<th></th></tr></thead>
+        <tbody>${rows}</tbody>
+      </table>
+      <p id="vg-count">${items.length} item${1 === items.length ? '' : 's'}</p>`
+
+    this.items = items
+    this.querySelector('#vg-new').onclick = () => {
+      this.editing = {}
+      this.renderForm()
+    }
+    for (const b of this.querySelectorAll('.vg-edit')) {
+      b.onclick = () => {
+        this.editing = this.items.find((i) => i.id === b.dataset.id)
+        this.renderForm()
+      }
+    }
+    for (const b of this.querySelectorAll('.vg-del')) {
+      b.onclick = async () => {
+        await bus.post('cmp:entity_admin,remove:item',
+          { canon: this.canon, id: b.dataset.id })
+        this.editing = null
+        await this.renderList()
+        this.renderForm()
+      }
+    }
+  }
+
+  renderForm() {
+    const box = this.querySelector('#vg-form')
+    if (null == this.editing) {
+      box.innerHTML = ''
+      return
+    }
+
+    const def = this.entdef()
+    const fields = Object.keys(def.fields)
+      .filter((f) => !SYS_FIELDS.includes(f))
+
+    box.innerHTML = `
+      <form class="vg-entity-form">
+        <h3>${this.editing.id ? 'Edit' : 'New'} ${this.canon}</h3>
+        ${fields.map((f) => `
+          <label>${(def.fields[f] && def.fields[f].label) || f}
+            ${inputFor(f, def.fields[f], this.editing[f])}
+          </label>`).join('')}
+        <button type="submit">Save</button>
+        <button type="button" id="vg-cancel">Cancel</button>
+        <div id="vg-form-err"></div>
+      </form>`
+
+    box.querySelector('#vg-cancel').onclick = () => {
+      this.editing = null
+      this.renderForm()
+    }
+
+    box.querySelector('form').onsubmit = async (ev) => {
+      ev.preventDefault()
+      const item = { ...(this.editing.id ? { id: this.editing.id } : {}) }
+      for (const f of fields) {
+        const input = box.querySelector(`[name="${f}"]`)
+        const kind = (def.fields[f] && def.fields[f].kind) || 'String'
+        if ('Boolean' === kind) {
+          item[f] = input.checked
+        }
+        else if ('' === input.value) {
+          // Blank optional field: leave unset (don't send an empty string;
+          // an optional/Skip field rejects '').
+          continue
+        }
+        else {
+          item[f] = 'Number' === kind ? Number(input.value) : input.value
+        }
+      }
+      const res = await bus.post('cmp:entity_admin,save:item',
+        { canon: this.canon, item })
+      if (!res.ok) {
+        box.querySelector('#vg-form-err').textContent =
+          'save failed: ' + (res.why || '')
+      }
+      else {
+        this.editing = null
+        await this.renderList()
+        this.renderForm()
+      }
+    }
+  }
+}
+
+customElements.define('vg-entity-admin', VgEntityAdmin)

package/tm/web/web/src/cmp/app.js.frag

@@ -0,0 +1,30 @@
+// App shell: shows the auth component always; the entity admin only when
+// signed in. Reacts to bus auth events.
+
+import { bus, onEvent } from '../bus.js'
+
+
+class VgApp extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <header><h1>$$Name$$</h1><vg-auth></vg-auth></header>
+      <main id="vg-main"></main>`
+
+    onEvent('auth', ({ user }) => this.setMain(user))
+
+    // Resolve the cookie session on load.
+    bus.post('cmp:auth,load:state')
+  }
+
+  setMain(user) {
+    const main = this.querySelector('#vg-main')
+    if (user) {
+      main.innerHTML = '<vg-entity-admin></vg-entity-admin>'
+    }
+    else {
+      main.innerHTML = '<p class="vg-hint">Sign in to manage your data.</p>'
+    }
+  }
+}
+
+customElements.define('vg-app', VgApp)

package/tm/web/web/src/cmp/auth.js.frag

@@ -0,0 +1,97 @@
+// Auth: a seneca plugin holding the signed-in principal, and the
+// <vg-auth> web component (sign-in form / signed-in bar) driving it
+// purely through bus messages.
+
+import { bus, emit } from '../bus.js'
+
+
+bus.use(function auth_cmp() {
+  const seneca = this
+
+  let user = null
+
+  seneca.add('cmp:auth,get:state', function (msg, reply) {
+    reply({ ok: true, user })
+  })
+
+  // Resolve current auth from the backend (cookie session).
+  seneca.add('cmp:auth,load:state', function (msg, reply) {
+    this.act('aim:req,on:auth,load:auth', function (err, out) {
+      user = (!err && out.ok && 'signedin' === out.state) ? out.user : null
+      emit('auth', { user })
+      reply({ ok: true, user })
+    })
+  })
+
+  seneca.add('cmp:auth,signin:user', function (msg, reply) {
+    this.act('aim:req,on:auth,signin:user', {
+      email: msg.email,
+      password: msg.password,
+    }, function (err, out) {
+      if (err || !out.ok) {
+        return reply({ ok: false, why: (out && out.why) || 'signin-failed' })
+      }
+      user = out.user
+      emit('auth', { user })
+      reply({ ok: true, user })
+    })
+  })
+
+  seneca.add('cmp:auth,signout:user', function (msg, reply) {
+    this.act('aim:req,on:auth,signout:user', function () {
+      user = null
+      emit('auth', { user })
+      reply({ ok: true })
+    })
+  })
+})
+
+
+class VgAuth extends HTMLElement {
+  connectedCallback() {
+    this.render()
+  }
+
+  async render() {
+    const state = await bus.post('cmp:auth,get:state')
+
+    if (state.user) {
+      this.innerHTML = `
+        <div class="vg-auth-bar">
+          <span>Signed in: <b>${state.user.email}</b></span>
+          <button id="vg-signout">Sign out</button>
+        </div>`
+      this.querySelector('#vg-signout').onclick = async () => {
+        await bus.post('cmp:auth,signout:user')
+        this.render()
+      }
+    }
+    else {
+      this.innerHTML = `
+        <form class="vg-auth-form">
+          <h2>Sign in</h2>
+          <label>Email <input name="email" type="email" required /></label>
+          <label>Password <input name="password" type="password" required /></label>
+          <button type="submit">Sign in</button>
+          <div class="vg-auth-err" id="vg-auth-err"></div>
+        </form>`
+      this.querySelector('form').onsubmit = async (ev) => {
+        ev.preventDefault()
+        const fd = new FormData(ev.target)
+        const res = await bus.post('cmp:auth,signin:user', {
+          email: fd.get('email'),
+          password: fd.get('password'),
+        })
+        if (!res.ok) {
+          this.querySelector('#vg-auth-err').textContent =
+            'Sign in failed: ' + res.why
+        }
+        else {
+          this.render()
+        }
+      }
+    }
+  }
+}
+
+customElements.define('vg-auth', VgAuth)

package/tm/web/web/src/main.js.frag

@@ -0,0 +1,10 @@
+// Todo SPA entry: web components on a Seneca service bus (experimental).
+// No framework: each component is a custom element backed by a seneca
+// plugin (state), and all data flows are bus messages - aim:* messages
+// travel to the backend gateway via the seneca-browser fetch transport.
+
+import './style.css'
+import './bus.js'
+import './cmp/auth.js'
+import './cmp/admin.js'
+import './cmp/app.js'

package/tm/web/web/src/style.css.frag

@@ -0,0 +1,26 @@
+* { box-sizing: border-box; }
+body { font: 15px/1.5 system-ui, sans-serif; margin: 0; color: #1c2733; }
+header { display: flex; align-items: center; justify-content: space-between;
+  padding: 0.6rem 1.2rem; border-bottom: 2px solid #e3e8ee; }
+header h1 { font-size: 1.2rem; margin: 0; }
+main { padding: 1.2rem; max-width: 60rem; }
+
+.vg-auth-bar { display: flex; gap: 0.8rem; align-items: center; }
+.vg-auth-form { max-width: 22rem; display: grid; gap: 0.6rem; }
+.vg-auth-form label { display: grid; gap: 0.2rem; }
+.vg-auth-err { color: #b3261e; min-height: 1.2em; }
+
+.vg-admin nav { margin-bottom: 1rem; }
+.vg-admin nav a { margin-right: 0.8rem; text-decoration: none; }
+.vg-admin nav a.sel { font-weight: 700; border-bottom: 2px solid #1c2733; }
+
+.vg-table { border-collapse: collapse; width: 100%; }
+.vg-table th, .vg-table td { text-align: left; padding: 0.35rem 0.6rem;
+  border-bottom: 1px solid #e3e8ee; }
+
+.vg-entity-form { margin-top: 1.2rem; max-width: 26rem; display: grid;
+  gap: 0.6rem; padding: 1rem; border: 1px solid #e3e8ee; border-radius: 6px; }
+.vg-entity-form label { display: grid; gap: 0.2rem; }
+
+button { cursor: pointer; padding: 0.25rem 0.7rem; }
+.vg-hint { color: #5b6b7b; }