@crombolo/backoffice-host 0.0.0-stage → 0.9.1

package/plugin/forms-client.js

@@ -0,0 +1,52 @@
+/**
+ * Reads and drives the Forms endpoints the server keeps at
+ * <backoffice>/crombolo/api/forms/*. The session cookie carries the auth.
+ */
+const base = () => {
+  const href = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
+  return `${href.replace(/\/$/, '')}/crombolo/api/forms`
+}
+
+const call = async (path, init) => {
+  const response = await fetch(`${base()}${path}`, {
+    credentials: 'include',
+    headers: {
+      accept: 'application/json',
+      ...(init?.body ? { 'content-type': 'application/json' } : {}),
+    },
+    ...init,
+  })
+  if (response.status === 403) throw new Error('You do not have permission for that.')
+  const body = await response.json().catch(() => ({}))
+  if (!response.ok && response.status !== 400 && response.status !== 409)
+    throw new Error(`forms responded ${response.status}`)
+  return { ok: response.ok, status: response.status, body }
+}
+
+export const listForms = async () => (await call('')).body.items ?? []
+
+export const readForm = async (key) => (await call(`/${encodeURIComponent(key)}`)).body
+
+export const saveForm = (definition) =>
+  call('', { method: 'PUT', body: JSON.stringify(definition) })
+
+export const deleteForm = (key) => call(`/${encodeURIComponent(key)}`, { method: 'DELETE' })
+
+export const listEntries = async (key, query = {}) => {
+  const params = new URLSearchParams()
+  for (const [name, value] of Object.entries(query))
+    if (value !== undefined && value !== '') params.set(name, String(value))
+  const suffix = params.toString() ? `?${params}` : ''
+  return (await call(`/${encodeURIComponent(key)}/entries${suffix}`)).body
+}
+
+export const setEntryState = (id, state) =>
+  call(`/entries/${encodeURIComponent(id)}/state`, {
+    method: 'POST',
+    body: JSON.stringify({ state }),
+  })
+
+export const deleteEntry = (id) => call(`/entries/${encodeURIComponent(id)}`, { method: 'DELETE' })
+
+/** The CSV is a download, so it is a link rather than a fetch. */
+export const entriesCsvUrl = (key) => `${base()}/${encodeURIComponent(key)}/entries.csv`

package/plugin/forms-entries.js

