domma-cms 0.76.0 → 0.77.0

package/admin/js/templates/action-editor.html

@@ -1,183 +1,259 @@
-<div class="view-header">
-    <h1><span data-icon="zap"></span> <span id="action-editor-title">New Action</span></h1>
-    <div style="display:flex;gap:.5rem;">
-        <a href="#/actions" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Actions
-        </a>
-        <button id="save-action-btn" class="btn btn-primary">
-            <span data-icon="save"></span> Save Action
-        </button>
-    </div>
-</div>
+<!-- Data › Actions › an action. Bound with M.applyBindings - see admin/js/views/action-editor.js, which also
+     draws the step cards and the template-variable table (a templateUrl goes through _.render, eating any
+     {{…}}). No page heading: the Tool banner is the heading; Save, All
+     actions and Delete are banner actions. -->
+<div class="aex">
+    <p class="aex-note" data-bind-hidden="!loading.value">Loading…</p>
 
-<div class="tabs" id="action-editor-tabs">
-    <div class="tab-list">
-        <button class="tab-item active">General</button>
-        <button class="tab-item">Trigger</button>
-        <button class="tab-item">Steps</button>
-        <button class="tab-item">Access</button>
+    <!-- File mode: actions live in MongoDB. A state of the site, explained - not an error. -->
+    <div class="aex-card" data-bind-hidden="!needsMongo.value">
+        <div class="aex-card-title"><span data-icon="database" data-icon-size="16"></span> Actions need MongoDB</div>
+        <p class="aex-note">Actions are a Pro feature: their settings are kept in MongoDB, and this site has no MongoDB
+            connection. Add a "default" connection (pro mode) and they can be made and edited here. Nothing else on
+            the site is affected.</p>
+        <p class="aex-note"><a href="#/actions">Back to Actions</a></p>
     </div>
-    <div class="tab-content">
 
