Merge pull request #65 from amrarick26/dev

Hook for page editor saveChanges method

Author: crhistianramirez

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/mock/se-section-templates.constants.ts

@@ -222,17 +222,7 @@ export default [
           </div>`,
 
     `<div class="card__translucent p-5 m-3 m-sm-0">
-        <!-- Inline SVG: START -->
-        <svg xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-            viewBox="0 0 401 79"
-            width="100px">
-            <text class="sr-only">Fivestars Rewards Logo</text>
-            <defs />
-            <path fill="#6b20ce"
-                  d="M75 24.7H55.4c-.9 0-1.7-.6-2-1.4l-6-18.6C46.5 1.8 44 0 40.9 0c-3 0-5.6 1.8-6.5 4.7l-6 18.6c-.3.9-1.1 1.4-2 1.4H6.9c-3 0-5.6 1.9-6.5 4.7-.9 2.9 0 5.9 2.5 7.7l14 10.2c1.8 1.3 2.6 3.6 1.9 5.8l-5.3 16.3c-.9 2.9 0 6.1 2.4 7.8 1.9 1.4 4.3 1.6 7 .6 1.3-.5 2.3-1.1 3.1-1.6 2.4-1.4 5.4-3.8 7.5-5.4 1-.8 1.2-2.3.4-3.4-.8-1-2.3-1.2-3.4-.4-2.5 2-5.2 4-7 5.1-.8.5-1.5.9-2.3 1.2-1.7.6-2.3.2-2.5 0-.6-.4-1-1.4-.7-2.5l5.3-16.3c1.3-4.1-.1-8.6-3.6-11.1l-14-10.2c-1.1-.8-.9-2-.8-2.3.1-.3.6-1.4 2-1.4h19.5c3 0 5.6-1.9 6.5-4.7l6-18.6c.4-1.3 1.6-1.4 2-1.4.4 0 1.6.1 2 1.4l6 18.6c.9 2.8 3.5 4.7 6.5 4.7H75c1.4 0 1.9 1.1 2 1.4.1.3.4 1.5-.7 2.3l-14 10.2c-3.5 2.5-4.9 7-3.6 11.1L64 70.7c.4 1.3-.1 2.1-.7 2.5-.5.4-1.1.5-2.7-.1l-.6-.2c-11.3-4.6-18.4-12.4-18.4-12.4l-.1-.1c-2.8-2.8-5-5.6-6.8-8.4-1.3-2-2.3-4.1-3-6.1-1.4-3.9-1.4-6.5.2-8.1.7-.7 2.3-1.2 3.3-.9 1.7.5 2.8 1.8 3.5 4.1.3 1 1.2 1.7 2.3 1.7 1.1 0 2-.7 2.3-1.7.5-1.6 1.8-4.2 4.5-4.2 1 0 1.9.4 2.6 1.2 1.3 1.6 1.3 4.2-.1 8-1 2.6-2.7 5.4-4.6 7.4-.9 1-.9 2.5.1 3.4 1 .9 2.5.9 3.4-.1 2.3-2.4 4.4-5.8 5.6-9 2-5.5 1.8-9.6-.7-12.7-1.5-1.9-3.8-3-6.3-3-2.6 0-5 1.2-6.7 3.2-1.5-1.7-3.2-2.6-4.6-3-2.8-.7-6.2.2-8.1 2.3-4.2 4.5-1.9 10.9-1.2 13 .8 2.3 2 4.7 3.5 7 2 3.1 4.4 6.1 7.4 9.2.7.7 8 8.6 19.9 13.5h.1c1 .4 2.5 1.1 4.3 1.1 1.3 0 2.6-.3 3.9-1.4 2.3-1.8 3.2-4.8 2.2-7.7L63.1 53c-.7-2.1.1-4.4 1.9-5.8L79 37c2.4-1.8 3.4-4.8 2.5-7.7-1-2.8-3.5-4.6-6.5-4.6M102.7 63c1.5 0 2.8-1.3 2.8-2.9V45.8h17.2c1.4 0 2.6-1.1 2.6-2.6 0-1.4-1.2-2.5-2.6-2.5h-17.2V29.6h17.6c1.4 0 2.6-1.1 2.6-2.5s-1.2-2.6-2.6-2.6h-20.2c-2 0-3.1 1.1-3.1 3V60c0 1.7 1.3 3 2.9 3m35.2-38.7c-1.6 0-2.9 1.3-2.9 2.9v32.9c0 1.5 1.3 2.9 2.9 2.9 1.5 0 2.8-1.3 2.8-2.9V27.2c0-1.6-1.3-2.9-2.8-2.9m24.7 35.5c.7 1.8 2.6 3.2 4.7 3.2 2.2 0 4-1.4 4.7-3.2l12.4-31.3c.2-.3.2-.7.2-1.1 0-1.7-1.3-3-3-3-1.3 0-2.4.8-2.8 1.9l-11.6 30.2-11.5-30.2c-.5-1.1-1.5-1.9-2.9-1.9-1.7 0-3 1.4-3 3 0 .4.1.7.3 1.1l12.5 31.3zm33.4 2.9h20.2c1.4 0 2.6-1.1 2.6-2.6 0-1.4-1.2-2.5-2.6-2.5h-17.6V45.8h17.2c1.4 0 2.6-1.1 2.6-2.6 0-1.4-1.2-2.5-2.6-2.5h-17.2V29.6h17.6c1.4 0 2.6-1.1 2.6-2.5s-1.2-2.6-2.6-2.6H196c-2 0-3.1 1.1-3.1 3v32c0 2.1 1.1 3.2 3.1 3.2m46-4.4c-4.2 0-7.5-1.6-10.1-3.7-.5-.3-1.1-.6-1.7-.6-1.5 0-2.7 1.3-2.7 2.7 0 .9.5 1.7 1.1 2.2 3.3 2.7 7.7 4.4 13.2 4.4 10.3 0 14.4-5.5 14.4-11.5 0-8.1-7.3-10-13.5-11.7-4.7-1.2-8.9-2.3-8.9-5.7 0-3.2 2.9-5.4 7.6-5.4 3.1 0 6.5.9 9.1 3 .4.3 1 .5 1.6.5 1.5 0 2.7-1.3 2.7-2.7 0-.9-.5-1.7-1.2-2.2-3.5-2.5-7.1-3.7-11.8-3.7-8.4 0-13.9 4.6-13.9 10.9 0 7.8 7.1 9.5 13.2 11.1 4.9 1.3 9.2 2.4 9.2 6.4 0 2.9-2.2 6-8.3 6m47.1-33.7h-24.8c-1.4 0-2.5 1.1-2.5 2.6 0 1.4 1.1 2.5 2.5 2.5h9.6v30.5c0 1.5 1.3 2.9 2.9 2.9 1.5 0 2.9-1.3 2.9-2.9V29.6h9.5c1.4 0 2.6-1.1 2.6-2.5-.1-1.3-1.3-2.5-2.7-2.5m98.2 15.6c-4.7-1.2-8.9-2.3-8.9-5.7 0-3.2 2.9-5.4 7.6-5.4 3.1 0 6.5.9 9.1 3 .4.3 1 .5 1.6.5 1.5 0 2.7-1.3 2.7-2.7 0-.9-.5-1.7-1.2-2.2-3.5-2.5-7.1-3.7-11.8-3.7-8.4 0-13.9 4.6-13.9 10.9 0 7.8 7.1 9.5 13.2 11.1 4.9 1.3 9.2 2.4 9.2 6.4 0 2.7-2.2 5.9-8.3 5.9-4.2 0-7.5-1.6-10.1-3.7-.5-.3-1.1-.6-1.7-.6-1.5 0-2.7 1.3-2.7 2.7 0 .9.5 1.7 1.1 2.2 3.3 2.7 7.7 4.4 13.2 4.4 10.3 0 14.4-5.5 14.4-11.5 0-8-7.3-9.9-13.5-11.6m-76.8-10.6l5.2 13.9h-10.4l5.2-13.9zm-9.4 25.2l1.9-5.1.5-1.3h14.2l.5 1.3 1.9 5.1 2.4 6.3c.3 1 1.4 1.8 2.7 1.8 1.6 0 2.9-1.3 2.9-2.9 0-.4-.1-.8-.2-1.1l-12.6-31.5c-.7-1.8-2.5-3.2-4.7-3.2-2.1 0-3.9 1.4-4.6 3.2L293.3 59c-.1.3-.2.7-.2 1.1 0 1.6 1.3 2.9 2.9 2.9 1.2 0 2.3-.8 2.7-1.8l2.4-6.4zm57.5-18.1c0 3.6-3.3 6.5-7.3 6.5h-9.6v-13h9.6c4.1 0 7.3 2.9 7.3 6.5M339 63c1.5 0 2.8-1.3 2.8-2.9V48.7h8.1l7.6 12.9c.5.8 1.3 1.3 2.3 1.4 1.6.1 2.8-1.2 2.9-2.4.1-.9-.1-1.4-.4-1.8L355.7 48c4.9-1.7 8.5-6.1 8.5-11.3 0-6.6-5.7-12-12.8-12h-12.2c-2 0-3.1 1.1-3.1 3v32.5c0 1.5 1.3 2.8 2.9 2.8" />
-        </svg>
-        <!-- Inline SVG: END -->
+    <img src="https://marktplacetest.blob.core.windows.net/assets-6c4f4c59-0581-4c23-a0df-5905acf5869a/eca21e9e-452f-4fe1-987f-7e778ebe2f42" alt="fivestars.png" width="100" height="20" />
         <h2 class="text-uppercase short-underline short-underline--double">Get
             Rewarded </h2>
         <p> We all love points. Get rewarded every time you shop for or sell,

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);
+    }
   },
 });

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

