@taon-dev/ui 21.0.13 → 21.0.15

package/ts-source/browser-code/taon-admin-layout/taon-admin-page-tabs.component.ts

@@ -0,0 +1,185 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { ChangeDetectionStrategy, Component, inject, Input, OnInit, signal, } from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NavigationEnd, Route, Router, Routes } from '@angular/router';
+import { filter } from 'rxjs';
+import { TaonAdminRoute } from './taon-admin-layout.models';
+import { TaonAdminMenuContext } from './taon-admin-menu-context';
+export interface TaonAdminTabLevel {
+    level: number;
+    routes: Routes;
+    baseSegments: string[];
+}
+@Component({
+    selector: 'taon-admin-page-tabs',
+    standalone: true,
+    imports: [MatTabsModule, MatTooltipModule],
+    templateUrl: './taon-admin-page-tabs.component.html',
+    styleUrl: './taon-admin-page-tabs.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TaonAdminPageTabsComponent implements OnInit {
+    protected readonly menuContext = inject(TaonAdminMenuContext, { optional: true }) ??
+        new TaonAdminMenuContext();
+    @Input({ required: true })
+    routes!: Routes;
+    @Input()
+    basePath = '';
+    @Input()
+    outlet?: string;
+    protected readonly levels = signal<TaonAdminTabLevel[]>([]);
+    constructor(private readonly router: Router) { }
+    async ngOnInit(): Promise<void> {
+        await this.refresh();
+        this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(async () => {
+            await this.refresh();
+        });
+    }
+    protected label(route: Route): string {
+        return route.data?.['menuItem'] ?? this.startCase(route.path ?? '');
+    }
+    protected isActive(level: TaonAdminTabLevel, route: Route): boolean {
+        if (!route.path) {
+            return false;
+        }
+        const expected = [...level.baseSegments, route.path];
+        const current = this.currentOutletSegments();
+        if (current.length < expected.length) {
+            return false;
+        }
+        return expected.every((segment, index) => current[index] === segment);
+    }
+    protected async tabClicked(level: TaonAdminTabLevel, route: Route): Promise<void> {
+        if (!route.path ||
+            !this.menuContext.isVisible(route) ||
+            this.menuContext.isDisabled(route)) {
+            return;
+        }
+        await this.navigateTo([
+            ...level.baseSegments.slice(this.basePathSegments.length),
+            route.path,
+        ]);
+    }
+    private outletBaseMatrixParams(): Record<string, string> {
+        if (!this.outlet) {
+            return {};
+        }
+        const tree = this.router.parseUrl(this.router.url);
+        const outletGroup = tree.root.children[this.outlet];
+        return {
+            ...outletGroup?.segments[0]?.parameters,
+        };
+    }
+    private async navigateTo(routeSegments: string[]): Promise<boolean> {
+        const segments = [...this.basePathSegments, ...routeSegments];
+        if (this.outlet) {
+            const [firstSegment, ...remainingSegments] = segments;
+            if (!firstSegment) {
+                return false;
+            }
+            const matrixParams = this.outletBaseMatrixParams();
+            return this.router.navigate([
+                {
+                    outlets: {
+                        [this.outlet]: [
+                            firstSegment,
+                            matrixParams,
+                            ...remainingSegments,
+                        ],
+                    },
+                },
+            ]);
+        }
+        return this.router.navigate(['/', ...segments]);
+    }
+    private async refresh(): Promise<void> {
+        const current = this.currentOutletSegments();
+        const base = this.basePathSegments;
+        const relative = current.slice(base.length);
+        const levels: TaonAdminTabLevel[] = [];
+        await this.walk(this.routes, relative, base, 1, levels);
+        this.levels.set(levels.filter(level => level.level >= 3));
+    }
+    private async walk(routes: Routes, remainingUrl: string[], baseSegments: string[], level: number, result: TaonAdminTabLevel[]): Promise<void> {
+        routes = this.unwrapEmptyPathRoutes(routes);
+        const visibleRoutes = this.navigationRoutes(routes);
+        if (level >= 3 && visibleRoutes.length > 0) {
+            result.push({
+                level,
+                routes: visibleRoutes,
+                baseSegments,
+            });
+        }
+        const currentSegment = remainingUrl[0];
+        if (!currentSegment) {
+            return;
+        }
+        const activeRoute = routes.find(route => route.path === currentSegment);
+        if (!activeRoute) {
+            return;
+        }
+        let children = await this.loadChildren(activeRoute);
+        children = this.unwrapEmptyPathRoutes(children);
+        if (!children.length) {
+            return;
+        }
+        await this.walk(children, remainingUrl.slice(1), [...baseSegments, currentSegment], level + 1, result);
+    }
+    private async loadChildren(route: Route): Promise<Routes> {
+        if (route.children) {
+            return route.children;
+        }
+        const adminRoute = route as TaonAdminRoute;
+        if (adminRoute.loadAdminChildren) {
+            return await adminRoute.loadAdminChildren();
+        }
+        return [];
+    }
+    private unwrapEmptyPathRoutes(routes: Routes): Routes {
+        const result: Routes = [];
+        for (const route of routes) {
+            if (route.path === '' && route.children) {
+                result.push(...this.unwrapEmptyPathRoutes(route.children));
+                continue;
+            }
+            result.push(route);
+        }
+        return result;
+    }
+    private navigationRoutes(routes: Routes): Routes {
+        return routes.filter(route => !!route.path &&
+            route.redirectTo === undefined &&
+            !route.data?.['hideInNavigation']);
+    }
+    private currentOutletSegments(): string[] {
+        const tree = this.router.parseUrl(this.router.url);
+        const outletName = this.outlet || 'primary';
+        const group = tree.root.children[outletName];
+        if (!group) {
+            return [];
+        }
+        return group.segments.map(segment => segment.path);
+    }
+    private get basePathSegments(): string[] {
+        return this.basePath.split('/').filter(Boolean);
+    }
+    private startCase(value: string): string {
+        return value
+            .replace(/[-_]+/g, ' ')
+            .replace(/\b\w/g, char => char.toUpperCase());
+    }
+}

package/ts-source/browser-code/taon-admin-layout/taon-base-admin-page.component.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { Component, ViewChild } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+@Component({
+    template: '',
+})
+export abstract class TaonBaseAdminLayoutPage {
+    @ViewChild(RouterOutlet)
+    routerOutlet!: RouterOutlet;
+    get hasActiveChildRoute(): boolean {
+        return this.routerOutlet?.isActivated ?? false;
+    }
+}

package/ts-source/browser-code/taon-backoffice-notifications/i18n/taon-backoffice-notifications.component.ts.en-US.i18n.data.ts

@@ -0,0 +1,28 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export interface EnUsTraslationOverrideSrcLibTaonBackofficeNotificationsTaonBackofficeNotificationsComponentTs {
+    "en-US": {
+        "": {
+            "Unknown error"?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts",
+    "tags": [
+        {
+            "gettextString": "Unknown error",
+            "lineNumber": 64
+        }
+    ]
+};

package/ts-source/browser-code/taon-backoffice-notifications/i18n/taon-backoffice-notifications.component.ts.en-US.po

@@ -0,0 +1,9 @@
+msgid ""
+msgstr ""
+"Language: en-US\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts:64
+msgid "Unknown error"
+msgstr ""

package/ts-source/browser-code/taon-backoffice-notifications/i18n/taon-backoffice-notifications.component.ts.pl-PL.i18n.data.ts

@@ -0,0 +1,28 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export interface PlPlTraslationOverrideSrcLibTaonBackofficeNotificationsTaonBackofficeNotificationsComponentTs {
+    "pl-PL": {
+        "": {
+            "Unknown error"?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts",
+    "tags": [
+        {
+            "gettextString": "Unknown error",
+            "lineNumber": 64
+        }
+    ]
+};

package/ts-source/browser-code/taon-backoffice-notifications/i18n/taon-backoffice-notifications.component.ts.pl-PL.po

@@ -0,0 +1,9 @@
+msgid ""
+msgstr ""
+"Language: pl-PL\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts:64
+msgid "Unknown error"
+msgstr ""

package/ts-source/browser-code/taon-backoffice-notifications/i18n/taon-backoffice-notifications.translation.ts

@@ -0,0 +1,17 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { CoreModels } from 'tnp-core/browser';
+import { EnUsTraslationOverrideSrcLibTaonBackofficeNotificationsTaonBackofficeNotificationsComponentTs } from './taon-backoffice-notifications.component.ts.en-US.i18n.data';
+import { PlPlTraslationOverrideSrcLibTaonBackofficeNotificationsTaonBackofficeNotificationsComponentTs } from './taon-backoffice-notifications.component.ts.pl-PL.i18n.data';
+;
+export type TaonBackofficeNotificationsOverride = CoreModels.DeepPartial<EnUsTraslationOverrideSrcLibTaonBackofficeNotificationsTaonBackofficeNotificationsComponentTs | PlPlTraslationOverrideSrcLibTaonBackofficeNotificationsTaonBackofficeNotificationsComponentTs>;

package/ts-source/browser-code/taon-backoffice-notifications/index.ts

@@ -0,0 +1,16 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export * from './taon-backoffice-notifications.component';
+export * from './taon-backoffice-notifications.models';
+export * from './taon-backoffice-notifications.module';
+export * from './taon-backoffice-notifications.service';

package/ts-source/browser-code/taon-backoffice-notifications/taon-backoffice-notifications.component.html

@@ -0,0 +1,13 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+

package/ts-source/browser-code/taon-backoffice-notifications/taon-backoffice-notifications.component.scss

@@ -0,0 +1,14 @@
+/* ============================================================================
+ 
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+:host {
+  display: none;
+}

package/ts-source/browser-code/taon-backoffice-notifications/taon-backoffice-notifications.component.ts

@@ -0,0 +1,58 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { Component, DestroyRef, inject, Input } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Translation } from '@taon-dev/i18n/browser';
+import { HttpResponseError, Resource, RestErrorResponseWrapper, } from 'ng2-rest/browser';
+import { getHttpStatus, Taon, TaonAdminService } from 'taon/browser';
+import { _ } from 'tnp-core/browser';
+import { TaonBackofficeNotificationsService } from './taon-backoffice-notifications.service';
+const t = Translation.for('src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts', { "src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts": { "en-US": async () => (await import('./i18n/taon-backoffice-notifications.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-backoffice-notifications.component.ts.pl-PL.i18n.data')).default } } as any);
+@Component({
+    selector: 'taon-backoffice-notifications',
+    standalone: true,
+    templateUrl: './taon-backoffice-notifications.component.html',
+    styleUrls: ['./taon-backoffice-notifications.component.scss'],
+})
+export class TaonBackofficeNotificationsComponent {
+    t = t.for(this);
+    private readonly notification = inject(TaonBackofficeNotificationsService);
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly taonAdminService = inject(TaonAdminService);
+    @Input()
+    filter: (err: HttpResponseError<RestErrorResponseWrapper>) => HttpResponseError<RestErrorResponseWrapper>;
+    constructor() {
+        Resource.listenErrors
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((error: HttpResponseError<RestErrorResponseWrapper>) => {
+            if (_.isFunction(this.filter)) {
+                error = this.filter(error);
+            }
+            const jsonMsg = error?.body?.json;
+            if (!jsonMsg?.message) {
+                console.log({ error });
+            }
+            const statusCode = jsonMsg.status ?? error.statusCode;
+            const code = jsonMsg?.code || getHttpStatus(statusCode);
+            if (this.taonAdminService.shouldSkipShowingError(code as any)) {
+                console.log(`[@taon-dev/sudo] Skipping notificaiton for message "${jsonMsg.message}" (code=${statusCode})`);
+            }
+            else {
+                this.notification.error({
+                    title: t.translate(jsonMsg.message) || t.gettext('Unknown error'),
+                    details: jsonMsg?.details,
+                });
+            }
+        });
+    }
+}

package/ts-source/browser-code/taon-backoffice-notifications/taon-backoffice-notifications.models.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export interface TaonNotificationOptions {
+    title: string;
+    subtitle?: string;
+    details?: string;
+}
+export type TaonNotificationType = 'success' | 'error' | 'warning' | 'info';
+export type TaonNotificationInput = TaonNotificationOptions | string;

package/ts-source/browser-code/taon-backoffice-notifications/taon-backoffice-notifications.service.ts

@@ -0,0 +1,49 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { inject, Injectable } from '@angular/core';
+import { HotToastService } from '@ngneat/hot-toast';
+import { TaonNotificationInput, TaonNotificationOptions, } from './taon-backoffice-notifications.models';
+import { TaonErrorToastComponent, TaonErrorToastData, } from './taon-error-toast.component';
+@Injectable({
+    providedIn: 'root',
+})
+export class TaonBackofficeNotificationsService {
+    private readonly toast = inject(HotToastService);
+    private normalize(input: TaonNotificationInput): TaonNotificationOptions {
+        return typeof input === 'string' ? { title: input } : input;
+    }
+    success(input: TaonNotificationInput) {
+        const { title } = this.normalize(input);
+        return this.toast.success(title);
+    }
+    error(input: TaonNotificationInput) {
+        const { title, details } = this.normalize(input);
+        if (!details) {
+            return this.toast.error(title);
+        }
+        return this.toast.error<TaonErrorToastData>(TaonErrorToastComponent, {
+            data: {
+                title,
+                details,
+            },
+        });
+    }
+    warn(input: TaonNotificationInput) {
+        const { title } = this.normalize(input);
+        return this.toast.warning(title);
+    }
+    info(input: TaonNotificationInput) {
+        const { title } = this.normalize(input);
+        return this.toast.info(title);
+    }
+}

package/ts-source/browser-code/taon-backoffice-notifications/taon-error-details-dialog.component.html

@@ -0,0 +1,49 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+
+<h2 mat-dialog-title>Error details</h2>
+
+<mat-dialog-content>
+  <div class="error-message">
+    {{ data.message }}
+  </div>
+
+  <div class="editor-selector">
+    <span class="editor-selector-label"> I am using editor: </span>
+
+    <mat-button-toggle-group
+      [value]="editor"
+      (change)="setEditor($event.value)"
+      aria-label="Code editor">
+      <mat-button-toggle value="vscode"> VS Code </mat-button-toggle>
+
+      <mat-button-toggle value="vscodium"> VSCodium </mat-button-toggle>
+    </mat-button-toggle-group>
+  </div>
+
+  <pre
+    class="error-details"><code>@for (stackLine of stackLines; track $index) {
+@if (stackLine.file) {<a
+  class="stack-link"
+  title="Open {{ stackLine.file }}:{{ stackLine.line }}:{{ stackLine.column }}"
+  (click)="openStackLine(stackLine)">{{ stackLine.text }}</a>} @else {{{ stackLine.text }}}{{ '\n' }}
+}</code></pre>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button
+    mat-button
+    mat-dialog-close>
+    Close
+  </button>
+</mat-dialog-actions>

package/ts-source/browser-code/taon-backoffice-notifications/taon-error-details-dialog.component.scss

@@ -0,0 +1,69 @@
+/* ============================================================================
+ 
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+.error-message {
+  margin-bottom: 16px;
+  font-weight: 500;
+}
+
+.editor-selector {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  margin-bottom: 12px;
+}
+
+.editor-selector-label {
+  font-size: 13px;
+}
+
+
+.error-details {
+  box-sizing: border-box;
+  max-width: 100%;
+  max-height: 60vh;
+
+  margin: 0;
+  padding: 16px;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border-radius: 6px;
+
+  background: rgba(0, 0, 0, 0.06);
+
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+
+  font-size: 12px;
+  line-height: 1.5;
+
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.stack-link {
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.08);
+  }
+}
+
+.stack-line {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}