-        <!-- General tab -->
-        <div class="tab-panel active">
-            <div class="card">
-                <div class="card-body" style="display:flex;flex-direction:column;gap:1rem;max-width:600px;">
-                    <div>
-                        <label class="form-label">Title <span style="color:var(--dm-danger,#f87171);">*</span></label>
-                        <input id="action-title" type="text" class="form-input" placeholder="e.g. Approve Application">
-                    </div>
-                    <div>
-                        <label class="form-label">Slug</label>
-                        <input id="action-slug" type="text" class="form-input" placeholder="Auto-generated from title">
-                        <small class="text-muted">URL-safe identifier. Leave blank to auto-generate.</small>
-                    </div>
-                    <div>
-                        <label class="form-label">Description</label>
-                        <textarea id="action-description" class="form-input" rows="2" placeholder="Describe what this action does…"></textarea>
-                    </div>
-                    <div>
-                        <label class="form-label">Target Collection <span style="color:var(--dm-danger,#f87171);">*</span></label>
-                        <select id="action-collection" class="form-input">
-                            <option value="">- select collection -</option>
-                        </select>
-                        <small class="text-muted">The collection this action operates on.</small>
-                    </div>
-                    <div>
-                        <label class="form-label">Project</label>
-                        <select id="action-project" class="form-input">
-                            <option value="">- none -</option>
-                        </select>
-                        <small class="text-muted">Tag this action to a project for grouping.</small>
-                    </div>
-                    <div>
-                        <label class="form-check-label" title="Included in fresh installs via the seed script">
-                            <input id="action-bundled" type="checkbox" class="form-check"> Bundled
-                        </label>
+    <div class="aex-body" data-bind-hidden="needsMongo.value || loading.value">
+        <p class="aex-alert is-dirty" data-bind-hidden="!dirty.value">
+            <span data-icon="edit-3" data-icon-size="16"></span>
+            <span data-bind-text="dirtyText.value">Unsaved changes.</span>
+            <span class="aex-spacer"></span>
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+            <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">Save</button></p>
+        <p class="aex-alert is-bad" data-bind-hidden="!problems.value">
+            <span data-icon="alert-triangle" data-icon-size="16"></span>
+            <span data-bind-text="problems.value"></span></p>
+
+        <div class="tabs aex-tabs">
+            <div class="tab-list">
+                <button type="button" class="tab-item active">General</button>
+                <button type="button" class="tab-item">Trigger</button>
+                <button type="button" class="tab-item">Steps <span class="aex-count" data-bind-text="stepCount.value"></span></button>
+                <button type="button" class="tab-item">Access</button>
+            </div>
+
+            <!-- General -->
+            <div class="tab-panel active">
+                <div class="aex-card">
+                    <div class="aex-card-title">What it is</div>
+                    <div class="aex-grid">
+                        <div class="aex-wide">
+                            <label class="form-label" for="action-title">Title <span class="aex-req">*</span></label>
+                            <input id="action-title" type="text" class="form-input" maxlength="120" placeholder="e.g. Approve application" data-model="title.value">
+                            <small class="aex-err" data-bind-hidden="!err.value.title" data-bind-text="err.value.title"></small>
+                        </div>
+                        <div>
+                            <label class="form-label" for="action-slug">Slug
+                                <span data-help-title="Slug" data-help="The action's id - in its admin address and in the [transitions] shortcode. Left blank, it is made from the title. It cannot be changed once the action exists."></span></label>
+                            <input id="action-slug" type="text" class="form-input aex-mono" maxlength="80" data-model="slug.value" data-bind-disabled="editing" data-bind-placeholder="slugHint.value">
+                            <small class="aex-err" data-bind-hidden="!err.value.slug" data-bind-text="err.value.slug"></small>
+                        </div>
+                        <div>
+                            <label class="form-label" for="action-collection">Collection <span class="aex-req">*</span>
+                                <span data-help-title="Collection" data-help="The collection whose entries this action runs on. Its button appears on those entries in the admin, and the Update a field step offers that collection's fields."></span></label>
+                            <select id="action-collection" class="form-input" data-model="collection.value">
+                                <option value="">- choose a collection -</option>
+                            </select>
+                            <small class="aex-err" data-bind-hidden="!err.value.collection" data-bind-text="err.value.collection"></small>
+                        </div>
+                        <div class="aex-wide">
+                            <label class="form-label" for="action-description">Description</label>
+                            <textarea id="action-description" class="form-input" rows="2" maxlength="500" placeholder="What this action does, for whoever reads the list" data-model="description.value"></textarea>
+                        </div>
+                        <div>
+                            <label class="form-label" for="action-project">Project
+                                <span data-help="Files the action under a project (Projects in the sidebar). None means Core."></span></label>
+                            <select id="action-project" class="form-input" data-model="project.value">
+                                <option value="">- none (Core) -</option>
+                            </select>
+                        </div>
+                        <div class="aex-setting">
+                            <label class="form-label" for="action-bundled">Bundled
+                                <span data-help="Included in fresh installs by the seed script. Leave off for an action you made for this site."></span></label>
+                            <input id="action-bundled" type="checkbox" class="form-switch" data-model="bundled.value">
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Trigger tab -->
-        <div class="tab-panel">
-            <div class="card">
-                <div class="card-body" style="display:flex;flex-direction:column;gap:1rem;max-width:500px;">
-                    <div>
-                        <label class="form-label">Trigger Type</label>
-                        <select id="action-trigger-type" class="form-input">
-                            <option value="manual">Manual (button in entry list)</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="form-label">Button Label</label>
-                        <input id="action-trigger-label" type="text" class="form-input" value="Run" placeholder="e.g. Approve">
+            <!-- Trigger -->
+            <div class="tab-panel">
+                <div class="aex-card">
+                    <div class="aex-card-title">The button
+                        <span data-help-title="Trigger" data-help="How the action is started. Manual actions appear as a button on each entry of the collection (and in the [transitions] shortcode when they have a transition)."></span></div>
+                    <div class="aex-grid">
+                        <div>
+                            <label class="form-label" for="action-trigger-type">Trigger</label>
+                            <select id="action-trigger-type" class="form-input" data-model="triggerType.value">
+                                <option value="manual">Manual - a button on the entry</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="form-label">Looks like</label>
+                            <span class="aex-button-preview"><span class="aex-preview-icon"></span><span data-bind-text="buttonText.value">Run</span></span>
+                        </div>
+                        <div>
+                            <label class="form-label" for="action-trigger-label">Button label</label>
+                            <input id="action-trigger-label" type="text" class="form-input" maxlength="40" placeholder="Run" data-model="triggerLabel.value">
+                        </div>
+                        <div>
+                            <label class="form-label" for="action-trigger-icon">Button icon
+                                <span data-help="A Domma icon name - check-circle, send, archive, zap… The preview beside it shows whether the name exists."></span></label>
+                            <input id="action-trigger-icon" type="text" class="form-input aex-mono" maxlength="40" placeholder="zap" data-model="triggerIcon.value">
+                        </div>
+                        <div class="aex-wide">
+                            <label class="form-label" for="action-trigger-confirm">Confirmation message
+                                <span data-help="Asked before the action runs - worth having for anything that deletes, moves or emails. Leave blank to run straight away."></span></label>
+                            <input id="action-trigger-confirm" type="text" class="form-input" maxlength="200" placeholder="e.g. Approve this application?" data-model="triggerConfirm.value">
+                        </div>
                     </div>
