vcomply-workflow-engine 2.0.5 → 2.0.167

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/create-assessment-container/create-assessment-container.component.ts

@@ -0,0 +1,481 @@
+import { Component, Input, OnInit, EventEmitter, Output, HostListener } from '@angular/core';
+import { AddPageDetailsComponent } from '../components/add-page-details/add-page-details.component';
+import { AssessmentSettingsComponent } from '../components/assessment-settings/assessment-settings.component';
+
+import { EditorService } from '../services/editor.service';
+
+import { ActivatedRoute, Router } from '@angular/router';
+import { DialogService } from '../../../ui-kit/dialog/dialog.service';
+import { SnackBarService } from '../../../ui-kit/snack-bar/snack-bar.service';
+import { DeleteComponent } from '../../../ui-kit/action-dialog/delete/delete.component';
+import { ActiveComponent } from '../../../ui-kit/action-dialog/active/active.component';
+
+@Component({
+  selector: 'app-create-assessment-container',
+  templateUrl: './create-assessment-container.component.html',
+  styleUrls: ['./create-assessment-container.component.less'],
+  providers: [EditorService]
+})
+export class CreateAssessmentContainerComponent implements OnInit {
+  showCollapse = false;
+  expandPage = false;
+  hideQuestion = false;
+  assessmentId = '';
+  assessmentName = '';
+  assessmentCategory = '';
+  assessmentControlId = '';
+  assessmentCurrentState = 'DRAFT';
+  pageMode: 'EDIT' | 'PREVIEW' = 'EDIT';
+  isLoaded: boolean = false;
+  @Input() openPortal :'ASSESSMENT_IMPORT' | 'RESPONSIBILITY_CHECKPOINT'|'' = '';
+  @Output() setIsUploaded = new EventEmitter();
+  @Output() postAssessment = new EventEmitter();
+
+  @Input('assessmentJSON') set assessmentData(value: any) {
+    this.initializeAssessment(value)
+  }
+  @Input('checkpointJSON') set checkpointData(value: any) {
+    this.initializeCheckpoint(value)
+  }
+
+  /* When the "Escape" key is pressed, it emits an event to set the value of "isUploaded" to
+  false. and left popup will close. */
+  @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) { 
+    this.setIsUploaded.emit(false);
+  }
+
+  constructor(
+    private dialog: DialogService,
+    public editorService: EditorService,
+    // private  layoutService: LayoutService,
+    private route: ActivatedRoute,
+    private snackbar: SnackBarService,
+    private router: Router
+  ) { }
+
+  ngOnInit(): void {
+    this.editorService.addPage();
+    this.editorService.numberOfPages();
+    // this.initializeAssessment();
+  }
+triggerPreviewWithValidation(){
+  this.editorService.activeQuestionIndex.next(-10);
+  this.editorService.activeQuestion = -10;
+}
+  initializeAssessment(assessmentData: any) {
+    if (assessmentData) {
+      this.editorService.formsPage = assessmentData.assessmentData;
+      this.assessmentName = assessmentData.metadata.assessment_name;
+      this.assessmentCategory = assessmentData.metadata.category_arr;
+
+    }
+  }
+
+  initializeCheckpoint(checkpointData:any){
+    console.log("initializeCheckpoint ==>", checkpointData)
+    if(checkpointData && Object.keys(checkpointData)?.length > 0){
+      this.editorService.formsPage = checkpointData;
+    }
+  }
+
+  setAllPages() {
+    this.editorService.allPages = [...new Set(this.editorService.formsPage.elements.map((ele: any) => ele.page))];
+    this.getPageName(1);
+  }
+
+  addPageDetails() {
+
+    const ref = this.dialog.open(AddPageDetailsComponent, {
+      data: { page: this.editorService.currentPageNumber, pageDetails: this.editorService.currentPageDetails, ref: this.editorService },
+      position: 'RIGHT',
+      background: 'black',
+    });
+    ref.afterClosed.subscribe((data: any) => {
+      console.log("data ====>", data, this.editorService.stepIdentifier, this.editorService.showAddPageOption,this.editorService.showPageDetails);
+
+      this.generatePageDropdown();
+    })
+  }
+
+  public entitySettings: any = {
+    panelTitle: ''
+  };
+
+  assessmentSettings() {
+    this.entitySettings = this.getSettingsData();
+    const ref = this.dialog.open(AssessmentSettingsComponent, {
+      data: { settings: this.entitySettings, service: this.editorService },
+      position: 'RIGHT',
+      background: 'black',
+    });
+  }
+
+  getSettingsData() {
+    let settings: any = {
+      panelTitle: `Assessment settings`,
+
+      settingsElements: []
+    }
+    settings.settingsElements.push(
+      {
+        type: 'ASSESSMENT',
+        entityType: 'ASSESSMENT',
+        isVisible: true,
+        isEnabled: this.editorService.formsPage.settings.assessmentMode,
+        helpingText: 'You can configure scores for the questions and analyze the responses submitted by the respondent based on these scores.',
+        defaultScore: this.editorService.formsPage.settings.defaultScore,
+        negativeScoreCriteria: this.editorService.formsPage.settings.negativeScoreCriteria,
+        negativeScore: this.editorService.formsPage.settings.negativeScore,
+        weightageEnabled: this.editorService.formsPage.settings.weightageEnabled,
+        settingTitle: 'ASSESSMENT MODE',
+        settingEnableText: `Enable assessment mode for this assessment`,
+        updateType: 'LAZY'
+      }
+
+    )
+    settings.settingsElements.push(
+      {
+        type: 'RESPONSE_SEGMENT',
+        entityType: 'ASSESSMENT',
+        helpingText: 'Response segments let you divide the responses into separate parts or sections for easier analysis of data and assist in decision making.',
+        isVisible: true,
+        isEnabled: this.editorService.formsPage.responseSegment['isEnabled'] ?? false,
+        settingTitle: 'RESPONSE SEGMENTS',
+        settingEnableText: `Configure Response Segments for this assessment`,
+        updateType: 'LAZY',
+        segmentData: this.editorService.formsPage.responseSegment
+      }
+    )
+    return settings;
+  }
+
+  clickCollapse() {
+    this.showCollapse = !this.showCollapse;
+  }
+
+  clickExpand() {
+    this.expandPage = true;
+  }
+
+  closeExpand() {
+    this.expandPage = false;
+  }
+
+  deletePage() {
+    const ref = this.dialog.open(DeleteComponent, {
+      data: { message: `This action will <strong>remove</strong> this page.` },
+      position: 'CENTER',
+      background: 'black',
+    });
+    ref.afterClosed.subscribe((data: any) => {
+
+      if (data === true) {
+        this.deletePageConfirm(true)
+      }
+
+    })
+  }
+
+  deletePageConfirm(confirmDelete: any) {
+    if (confirmDelete) {
+      this.editorService.allPages = this.editorService.allPages.filter((pageNum: any) => pageNum !== this.editorService.currentPageNumber);
+      this.editorService.allPages = this.updatePageNumbersForAllPages(this.editorService.allPages);
+      this.editorService.formsPage.pageDetailsList = this.editorService.formsPage.pageDetailsList.filter((pageDetail: any) =>
+        pageDetail.pageNumber !== this.editorService.currentPageNumber);
+      this.editorService.formsPage.pageDetailsList = this.updatePageNumberForPageDetails(this.editorService.formsPage.pageDetailsList);
+      this.editorService.formsPage.elements = this.editorService.formsPage.elements.filter(
+        (elementDetail: any) => elementDetail.page !== this.editorService.currentPageNumber);
+      this.editorService.formsPage.elements = this.updatePageNumberForQuestions(this.editorService.formsPage.elements);
+      if (this.editorService.currentPageNumber > 1) {
+        this.editorService.currentPageNumber -= 1;
+      }
+      this.getPageName(this.editorService.currentPageNumber);
+      this.checkForPageDetails();
+    }
+
+    this.editorService.activeQuestion = -10;
+  }
+
+  updatePageNumbersForAllPages(arrayToBeUpdated: any) {
+    for (let i = 0; i < arrayToBeUpdated.length; i++) {
+      if (i >= this.editorService.currentPageNumber - 1) {
+        arrayToBeUpdated[i] -= 1;
+      }
+    }
+    return arrayToBeUpdated;
+  }
+
+  updatePageNumberForPageDetails(arrayToBeUpdated: any) {
+    arrayToBeUpdated.forEach((element: any) => {
+      if (element.pageNumber >= this.editorService.currentPageNumber) {
+        element.pageNumber -= 1;
+      }
+    });
+    return arrayToBeUpdated;
+  }
+
+  updatePageNumberForQuestions(arrayToBeUpdated: any) {
+    arrayToBeUpdated.forEach((element: any) => {
+      if (element.page >= this.editorService.currentPageNumber) {
+        element.page -= 1;
+      }
+    });
+    return arrayToBeUpdated;
+  }
+
+  openQuestion() {
+    this.hideQuestion = true;
+  }
+
+  closeQuestion() {
+    this.hideQuestion = false;
+  }
+
+  deleteQuestionWithValidation(index: any) {
+    if (index === 'welcome') {
+      this.editorService.formsPage.hasWelcome = false;
+      this.editorService.currentPageNumber = 1;
+      this.editorService.stepIdentifier = 'pagescreen';
+    }
+    this.editorService.deleteQuestion(index);
+  }
+
+  checkforError(mode?: any) {
+    // this.moreOptions = false;
+    const errorQuestionIndex = this.editorService.formsPage.elements.findIndex(
+      (element: any, index: any) => (element.errorArray && element.errorArray !== {} && Object.values(element.errorArray).length > 0));
+    if (errorQuestionIndex >= 0) {
+      if (mode === 'full') {
+        this.editorService.currentPageNumber = this.editorService.formsPage.elements[errorQuestionIndex].page;
+      }
+      if (mode !== 'partial') {
+        // this.getPageName(this.editorService.currentPageNumber);
+
+        this.editorService.activeQuestion = errorQuestionIndex;
+        this.editorService.activeQuestionIndex.next(errorQuestionIndex);
+
+        const question = document.getElementById(this.editorService.formsPage.elements[errorQuestionIndex].name);
+        setTimeout(() => {
+          if (question) {
+            question.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          }
+        }, 200);
+      }
+      if (mode === 'save') {
+        this.editorService.activeQuestion = -10;
+        this.editorService.activeQuestionIndex.next(-10);
+      }
+
+      return true;
+    } else {
+      if (mode === 'save') {
+        this.editorService.activeQuestion = -10;
+        this.editorService.activeQuestionIndex.next(-10);
+      }
+      return false;
+    }
+  }
+
+  generatePageDropdown() {
+    const list = [];
+    if (this.editorService.formsPage.hasWelcome === true) {
+      list.push({ value: -1, template: `<span class="page-number">Welcome Screen</span>` });
+    }
+    if (this.editorService.formsPage.hasThanks === true) {
+      list.push({ value: -2, template: `<span class="page-number">Thank you Screen</span>` });
+    }
+
+    this.editorService.allPages.forEach((element: any) => {
+      list.push({ value: element, template: this.getPageNameForDropdown(element) });
+
+    });
+
+    return list;
+  }
+
+  getPageNameForDropdown(pageNumber: any) {
+    let pageValue = `<span class="page-number">Page ${pageNumber}</span>`;
+    this.editorService.formsPage.pageDetailsList.forEach((pageDetail: any) => {
+      if (pageDetail.pageNumber === pageNumber && pageDetail.pageName !== '') {
+        pageValue = `<span class="page-label vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3">PAGE</span>
+                                <span class="page-number vx-fs-11 vx-paragraph-txt">${pageDetail.pageNumber}</span>`
+        //pageValue = `<span class="page-label vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3">Page </span> <span ${pageDetail.pageNumber}</span> <span class="page-number vx-fs-11 vx-paragraph-txt"> ${pageDetail.pageName}</span>`;
+      }
+    });
+    return pageValue;
+  }
+
+  pageChanged(evt: any) {
+
+    if (evt.value === -1) {
+      this.setIdentifier('welcomescreen');
+    } else if (evt.value === -2) {
+      this.setIdentifier('thankyouscreen');
+    } else if (evt.value >= 0) {
+      this.editorService.currentPageNumber = evt?.value;
+      this.setIdentifier('pagescreen');
+    }
+  }
+
+  setIdentifier(screen: any) {
+    this.changeToInactive();
+    if (screen === 'welcomescreen') {
+      this.editorService.stepIdentifier = 'welcomescreen';
+      this.editorService.currentPageNumber = -1;
+    }
+    if (screen === 'thankyouscreen') {
+      this.editorService.stepIdentifier = 'thankyouscreen';
+      this.editorService.currentPageNumber = -2;
+    }
+    if (screen === 'pagescreen') {
+      this.editorService.stepIdentifier = 'pagescreen';
+      if (this.editorService.allPages.length === 0) {
+        this.editorService.addPage();
+        this.editorService.currentPageNumber = 1;
+      } else if (this.editorService.currentPageNumber === -1 || this.editorService.currentPageNumber === -2) {
+        this.editorService.currentPageNumber = this.editorService.allPages.length;
+      }
+
+    }
+    this.getPageName(this.editorService.currentPageNumber);
+  }
+
+  getPageName(pageNumber: any) {
+    console.log("called 11")
+    this.editorService.currentPageDetails = { pageName: '', pageNumber: 0, pageDescription: '' };
+    this.editorService.formsPage.pageDetailsList.forEach((pageDetail: any) => {
+      if (pageDetail.pageNumber === pageNumber) {
+        this.editorService.currentPageDetails.pageNumber = pageDetail.pageNumber;
+        this.editorService.currentPageDetails.pageName = pageDetail.pageName;
+        this.editorService.currentPageDetails.pageDescription = pageDetail.pageDescription;
+      }
+    });
+    this.checkForPageDetails();
+  }
+
+  checkForPageDetails() {
+    if (this.editorService.currentPageDetails === undefined || this.editorService.currentPageDetails.pageName === '') {
+      this.editorService.showAddPageOption = true;
+      this.editorService.showPageDetails = false;
+    } else {
+      this.editorService.showAddPageOption = false;
+      this.editorService.showPageDetails = true;
+    }
+  }
+
+  changeToInactive() {
+    this.editorService.activeQuestion = -5;
+    this.editorService.activeQuestionIndex.next(-5);
+  }
+
+  addNewPage() {
+    this.editorService.addPage();
+    this.editorService.currentPageDetails = { pageName: '', pageNumber: this.editorService.currentPageNumber, pageDescription: '' };
+    this.editorService.showPageDetails = false;
+    this.editorService.showAddPageOption = true;
+    this.generatePageDropdown();
+  }
+
+  capitalizeString(stringValue: string) {
+    return stringValue[0].toUpperCase() + stringValue.slice(1);
+  }
+
+  onDeletePageClick() {
+    // this.showDeletePopup = true;
+  }
+
+  isPageEmpty() {
+    if (![...new Set(this.editorService.formsPage.elements.map((element: any) => element.page))].includes(this.editorService.currentPageNumber)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  submitAfterErrorCheck(mode: any) {
+    this.editorService.activeQuestionIndex.next(-10);
+    this.editorService.activeQuestion = -10;
+    if (this.editorService.stepIdentifier === 'welcomescreen' || this.editorService.stepIdentifier === 'thankyouscreen') {
+      this.editorService.currentPageNumber = 1;
+      this.editorService.stepIdentifier = 'pagescreen';
+    }
+    //this.pageMode = 'EDIT';
+
+    this.validateWelcomeThankYou();
+
+    setTimeout(() => {
+      if (!this.checkforError('full')) {
+        for (const question of this.editorService.formsPage.elements) {
+          if (!['checkbox', 'dropdown', 'multiple-choice'].includes(question.type)) {
+            if (question.choices) {
+              question.choices.forEach((element: any) => {
+                element.color = undefined;
+                element.score = 1;
+                element.isFailed = false;
+              });
+            }
+            question.otherConfig = { color: '', isFailed: false, score: 0 };
+          }
+        }
+        this.save(mode)
+      }
+    }, 200);
+
+  }
+
+  validateWelcomeThankYou() {
+    const question = this.editorService.formsPage;
+    if (question.hasWelcome === true) {
+      if (question.hasWelcomeDescription === true && this.editorService.extract(question.welcomeDescription).length === 0) {
+        this.editorService.formsPage.hasWelcomeDescription = false;
+      }
+      if (question.hasWelcomeImage === true && this.editorService.extract(question.welcomeImage).length === 0) {
+        this.editorService.formsPage.hasWelcomeImage = false;
+      }
+      if (this.editorService.extract(question.welcomeDescription).length === 0 &&
+        this.editorService.extract(question.welcomeText).length === 0 &&
+        this.editorService.extract(question.welcomeImage).length === 0) {
+        this.editorService.formsPage.hasWelcome = false;
+        this.editorService.formsPage.hasWelcomeDescription = true;
+        this.editorService.formsPage.hasWelcomeImage = true;
+      }
+    }
+    if (question.hasThanks === true) {
+      if (question.hasThankyouDescription === true && this.editorService.extract(question.thankyouDescription).length === 0) {
+        this.editorService.formsPage.hasThankyouDescription = false;
+      }
+      if (question.hasThankyouImage === true && this.editorService.extract(question.thankyouImage).length === 0) {
+        this.editorService.formsPage.hasThankyouImage = false;
+      }
+      if (this.editorService.extract(question.thankyouDescription).length === 0 &&
+        this.editorService.extract(question.thankyouText).length === 0 &&
+        this.editorService.extract(question.thankyouImage).length === 0) {
+        this.editorService.formsPage.hasThanks = false;
+        this.editorService.formsPage.hasThankyouDescription = true;
+        this.editorService.formsPage.hasThankyouImage = true;
+      }
+    }
+  }
+
+  save(mode: 'DRAFT' | 'ACTIVE') {
+    if (mode === 'ACTIVE' && this.openPortal !== 'RESPONSIBILITY_CHECKPOINT') {
+      const ref = this.dialog.open(ActiveComponent, {
+        data: {
+          message: `Once published, this assessment will be active and can be associated with a compliance responsibility.`
+        },
+        position: 'CENTER',
+        background: 'black',
+      });
+      ref.afterClosed.subscribe({
+        next: (res: any) => {
+          if (res === true) {
+            this.postAssessment.emit({ mode: mode, assessmentDetails: this.editorService.formsPage });
+          }
+        }
+      })
+    } else {
+      this.postAssessment.emit({ mode: mode, assessmentDetails: this.editorService.formsPage});
+
+    }
+  }
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/create-assessment.module.ts

@@ -0,0 +1,96 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CreateAssessmentContainerComponent } from './create-assessment-container/create-assessment-container.component';
+import { RouterModule } from '@angular/router';
+// import { TooltipModule } from 'projects/ui-components/src/lib/ui-utility/tooltip/tooltip.module';
+// import { PopoverModule } from 'projects/ui-components/src/lib/ui-utility/popover/popover.module';
+import { QuestionTypeComponent } from './components/question-type/question-type.component';
+import { AddPageDetailsComponent } from './components/add-page-details/add-page-details.component';
+// import { FormgroupModule, UiDialogModule } from 'projects/ui-components/src';
+import { VcomplyEditorModule } from '@vcomply/editor';
+import { AssessmentSettingsComponent } from './components/assessment-settings/assessment-settings.component';
+import { AddSegmentPopupComponent } from './components/add-segment-popup/add-segment-popup.component';
+import { AddResponseSetPopupComponent } from './components/add-response-set-popup/add-response-set-popup.component';
+import { EditorWrapperComponent } from './components/editor-wrapper/editor-wrapper.component';
+import { QuickSettingsComponent } from './components/quick-settings/quick-settings.component';
+import { SingleLineEditorComponent } from './components/single-line-editor/single-line-editor.component';
+import { ResponseSelectorComponent } from './components/response-selector/response-selector.component';
+
+import { BuildModule } from './components/build/build.module';
+import { PreviewModule } from './components/preview/preview.module';
+import { MoveComponent } from './components/move/move.component';
+import { LogicComponent } from './components/logic/logic.component';
+import { AddLogicComponent } from './components/add-logic/add-logic.component';
+import { LogicQuestionsModule } from './components/logic-questions/logic-questions.module';
+import { ToolkitComponent } from './components/toolkit/toolkit.component';
+import { FormsModule } from '@angular/forms';
+import { ErrorMessagePipe } from './components/pipes/error-message.pipe';
+import { QuestionFilterPipe } from './components/pipes/question-filter.pipe';
+import { QuestionParserPipe } from './components/pipes/question-parser.pipe';
+import { FormatterPipe } from './components/pipes/formatter.pipe';
+import { SettingAnonymousComponent } from './components/setting-anonymous/setting-anonymous.component';
+import { SettingResponseSegmentComponent } from './components/setting-response-segment/setting-response-segment.component';
+// import { TokenInterceptor } from 'src/app/interceptors/token-interceptor';
+import { PageHeaderComponent } from './components/page-header/page-header.component';
+import { WelcomeThankyouComponent } from './components/welcome-thankyou/welcome-thankyou.component';
+import { AssessmentPreviewModule } from '../assessment-preview/assessment-preview.module';
+import { CurrentPageQuestionPipe } from './components/pipes/current-page-question.pipe';
+import { QuestionPageFilterPipe } from './components/pipes/question-page-filter.pipe';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { TypeOfPipe } from './components/pipes/type-of.pipe';
+import { TooltipModule } from '../../ui-kit/tooltip/tooltip.module';
+import { PopoverModule } from '../../ui-kit/popover/popover.module';
+import { DialogModule } from '../../ui-kit/dialog/dialog.module';
+import { FormgroupModule } from '../../formgroup/formgroup.module';
+import { EditorLoaderModule } from '../../ui-kit/editor-loader/editor-loader.module';
+import { NoDataModule } from '../no-data/no-data.module';
+
+@NgModule({
+  declarations: [
+    CreateAssessmentContainerComponent,
+    QuestionTypeComponent,
+    AddPageDetailsComponent,
+    AssessmentSettingsComponent,
+    AddSegmentPopupComponent,
+    AddResponseSetPopupComponent,
+    EditorWrapperComponent,
+    QuickSettingsComponent,
+    SingleLineEditorComponent,
+    ResponseSelectorComponent,
+    MoveComponent,
+    LogicComponent,
+    AddLogicComponent,
+    ToolkitComponent,
+    ErrorMessagePipe,
+    QuestionFilterPipe,
+    QuestionParserPipe,
+    FormatterPipe,
+    SettingAnonymousComponent,
+    SettingResponseSegmentComponent,
+    PageHeaderComponent,
+    WelcomeThankyouComponent,
+    CurrentPageQuestionPipe,
+    QuestionPageFilterPipe,
+    TypeOfPipe,
+  ],
+  imports: [
+    CommonModule,
+    TooltipModule,
+    PopoverModule,
+    DragDropModule,
+    DialogModule,
+    // MarxEditorModule,
+    VcomplyEditorModule,
+    FormgroupModule,
+    NoDataModule,
+    BuildModule,
+    PreviewModule,
+    AssessmentPreviewModule,
+    FormsModule,
+    LogicQuestionsModule,
+    EditorLoaderModule,
+  ],
+  exports: [CreateAssessmentContainerComponent],
+  // providers:[ { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },]
+})
+export class CreateAssessmentModule {}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/services/editor.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EditorService } from './editor.service';
+
+describe('EditorService', () => {
+  let service: EditorService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EditorService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});