[sitecore-jss] [sitecore-jss-angular] Default Placeholder Content for empty fields in editMode metadata

CHANGELOG.md

@@ -44,6 +44,16 @@ Our versioning strategy is as follows:
   * Promo component ([#1897](https://github.com/Sitecore/jss/pull/1897))
   * PageContent component ([#1905](https://github.com/Sitecore/jss/pull/1905))
   * Navigation component ([#1894](https://github.com/Sitecore/jss/pull/1894))
+* `[sitecore-jss]``[sitecore-jss-angular]` Default Placeholder Content for empty fields in editMode metadata - in edit mode metadata in Pages, angular package field directives will render default or custom placeholder content if the provided field is empty; ([#1916](https://github.com/Sitecore/jss/pull/1916))
+  * custom placeholder content can be provided to field directives by passing the corresponding input:
+   - `scDateEmptyFieldEditingTemplate` for _scDate_
+   - `scGenericLinkEmptyFieldEditingTemplate` for _scGenericLink_
+   - `scImageEmptyFieldEditingTemplate` for _scImage_
+   - `scLinkEmptyFieldEditingTemplate` for _scLink_
+   - `scRichTextEmptyFieldEditingTemplate` for _scRichText_
+   - `scRouterLinkEmptyFieldEditingTemplate` for _scRouterLink_
+   - `scTextEmptyFieldEditingTemplate` for _scText_
+* `[sitecore-jss]` GenericFieldValue model is updated to accept Date type ([#1916](https://github.com/Sitecore/jss/pull/1916))
 
 ### 🛠 Breaking Change
 

packages/sitecore-jss-angular/src/components/base-field.directive.spec.ts

@@ -0,0 +1,170 @@
+import { Component, DebugElement, Input, TemplateRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { TextField } from './rendering-field';
+import { TestBaseDirective } from '../test-data/test-base.directive';
+
+@Component({
+  selector: 'test-base',
+  template: `
+    <span *scTestBase="field; editable: editable"></span>
+  `,
+})
+class TestComponent {
+  @Input() field: TextField;
+  @Input() editable = true;
+}
+
+const emptyTextFieldEditingTemplateId = 'emptyTextFieldEditingTemplate';
+const emptyTextFieldEditingTemplate =
+  '<span>[This is a *custom* empty field component for text]</span>';
+
+@Component({
+  selector: 'test-base-template',
+  template: `
+    <span
+      *scTestBase="
+        field;
+        editable: editable;
+        emptyFieldEditingTemplate: ${emptyTextFieldEditingTemplateId}
+      "
+    ></span>
+
+    <ng-template #${emptyTextFieldEditingTemplateId}>
+      ${emptyTextFieldEditingTemplate}
+    </ng-template>
+  `,
+})
+class TestEmptyTemplateComponent {
+  @Input() field: TextField;
+  @Input() emptyFieldEditingTemplate: TemplateRef<unknown>;
+  @Input() editable = true;
+}
+
+describe('<span *scTestBase />', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let de: DebugElement;
+  let deSpan: DebugElement;
+  let comp: TestComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestBaseDirective, TestComponent, TestEmptyTemplateComponent],
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    de = fixture.debugElement;
+    deSpan = de.query(By.css('span'));
+    comp = fixture.componentInstance;
+  });
+
+  describe('edit mode chromes', () => {
+    it('should render field value if it is present', () => {
+      const field: { [prop: string]: unknown } = {
+        value: 'value',
+      };
+      comp.field = field;
+      fixture.detectChanges();
+
+      const rendered = deSpan.nativeElement.innerHTML;
+      expect(rendered).toBe('value');
+    });
+
+    it('should render field editable if it is present', () => {
+      const field: { [prop: string]: unknown } = {
+        value: 'value',
+        editable: 'editable',
+      };
+      comp.field = field;
+      fixture.detectChanges();
+
+      const rendered = deSpan.nativeElement.innerHTML;
+      expect(rendered).toBe(field.editable);
+    });
+
+    it('should render nothing if field.editable and value are missing', () => {
+      const field: { [prop: string]: unknown } = {
+        value: '',
+      };
+      comp.field = field;
+      fixture.detectChanges();
+
+      const rendered = deSpan.nativeElement.innerHTML;
+      expect(rendered).toBe('');
+    });
+  });
+
+  describe('edit mode metadata', () => {
+    const testMetadata = {
+      contextItem: {
+        id: '{09A07660-6834-476C-B93B-584248D3003B}',
+        language: 'en',
+        revision: 'a0b36ce0a7db49418edf90eb9621e145',
+        version: 1,
+      },
+      fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}',
+      fieldType: 'single-line',
+      rawValue: 'Test1',
+    };
+
+    it('should render field value if field value is not empty', () => {
+      const field: { [prop: string]: unknown } = {
+        value: 'value',
+        metadata: testMetadata,
+      };
+      comp.field = field;
+      fixture.detectChanges();
+
+      const rendered = deSpan.nativeElement.innerHTML;
+      expect(rendered).toBe('value');
+    });
+
+    describe('field value is empty', () => {
+      it('should render default empty editing component if custom is not provided', () => {
+        const field = {
+          value: '',
+          metadata: testMetadata,
+        };
+        comp.field = field;
+        fixture.detectChanges();
+
+        const rendered = de.nativeElement.innerHTML;
+        expect(rendered).toContain('<span>[No text in field]</span>');
+      });
+
+      it('should render custom empty editing template if provided', () => {
+        fixture = TestBed.createComponent(TestEmptyTemplateComponent);
+        fixture.detectChanges();
+
+        de = fixture.debugElement;
+        comp = fixture.componentInstance;
+
+        const field = {
+          value: '',
+          metadata: testMetadata,
+        };
+        comp.field = field;
+        fixture.detectChanges();
+
+        const rendered = de.nativeElement.innerHTML;
+        expect(rendered).toContain(emptyTextFieldEditingTemplate);
+      });
+
+      it('should render nothing when field value is empty, when editing is explicitly disabled', () => {
+        const field = {
+          value: '',
+          metadata: testMetadata,
+        };
+        comp.field = field;
+        comp.editable = false;
+        fixture.detectChanges();
+
+        const rendered = deSpan.nativeElement.innerHTML;
+        expect(rendered).toBe('');
+      });
+    });
+  });
+});

packages/sitecore-jss-angular/src/components/base-field.directive.ts

@@ -0,0 +1,45 @@
+import { Directive, Type, ViewContainerRef, EmbeddedViewRef, TemplateRef } from '@angular/core';
+import { RenderingField } from './rendering-field';
+import { GenericFieldValue, isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
+
+/**
+ * Base class that contains common functionality for the field directives.
+ */
+@Directive()
+export abstract class BaseFieldDirective {
+  protected viewRef: EmbeddedViewRef<unknown>;
+  protected abstract field: RenderingField<GenericFieldValue>;
+  protected abstract editable: boolean;
+  /**
+   * Custom template to render in Pages in Metadata edit mode if field value is empty
+   */
+  protected abstract emptyFieldEditingTemplate: TemplateRef<unknown>;
+  /**
+   * Default component to render in Pages in Metadata edit mode if field value is empty and emptyFieldEditingTemplate is not provided
+   */
+  protected abstract defaultFieldEditingComponent: Type<unknown>;
+
+  constructor(protected viewContainer: ViewContainerRef) {}
+
+  /**
+   * Determines if directive should render the field as is
+   * Returns true if we are in edit mode 'chromes' (field.editable is present) or field is not empty
+   */
+  protected shouldRender() {
+    return !!this.field?.editable || !isFieldValueEmpty(this.field);
+  }
+
+  /**
+   * Renders the empty field markup which is required by Pages in editMode 'metadata' in case field is empty.
+   */
+  protected renderEmpty() {
+    if (this.field?.metadata && this.editable) {
+      if (this.emptyFieldEditingTemplate) {
+        this.viewContainer.createEmbeddedView(this.emptyFieldEditingTemplate);
+      } else {
+        this.viewContainer.clear();
+        this.viewContainer.createComponent(this.defaultFieldEditingComponent);
+      }
+    }
+  }
+}