@pega/dx-component-builder-sdk 0.23.13 → 0.23.14

package/tests/assets/sdk-a/components/create/override-sdk/widget/file-utility/file-utility.component.ts

@@ -149,24 +149,30 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
       this.lu_bLoading$ = true;
     }
 
-    // const uploadedFiles = [];
-
-    for (const file of files) {
-      attachmentUtils
-        .uploadAttachment(file, this.onUploadProgress, this.errorHandler, this.pConn$.getContextName())
-        .then((fileResponse: any) => {
-          if (fileResponse.type === 'File') {
-            (attachmentUtils.linkAttachmentsToCase(caseID, [fileResponse], 'File', this.pConn$.getContextName()) as Promise<any>)
-              .then(() => {
-                this.refreshAttachments();
-              })
-              .catch(console.error);
+    const arFiles: any = Array.from(files);
+
+    Promise.allSettled(
+      arFiles.map(file => attachmentUtils.uploadAttachment(file, this.onUploadProgress, this.errorHandler, this.pConn$.getContextName()))
+    )
+      .then((fileResponses: any) => {
+        const uploadedFiles: any = [];
+        fileResponses.forEach(fileResponse => {
+          if (fileResponse.status === 'fulfilled') {
+            uploadedFiles.push(fileResponse.value);
           }
-        })
-        .catch(console.error);
-    }
+        });
+        if (uploadedFiles.length > 0) {
+          (attachmentUtils.linkAttachmentsToCase(caseID, uploadedFiles, 'File', this.pConn$.getContextName()) as Promise<any>)
+            .then(() => {
+              this.refreshAttachments();
+            })
+            .catch();
+        }
+      })
+      .catch();
 
     this.arFileList$ = [];
+    this.lu_bLoading$ = false;
   }
 
   refreshAttachments() {

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.html

@@ -0,0 +1,33 @@
+<div [attr.data-test-id]="testId">
+  <label [ngClass]="{ 'label-required': required === true }" class="rich-text-label">{{ label }}</label>
+  <div class="rich-text-editor" *ngIf="!readonly">
+    <editor
+      [formControl]="richText"
+      [attr.disabled]="disabled"
+      [initialValue]="value"
+      [init]="{
+        base_url: '/tinymce',
+        suffix: '.min',
+        menubar: false,
+        placeholder,
+        statusbar: false,
+        min_height: 130,
+        plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
+        autoresize_bottom_margin: 0,
+        toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+        toolbar_location: 'bottom',
+        content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+        branding: false,
+        paste_data_images: true,
+        file_picker_types: 'image',
+        file_picker_callback: filePickerCallback
+      }"
+      (onBlur)="blur()"
+      (onChange)="change($event)"
+    ></editor>
+    <p *ngIf="richText.invalid" [ngClass]="'text-editor-error'">{{ info }}</p>
+  </div>
+  <div *ngIf="readonly">
+    <div class="readonly-richtext-editor" style="margin: 10px 5px" [innerHTML]="value || '--'"></div>
+  </div>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.scss

