vc-create-dashboard 2.9.5 → 2.9.7

package/src/lib/create-dashboard-container/create-dashboard.module.ts

@@ -0,0 +1,76 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// import { MarxEditorModule } from 'vcomply-editor';
+import { VcomplyEditorModule } from '@vcomply/editor';
+import { DpDatePickerModule } from 'ng2-date-picker';
+import { FormsModule } from '@angular/forms';
+import { CreateDashboardComponent } from './create-dashboard.component';
+import { SelectModule } from '../ui-kit/select/select.module';
+import { UserListComponent } from './user-list/user-list.component';
+import { ResponsibilityCenterComponent } from './responsibility-center/responsibility-center.component';
+import { CategoriesComponent } from './categories/categories.component';
+import { FrequencyComponent } from './frequency/frequency.component';
+import { PaginationModule } from '../ui-kit/pagination/pagination.module';
+import { FormgroupModule } from '../ui-kit/formgroup/formgroup.module';
+import { DashboardFooterModule } from '../ui-kit/dashboard-footer/dashboard-footer.module';
+import { FormGroupComponent } from './form-group/form-group.component';
+import { TooltipModule } from '../ui-kit/tooltip/tooltip.module';
+import { FloatingBarModule } from '../ui-kit/floating-bar/floating-bar.module';
+import { DialogModule } from '../ui-kit/dialog/dialog.module';
+import { Configurations } from '../configurations';
+import { FilterPipe } from './pipes/filter.pipe';
+import { RiskCategoriesComponent } from './risk-categories/risk-categories.component';
+import { ConfigureWidgetsModule } from './configure-widgets/configure-widgets.module';
+import { PopoverModule } from '../ui-kit/popover/popover.module';
+import { VLoaderModule } from '../ui-kit/v-loader/v-loader.module';
+import { SnackBarModule } from '../ui-kit/snack-bar/snack-bar.module';
+import { NoDataModule } from '../ui-kit/no-data/no-data.module';
+import { DirectivesModule } from './directives/directives.module';
+import { SmileyDialogModule } from '../ui-kit/smiley-dialog/smiley-dialog.module';
+import { TextCountPipe } from './pipes/text-count.pipe';
+
+@NgModule({
+  declarations: [
+    CreateDashboardComponent,
+    UserListComponent,
+    FormGroupComponent,
+    ResponsibilityCenterComponent,
+    CategoriesComponent,
+    RiskCategoriesComponent,
+    FrequencyComponent,
+    FilterPipe,
+    TextCountPipe,
+  ],
+  imports: [
+    CommonModule,
+    // MarxEditorModule,
+    VcomplyEditorModule,
+    FormgroupModule,
+    DpDatePickerModule,
+    FormsModule,
+    TooltipModule,
+    SelectModule,
+    DashboardFooterModule,
+    PaginationModule,
+    FloatingBarModule,
+    DialogModule,
+    ConfigureWidgetsModule,
+    PopoverModule,
+    VLoaderModule,
+    SnackBarModule,
+    NoDataModule,
+    DirectivesModule,
+    SmileyDialogModule,
+  ],
+  exports: [CreateDashboardComponent],
+})
+export class CreateDashboardModule {
+  public static forRoot(
+    environmentConfig: Configurations
+  ): ModuleWithProviders<CreateDashboardModule> {
+    return {
+      ngModule: CreateDashboardModule,
+      providers: [{ provide: Configurations, useValue: environmentConfig }],
+    };
+  }
+}

