vcomply-workflow-engine 2.0.4 → 2.0.167

package/projects/vx-workflow-engine/src/lib/workflow/shared/components/attributes/attributes.component.html

@@ -0,0 +1,131 @@
+<ng-container>
+  <div
+    class="custom-label vx-fs-10 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mb-5 vx-lh-4 vx-d-inline-block"
+  >
+    Attributes
+  </div>
+  <ng-container
+    *ngFor="let eachAttributes of attributesInfo.attributes; let i = index"
+  >
+    <div
+      *ngIf="eachAttributes?.type === 'single-textbox'"
+      class="form-group-row"
+      [class.disabled]="disabled"
+    >
+      <div class="right">
+        <lib-attributes-text-box
+          [attributeInfo]="eachAttributes"
+          (onValueChange)="attributesInfo.attributes[i] = $event"
+          [isValidationError]="
+            isFormSubmitted && !(eachAttributes | isAttributesValid)
+          "
+        >
+        </lib-attributes-text-box>
+      </div>
+    </div>
+
+    <!-- Installation date -->
+    <div
+      *ngIf="eachAttributes?.type === 'date-time'"
+      class="form-group-row"
+      [class.disabled]="disabled"
+    >
+      <lib-text-field-icon
+        [cdnLink]="CDN_LINK.customFields"
+        [isChecked]="eachAttributes?.choices[0]?.value"
+        field-icons
+      >
+      </lib-text-field-icon>
+      <div class="right">
+        <lib-date-picker [valueDetails]="eachAttributes"></lib-date-picker>
+        <p
+          *ngIf="isFormSubmitted && !(eachAttributes | isAttributesValid)"
+          [appScrollInView]="true"
+          class="error-message"
+          error-message
+        >
+          {{ VALIDATION_MESSAGE.attributes }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Hosting type -->
+    <div
+      *ngIf="eachAttributes?.type === 'dropdown'"
+      class="form-group-row"
+      [class.disabled]="disabled"
+    >
+      <lib-text-field-icon
+        [cdnLink]="CDN_LINK.customFields"
+        [isChecked]="(eachAttributes | getSelectedValue).length > 0"
+        field-icons
+      >
+      </lib-text-field-icon>
+      <div class="right">
+        <lib-attributes-dropdown
+          [dropdownInfo]="eachAttributes"
+          (onDataSelection)="onDataSelection($event, i)"
+          [isValidationError]="
+            isFormSubmitted && !(eachAttributes | isAttributesValid)
+          "
+        ></lib-attributes-dropdown>
+      </div>
+    </div>
+
+    <!-- Hosting location -->
+    <div
+      *ngIf="eachAttributes?.type === 'checkbox'"
+      class="form-group-row"
+      [class.disabled]="disabled"
+      [class.active]="false"
+    >
+      <div class="right">
+        <lib-text-field
+          [isEditMode]="
+            (eachAttributes | getSelectedValue).length && openedPopup == ''
+          "
+          [titleText]="eachAttributes?.title"
+          [placeholderText]="multiPlaceholderText"
+          [isReadOnly]="true"
+          (onClick)="onPopupOpen('checkbox', eachAttributes, i)"
+        >
+          <lib-text-field-icon
+            [cdnLink]="CDN_LINK.customFields"
+            [isChecked]="(eachAttributes | getSelectedValue).length > 0"
+            field-icons
+          >
+          </lib-text-field-icon>
+          <span *ngIf="eachAttributes?.isRequired" class="required" is-required
+            >*</span
+          >
+
+          <lib-edit-mode
+            *ngIf="
+              (eachAttributes | getSelectedValue).length && openedPopup == ''
+            "
+            (onRemoveData)="onRemoveData($event, i)"
+            [selectedData]="eachAttributes | getSelectedValue"
+            [type]="'list'"
+            (isOnEdit)="onPopupOpen('checkbox', eachAttributes, i)"
+            edit-mode
+          ></lib-edit-mode>
+          <p
+            *ngIf="isFormSubmitted && !(eachAttributes | isAttributesValid)"
+            [appScrollInView]="true"
+            class="error-message"
+            error-message
+          >
+            {{ VALIDATION_MESSAGE.attributes }}
+          </p>
+        </lib-text-field>
+      </div>
+    </div>
+  </ng-container>
+  <!-- Technical security -->
+</ng-container>
+
+<lib-attributes-checkbox
+  *ngIf="openedPopup === 'checkbox'"
+  [selectedAttribute]="selectedAttribute"
+  (onSelectedAttributes)="close($event)"
+></lib-attributes-checkbox>

package/projects/vx-workflow-engine/src/lib/workflow/shared/components/attributes/attributes.component.less

@@ -0,0 +1,28 @@
+.custom-label {
+  background: #747576;
+  border-radius: 0.125rem;
+  position: relative;
+  z-index: 1;
+
+  &:before {
+    background: #f1f1f1;
+    content: "";
+    position: absolute;
+    top: 0.5rem;
+    left: 5.25rem;
+    width: 23.25rem;
+    height: 1px;
+    z-index: -1;
+  }
+
+  &::after {
+    background: #f1f1f1;
+    content: "";
+    position: absolute;
+    top: 0.5rem;
+    left: -2.5rem;
+    width: 2.5rem;
+    height: 1px;
+    z-index: -1;
+  }
+}

package/projects/vx-workflow-engine/src/lib/workflow/shared/components/attributes/attributes.component.ts

@@ -0,0 +1,112 @@
+import { Component, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PopoverModule } from '../../../../ui-kit/popover/popover.module';
+import { TooltipModule } from '../../../../ui-kit/tooltip/tooltip.module';
+import { FormgroupModule } from '../../../../ui-kit/formgroup/formgroup.module';
+import { VCDatePickerComponent } from './date-picker/date-picker.component';
+import { Attributes } from '../../interfaces/add-grc';
+import { LINKS } from '../../constants/cdn-link.constant';
+import { AttributesTextBoxComponent } from './attributes-text-box/attributes-text-box.component';
+import { TextFieldIconComponent } from '../text-field-icon/text-field-icon.component';
+import { AttributesDropdownComponent } from './attributes-dropdown/attributes-dropdown.component';
+import { AttributesCheckboxComponent } from './attributes-checkbox/attributes-checkbox.component';
+import { TextFieldComponent } from '../text-field/text-field.component';
+import { WorkflowPipesModule } from '../../workflow-pipes/workflow-pipes.module';
+import { EditModeComponent } from '../edit-mode/edit-mode.component';
+import { GrcService } from '../../services/grc.service';
+import { VALIDATION_MESSAGE } from '../../constants/validation-message.constant';
+
+@Component({
+  selector: 'lib-attributes',
+  standalone: true,
+  imports: [
+    CommonModule,
+    PopoverModule,
+    TooltipModule,
+    FormgroupModule,
+    VCDatePickerComponent,
+    AttributesTextBoxComponent,
+    TextFieldIconComponent,
+    AttributesDropdownComponent,
+    AttributesCheckboxComponent,
+    TextFieldComponent,
+    WorkflowPipesModule,
+    EditModeComponent,
+  ],
+  templateUrl: './attributes.component.html',
+  styleUrls: ['./attributes.component.less', '../../../../forms.less'],
+  inputs: ['attributesInfo', 'isFormSubmitted', 'disabled'],
+  outputs: ['onAttributesSelection', 'onClick'],
+})
+export class AttributesComponent implements OnInit {
+  VALIDATION_MESSAGE: any = VALIDATION_MESSAGE;
+
+  attributesInfo: Attributes = {
+    name: 'Assets',
+    description: 'Credit was comes in, Debit what goes out',
+    value: 1,
+    attributes: [],
+  };
+  CDN_LINK = LINKS;
+  openedPopup: string = '';
+  selectedAttribute: any;
+  currentIndex: number = -1;
+  isFormSubmitted: boolean = false;
+  disabled: boolean = false;
+  multiPlaceholderText: string = 'Select the relevant option';
+
+  onAttributesSelection: EventEmitter<any> = new EventEmitter();
+  onClick: EventEmitter<any> = new EventEmitter();
+
+  constructor(private grcService: GrcService) {}
+
+  ngOnInit(): void {}
+
+  onDataSelection = (data: any, index: number) => {
+    this.attributesInfo.attributes[index].choices = data;
+    this.onAttributesSelection.emit(this.attributesInfo);
+  };
+
+  /* The `onPopupOpen` function is a method in the `AttributesComponent` class. It is used to handle the
+event when a popup is opened for a specific attribute. */
+  onPopupOpen = (type: string, data: any, index: number) => {
+    this.selectedAttribute = JSON.parse(JSON.stringify(data));
+    this.openedPopup = type;
+    this.currentIndex = index;
+    if (['checkbox'].includes(type)) {
+      this.onClick.emit(true);
+    }
+  };
+
+  /**
+   * The close function updates the attributesInfo, openedPopup, currentIndex, and selectedAttribute
+   * properties.
+   * @param {any} event - The event parameter is an object that represents the event that triggered the
+   * close function. It could be any type of event, such as a mouse click or a keyboard event.
+   */
+  close(event: any) {
+    if (event) {
+      this.attributesInfo.attributes[this.currentIndex] = event;
+    }
+    this.openedPopup = '';
+    this.currentIndex = -1;
+    this.selectedAttribute = null;
+    this.onClick.emit(false);
+  }
+
+  onRemoveData(removedInfo: any, index: number) {
+    console.log('removedInfo ==>', removedInfo, index);
+    if (
+      this.attributesInfo.attributes[index]?.hasOther &&
+      removedInfo?.data?.item_name?.toLowerCase() === 'other'
+    ) {
+      this.attributesInfo.attributes[index].is_other_selected = false;
+      return;
+    }
+    const INDEX = this.attributesInfo.attributes[index].choices.findIndex(
+      (choice: any) => choice.title === removedInfo.data.title
+    );
+    this.attributesInfo.attributes[index].choices[INDEX].is_selected = false;
+    this.onAttributesSelection.emit(this.attributesInfo);
+  }
+}

package/projects/vx-workflow-engine/src/lib/workflow/shared/components/attributes/date-picker/date-picker.component.ts

@@ -0,0 +1,81 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DatePickerComponent, DpDatePickerModule } from 'ng2-date-picker';
+import { FormsModule } from '@angular/forms';
+import { DatePickerConfig } from '../../../interfaces/add-grc';
+
+@Component({
+  selector: 'lib-date-picker',
+  standalone: true,
+  imports: [CommonModule, DpDatePickerModule, FormsModule],
+  template: `
+    <div class="vx-form-group">
+      <label class="vx-control-panel">{{ valueDetails?.title }}</label>
+      <div class="date-time-picker">
+        <div class="picker-group">
+          <input
+            class="selectBoxEnable"
+            type="text"
+            readonly
+            placeholder="Select a date"
+            [value]="
+              valueDetails?.choices[0].value !== ''
+                ? (valueDetails?.choices[0].value | date : 'dd MMM yyyy')
+                : 'Select a date'
+            "
+            (click)="openDatePicker()"
+          />
+          <i class="icons">&#xe92d;</i>
+          <dp-date-picker
+            #datePicker
+            (onSelect)="
+              datePickerOverlay = false;
+              closeDatePicker($event);
+              removeError('issueDueDate')
+            "
+            [config]="dateConfig"
+            [(ngModel)]="value"
+          >
+          </dp-date-picker>
+          <div
+            class="vx-overlay"
+            (click)="closeDatePicker($event)"
+            *ngIf="datePickerOverlay"
+          ></div>
+        </div>
+      </div>
+    </div>
+  `,
+  styleUrls: ['../../../../../forms.less'],
+  inputs: ['valueDetails'],
+})
+export class VCDatePickerComponent implements OnInit {
+  value: any = new Date();
+  datePickerOverlay: boolean = false;
+  valueDetails!: any;
+  dateConfig: DatePickerConfig = {
+    disableKeypress: true,
+    format: 'DD MMM YYYY',
+    unSelectOnClick: true,
+    openOnClick: false,
+    openOnFocus: false,
+  };
+
+  @ViewChild('datePicker') datePicker!: DatePickerComponent;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  openDatePicker = () => {
+    this.datePicker.api.open();
+    this.datePickerOverlay = true;
+  };
+
+  closeDatePicker = (event: any) => {
+    this.valueDetails.choices[0].value = event?.date?._d.toISOString();
+    this.datePicker.api.close();
+    this.datePickerOverlay = false;
+  };
+  removeError(field: string) {}
+}

