@isaiahiroko/tilmart-ngx-apps-admin 0.2.0

package/fesm2022/isaiahiroko-tilmart-ngx-apps-admin-navigation.module-DoKzzRgn.mjs

@@ -0,0 +1,281 @@
+import * as i0 from '@angular/core';
+import { Component, NgModule } from '@angular/core';
+import * as i1$2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { BaseDirective, using, notify, SharedModule } from '@thescaffold/ngx-core';
+import * as i1$1 from '@thescaffold/ngx-ui';
+import { ElementsModule } from '@thescaffold/ngx-ui';
+import { takeUntil, firstValueFrom } from 'rxjs';
+import * as i2 from '@angular/common';
+import * as i1 from '@angular/forms';
+
+const LOCATIONS = [
+    'header_primary',
+    'header_secondary',
+    'footer',
+    'mobile_drawer',
+    'utility_bar',
+];
+// P6.12, CMS-03 — the ops navigation editor. Menus (one per location) and
+// their items: label, url, nesting (`parentId`), schedule and order. The
+// storefront shell consumes `header_primary` (P6.12 shell wiring).
+class NavigationComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.menuSource = this.apiService.on('apps/commerce/navigation-menu');
+        this.itemSource = this.apiService.on('apps/commerce/navigation-item');
+        this.locations = LOCATIONS;
+        this.loading = true;
+        this.menus = [];
+        this.items = [];
+        this.newMenuLocation = LOCATIONS[0];
+        this.newMenuName = '';
+        this.itemModel = this.blankItem();
+        this.dragIndex = null;
+        this.init = () => {
+            this.load();
+        };
+    }
+    get topLevel() {
+        return this.items
+            .filter((i) => !i.parentId)
+            .sort((a, b) => a.position - b.position);
+    }
+    childrenOf(parentId) {
+        return this.items
+            .filter((i) => i.parentId === parentId)
+            .sort((a, b) => a.position - b.position);
+    }
+    get parentOptions() {
+        // Only top-level items can be parents (one level of nesting).
+        return this.items.filter((i) => !i.parentId && i.id !== this.editingItem?.id);
+    }
+    load() {
+        this.loading = true;
+        this.menuSource
+            .getMany({ perPage: 100 })
+            .pipe(takeUntil(this.$))
+            .subscribe(using((res) => {
+            this.menus = (res?.data ?? []).sort((a, b) => String(a.location).localeCompare(String(b.location)));
+            this.loading = false;
+            if (this.selected) {
+                this.selected = this.menus.find((m) => m.id === this.selected.id);
+            }
+        }));
+    }
+    async createMenu() {
+        const name = this.newMenuName.trim();
+        if (!name)
+            return;
+        try {
+            const res = await firstValueFrom(this.menuSource.create({
+                location: this.newMenuLocation,
+                name,
+                enabled: true,
+            }));
+            this.newMenuName = '';
+            notify('Menu created.', undefined, 'success');
+            this.load();
+            if (res?.data?.id)
+                setTimeout(() => this.select({ ...res.data }), 200);
+        }
+        catch {
+            notify('Could not create the menu.', undefined, 'error');
+        }
+    }
+    select(menu) {
+        this.selected = menu;
+        this.editingItem = undefined;
+        this.loadItems();
+    }
+    async deleteMenu() {
+        if (!this.selected)
+            return;
+        try {
+            await firstValueFrom(this.menuSource.remove(this.selected.id));
+            this.selected = undefined;
+            this.items = [];
+            notify('Menu deleted.', undefined, 'success');
+            this.load();
+        }
+        catch {
+            notify('Could not delete the menu.', undefined, 'error');
+        }
+    }
+    loadItems() {
+        if (!this.selected)
+            return;
+        this.itemSource
+            .getMany({ menuId: this.selected.id, perPage: 200 })
+            .pipe(takeUntil(this.$))
+            .subscribe(using((res) => {
+            this.items = (res?.data ?? []).filter((i) => i.menuId === this.selected.id);
+        }));
+    }
+    async addItem() {
+        if (!this.selected)
+            return;
+        try {
+            await firstValueFrom(this.itemSource.create({
+                menuId: this.selected.id,
+                label: 'New link',
+                url: '/',
+                position: this.topLevel.length,
+                enabled: true,
+            }));
+            this.loadItems();
+        }
+        catch {
+            notify('Could not add the item.', undefined, 'error');
+        }
+    }
+    editItem(item) {
+        this.editingItem = item;
+        this.itemModel = {
+            label: item.label,
+            url: typeof item.url === 'string' ? item.url : '',
+            parentId: item.parentId ?? '',
+            icon: item.icon ?? '',
+            openInNewTab: !!item.openInNewTab,
+            startsAt: this.toLocal(item.startsAt),
+            endsAt: this.toLocal(item.endsAt),
+        };
+    }
+    cancelItemEdit() {
+        this.editingItem = undefined;
+        this.itemModel = this.blankItem();
+    }
+    async saveItem() {
+        if (!this.editingItem)
+            return;
+        try {
+            await firstValueFrom(this.itemSource.update(this.editingItem.id, {
+                label: this.itemModel.label.trim() || 'Link',
+                url: this.itemModel.url.trim() || '/',
+                parentId: this.itemModel.parentId || null,
+                icon: this.itemModel.icon.trim() || undefined,
+                openInNewTab: this.itemModel.openInNewTab,
+                startsAt: this.itemModel.startsAt ? new Date(this.itemModel.startsAt).toISOString() : null,
+                endsAt: this.itemModel.endsAt ? new Date(this.itemModel.endsAt).toISOString() : null,
+            }));
+            notify('Item saved.', undefined, 'success');
+            this.cancelItemEdit();
+            this.loadItems();
+        }
+        catch {
+            notify('Could not save the item.', undefined, 'error');
+        }
+    }
+    async toggleItem(item) {
+        const next = !item.enabled;
+        try {
+            await firstValueFrom(this.itemSource.update(item.id, { enabled: next }));
+            item.enabled = next;
+        }
+        catch {
+            notify('Could not update the item.', undefined, 'error');
+        }
+    }
+    async removeItem(item) {
+        try {
+            // Detach any children first so they don't dangle.
+            await Promise.all(this.childrenOf(item.id).map((child) => firstValueFrom(this.itemSource.update(child.id, { parentId: null }))));
+            await firstValueFrom(this.itemSource.remove(item.id));
+            this.items = this.items.filter((i) => i.id !== item.id);
+            if (this.editingItem?.id === item.id)
+                this.cancelItemEdit();
+            notify('Item removed.', undefined, 'success');
+        }
+        catch {
+            notify('Could not remove the item.', undefined, 'error');
+        }
+    }
+    onDragStart(index) {
+        this.dragIndex = index;
+    }
+    onDragOver(event) {
+        event.preventDefault();
+    }
+    onDrop(targetIndex) {
+        if (this.dragIndex === null || this.dragIndex === targetIndex)
+            return;
+        const ordered = this.topLevel;
+        const [moved] = ordered.splice(this.dragIndex, 1);
+        ordered.splice(targetIndex, 0, moved);
+        this.dragIndex = null;
+        void this.persistOrder(ordered);
+    }
+    moveItem(index, dir) {
+        const ordered = this.topLevel;
+        const target = index + dir;
+        if (target < 0 || target >= ordered.length)
+            return;
+        [ordered[index], ordered[target]] = [ordered[target], ordered[index]];
+        void this.persistOrder(ordered);
+    }
+    async persistOrder(ordered) {
+        const changed = [];
+        ordered.forEach((item, i) => {
+            if (item.position !== i) {
+                item.position = i;
+                changed.push(item);
+            }
+        });
+        try {
+            await Promise.all(changed.map((item) => firstValueFrom(this.itemSource.update(item.id, { position: item.position }))));
+        }
+        catch {
+            notify('Could not save the new order.', undefined, 'error');
+            this.loadItems();
+        }
+    }
+    blankItem() {
+        return {
+            label: '',
+            url: '',
+            parentId: '',
+            icon: '',
+            openInNewTab: false,
+            startsAt: '',
+            endsAt: '',
+        };
+    }
+    toLocal(iso) {
+        if (!iso)
+            return '';
+        const d = new Date(iso);
+        if (Number.isNaN(d.getTime()))
+            return '';
+        const pad = (n) => String(n).padStart(2, '0');
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NavigationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: NavigationComponent, isStandalone: false, selector: "x-navigation", usesInheritance: true, ngImport: i0, template: "<div class=\"x-nav-head\">\n  <div class=\"x-nav-title\">Navigation</div>\n  <div class=\"x-nav-sub\">Storefront menus \u2014 the shell consumes the <code>header_primary</code> menu.</div>\n</div>\n\n@if (loading) {\n  <x-element-loader></x-element-loader>\n} @else {\n  <div class=\"x-nav-layout\">\n    <aside class=\"x-nav-list\">\n      <div class=\"x-nav-new\">\n        <select [(ngModel)]=\"newMenuLocation\">\n          @for (l of locations; track l) { <option [value]=\"l\">{{ l }}</option> }\n        </select>\n        <input type=\"text\" placeholder=\"Menu name\" [(ngModel)]=\"newMenuName\" />\n        <button type=\"button\" (click)=\"createMenu()\">Add menu</button>\n      </div>\n      @for (m of menus; track m.id) {\n        <button\n          type=\"button\"\n          class=\"x-nav-list-item\"\n          [class.x-nav-list-active]=\"selected?.id === m.id\"\n          (click)=\"select(m)\"\n        >\n          <span class=\"x-nav-list-title\">{{ m.name }}</span>\n          <span class=\"x-nav-list-meta\">{{ m.location }}</span>\n        </button>\n      } @empty {\n        <div class=\"x-nav-empty\">No menus yet.</div>\n      }\n    </aside>\n\n    <section class=\"x-nav-editor\">\n      @if (!selected) {\n        <div class=\"x-nav-empty\">Pick a menu, or add one.</div>\n      } @else {\n        <div class=\"x-nav-editor-head\">\n          <span>{{ selected.name }} \u2014 <code>{{ selected.location }}</code></span>\n          <span>\n            <button type=\"button\" class=\"x-nav-btn\" (click)=\"addItem()\">Add link</button>\n            <button type=\"button\" class=\"x-nav-btn x-nav-danger\" (click)=\"deleteMenu()\">Delete menu</button>\n          </span>\n        </div>\n\n        @if (!topLevel.length) {\n          <div class=\"x-nav-empty\">No links yet.</div>\n        } @else {\n          <div class=\"x-nav-items\">\n            @for (item of topLevel; track item.id; let i = $index) {\n              <div\n                class=\"x-nav-item\"\n                [class.x-nav-item-off]=\"!item.enabled\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart(i)\"\n                (dragover)=\"onDragOver($event)\"\n                (drop)=\"onDrop(i)\"\n              >\n                <div class=\"x-nav-item-row\">\n                  <span class=\"x-nav-grip\">\u283F</span>\n                  <div class=\"x-nav-order\">\n                    <button type=\"button\" (click)=\"moveItem(i, -1)\" [disabled]=\"i === 0\">\u25B2</button>\n                    <button type=\"button\" (click)=\"moveItem(i, 1)\" [disabled]=\"i === topLevel.length - 1\">\u25BC</button>\n                  </div>\n                  <span class=\"x-nav-item-label\">{{ item.label }}</span>\n                  <span class=\"x-nav-item-url\">{{ item.url }}</span>\n                  <span class=\"x-nav-item-actions\">\n                    <button type=\"button\" class=\"x-nav-toggle\" (click)=\"toggleItem(item)\">{{ item.enabled ? 'On' : 'Off' }}</button>\n                    <button type=\"button\" class=\"x-nav-link\" (click)=\"editItem(item)\">Edit</button>\n                    <button type=\"button\" class=\"x-nav-link x-nav-danger\" (click)=\"removeItem(item)\">Delete</button>\n                  </span>\n                </div>\n\n                @for (child of childrenOf(item.id); track child.id) {\n                  <div class=\"x-nav-child\" [class.x-nav-item-off]=\"!child.enabled\">\n                    <span class=\"x-nav-child-label\">\u21B3 {{ child.label }}</span>\n                    <span class=\"x-nav-item-url\">{{ child.url }}</span>\n                    <span class=\"x-nav-item-actions\">\n                      <button type=\"button\" class=\"x-nav-toggle\" (click)=\"toggleItem(child)\">{{ child.enabled ? 'On' : 'Off' }}</button>\n                      <button type=\"button\" class=\"x-nav-link\" (click)=\"editItem(child)\">Edit</button>\n                      <button type=\"button\" class=\"x-nav-link x-nav-danger\" (click)=\"removeItem(child)\">Delete</button>\n                    </span>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        @if (editingItem) {\n          <ng-container *ngTemplateOutlet=\"itemForm\"></ng-container>\n        }\n      }\n    </section>\n  </div>\n}\n\n<ng-template #itemForm>\n  <div class=\"x-nav-form\">\n    <div class=\"x-nav-f-row\">\n      <label class=\"x-nav-f\">Label<input type=\"text\" [(ngModel)]=\"itemModel.label\" /></label>\n      <label class=\"x-nav-f\">URL<input type=\"text\" [(ngModel)]=\"itemModel.url\" placeholder=\"/c/solar-panels\" /></label>\n    </div>\n    <div class=\"x-nav-f-row\">\n      <label class=\"x-nav-f\">\n        Parent\n        <select [(ngModel)]=\"itemModel.parentId\">\n          <option value=\"\">\u2014 top level \u2014</option>\n          @for (p of parentOptions; track p.id) { <option [value]=\"p.id\">{{ p.label }}</option> }\n        </select>\n      </label>\n      <label class=\"x-nav-f\">Icon<input type=\"text\" [(ngModel)]=\"itemModel.icon\" /></label>\n      <label class=\"x-nav-f x-nav-check\">\n        <input type=\"checkbox\" [(ngModel)]=\"itemModel.openInNewTab\" /> New tab\n      </label>\n    </div>\n    <div class=\"x-nav-f-row\">\n      <label class=\"x-nav-f\">Starts<input type=\"datetime-local\" [(ngModel)]=\"itemModel.startsAt\" /></label>\n      <label class=\"x-nav-f\">Ends<input type=\"datetime-local\" [(ngModel)]=\"itemModel.endsAt\" /></label>\n    </div>\n    <div class=\"x-nav-form-actions\">\n      <button type=\"button\" class=\"x-nav-btn x-nav-btn-primary\" (click)=\"saveItem()\">Save link</button>\n      <button type=\"button\" class=\"x-nav-btn\" (click)=\"cancelItemEdit()\">Cancel</button>\n    </div>\n  </div>\n</ng-template>\n\n<style>\n  .x-nav-head { margin-bottom: 20px; }\n  .x-nav-title { font-size: 24px; font-weight: 800; color: var(--color-text); }\n  .x-nav-sub { font-size: 13.5px; color: var(--color-text-muted); margin-top: 2px; }\n  .x-nav-sub code, .x-nav-editor-head code { font-family: var(--font-mono); font-size: 12px; }\n  .x-nav-empty { font-size: 14px; color: var(--color-text-muted); padding: 12px 0; }\n  .x-nav-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }\n  .x-nav-list { display: flex; flex-direction: column; gap: 6px; }\n  .x-nav-new { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }\n  .x-nav-new select, .x-nav-new input, .x-nav-f input, .x-nav-f select {\n    border: 1px solid var(--color-border); border-radius: var(--radius-md);\n    padding: 6px 10px; font-size: 13px; background: var(--color-surface); color: var(--color-text);\n  }\n  .x-nav-new button, .x-nav-btn {\n    border: 1px solid var(--color-border); background: transparent; border-radius: var(--radius-md);\n    padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--color-text-muted);\n  }\n  .x-nav-btn-primary { border-color: var(--color-accent); color: var(--color-accent-hover); }\n  .x-nav-danger { color: var(--color-danger, #c0362c); }\n  .x-nav-list-item {\n    text-align: left; border: 1px solid var(--color-border); border-radius: var(--radius-md);\n    background: var(--color-surface); padding: 8px 10px; cursor: pointer;\n    display: flex; flex-direction: column; gap: 2px;\n  }\n  .x-nav-list-active { border-color: var(--color-accent); }\n  .x-nav-list-title { font-size: 13px; font-weight: 700; color: var(--color-text); }\n  .x-nav-list-meta { font-size: 11px; color: var(--color-text-muted); }\n  .x-nav-editor { min-width: 0; }\n  .x-nav-editor-head {\n    display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 12px;\n  }\n  .x-nav-editor-head button { margin-left: 6px; }\n  .x-nav-items { display: flex; flex-direction: column; gap: 8px; }\n  .x-nav-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 12px; }\n  .x-nav-item-off { opacity: 0.5; }\n  .x-nav-item-row, .x-nav-child { display: flex; align-items: center; gap: 10px; }\n  .x-nav-child { padding: 6px 0 0 28px; font-size: 12.5px; }\n  .x-nav-grip { cursor: grab; color: var(--color-text-muted); }\n  .x-nav-order { display: flex; flex-direction: column; }\n  .x-nav-order button { border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted); font-size: 10px; line-height: 1.1; padding: 1px 3px; }\n  .x-nav-order button:disabled { opacity: 0.3; }\n  .x-nav-item-label, .x-nav-child-label { font-weight: 700; font-size: 13px; }\n  .x-nav-item-url { font-size: 11.5px; color: var(--color-text-muted); font-family: var(--font-mono); flex: 1; }\n  .x-nav-item-actions { display: flex; gap: 8px; align-items: center; }\n  .x-nav-toggle { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; color: var(--color-text-muted); }\n  .x-nav-link { border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--color-accent-hover); }\n  .x-nav-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 10px; }\n  .x-nav-f { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 11.5px; color: var(--color-text-muted); font-weight: 700; }\n  .x-nav-check { flex-direction: row; align-items: center; gap: 6px; }\n  .x-nav-f-row { display: flex; gap: 10px; }\n  .x-nav-form-actions { display: flex; gap: 8px; }\n</style>\n", styles: [".x-nav-head{margin-bottom:20px}.x-nav-title{font-size:24px;font-weight:800;color:var(--color-text)}.x-nav-sub{font-size:13.5px;color:var(--color-text-muted);margin-top:2px}.x-nav-sub code,.x-nav-editor-head code{font-family:var(--font-mono);font-size:12px}.x-nav-empty{font-size:14px;color:var(--color-text-muted);padding:12px 0}.x-nav-layout{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}.x-nav-list{display:flex;flex-direction:column;gap:6px}.x-nav-new{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.x-nav-new select,.x-nav-new input,.x-nav-f input,.x-nav-f select{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:6px 10px;font-size:13px;background:var(--color-surface);color:var(--color-text)}.x-nav-new button,.x-nav-btn{border:1px solid var(--color-border);background:transparent;border-radius:var(--radius-md);padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--color-text-muted)}.x-nav-btn-primary{border-color:var(--color-accent);color:var(--color-accent-hover)}.x-nav-danger{color:var(--color-danger, #c0362c)}.x-nav-list-item{text-align:left;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}.x-nav-list-active{border-color:var(--color-accent)}.x-nav-list-title{font-size:13px;font-weight:700;color:var(--color-text)}.x-nav-list-meta{font-size:11px;color:var(--color-text-muted)}.x-nav-editor{min-width:0}.x-nav-editor-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--color-text);margin-bottom:12px}.x-nav-editor-head button{margin-left:6px}.x-nav-items{display:flex;flex-direction:column;gap:8px}.x-nav-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:10px 12px}.x-nav-item-off{opacity:.5}.x-nav-item-row,.x-nav-child{display:flex;align-items:center;gap:10px}.x-nav-child{padding:6px 0 0 28px;font-size:12.5px}.x-nav-grip{cursor:grab;color:var(--color-text-muted)}.x-nav-order{display:flex;flex-direction:column}.x-nav-order button{border:0;background:transparent;cursor:pointer;color:var(--color-text-muted);font-size:10px;line-height:1.1;padding:1px 3px}.x-nav-order button:disabled{opacity:.3}.x-nav-item-label,.x-nav-child-label{font-weight:700;font-size:13px}.x-nav-item-url{font-size:11.5px;color:var(--color-text-muted);font-family:var(--font-mono);flex:1}.x-nav-item-actions{display:flex;gap:8px;align-items:center}.x-nav-toggle{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:transparent;padding:3px 10px;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--color-text-muted)}.x-nav-link{border:0;background:transparent;cursor:pointer;font-size:12px;font-weight:700;color:var(--color-accent-hover)}.x-nav-form{margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:10px}.x-nav-f{display:flex;flex-direction:column;gap:4px;flex:1;font-size:11.5px;color:var(--color-text-muted);font-weight:700}.x-nav-check{flex-direction:row;align-items:center;gap:6px}.x-nav-f-row{display:flex;gap:10px}.x-nav-form-actions{display:flex;gap:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.LoaderComponent, selector: "x-element-loader", inputs: ["data"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NavigationComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-navigation', template: "<div class=\"x-nav-head\">\n  <div class=\"x-nav-title\">Navigation</div>\n  <div class=\"x-nav-sub\">Storefront menus \u2014 the shell consumes the <code>header_primary</code> menu.</div>\n</div>\n\n@if (loading) {\n  <x-element-loader></x-element-loader>\n} @else {\n  <div class=\"x-nav-layout\">\n    <aside class=\"x-nav-list\">\n      <div class=\"x-nav-new\">\n        <select [(ngModel)]=\"newMenuLocation\">\n          @for (l of locations; track l) { <option [value]=\"l\">{{ l }}</option> }\n        </select>\n        <input type=\"text\" placeholder=\"Menu name\" [(ngModel)]=\"newMenuName\" />\n        <button type=\"button\" (click)=\"createMenu()\">Add menu</button>\n      </div>\n      @for (m of menus; track m.id) {\n        <button\n          type=\"button\"\n          class=\"x-nav-list-item\"\n          [class.x-nav-list-active]=\"selected?.id === m.id\"\n          (click)=\"select(m)\"\n        >\n          <span class=\"x-nav-list-title\">{{ m.name }}</span>\n          <span class=\"x-nav-list-meta\">{{ m.location }}</span>\n        </button>\n      } @empty {\n        <div class=\"x-nav-empty\">No menus yet.</div>\n      }\n    </aside>\n\n    <section class=\"x-nav-editor\">\n      @if (!selected) {\n        <div class=\"x-nav-empty\">Pick a menu, or add one.</div>\n      } @else {\n        <div class=\"x-nav-editor-head\">\n          <span>{{ selected.name }} \u2014 <code>{{ selected.location }}</code></span>\n          <span>\n            <button type=\"button\" class=\"x-nav-btn\" (click)=\"addItem()\">Add link</button>\n            <button type=\"button\" class=\"x-nav-btn x-nav-danger\" (click)=\"deleteMenu()\">Delete menu</button>\n          </span>\n        </div>\n\n        @if (!topLevel.length) {\n          <div class=\"x-nav-empty\">No links yet.</div>\n        } @else {\n          <div class=\"x-nav-items\">\n            @for (item of topLevel; track item.id; let i = $index) {\n              <div\n                class=\"x-nav-item\"\n                [class.x-nav-item-off]=\"!item.enabled\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart(i)\"\n                (dragover)=\"onDragOver($event)\"\n                (drop)=\"onDrop(i)\"\n              >\n                <div class=\"x-nav-item-row\">\n                  <span class=\"x-nav-grip\">\u283F</span>\n                  <div class=\"x-nav-order\">\n                    <button type=\"button\" (click)=\"moveItem(i, -1)\" [disabled]=\"i === 0\">\u25B2</button>\n                    <button type=\"button\" (click)=\"moveItem(i, 1)\" [disabled]=\"i === topLevel.length - 1\">\u25BC</button>\n                  </div>\n                  <span class=\"x-nav-item-label\">{{ item.label }}</span>\n                  <span class=\"x-nav-item-url\">{{ item.url }}</span>\n                  <span class=\"x-nav-item-actions\">\n                    <button type=\"button\" class=\"x-nav-toggle\" (click)=\"toggleItem(item)\">{{ item.enabled ? 'On' : 'Off' }}</button>\n                    <button type=\"button\" class=\"x-nav-link\" (click)=\"editItem(item)\">Edit</button>\n                    <button type=\"button\" class=\"x-nav-link x-nav-danger\" (click)=\"removeItem(item)\">Delete</button>\n                  </span>\n                </div>\n\n                @for (child of childrenOf(item.id); track child.id) {\n                  <div class=\"x-nav-child\" [class.x-nav-item-off]=\"!child.enabled\">\n                    <span class=\"x-nav-child-label\">\u21B3 {{ child.label }}</span>\n                    <span class=\"x-nav-item-url\">{{ child.url }}</span>\n                    <span class=\"x-nav-item-actions\">\n                      <button type=\"button\" class=\"x-nav-toggle\" (click)=\"toggleItem(child)\">{{ child.enabled ? 'On' : 'Off' }}</button>\n                      <button type=\"button\" class=\"x-nav-link\" (click)=\"editItem(child)\">Edit</button>\n                      <button type=\"button\" class=\"x-nav-link x-nav-danger\" (click)=\"removeItem(child)\">Delete</button>\n                    </span>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        @if (editingItem) {\n          <ng-container *ngTemplateOutlet=\"itemForm\"></ng-container>\n        }\n      }\n    </section>\n  </div>\n}\n\n<ng-template #itemForm>\n  <div class=\"x-nav-form\">\n    <div class=\"x-nav-f-row\">\n      <label class=\"x-nav-f\">Label<input type=\"text\" [(ngModel)]=\"itemModel.label\" /></label>\n      <label class=\"x-nav-f\">URL<input type=\"text\" [(ngModel)]=\"itemModel.url\" placeholder=\"/c/solar-panels\" /></label>\n    </div>\n    <div class=\"x-nav-f-row\">\n      <label class=\"x-nav-f\">\n        Parent\n        <select [(ngModel)]=\"itemModel.parentId\">\n          <option value=\"\">\u2014 top level \u2014</option>\n          @for (p of parentOptions; track p.id) { <option [value]=\"p.id\">{{ p.label }}</option> }\n        </select>\n      </label>\n      <label class=\"x-nav-f\">Icon<input type=\"text\" [(ngModel)]=\"itemModel.icon\" /></label>\n      <label class=\"x-nav-f x-nav-check\">\n        <input type=\"checkbox\" [(ngModel)]=\"itemModel.openInNewTab\" /> New tab\n      </label>\n    </div>\n    <div class=\"x-nav-f-row\">\n      <label class=\"x-nav-f\">Starts<input type=\"datetime-local\" [(ngModel)]=\"itemModel.startsAt\" /></label>\n      <label class=\"x-nav-f\">Ends<input type=\"datetime-local\" [(ngModel)]=\"itemModel.endsAt\" /></label>\n    </div>\n    <div class=\"x-nav-form-actions\">\n      <button type=\"button\" class=\"x-nav-btn x-nav-btn-primary\" (click)=\"saveItem()\">Save link</button>\n      <button type=\"button\" class=\"x-nav-btn\" (click)=\"cancelItemEdit()\">Cancel</button>\n    </div>\n  </div>\n</ng-template>\n\n<style>\n  .x-nav-head { margin-bottom: 20px; }\n  .x-nav-title { font-size: 24px; font-weight: 800; color: var(--color-text); }\n  .x-nav-sub { font-size: 13.5px; color: var(--color-text-muted); margin-top: 2px; }\n  .x-nav-sub code, .x-nav-editor-head code { font-family: var(--font-mono); font-size: 12px; }\n  .x-nav-empty { font-size: 14px; color: var(--color-text-muted); padding: 12px 0; }\n  .x-nav-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }\n  .x-nav-list { display: flex; flex-direction: column; gap: 6px; }\n  .x-nav-new { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }\n  .x-nav-new select, .x-nav-new input, .x-nav-f input, .x-nav-f select {\n    border: 1px solid var(--color-border); border-radius: var(--radius-md);\n    padding: 6px 10px; font-size: 13px; background: var(--color-surface); color: var(--color-text);\n  }\n  .x-nav-new button, .x-nav-btn {\n    border: 1px solid var(--color-border); background: transparent; border-radius: var(--radius-md);\n    padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--color-text-muted);\n  }\n  .x-nav-btn-primary { border-color: var(--color-accent); color: var(--color-accent-hover); }\n  .x-nav-danger { color: var(--color-danger, #c0362c); }\n  .x-nav-list-item {\n    text-align: left; border: 1px solid var(--color-border); border-radius: var(--radius-md);\n    background: var(--color-surface); padding: 8px 10px; cursor: pointer;\n    display: flex; flex-direction: column; gap: 2px;\n  }\n  .x-nav-list-active { border-color: var(--color-accent); }\n  .x-nav-list-title { font-size: 13px; font-weight: 700; color: var(--color-text); }\n  .x-nav-list-meta { font-size: 11px; color: var(--color-text-muted); }\n  .x-nav-editor { min-width: 0; }\n  .x-nav-editor-head {\n    display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 12px;\n  }\n  .x-nav-editor-head button { margin-left: 6px; }\n  .x-nav-items { display: flex; flex-direction: column; gap: 8px; }\n  .x-nav-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 12px; }\n  .x-nav-item-off { opacity: 0.5; }\n  .x-nav-item-row, .x-nav-child { display: flex; align-items: center; gap: 10px; }\n  .x-nav-child { padding: 6px 0 0 28px; font-size: 12.5px; }\n  .x-nav-grip { cursor: grab; color: var(--color-text-muted); }\n  .x-nav-order { display: flex; flex-direction: column; }\n  .x-nav-order button { border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted); font-size: 10px; line-height: 1.1; padding: 1px 3px; }\n  .x-nav-order button:disabled { opacity: 0.3; }\n  .x-nav-item-label, .x-nav-child-label { font-weight: 700; font-size: 13px; }\n  .x-nav-item-url { font-size: 11.5px; color: var(--color-text-muted); font-family: var(--font-mono); flex: 1; }\n  .x-nav-item-actions { display: flex; gap: 8px; align-items: center; }\n  .x-nav-toggle { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; color: var(--color-text-muted); }\n  .x-nav-link { border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--color-accent-hover); }\n  .x-nav-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 10px; }\n  .x-nav-f { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 11.5px; color: var(--color-text-muted); font-weight: 700; }\n  .x-nav-check { flex-direction: row; align-items: center; gap: 6px; }\n  .x-nav-f-row { display: flex; gap: 10px; }\n  .x-nav-form-actions { display: flex; gap: 8px; }\n</style>\n" }]
+        }] });
+
+class NavigationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: NavigationModule, declarations: [NavigationComponent], imports: [SharedModule,
+            ElementsModule, i1$2.RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NavigationModule, imports: [SharedModule,
+            ElementsModule,
+            RouterModule.forChild([{ path: '', component: NavigationComponent }])] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NavigationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NavigationComponent],
+                    imports: [
+                        SharedModule,
+                        ElementsModule,
+                        RouterModule.forChild([{ path: '', component: NavigationComponent }]),
+                    ],
+                }]
+        }] });
+
+export { NavigationModule };
+//# sourceMappingURL=isaiahiroko-tilmart-ngx-apps-admin-navigation.module-DoKzzRgn.mjs.map

