@taon-dev/cms 21.0.17 → 21.0.19

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

@@ -17,6 +17,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
@@ -24,7 +26,7 @@ import { TaonPermissionApiService } from '@taon-dev/session/websql-prod';
 import type { TaonPermissionEntity } from '@taon-dev/session/websql-prod';
 import { TaonConfirmDialogComponent } from '@taon-dev/ui/websql-prod';
 import { Translation } from '@taon-dev/i18n/websql-prod';
-import { Observable, Subscription, finalize, firstValueFrom, take } from 'rxjs';
+import { Observable, Subscription, finalize, firstValueFrom, forkJoin, of, take, } from 'rxjs';
 import { Taon__NS____FILE_RELATIVE_PATH, Taon__NS__asset, Taon__NS__assetsFrom, Taon__NS__assetsListFrom, Taon__NS__createContext, Taon__NS__createContextTemplate, Taon__NS__error, Taon__NS__getResponseValue, Taon__NS__isBrowser, Taon__NS__isElectron, Taon__NS__isNode, Taon__NS__isWebSQL, Taon__NS__LANG_IMPORT_MAP, Taon__NS__removeLoader, Taon__NS__Response, Taon__NS__ResponseHtml, Taon__NS__StartParams } from 'taon/websql-prod';
 import type { TaonCmsApplicationHookEntity } from '../../taon-cms-application-hook/taon-cms-application-hook.entity';
 import type { TaonCmsApplicationHook } from '../../taon-cms-application-hooks';
@@ -36,6 +38,11 @@ import { TaonCmsRevisionChooserComponent } from '../taon-cms-revision-chooser/ta
 import { TaonRelatedPostChooserComponent } from '../taon-related-post-chooser/taon-related-post-chooser.component';
 import type { TaonRelatedPostChooserData } from '../taon-related-post-chooser/taon-related-post-chooser.component';
 import { TaonCmsEditableDirective } from './taon-cms-editable.directive';
