vcomply-workflow-engine 2.0.4 → 2.0.167

package/projects/vx-workflow-engine/src/lib/sharedComponents/radio-list/radio-list.component.html

@@ -0,0 +1,51 @@
+<div class="radio-list" [class.animate]="animation">
+  <div class="radio-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4">
+    <div class="vx-fs-14 vx-fw-500 vx-label-txt">{{config?.panelTitle}}</div>
+    <!-- <button class="radio-list-close">
+      <i class="icons" (click)="close()">&#xe90d;</i>
+    </button> -->
+  </div>
+
+  <div class="radio-list-body">
+    <div class="search-block vx-mb-2" *ngIf="config?.searchEnabled">
+      <i class="icons">&#xe90b;</i>
+      <input type="text" [placeholder]="config?.searchPlaceholder" [(ngModel)]="searchItem" />
+    </div>
+    <ng-container *ngIf="(itemsList | search:searchItem:displayKey) as searchList">
+      <div class="categories vx-mb-4" *ngIf="searchList?.length > 0">
+        <ul [class.two-column]="twoColumn" *ngIf="searchList?.length > 0">
+          <li *ngFor="let item of searchList">
+            <ng-container *ngIf="(item[displayKey]|dataType) !== 'object' ">
+              <app-cs-radio [name]="'radio-selector'" (checkedEvent)="selectItem(item[identifierKey])"
+                [name]="'rx-category'" [checked]="selectedItems.includes(item[identifierKey])"
+                [appTooltip]="tooltipKey ? item[tooltipKey]: item[displayKey]" placement="bottom-left"
+                delay="0" [tooltipMandatory]="true">
+                {{item[displayKey]}}
+              </app-cs-radio>
+            </ng-container>
+            <ng-container *ngIf="(item[displayKey]|dataType) === 'object' ">
+              <app-cs-radio [name]="'radio-selector'" (checkedEvent)="selectItem(item[identifierKey])"
+                [checked]="selectedItems.includes(item[identifierKey])">
+
+                <ul class="category-within-list" #listBlock>
+                  <li *ngFor="let child of item[displayKey]" [style.max-width.px]="blockWidth / item[displayKey].length">
+                    <span [appTooltip]="child" placement="bottom-left" delay="0">{{child}}</span>
+                  </li>
+                </ul>
+              </app-cs-radio>
+            </ng-container>
+          </li>
+        </ul>
+      </div>
+      <app-no-data *ngIf="searchList?.length === 0" [noDataImage]="'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'"  [noDataText]="config?.noDataText?.length > 0 ? config?.noDataText:'No data to display'"></app-no-data>
+    </ng-container>
+
+    <app-floating-bar [selectedData]="selectedItems|listMapper:itemsList:identifierKey" [displayElementKey]="displayKey"
+    [singularText]="config?.floatingTextSingular"
+    [pluralText]="config?.floatingTextPlural ?config?.floatingTextPlural:'Users selected'"
+       (closeEvent)="save()"
+      (closeList)="close()" (deleteEvent)="deleteItem($event)"
+      [isDisabled]="selectedItems.length === 0 || itemsList.length === 0 ">
+    </app-floating-bar>
+  </div>
+</div>

package/projects/vx-workflow-engine/src/lib/sharedComponents/radio-list/radio-list.component.less