package/fesm2022/isaiahiroko-tilmart-ngx-apps-admin-navigation.module-DoKzzRgn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isaiahiroko-tilmart-ngx-apps-admin-navigation.module-DoKzzRgn.mjs","sources":["../../../projects/admin/src/lib/pages/navigation/navigation.component.ts","../../../projects/admin/src/lib/pages/navigation/navigation.component.html","../../../projects/admin/src/lib/pages/navigation/navigation.module.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { BaseDirective, notify, using } from '@thescaffold/ngx-core';\nimport { firstValueFrom, takeUntil } from 'rxjs';\n\ninterface MenuVm {\n  id: string;\n  location: string;\n  name: string;\n  enabled: boolean;\n}\n\ninterface ItemVm {\n  id: string;\n  menuId: string;\n  label: string;\n  url: string;\n  position: number;\n  parentId?: string;\n  icon?: string;\n  openInNewTab: boolean;\n  startsAt?: string;\n  endsAt?: string;\n  enabled: boolean;\n}\n\nconst LOCATIONS = [\n  'header_primary',\n  'header_secondary',\n  'footer',\n  'mobile_drawer',\n  'utility_bar',\n];\n\n// P6.12, CMS-03 — the ops navigation editor. Menus (one per location) and\n// their items: label, url, nesting (`parentId`), schedule and order. The\n// storefront shell consumes `header_primary` (P6.12 shell wiring).\n@Component({\n  standalone: false,\n  selector: 'x-navigation',\n  templateUrl: './navigation.component.html',\n})\nexport class NavigationComponent extends BaseDirective {\n  private readonly menuSource = this.apiService.on('apps/commerce/navigation-menu');\n  private readonly itemSource = this.apiService.on('apps/commerce/navigation-item');\n\n  readonly locations = LOCATIONS;\n\n  loading = true;\n  menus: MenuVm[] = [];\n  selected?: MenuVm;\n  items: ItemVm[] = [];\n\n  newMenuLocation = LOCATIONS[0];\n  newMenuName = '';\n\n  editingItem?: ItemVm;\n  itemModel: {\n    label: string;\n    url: string;\n    parentId: string;\n    icon: string;\n    openInNewTab: boolean;\n    startsAt: string;\n    endsAt: string;\n  } = this.blankItem();\n\n  private dragIndex: number | null = null;\n\n  override init = () => {\n    this.load();\n  };\n\n  get topLevel(): ItemVm[] {\n    return this.items\n      .filter((i) => !i.parentId)\n      .sort((a, b) => a.position - b.position);\n  }\n\n  childrenOf(parentId: string): ItemVm[] {\n    return this.items\n      .filter((i) => i.parentId === parentId)\n      .sort((a, b) => a.position - b.position);\n  }\n\n  get parentOptions(): ItemVm[] {\n    // Only top-level items can be parents (one level of nesting).\n    return this.items.filter((i) => !i.parentId && i.id !== this.editingItem?.id);\n  }\n\n  load(): void {\n    this.loading = true;\n    this.menuSource\n      .getMany({ perPage: 100 } as any)\n      .pipe(takeUntil(this.$))\n      .subscribe(\n        using((res: any) => {\n          this.menus = (res?.data ?? []).sort((a: any, b: any) =>\n            String(a.location).localeCompare(String(b.location)),\n          );\n          this.loading = false;\n          if (this.selected) {\n            this.selected = this.menus.find((m) => m.id === this.selected!.id);\n          }\n        }),\n      );\n  }\n\n  async createMenu(): Promise<void> {\n    const name = this.newMenuName.trim();\n    if (!name) return;\n    try {\n      const res: any = await firstValueFrom(\n        this.menuSource.create({\n          location: this.newMenuLocation,\n          name,\n          enabled: true,\n        } as any),\n      );\n      this.newMenuName = '';\n      notify('Menu created.', undefined, 'success');\n      this.load();\n      if (res?.data?.id) setTimeout(() => this.select({ ...res.data }), 200);\n    } catch {\n      notify('Could not create the menu.', undefined, 'error');\n    }\n  }\n\n  select(menu: MenuVm): void {\n    this.selected = menu;\n    this.editingItem = undefined;\n    this.loadItems();\n  }\n\n  async deleteMenu(): Promise<void> {\n    if (!this.selected) return;\n    try {\n      await firstValueFrom(this.menuSource.remove(this.selected.id));\n      this.selected = undefined;\n      this.items = [];\n      notify('Menu deleted.', undefined, 'success');\n      this.load();\n    } catch {\n      notify('Could not delete the menu.', undefined, 'error');\n    }\n  }\n\n  private loadItems(): void {\n    if (!this.selected) return;\n    this.itemSource\n      .getMany({ menuId: this.selected.id, perPage: 200 } as any)\n      .pipe(takeUntil(this.$))\n      .subscribe(\n        using((res: any) => {\n          this.items = ((res?.data ?? []) as ItemVm[]).filter(\n            (i) => i.menuId === this.selected!.id,\n          );\n        }),\n      );\n  }\n\n  async addItem(): Promise<void> {\n    if (!this.selected) return;\n    try {\n      await firstValueFrom(\n        this.itemSource.create({\n          menuId: this.selected.id,\n          label: 'New link',\n          url: '/',\n          position: this.topLevel.length,\n          enabled: true,\n        } as any),\n      );\n      this.loadItems();\n    } catch {\n      notify('Could not add the item.', undefined, 'error');\n    }\n  }\n\n  editItem(item: ItemVm): void {\n    this.editingItem = item;\n    this.itemModel = {\n      label: item.label,\n      url: typeof item.url === 'string' ? item.url : '',\n      parentId: item.parentId ?? '',\n      icon: item.icon ?? '',\n      openInNewTab: !!item.openInNewTab,\n      startsAt: this.toLocal(item.startsAt),\n      endsAt: this.toLocal(item.endsAt),\n    };\n  }\n\n  cancelItemEdit(): void {\n    this.editingItem = undefined;\n    this.itemModel = this.blankItem();\n  }\n\n  async saveItem(): Promise<void> {\n    if (!this.editingItem) return;\n    try {\n      await firstValueFrom(\n        this.itemSource.update(this.editingItem.id, {\n          label: this.itemModel.label.trim() || 'Link',\n          url: this.itemModel.url.trim() || '/',\n          parentId: this.itemModel.parentId || null,\n          icon: this.itemModel.icon.trim() || undefined,\n          openInNewTab: this.itemModel.openInNewTab,\n          startsAt: this.itemModel.startsAt ? new Date(this.itemModel.startsAt).toISOString() : null,\n          endsAt: this.itemModel.endsAt ? new Date(this.itemModel.endsAt).toISOString() : null,\n        } as any),\n      );\n      notify('Item saved.', undefined, 'success');\n      this.cancelItemEdit();\n      this.loadItems();\n    } catch {\n      notify('Could not save the item.', undefined, 'error');\n    }\n  }\n\n  async toggleItem(item: ItemVm): Promise<void> {\n    const next = !item.enabled;\n    try {\n      await firstValueFrom(this.itemSource.update(item.id, { enabled: next } as any));\n      item.enabled = next;\n    } catch {\n      notify('Could not update the item.', undefined, 'error');\n    }\n  }\n\n  async removeItem(item: ItemVm): Promise<void> {\n    try {\n      // Detach any children first so they don't dangle.\n      await Promise.all(\n        this.childrenOf(item.id).map((child) =>\n          firstValueFrom(this.itemSource.update(child.id, { parentId: null } as any)),\n        ),\n      );\n      await firstValueFrom(this.itemSource.remove(item.id));\n      this.items = this.items.filter((i) => i.id !== item.id);\n      if (this.editingItem?.id === item.id) this.cancelItemEdit();\n      notify('Item removed.', undefined, 'success');\n    } catch {\n      notify('Could not remove the item.', undefined, 'error');\n    }\n  }\n\n  onDragStart(index: number): void {\n    this.dragIndex = index;\n  }\n\n  onDragOver(event: DragEvent): void {\n    event.preventDefault();\n  }\n\n  onDrop(targetIndex: number): void {\n    if (this.dragIndex === null || this.dragIndex === targetIndex) return;\n    const ordered = this.topLevel;\n    const [moved] = ordered.splice(this.dragIndex, 1);\n    ordered.splice(targetIndex, 0, moved);\n    this.dragIndex = null;\n    void this.persistOrder(ordered);\n  }\n\n  moveItem(index: number, dir: -1 | 1): void {\n    const ordered = this.topLevel;\n    const target = index + dir;\n    if (target < 0 || target >= ordered.length) return;\n    [ordered[index], ordered[target]] = [ordered[target], ordered[index]];\n    void this.persistOrder(ordered);\n  }\n\n  private async persistOrder(ordered: ItemVm[]): Promise<void> {\n    const changed: ItemVm[] = [];\n    ordered.forEach((item, i) => {\n      if (item.position !== i) {\n        item.position = i;\n        changed.push(item);\n      }\n    });\n    try {\n      await Promise.all(\n        changed.map((item) =>\n          firstValueFrom(this.itemSource.update(item.id, { position: item.position } as any)),\n        ),\n      );\n    } catch {\n      notify('Could not save the new order.', undefined, 'error');\n      this.loadItems();\n    }\n  }\n\n  private blankItem() {\n    return {\n      label: '',\n      url: '',\n      parentId: '',\n      icon: '',\n      openInNewTab: false,\n      startsAt: '',\n      endsAt: '',\n    };\n  }\n\n  private toLocal(iso?: string): string {\n    if (!iso) return '';\n    const d = new Date(iso);\n    if (Number.isNaN(d.getTime())) return '';\n    const pad = (n: number) => String(n).padStart(2, '0');\n    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;\n  }\n}\n","<div class=\"x-nav-head\">\n  <div class=\"x-nav-title\">Navigation</div>\n  <div class=\"x-nav-sub\">Storefront menus — the shell consumes the <code>header_primary</code> menu.</div>\n</div>\n\n@if (loading) {\n  <x-element-loader></x-element-loader>\n} @else {\n  <div class=\"x-nav-layout\">\n    <aside class=\"x-nav-list\">\n      <div class=\"x-nav-new\">\n        <select [(ngModel)]=\"newMenuLocation\">\n          @for (l of locations; track l) { <option [value]=\"l\">{{ l }}</option> }\n        </select>\n        <input type=\"text\" placeholder=\"Menu name\" [(ngModel)]=\"newMenuName\" />\n        <button type=\"button\" (click)=\"createMenu()\">Add menu</button>\n      </div>\n      @for (m of menus; track m.id) {\n        <button\n          type=\"button\"\n          class=\"x-nav-list-item\"\n          [class.x-nav-list-active]=\"selected?.id === m.id\"\n          (click)=\"select(m)\"\n        >\n          <span class=\"x-nav-list-title\">{{ m.name }}</span>\n          <span class=\"x-nav-list-meta\">{{ m.location }}</span>\n        </button>\n      } @empty {\n        <div class=\"x-nav-empty\">No menus yet.</div>\n      }\n    </aside>\n\n    <section class=\"x-nav-editor\">\n      @if (!selected) {\n        <div class=\"x-nav-empty\">Pick a menu, or add one.</div>\n      } @else {\n        <div class=\"x-nav-editor-head\">\n          <span>{{ selected.name }} — <code>{{ selected.location }}</code></span>\n          <span>\n            <button type=\"button\" class=\"x-nav-btn\" (click)=\"addItem()\">Add link</button>\n            <button type=\"button\" class=\"x-nav-btn x-nav-danger\" (click)=\"deleteMenu()\">Delete menu</button>\n          </span>\n        </div>\n\n        @if (!topLevel.length) {\n          <div class=\"x-nav-empty\">No links yet.</div>\n        } @else {\n          <div class=\"x-nav-items\">\n            @for (item of topLevel; track item.id; let i = $index) {\n              <div\n                class=\"x-nav-item\"\n                [class.x-nav-item-off]=\"!item.enabled\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart(i)\"\n                (dragover)=\"onDragOver($event)\"\n                (drop)=\"onDrop(i)\"\n              >\n                <div class=\"x-nav-item-row\">\n                  <span class=\"x-nav-grip\">⠿</span>\n                  <div class=\"x-nav-order\">\n                    <button type=\"button\" (click)=\"moveItem(i, -1)\" [disabled]=\"i === 0\">▲</button>\n                    <button type=\"button\" (click)=\"moveItem(i, 1)\" [disabled]=\"i === topLevel.length - 1\">▼</button>\n                  </div>\n                  <span class=\"x-nav-item-label\">{{ item.label }}</span>\n                  <span class=\"x-nav-item-url\">{{ item.url }}</span>\n                  <span class=\"x-nav-item-actions\">\n                    <button type=\"button\" class=\"x-nav-toggle\" (click)=\"toggleItem(item)\">{{ item.enabled ? 'On' : 'Off' }}</button>\n                    <button type=\"button\" class=\"x-nav-link\" (click)=\"editItem(item)\">Edit</button>\n                    <button type=\"button\" class=\"x-nav-link x-nav-danger\" (click)=\"removeItem(item)\">Delete</button>\n                  </span>\n                </div>\n\n                @for (child of childrenOf(item.id); track child.id) {\n                  <div class=\"x-nav-child\" [class.x-nav-item-off]=\"!child.enabled\">\n                    <span class=\"x-nav-child-label\">↳ {{ child.label }}</span>\n                    <span class=\"x-nav-item-url\">{{ child.url }}</span>\n                    <span class=\"x-nav-item-actions\">\n                      <button type=\"button\" class=\"x-nav-toggle\" (click)=\"toggleItem(child)\">{{ child.enabled ? 'On' : 'Off' }}</button>\n                      <button type=\"button\" class=\"x-nav-link\" (click)=\"editItem(child)\">Edit</button>\n                      <button type=\"button\" class=\"x-nav-link x-nav-danger\" (click)=\"removeItem(child)\">Delete</button>\n                    </span>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        @if (editingItem) {\n          <ng-container *ngTemplateOutlet=\"itemForm\"></ng-container>\n        }\n      }\n    </section>\n  </div>\n}\n\n<ng-template #itemForm>\n  <div class=\"x-nav-form\">\n    <div class=\"x-nav-f-row\">\n      <label class=\"x-nav-f\">Label<input type=\"text\" [(ngModel)]=\"itemModel.label\" /></label>\n      <label class=\"x-nav-f\">URL<input type=\"text\" [(ngModel)]=\"itemModel.url\" placeholder=\"/c/solar-panels\" /></label>\n    </div>\n    <div class=\"x-nav-f-row\">\n      <label class=\"x-nav-f\">\n        Parent\n        <select [(ngModel)]=\"itemModel.parentId\">\n          <option value=\"\">— top level —</option>\n          @for (p of parentOptions; track p.id) { <option [value]=\"p.id\">{{ p.label }}</option> }\n        </select>\n      </label>\n      <label class=\"x-nav-f\">Icon<input type=\"text\" [(ngModel)]=\"itemModel.icon\" /></label>\n      <label class=\"x-nav-f x-nav-check\">\n        <input type=\"checkbox\" [(ngModel)]=\"itemModel.openInNewTab\" /> New tab\n      </label>\n    </div>\n    <div class=\"x-nav-f-row\">\n      <label class=\"x-nav-f\">Starts<input type=\"datetime-local\" [(ngModel)]=\"itemModel.startsAt\" /></label>\n      <label class=\"x-nav-f\">Ends<input type=\"datetime-local\" [(ngModel)]=\"itemModel.endsAt\" /></label>\n    </div>\n    <div class=\"x-nav-form-actions\">\n      <button type=\"button\" class=\"x-nav-btn x-nav-btn-primary\" (click)=\"saveItem()\">Save link</button>\n      <button type=\"button\" class=\"x-nav-btn\" (click)=\"cancelItemEdit()\">Cancel</button>\n    </div>\n  </div>\n</ng-template>\n\n<style>\n  .x-nav-head { margin-bottom: 20px; }\n  .x-nav-title { font-size: 24px; font-weight: 800; color: var(--color-text); }\n  .x-nav-sub { font-size: 13.5px; color: var(--color-text-muted); margin-top: 2px; }\n  .x-nav-sub code, .x-nav-editor-head code { font-family: var(--font-mono); font-size: 12px; }\n  .x-nav-empty { font-size: 14px; color: var(--color-text-muted); padding: 12px 0; }\n  .x-nav-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }\n  .x-nav-list { display: flex; flex-direction: column; gap: 6px; }\n  .x-nav-new { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }\n  .x-nav-new select, .x-nav-new input, .x-nav-f input, .x-nav-f select {\n    border: 1px solid var(--color-border); border-radius: var(--radius-md);\n    padding: 6px 10px; font-size: 13px; background: var(--color-surface); color: var(--color-text);\n  }\n  .x-nav-new button, .x-nav-btn {\n    border: 1px solid var(--color-border); background: transparent; border-radius: var(--radius-md);\n    padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--color-text-muted);\n  }\n  .x-nav-btn-primary { border-color: var(--color-accent); color: var(--color-accent-hover); }\n  .x-nav-danger { color: var(--color-danger, #c0362c); }\n  .x-nav-list-item {\n    text-align: left; border: 1px solid var(--color-border); border-radius: var(--radius-md);\n    background: var(--color-surface); padding: 8px 10px; cursor: pointer;\n    display: flex; flex-direction: column; gap: 2px;\n  }\n  .x-nav-list-active { border-color: var(--color-accent); }\n  .x-nav-list-title { font-size: 13px; font-weight: 700; color: var(--color-text); }\n  .x-nav-list-meta { font-size: 11px; color: var(--color-text-muted); }\n  .x-nav-editor { min-width: 0; }\n  .x-nav-editor-head {\n    display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 12px;\n  }\n  .x-nav-editor-head button { margin-left: 6px; }\n  .x-nav-items { display: flex; flex-direction: column; gap: 8px; }\n  .x-nav-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 12px; }\n  .x-nav-item-off { opacity: 0.5; }\n  .x-nav-item-row, .x-nav-child { display: flex; align-items: center; gap: 10px; }\n  .x-nav-child { padding: 6px 0 0 28px; font-size: 12.5px; }\n  .x-nav-grip { cursor: grab; color: var(--color-text-muted); }\n  .x-nav-order { display: flex; flex-direction: column; }\n  .x-nav-order button { border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted); font-size: 10px; line-height: 1.1; padding: 1px 3px; }\n  .x-nav-order button:disabled { opacity: 0.3; }\n  .x-nav-item-label, .x-nav-child-label { font-weight: 700; font-size: 13px; }\n  .x-nav-item-url { font-size: 11.5px; color: var(--color-text-muted); font-family: var(--font-mono); flex: 1; }\n  .x-nav-item-actions { display: flex; gap: 8px; align-items: center; }\n  .x-nav-toggle { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; color: var(--color-text-muted); }\n  .x-nav-link { border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--color-accent-hover); }\n  .x-nav-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 10px; }\n  .x-nav-f { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 11.5px; color: var(--color-text-muted); font-weight: 700; }\n  .x-nav-check { flex-direction: row; align-items: center; gap: 6px; }\n  .x-nav-f-row { display: flex; gap: 10px; }\n  .x-nav-form-actions { display: flex; gap: 8px; }\n</style>\n","import { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { SharedModule } from '@thescaffold/ngx-core';\nimport { ElementsModule } from '@thescaffold/ngx-ui';\nimport { NavigationComponent } from './navigation.component';\n\n@NgModule({\n  declarations: [NavigationComponent],\n  imports: [\n    SharedModule,\n    ElementsModule,\n    RouterModule.forChild([{ path: '', component: NavigationComponent }]),\n  ],\n})\nexport class NavigationModule {}\n"],"names":["i1","i2","i3"],"mappings":"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"}