package/projects/vx-workflow-engine/src/lib/workflow/shared/components/edit-mode/edit-mode.component.ts

@@ -0,0 +1,129 @@
+import { Component, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PopoverModule } from '../../../../ui-kit/popover/popover.module';
+import { TooltipModule } from '../../../../ui-kit/tooltip/tooltip.module';
+
+@Component({
+  selector: 'lib-edit-mode',
+  standalone: true,
+  imports: [CommonModule, PopoverModule, TooltipModule],
+  inputs: [
+    'selectedData',
+    'type',
+    'nonRemovableIds',
+    'isMultiple',
+    'countColor',
+    'nameDisplayKey',
+  ],
+  outputs: ['isOnEdit', 'onRemoveData'],
+  template: `
+    <div
+      *ngIf="selectedData?.length"
+      class="selected"
+      [class.vx-mb-2]="isMultiple"
+    >
+      <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
+        <i
+          *ngIf="
+            type !== 'text' &&
+            !nonRemovableIds.includes(selectedData[0]?.item_id)
+          "
+          (click)="removeItem(0)"
+          class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+          >&#xe9ae;</i
+        >
+        <ng-content [select]="'GRC_TYPE'"></ng-content>
+
+        <span
+          class="chipName vx-fs-11 vx-label-txt"
+          [appTooltip]="
+            selectedData[0]?.item_name ??
+            selectedData[0]?.name ??
+            selectedData[0][nameDisplayKey]
+          "
+          placement="bottom-left"
+          delay="0"
+          type="black"
+          [tooltipMandatory]="false"
+          >{{
+            selectedData[0]?.item_name ??
+              selectedData[0]?.name ??
+              selectedData[0][nameDisplayKey]
+          }}</span
+        >
+        <button
+          *ngIf="selectedData.length > 1"
+          class="countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4"
+          [ngClass]="countColor"
+          appPopover
+          (click)="selectedList.popover()"
+          placement="right"
+        >
+          +{{ selectedData?.length - 1 }}
+        </button>
+      </div>
+      <button class="edit" type="button" (click)="isOnEdit.emit()">
+        <i class="icons">&#xe9ba;</i> Edit
+      </button>
+    </div>
+    <app-popover #selectedList [dontCloseonClick]="true">
+      <div class="wf-action-list">
+        <ul class="action-item">
+          <li
+            *ngFor="
+              let data of selectedData | slice : 1;
+              let i = index;
+              trackBy: identify
+            "
+          >
+            <div class="avatar-card">
+              <span
+                class="value"
+                [appTooltip]="
+                  data?.item_name ?? data?.name ?? data[nameDisplayKey]
+                "
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+              >
+                <i
+                  *ngIf="!nonRemovableIds.includes(data?.item_id)"
+                  (click)="removeItem(i + 1)"
+                  class="icons"
+                  >&#xe90d;</i
+                >
+                {{ data?.item_name ?? data?.name ?? data[nameDisplayKey] }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </app-popover>
+  `,
+})
+export class EditModeComponent implements OnInit {
+  selectedData: Array<any> = [];
+  type: string = '';
+  nonRemovableIds: Array<number> = [];
+  isMultiple: boolean = false;
+  countColor: string = '';
+  nameDisplayKey: string = '';
+
+  isOnEdit: EventEmitter<any> = new EventEmitter();
+  onRemoveData: EventEmitter<any> = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit(): void {
+    console.log('selectedData', this.selectedData);
+  }
+
+  removeItem(index: number) {
+    this.onRemoveData.emit({ index, data: this.selectedData[index] });
+  }
+
+  identify(index: any, item: any) {
+    return item?.item_name ?? item?.name;
+  }
+}

