@taon-dev/cms 21.0.17 → 21.0.18

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

@@ -75,6 +75,13 @@
             <mat-icon>delete</mat-icon> {{ t.gettext('Delete') }}
           </button>
         }
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="duplicate()">
+          <mat-icon>content_copy</mat-icon> {{ t.gettext('Duplicate') }}
+        </button>
       }
     </div>
     @if (busy()) {
@@ -241,6 +248,117 @@
         }
       </section>
     }
+    <section
+      class="post-thumbnail"
+      aria-labelledby="thumbnail-heading">
+      <h2 id="thumbnail-heading">{{ t.gettext('Thumbnail') }}</h2>
+      @if (thumbnailPreviewUrl()) {
+        <img
+          class="thumbnail-preview"
+          [src]="thumbnailPreviewUrl()"
+          [alt]="t.gettext('Post thumbnail')" />
+      } @else {
+        <p>{{ t.gettext('No thumbnail selected.') }}</p>
+      }
+      @if (thumbnailError()) {
+        <p role="alert">{{ thumbnailError() }}</p>
+      }
+      <input
+        #thumbnailInput
+        hidden
+        type="file"
+        accept="image/*"
+        [disabled]="busy() || dialogOpen()"
+        (change)="thumbnailSelected($event)" />
+      <div class="buttons">
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="thumbnailInput.click()">
+          {{ t.gettext('Upload Thumbnail') }}
+        </button>
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="applyDefaultThumbnail()">
+          {{ t.gettext('Apply Default Placeholder') }}
+        </button>
+      </div>
+    </section>
+    <section
+      class="post-taxonomy"
+      aria-labelledby="category-heading">
+      <h2 id="category-heading">{{ t.gettext('Category and Tags') }}</h2>
+      @if (taxonomyLoading()) {
+        <p role="status">{{ t.gettext('Loading categories and tags...') }}</p>
+      }
+      @if (taxonomyError()) {
+        <p role="alert">{{ taxonomyError() }}</p>
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy()"
+          (click)="loadTaxonomy()">
+          {{ t.gettext('Try again') }}
+        </button>
+      }
+      <mat-form-field appearance="outline">
+        <mat-label>{{ t.gettext('Category') }}</mat-label>
+        <mat-select
+          [value]="draft().categoryId"
+          [disabled]="
+            busy() || dialogOpen() || taxonomyLoading() || !!taxonomyError()
+          "
+          (selectionChange)="updateDraft('categoryId', $event.value)">
+          <mat-option [value]="null">{{ t.gettext('None') }}</mat-option>
+          @for (category of categories(); track category.id) {
+            <mat-option [value]="category.id">{{ category.name }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <h3>{{ t.gettext('Tags') }}</h3>
+      <mat-chip-set [attr.aria-label]="t.gettext('Selected tags')">
+        @for (tag of selectedTags(); track tag.id) {
+          <mat-chip
+            [disabled]="busy() || dialogOpen() || taxonomyLoading()"
+            (removed)="removeTag(tag.id)">
+            {{ tag.name }}
+            <button
+              matChipRemove
+              type="button"
+              [disabled]="busy() || dialogOpen() || taxonomyLoading()"
+              [attr.aria-label]="
+                t.gettext('Remove tag [[ name ]]', { name: tag.name })
+              ">
+              <mat-icon>cancel</mat-icon>
+            </button>
+          </mat-chip>
+        }
+      </mat-chip-set>
+      <mat-form-field appearance="outline">
+        <mat-label>{{ t.gettext('Search tags') }}</mat-label>
+        <input
+          matInput
+          [value]="tagSearch()"
+          (input)="filterTags($event)"
+          [disabled]="busy() || dialogOpen() || taxonomyLoading()" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>{{ t.gettext('Add tag') }}</mat-label>
+        <mat-select
+          [value]="null"
+          [disabled]="
+            busy() || dialogOpen() || taxonomyLoading() || !!taxonomyError()
+          "
+          (selectionChange)="addTag($event.value)">
+          @for (tag of filteredTags(); track tag.id) {
+            <mat-option [value]="tag.id">{{ tag.name }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </section>
     <section
       class="related-posts"
       aria-labelledby="related-posts-heading">
@@ -479,6 +597,15 @@
       }
     </section>
   } @else if (currentPost(); as post) {
+    @if (thumbnailPreviewUrl()) {
+      <img
+        class="thumbnail-preview"
+        [src]="thumbnailPreviewUrl()"
+        [alt]="t.gettext('Post thumbnail')" />
+    }
+    @if (thumbnailError()) {
+      <p role="alert">{{ thumbnailError() }}</p>
+    }
     <h1 class="post-title">{{ post.title }}</h1>
     @if (post.excerpt) {
       <p class="post-excerpt">{{ post.excerpt }}</p>

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

@@ -117,6 +117,8 @@
 }
 
 .media-attachment,
+.post-thumbnail,
+.post-taxonomy,
 .related-posts,
 .application-hook,
 .post-permissions {
@@ -126,6 +128,20 @@
   h2 {
     font-size: 1rem;
   }
+
+  .thumbnail-preview {
+    display: block;
+    width: min(100%, 480px);
+    max-height: 320px;
+    object-fit: contain;
+    border-radius: 12px;
+    margin-bottom: 0.75rem;
+  }
+
+  .post-taxonomy mat-form-field {
+    display: block;
+    margin-top: 0.75rem;
+  }
 }
 
 .related-posts,

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": {}
+}