+import { defaultThumbnailKey, defaultThumbnailUrl, generateVideoThumbnail, } from './taon-cms-thumbnail';
+import { TaonCmsCategoryApiService } from '../../taon-cms-category/taon-cms-category-api.service';
+import type { TaonCmsCategoryEntity } from '../../taon-cms-category/taon-cms-category.entity';
+import { TaonCmsTagApiService } from '../../taon-cms-tag/taon-cms-tag-api.service';
+import type { TaonCmsTagEntity } from '../../taon-cms-tag/taon-cms-tag.entity';
 import type { TaonCmsPostDraft, TaonCmsPostMode } from './taon-cms-post.models';
 const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./i18n/taon-cms-post.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post.component.html.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post.component.ts.de-DE.i18n.data')).default } } as any);
 @Component({
@@ -48,12 +55,19 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.compon
         MatCheckboxModule,
         MatFormFieldModule,
         MatIconModule,
+        MatInputModule,
+        MatChipsModule,
         MatProgressBarModule,
         MatRadioModule,
         MatSelectModule,
         TaonCmsEditableDirective,
     ],
-    providers: [TaonCmsContentApiService, TaonPermissionApiService],
+    providers: [
+        TaonCmsContentApiService,
+        TaonPermissionApiService,
+        TaonCmsCategoryApiService,
+        TaonCmsTagApiService,
+    ],
 })
 export class TaonCmsPostComponent {
     readonly t = t.for(this);
@@ -61,6 +75,7 @@ export class TaonCmsPostComponent {
     readonly mode = model<TaonCmsPostMode>('view');
     readonly changed = output<TaonCmsContentEntity>();
     readonly deleted = output<TaonCmsContentEntity>();
+    readonly duplicated = output<TaonCmsContentEntity>();
     readonly cancelled = output<void>();
     readonly currentPost = signal<TaonCmsContentEntity | null>(null);
     readonly placeholderShortIntro = this.t.signal.gettext('A short introduction...');
@@ -75,6 +90,9 @@ export class TaonCmsPostComponent {
         videoKey: null,
         audioKey: null,
         attachmentKey: null,
+        thumbnailKey: null,
+        categoryId: null,
+        tagIds: [],
     });
     readonly postTypes = [
         {
@@ -113,6 +131,30 @@ export class TaonCmsPostComponent {
     ] as const;
     readonly mediaAttachment = computed(() => this.mediaAttachments.find(media => media.type === this.draft().type));
     readonly busy = signal(false);
+    readonly thumbnailPreviewUrl = signal('');
+    readonly thumbnailError = signal('');
+    private readonly thumbnailReference = computed(() => this.draft().thumbnailKey);
+    private readonly thumbnailSlug = computed(() => this.draft().slug);
+    readonly taxonomyLoading = signal(false);
+    readonly taxonomyError = signal('');
+    readonly categories = signal<TaonCmsCategoryEntity[]>([]);
+    readonly tags = signal<TaonCmsTagEntity[]>([]);
+    readonly tagSearch = signal('');
+    readonly filteredTags = computed(() => {
+        const query = this.tagSearch().trim().toLowerCase();
+        return this.tags().filter(tag => !this.draft().tagIds.includes(tag.id) &&
+            `${tag.name} ${tag.slug}`.toLowerCase().includes(query));
+    });
+    readonly selectedTags = computed(() => this.tags().filter(tag => this.draft().tagIds.includes(tag.id)));
+    private readonly categoryApi = inject(TaonCmsCategoryApiService);
+    private readonly tagApi = inject(TaonCmsTagApiService);
+    private taxonomyLoad?: Subscription;
+    private editorSession = 0;
+    private thumbnailObjectUrl = '';
+    private readonly stagedThumbnail = signal<{
+        key: string | null;
+        url: string;
+    } | null>(null);
     readonly uploading = signal(false);
     readonly uploadProgress = signal(0);
     readonly mediaPreviewUrl = signal('');
@@ -161,7 +203,9 @@ export class TaonCmsPostComponent {
         !this.applicationHooksError() &&
         (!this.useAsApplicationHook() || !!this.selectedApplicationHook()) &&
         !this.permissionsLoading() &&
-        !this.permissionsError());
+        !this.permissionsError() &&
+        !this.taxonomyLoading() &&
+        !this.taxonomyError());
     readonly canPublish = computed(() => {
         const post = this.currentPost();
         return !!post && post.status !== 'published';
@@ -183,9 +227,61 @@ export class TaonCmsPostComponent {
                 untracked(() => {
                     this.loadApplicationHooks();
                     this.loadPermissionOptions();
+                    this.loadTaxonomy();
                 });
             }
         });
+        effect(onCleanup => {
+            const key = this.thumbnailReference();
+            const slug = this.thumbnailSlug();
+            const editing = this.editing();
+            const staged = this.stagedThumbnail();
+            let active = true;
+            onCleanup(() => {
+                active = false;
+            });
+            this.thumbnailError.set('');
+            this.thumbnailPreviewUrl.set('');
+            if (staged && staged.key === key) {
+                this.thumbnailPreviewUrl.set(staged.url);
+                return;
+            }
+            if (!key) {
+                return;
+            }
+            const placeholder = defaultThumbnailUrl(key);
+            if (placeholder) {
+                this.thumbnailPreviewUrl.set(placeholder);
+                return;
+            }
+            if (!slug) {
+                return;
+            }
+            const load = async () => {
+                if (editing) {
+                    return this.api.getAssetUrl(key);
+                }
+                try {
+                    return await this.api.getThumbnailLinkBySlug(slug, true);
+                }
+                catch {
+                    return this.api.getThumbnailLinkBySlug(slug);
+                }
+            };
+            void load()
+                .then(url => {
+                if (active && !this.destroyRef.destroyed) {
+                    this.thumbnailPreviewUrl.set(url);
+                }
+            })
+                .catch((error: unknown) => {
+                console.error('[taon-cms-post] Unable to load thumbnail', error);
+                if (active && !this.destroyRef.destroyed) {
+                    this.thumbnailError.set(this.t.gettext('The thumbnail could not be loaded.'));
+                }
+            });
+        });
+        this.destroyRef.onDestroy(() => this.releaseThumbnailPreview());
         effect(() => {
             const media = this.mediaAttachment();
             const key = media ? this.draft()[media.key] : null;
@@ -255,6 +351,117 @@ export class TaonCmsPostComponent {
             });
         });
     }