@@ -0,0 +1,244 @@
+/**
+ * The Forms section's Entries view.
+ *
+ * What a person actually does here: read what was submitted, approve or reject
+ * it, delete it, and take the lot away as CSV.
+ *
+ * A sensitive field arrives already redacted — the server withholds it rather
+ * than the UI hiding it — so this shows that it is withheld rather than
+ * pretending the answer was blank.
+ */
+import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import {
+  deleteEntry,
+  entriesCsvUrl,
+  listEntries,
+  listForms,
+  setEntryState,
+} from './forms-client.js'
+
+export default class CromboloFormsEntriesElement extends UmbLitElement {
+  static properties = {
+    _forms: { state: true },
+    _selected: { state: true },
+    _entries: { state: true },
+    _total: { state: true },
+    _state: { state: true },
+    _search: { state: true },
+    _includeSpam: { state: true },
+    _notice: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._forms = undefined
+    this._selected = ''
+    this._entries = []
+    this._total = 0
+    this._state = ''
+    this._search = ''
+    this._includeSpam = false
+    this._notice = ''
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    listForms().then(
+      (forms) => {
+        this._forms = forms
+        this._selected = forms[0]?.key ?? ''
+        if (this._selected) this.#load()
+      },
+      (error) => {
+        this._forms = []
+        this._notice = error.message
+      },
+    )
+  }
+
+  async #load() {
+    this._notice = ''
+    try {
+      const page = await listEntries(this._selected, {
+        state: this._state,
+        search: this._search,
+        includeSpam: this._includeSpam ? 'true' : '',
+        take: 200,
+      })
+      this._entries = page.items ?? []
+      this._total = page.total ?? 0
+    } catch (error) {
+      this._entries = []
+      this._notice = error.message
+    }
+  }
+
+  async #setState(entry, state) {
+    try {
+      const result = await setEntryState(entry.id, state)
+      if (!result.ok) this._notice = 'That entry could not be changed.'
+      await this.#load()
+    } catch (error) {
+      this._notice = error.message
+    }
+  }
+
+  async #remove(entry) {
+    if (!confirm('Delete this entry? It cannot be undone.')) return
+    try {
+      await deleteEntry(entry.id)
+      await this.#load()
+    } catch (error) {
+      this._notice = error.message
+    }
+  }
+
+  render() {
+    if (this._forms === undefined) return html`<uui-loader></uui-loader>`
+    if (this._forms.length === 0)
+      return html`<uui-box headline="Entries"><p>There are no forms yet.</p></uui-box>`
+
+    return html`
+      <uui-box headline="Entries">
+        <div class="filters">
+          <select
+            @change=${(event) => {
+              this._selected = event.target.value
+              this.#load()
+            }}
+          >
+            ${this._forms.map(
+              (form) =>
+                html`<option value=${form.key} ?selected=${form.key === this._selected}>${form.name}</option>`,
+            )}
+          </select>
+          <select
+            @change=${(event) => {
+              this._state = event.target.value
+              this.#load()
+            }}
+          >
+            <option value="">Any state</option>
+            <option value="submitted">Submitted</option>
+            <option value="approved">Approved</option>
+            <option value="rejected">Rejected</option>
+          </select>
+          <uui-input
+            placeholder="Search the answers"
+            .value=${this._search}
+            @change=${(event) => {
+              this._search = event.target.value
+              this.#load()
+            }}
+          ></uui-input>
+          <uui-toggle
+            label="Include spam"
+            .checked=${this._includeSpam}
+            @change=${(event) => {
+              this._includeSpam = event.target.checked
+              this.#load()
+            }}
+          ></uui-toggle>
+          <a class="csv" href=${entriesCsvUrl(this._selected)} download>Export CSV</a>
+        </div>
+
+        ${this._notice ? html`<p class="notice" role="alert">${this._notice}</p>` : nothing}
+        <p>${this._total} entr${this._total === 1 ? 'y' : 'ies'}.</p>
+
+        ${
+          this._entries.length === 0
+            ? html`<p>Nothing to show.</p>`
+            : repeat(
+                this._entries,
+                (entry) => entry.id,
+                (entry) => html`
+                  <div class="entry">
+                    <div class="meta">
+                      <strong>${new Date(entry.createDate).toLocaleString()}</strong>
+                      <span class="state">${entry.state}</span>
+                      ${entry.spam ? html`<span class="spam">spam</span>` : nothing}
+                    </div>
+                    <dl>
+                      ${entry.values.map(
+                        (value) => html`
+                          <dt>${value.fieldAlias}</dt>
+                          <dd>
+                            ${
+                              value.redacted
+                                ? html`<em>withheld — needs sensitive-data access</em>`
+                                : value.values.join(', ') || html`<em>not answered</em>`
+                            }
+                          </dd>
+                        `,
+                      )}
+                    </dl>
+                    <div class="actions">
+                      <uui-button look="secondary" label="Approve" @click=${() => this.#setState(entry, 'approved')}></uui-button>
+                      <uui-button look="secondary" label="Reject" @click=${() => this.#setState(entry, 'rejected')}></uui-button>
+                      <uui-button look="secondary" color="danger" label="Delete" @click=${() => this.#remove(entry)}></uui-button>
+                    </div>
+                  </div>
+                `,
+              )
+        }
+      </uui-box>
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--uui-size-layout-1, 24px);
+    }
+    .filters {
+      display: flex;
+      gap: var(--uui-size-space-4, 12px);
+      align-items: center;
+      flex-wrap: wrap;
+      margin-bottom: var(--uui-size-layout-1, 24px);
+    }
+    .entry {
+      border-top: 1px solid var(--uui-color-border, #e5e5e5);
+      padding: var(--uui-size-space-4, 12px) 0;
+    }
+    .meta {
+      display: flex;
+      gap: var(--uui-size-space-4, 12px);
+      align-items: baseline;
+    }
+    .state,
+    .spam {
+      font-size: var(--uui-type-small-size, 0.8rem);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+    .spam {
+      color: var(--uui-color-danger, #d42054);
+    }
+    dl {
+      display: grid;
+      grid-template-columns: minmax(8rem, 14rem) 1fr;
+      gap: var(--uui-size-space-2, 6px) var(--uui-size-space-4, 12px);
+      margin: var(--uui-size-space-4, 12px) 0;
+    }
+    dt {
+      color: var(--uui-color-text-alt, #666);
+    }
+    dd {
+      margin: 0;
+    }
+    .actions {
+      display: flex;
+      gap: var(--uui-size-space-4, 12px);
+    }
+    .notice {
+      color: var(--uui-color-danger, #d42054);
+    }
+    .csv {
+      margin-left: auto;
+    }
+  `
+}
+
+customElements.define('crombolo-forms-entries', CromboloFormsEntriesElement)

package/plugin/forms-overview.js

@@ -0,0 +1,380 @@
+/**
+ * The Forms section's list, and the editor for one form.
+ *
+ * Umbraco Forms' designer is drag-and-drop over a canvas. This is a table: a
+ * form is a file, and what somebody edits here is written straight back to
+ * TOML, so the shape that matters is the one a diff will show. Reordering,
+ * multi-page layout and the richer per-type settings are refinements on top.
+ *
+ * Saving sends the whole definition. The server writes it to TOML and reads it
+ * back with the strict parser before keeping it, so a refusal here is the same
+ * refusal a hand-written file would get.
+ */
+import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { deleteForm, listForms, readForm, saveForm } from './forms-client.js'
+
+const FIELD_TYPES = [
+  'shortAnswer',
+  'longAnswer',
+  'email',
+  'number',
+  'date',
+  'checkbox',
+  'dropdown',
+  'singleChoice',
+  'multipleChoice',
+  'fileUpload',
+  'dataConsent',
+  'titleAndDescription',
+  'richText',
+  'hidden',
+]
+const CHOICE_TYPES = new Set(['dropdown', 'singleChoice', 'multipleChoice'])
+
+export default class CromboloFormsOverviewElement extends UmbLitElement {
+  static properties = {
+    _forms: { state: true },
+    _editing: { state: true },
+    _problems: { state: true },
+    _notice: { state: true },
+    _busy: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._forms = undefined
+    this._editing = undefined
+    this._problems = []
+    this._notice = ''
+    this._busy = false
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.#load()
+  }
+
+  async #load() {
+    try {
+      this._forms = await listForms()
+    } catch (error) {
+      this._forms = []
+      this._notice = error.message
+    }
+  }
+
+  async #edit(key) {
+    this._problems = []
+    this._notice = ''
+    const detail = await readForm(key)
+    this._editing = structuredClone(detail.definition)
+  }
+
+  #new() {
+    this._problems = []
+    this._notice = ''
+    this._editing = {
+      key: crypto.randomUUID(),
+      alias: '',
+      name: '',
+      storeEntries: true,
+      requiresApproval: false,
+      honeypot: true,
+      pages: [{ groups: [{ columns: 1, fields: [] }] }],
+      workflows: [],
+    }
+  }
+
+  get #fields() {
+    return this._editing?.pages?.[0]?.groups?.[0]?.fields ?? []
+  }
+
+  #touch() {
+    // Lit tracks the reference, not what is inside it.
+    this._editing = { ...this._editing }
+  }
+
+  async #save() {
+    this._busy = true
+    this._problems = []
+    this._notice = ''
+    try {
+      const result = await saveForm(this._editing)
+      if (result.ok) {
+        this._notice = 'Saved.'
+        this._editing = undefined
+        await this.#load()
+      } else {
+        this._problems = result.body.problems ?? []
+        if (result.body.status === 'readOnly')
+          this._notice = 'The schema directory is read-only on this node.'
+      }
+    } catch (error) {
+      this._notice = error.message
+    } finally {
+      this._busy = false
+    }
+  }
+
+  async #remove(form) {
+    if (!confirm(`Delete the form "${form.name}"? Its entries are kept.`)) return
+    try {
+      const result = await deleteForm(form.key)
+      if (!result.ok) this._notice = 'That form could not be deleted.'
+      await this.#load()
+    } catch (error) {
+      this._notice = error.message
+    }
+  }
+
+  render() {
+    if (this._forms === undefined) return html`<uui-loader></uui-loader>`
+    return html`
+      ${this._notice ? html`<uui-box><p>${this._notice}</p></uui-box>` : nothing}
+      ${this._editing ? this.#editor() : this.#list()}
+    `
+  }
+
+  #list() {
+    return html`
+      <uui-box headline="Forms">
+        <p>
+          A form is a file in <code>schema/forms/</code>. Editing one here writes that
+          file, so the change can be reviewed in a pull request like any other type.
+        </p>
+        ${
+          this._forms.length === 0
+            ? html`<p>There are no forms yet.</p>`
+            : html`
+                <uui-table>
+                  <uui-table-head>
+                    <uui-table-head-cell>Name</uui-table-head-cell>
+                    <uui-table-head-cell>Alias</uui-table-head-cell>
+                    <uui-table-head-cell>Fields</uui-table-head-cell>
+                    <uui-table-head-cell>Entries</uui-table-head-cell>
+                    <uui-table-head-cell></uui-table-head-cell>
+                  </uui-table-head>
+                  ${repeat(
+                    this._forms,
+                    (form) => form.key,
+                    (form) => html`
+                      <uui-table-row>
+                        <uui-table-cell>${form.name}</uui-table-cell>
+                        <uui-table-cell><code>${form.alias}</code></uui-table-cell>
+                        <uui-table-cell>${form.fieldCount}</uui-table-cell>
+                        <uui-table-cell>${form.storeEntries ? 'stored' : 'not stored'}</uui-table-cell>
+                        <uui-table-cell>
+                          <uui-button look="secondary" label="Edit" @click=${() => this.#edit(form.key)}></uui-button>
+                          <uui-button look="secondary" color="danger" label="Delete" @click=${() => this.#remove(form)}></uui-button>
+                        </uui-table-cell>
+                      </uui-table-row>
+                    `,
+                  )}
+                </uui-table>
+              `
+        }
+        <div class="actions">
+          <uui-button look="primary" label="Add a form" @click=${() => this.#new()}></uui-button>
+        </div>
+      </uui-box>
+    `
+  }
+
+  #editor() {
+    const form = this._editing
+    const text = (key, label, hint) => html`
+      <uui-form-layout-item>
+        <uui-label slot="label">${label}</uui-label>
+        ${hint ? html`<span slot="description">${hint}</span>` : nothing}
+        <uui-input
+          .value=${form[key] ?? ''}
+          @change=${(event) => {
+            form[key] = event.target.value
+            this.#touch()
+          }}
+        ></uui-input>
+      </uui-form-layout-item>
+    `
+    return html`
+      <uui-box headline=${form.alias ? `Form: ${form.name || form.alias}` : 'A new form'}>
+        ${
+          this._problems.length > 0
+            ? html`<div class="problems" role="alert">
+                <p>This form was not saved:</p>
+                <ul>
+                  ${this._problems.map((problem) => html`<li><code>${problem.path}</code> ${problem.message}</li>`)}
+                </ul>
+              </div>`
+            : nothing
+        }
+        ${text('name', 'Name')}
+        ${text('alias', 'Alias', 'Letters and numbers, starting with a letter. The file is named after it.')}
+        ${text('messageOnSubmit', 'Message on submit')}
+        ${text('submitLabel', 'Submit button')}
+        <uui-form-layout-item>
+          <uui-label slot="label">Store entries</uui-label>
+          <uui-toggle
+            .checked=${form.storeEntries !== false}
+            @change=${(event) => {
+              form.storeEntries = event.target.checked
+              this.#touch()
+            }}
+          ></uui-toggle>
+        </uui-form-layout-item>
+
+        <h4>Fields</h4>
+        <uui-table>
+          <uui-table-head>
+            <uui-table-head-cell>Caption</uui-table-head-cell>
+            <uui-table-head-cell>Alias</uui-table-head-cell>
+            <uui-table-head-cell>Type</uui-table-head-cell>
+            <uui-table-head-cell>Choices</uui-table-head-cell>
+            <uui-table-head-cell>Required</uui-table-head-cell>
+            <uui-table-head-cell>Sensitive</uui-table-head-cell>
+            <uui-table-head-cell></uui-table-head-cell>
+          </uui-table-head>
+          ${repeat(
+            this.#fields,
+            (_field, index) => index,
+            (field, index) => html`
+              <uui-table-row>
+                <uui-table-cell>
+                  <uui-input
+                    .value=${field.caption ?? ''}
+                    @change=${(event) => {
+                      field.caption = event.target.value
+                      this.#touch()
+                    }}
+                  ></uui-input>
+                </uui-table-cell>
+                <uui-table-cell>
+                  <uui-input
+                    .value=${field.alias ?? ''}
+                    @change=${(event) => {
+                      field.alias = event.target.value
+                      this.#touch()
+                    }}
+                  ></uui-input>
+                </uui-table-cell>
+                <uui-table-cell>
+                  <select
+                    @change=${(event) => {
+                      field.type = event.target.value
+                      if (!CHOICE_TYPES.has(field.type)) field.values = []
+                      this.#touch()
+                    }}
+                  >
+                    ${FIELD_TYPES.map(
+                      (type) =>
+                        html`<option value=${type} ?selected=${type === field.type}>${type}</option>`,
+                    )}
+                  </select>
+                </uui-table-cell>
+                <uui-table-cell>
+                  ${
+                    CHOICE_TYPES.has(field.type)
+                      ? html`<uui-input
+                          placeholder="One, Two, Three"
+                          .value=${(field.values ?? []).join(', ')}
+                          @change=${(event) => {
+                            field.values = event.target.value
+                              .split(',')
+                              .map((value) => value.trim())
+                              .filter(Boolean)
+                            this.#touch()
+                          }}
+                        ></uui-input>`
+                      : nothing
+                  }
+                </uui-table-cell>
+                <uui-table-cell>
+                  <uui-toggle
+                    .checked=${field.mandatory === true}
+                    @change=${(event) => {
+                      field.mandatory = event.target.checked
+                      this.#touch()
+                    }}
+                  ></uui-toggle>
+                </uui-table-cell>
+                <uui-table-cell>
+                  <uui-toggle
+                    .checked=${field.sensitive === true}
+                    @change=${(event) => {
+                      field.sensitive = event.target.checked
+                      this.#touch()
+                    }}
+                  ></uui-toggle>
+                </uui-table-cell>
+                <uui-table-cell>
+                  <uui-button
+                    look="secondary"
+                    color="danger"
+                    label="Remove"
+                    @click=${() => {
+                      this.#fields.splice(index, 1)
+                      this.#touch()
+                    }}
+                  ></uui-button>
+                </uui-table-cell>
+              </uui-table-row>
+            `,
+          )}
+        </uui-table>
+        <div class="actions">
+          <uui-button
+            look="secondary"
+            label="Add a field"
+            @click=${() => {
+              this.#fields.push({
+                alias: '',
+                type: 'shortAnswer',
+                caption: '',
+                mandatory: false,
+                sensitive: false,
+                values: [],
+                accept: [],
+              })
+              this.#touch()
+            }}
+          ></uui-button>
+          <uui-button look="primary" label="Save" ?disabled=${this._busy} @click=${() => this.#save()}></uui-button>
+          <uui-button look="secondary" label="Cancel" @click=${() => {
+            this._editing = undefined
+            this._problems = []
+          }}></uui-button>
+        </div>
+      </uui-box>
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--uui-size-layout-1, 24px);
+    }
+    p,
+    ul {
+      max-width: 70ch;
+      line-height: 1.5;
+    }
+    h4 {
+      margin-top: var(--uui-size-layout-1, 24px);
+    }
+    .actions {
+      display: flex;
+      gap: var(--uui-size-space-4, 12px);
+      margin-top: var(--uui-size-layout-1, 24px);
+    }
+    .problems {
+      border-left: 3px solid var(--uui-color-danger, #d42054);
+      padding-left: var(--uui-size-space-4, 12px);
+      margin-bottom: var(--uui-size-layout-1, 24px);
+    }
+    code {
+      font-size: 0.9em;
+    }
+  `
+}
+
+customElements.define('crombolo-forms-overview', CromboloFormsOverviewElement)