@crombolo/backoffice-host 0.12.1 → 0.13.2

package/plugin/forms-overview.js

@@ -14,6 +14,7 @@
 import '@umbraco-cms/backoffice/document'
 import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification'
 import {
   deleteForm,
   listForms,
@@ -61,8 +62,13 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
     _types: { state: true },
   }
 
+  #notifications
+
   constructor() {
     super()
+    this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
+      this.#notifications = context
+    })
     this._forms = undefined
     this._editing = undefined
     this._problems = []
@@ -490,16 +496,19 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
     try {
       const result = await saveForm(this._editing)
       if (result.ok) {
-        this._notice = 'Saved.'
+        // The green toast every workspace shows on a save.
+        this.#notifications?.peek('positive', { data: { message: 'Form 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.'
+        if (result.body.status === 'readOnly' && this._problems.length === 0)
+          this._problems = [
+            { path: '', message: 'The schema directory is read-only on this node.' },
+          ]
       }
     } catch (error) {
-      this._notice = error.message
+      this._problems = [{ path: '', message: error.message }]
     } finally {
       this._busy = false
     }
@@ -517,20 +526,19 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
   }
 
   render() {
-    if (this._forms === undefined) return html`<uui-loader></uui-loader>`
-    return html`
+    if (this._forms === undefined) return html`<div class="list"><uui-loader></uui-loader></div>`
+    if (this._editing) return this.#editor()
+    return html`<div class="list">
       ${this._notice ? html`<uui-box><p>${this._notice}</p></uui-box>` : nothing}
-      ${this._editing ? this.#editor() : this.#list()}
-    `
+      ${this.#list()}
+    </div>`
   }
 
   #list() {
+    // The create button above the list, as the workflows list has it.
     return html`
+      <uui-button class="create" color="default" look="outline" label="Create" @click=${() => this.#new()}></uui-button>
       <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>`
@@ -562,9 +570,6 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
                 </uui-table>
               `
         }
-        <div class="actions">
-          <uui-button look="primary" label="Add a form" @click=${() => this.#new()}></uui-button>
-        </div>
       </uui-box>
     `
   }
@@ -584,18 +589,14 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
         ></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
-        }
+    const leave = () => {
+      this._editing = undefined
+      this._problems = []
+    }
+    // Umbraco's own layout, as the workflow designer has it: Save bottom right,
+    // and what stopped a save listed just above it.
+    return html`<umb-body-layout headline=${form.alias ? `Form: ${form.name || form.alias}` : 'A new form'}>
+      <uui-box>
         ${text('name', 'Name')}
         ${text('alias', 'Alias', 'Letters and numbers, starting with a letter. The file is named after it.')}
         ${text('messageOnSubmit', 'Message on submit')}
@@ -633,14 +634,26 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
         ${this._editing.pages.map((page, p) => this.#page(page, p))}
         <div class="actions">
           <uui-button look="secondary" label="Add a page" @click=${() => this.#apply(addPage)}></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>
-    `
+      ${
+        this._problems.length > 0
+          ? html`<div class="problems" role="alert">
+              <p>This form was not saved:</p>
+              <ul>
+                ${this._problems.map((problem) => html`<li>${problem.path ? html`<code>${problem.path}</code> ` : nothing}${problem.message}</li>`)}
+              </ul>
+            </div>`
+          : nothing
+      }
+      ${
+        this._problems.length > 0
+          ? html`<span slot="footer-info" class="not-saved">Not saved: ${this._problems.length} problem(s), listed above</span>`
+          : nothing
+      }
+      <uui-button slot="actions" look="secondary" label="Back to the list" @click=${leave}>Back to the list</uui-button>
+      <uui-button slot="actions" look="primary" color="positive" label="Save" ?disabled=${this._busy} @click=${() => this.#save()}>Save</uui-button>
+    </umb-body-layout>`
   }
 
   static styles = css`
@@ -701,8 +714,17 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
     }
     :host {
       display: block;
+      height: 100%;
+    }
+    .list {
       padding: var(--uui-size-layout-1, 24px);
     }