+    loadTaxonomy(): void {
+        this.taxonomyLoad?.unsubscribe();
+        const session = this.editorSession;
+        const postId = this.currentPost()?.id;
+        this.taxonomyLoading.set(true);
+        this.taxonomyError.set('');
+        this.taxonomyLoad = forkJoin({
+            categories: this.categoryApi.allMyEntities$,
+            tags: this.tagApi.allMyEntities$,
+            tagIds: postId ? this.api.listTagIds(postId) : of([] as number[]),
+        })
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.taxonomyLoading.set(false)))
+            .subscribe({
+            next: result => {
+                if (session === this.editorSession) {
+                    this.categories.set(result.categories.sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name)));
+                    this.tags.set(result.tags);
+                    this.updateDraft('tagIds', result.tagIds);
+                }
+            },
+            error: (error: unknown) => {
+                console.error('[taon-cms-post] Unable to load categories and tags', error);
+                this.taxonomyError.set(this.t.gettext('Categories and tags could not be loaded. Please try again.'));
+            },
+        });
+    }
+    addTag(id: number): void {
+        if (!this.draft().tagIds.includes(id)) {
+            this.updateDraft('tagIds', [...this.draft().tagIds, id]);
+        }
+    }
+    removeTag(id: number): void {
+        this.updateDraft('tagIds', this.draft().tagIds.filter(selected => selected !== id));
+    }
+    filterTags(event: Event): void {
+        if (event.target instanceof HTMLInputElement) {
+            this.tagSearch.set(event.target.value);
+        }
+    }
+    applyDefaultThumbnail(): void {
+        if (!this.editing() || this.busy() || this.dialogOpen()) {
+            return;
+        }
+        this.releaseThumbnailPreview();
+        this.stagedThumbnail.set(null);
+        this.updateDraft('thumbnailKey', defaultThumbnailKey(this.draft().type));
+    }
+    async thumbnailSelected(event: Event): Promise<void> {
+        if (!(event.target instanceof HTMLInputElement)) {
+            return;
+        }
+        const input = event.target;
+        const file = input.files?.[0];
+        input.value = '';
+        if (!file || !this.editing() || this.busy() || this.dialogOpen()) {
+            return;
+        }
+        if (!file.type.startsWith('image/')) {
+            this.error.set(this.t.gettext('Please select an image for the thumbnail.'));
+            return;
+        }
+        this.busy.set(true);
+        this.error.set('');
+        try {
+            await this.storeThumbnail(file, this.editorSession);
+        }
+        catch (error: unknown) {
+            console.error('[taon-cms-post] Unable to upload thumbnail', error);
+            this.error.set(this.t.gettext('The thumbnail could not be uploaded. Please try again.'));
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    private async storeThumbnail(file: File, session: number): Promise<void> {
+        if (session !== this.editorSession || this.destroyRef.destroyed) {
+            return;
+        }
+        const previousPreview = this.thumbnailPreviewUrl();
+        const previousStaged = this.stagedThumbnail();
+        const preview = URL.createObjectURL(file);
+        this.stagedThumbnail.set({ key: this.draft().thumbnailKey, url: preview });
+        this.thumbnailPreviewUrl.set(preview);
+        try {
+            const object = await this.api.uploadMedia(file);
+            if (session === this.editorSession && !this.destroyRef.destroyed) {
+                this.releaseThumbnailPreview();
+                this.thumbnailObjectUrl = preview;
+                this.stagedThumbnail.set({ key: object.key, url: preview });
+                this.updateDraft('thumbnailKey', object.key);
+            }
+        }
+        catch (error: unknown) {
+            if (session === this.editorSession) {
+                this.stagedThumbnail.set(previousStaged);
+                this.thumbnailPreviewUrl.set(previousPreview);
+            }
+            throw error;
+        }
+        finally {
+            if (this.thumbnailObjectUrl !== preview) {
+                URL.revokeObjectURL(preview);
+            }
+        }
+    }
+    private releaseThumbnailPreview(): void {
+        if (this.thumbnailObjectUrl) {
+            URL.revokeObjectURL(this.thumbnailObjectUrl);
+            this.thumbnailObjectUrl = '';
+        }
+    }
     loadRelatedPosts(): void {
         if (this.busy() || this.relatedPostsLoading()) {
             return;
@@ -432,7 +639,7 @@ export class TaonCmsPostComponent {
             input.value = '';
             return;
         }
-        const draft = this.draft();
+        const session = this.editorSession;
         this.busy.set(true);
         this.uploading.set(true);
         this.uploadProgress.set(0);
@@ -443,7 +650,7 @@ export class TaonCmsPostComponent {
                     this.uploadProgress.set(percentage);
                 }
             });
-            if (!this.destroyRef.destroyed && this.draft() === draft) {
+            if (!this.destroyRef.destroyed && this.editorSession === session) {
                 const fileName = object.fileName || file.name;
                 this.mediaFileNames.update(names => ({
                     ...names,
@@ -457,6 +664,17 @@ export class TaonCmsPostComponent {
                     });
                 }
                 this.updateDraft(media.key, object.key);
+                if (media.type === TaonCmsContentType.Video) {
+                    try {
+                        const blob = await generateVideoThumbnail(file);
+                        const extension = blob.type === 'image/webp' ? 'webp' : 'png';
+                        await this.storeThumbnail(new File([blob], `thumbnail.${extension}`, { type: blob.type }), session);
+                    }
+                    catch (error: unknown) {
+                        console.error('[taon-cms-post] Unable to generate thumbnail', error);
+                        this.error.set(this.t.gettext('The video was uploaded, but its thumbnail could not be generated. Upload a thumbnail or apply a default placeholder.'));
+                    }
+                }
             }
         }
         catch (error: unknown) {
@@ -668,6 +886,27 @@ export class TaonCmsPostComponent {
             }
         });
     }
+    duplicate(): void {
+        if (this.busy() || this.dialogOpen() || this.mode() === 'view-clean') {
+            return;
+        }
+        const post = this.requirePost();
+        if (!post) {
+            return;
+        }
+        this.busy.set(true);
+        this.error.set('');
+        this.api
+            .duplicateContent(post.id)
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.busy.set(false)))
+            .subscribe({
+            next: duplicate => this.duplicated.emit(duplicate),
+            error: (error: unknown) => {
+                console.error('[taon-cms-post] Unable to duplicate post', error);
+                this.error.set(this.t.gettext('The post could not be duplicated. Please try again.'));
+            },
+        });
+    }
     private updateInput(post: TaonCmsContentEntity): TaonCmsUpdateContent {
         return {
             ...this.draft(),
@@ -692,6 +931,13 @@ export class TaonCmsPostComponent {
         return post;
     }
     private setPost(post: TaonCmsContentEntity | null): void {
+        this.editorSession += 1;
+        this.taxonomyLoad?.unsubscribe();
+        this.taxonomyLoading.set(false);
+        this.taxonomyError.set('');
+        this.releaseThumbnailPreview();
+        this.stagedThumbnail.set(null);
+        this.tagSearch.set('');
         this.relatedPostsLoad?.unsubscribe();
         this.applicationHooksLoad?.unsubscribe();
         this.permissionsLoad?.unsubscribe();
@@ -720,6 +966,9 @@ export class TaonCmsPostComponent {
             videoKey: post?.videoKey ?? null,
             audioKey: post?.audioKey ?? null,
             attachmentKey: post?.attachmentKey ?? null,
+            thumbnailKey: post?.thumbnailKey ?? null,
+            categoryId: post?.categoryId ?? null,
+            tagIds: [],
         });
         if (post &&
             post.relatedPosts === undefined &&
@@ -729,6 +978,9 @@ export class TaonCmsPostComponent {
         if (post && this.mode() !== 'view-clean') {
             this.loadPermissions();
         }
+        if (this.editing()) {
+            this.loadTaxonomy();
+        }
     }
     private setApplicationHookSelection(post: TaonCmsContentEntity | null, hooks: TaonCmsApplicationHookEntity[]): void {
         const assignedHook = post?.applicationHook !== undefined

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

@@ -11,7 +11,8 @@
  * ========================================================================== */
 
 export type TaonCmsPostMode = 'view' | 'edit' | 'add' | 'view-clean';
-export interface TaonCmsPostDraft extends Pick<TaonCmsContentFields, 'type' | 'videoKey' | 'audioKey' | 'attachmentKey'> {
+export interface TaonCmsPostDraft extends Pick<TaonCmsContentFields, 'type' | 'videoKey' | 'audioKey' | 'attachmentKey' | 'thumbnailKey' | 'categoryId'> {
+    tagIds: number[];
     title: string;
     slug: string;
     excerpt: string;

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

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

package/ts-source/websql-code-prod/taon-posts/taon-cms-post/taon-cms-thumbnail.ts

@@ -0,0 +1,148 @@
+// @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 { TaonCmsContentType } from '../../taon-cms-content/taon-cms-content.models';
+export function defaultThumbnailKey(type: TaonCmsContentType): string {
+    return `cms-placeholder:${type}`;
+}
+export function defaultThumbnailUrl(key: string): string | null {
+    const type = Object.values(TaonCmsContentType).find(value => key === defaultThumbnailKey(value));
+    if (!type) {
+        return null;
+    }
+    const shapes: Record<TaonCmsContentType, string> = {
+        normal: '<path d="M260 126h120v112H260z M280 152h80m-80 20h80m-80 20h52" />',
+        video: '<rect x="248" y="132" width="144" height="100" rx="16"/><path d="m308 158 40 24-40 24z"/>',
+        audio: '<path d="M280 164v40m20-60v80m20-98v116m20-98v80m20-60v40"/>',
+        attachment: '<path d="M276 124h60l32 32v84h-92z M336 124v36h32m-70 30h48m-48 22h36"/>',
+    };
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360"><defs><linearGradient id="bg" x2="1" y2="1"><stop stop-color="#eaf0ff"/><stop offset="1" stop-color="#e4f5f0"/></linearGradient></defs><rect width="640" height="360" rx="24" fill="url(#bg)"/><circle cx="320" cy="180" r="112" fill="#fff" opacity=".65"/><g fill="none" stroke="#52669a" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">${shapes[type]}</g></svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+export function visiblePixelRatio(pixels: Uint8ClampedArray): number {
+    let visible = 0;
+    for (let index = 0; index < pixels.length; index += 4) {
+        const luminance = 0.2126 * pixels[index] +
+            0.7152 * pixels[index + 1] +
+            0.0722 * pixels[index + 2];
+        if (luminance > 18) {
+            visible += 1;
+        }
+    }
+    return pixels.length ? visible / (pixels.length / 4) : 0;
+}
+function videoEvent(video: HTMLVideoElement, event: string, action: () => void): Promise<void> {
+    return new Promise((resolve, reject) => {
+        const cleanup = () => {
+            clearTimeout(timeout);
+            video.removeEventListener(event, done);
+            video.removeEventListener('error', failed);
+        };
+        const done = () => {
+            cleanup();
+            resolve();
+        };
+        const failed = () => {
+            cleanup();
+            reject(new Error(video.error?.message || 'Video decoding failed.'));
+        };
+        const timeout = setTimeout(() => {
+            cleanup();
+            reject(new Error('Video decoding timed out.'));
+        }, 15000);
+        video.addEventListener(event, done, { once: true });
+        video.addEventListener('error', failed, { once: true });
+        try {
+            action();
+        }
+        catch (error: unknown) {
+            cleanup();
+            reject(error);
+        }
+    });
+}
+export async function generateVideoThumbnail(file: Blob): Promise<Blob> {
+    const video = document.createElement('video');
+    const url = URL.createObjectURL(file);
+    try {
+        video.muted = true;
+        video.playsInline = true;
+        video.preload = 'auto';
+        await videoEvent(video, 'loadeddata', () => {
+            video.src = url;
+            video.load();
+        });
+        if (!video.videoWidth || !video.videoHeight) {
+            throw new Error('The video has no decodable dimensions.');
+        }
+        const analysis = document.createElement('canvas');
+        analysis.width = 64;
+        analysis.height = Math.max(1, Math.round((64 * video.videoHeight) / video.videoWidth));
+        const context = analysis.getContext('2d', { willReadFrequently: true });
+        if (!context) {
+            throw new Error('Canvas is unavailable.');
+        }
+        const seek = async (time: number) => {
+            if (Math.abs(video.currentTime - time) > 0.001) {
+                await videoEvent(video, 'seeked', () => {
+                    video.currentTime = time;
+                });
+            }
+        };
+        const end = Number.isFinite(video.duration)
+            ? Math.min(5, Math.max(0, video.duration - 0.01))
+            : 5;
+        let bestTime = 0;
+        let bestRatio = -1;
+        let found = false;
+        for (let time = 0; time <= end; time += 0.25) {
+            await seek(time);
+            context.drawImage(video, 0, 0, analysis.width, analysis.height);
+            const ratio = visiblePixelRatio(context.getImageData(0, 0, analysis.width, analysis.height).data);
+            if (ratio > bestRatio) {
+                bestRatio = ratio;
+                bestTime = time;
+            }
+            if (ratio >= 0.02) {
+                found = true;
+                break;
+            }
+        }
+        if (!found) {
+            await seek(bestTime);
+        }
+        const canvas = document.createElement('canvas');
+        const scale = Math.min(1, 1280 / video.videoWidth, 720 / video.videoHeight);
+        canvas.width = Math.max(1, Math.round(video.videoWidth * scale));
+        canvas.height = Math.max(1, Math.round(video.videoHeight * scale));
+        const output = canvas.getContext('2d');
+        if (!output) {
+            throw new Error('Canvas is unavailable.');
+        }
+        output.drawImage(video, 0, 0, canvas.width, canvas.height);
+        return await new Promise<Blob>((resolve, reject) => {
+            canvas.toBlob(blob => blob
+                ? resolve(blob)
+                : reject(new Error('Thumbnail encoding failed.')), 'image/webp', 0.85);
+        });
+    }
+    finally {
+        try {
+            video.pause();
+            video.removeAttribute('src');
+            video.load();
+        }
+        finally {
+            URL.revokeObjectURL(url);
+        }
+    }
+}

package/ts-source/websql-code-prod/taon-posts/taon-cms-post-details-page/taon-cms-post-details-page.component.ts

@@ -13,7 +13,7 @@
 import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { map } from 'rxjs';
 import { Translation } from '@taon-dev/i18n/websql-prod';
 import { Taon__NS____FILE_RELATIVE_PATH, Taon__NS__asset, Taon__NS__assetsFrom, Taon__NS__assetsListFrom, Taon__NS__createContext, Taon__NS__createContextTemplate, Taon__NS__error, Taon__NS__getResponseValue, Taon__NS__isBrowser, Taon__NS__isElectron, Taon__NS__isNode, Taon__NS__isWebSQL, Taon__NS__LANG_IMPORT_MAP, Taon__NS__removeLoader, Taon__NS__Response, Taon__NS__ResponseHtml, Taon__NS__StartParams } from 'taon/websql-prod';
@@ -25,17 +25,40 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post-details-page/taon-cm
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [AsyncPipe, MatButtonModule, RouterLink, TaonCmsPostComponent],
     template: `
-    @if (post$ | async; as post) {
+    @if (page$ | async; as page) {
       <a
         mat-button
         routerLink="../"
         >{{ t.gettext('Back to Posts') }}</a
       >
-      <taon-cms-post [post]="post"></taon-cms-post>
+      <taon-cms-post
+        [post]="page.post"
+        [mode]="page.create ? 'add' : 'view'"
+        (changed)="onChanged($event, page.create)"
+        (duplicated)="openPost($event)"
+        (cancelled)="onCancelled(page.create)" />
     }
   `,
 })
 export class TaonCmsPostDetailsPageComponent {
     readonly t = t.for(this);
-    readonly post$ = inject(ActivatedRoute).data.pipe(map(data => data['post'] as TaonCmsContentEntity));
+    private readonly route = inject(ActivatedRoute);
+    private readonly router = inject(Router);
+    readonly page$ = this.route.data.pipe(map(data => ({
+        create: data['createPost'] === true,
+        post: (data['post'] as TaonCmsContentEntity | undefined) ?? null,
+    })));
+    onChanged(post: TaonCmsContentEntity, create: boolean): void {
+        if (create) {
+            this.openPost(post);
+        }
+    }
+    openPost(post: TaonCmsContentEntity): void {
+        void this.router.navigate(['../', post.id], { relativeTo: this.route });
+    }
+    onCancelled(create: boolean): void {
+        if (create) {
+            void this.router.navigate(['../'], { relativeTo: this.route });
+        }
+    }
 }