@@ -0,0 +1,19 @@
+.rich-text-label {
+  margin: 5px;
+  font-size: 16px;
+}
+
+.rich-text-editor {
+  margin: 10px 0px;
+}
+
+.label-required::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: var(--app-neutral-dark-color);
+}
+
+.text-editor-error {
+  color: var(--app-error-light-color);
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { RichTextEditorComponent } from './rich-text-editor.component';
+
+describe('RichTextComponent', () => {
+  let component: RichTextEditorComponent;
+  let fixture: ComponentFixture<RichTextEditorComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [RichTextEditorComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RichTextEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.ts

@@ -0,0 +1,89 @@
+import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
+
+declare let tinymce: any;
+
+@Component({
+  selector: 'app-rich-text-editor',
+  templateUrl: './rich-text-editor.component.html',
+  styleUrls: ['./rich-text-editor.component.scss'],
+  standalone: true,
+  imports: [CommonModule, EditorModule, ReactiveFormsModule],
+  providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }]
+})
+export class RichTextEditorComponent implements OnChanges {
+  @Input() placeholder;
+  @Input() disabled;
+  @Input() readonly;
+  @Input() value;
+  @Input() label;
+  @Input() required;
+  @Input() info;
+  @Input() error;
+  @Input() testId;
+
+  @Output() onBlur: EventEmitter<any> = new EventEmitter();
+  @Output() onChange: EventEmitter<any> = new EventEmitter();
+
+  richText = new FormControl();
+
+  ngOnChanges() {
+    if (this.required) {
+      this.richText.addValidators(Validators.required);
+    }
+
+    if (this.disabled) {
+      this.richText.disable();
+    } else {
+      this.richText.enable();
+    }
+
+    if (this.value) {
+      this.richText.setValue(this.value);
+    }
+  }
+
+  filePickerCallback = cb => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+
+    input.addEventListener('change', (e: any) => {
+      const file = e.target.files[0];
+
+      const reader: any = new FileReader();
+      reader.addEventListener('load', () => {
+        /*
+            Note: Now we need to register the blob in TinyMCEs image blob
+            registry. In the next release this part hopefully won't be
+            necessary, as we are looking to handle it internally.
+        */
+        const blobId = `blobid${new Date().getTime()}`;
+        console.log('editorRef', tinymce.activeEditor);
+        const blobCache = tinymce.activeEditor.editorUpload.blobCache;
+        const base64 = reader.result.split(',')[1];
+        const blobInfo = blobCache.create(blobId, file, base64);
+        blobCache.add(blobInfo);
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), { title: file.name });
+      });
+      reader.readAsDataURL(file);
+    });
+
+    input.click();
+  };
+
+  blur() {
+    if (tinymce.activeEditor) {
+      const editorValue = tinymce.activeEditor.getContent({ format: 'html' });
+      this.onBlur.emit(editorValue);
+    }
+  }
+
+  change(event) {
+    this.onChange.emit(event);
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/rich-text/rich-text.component.html

@@ -0,0 +1,20 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+</div>
+<ng-template #noDisplayMode>
+  <div *ngIf="!bReadonly$; else noEdit">
+    <div *ngIf="bVisible$">
+      <component-mapper
+        name="RichTextEditor"
+        [props]="{ placeholder, required: bRequired$, disabled: bDisabled$, label: label$, readonly: false, error, info, testId, value: value$ }"
+        [parent]="this"
+        [outputEvents]="{ onBlur: fieldOnBlur, onChange: fieldOnChange }"
+      ></component-mapper>
+    </div>
+  </div>
+</ng-template>
+<ng-template #noEdit>
+  <div *ngIf="bVisible$ !== false">
+    <component-mapper name="RichTextEditor" [props]="{ label: label$, value: value$, readonly: true, testId }" [parent]="this"></component-mapper>
+  </div>
+</ng-template>

package/tests/assets/sdk-a/components/createAll/override-sdk/field/rich-text/rich-text.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { RichTextComponent } from './rich-text.component';
+
+describe('RichTextComponent', () => {
+  let component: RichTextComponent;
+  let fixture: ComponentFixture<RichTextComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [RichTextComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RichTextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/createAll/override-sdk/field/rich-text/rich-text.component.ts

@@ -0,0 +1,131 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+
+interface RichTextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on RichText here
+}
+
+@Component({
+  selector: 'app-rich-text',
+  templateUrl: './rich-text.component.html',
+  styleUrls: ['./rich-text.component.scss'],
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class RichTextComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: RichTextProps;
+
+  label$ = '';
+  value$ = '';
+  bRequired$ = false;
+  bReadonly$ = false;
+  bDisabled$ = false;
+  bVisible$ = true;
+  displayMode$?: string = '';
+  controlName$: string;
+  testId: string;
+  helperText: string;
+  placeholder: any;
+  info: any;
+  error: boolean;
+  status: any;
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private utils: Utils
+  ) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    // call updateSelf when initializing
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    // moved this from ngOnInit() and call this from there instead...
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as RichTextProps;
+    const stateProps: any = this.pConn$.getStateProps();
+    this.status = stateProps?.status;
+
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
+
+    this.testId = this.configProps$.testId;
+    this.displayMode$ = this.configProps$.displayMode;
+    this.label$ = this.configProps$.label;
+    this.placeholder = this.configProps$.placeholder;
+    this.info = stateProps?.validatemessage || this.configProps$.helperText;
+    this.error = stateProps?.status === 'error';
+
+    if (this.configProps$.required != null) {
+      this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+    }
+
+    if (this.configProps$.visibility != null) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+    }
+
+    if (this.configProps$.disabled != undefined) {
+      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+    }
+
+    if (this.configProps$.readOnly != null) {
+      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+    }
+  }
+
+  fieldOnChange() {
+    if (this.status === 'error') {
+      const property = (this.pConn$.getStateProps() as any).value;
+      this.pConn$.clearErrorMessages({
+        property,
+        category: '',
+        context: ''
+      });
+    }
+  }
+
+  fieldOnBlur(editorValue: any) {
+    // PConnect wants to use eventHandler for onBlur
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, editorValue);
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/file-utility/file-utility.component.ts

@@ -149,24 +149,30 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
       this.lu_bLoading$ = true;
     }
 
-    // const uploadedFiles = [];
-
-    for (const file of files) {
-      attachmentUtils
-        .uploadAttachment(file, this.onUploadProgress, this.errorHandler, this.pConn$.getContextName())
-        .then((fileResponse: any) => {
-          if (fileResponse.type === 'File') {
-            (attachmentUtils.linkAttachmentsToCase(caseID, [fileResponse], 'File', this.pConn$.getContextName()) as Promise<any>)
-              .then(() => {
-                this.refreshAttachments();
-              })
-              .catch(console.error);
+    const arFiles: any = Array.from(files);
+
+    Promise.allSettled(
+      arFiles.map(file => attachmentUtils.uploadAttachment(file, this.onUploadProgress, this.errorHandler, this.pConn$.getContextName()))
+    )
+      .then((fileResponses: any) => {
+        const uploadedFiles: any = [];
+        fileResponses.forEach(fileResponse => {
+          if (fileResponse.status === 'fulfilled') {
+            uploadedFiles.push(fileResponse.value);
           }
-        })
-        .catch(console.error);
-    }
+        });
+        if (uploadedFiles.length > 0) {
+          (attachmentUtils.linkAttachmentsToCase(caseID, uploadedFiles, 'File', this.pConn$.getContextName()) as Promise<any>)
+            .then(() => {
+              this.refreshAttachments();
+            })
+            .catch();
+        }
+      })
+      .catch();
 
     this.arFileList$ = [];
+    this.lu_bLoading$ = false;
   }
 
   refreshAttachments() {