@taon-dev/cms 21.0.14 → 21.0.17

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

@@ -4,7 +4,7 @@
 - TAON READONLY SOURCE
 - DO NOT MODIFY THIS FILE.
 - Changes may be overwritten.
-- Use command: taon build:lib:watch
+- Use command: taon build:watch:lib
   inside @taon-dev/cms project repository
   for watch development of third party modules like this.
   
@@ -13,15 +13,21 @@
 import { ChangeDetectionStrategy, Component, DestroyRef, computed, effect, inject, input, model, output, signal, untracked, } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
+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 { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { TaonPermissionApiService } from '@taon-dev/session/browser';
 import type { TaonPermissionEntity } from '@taon-dev/session/browser';
 import { TaonConfirmDialogComponent } from '@taon-dev/ui/browser';
-import { Observable, Subscription, finalize } from 'rxjs';
+import { Translation } from '@taon-dev/i18n/browser';
+import { Observable, Subscription, finalize, firstValueFrom, take } from 'rxjs';
+import { Taon } from 'taon/browser';
+import type { TaonCmsApplicationHookEntity } from '../../taon-cms-application-hook/taon-cms-application-hook.entity';
+import type { TaonCmsApplicationHook } from '../../taon-cms-application-hooks';
 import { TaonCmsContentApiService } from '../../taon-cms-content/taon-cms-content-api.service';
 import type { TaonCmsContentEntity } from '../../taon-cms-content/taon-cms-content.entity';
 import type { TaonCmsUpdateContent } from '../../taon-cms-content/taon-cms-content.models';
@@ -31,6 +37,7 @@ import { TaonRelatedPostChooserComponent } from '../taon-related-post-chooser/ta
 import type { TaonRelatedPostChooserData } from '../taon-related-post-chooser/taon-related-post-chooser.component';
 import { TaonCmsEditableDirective } from './taon-cms-editable.directive';
 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({
     selector: 'taon-cms-post',
     templateUrl: './taon-cms-post.component.html',
@@ -38,8 +45,10 @@ import type { TaonCmsPostDraft, TaonCmsPostMode } from './taon-cms-post.models';
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
         MatButtonModule,
+        MatCheckboxModule,
         MatFormFieldModule,
         MatIconModule,
+        MatProgressBarModule,
         MatRadioModule,
         MatSelectModule,
         TaonCmsEditableDirective,
@@ -47,12 +56,16 @@ import type { TaonCmsPostDraft, TaonCmsPostMode } from './taon-cms-post.models';
     providers: [TaonCmsContentApiService, TaonPermissionApiService],
 })
 export class TaonCmsPostComponent {
+    readonly t = t.for(this);
     readonly post = input<TaonCmsContentEntity | null>(null);
     readonly mode = model<TaonCmsPostMode>('view');
     readonly changed = output<TaonCmsContentEntity>();
     readonly deleted = output<TaonCmsContentEntity>();
     readonly cancelled = output<void>();
     readonly currentPost = signal<TaonCmsContentEntity | null>(null);
+    readonly placeholderShortIntro = this.t.signal.gettext('A short introduction...');
+    readonly placeholderTitle = this.t.signal.gettext('Title');
+    readonly placeholderTellYourStory = this.t.signal.gettext('Tell your story...');
     readonly draft = signal<TaonCmsPostDraft>({
         type: TaonCmsContentType.Normal,
         title: '',
@@ -64,43 +77,71 @@ export class TaonCmsPostComponent {
         attachmentKey: null,
     });
     readonly postTypes = [
-        { value: TaonCmsContentType.Normal, label: 'Normal post' },
-        { value: TaonCmsContentType.Video, label: 'Video post' },
-        { value: TaonCmsContentType.Audio, label: 'Audio post' },
-        { value: TaonCmsContentType.Attachment, label: 'Attachment post' },
+        {
+            value: TaonCmsContentType.Normal,
+            label: this.t.gettext('Normal post'),
+        },
+        { value: TaonCmsContentType.Video, label: this.t.gettext('Video post') },
+        { value: TaonCmsContentType.Audio, label: this.t.gettext('Audio post') },
+        {
+            value: TaonCmsContentType.Attachment,
+            label: this.t.gettext('Attachment post'),
+        },
     ];
     private readonly mediaAttachments = [
         {
             type: TaonCmsContentType.Video,
             key: 'videoKey',
-            heading: 'Video Attachment',
-            uploadLabel: 'Upload video',
+            heading: this.t.gettext('Video Attachment'),
+            uploadLabel: this.t.gettext('Upload video'),
             accept: 'video/*',
         },
         {
             type: TaonCmsContentType.Audio,
             key: 'audioKey',
-            heading: 'Audio Attachment',
-            uploadLabel: 'Upload audio',
+            heading: this.t.gettext('Audio Attachment'),
+            uploadLabel: this.t.gettext('Upload audio'),
             accept: 'audio/*',
         },
         {
             type: TaonCmsContentType.Attachment,
             key: 'attachmentKey',
-            heading: 'File Attachment',
-            uploadLabel: 'Upload file',
+            heading: this.t.gettext('File Attachment'),
+            uploadLabel: this.t.gettext('Upload file'),
             accept: '',
         },
     ] as const;
     readonly mediaAttachment = computed(() => this.mediaAttachments.find(media => media.type === this.draft().type));
     readonly busy = signal(false);
     readonly uploading = signal(false);
+    readonly uploadProgress = signal(0);
+    readonly mediaPreviewUrl = signal('');
+    readonly mediaPreviewLoading = signal(false);
+    readonly mediaPreviewError = signal('');
+    private readonly mediaFileNames = signal<Record<string, string>>({});
+    private readonly uploadedMediaPreview = signal<{
+        key: string;
+        url: string;
+        fileName: string;
+    } | null>(null);
+    private mediaPreviewRequest = 0;
+    private mediaPreviewSignature = '';
     readonly dialogOpen = signal(false);
     readonly error = signal('');
     readonly relatedPosts = signal<TaonCmsContentEntity[]>([]);
     readonly relatedPostsLoading = signal(false);
     readonly relatedPostsError = signal('');
+    readonly applicationHooks = signal<TaonCmsApplicationHookEntity[]>([]);
+    readonly applicationHooksLoading = signal(false);
+    readonly applicationHooksError = signal('');
+    readonly useAsApplicationHook = signal(false);
+    readonly selectedApplicationHook = signal<TaonCmsApplicationHook | null>(null);
     readonly permissions = signal<TaonPermissionEntity[]>([]);
+    readonly applyPermissionsToRelatedPosts = signal(false);
+    readonly permissionSource = signal<{
+        id: number;
+        title: string;
+    } | null>(null);
     readonly permissionsLoading = signal(false);
     readonly permissionsError = signal('');
     readonly permissionOptions = signal<TaonPermissionEntity[]>([]);
@@ -116,6 +157,9 @@ export class TaonCmsPostComponent {
         !!this.draft().slug.trim() &&
         !this.relatedPostsLoading() &&
         !this.relatedPostsError() &&
+        !this.applicationHooksLoading() &&
+        !this.applicationHooksError() &&
+        (!this.useAsApplicationHook() || !!this.selectedApplicationHook()) &&
         !this.permissionsLoading() &&
         !this.permissionsError());
     readonly canPublish = computed(() => {
@@ -127,6 +171,7 @@ export class TaonCmsPostComponent {
     private readonly dialog = inject(MatDialog);
     private readonly destroyRef = inject(DestroyRef);
     private relatedPostsLoad?: Subscription;
+    private applicationHooksLoad?: Subscription;
     private permissionsLoad?: Subscription;
     constructor() {
         effect(() => {
@@ -135,9 +180,80 @@ export class TaonCmsPostComponent {
         });
         effect(() => {
             if (this.editing()) {
-                untracked(() => this.loadPermissionOptions());
+                untracked(() => {
+                    this.loadApplicationHooks();
+                    this.loadPermissionOptions();
+                });
             }
         });
+        effect(() => {
+            const media = this.mediaAttachment();
+            const key = media ? this.draft()[media.key] : null;
+            const slug = this.draft().slug;
+            const editing = this.editing();
+            const viewing = !!this.currentPost() && this.mode() !== 'add';
+            const stagedPreview = this.uploadedMediaPreview();
+            if ((!editing && !viewing) || !media || !key) {
+                this.mediaPreviewSignature = '';
+                this.mediaPreviewRequest += 1;
+                this.mediaPreviewUrl.set('');
+                this.mediaPreviewLoading.set(false);
+                this.mediaPreviewError.set('');
+                return;
+            }
+            if (stagedPreview?.key === key) {
+                const signature = `upload:${key}:${stagedPreview.url}`;
+                if (signature === this.mediaPreviewSignature) {
+                    return;
+                }
+                this.mediaPreviewSignature = signature;
+                this.mediaPreviewRequest += 1;
+                this.mediaPreviewUrl.set(stagedPreview.url);
+                this.mediaPreviewLoading.set(false);
+                this.mediaPreviewError.set('');
+                return;
+            }
+            if (!slug) {
+                this.mediaPreviewSignature = '';
+                this.mediaPreviewRequest += 1;
+                this.mediaPreviewUrl.set('');
+                this.mediaPreviewLoading.set(false);
+                this.mediaPreviewError.set('');
+                return;
+            }
+            const signature = `${this.mode()}:${media.type}:${slug}:${key}`;
+            if (signature === this.mediaPreviewSignature) {
+                return;
+            }
+            this.mediaPreviewSignature = signature;
+            const requestId = ++this.mediaPreviewRequest;
+            this.mediaPreviewUrl.set('');
+            this.mediaPreviewLoading.set(true);
+            this.mediaPreviewError.set('');
+            const getLink = editing
+                ? this.getMediaLink(slug, media.type)
+                : this.getMediaLinkForView(slug, media.type);
+            void getLink
+                .then(url => {
+                if (requestId === this.mediaPreviewRequest &&
+                    !this.destroyRef.destroyed) {
+                    this.mediaPreviewUrl.set(url);
+                }
+            })
+                .catch((error: unknown) => {
+                console.error('[taon-cms-post] Unable to load media preview', error);
+                if (requestId === this.mediaPreviewRequest &&
+                    !this.destroyRef.destroyed) {
+                    this.mediaPreviewError.set(this.t.gettext('Media preview could not be loaded. Please reopen the editor to try again.'));
+                }
+            })
+                .finally(() => {
+                if (requestId === this.mediaPreviewRequest &&
+                    !this.destroyRef.destroyed) {
+                    this.mediaPreviewLoading.set(false);
+                }
+            });
+        });
     }
     loadRelatedPosts(): void {
         if (this.busy() || this.relatedPostsLoading()) {
@@ -156,7 +272,7 @@ export class TaonCmsPostComponent {
             next: posts => this.relatedPosts.set(posts),
             error: (error: unknown) => {
                 console.error('[taon-cms-post] Unable to load related posts', error);
-                this.relatedPostsError.set('Related posts could not be loaded. Please try again.');
+                this.relatedPostsError.set(this.t.gettext('Related posts could not be loaded. Please try again.'));
             },
         });
     }
@@ -200,8 +316,38 @@ export class TaonCmsPostComponent {
         }
         this.relatedPosts.update(posts => posts.filter(post => post.id !== id));
     }
+    loadApplicationHooks(): void {
+        if (this.applicationHooksLoading()) {
+            return;
+        }
+        this.applicationHooksLoading.set(true);
+        this.applicationHooksError.set('');
+        this.applicationHooksLoad = this.api
+            .listApplicationHooks()
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.applicationHooksLoading.set(false)))
+            .subscribe({
+            next: hooks => {
+                this.applicationHooks.set(hooks);
+                this.setApplicationHookSelection(this.currentPost(), hooks);
+            },
+            error: (error: unknown) => {
+                console.error('[taon-cms-post] Unable to load application hooks', error);
+                this.applicationHooksError.set(this.t.gettext('Application hooks could not be loaded. Please try again.'));
+            },
+        });
+    }
+    setUseAsApplicationHook(enabled: boolean): void {
+        this.useAsApplicationHook.set(enabled);
+    }
+    applicationHookInUseByAnotherPost(applicationHook: TaonCmsApplicationHookEntity): boolean {
+        return (applicationHook.contentId !== null &&
+            applicationHook.contentId !== this.currentPost()?.id);
+    }
+    applicationHookLabel(hook: TaonCmsApplicationHook): string {
+        return hook.split('-').join('_').toUpperCase();
+    }
     loadPermissions(): void {
-        if (this.busy() || this.permissionsLoading()) {
+        if (this.permissionsLoading()) {
             return;
         }
         const post = this.requirePost();
@@ -211,18 +357,26 @@ export class TaonCmsPostComponent {
         this.permissionsLoading.set(true);
         this.permissionsError.set('');
         this.permissionsLoad = this.api
-            .listPermissions(post.id)
+            .getPermissionConfiguration(post.id)
             .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.permissionsLoading.set(false)))
             .subscribe({
-            next: permissions => this.permissions.set(permissions),
+            next: configuration => {
+                this.permissions.set(configuration.permissions);
+                this.permissionSource.set(configuration.source);
+            },
             error: (error: unknown) => {
                 console.error('[taon-cms-post] Unable to load permissions', error);
-                this.permissionsError.set('Permissions could not be loaded. Please try again.');
+                this.permissionsError.set(this.t.gettext('Permissions could not be loaded. Please try again.'));
             },
         });
     }
     addPermission(): void {
-        if (!this.editing() || this.busy() || this.dialogOpen()) {
+        if (!this.editing() ||
+            this.busy() ||
+            this.dialogOpen() ||
+            this.permissionSource() ||
+            this.permissionsLoading() ||
+            this.permissionsError()) {
             return;
         }
         const permissionId = this.selectedPermissionId();
@@ -233,7 +387,12 @@ export class TaonCmsPostComponent {
         }
     }
     removePermission(id: number): void {
-        if (!this.editing() || this.busy() || this.dialogOpen()) {
+        if (!this.editing() ||
+            this.busy() ||
+            this.dialogOpen() ||
+            this.permissionSource() ||
+            this.permissionsLoading() ||
+            this.permissionsError()) {
             return;
         }
         this.permissions.update(items => items.filter(permission => permission.id !== id));
@@ -251,7 +410,7 @@ export class TaonCmsPostComponent {
             next: permissions => this.permissionOptions.set(permissions),
             error: (error: unknown) => {
                 console.error('[taon-cms-post] Unable to load permission options', error);
-                this.permissionOptionsError.set('Available permissions could not be loaded. Please try again.');
+                this.permissionOptionsError.set(this.t.gettext('Available permissions could not be loaded. Please try again.'));
             },
         });
     }
@@ -260,7 +419,7 @@ export class TaonCmsPostComponent {
     }
     async fileSelected(event: Event): Promise<void> {
         if (!(event.target instanceof HTMLInputElement)) {
-            this.error.set('Unable to read the selected media file.');
+            this.error.set(this.t.gettext('Unable to read the selected media file.'));
             return;
         }
         const input = event.target;
@@ -276,20 +435,38 @@ export class TaonCmsPostComponent {
         const draft = this.draft();
         this.busy.set(true);
         this.uploading.set(true);
+        this.uploadProgress.set(0);
         this.error.set('');
         try {
-            const object = await this.api.uploadMedia(file);
+            const object = await this.api.uploadMedia(file, percentage => {
+                if (!this.destroyRef.destroyed) {
+                    this.uploadProgress.set(percentage);
+                }
+            });
             if (!this.destroyRef.destroyed && this.draft() === draft) {
+                const fileName = object.fileName || file.name;
+                this.mediaFileNames.update(names => ({
+                    ...names,
+                    [object.key]: fileName,
+                }));
+                if (object.downloadUrl) {
+                    this.uploadedMediaPreview.set({
+                        key: object.key,
+                        url: this.uploadedMediaUrl(object.downloadUrl, media.type),
+                        fileName,
+                    });
+                }
                 this.updateDraft(media.key, object.key);
             }
         }
         catch (error: unknown) {
             console.error('[taon-cms-post] Unable to upload media', error);
-            this.error.set('The media could not be uploaded. Please try again.');
+            this.error.set(this.t.gettext('The media could not be uploaded. Please try again.'));
         }
         finally {
             this.busy.set(false);
             this.uploading.set(false);
+            this.uploadProgress.set(0);
             input.value = '';
         }
     }
@@ -298,8 +475,58 @@ export class TaonCmsPostComponent {
         if (!media || !this.editing() || this.busy() || this.dialogOpen()) {
             return;
         }
+        this.uploadedMediaPreview.set(null);
         this.updateDraft(media.key, null);
     }
+    private uploadedMediaUrl(url: string, type: TaonCmsContentType): string {
+        if (type !== TaonCmsContentType.Attachment) {
+            return url;
+        }
+        const parsedUrl = new URL(url);
+        parsedUrl.searchParams.set('download', 'true');
+        return parsedUrl.href;
+    }
+    private getMediaLink(slug: string, type: TaonCmsContentType): Promise<string> {
+        switch (type) {
+            case TaonCmsContentType.Video:
+                return firstValueFrom(this.api.getVideoLinkBySlug(slug));
+            case TaonCmsContentType.Audio:
+                return firstValueFrom(this.api.getAudioLinkBySlug(slug));
+            case TaonCmsContentType.Attachment:
+                return this.api.getAttachmentLinkBySlug(slug);
+            default:
+                return Promise.reject(new Error('This post type has no media.'));
+        }
+    }
+    private async getMediaLinkForView(slug: string, type: TaonCmsContentType): Promise<string> {
+        try {
+            switch (type) {
+                case TaonCmsContentType.Video:
+                    return await this.api.getPublicVideoLinkBySlug(slug);
+                case TaonCmsContentType.Audio:
+                    return await this.api.getPublicAudioLinkBySlug(slug);
+                case TaonCmsContentType.Attachment:
+                    return await this.api.getPublicAttachmentLinkBySlug(slug);
+                default:
+                    throw new Error('This post type has no media.');
+            }
+        }
+        catch {
+            return this.getMediaLink(slug, type);
+        }
+    }
+    mediaFileName(key: string): string {
+        const fileName = this.mediaFileNames()[key];
+        if (fileName) {
+            return fileName;
+        }
+        const uploaded = this.uploadedMediaPreview();
+        if (uploaded?.key === key) {
+            return uploaded.fileName;
+        }
+        const storedName = key.split('/').pop() || key;
+        return storedName.replace(/^[0-9a-f-]{36}__/i, '');
+    }
     updateSlug(event: Event): void {
         if (event.target instanceof HTMLInputElement) {
             this.updateDraft('slug', event.target.value);
@@ -331,7 +558,7 @@ export class TaonCmsPostComponent {
             return;
         }
         if (!this.canSave()) {
-            this.error.set('A title and slug are required.');
+            this.error.set(this.t.gettext('A title and slug are required.'));
             return;
         }
         if (this.mode() === 'add') {
@@ -339,6 +566,10 @@ export class TaonCmsPostComponent {
                 ...this.draft(),
                 relatedPostIds: this.relatedPosts().map(post => post.id),
                 permissionIds: this.permissions().map(permission => permission.id),
+                applyPermissionsToRelatedPosts: this.applyPermissionsToRelatedPosts(),
+                applicationHook: this.useAsApplicationHook()
+                    ? this.selectedApplicationHook()
+                    : null,
             }));
         }
         else {
@@ -357,7 +588,7 @@ export class TaonCmsPostComponent {
             return;
         }
         if (this.editing() && !this.canSave()) {
-            this.error.set('A title and slug are required.');
+            this.error.set(this.t.gettext('A title and slug are required.'));
             return;
         }
         const post = this.requirePost();
@@ -371,6 +602,21 @@ export class TaonCmsPostComponent {
             }));
         }
     }
+    unpublish(): void {
+        const post = this.currentPost();
+        if (!post ||
+            post.status !== 'published' ||
+            this.busy() ||
+            this.dialogOpen() ||
+            this.mode() === 'view-clean' ||
+            this.mode() === 'add') {
+            return;
+        }
+        this.persist(this.api.updateContent(post.id, {
+            expectedVersion: post.version,
+            status: 'draft',
+        }));
+    }
     revert(): void {
         const post = this.requirePost();
         if (!post ||
@@ -407,9 +653,9 @@ export class TaonCmsPostComponent {
         this.dialogOpen.set(true);
         const ref = this.dialog.open(TaonConfirmDialogComponent, {
             data: {
-                title: 'Delete post?',
-                message: 'This archives the post. It can be restored from its revisions.',
-                confirmText: 'Delete',
+                title: this.t.gettext('Delete post?'),
+                message: this.t.gettext('This archives the post. It can be restored from its revisions.'),
+                confirmText: this.t.gettext('Delete'),
             },
         });
         ref
@@ -426,28 +672,45 @@ export class TaonCmsPostComponent {
         return {
             ...this.draft(),
             relatedPostIds: this.relatedPosts().map(related => related.id),
-            permissionIds: this.permissions().map(permission => permission.id),
+            ...(this.permissionSource()
+                ? {}
+                : {
+                    permissionIds: this.permissions().map(permission => permission.id),
+                }),
+            applyPermissionsToRelatedPosts: this.applyPermissionsToRelatedPosts(),
+            applicationHook: this.useAsApplicationHook()
+                ? this.selectedApplicationHook()
+                : null,
             expectedVersion: post.version,
         };
     }
     private requirePost(): TaonCmsContentEntity | null {
         const post = this.currentPost();
         if (!post) {
-            this.error.set('No post is loaded.');
+            this.error.set(this.t.gettext('No post is loaded.'));
         }
         return post;
     }
     private setPost(post: TaonCmsContentEntity | null): void {
         this.relatedPostsLoad?.unsubscribe();
+        this.applicationHooksLoad?.unsubscribe();
         this.permissionsLoad?.unsubscribe();
         this.relatedPostsLoading.set(false);
         this.relatedPostsError.set('');
+        this.applicationHooksLoading.set(false);
+        this.applicationHooksError.set('');
         this.permissionsLoading.set(false);
         this.permissionsError.set('');
+        this.uploadedMediaPreview.set(null);
+        this.mediaPreviewSignature = '';
+        this.mediaPreviewRequest += 1;
         this.currentPost.set(post);
         this.relatedPosts.set(post?.relatedPosts ?? []);
         this.permissions.set(post?.permissions ?? []);
+        this.permissionSource.set(null);
+        this.applyPermissionsToRelatedPosts.set(post?.applyPermissionsToRelatedPosts ?? false);
         this.selectedPermissionId.set(null);
+        this.setApplicationHookSelection(post, this.applicationHooks());
         this.draft.set({
             type: post?.type ?? TaonCmsContentType.Normal,
             title: post?.title ?? '',
@@ -463,12 +726,18 @@ export class TaonCmsPostComponent {
             this.mode() !== 'view-clean') {
             this.loadRelatedPosts();
         }
-        if (post &&
-            post.permissions === undefined &&
-            this.mode() !== 'view-clean') {
+        if (post && this.mode() !== 'view-clean') {
             this.loadPermissions();
         }
     }
+    private setApplicationHookSelection(post: TaonCmsContentEntity | null, hooks: TaonCmsApplicationHookEntity[]): void {
+        const assignedHook = post?.applicationHook !== undefined
+            ? post.applicationHook?.hook
+            : hooks.find(applicationHook => applicationHook.contentId === post?.id)
+                ?.hook;
+        this.useAsApplicationHook.set(!!assignedHook);
+        this.selectedApplicationHook.set(assignedHook ?? null);
+    }
     private acceptPost(post: TaonCmsContentEntity): void {
         this.setPost(post);
         this.error.set('');
@@ -492,8 +761,7 @@ export class TaonCmsPostComponent {
             },
             error: (error: unknown) => {
                 console.error('[taon-cms-post] Unable to save post', error);
-                this.error.set('The post could not be saved. Check the slug and your connection. ' +
-                    'If another user changed it, close and reopen the post before retrying.');
+                this.error.set(this.t.gettext('The post could not be saved. Check the slug and your connection. If another user changed it, close and reopen the post before retrying.'));
             },
         });
     }

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

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

package/ts-source/browser-code/taon-posts/taon-cms-post/taon-cms-post.routes.ts

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

package/ts-source/browser-code/taon-posts/taon-cms-post-details-page/i18n/taon-cms-post-details-page.component.ts.de-DE.i18n.data.ts

@@ -0,0 +1,29 @@
+// @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 interface DeDeTraslationOverrideSrcLibTaonPostsTaonCmsPostDetailsPageTaonCmsPostDetailsPageComponentTs {
+    "de-DE": {
+        "": {
+            "Back to Posts"?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/taon-posts/taon-cms-post-details-page/taon-cms-post-details-page.component.ts",
+    "tags": [
+        {
+            "gettextString": "Back to Posts",
+            "lineNumber": 23,
+            "translation": "Zurück zu den Posten"
+        }
+    ]
+};

package/ts-source/browser-code/taon-posts/taon-cms-post-details-page/i18n/taon-cms-post-details-page.component.ts.de-DE.po

@@ -0,0 +1,9 @@
+msgid ""
+msgstr ""
+"Language: de-DE\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-posts/taon-cms-post-details-page/taon-cms-post-details-page.component.ts:23
+msgid "Back to Posts"
+msgstr "Zurück zu den Posten"