vc-create-dashboard 3.0.84 → 3.0.85

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

@@ -1,450 +0,0 @@
-@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

@@ -1,90 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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;
-  }
-}