add pre document upload hook on page list component

Author: Alexa Snyder

projects/lib/src/admin/components/page-editor/page-editor.component.ts

@@ -62,6 +62,7 @@ export class PageEditorComponent implements OnInit, OnChanges {
   @Input() additionalAssetFilters?: TemplateRef<any>;
   @Input() defaultListOptions?: ListArgs<Asset> = { filters: { Active: true } };
   @Input() beforeAssetUpload?: (asset: AssetUpload) => Promise<AssetUpload>;
+  @Input() beforeDocumentSave?: (page: Partial<PageContentDoc>) => Promise<Partial<PageContentDoc>>;
   @Output() selectedAssetChange = new EventEmitter<Asset | Asset[]>();
   @Output() backClicked = new EventEmitter<MouseEvent>();
   @Output() pageSaved = new EventEmitter<JDocument>();
@@ -196,17 +197,27 @@ export class PageEditorComponent implements OnInit, OnChanges {
   }
 
   async saveChanges(): Promise<RequiredDeep<JDocument>> {
+    if (this.beforeDocumentSave) {
+      return this.beforeDocumentSave(this.page).then(async (page) => {
+        this.document.Doc = page;
+        return await this.saveDocument(this.document);
+      });
+    } else {
+      return await this.saveDocument(this.document);
+    }
+  }
+
+  async saveDocument(document): Promise<RequiredDeep<JDocument>> {
     const me = await OrderCloudSDK.Me.Get();
     const nowDate = new Date().toISOString();
     const fullName = `${me.FirstName} ${me.LastName}`;
     let updated: RequiredDeep<JDocument>;
-
-    if (this.document && this.document.ID) {
+    if (document && document.ID) {
       updated = await HeadStartSDK.Documents.Save(
         this.pageSchemaID,
-        this.document.ID,
+        document.ID,
         {
-          ID: this.document.ID,
+          ID: document.ID,
           Doc: {
             ...this.page,
             DateLastUpdated: nowDate,

projects/lib/src/admin/components/page-list/page-list.component.html

@@ -150,6 +150,7 @@
       [additionalAssetFilters]="additionalAssetFilters"
       [defaultListOptions]="defaultListOptions"
       [beforeAssetUpload]="beforeAssetUpload"
+      [beforeDocumentSave]="beforeDocumentSave"
       (selectedAssetChange)="selectedAssetChange.emit($event)"
     >
     </cms-page-editor>

projects/lib/src/admin/components/page-list/page-list.component.ts

@@ -23,6 +23,7 @@ import { PAGE_SCHEMA } from '../../constants/page-schema.constants';
 import DEFAULT_ASSET_TYPES, {
   ASSET_TYPES,
 } from '../../constants/asset-types.constants';
+import { PageContentDoc } from '../../models/page-content-doc.interface';
 
 @Component({
   selector: 'cms-page-list',
@@ -43,6 +44,7 @@ export class PageListComponent implements OnInit, OnChanges {
   @Input() additionalAssetFilters?: TemplateRef<any>;
   @Input() defaultListOptions?: ListArgs<Asset> = { filters: { Active: true } };
   @Input() beforeAssetUpload?: (asset: AssetUpload) => Promise<AssetUpload>;
+  @Input() beforeDocumentSave?: (page: Partial<PageContentDoc>) => Promise<Partial<PageContentDoc>>;
   @Output() selectedAssetChange = new EventEmitter<Asset | Asset[]>();
   @Output() backClicked = new EventEmitter<MouseEvent>();
   @Output() pageSaved = new EventEmitter<JDocument>();

projects/lib/src/stories/page-list.stories.ts

@@ -149,18 +149,26 @@ export const WithBeforeAssetUpload = () => ({
         [resourceID]="resourceID"
         [editorOptions]="editorOptions"
         [beforeAssetUpload]="beforeAssetUpload"
+        [beforeDocumentSave]="beforeDocumentSave"
         >
         </cms-page-list>
     </div>`,
   props: {
     renderSiteUrl: 'https://www.my-awesome-website.com',
-    resourceType: 'Suppliers',
-    resourceID: '41106',
+    resourceType: 'Buyers',
+    resourceID: 'sedev',
     lockedSlugs: ['', 'about-us'],
     editorOptions: {},
     beforeAssetUpload: (asset) => {
       console.log('before asset upload was hit');
       return Promise.resolve(asset);
     },
+    beforeDocumentSave: (page) => {
+      const span = document.createElement('span');
+      span.innerHTML = page.Content;
+      const images = span.getElementsByTagName('img');
+      page.HeroImage = images.length ? images[0].currentSrc : null;
+      return Promise.resolve(page);
+    }
   },
 });