@@ -0,0 +1,233 @@
+@import url("https://cdn.v-comply.com/design-system/css/icons/icons.css");
+@import url("https://cdn.v-comply.com/design-system/css/display/display.css");
+@import url("https://cdn.v-comply.com/design-system/css/alignment/alignment.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/color/color.css");
+@import url("https://cdn.v-comply.com/design-system/css/width/width.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-right.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-right.css");
+
+::ng-deep .radio-list {
+  position: fixed;
+  top: 0;
+  right: 500px;
+  bottom: 0;
+  left: 0;
+
+  &::before {
+      background: #1E5DD3;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 3px;
+  }
+
+  &-head {
+    background: #fbfbfb;
+    height: 2.75rem;
+    border-bottom: 1px solid #f1f1f1;
+  }
+
+  &-close {
+    background: transparent;
+    border    : none;
+    outline   : none;
+    cursor    : pointer;
+    color     : #000000;
+    font-size : 12px;
+    display   : inline-block;
+    padding   : 0;
+  }
+
+  &-body {
+    // padding   : 24px 40px 24px 36px;
+    // background: #ffffff;
+    // height    : calc(100vh - 124px);
+    background: #fff;
+    height: calc(100vh - 2.75rem);
+    padding: 2rem;
+
+    .search-block {
+      position: relative;
+
+      input {
+        height       : 2.75rem;
+        line-height  : 1.5rem;
+        padding      : .5rem 1rem .5rem 2.5rem;
+        outline      : none;
+        border       : 1px solid #7475763f;
+        border-radius: .25rem;
+        width        : 100%;
+        font-size    : 14px;
+        color        : #747576;
+
+        &:focus {
+          border-color: #1e5dd3;
+        }
+      }
+
+      i {
+        position: absolute;
+        left: 1rem;
+        top: 1rem;
+        pointer-events: none;
+        color: #f1f1f1;
+        font-size: 12px;
+      }
+    }
+
+    .categories {
+      height : calc(100vh - 224px);
+      overflow   : hidden;
+      overflow-y: auto;
+
+      ul {
+        padding: 0;
+        margin : 0;
+
+        li {
+          // width     : 100%;
+          padding   : 0 0 1rem;
+          list-style: none;
+
+          app-cs-radio {
+            display: flex;
+
+            label.radio-item {
+              width: 100%;
+
+              span.value {
+                width             : 100%;
+                color: #161b2f;
+                font-size         : 12px;
+                font-weight       : 400;
+                overflow          : hidden;
+                display           : -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+              }
+            }
+
+            label {
+              &.radio-item {
+                span.value {
+                  ul {
+                    padding: 0;
+                    margin : 0;
+
+                    &.category-within-list {
+                      display  : flex;
+                      max-width: 100%;
+
+                      li {
+                        display  : block;
+                        padding  : 0 8px;
+                        position : relative;
+                        max-width: 50%;
+                        width    : auto;
+
+                        &:after {
+                          content  : ">";
+                          position : absolute;
+                          top      : 0;
+                          right    : -3px;
+                          color    : #747576;
+                          font-size: 13px;
+                        }
+
+                        span {
+                          display      : block;
+                          white-space  : nowrap;
+                          overflow     : hidden;
+                          text-overflow: ellipsis;
+                          font-size    : 12px;
+                          color        : #747576;
+                        }
+
+                        &:last-of-type {
+                          &:after {
+                            display: none;
+                          }
+
+                          span {
+                            color: #34AA44;
+                          }
+                        }
+
+                        &:first-of-type {
+                          padding-left: 0;
+
+                          span {
+                            color: #1E5DD3;
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        &.two-column {
+          display  : flex;
+          flex-wrap: wrap;
+          align-items: flex-start;
+
+          li {
+            width        : 50%;
+            padding-right: 20px;
+          }
+        }
+      }
+    }
+
+    app-no-data {
+      .no-data-wrapper {
+        height: calc(100% - 100px) !important;
+      }
+    }
+  }
+
+  &.animate {
+    -webkit-animation: animate-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation        : animate-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    z-index          : -1;
+  }
+}
+
+@-webkit-keyframes animate-right {
+  0% {
+    -webkit-transform: translateX(100%);
+    transform        : translateX(100%);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform        : translateX(0);
+  }
+}
+
+@keyframes animate-right {
+  0% {
+    -webkit-transform: translateX(100%);
+    transform        : translateX(100%);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform        : translateX(0);
+  }
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/radio-list/radio-list.component.ts

@@ -0,0 +1,60 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, AfterViewInit } from '@angular/core';
+
+@Component({
+  selector: 'app-radio-list',
+  templateUrl: './radio-list.component.html',
+  styleUrls: ['./radio-list.component.less']
+})
+export class RadioListComponent implements OnInit,AfterViewInit {
+  @ViewChild('listBlock',{ static: false }) listBlock!: ElementRef;
+  @Input() itemsList: any = [];
+  @Input() selectedItems: any = [];
+  @Input() identifierKey = '';
+  @Input() displayKey = '';
+  @Input() tooltipKey = '';
+  @Input() config !: any;
+  @Input() twoColumn = false;
+  @Output() closeList = new EventEmitter();
+  @Output() saveList = new EventEmitter();
+  animation = true;
+  searchItem = '';
+  blockWidth: any;
+  constructor() { }
+
+  ngOnInit(): void {
+    setTimeout(() => {
+      this.animation = false;
+    }, 300);
+    this.selectedItems = this.arrayToId(this.selectedItems, this.identifierKey);
+    // this.rerenderList();
+
+  }
+
+  ngAfterViewInit(){
+    setTimeout(() => {
+      this.blockWidth = this.listBlock?.nativeElement?.offsetWidth;
+    }, 100);
+  }
+  selectItem(item: any) {
+    this.selectedItems = [];
+    this.selectedItems.push(item);
+  }
+  deleteItem(item: any) {
+    this.selectedItems = [];
+    // this.rerenderList();
+  }
+
+
+  save() {
+    this.saveList.emit(this.selectedItems);
+  }
+
+  close() {
+    this.closeList.emit();
+  }
+
+
+  arrayToId(array: any, identifierKey: any) {
+    return array.map((a: any) => a[identifierKey]);
+  }
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/radio-list-with-pagination/link-treatment-loader/link-treatment-loader.component.html

@@ -0,0 +1,33 @@
+<div class="link-treatment-loader-container">
+  <!-- <div class="link-treatment-tab">
+        <ul>
+            <li><div class="loader"></div></li>
+            <li><div class="loader"></div></li>
+            <li><div class="loader"></div></li>
+            <li><div class="loader"></div></li>
+        </ul>
+    </div> -->
+  <!-- <div class="link-treatment-create-btn">
+        <div class="loader"></div>
+    </div> -->
+  <div class="link-treatment-body">
+    <!-- <div class="search-block">
+            <div class="loader"></div>
+        </div> -->
+    <div class="link-treatment-list">
+      <ul>
+        <li *ngFor="let data of [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">
+          <div class="loader"></div>
+        </li>
+      </ul>
+    </div>
+    <!-- <div class="link-treatment-footer">
+            <div class="left">
+                <div class="loader"></div>
+            </div>
+            <div class="right">
+                <div class="loader"></div>
+            </div>
+        </div> -->
+  </div>
+</div>

package/projects/vx-workflow-engine/src/lib/sharedComponents/radio-list-with-pagination/link-treatment-loader/link-treatment-loader.component.less

@@ -0,0 +1,140 @@
+.link-treatment {
+  &-loader-container {
+    background: #fff;
+  }
+
+  &-tab {
+    background: #fff;
+    padding: 0 20px;
+    position: relative;
+    z-index: 1;
+
+    &::before {
+      background: #dbdbdb;
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      z-index: -1;
+    }
+
+    ul {
+      display: flex;
+      justify-content: space-between;
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        height: 31px;
+        display: flex;
+        align-items: center;
+
+        .loader {
+          background: #f3f3f3;
+          border-radius: 20px;
+          height: 10px;
+          width: 85px;
+        }
+      }
+    }
+  }
+
+  &-create-btn {
+    background: #fff;
+    padding: 20px 20px 0;
+    height: 50px;
+
+    .loader {
+      background: #f3f3f3;
+      border-radius: 3px;
+      height: 30px;
+      width: 500px;
+    }
+  }
+
+  &-body {
+    background: #fff;
+    width: 100%;
+    padding: 10px 20px 20px;
+    height: calc(100vh - 208px);
+
+    .search-block {
+      position: relative;
+
+      .loader {
+        background: #fbfbfb;
+        border: 1px solid #f1f1f1;
+        border-radius: 3px;
+        height: 45px;
+        width: 100%;
+      }
+    }
+  }
+
+  &-list {
+    padding-top: 10px;
+    width: calc(100% + 20px);
+
+    ul {
+      padding: 0;
+      margin: 0;
+      height: calc(100vh - 281px);
+      overflow: auto;
+
+      li {
+        width: 100%;
+        padding: 12px 0 12px 0;
+        list-style: none;
+
+        .loader {
+          background: #f3f3f3;
+          border-radius: 20px;
+          height: 10px;
+          width: 60%;
+        }
+      }
+    }
+  }
+
+  &-footer {
+    height: 50px;
+    background: #f8f8f8;
+    border-top: 1px solid #f1f1f1;
+    padding: 0 20px 0 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 500px;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 2;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .loader {
+        background: #eee;
+        border-radius: 20px;
+        height: 10px;
+        width: 170px;
+      }
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+
+      .loader {
+        background: #eee;
+        border-radius: 5px;
+        height: 30px;
+        width: 90px;
+      }
+    }
+  }
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/radio-list-with-pagination/link-treatment-loader/link-treatment-loader.component.spec.ts

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

package/projects/vx-workflow-engine/src/lib/sharedComponents/radio-list-with-pagination/link-treatment-loader/link-treatment-loader.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-listline-loader',
+  templateUrl: './link-treatment-loader.component.html',
+  styleUrls: ['./link-treatment-loader.component.less'],
+})
+export class LinkTreatmentLoaderComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/radio-list-with-pagination/radio-list.component.html

@@ -0,0 +1,55 @@
+<div class="radio-list" [class.animate]="animation">
+  <div class="radio-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4">
+    <div class="vx-fs-14 vx-fw-500 vx-label-txt">{{config?.panelTitle}}</div>
+    <!-- <button class="radio-list-close">
+      <i class="icons" (click)="close()">&#xe90d;</i>
+    </button> -->
+  </div>
+
+  <div class="radio-list-body">
+    <div class="search-block vx-mb-2" *ngIf="true">
+      <i class="icons">&#xe90b;</i>
+      <input (keydown.enter)="search()" type="text" [placeholder]="config?.searchPlaceholder"  [(ngModel)]="searchKey" />
+    </div>
+   
+    <app-pagination *ngIf="totalPages > 1" [start]="recordStart" [end]="recordEnd" [total]="totalRecords" [pageCount]="totalPages" [currentPage]="currentPage" (selectedPage)="pageChanged($event)"></app-pagination>
+
+    <!-- it is visible when list data is available -->
+    <ng-container *ngIf="!loading && list?.length" >
+      <div class="categories vx-mb-4" [class.mt-2]="totalPages === 0">
+        <app-cs-checkbox [ngValue]="checkSelectAll()" (ngValueChange)="selectAll($event)">
+          <span class="vx-fw-600 vx-label-txt">{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</span>
+        </app-cs-checkbox>
+      </div>
+      <ul class="categories-list vx-mb-4" [class.with-pagination]="totalPages > 1">
+        <li *ngFor="let item of list;let i = index">
+          <!-- [ngValue]="selectedIds.includes(category[categoryIdKey])" -->
+          <app-cs-checkbox  
+          [ngValue]="selectedIds?.includes(item[config?.identifierKey])"
+          (ngValueChange)="itemSelected($event,item)"
+          [appTooltip]="item[config.displayKey]" placement="bottom-left"
+          delay="0" [tooltipMandatory]="true">
+          <div class="name">{{item[config.displayKey]}}</div>
+          <div class="within vx-d-flex vx-align-center vx-justify-start vx-mt-1">
+            <div class="block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2" *ngIf="item[config?.parentDisplayKey] != ''">WITHIN</div>
+            <div class="data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5" [appTooltip]="'test > test'" placement="bottom-left" delay="0" [tooltipMandatory]="false">{{item[config?.parentDisplayKey]}}</div>
+          </div>
+        </app-cs-checkbox>
+        </li>
+      </ul>
+    </ng-container>
+    <!-- It is visible when the list items are getting loaded -->
+    <app-listline-loader *ngIf="loading"></app-listline-loader>
+    <ng-container *ngIf="!loading && list?.length === 0">
+      <app-no-data  [noDataImage]="'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'"  [noDataText]="config?.noDataText?.length > 0 ? config?.noDataText:'No data to display'"></app-no-data>
+    </ng-container>
+    
+    <app-floating-bar [selectedData]="selectedList" [displayElementKey]="config?.displayKey"
+    [singularText]="config?.entitySingular"
+    [pluralText]="config?.entityPlural ?config?.entityPlural:'Users selected'"
+      (closeEvent)="save()"
+      (closeList)="close()" (deleteEvent)="deleteItem($event)"
+      [isDisabled]="selectedList.length === 0 || list?.length === 0 ">
+    </app-floating-bar>
+  </div>
+</div>