@taon-dev/cms 21.0.13 → 21.0.16

package/ts-source/websql-code-prod/taon-posts/taon-cms-post-edit-dialog/taon-cms-post-edit-dialog.component.html

@@ -0,0 +1,25 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+
+<header class="dialog-header">
+  <h2>{{ data.mode === 'add' ? 'Add post' : 'Manage post' }}</h2>
+  <button mat-icon-button type="button" aria-label="Close post editor" [disabled]="editor()?.busy() || editor()?.dialogOpen()" (click)="close()">
+    <mat-icon>close</mat-icon>
+  </button>
+</header>
+<taon-cms-post
+  [post]="data.post ?? null"
+  [mode]="data.mode"
+  (changed)="changed.emit($event)"
+  (deleted)="deleted($event)"
+  (cancelled)="close()" />

package/ts-source/websql-code-prod/taon-posts/taon-cms-post-edit-dialog/taon-cms-post-edit-dialog.component.scss

@@ -0,0 +1,30 @@
+/* ============================================================================
+ 
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+:host {
+  display: block;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid #8883;
+
+  h2 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-post-edit-dialog/taon-cms-post-edit-dialog.component.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-post-edit-dialog/taon-cms-post-edit-dialog.component.ts

@@ -0,0 +1,43 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, viewChild, } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef, } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import type { TaonCmsContentEntity } from '../../taon-cms-content/taon-cms-content.entity';
+import { TaonCmsPostComponent } from '../taon-cms-post/taon-cms-post.component';
+export interface TaonCmsPostEditDialogData {
+    post?: TaonCmsContentEntity;
+    mode: 'edit' | 'add';
+}
+@Component({
+    selector: 'taon-cms-post-edit-dialog',
+    templateUrl: './taon-cms-post-edit-dialog.component.html',
+    styleUrls: ['./taon-cms-post-edit-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatButtonModule, MatDialogModule, MatIconModule, TaonCmsPostComponent],
+})
+export class TaonCmsPostEditDialogComponent {
+    readonly data = inject<TaonCmsPostEditDialogData>(MAT_DIALOG_DATA);
+    readonly editor = viewChild(TaonCmsPostComponent);
+    readonly changed = new EventEmitter<TaonCmsContentEntity>();
+    private readonly ref = inject(MatDialogRef<TaonCmsPostEditDialogComponent>);
+    close(): void {
+        if (!this.editor()?.busy() && !this.editor()?.dialogOpen()) {
+            this.ref.close();
+        }
+    }
+    deleted(post: TaonCmsContentEntity): void {
+        this.ref.close(post);
+    }
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-posts-backoffice/index.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-posts-backoffice/index.ts

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

package/ts-source/websql-code-prod/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.component.html

@@ -0,0 +1,27 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+
+<h1>CMS posts</h1>
+@if (loading()) {
+  <p role="status">Loading posts...</p>
+}
+@if (error()) {
+  <p role="alert">{{ error() }}</p>
+}
+<taon-datatable
+  [entityCrudController]="crud"
+  [columns]="columns"
+  [allowedColumns]="['id', 'title', 'status']"
+  searchMode="advanced"
+  (addingItem)="add()">
+</taon-datatable>

package/ts-source/websql-code-prod/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.component.scss

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

package/ts-source/websql-code-prod/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.component.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.component.ts

@@ -0,0 +1,147 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, OnInit, ViewChild, inject, signal, } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { MtxGridColumn } from '@ng-matero/extensions/grid';
+import { TaonConfirmDialogComponent, TaonDatatableComponent, } from '@taon-dev/ui/websql-prod';
+import { Subject, finalize, takeUntil } from 'rxjs';
+import { TaonCmsContentApiService } from '../../taon-cms-content/taon-cms-content-api.service';
+import type { TaonCmsContentEntity } from '../../taon-cms-content/taon-cms-content.entity';
+import { TaonCmsPostEditDialogComponent } from '../taon-cms-post-edit-dialog/taon-cms-post-edit-dialog.component';
+import type { TaonCmsPostEditDialogData } from '../taon-cms-post-edit-dialog/taon-cms-post-edit-dialog.component';
+@Component({
+    selector: 'app-taon-cms-posts-backoffice',
+    templateUrl: './taon-cms-posts-backoffice.component.html',
+    styleUrls: ['./taon-cms-posts-backoffice.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatButtonModule, TaonDatatableComponent],
+    providers: [TaonCmsContentApiService],
+})
+export class TaonCmsPostsBackofficeComponent {
+    @ViewChild(TaonDatatableComponent)
+    readonly datatable!: TaonDatatableComponent;
+    readonly taonCmsContentApiService = inject(TaonCmsContentApiService);
+    readonly posts = signal<TaonCmsContentEntity[]>([]);
+    readonly loading = signal(false);
+    readonly deleting = signal<number | null>(null);
+    readonly error = signal('');
+    private readonly dialog = inject(MatDialog);
+    private readonly route = inject(ActivatedRoute);
+    private readonly router = inject(Router);
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly cancelLoad$ = new Subject<void>();
+    public get crud() {
+        return this.taonCmsContentApiService.crudController;
+    }
+    readonly columns: MtxGridColumn[] = [
+        { header: 'ID', field: 'id', sortable: true },
+        { header: 'Title', field: 'title', sortable: true },
+        { header: 'Status', field: 'status', sortable: true },
+        {
+            header: 'Actions',
+            field: 'actions',
+            type: 'button',
+            buttons: [
+                {
+                    type: 'icon',
+                    icon: 'edit',
+                    tooltip: 'Edit post',
+                    click: (post: TaonCmsContentEntity) => this.edit(post),
+                },
+                {
+                    type: 'icon',
+                    icon: 'open_in_new',
+                    tooltip: 'Post details',
+                    click: (post: TaonCmsContentEntity) => this.openDetails(post),
+                },
+                {
+                    type: 'icon',
+                    icon: 'delete',
+                    tooltip: 'Delete (archive) post',
+                    disabled: (post: TaonCmsContentEntity) => post.status === 'archived' || this.deleting() !== null,
+                    click: (post: TaonCmsContentEntity) => this.delete(post),
+                },
+            ],
+        },
+    ];
+    reload(): void {
+        this.datatable.reload();
+    }
+    ngAfterViewInit(): void {
+        this.reload();
+    }
+    add(): void {
+        this.openEditor({ mode: 'add' });
+    }
+    edit(post: TaonCmsContentEntity): void {
+        this.openEditor({ mode: 'edit', post });
+    }
+    openDetails(post: TaonCmsContentEntity): void {
+        const postsRoute = this.route.parent;
+        if (!postsRoute) {
+            this.error.set('The Post details route is unavailable.');
+            return;
+        }
+        void this.router.navigate([post.id], { relativeTo: postsRoute });
+    }
+    delete(post: TaonCmsContentEntity): void {
+        if (this.deleting() !== null || post.status === 'archived') {
+            return;
+        }
+        this.deleting.set(post.id);
+        const ref = this.dialog.open(TaonConfirmDialogComponent, {
+            data: {
+                title: 'Delete post?',
+                message: 'This archives the post. It can be restored from its revisions.',
+                confirmText: 'Delete',
+            },
+        });
+        ref
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(confirmed => {
+            if (!confirmed) {
+                this.deleting.set(null);
+                return;
+            }
+            this.error.set('');
+            this.taonCmsContentApiService
+                .deleteContent(post.id, post.version)
+                .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.deleting.set(null)))
+                .subscribe({
+                next: () => this.reload(),
+                error: (error: unknown) => {
+                    console.error('[taon-cms-posts-backoffice] Unable to delete post', error);
+                    this.error.set('The post could not be deleted. Refresh the table before retrying.');
+                },
+            });
+        });
+    }
+    private openEditor(data: TaonCmsPostEditDialogData): void {
+        const ref = this.dialog.open(TaonCmsPostEditDialogComponent, {
+            data,
+            width: '100vw',
+            height: '100dvh',
+            maxWidth: '100vw',
+            maxHeight: '100dvh',
+            disableClose: true,
+            autoFocus: 'first-tabbable',
+        });
+        ref.componentInstance.changed
+            .pipe(takeUntil(ref.afterClosed()), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.reload());
+    }
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.models.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.models.ts

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

package/ts-source/websql-code-prod/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.routes.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-posts-backoffice/taon-cms-posts-backoffice.routes.ts

@@ -0,0 +1,43 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { inject } from '@angular/core';
+import { Routes } from '@angular/router';
+import { ResolveFn } from '@angular/router';
+import { TaonCmsContentApiService } from '../../taon-cms-content/taon-cms-content-api.service';
+import type { TaonCmsContentEntity } from '../../taon-cms-content/taon-cms-content.entity';
+const resolvePost: ResolveFn<TaonCmsContentEntity> = async (route) => {
+    const id = Number(route.paramMap.get('id'));
+    if (!Number.isSafeInteger(id) || id <= 0) {
+        throw new Error('Invalid Post ID');
+    }
+    const taonCmsContentApiService = inject(TaonCmsContentApiService);
+    const post = await taonCmsContentApiService.getById(id);
+    if (!post) {
+        throw new Error('Post not found');
+    }
+    return post;
+};
+export const TaonCmsPostsBackofficeRoutes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        loadComponent: () => import('./taon-cms-posts-backoffice.component').then(m => m.TaonCmsPostsBackofficeComponent),
+    },
+    {
+        path: ':id',
+        data: { hideInNavigation: true },
+        providers: [TaonCmsContentApiService],
+        resolve: { post: resolvePost },
+        loadComponent: () => import('../taon-cms-post-details-page/taon-cms-post-details-page.component').then(m => m.TaonCmsPostDetailsPageComponent),
+    },
+];

package/ts-source/websql-code-prod/taon-posts/taon-cms-revision-chooser/index.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-revision-chooser/index.ts

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

package/ts-source/websql-code-prod/taon-posts/taon-cms-revision-chooser/taon-cms-revision-chooser.component.html

@@ -0,0 +1,48 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+
+<h2 mat-dialog-title>Restore a revision</h2>
+<mat-dialog-content>
+  <p>Restoring replaces the post, including its status, with the selected revision.</p>
+  @if (loading()) {
+    <p role="status">Loading revisions...</p>
+  } @else {
+    <mat-radio-group aria-label="Post revisions" [value]="selected()" (change)="selected.set($event.value)" [disabled]="applying()">
+      @for (revision of revisions(); track revision.id) {
+        <mat-radio-button [value]="revision.revisionNumber" [disabled]="!revision.snapshot">
+          <strong>Revision {{ revision.revisionNumber }}</strong>
+          <span>{{ revision.createdAt | date: 'medium' }}</span>
+          @if (revision.createdByUserId !== null && revision.createdByUserId !== undefined) {
+            <span>User {{ revision.createdByUserId }}</span>
+          }
+          @if (!revision.snapshot) {
+            <span>Legacy revision - cannot be restored</span>
+          }
+        </mat-radio-button>
+      } @empty {
+        <p>No revisions are available.</p>
+      }
+    </mat-radio-group>
+  }
+  @if (error()) {
+    <p role="alert">{{ error() }}</p>
+    <button mat-button type="button" [disabled]="loading() || applying()" (click)="load()">Reload revisions</button>
+  }
+  @if (applying()) {
+    <p role="status">Restoring...</p>
+  }
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button type="button" [disabled]="applying()" (click)="cancel()">Cancel</button>
+  <button mat-flat-button type="button" [disabled]="loading() || applying() || selected() === null" (click)="apply()">Apply</button>
+</mat-dialog-actions>

package/ts-source/websql-code-prod/taon-posts/taon-cms-revision-chooser/taon-cms-revision-chooser.component.scss

@@ -0,0 +1,26 @@
+/* ============================================================================
+ 
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+mat-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+mat-radio-button span {
+  display: block;
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+
+[role='alert'] {
+  color: #b3261e;
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-revision-chooser/taon-cms-revision-chooser.component.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-revision-chooser/taon-cms-revision-chooser.component.ts

@@ -0,0 +1,87 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal, } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef, } from '@angular/material/dialog';
+import { MatRadioModule } from '@angular/material/radio';
+import { finalize } from 'rxjs';
+import type { TaonCmsContentEntity } from '../../taon-cms-content/taon-cms-content.entity';
+import { TaonCmsContentRevisionApiService } from '../../taon-cms-content-revision/taon-cms-content-revision-api.service';
+import type { TaonCmsContentRevisionEntity } from '../../taon-cms-content-revision/taon-cms-content-revision.entity';
+@Component({
+    selector: 'taon-cms-revision-chooser',
+    templateUrl: './taon-cms-revision-chooser.component.html',
+    styleUrls: ['./taon-cms-revision-chooser.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [DatePipe, MatButtonModule, MatDialogModule, MatRadioModule],
+    providers: [TaonCmsContentRevisionApiService],
+})
+export class TaonCmsRevisionChooserComponent {
+    readonly post = inject<TaonCmsContentEntity>(MAT_DIALOG_DATA);
+    readonly revisions = signal<TaonCmsContentRevisionEntity[]>([]);
+    readonly selected = signal<number | null>(null);
+    readonly loading = signal(false);
+    readonly applying = signal(false);
+    readonly error = signal('');
+    private readonly api = inject(TaonCmsContentRevisionApiService);
+    private readonly ref = inject(MatDialogRef<TaonCmsRevisionChooserComponent, TaonCmsContentEntity>);
+    private readonly destroyRef = inject(DestroyRef);
+    constructor() {
+        this.load();
+    }
+    load(): void {
+        if (this.loading() || this.applying()) {
+            return;
+        }
+        this.selected.set(null);
+        this.loading.set(true);
+        this.error.set('');
+        this.api.listRevisions(this.post.id).pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.loading.set(false))).subscribe({
+            next: revisions => this.revisions.set([...revisions].sort((a, b) => b.revisionNumber - a.revisionNumber)),
+            error: (error: unknown) => {
+                console.error('[taon-cms-revision-chooser] Unable to load revisions', error);
+                this.error.set('Revisions could not be loaded. Please try again.');
+            },
+        });
+    }
+    apply(): void {
+        const revisionNumber = this.selected();
+        if (this.loading() || this.applying()) {
+            return;
+        }
+        if (revisionNumber === null) {
+            this.error.set('Select a revision to restore.');
+            return;
+        }
+        this.applying.set(true);
+        this.error.set('');
+        this.api.restoreContent(this.post.id, {
+            revisionNumber,
+            expectedVersion: this.post.version,
+        }).pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.applying.set(false))).subscribe({
+            next: post => this.ref.close(post),
+            error: (error: unknown) => {
+                console.error('[taon-cms-revision-chooser] Unable to restore revision', error);
+                this.error.set('The revision could not be restored. If the post changed, close and ' +
+                    'reopen it to load its latest version.');
+            },
+        });
+    }
+    cancel(): void {
+        if (!this.applying()) {
+            this.ref.close();
+        }
+    }
+}

package/ts-source/websql-code-prod/taon-posts/taon-related-post-chooser/index.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/taon-posts/taon-related-post-chooser/index.ts

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

package/ts-source/websql-code-prod/taon-posts/taon-related-post-chooser/taon-related-post-chooser.component.html

@@ -0,0 +1,40 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+
+<h2 mat-dialog-title>Add related post</h2>
+<mat-dialog-content>
+  <label class="search-field">
+    <span>Search posts</span>
+    <input type="search" aria-label="Search posts by ID, title or slug" [value]="query()" [disabled]="loading()" (input)="search($event)" />
+  </label>
+  @if (loading()) {
+    <p role="status">Loading posts...</p>
+  } @else if (error()) {
+    <p class="error" role="alert">{{ error() }}</p>
+    <button mat-button type="button" (click)="load()">Try again</button>
+  } @else {
+    <mat-radio-group aria-label="Related post" [value]="selected()" (change)="selected.set($event.value)">
+      @for (post of filteredPosts(); track post.id) {
+        <mat-radio-button [value]="post.id">
+          #{{ post.id }} - {{ post.title }} <span class="slug">{{ post.slug }}</span>
+        </mat-radio-button>
+      } @empty {
+        <p>No matching posts available.</p>
+      }
+    </mat-radio-group>
+  }
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button type="button" (click)="cancel()">Cancel</button>
+  <button mat-flat-button type="button" [disabled]="loading() || !!error() || selected() === null" (click)="choose()">Add related post</button>
+</mat-dialog-actions>