package/fesm2022/isaiahiroko-tilmart-ngx-apps-admin-order-board.module-DIOjhptn.mjs

@@ -0,0 +1,115 @@
+import * as i0 from '@angular/core';
+import { Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { BaseDirective, using, SharedModule } from '@thescaffold/ngx-core';
+import * as i1$1 from '@thescaffold/ngx-ui';
+import { ElementsModule } from '@thescaffold/ngx-ui';
+import { BehaviorSubject, takeUntil } from 'rxjs';
+import * as i2 from '@angular/common';
+
+// ORD-12 — the ops work queues. Each column is a stage of the order
+// lifecycle a team acts on; cards carry an age so a stale one stands out
+// (a crude SLA cue until per-queue SLA timers + assignment land in P7).
+const QUEUES = [
+    { key: 'awaiting_payment', label: 'Awaiting payment', statuses: ['pending_payment', 'on_hold'] },
+    { key: 'new', label: 'New — to confirm', statuses: ['payment_received', 'confirmed'] },
+    { key: 'processing', label: 'Being prepared', statuses: ['processing', 'partially_fulfilled'] },
+    {
+        key: 'ready',
+        label: 'Ready to ship / pick',
+        statuses: ['ready_to_ship', 'ready_for_pickup'],
+    },
+    {
+        key: 'in_transit',
+        label: 'In transit',
+        statuses: ['dispatched', 'out_for_delivery'],
+    },
+    { key: 'exceptions', label: 'Delivery exceptions', statuses: ['failed_delivery'] },
+    {
+        key: 'returns',
+        label: 'Returns in flight',
+        statuses: ['return_in_flight', 'returned'],
+    },
+    { key: 'done', label: 'Delivered / done', statuses: ['delivered', 'completed'] },
+];
+function naira(amount, currency = 'NGN') {
+    return `${currency} ${Math.round(amount).toLocaleString('en-US')}`;
+}
+class OrderBoardComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.columns$ = new BehaviorSubject(null);
+        this.init = () => {
+            this.apiService
+                .on('apps/commerce/order')
+                .getMany({ page: 1, perPage: 400 })
+                .pipe(takeUntil(this.$))
+                .subscribe(using(({ data }) => {
+                const byQueue = new Map();
+                const now = Date.now();
+                for (const order of data ?? []) {
+                    const queue = QUEUES.find((q) => q.statuses.includes(order.status));
+                    if (!queue)
+                        continue;
+                    const placed = order.placedAt ?? order.createdAt;
+                    const ageHours = placed
+                        ? Math.max(0, (now - new Date(placed).getTime()) / 3_600_000)
+                        : 0;
+                    const card = {
+                        id: order.id,
+                        orderNumber: order.orderNumber,
+                        totalLabel: naira(Number(order.grandTotal ?? 0), order.currency),
+                        ageHours,
+                        ageLabel: this.ageLabel(ageHours),
+                        status: order.status,
+                    };
+                    const list = byQueue.get(queue.key) ?? [];
+                    list.push(card);
+                    byQueue.set(queue.key, list);
+                }
+                this.columns$.next(QUEUES.map((q) => ({
+                    key: q.key,
+                    label: q.label,
+                    cards: (byQueue.get(q.key) ?? []).sort((a, b) => b.ageHours - a.ageHours),
+                })));
+            }));
+        };
+    }
+    ageLabel(hours) {
+        if (hours < 1)
+            return 'just now';
+        if (hours < 24)
+            return `${Math.floor(hours)}h`;
+        return `${Math.floor(hours / 24)}d`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: OrderBoardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: OrderBoardComponent, isStandalone: false, selector: "x-order-board", usesInheritance: true, ngImport: i0, template: "<div class=\"x-page-head\">\n  <div class=\"x-page-title\">Order board</div>\n  <div class=\"x-page-subtitle\">Every open order by ops queue (ORD-12). Cards are oldest-first.</div>\n</div>\n\n@if (columns$ | async; as columns) {\n  <div class=\"x-board\">\n    @for (col of columns; track col.key) {\n      <div class=\"x-board-col\">\n        <div class=\"x-board-col-head\">\n          <span>{{ col.label }}</span>\n          <span class=\"x-board-col-count\">{{ col.cards.length }}</span>\n        </div>\n        <div class=\"x-board-col-body\">\n          @for (card of col.cards; track card.id) {\n            <a class=\"x-order-card\" [routerLink]=\"['../orders']\" [queryParams]=\"{ q: card.orderNumber }\">\n              <div class=\"x-order-card-row\">\n                <span class=\"x-order-card-num\">{{ card.orderNumber }}</span>\n                <span class=\"x-order-card-age\" [class.stale]=\"card.ageHours >= 48\">{{ card.ageLabel }}</span>\n              </div>\n              <div class=\"x-order-card-total\">{{ card.totalLabel }}</div>\n            </a>\n          } @empty {\n            <div class=\"x-board-col-empty\">None</div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else {\n  <x-element-loader></x-element-loader>\n}\n", styles: [".x-page-head{margin-bottom:20px}.x-page-title{font-size:24px;font-weight:800;color:var(--color-text)}.x-page-subtitle{font-size:13.5px;color:var(--color-text-muted);margin-top:2px}.x-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px}.x-board-col{flex:0 0 230px;background:var(--color-surface-2, var(--color-surface));border:1px solid var(--color-border);border-radius:10px;display:flex;flex-direction:column;max-height:calc(100vh - 180px)}.x-board-col-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-muted)}.x-board-col-count{background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;padding:1px 7px;font-size:11px}.x-board-col-body{display:flex;flex-direction:column;gap:8px;padding:0 10px 10px;overflow-y:auto}.x-board-col-empty{font-size:12px;color:var(--color-text-muted);padding:8px 4px;text-align:center}.x-order-card{display:block;text-decoration:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:10px 12px}.x-order-card-row{display:flex;justify-content:space-between;align-items:baseline}.x-order-card-num{font-family:var(--font-mono);font-size:12px;color:var(--color-text)}.x-order-card-age{font-size:11px;color:var(--color-text-muted)}.x-order-card-age.stale{color:var(--color-danger);font-weight:700}.x-order-card-total{font-size:13px;font-weight:800;color:var(--color-text);margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1$1.LoaderComponent, selector: "x-element-loader", inputs: ["data"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: OrderBoardComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-order-board', template: "<div class=\"x-page-head\">\n  <div class=\"x-page-title\">Order board</div>\n  <div class=\"x-page-subtitle\">Every open order by ops queue (ORD-12). Cards are oldest-first.</div>\n</div>\n\n@if (columns$ | async; as columns) {\n  <div class=\"x-board\">\n    @for (col of columns; track col.key) {\n      <div class=\"x-board-col\">\n        <div class=\"x-board-col-head\">\n          <span>{{ col.label }}</span>\n          <span class=\"x-board-col-count\">{{ col.cards.length }}</span>\n        </div>\n        <div class=\"x-board-col-body\">\n          @for (card of col.cards; track card.id) {\n            <a class=\"x-order-card\" [routerLink]=\"['../orders']\" [queryParams]=\"{ q: card.orderNumber }\">\n              <div class=\"x-order-card-row\">\n                <span class=\"x-order-card-num\">{{ card.orderNumber }}</span>\n                <span class=\"x-order-card-age\" [class.stale]=\"card.ageHours >= 48\">{{ card.ageLabel }}</span>\n              </div>\n              <div class=\"x-order-card-total\">{{ card.totalLabel }}</div>\n            </a>\n          } @empty {\n            <div class=\"x-board-col-empty\">None</div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else {\n  <x-element-loader></x-element-loader>\n}\n", styles: [".x-page-head{margin-bottom:20px}.x-page-title{font-size:24px;font-weight:800;color:var(--color-text)}.x-page-subtitle{font-size:13.5px;color:var(--color-text-muted);margin-top:2px}.x-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px}.x-board-col{flex:0 0 230px;background:var(--color-surface-2, var(--color-surface));border:1px solid var(--color-border);border-radius:10px;display:flex;flex-direction:column;max-height:calc(100vh - 180px)}.x-board-col-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-muted)}.x-board-col-count{background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;padding:1px 7px;font-size:11px}.x-board-col-body{display:flex;flex-direction:column;gap:8px;padding:0 10px 10px;overflow-y:auto}.x-board-col-empty{font-size:12px;color:var(--color-text-muted);padding:8px 4px;text-align:center}.x-order-card{display:block;text-decoration:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:10px 12px}.x-order-card-row{display:flex;justify-content:space-between;align-items:baseline}.x-order-card-num{font-family:var(--font-mono);font-size:12px;color:var(--color-text)}.x-order-card-age{font-size:11px;color:var(--color-text-muted)}.x-order-card-age.stale{color:var(--color-danger);font-weight:700}.x-order-card-total{font-size:13px;font-weight:800;color:var(--color-text);margin-top:6px}\n"] }]
+        }] });
+
+class OrderBoardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: OrderBoardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: OrderBoardModule, declarations: [OrderBoardComponent], imports: [SharedModule,
+            ElementsModule, i1.RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: OrderBoardModule, imports: [SharedModule,
+            ElementsModule,
+            RouterModule.forChild([{ path: '', component: OrderBoardComponent }])] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: OrderBoardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [OrderBoardComponent],
+                    imports: [
+                        SharedModule,
+                        ElementsModule,
+                        RouterModule.forChild([{ path: '', component: OrderBoardComponent }]),
+                    ],
+                }]
+        }] });
+
+export { OrderBoardModule };
+//# sourceMappingURL=isaiahiroko-tilmart-ngx-apps-admin-order-board.module-DIOjhptn.mjs.map