-                    <div>
-                        <label class="form-label">Button Icon</label>
-                        <input id="action-trigger-icon" type="text" class="form-input" value="zap" placeholder="e.g. check-circle, zap, send">
-                        <small class="text-muted">Domma icon name.</small>
+                </div>
+
+                <div class="aex-card">
+                    <div class="aex-setting">
+                        <label class="form-label" for="action-transition-enabled">State transition (optional)
+                            <span data-help-title="State transition" data-help="Makes the action a step in a workflow: it is offered only while the entry's state field holds one of the From values (the Collection Browser and the [transitions] shortcode list the transitions available for each entry). To is what the steps are expected to set it to - informational; an Update a field step does the writing."></span></label>
+                        <input id="action-transition-enabled" type="checkbox" class="form-switch" data-model="transitionEnabled.value">
                     </div>
-                    <div>
-                        <label class="form-label">Confirmation Message</label>
-                        <input id="action-trigger-confirm" type="text" class="form-input"
-                               placeholder="e.g. Are you sure you want to run this action?">
-                        <small class="text-muted">Leave blank to skip the confirmation prompt.</small>
+                    <div class="aex-grid" data-bind-hidden="!transitionEnabled.value">
+                        <div>
+                            <label class="form-label" for="action-transition-field">State field</label>
+                            <select id="action-transition-field" class="form-input" data-model="transitionField.value"></select>
+                            <small class="aex-err" data-bind-hidden="!err.value.transitionField" data-bind-text="err.value.transitionField"></small>
+                        </div>
+                        <div>
+                            <label class="form-label" for="action-transition-to">To</label>
+                            <input id="action-transition-to" type="text" class="form-input" list="action-transition-values" placeholder="e.g. approved" data-model="transitionTo.value">
+                        </div>
+                        <div class="aex-wide">
+                            <label class="form-label" for="action-transition-from">From (comma-separated)</label>
+                            <input id="action-transition-from" type="text" class="form-input" placeholder="e.g. submitted, reviewed" data-model="transitionFrom.value">
+                            <small class="aex-hint" data-bind-hidden="!stateValuesText.value" data-bind-text="stateValuesText.value"></small>
+                            <datalist id="action-transition-values"></datalist>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Steps tab -->
-        <div class="tab-panel">
-            <div class="card mb-3">
-                <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-                    <h2>Steps</h2>
-                    <div style="display:flex;gap:.5rem;">
-                        <select id="add-step-type" class="form-input form-input--sm">
-                            <option value="updateField">Update Field</option>
-                            <option value="deleteEntry">Delete Entry</option>
-                            <option value="moveToCollection">Move to Collection</option>
-                            <option value="webhook">Webhook</option>
-                            <option value="email">Email</option>
+            <!-- Steps -->
+            <div class="tab-panel">
+                <div class="aex-card">
+                    <div class="aex-card-title">Steps
+                        <span data-help-title="Steps" data-help="What the action does, in order. Right-click a step (or ⋮, or Shift+F10 on its header) to move it up or down, duplicate or remove it. Nothing is saved until you Save."></span>
+                        <span class="aex-spacer"></span>
+                        <select id="add-step-type" class="form-input aex-add-type" aria-label="Step to add" data-model="addType.value">
+                            <option value="updateField">Update a field</option>
+                            <option value="deleteEntry">Delete the entry</option>
+                            <option value="moveToCollection">Move to another collection</option>
+                            <option value="webhook">Call a webhook</option>
+                            <option value="email">Send an email</option>
                         </select>