+    .create {
+      margin-bottom: var(--uui-size-space-5, 18px);
+    }
+    .not-saved {
+      color: var(--uui-color-danger, #d42054);
+    }
     p,
     ul {
       max-width: 70ch;

package/plugin/localizations/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Localizations",
   "id": "Crombolo.Localizations",
-  "version": "0.12.1",
+  "version": "0.13.2",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/seo/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Search & sharing",
   "id": "Crombolo.Seo",
-  "version": "0.12.1",
+  "version": "0.13.2",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo",
   "id": "Crombolo.Core",
-  "version": "0.12.1",
+  "version": "0.13.2",
   "allowPublicAccess": false,
   "extensions": [
     {
@@ -246,7 +246,7 @@
       "alias": "Crombolo.SectionView.Forms.Overview",
       "name": "Crombolo Forms Overview",
       "element": "/crombolo-plugin/forms-overview.js",
-      "weight": 200,
+      "weight": 100,
       "meta": {
         "label": "Forms",
         "pathname": "forms",
@@ -264,7 +264,7 @@
       "alias": "Crombolo.SectionView.Forms.Entries",
       "name": "Crombolo Forms Entries",
       "element": "/crombolo-plugin/forms-entries.js",
-      "weight": 100,
+      "weight": 200,
       "meta": {
         "label": "Entries",
         "pathname": "entries",
@@ -345,6 +345,112 @@
       "name": "Crombolo Icons Context",
       "overwrites": ["Umb.GlobalContext.Icons"],
       "api": "/crombolo-plugin/branding/icon-registry.js"
+    },
+    {
+      "type": "section",
+      "alias": "Crombolo.Section.Workflow",
+      "name": "Crombolo Workflow Section",
+      "weight": 40,
+      "meta": {
+        "label": "Workflows",
+        "pathname": "workflow"
+      }
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.Waiting",
+      "name": "Crombolo Workflow Waiting",
+      "element": "/crombolo-plugin/workflow-requests.js",
+      "elementName": "crombolo-workflow-waiting",
+      "weight": 400,
+      "meta": {
+        "label": "Waiting for me",
+        "pathname": "waiting",
+        "icon": "icon-inbox"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        }
+      ]
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.InFlight",
+      "name": "Crombolo Workflow In Flight",
+      "element": "/crombolo-plugin/workflow-requests.js",
+      "elementName": "crombolo-workflow-in-flight",
+      "weight": 300,
+      "meta": {
+        "label": "In flight",
+        "pathname": "in-flight",
+        "icon": "icon-time"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        }
+      ]
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.History",
+      "name": "Crombolo Workflow History",
+      "element": "/crombolo-plugin/workflow-requests.js",
+      "elementName": "crombolo-workflow-history",
+      "weight": 200,
+      "meta": {
+        "label": "Decided",
+        "pathname": "history",
+        "icon": "icon-check"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        }
+      ]
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.Designer",
+      "name": "Crombolo Workflow Designer",
+      "element": "/crombolo-plugin/workflow-designer.js",
+      "weight": 100,
+      "meta": {
+        "label": "Workflows",
+        "pathname": "workflows",
+        "icon": "icon-mindmap"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        },
+        {
+          "alias": "Umb.Condition.CurrentUser.IsAdmin"
+        }
+      ]
+    },
+    {
+      "type": "workspaceView",
+      "alias": "Crombolo.WorkspaceView.Document.Workflow",
+      "name": "Crombolo Document Workflow",
+      "element": "/crombolo-plugin/workflow-tab.js",
+      "weight": 50,
+      "meta": {
+        "label": "Workflow",
+        "pathname": "workflow",
+        "icon": "icon-mindmap"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.WorkspaceAlias",
+          "match": "Umb.Workspace.Document"
+        }
+      ]
     }
   ]
 }

package/plugin/workflow-client.js

@@ -0,0 +1,40 @@
+/**
+ * The Workflow screens' calls to <backoffice>/crombolo/api/approvals/ (story 028).
+ * The cookie carries the session. Every answer resolves; a refusal carries the
+ * server's own words in `message`.
+ */
+const apiBase = () =>
+  `${(document.querySelector('base')?.getAttribute('href') ?? '/umbraco/').replace(/\/$/, '')}/crombolo/api/approvals`
+
+async function call(path, init = {}) {
+  const response = await fetch(`${apiBase()}/${path}`, {
+    credentials: 'include',
+    ...init,
+    headers: { accept: 'application/json', 'content-type': 'application/json', ...init.headers },
+  })
+  const body = await response.json().catch(() => ({}))
+  if (response.status === 403 && !body.message)
+    return { ok: false, message: 'You are not allowed to do that.' }
+  return { ok: response.ok, status: response.status, ...body }
+}
+
+const post = (path, body = {}) => call(path, { method: 'POST', body: JSON.stringify(body) })
+
+export const pageApproval = (key) => call(`page/${encodeURIComponent(key)}`)
+export const sendForApproval = (key, action, comment) =>
+  post(`page/${encodeURIComponent(key)}/send`, { action, comment })
+export const decide = (requestKey, verb, body) =>
+  post(`request/${encodeURIComponent(requestKey)}/${verb}`, body)
+export const waitingForMe = () => call('waiting')
+export const inFlight = () => call('in-flight')
+export const finished = (skip = 0, take = 25) => call(`history?skip=${skip}&take=${take}`)
+export const listWorkflows = () => call('workflows')
+export const previewWorkflow = (alias, workflow) =>
+  post(`workflows/${encodeURIComponent(alias)}/preview`, { workflow })
+export const saveWorkflow = (alias, workflow) =>
+  call(`workflows/${encodeURIComponent(alias)}`, {
+    method: 'PUT',
+    body: JSON.stringify({ workflow }),
+  })
+export const deleteWorkflow = (alias) =>
+  call(`workflows/${encodeURIComponent(alias)}`, { method: 'DELETE' })