Add Rich Text Sticky Toolbar

Add Content Folder Publish

Author: alexcibotari

functions/src/contents.ts

@@ -1,6 +1,6 @@
 import { logger } from 'firebase-functions/v2';
 import { HttpsError, onCall } from 'firebase-functions/v2/https';
-import { onDocumentDeleted, onDocumentUpdated, onDocumentWritten } from 'firebase-functions/v2/firestore';
+import { onDocumentDeleted, onDocumentUpdated, onDocumentWritten, DocumentSnapshot } from 'firebase-functions/v2/firestore';
 import { FieldValue, UpdateData, WithFieldValue } from 'firebase-admin/firestore';
 import { canPerform } from './utils/security-utils';
 import { BATCH_MAX, bucket, firestoreService } from './config';
@@ -16,7 +16,16 @@ import {
   Space,
   UserPermission,
 } from './models';
-import { extractContent, findAllContentsByParentSlug, findContentById, findContentsHistory, findSchemas, findSpaceById } from './services';
+import {
+  extractContent,
+  findAllContentsByParentSlug,
+  findContentById,
+  findContentsHistory,
+  findDocumentsToPublishByStartFullSlug,
+  findSchemas,
+  findSpaceById,
+} from './services';
+import { AuthData } from 'firebase-functions/lib/common/providers/https';
 
 // Publish
 const publish = onCall<PublishContentData>(async request => {
@@ -30,50 +39,82 @@ const publish = onCall<PublishContentData>(async request => {
   const schemasSnapshot = await findSchemas(spaceId).get();
   if (spaceSnapshot.exists && contentSnapshot.exists) {
     const space: Space = spaceSnapshot.data() as Space;
-    const content: ContentDocument = contentSnapshot.data() as ContentDocument;
+    const content: Content = contentSnapshot.data() as Content;
     const schemas = new Map(schemasSnapshot.docs.map(it => [it.id, it.data() as Schema]));
-    for (const locale of space.locales) {
-      const documentStorage: ContentDocumentStorage = {
-        id: contentSnapshot.id,
-        name: content.name,
-        kind: content.kind,
-        locale: locale.id,
-        slug: content.slug,
-        fullSlug: content.fullSlug,
-        parentSlug: content.parentSlug,
-        createdAt: content.createdAt.toDate().toISOString(),
-        updatedAt: content.updatedAt.toDate().toISOString(),
-        publishedAt: new Date().toISOString(),
-      };
-      if (content.data) {
-        if (typeof content.data === 'string') {
-          documentStorage.data = extractContent(JSON.parse(content.data), schemas, locale.id);
-        } else {
-          documentStorage.data = extractContent(content.data, schemas, locale.id);
-        }
+    if (content.kind === ContentKind.DOCUMENT) {
+      await publishDocument(spaceId, space, contentId, content, contentSnapshot, schemas, auth);
+    } else if (content.kind === ContentKind.FOLDER) {
+      const documentsSnapshot = await findDocumentsToPublishByStartFullSlug(spaceId, `${content.fullSlug}/`).get();
+      for (const documentSnapshot of documentsSnapshot.docs) {
+        const document = documentSnapshot.data() as ContentDocument;
+        // SKIP if the page was already published, by comparing publishedAt and updatedAt
+        if (document.publishedAt && document.publishedAt.seconds > document.updatedAt.seconds) continue;
+        await publishDocument(spaceId, space, contentId, document, documentSnapshot, schemas, auth);
       }
-      // Save generated JSON
-      logger.info(`[Content::contentPublish] Save file to spaces/${spaceId}/contents/${contentId}/${locale.id}.json`);
-      await bucket.file(`spaces/${spaceId}/contents/${contentId}/${locale.id}.json`).save(JSON.stringify(documentStorage));
     }
     // Save Cache
     logger.info(`[Content::contentPublish] Save file to spaces/${spaceId}/contents/${contentId}/cache.json`);
     await bucket.file(`spaces/${spaceId}/contents/${contentId}/cache.json`).save('');
+    return;
+  } else {
+    logger.info(`[Content::contentPublish] Content ${contentId} does not exist.`);
+    throw new HttpsError('not-found', 'Content not found');
+  }
+});
+
+/**
+ * Publish Document
+ * @param {string} spaceId space id
+ * @param {Space} space
+ * @param {string} documentId
+ * @param {ContentDocument} document
+ * @param {DocumentSnapshot} documentSnapshot
+ * @param {Map<string, Schema>} schemas
+ * @param {AuthData} auth
+ */
+async function publishDocument(
+  spaceId: string,
+  space: Space,
+  documentId: string,
+  document: ContentDocument,
+  documentSnapshot: DocumentSnapshot,
+  schemas: Map<string, Schema>,
+  auth?: AuthData
+) {
+  for (const locale of space.locales) {
+    const documentStorage: ContentDocumentStorage = {
+      id: documentId,
+      name: document.name,
+      kind: document.kind,
+      locale: locale.id,
+      slug: document.slug,
+      fullSlug: document.fullSlug,
+      parentSlug: document.parentSlug,
+      createdAt: document.createdAt.toDate().toISOString(),
+      updatedAt: document.updatedAt.toDate().toISOString(),
+      publishedAt: new Date().toISOString(),
+    };
+    if (document.data) {
+      if (typeof document.data === 'string') {
+        documentStorage.data = extractContent(JSON.parse(document.data), schemas, locale.id);
+      } else {
+        documentStorage.data = extractContent(document.data, schemas, locale.id);
+      }
+    }
+    // Save generated JSON
+    logger.info(`[Content::contentPublish] Save file to spaces/${spaceId}/contents/${documentId}/${locale.id}.json`);
+    await bucket.file(`spaces/${spaceId}/contents/${documentId}/${locale.id}.json`).save(JSON.stringify(documentStorage));
     // Update publishedAt
-    await contentSnapshot.ref.update({ publishedAt: FieldValue.serverTimestamp() });
+    await documentSnapshot.ref.update({ publishedAt: FieldValue.serverTimestamp() });
     const addHistory: WithFieldValue<ContentHistory> = {
       type: ContentHistoryType.PUBLISHED,
       name: auth?.token['name'] || FieldValue.delete(),
       email: auth?.token.email || FieldValue.delete(),
       createdAt: FieldValue.serverTimestamp(),
     };
-    await findContentsHistory(spaceId, contentId).add(addHistory);
-    return;
-  } else {
-    logger.info(`[Content::contentPublish] Content ${contentId} does not exist.`);
-    throw new HttpsError('not-found', 'Content not found');
+    await findContentsHistory(spaceId, documentId).add(addHistory);
   }
-});
+}
 
 // Firestore events
 const onContentUpdate = onDocumentUpdated('spaces/{spaceId}/contents/{contentId}', async event => {

functions/src/services/content.service.ts

@@ -70,6 +70,21 @@ export function findContentsByStartFullSlug(spaceId: string, startFullSlug: stri
     .where('fullSlug', '<', `${startFullSlug}~`);
 }
 
+/**
+ * find Content by Full Slug
+ * @param {string} spaceId Space identifier
+ * @param {string} startFullSlug Start Full Slug path
+ * @return {DocumentReference} document reference to the space
+ */
+export function findDocumentsToPublishByStartFullSlug(spaceId: string, startFullSlug: string): Query {
+  logger.info(`[findDocumentsToPublishByStartFullSlug] spaceId=${spaceId} startFullSlug=${startFullSlug}`);
+  return firestoreService
+    .collection(`spaces/${spaceId}/contents`)
+    .where('fullSlug', '>=', startFullSlug)
+    .where('fullSlug', '<', `${startFullSlug}~`)
+    .where('kind', '==', ContentKind.DOCUMENT);
+}
+
 /**
  * find Content by ID
  * @param {string} spaceId Space identifier

src/app/features/spaces/contents/contents.component.html

@@ -146,6 +146,11 @@
     <ng-container matColumnDef="actions">
       <mat-header-cell mat-header-cell *matHeaderCellDef> Actions</mat-header-cell>
       <mat-cell *matCellDef="let element">
+        @if ('CONTENT_PUBLISH' | canUserPerform | async) {
+          <button mat-icon-button (click)="openPublishDialog($event, element)" matTooltip="Publish">
+            <mat-icon>publish</mat-icon>
+          </button>
+        }
         @if ('CONTENT_UPDATE' | canUserPerform | async) {
           <button mat-icon-button (click)="openEditDialog($event, element)" [disabled]="element.locked" matTooltip="Edit">
             <mat-icon>edit</mat-icon>

src/app/features/spaces/contents/contents.component.scss

@@ -40,6 +40,6 @@ mat-cell {
   }
 
   &.mat-column-actions {
-    max-width: 200px;
+    max-width: 250px;
   }
 }

src/app/features/spaces/contents/contents.component.ts

@@ -189,12 +189,18 @@ export class ContentsComponent {
     event.stopImmediatePropagation();
     let title = '';
     let content = '';
+    let messageSuccess = '';
+    let messageError = '';
     if (element.kind === ContentKind.FOLDER) {
       title = 'Delete Folder';
       content = `Are you sure about deleting Folder with name: ${element.name}.\n All sub folders and documents will be deleted.`;
+      messageSuccess = `Folder '${element.name}' has been deleted.`;
+      messageError = `Folder '${element.name}' can not be deleted.`;
     } else if (element.kind === ContentKind.DOCUMENT) {
       title = 'Delete Document';
       content = `Are you sure about deleting Document with name: ${element.name}.`;
+      messageSuccess = `Document '${element.name}' has been deleted.`;
+      messageError = `Document '${element.name}' can not be deleted.`;
     }
     this.dialog
       .open<ConfirmationDialogComponent, ConfirmationDialogModel, boolean>(ConfirmationDialogComponent, {
@@ -212,11 +218,11 @@ export class ContentsComponent {
         next: () => {
           this.selection.clear();
           this.cd.markForCheck();
-          this.notificationService.success(`Content '${element.name}' has been deleted.`);
+          this.notificationService.success(messageSuccess);
         },
         error: (err: unknown) => {
           console.error(err);
-          this.notificationService.error(`Content '${element.name}' can not be deleted.`);
+          this.notificationService.error(messageError);
         },
       });
   }
@@ -269,11 +275,53 @@ export class ContentsComponent {
         next: () => {
           this.selection.clear();
           this.cd.markForCheck();
-          this.notificationService.success(`Content '${element.name}' has been cloned.`);
+          this.notificationService.success(`Document '${element.name}' has been cloned.`);
         },
         error: (err: unknown) => {
           console.error(err);
-          this.notificationService.error(`Content '${element.name}' can not be cloned.`);
+          this.notificationService.error(`Document '${element.name}' can not be cloned.`);
+        },
+      });
+  }
+
+  openPublishDialog(event: Event, element: Content): void {
+    // Prevent Default
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    let title = '';
+    let content = '';
+    let messageSuccess = '';
+    let messageError = '';
+    if (element.kind === ContentKind.FOLDER) {
+      title = 'Publish Folder';
+      content = `Are you sure about publishing the Folder with the name: ${element.name}.\n All sub folders and documents will be published.`;
+      messageSuccess = `Folder '${element.name}' has been published.`;
+      messageError = `Folder '${element.name}' can not be published.`;
+    } else if (element.kind === ContentKind.DOCUMENT) {
+      title = 'Publish Document';
+      content = `Are you sure about publishing the Document with the name: ${element.name}.`;
+      messageSuccess = `Document '${element.name}' has been published.`;
+      messageError = `Document '${element.name}' can not be published.`;
+    }
+    this.dialog
+      .open<ConfirmationDialogComponent, ConfirmationDialogModel, boolean>(ConfirmationDialogComponent, {
+        data: {
+          title: title,
+          content: content,
+        },
+      })
+      .afterClosed()
+      .pipe(
+        filter(it => it || false),
+        switchMap(() => this.contentService.publish(this.spaceId(), element.id)),
+      )
+      .subscribe({
+        next: () => {
+          this.notificationService.success(messageSuccess);
+        },
+        error: (err: unknown) => {
+          console.error(err);
+          this.notificationService.success(messageError);
         },
       });
   }

src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.html

@@ -9,7 +9,7 @@
         [attr.maxlength]="field.maxLength"
         [required]="field.required"
         autocomplete="off"></textarea>
-      <div class="rounded-t-md p-1 flex">
+      <div class="tool-bar-sticky">
         <button
           matTooltipClass="allow-cr"
           matTooltip="Normal text &#10; {{ fnKey }} + Alt + 0"

src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.ts

@@ -77,7 +77,7 @@ export class RichTextEditorComponent implements OnDestroy {
     ],
     editorProps: {
       attributes: {
-        class: 'p-2 border-color border-t rounded-b-md outline-none',
+        class: 'p-2 border-color rounded-b-md outline-none',
         spellcheck: 'false',
       },
     },

src/styles/_rich-text-editor.scss

@@ -4,6 +4,11 @@ ll-rich-text-editor {
   .border-color {
     border-color: var(--sys-outline);
   }
+  .tool-bar-sticky {
+    background-color: var(--sys-surface);
+    border-color: var(--sys-outline);
+    @apply sticky top-0 z-10 border-b border-x p-1 flex;
+  }
 
   mat-form-field {
     .mdc-text-field--outlined {