@@ -29,7 +29,22 @@ export const FullExample = () => ({
          Url: 'test-page1',
          Description: '',
          HeaderEmbeds: '',
-         Content: '<div data-oc-widget="oc-section">\n<div class="card__translucent p-5 m-3 m-sm-0"><!-- Inline SVG: START --> Fivestars Rewards Logo <!-- Inline SVG: END -->\n<h2 class="text-uppercase short-underline short-underline--double">Get Rewarded</h2>\n<p>We all love points. Get rewarded every time you shop for or sell, classic and trendy, secondhand styles by signing up for our rewards program, where you&rsquo;ll get access to exclusive discounts, special promotions, store events, and more. <br />Never miss a beat!</p>\n<div class="mt-2"><a class="btn btn-sm btn-outline-primary mb-2" href="[[REWARDS_URL]]"> Sign up online </a></div>\n [[DUMMY_TEXT]] [[REWARDS_URL]]</div>\n</div>',
+         Content: `<div class="card__translucent p-5 m-3 m-sm-0">
+         <img src="https://marktplacetest.blob.core.windows.net/assets-6c4f4c59-0581-4c23-a0df-5905acf5869a/eca21e9e-452f-4fe1-987f-7e778ebe2f42" alt="fivestars.png" width="100" height="20" />
+             <h2 class="text-uppercase short-underline short-underline--double">Get
+                 Rewarded </h2>
+             <p> We all love points. Get rewarded every time you shop for or sell,
+                 classic and trendy, secondhand styles by signing up for our rewards
+                 program, where you’ll get access to exclusive discounts, special
+                 promotions, store events, and more. <br />Never miss a beat! </p>
+             <div class="mt-2">
+                 <a class="btn btn-sm btn-outline-primary mb-2"
+                     href="[[REWARDS_URL]]">
+                     Sign up online
+                 </a>
+             </div>
+             [[DUMMY_TEXT]]
+         </div>`,
          FooterEmbeds: '',
          Active: false,
          NavigationTitle: 'test page1',