package/projects/vx-workflow-engine/src/lib/workflow/shared/components/grc-category-listing/grc-category-listing.component.html

@@ -0,0 +1,25 @@
+<div class="grc-category-listing">
+    <div class="top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center">
+        <app-cs-checkbox *ngIf="false" [ngValue]="true"></app-cs-checkbox>
+        <app-cs-checkbox-indeterminate *ngIf="false"></app-cs-checkbox-indeterminate>
+        <div class="vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4">{{headerText}}</div>
+    </div>
+    <div class="grc-category-listing-inner">
+        <div class="category-table-body" [class.with-pagination]="totalPage > 1">
+            <div class="category-table-row cursor-pointer" *ngFor="let category of categories; let i = index" [class.active]="selectedCategoryIds?.includes(category?.category_id)" [class.select]="activeCategoryId === category?.category_id" (click)="onCategoryClick(category, 'view')">
+                <div class="category-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial">
+                    <div class="sr-no" [appTooltip]="i + (categoryFrom || (perPageLimit * (currentPage - 1) + 1))" placement="bottom" delay="0" type="black" [tooltipMandatory]="true">{{(categoryFrom || (perPageLimit * (currentPage - 1) + 1)) + i}}</div>
+                    <app-cs-checkbox *ngIf="false" [ngValue]="selectedCategoryIds?.includes(category?.category_id)" (ngValueChange)="getSelectedCategory(category,$event)"></app-cs-checkbox>
+                </div>
+                <div class="category-table-column vx-pr-1 vx-d-flex vx-align-center category-name">
+                    <div class="value vx-fs-12 vx-label-txt vx-pr-5" [appTooltip]="category[nameDisplayKey]" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{category[nameDisplayKey]}}</div>
+                </div>
+                <div class="category-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action">
+                    <i *ngIf="selectedCategoryIds?.includes(category?.category_id) || selectedCategoryIds?.includes(category?._id)" class="icons grc-tick vx-fs-14">&#xe93d;</i>
+                    <button class="arrow-btn vx-fs-12 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center"><i class="icons">&#xe970;</i></button>
+                </div>
+            </div>
+        </div>
+        <app-pagination *ngIf="totalPage > 1" [start]="categoryFrom || (perPageLimit * (currentPage - 1) + 1)" [end]="categoryEnd || (perPageLimit * currentPage)" [total]="totalCategory" [pageCount]="totalPage" [currentPage]="currentPage" (selectedPage)="changePage($event)"></app-pagination>
+    </div>
+</div>