-                        <button id="add-step-btn" class="btn btn-ghost btn-sm">
-                            <span data-icon="plus"></span> Add Step
-                        </button>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="addStep"><span data-icon="plus" data-icon-size="14"></span> Add step</button>
                     </div>
+                    <p class="aex-note" data-bind-hidden="stepCount.value">No steps yet - add one to say what this action does.</p>
+                    <div class="aex-steps" id="action-steps-list"></div>
                 </div>
-                <div class="card-body">
-                    <div id="action-steps-list">
-                        <p class="text-muted steps-empty-placeholder" style="text-align:center;padding:2rem 0;">
-                            No steps yet. Add a step to define what this action does.
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="card">
-                <div class="card-body" style="font-size:.8rem;color:var(--dm-text-muted,#888);">
-                    <strong>Template variables:</strong>
-                    <code>{{entry.data.fieldName}}</code> - entry field value &nbsp;|&nbsp;
-                    <code>{{now}}</code> - current ISO timestamp &nbsp;|&nbsp;
-                    <code>{{user.name}}</code> - executing user's name &nbsp;|&nbsp;
-                    <code>{{env.CMS_PUBLIC_*}}</code> - public environment variables
+                <div class="aex-card">
+                    <div class="aex-card-title">Template variables
+                        <span data-help="Any text in a step may use these; they are filled in when the action runs, for the entry it runs on and the person running it."></span></div>
+                    <!-- Filled from the view as text, after binding: {{…}} in the page would read as bindings. -->
+                    <table class="aex-vars"></table>
                 </div>
             </div>
-        </div>
 
-        <!-- Access tab -->
-        <div class="tab-panel">
-            <div class="card mb-3">
-                <div class="card-body" style="max-width:500px;">
-                    <label class="form-label">Allowed Roles</label>
-                    <small class="text-muted" style="display:block;margin-bottom:.75rem;">
-                        Select which roles can trigger this action.
-                    </small>
-                    <div id="action-roles-checkboxes" style="display:flex;flex-direction:column;gap:.5rem;"></div>
+            <!-- Access -->
+            <div class="tab-panel">
+                <div class="aex-card">
+                    <div class="aex-card-title">Who can run it
+                        <span data-help-title="Allowed roles" data-help="A role here lets its holders run the action - and everyone in a more senior role too (the check compares role levels). Roles come from System › Roles; one the action names that no longer exists is kept and flagged."></span></div>
+                    <div class="aex-roles" data-each="roleRows.value key=name"></div>
+                    <small class="aex-err" data-bind-hidden="!err.value.roles" data-bind-text="err.value.roles"></small>
                 </div>
-            </div>
-            <div class="card">
-                <div class="card-header"><h2>Row-Level Access</h2></div>
-                <div class="card-body" style="max-width:500px;display:flex;flex-direction:column;gap:1rem;">
-                    <div>
-                        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-                            <input type="checkbox" id="action-rowlevel-enabled">
-                            <span>Restrict to specific entries</span>
-                        </label>
-                        <small class="text-muted" style="display:block;margin-top:.4rem;">
-                            When enabled, users can only run this action on entries they own or are assigned to.
-                            Admins always bypass this restriction.
-                        </small>
+                <div class="aex-card">
+                    <div class="aex-setting">
+                        <label class="form-label" for="action-rowlevel-enabled">Only on some entries
+                            <span data-help-title="Row-level access" data-help="Limits a user to entries they own (they created it) or that name them in a field (Field match). Admins always bypass this."></span></label>
+                        <input id="action-rowlevel-enabled" type="checkbox" class="form-switch" data-model="rowLevelEnabled.value">
                     </div>
-                    <div id="action-rowlevel-config" style="display:none;flex-direction:column;gap:1rem;">
+                    <div class="aex-grid" data-bind-hidden="!rowLevelEnabled.value">
                         <div>
-                            <label class="form-label">Mode</label>
-                            <select id="action-rowlevel-mode" class="form-input">
-                                <option value="owner">Owner - entry was created by the current user</option>
-                                <option value="field">Field Match - a field on the entry matches the user</option>
+                            <label class="form-label" for="action-rowlevel-mode">Rule</label>
+                            <select id="action-rowlevel-mode" class="form-input" data-model="rowLevelMode.value">
+                                <option value="owner">Owner - they created the entry</option>
+                                <option value="field">Field match - a field of the entry names them</option>
                             </select>
                         </div>