package/src/lib/create-dashboard-container/directives/directives.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ScrollInViewDirective } from './scroll-in-view.directive';
+
+
+
+@NgModule({
+  declarations: [
+    ScrollInViewDirective
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports:[
+    ScrollInViewDirective
+  ]
+})
+export class DirectivesModule { }

package/src/lib/create-dashboard-container/directives/scroll-in-view.directive.ts

@@ -0,0 +1,28 @@
+import { AfterViewInit, Directive, ElementRef, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+
+@Directive({
+  selector: '[appScrollInView]'
+})
+export class ScrollInViewDirective implements OnChanges {
+@Input() appScrollInView = false;
+  constructor(private el: ElementRef) {
+  }
+ngOnChanges(change:SimpleChanges){
+  if(change?.appScrollInView && change?.appScrollInView?.currentValue === true){
+       this.scroll();
+  }
+}
+  ngAfterViewInit() {
+      // Otherwise Angular throws error: Expression has changed after it was checked.
+  this.scroll();
+  }
+
+  scroll(){
+    if(this.appScrollInView){
+      window.setTimeout(() => {
+        this.el.nativeElement.scrollIntoView({behavior: 'smooth', block: 'center'});
+    });
+    }
+  }
+
+}

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

@@ -0,0 +1,287 @@
+<!-- <p>form-group works!</p> -->
+<div class="form-group" [class.disabled]="disabled">
+  <div class="vx-dialog-body-container" (scroll)="animateImage()">
+    <div class="form-group-row">
+      <div class="image">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg"
+          alt=""
+        />
+      </div>
+      <div class="form">
+        <div class="vx-form-group">
+          <label class="vx-control-panel"
+            >Dashboard Name<span class="required">*</span></label
+          >
+          <div class="vx-input-group">
+            <input
+              type="text"
+              placeholder="Add dashboard name (Max limit: 30 characters)."
+              [(ngModel)]="dashboardName"
+            />
+            <span class="counter" *ngIf="dashboardName?.length > 0">{{
+              30 - dashboardName?.length
+            }}</span>
+          </div>
+          <p class="vx-txt-error">{{ dashboardNameError }}</p>
+          <div class="vx-input-group">
+            <vcomply-editor
+              [editorConfig]="dashboardDescription"
+              [(ngModel)]="dashboardDescriptionText"
+            ></vcomply-editor>
+            <span
+              class="counter"
+              *ngIf="dashboardDescriptionText?.length > 0"
+              >{{ 250 - dashboardDescriptionText?.length }}</span
+            >
+          </div>
+          <p class="vx-txt-error">{{ dashboardDescriptionError }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="form-group-row">
+      <div class="image">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg"
+          alt=""
+        />
+      </div>
+      <div class="form">
+        <div class="vx-form-group">
+          <label class="vx-control-panel"
+            >Who can view this dashboard?<span class="required">*</span></label
+          >
+          <div class="selectbox">
+            <input
+              type="text"
+              placeholder="Who can view this dashboard?"
+              readonly
+              (click)="selectWhoCanViewThis()"
+            />
+          </div>
+          <div class="selected">
+            <div class="left">
+              <div class="chip-container">
+                <span class="chip">
+                  <span class="value">Samantha Jones</span>
+                </span>
+                <span class="chip">
+                  <i class="icons">&#xe90d;</i>
+                  <span class="value">Angel Kleven</span>
+                </span>
+              </div>
+              <button class="count">+10</button>
+            </div>
+            <button class="edit"><i class="icons">&#xe9ba;</i> Edit</button>
+          </div>
+          <!-- <p class="vx-txt-error">Enter a value for this input box.</p> -->
+        </div>
+      </div>
+    </div>
+    <div class="form-group-row">
+      <div class="image">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg"
+          alt=""
+        />
+      </div>
+      <div class="form">
+        <div class="vx-form-group">
+          <label class="vx-control-panel">RESPONSIBILITY CENTER(S)</label>
+          <div class="selectbox">
+            <div
+              class="custom-input"
+              aria-placeholder="Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any."
+              (click)="selectResponsibilityCenter()"
+            ></div>
+          </div>
+          <!-- <p class="vx-txt-error">Enter a value for this input box.</p> -->
+        </div>
+      </div>
+    </div>
+    <div class="form-group-row">
+      <div class="image">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg"
+          alt=""
+        />
+      </div>
+      <div class="form">
+        <div class="vx-form-group">
+          <label class="vx-control-panel">PROGRAM</label>
+          <div class="selectbox">
+            <div
+              class="custom-input"
+              aria-placeholder="Select the Program that this responsibility relates to."
+              (click)="selectCategories()"
+            ></div>
+          </div>
+          <!-- <p class="vx-txt-error">Enter a value for this input box.</p> -->
+        </div>
+      </div>
+    </div>
+    <div class="form-group-row">
+      <div class="image">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg"
+          alt=""
+        />
+      </div>
+      <div class="form">
+        <div class="vx-form-group">
+          <label class="vx-control-panel">RISK CATEGORIES</label>
+          <div class="selectbox">
+            <div
+              class="custom-input"
+              aria-placeholder="Select the Risk Categories that you would like displayed in the Dashboard, if any."
+              (click)="selectCategories()"
+            ></div>
+          </div>
+          <!-- <p class="vx-txt-error">Enter a value for this input box.</p> -->
+        </div>
+      </div>
+    </div>
+    <div class="form-group-row">
+      <div class="image">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg"
+          alt=""
+        />
+      </div>
+      <div class="form">
+        <div class="vx-form-group">
+          <label class="vx-control-panel">DISPLAY CRITERIA</label>
+          <div class="radio-group">
+            <app-cs-radio
+              (checkedEvent)="
+                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')
+              "
+              >Those responsibilities that have been assigned to both the
+              selected Responsibility Center(s) and the selected
+              Categories.</app-cs-radio
+            >
+            <app-cs-radio
+              (checkedEvent)="displayCriteriaSelected($event, 'RC_OR_CATEGORY')"
+              >Those responsibilities that have been assigned to either the
+              selected Responsibility Center(s) or the selected
+              Categories.</app-cs-radio
+            >
+          </div>
+          <!-- <p class="vx-txt-error">Enter a value for this input box.</p> -->
+        </div>
+      </div>
+    </div>
+    <div class="form-group-row">
+      <div class="image">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg"
+          alt=""
+        />
+      </div>
+      <div class="form">
+        <div class="vx-form-group">
+          <label class="vx-control-panel">TIMEFRAME</label>
+          <label class="vx-control-panel-sub-label"
+            >Select how long you would like the information selected to be
+            displayed for. If no timeframe is selected, the information will be
+            displayed permanently.</label
+          >
+          <div class="input-group vx-d-flex vx-justify-between">
+            <div class="date-select">
+              <i class="icons">&#xe92d;</i>
+              <input
+                type="text"
+                [value]="selectedFromDate | date : 'dd MMM yyyy'"
+                [placeholder]="'From'"
+                (click)="openFromDatePicker()"
+                readonly
+              />
+              <dp-date-picker
+                #fromDatePicker
+                [(ngModel)]="selectedFromDate"
+                placeholder="Select Date"
+                (onSelect)="closeFromDatePicker(); datePickerOverlay = false"
+                [config]="fromDatePickerConfig"
+              ></dp-date-picker>
+              <div
+                class="overlay"
+                (click)="closeFromDatePicker()"
+                *ngIf="datePickerOverlay"
+              ></div>
+            </div>
+            <div class="date-select">
+              <i class="icons">&#xe92d;</i>
+              <input
+                type="text"
+                [value]="selectedToDate | date : 'dd MMM yyyy'"
+                [placeholder]="'To'"
+                (click)="openToDatePicker()"
+                readonly
+              />
+              <dp-date-picker
+                #toDatePicker
+                [(ngModel)]="selectedToDate"
+                placeholder="Select Date"
+                (onSelect)="closeToDatePicker(); datePickerOverlay = false"
+                [config]="toDatePickerConfig"
+              ></dp-date-picker>
+              <div
+                class="overlay"
+                (click)="closeToDatePicker()"
+                *ngIf="datePickerOverlay"
+              ></div>
+            </div>
+          </div>
+          <!-- <p class="vx-txt-error">Enter a value for this input box.</p> -->
+        </div>
+      </div>
+    </div>
+    <div class="form-group-row">
+      <!--active class will appear on open list-->
+      <div class="image">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/send-resolution.svg"
+          alt=""
+        />
+      </div>
+      <div class="form">
+        <div class="vx-form-group">
+          <label class="vx-control-panel">
+            Email Summaries
+            <i
+              class="icons"
+              [arTooltip]="'This is a test tooltip'"
+              placement="bottom-left"
+              type="white"
+              delay="0"
+              [tooltipMandatory]="true"
+              >&#xe91f;</i
+            ></label
+          >
+          <label class="vx-control-panel-sub-label">
+            If you would like to send a summary of this Dashboard, please select
+            a frequency(By default VComply sends a weekly Summary).
+          </label>
+          <div class="selectbox">
+            <input
+              type="text"
+              placeholder="Email Summaries"
+              readonly
+              (click)="selectFrequency()"
+            />
+          </div>
+          <!-- <p class="vx-txt-error">Enter a value for this input box.</p> -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="button-block">
+    <button
+      class="vx-btn block primary"
+      [disabled]="disabled"
+      (click)="configureDashboard()"
+    >
+      Next: Configure Widgets
+    </button>
+  </div>
+</div>