{
+ const $action = await createAction({ action, actions });
+ qs($action, `button[alt="delete"]`).onclick = (e) => removeAction(e.target);
+ $actions.appendChild($action);
+ withToggle(qs($action, `[data-bind="form"]`));
+ },
+ }));
+
+ // feature4: save button
+ $page.parentElement.appendChild(createSave());
+
+ // feature5: toggle form visibility
+ qsa($page, `[data-bind="form"]`).forEach(($form) => {
+ withToggle($form);
+ if (workflow.id) $form.classList.add("hidden");
+ });
+
+ // feature6: remove button
+ qsa($page, `button[alt="delete"]`).forEach(($delete) => $delete.onclick = (e) => {
+ removeAction(e.target);
+ });
+}
+
+async function createTrigger({ workflow, triggers }) {
+ const trigger = triggers.find(({ name }) => name === workflow.trigger.name);
+ if (!trigger) return createElement(`Trigger not found "${workflow.trigger.name}"
`);
+ const { title, icon } = trigger;
+ const $trigger = createFragment(`
+
+ ${icon}
+
+ ${title}
+
+
+
+
+ `);
+ const $form = await createForm(trigger.specs, formTmpl());
+ qs($trigger, `[data-bind="form"]`).appendChild($form);
+ return $trigger;
+}
+
+async function createAction({ action, actions }) {
+ const selected = actions.find((_action) => _action.name === action.name);
+ if (!selected) return createElement(`Action not found "${action.name}"
`);
+ const subtitle = selected.subtitle ? `({{ ${action.subtitle} }})` : "";
+ const $action = createElement(`
+
+
+ ${selected.icon}
+
+ ${selected.title} ${subtitle}
+
+
+
+
+
+
+
+ `+ Object.keys(categories).map((category) => `
+
+ `+categories[category].map((subcategory) => `
+
+ `).join("")+`
+ `).join("")+`
+
+ `);
+ const $item = qs($el, ".item");
+ const width = 45;
+ let rotate = 0;
+ $el.appendChild($categories);
+ $item.onclick = async (e) => {
+ rotate += 45;
+ $item.firstElementChild.style.transform = `rotate(${rotate}deg)`;
+ if (rotate % 90 === 0) {
+ $categories.classList.add("hidden");
+ await animate($el, {
+ time: 150,
+ keyframes: [
+ { width: "300px" },
+ { width: `${width}px` },
+ ],
+ });
+ } else {
+ await animate($el, {
+ time: 150,
+ keyframes: [
+ { width: `${width}px` },
+ { width: "300px" },
+ ],
+ });
+ $categories.classList.remove("hidden");
+ animate($categories, { time: 80, keyframes: slideXIn(-20) });
+ }
+ };
+
+ qsa($el, ".sub").forEach(($action) => $action.onclick = () => {
+ const action = actions.find(({ name }) => name === $action.getAttribute("data-name"));
+ if (action) createAction({ action, actions });
+ $item.onclick();
+ });
+ return $el;
+}
+
+function createSave() {
+ const $fab = createElement(`
+
+
+
+
-
-
- `))),
+ rxjs.tap((a) => ctrlModal(createModal(), { triggers })),
));
}
-function createWorkflow({ id, name, status }) {
+function createWorkflow(specs) {
+ const { name, published, actions, trigger } = specs;
+ const summaryHTML = {
+ trigger: ``,
+ actions: actions.map(({ name }) => ``).join(""),
+ };
const $workflow = createElement(`
-
+
${name} (2 weeks ago)
- →
+ ${summaryHTML.trigger} → ${summaryHTML.actions}
`);
return $workflow;
}
+
+function ctrlModal(render, { triggers }) {
+ const $page = createElement(`
+
+ `);
+ render($page);
+
+ const $list = qs($page, `[data-bind="list"]`);
+ const $input = qs($page, "input");
+ effect(rxjs.of(triggers).pipe(
+ rxjs.map((arr) => arr.map(({ name, title, icon }) => createElement(`
+ ${icon} ${title}
+ `))),
+ rxjs.map(($els) => {
+ $list.innerHTML = "";
+ $input.focus();
+ const $fragment = document.createDocumentFragment();
+ $fragment.appendChild(createElement(`Step2: Select a Trigger
`));
+ $els.forEach(($el) => $fragment.appendChild($el));
+ $list.appendChild($fragment);
+ const height = $list.clientHeight;
+ $list.style.height = "0";
+ return { height, $els };
+ }),
+ rxjs.mergeMap(({ height, $els }) => rxjs.fromEvent($input, "keydown").pipe(
+ rxjs.debounceTime(200),
+ rxjs.tap((e) => {
+ const shouldOpen = e.target.value.length > 0;
+ if ($list.clientHeight === 0 && shouldOpen) animate($list, {
+ time: Math.max(50, Math.min(height, 150)),
+ keyframes: [{ height: "0" }, { height: `${height}px` }],
+ onExit: () => $list.style.height = "",
+ });
+ else if ($list.clientHeight > 0 && !shouldOpen) animate($list, {
+ time: Math.max(50, Math.min(height, 150)),
+ keyframes: [{ height: `${height}px` }, { height: "0" }],
+ onExit: () => $list.style.height = "0",
+ });
+ $els.forEach(($el) => $el.setAttribute("href", "./admin/workflow?specs="+btoa(JSON.stringify({
+ name: e.target.value,
+ published: false,
+ trigger: { name: $el.getAttribute("data-name") },
+ actions: [ { name: "tools/debug" }]
+ }))));
+ }),
+ )),
+ ));
+}