-                        <div id="action-rowlevel-field-group" style="display:none;">
-                            <label class="form-label">Field Name</label>
-                            <input id="action-rowlevel-field" type="text" class="form-input"
-                                   placeholder="e.g. assigned_to">
-                            <small class="text-muted">The entry field whose value must match the user property
-                                below.</small>
-                        </div>
                         <div>
-                            <label class="form-label">User Property</label>
-                            <select id="action-rowlevel-userkey" class="form-input">
-                                <option value="id">id (UUID)</option>
+                            <label class="form-label" for="action-rowlevel-userkey">Compare with their</label>
+                            <select id="action-rowlevel-userkey" class="form-input" data-model="rowLevelUserKey.value">
+                                <option value="id">id</option>
                                 <option value="email">email</option>
                                 <option value="name">name</option>
                                 <option value="role">role</option>
                             </select>
-                            <small class="text-muted">Which property of the logged-in user to compare against.</small>
+                        </div>
+                        <div class="aex-wide" data-bind-hidden="rowLevelMode.value !== 'field'">
+                            <label class="form-label" for="action-rowlevel-field">Entry field</label>
+                            <input id="action-rowlevel-field" type="text" class="form-input aex-mono" list="action-collection-fields" placeholder="e.g. assigned_to" data-model="rowLevelField.value">
+                            <datalist id="action-collection-fields"></datalist>
+                            <small class="aex-err" data-bind-hidden="!err.value.rowLevelField" data-bind-text="err.value.rowLevelField"></small>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-
     </div>
 </div>
+
+<style>
+.aex { display: flex; flex-direction: column; gap: .75rem; }
+.aex [hidden] { display: none !important; }
+.aex-alert { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.aex-alert.is-dirty { background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.aex-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 12%, transparent); }
+.aex-spacer { flex: 1; }
+.aex-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.aex-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .7rem; margin-top: .75rem; }
+.aex-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; flex-wrap: wrap; }
+.aex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
+.aex-wide { grid-column: 1 / -1; }
+.aex .form-label { display: flex; align-items: center; gap: .3rem; }
+.aex-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.aex-setting .form-label { margin: 0; }
+.aex-req { color: var(--dm-danger); }
+.aex-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.aex-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.aex-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.aex-mono { font-family: var(--dm-font-mono, monospace); }
+.aex-add-type { width: auto; max-width: 16rem; }
+.aex-button-preview { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: var(--dm-radius-md);
+    background: var(--dm-primary); color: var(--dm-primary-text); font-size: var(--dm-text-sm); font-weight: 600; }
+.aex-preview-icon { display: inline-flex; width: 14px; height: 14px; }
+.aex-preview-icon svg { width: 100%; height: 100%; }
+.aex-steps { display: flex; flex-direction: column; gap: .6rem; }
+.aex-step { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); background: var(--dm-surface); }
+.aex-step.is-bad { border-color: color-mix(in srgb, var(--dm-danger) 60%, var(--dm-border)); }
+.aex-step-head { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--dm-border); cursor: default; }
+.aex-step-head:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: -2px; }
+.aex-step-n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; border-radius: 999px; font-size: var(--dm-text-xs);
+    font-weight: 700; background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); }
+.aex-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.aex-step-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aex-step-body { padding: .65rem .7rem; display: flex; flex-direction: column; gap: .6rem; }
+.aex-step-body textarea { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); resize: vertical; }
+.aex-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.aex-kebab:hover { color: var(--dm-primary); }
+.aex-vars { width: 100%; border-collapse: collapse; font-size: var(--dm-text-sm); }
+.aex-vars td { padding: .2rem .6rem .2rem 0; vertical-align: top; }
+.aex-vars td:last-child { color: var(--dm-text-muted); }
+.aex-roles { display: flex; flex-direction: column; }
+.aex-role { display: flex; align-items: center; gap: .6rem; padding: .35rem .25rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.aex-role:last-child { border-bottom: 0; }
+.aex-role .aex-step-main { flex: 1; }
+.aex-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.aex-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+@media (max-width: 720px) { .aex-grid { grid-template-columns: 1fr; } }
+</style>