package/fesm2022/isaiahiroko-tilmart-ngx-apps-admin-order-board.module-DIOjhptn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isaiahiroko-tilmart-ngx-apps-admin-order-board.module-DIOjhptn.mjs","sources":["../../../projects/admin/src/lib/pages/order-board/order-board.component.ts","../../../projects/admin/src/lib/pages/order-board/order-board.component.html","../../../projects/admin/src/lib/pages/order-board/order-board.module.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { BaseDirective, using } from '@thescaffold/ngx-core';\nimport { BehaviorSubject, takeUntil } from 'rxjs';\n\n// ORD-12 — the ops work queues. Each column is a stage of the order\n// lifecycle a team acts on; cards carry an age so a stale one stands out\n// (a crude SLA cue until per-queue SLA timers + assignment land in P7).\nconst QUEUES: { key: string; label: string; statuses: string[] }[] = [\n  { key: 'awaiting_payment', label: 'Awaiting payment', statuses: ['pending_payment', 'on_hold'] },\n  { key: 'new', label: 'New — to confirm', statuses: ['payment_received', 'confirmed'] },\n  { key: 'processing', label: 'Being prepared', statuses: ['processing', 'partially_fulfilled'] },\n  {\n    key: 'ready',\n    label: 'Ready to ship / pick',\n    statuses: ['ready_to_ship', 'ready_for_pickup'],\n  },\n  {\n    key: 'in_transit',\n    label: 'In transit',\n    statuses: ['dispatched', 'out_for_delivery'],\n  },\n  { key: 'exceptions', label: 'Delivery exceptions', statuses: ['failed_delivery'] },\n  {\n    key: 'returns',\n    label: 'Returns in flight',\n    statuses: ['return_in_flight', 'returned'],\n  },\n  { key: 'done', label: 'Delivered / done', statuses: ['delivered', 'completed'] },\n];\n\nfunction naira(amount: number, currency = 'NGN'): string {\n  return `${currency} ${Math.round(amount).toLocaleString('en-US')}`;\n}\n\ninterface CardVm {\n  id: string;\n  orderNumber: string;\n  totalLabel: string;\n  ageLabel: string;\n  ageHours: number;\n  status: string;\n}\n\ninterface ColumnVm {\n  key: string;\n  label: string;\n  cards: CardVm[];\n}\n\n@Component({\n  standalone: false,\n  selector: 'x-order-board',\n  templateUrl: './order-board.component.html',\n  styleUrl: './order-board.component.scss',\n})\nexport class OrderBoardComponent extends BaseDirective {\n  readonly columns$ = new BehaviorSubject<ColumnVm[] | null>(null);\n\n  override init = () => {\n    this.apiService\n      .on('apps/commerce/order')\n      .getMany({ page: 1, perPage: 400 } as any)\n      .pipe(takeUntil(this.$))\n      .subscribe(\n        using(({ data }: { data: any[] }) => {\n          const byQueue = new Map<string, CardVm[]>();\n          const now = Date.now();\n          for (const order of data ?? []) {\n            const queue = QUEUES.find((q) => q.statuses.includes(order.status));\n            if (!queue) continue;\n            const placed = order.placedAt ?? order.createdAt;\n            const ageHours = placed\n              ? Math.max(0, (now - new Date(placed).getTime()) / 3_600_000)\n              : 0;\n            const card: CardVm = {\n              id: order.id,\n              orderNumber: order.orderNumber,\n              totalLabel: naira(Number(order.grandTotal ?? 0), order.currency),\n              ageHours,\n              ageLabel: this.ageLabel(ageHours),\n              status: order.status,\n            };\n            const list = byQueue.get(queue.key) ?? [];\n            list.push(card);\n            byQueue.set(queue.key, list);\n          }\n          this.columns$.next(\n            QUEUES.map((q) => ({\n              key: q.key,\n              label: q.label,\n              cards: (byQueue.get(q.key) ?? []).sort((a, b) => b.ageHours - a.ageHours),\n            })),\n          );\n        }),\n      );\n  };\n\n  private ageLabel(hours: number): string {\n    if (hours < 1) return 'just now';\n    if (hours < 24) return `${Math.floor(hours)}h`;\n    return `${Math.floor(hours / 24)}d`;\n  }\n}\n","<div class=\"x-page-head\">\n  <div class=\"x-page-title\">Order board</div>\n  <div class=\"x-page-subtitle\">Every open order by ops queue (ORD-12). Cards are oldest-first.</div>\n</div>\n\n@if (columns$ | async; as columns) {\n  <div class=\"x-board\">\n    @for (col of columns; track col.key) {\n      <div class=\"x-board-col\">\n        <div class=\"x-board-col-head\">\n          <span>{{ col.label }}</span>\n          <span class=\"x-board-col-count\">{{ col.cards.length }}</span>\n        </div>\n        <div class=\"x-board-col-body\">\n          @for (card of col.cards; track card.id) {\n            <a class=\"x-order-card\" [routerLink]=\"['../orders']\" [queryParams]=\"{ q: card.orderNumber }\">\n              <div class=\"x-order-card-row\">\n                <span class=\"x-order-card-num\">{{ card.orderNumber }}</span>\n                <span class=\"x-order-card-age\" [class.stale]=\"card.ageHours >= 48\">{{ card.ageLabel }}</span>\n              </div>\n              <div class=\"x-order-card-total\">{{ card.totalLabel }}</div>\n            </a>\n          } @empty {\n            <div class=\"x-board-col-empty\">None</div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else {\n  <x-element-loader></x-element-loader>\n}\n","import { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { SharedModule } from '@thescaffold/ngx-core';\nimport { ElementsModule } from '@thescaffold/ngx-ui';\nimport { OrderBoardComponent } from './order-board.component';\n\n@NgModule({\n  declarations: [OrderBoardComponent],\n  imports: [\n    SharedModule,\n    ElementsModule,\n    RouterModule.forChild([{ path: '', component: OrderBoardComponent }]),\n  ],\n})\nexport class OrderBoardModule {}\n"],"names":["i2","i3"],"mappings":"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"}