vc-create-dashboard 3.0.5 → 3.0.61

package/src/lib/create-dashboard-container/form-group/form-group.component.less

@@ -0,0 +1,450 @@
+@import url('https://cdn.v-comply.com/design-system/css/mixin/mixin.css');
+@import url('https://cdn.v-comply.com/design-system/css/color/color.css');
+@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/dialog/dialog.css');
+@import url('https://cdn.v-comply.com/design-system/css/button/button.css');
+@import url('https://cdn.v-comply.com/design-system/css/text/text.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-right.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/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-right.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/alignment/alignment.css');
+@import url('https://cdn.v-comply.com/design-system/css/width/width.css');
+@import url('https://cdn.v-comply.com/design-system/css/animate/animation.css');
+@import url('https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css');
+@import url('https://cdn.v-comply.com/design-system/css/forms/forms.css');
+
+::ng-deep .form-group {
+    .vx-dialog-body-container {
+        padding         : 36px 28px 0 40px !important;
+        height          : calc(100vh - 50px);
+        overflow        : auto;
+        margin-left     : -22px;
+        background-color: transparent;
+        position        : relative;
+        border-radius   : 0 0 0 30px;
+        background      : transparent;
+
+        .form-group-row {
+            display: flex;
+
+            .image {
+                width       : 40px;
+                height      : 40px;
+                margin-left : -38px;
+                margin-right: 20px;
+                margin-top  : 28px;
+
+                img {
+                    width: 100%;
+                }
+            }
+
+            .form {
+                width: 100%;
+
+                .vx-form-group {
+                    input {
+                        &+marx-editor,
+                        &+vcomply-editor {
+                            margin-top: 8px;
+                            display   : block;
+                        }
+
+                        &:hover {
+                            border-color: #1e5dd3;
+                            box-shadow  : 0 0 5px #1e5dd345;
+                        }
+                    }
+
+                    .selectbox {
+                        &:after {
+                            border-left: none;
+                            border-bottom: 1px solid #707070;
+                            border-right: 1px solid #707070;
+                            border-top: none;
+                            content: "";
+                            display: inline-block;
+                            right: 15px;
+                            position: absolute;
+                            top: calc(50% + 8px);
+                            width: 5px;
+                            height: 5px;
+                            transform: rotate(45deg);
+                            // content     : "";
+                            // border-top  : 4px solid #707070;
+                            // border-right: 4px solid transparent;
+                            // border-left : 4px solid transparent;
+                            // position    : absolute;
+                            // right       : 16px;
+                            // top         : calc(50% - 2px);
+                        }
+
+                        &:hover {
+                            .custom-input {
+                                border-color: #1e5dd3;
+                                box-shadow  : 0 0 5px #1e5dd345;
+                            }
+                        }
+                    }
+
+                    .selected {
+                        .left {
+                            width  : auto;
+                            display: flex;
+                        }
+
+                        .chip-container {
+                            width: auto;
+                        }
+                    }
+
+                    .vx-input-group {
+                        display : flex;
+                        position: relative;
+
+                        span.counter {
+                            background   : transparent;
+                            color        : #161B2F;
+                            font-size    : 9px;
+                            font-weight  : 500;
+                            position     : absolute;
+                            top          : 0px;
+                            right        : 0px;
+                            border-radius: 3px;
+                            height       : 16px;
+                            text-align   : center;
+                            line-height  : 16px;
+                            padding      : 0 2px;
+                        }
+                        marx-editor,
+                        vcomply-editor {
+                            width: 100%;
+                        }
+                        &.vx-input-group {                            
+                            margin-top: 8px;
+                        }
+                    }
+                }
+
+                marx-editor,
+                vcomply-editor {
+                    display   : block;
+
+                    .editor-container {
+                        border-radius: 4px;
+                        border-color : #DBDBDB;
+
+                        &:focus-within,
+                        &:hover {
+                            border-color: #1e5dd3;
+
+                            .editor-tools {
+                                border-top-color: #1e5dd3 !important;
+                                transition      : none;
+                            }
+                        }
+
+                        .editable-block {
+                            min-height : 60px;
+                            padding    : 11px 15px;
+                            line-height: 20px;
+                            font-size  : 13px;
+                            color      : #747576;
+                            font-weight: 400;
+                            transition : all 0.2s ease-in-out;
+                            width      : 100%;
+                            max-height : 90px;
+
+                            &:before {
+                                @media not all and (min-resolution: 0.001dpcm) {
+                                    @supports (-webkit-appearance: none) {
+                                        opacity: 0.72;
+                                    }
+                                }
+                            }
+                        }
+
+                        .editor-tools {
+                            border-color : #DBDBDB;
+                            border-radius: 0 0 2px 2px;
+                            transition   : none;
+
+                            app-editor-menu {
+                                .editor-menu {
+                                    .col {
+                                        button {
+                                            height : 22px !important;
+                                            width  : 22px !important;
+                                            padding: 0 5px;
+
+                                            svg {
+                                                height: 22px;
+                                                width : 12px;
+                                            }
+
+                                            &.submit {
+                                                width          : 80px !important;
+                                                line-height    : 22px;
+                                                justify-content: center;
+                                            }
+                                        }
+
+                                        .popover {
+                                            &.small {
+                                                ul.option-list {
+                                                    li {
+                                                        button {
+                                                            width : 100% !important;
+                                                            height: auto !important;
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .custom-input {
+                    height       : 2.5rem;
+                    border-radius: .25rem;
+                    border       : 1px solid #DBDBDB;
+                    background   : #FFFFFF;
+                    outline      : none;
+                    padding      : .1875rem .75rem;
+                    line-height  : 1.25rem;
+                    font-size    : 13px;
+                    color        : #747576;
+                    font-weight  : 400;
+                    transition   : all 0.2s ease-in-out;
+                    width        : 100%;
+                    cursor       : pointer;
+
+                    &:empty:not(:focus):before {
+                        content       : attr(aria-placeholder);
+                        line-height   : 16px;
+                        font-size     : 12px;
+                        width         : 94%;
+                        display       : block;
+                        pointer-events: none;
+                    }
+                }
+
+                label.vx-control-panel {
+                    i {
+                        font-size  : 12px;
+                        color      : #1E5DD3;
+                        margin-left: 7px;
+                        cursor     : pointer;
+                    }
+                }
+
+                .vx-control-panel-sub-label {
+                    color         : #747576;
+                    font-size     : .6875rem;
+                    font-weight   : 400;
+                    line-height   : 1rem;
+                    margin-bottom : .5rem;
+                    display       : block;
+                    text-transform: none;
+                    width         : 100%;
+                    margin-top    : 0;
+
+                    span.required {
+                        color: #EB2424;
+                    }
+                }
+
+                label.vx-control-panel+.vx-control-panel-sub-label {
+                    margin-top: -.5rem;
+                }
+
+                .radio-group {
+                    app-cs-radio {
+                        margin-top: 4px;
+                        display   : block;
+                        width     : 100%;
+
+                        label.radio-item {
+                            width   : 100%;
+                            position: relative;
+
+                            span {
+                                &.radio {
+                                    position: absolute;
+                                    top     : 17px;
+                                    left    : 12px;
+                                }
+
+                                &.value {
+                                    font-size      : 11px;
+                                    text-transform : uppercase;
+                                    border         : 1px solid #DBDBDB;
+                                    border-radius  : 4px;
+                                    padding        : 8px 8px 8px 36px;
+                                    width          : 100%;
+                                    display        : flex;
+                                    justify-content: space-between;
+                                    margin         : 0;
+                                    max-width      : 100%;
+                                    font-weight    : 500;
+                                    color          : #707070;
+
+                                    i {
+                                        font-size: 12px;
+                                        color    : #1E5DD3;
+                                    }
+                                }
+                            }
+
+                            svg {
+                                position: absolute;
+                                top     : 17px;
+                                left    : 12px;
+                            }
+
+                            input:checked~span.value {
+                                background  : #EEFCF0;
+                                border-color: #34AA44;
+                            }
+                        }
+
+                        &+app-cs-radio {
+                            margin-top: .5rem;
+                        }
+                    }
+                }
+
+                .date-select {
+                    position: relative;
+                    width   : calc(50% - .25rem);
+
+                    input {
+                        padding-left: 36px !important;
+                    }
+
+                    i {
+                        display        : flex;
+                        justify-content: center;
+                        align-items    : center;
+                        height         : 39px;
+                        width          : 14px;
+                        position       : absolute;
+                        left           : 12px;
+                        top            : 0;
+                        color          : #BCBCBC;
+                        font-size      : 14px;
+                        pointer-events : none;
+                        z-index        : 1;
+                    }
+                }
+
+                label.vx-control-panel {
+                    span.sub-label {
+                        color         : #747576;
+                        font-size     : .6875rem;
+                        font-weight   : 400;
+                        line-height   : 1rem;
+                        text-transform: none;
+                        width         : 100%;
+                    }
+                }
+            }
+
+            &.active {
+                .image {
+                    filter: grayscale(0);
+
+                    &:before {
+                        display: none;
+                    }
+                }
+
+                .form {
+                    opacity: 1;
+                    filter : grayscale(0);
+
+                    .custom-input,
+                    input[type=text] {
+                        border-color: #1e5dd3;
+                        box-shadow  : 0 0 5px #1e5dd345;
+                    }
+                }
+            }
+        }
+
+        &:after {
+            content       : "";
+            width         : 100%;
+            display       : block;
+            height        : 30px;
+            position      : sticky;
+            right         : 0;
+            bottom        : 0px;
+            left          : 0;
+            z-index       : 6;
+            background    : -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 22%, rgba(255, 255, 255, 1) 100%);
+            background    : -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 22%, rgba(255, 255, 255, 1) 100%);
+            background    : linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 22%, rgba(255, 255, 255, 1) 100%);
+            filter        : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
+            // margin-left: -40px;
+        }
+
+    }
+
+    .button-block {
+        position: relative;
+        z-index : 2;
+
+        button {
+            height     : 50px;
+            line-height: 48px !important;
+
+            &:disabled {
+                opacity: .3;
+            }
+        }
+    }
+
+    &.disabled {
+        pointer-events: none;
+        z-index       : 2;
+
+        .image {
+            position: relative;
+            filter  : grayscale(1);
+
+            &::before {
+                content   : "";
+                position  : absolute;
+                top       : 0;
+                right     : 0;
+                bottom    : 0;
+                left      : 0;
+                background: #FFFFFF;
+                opacity   : 0.7;
+            }
+        }
+
+        .form {
+            opacity: 0.3;
+            filter : grayscale(1);
+        }
+    }
+}
+
+// Editor
+::ng-deep marx-modal .popup-modal-background {
+    background-color: #161B2FCC !important;
+}

package/src/lib/create-dashboard-container/form-group/form-group.component.spec.ts

@@ -0,0 +1,90 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import * as dayjs from 'dayjs';
+import * as customParseFormat from 'dayjs/plugin/customParseFormat';
+dayjs.extend(customParseFormat);
+import { FormGroupComponent } from './form-group.component';
+import { DialogService } from '../../ui-kit/dialog/dialog.service';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'dp-date-picker',
+  template: ''
+})
+export class DatePickerMock {
+  api = {
+    close : () => {}
+  }
+}
+
+describe('FormGroupComponent', () => {
+  let component: FormGroupComponent;
+  let fixture: ComponentFixture<FormGroupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FormGroupComponent, DatePickerMock ],
+      providers: [DialogService]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('verify fields should return false if dashboard name is empty', () => {
+    let status = component.verifyFields();
+    expect(status).toBeFalse();
+    expect(component.dashboardNameError).toEqual(component.fieldEmptyErrorMessage);
+  })
+
+  it('verify fields should return false if dashboard name is more than 30 char', () => {
+    component.dashboardName = new Array(32).join('x');
+    let status = component.verifyFields();
+    expect(status).toBeFalse();
+    expect(component.dashboardNameError).toEqual(component.fieldLimitExceededErrorMessage.replace('XYZ', '30'));
+  })
+
+  it('verify fields should return false if dashboard description is more than 250 char', () => {
+    component.dashboardName = 'test';
+    component.dashboardDescriptionText = new Array(252).join('x');
+    let status = component.verifyFields();
+    expect(status).toBeFalse();
+    expect(component.dashboardDescriptionError).toEqual(component.fieldLimitExceededErrorMessage.replace('XYZ', '250'));
+  })
+
+  it('should clear To Date if a later From Date is chosen', () => {
+    component.selectedFromDate = dayjs("12-26-2021", "MM-DD-YYYY");
+    component.selectedToDate = dayjs("12-25-2021", "MM-DD-YYYY");
+    component.closeFromDatePicker();
+    expect(component.selectedToDate).toBeUndefined();
+  });
+
+
+  it('display Criteria Selected value assigned', () => {
+    component.displayCriteriaSelected(true, 'BOTH_RC_AND_CATEGORY');
+    expect(component.displayCriteria).toEqual('BOTH_RC_AND_CATEGORY');
+  });
+
+  it('display Criteria Selected value assigned', () => {
+    component.displayCriteriaSelected(true, 'RC_OR_CATEGORY');
+    expect(component.displayCriteria).toEqual('RC_OR_CATEGORY');
+  });
+
+  it('display Criteria Selected value assigned', () => {
+    component.displayCriteriaSelected(true, 'RC_OR_CATEGORY');
+    expect(component.displayCriteria).toEqual('RC_OR_CATEGORY');
+  });
+
+  it('close Date Picker', () => {
+    component.closeToDatePicker();
+    expect(component.datePickerOverlay).toBeFalse();
+  });
+
+});

package/src/lib/create-dashboard-container/form-group/form-group.component.ts

@@ -0,0 +1,163 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { DatePickerComponent, IDatePickerConfig } from 'ng2-date-picker';
+import { DialogService } from '../../ui-kit/dialog/dialog.service';
+import { EditorConfig } from '@vcomply/editor';
+import { ASSETS } from '../constants/assets.constant';
+
+@Component({
+  selector: 'app-form-group',
+  templateUrl: './form-group.component.html',
+  styleUrls: ['./form-group.component.less'],
+})
+export class FormGroupComponent implements OnInit {
+  @Output() openCategoryList = new EventEmitter<string>();
+  @Output() openResponsibilityCenterList = new EventEmitter<string>();
+  @Output() openWhoCanViewThis = new EventEmitter<string>();
+  @Output() closeCreateDashboard = new EventEmitter<string>();
+  @Output() openFrequency = new EventEmitter<string>();
+  @Input() disabled!: boolean;
+
+  @ViewChild('fromDatePicker') fromDatePicker!: DatePickerComponent;
+  @ViewChild('toDatePicker') toDatePicker!: DatePickerComponent;
+  datePickerOverlay = false;
+  selectedFromDate!: any;
+  selectedToDate!: any;
+  dashboardName!: any;
+  dashboardDescriptionText!: any;
+  fieldEmptyErrorMessage: string = 'Enter a value for this input box.';
+  fieldLimitExceededErrorMessage: string =
+    'You have exceeded the maximum character limit of XYZ characters.';
+  dashboardNameNotUniqueErrorMessage: string =
+    'A dashboard with this name already exists. Specify a different name for the dashboard.';
+  dashboardNameError!: string;
+  dashboardDescriptionError!: string;
+  displayCriteria!: string;
+  ASSETS: any = ASSETS;
+
+  constructor(private dialog: DialogService) {}
+
+  dashboardDescription: EditorConfig = {
+    placeholder: 'Description (Max limit: 250 characters)',
+    mode: 'prime',
+    id: 'description',
+  };
+
+  fromDatePickerConfig: IDatePickerConfig = {
+    min: this.getCurrentDate(),
+  };
+
+  toDatePickerConfig: IDatePickerConfig = {};
+
+  ngOnInit(): void {}
+
+  openFromDatePicker() {
+    this.fromDatePicker.api.open();
+    this.datePickerOverlay = true;
+  }
+
+  openToDatePicker() {
+    this.toDatePicker.api.open();
+    this.datePickerOverlay = true;
+  }
+
+  closeFromDatePicker() {
+    let minToDate = this.selectedFromDate?.clone()?.add(1, 'days');
+    this.toDatePickerConfig = { min: minToDate, minTime: minToDate };
+
+    if (this.selectedToDate && minToDate.diff(this.selectedToDate) > 0) {
+      this.selectedToDate = undefined;
+    }
+
+    this.fromDatePicker.api.close();
+    this.datePickerOverlay = false;
+  }
+
+  closeToDatePicker() {
+    this.toDatePicker.api.close();
+    this.datePickerOverlay = false;
+  }
+
+  animateImage() {
+    const circleImage = document.getElementsByClassName('image');
+    console.log(circleImage);
+  }
+
+  selectWhoCanViewThis() {
+    this.openWhoCanViewThis.emit();
+  }
+
+  selectResponsibilityCenter() {
+    this.openResponsibilityCenterList.emit();
+  }
+
+  selectCategories() {
+    this.openCategoryList.emit();
+  }
+
+  selectFrequency() {
+    this.openFrequency.emit();
+  }
+
+  configureDashboard() {
+    let fieldsStatus = this.verifyFields();
+    // if(fieldsStatus) {
+    //   this.closeCreateDashboard.emit();
+    //   const ref = this.dialog.open(ConfigureWidgetsComponent, {
+    //     data: {},
+    //     position: 'CENTER',
+    //     pointer: 'none'
+    //   });
+    // }
+  }
+
+  verifyFields() {
+    let allFieldsValid = true;
+    this.dashboardNameError = '';
+    this.dashboardDescriptionError = '';
+
+    if (
+      this.dashboardName === null ||
+      this.dashboardName === undefined ||
+      this.dashboardName === ''
+    ) {
+      this.dashboardNameError = this.fieldEmptyErrorMessage;
+      allFieldsValid = false;
+    } else if (this.dashboardName.length > 30) {
+      this.dashboardNameError = this.fieldLimitExceededErrorMessage.replace(
+        'XYZ',
+        '30'
+      );
+      allFieldsValid = false;
+    } else if (
+      this.dashboardDescriptionText === null ||
+      this.dashboardDescriptionText === undefined ||
+      this.dashboardDescriptionText === ''
+    ) {
+      this.dashboardDescriptionError = this.fieldEmptyErrorMessage;
+      allFieldsValid = false;
+    } else if (this.dashboardDescriptionText.length > 250) {
+      this.dashboardDescriptionError =
+        this.fieldLimitExceededErrorMessage.replace('XYZ', '250');
+      allFieldsValid = false;
+    }
+    return allFieldsValid;
+  }
+
+  getCurrentDate() {
+    let today = new Date();
+    return (
+      today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear()
+    );
+  }
+
+  displayCriteriaSelected(event: boolean, selection: string) {
+    this.displayCriteria = selection;
+  }
+}