vc-create-dashboard 3.0.5 → 3.0.61

package/src/lib/ui-kit/time-filter/time-filter.component.ts

@@ -0,0 +1,284 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  OnChanges,
+  EventEmitter,
+  SimpleChanges,
+} from '@angular/core';
+
+@Component({
+  selector: 'app-time-filter',
+  templateUrl: './time-filter.component.html',
+  styleUrls: ['./time-filter.component.less'],
+})
+export class TimeFilterComponent implements OnInit, OnChanges {
+  placeholderText: string = 'Select a time period'; // placeholder for time filter
+  timeFilterType: Array<string> = ['Monthly', 'Quarterly'];
+  selectedFilterType: number = 0;
+  monthList = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  selectedFilter: Array<string> = [];
+  quarterlyArray = [
+    'Jan, Feb, Mar',
+    'Apr, May, Jun',
+    'Jul, Aug, Sep',
+    'Oct, Nov, Dec',
+  ];
+
+  showTime: boolean = false;
+  showMonth: boolean = false;
+  showMonthPopup: boolean = false;
+  showQuarter: boolean = false;
+  showBusCycle: boolean = false;
+  startOfRange: any = {
+    startMonth: 1,
+    startYear: new Date()?.getFullYear(),
+  };
+  endOfRange: any = {
+    endMonth: 1,
+    endYear: new Date()?.getFullYear(),
+  };
+
+  selectedType: any = {
+    type: 0,
+    startDate: '',
+    endDate: '',
+    selectedId: [],
+    time_filter_type: '',
+  };
+
+  isApplied = false;
+  isApplyDisabled = true;
+  applyButtonName = 'Apply';
+  isReset = false;
+  @Input() selectedData = {
+    type: 0,
+    selectedId: [],
+  };
+
+  @Input() businessCycleRange: any; // sample  { start_date: '01-01-2021', end_date: '31-12-2021', selected: true }
+  @Output() timeFilterApply = new EventEmitter(); // sample {type: "monthly", startDate: "01-1-2021", endDate: "31-1-2021"}
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.businessCycleRange) {
+      const businessCycleStartRange =
+        this.businessCycleRange?.start_date.split('-');
+      const businessCycleEndRange =
+        this.businessCycleRange?.end_date.split('-');
+      this.startOfRange.startMonth = businessCycleStartRange[1];
+      this.startOfRange.startYear = businessCycleStartRange[2];
+      this.endOfRange.endMonth = businessCycleEndRange[1];
+      this.endOfRange.endYear = businessCycleEndRange[2];
+      this.selectedFilterType = this.selectedData.type;
+    }
+    if (this.selectedData.type === 1) {
+      this.selectedFilter = [
+        this.monthList[this.selectedData.selectedId[0] - 1],
+      ];
+      this.placeholderText = 'Monthly';
+    }
+    if (this.selectedData.type === 2) {
+      this.selectedFilter = [
+        this.quarterlyArray[this.selectedData.selectedId[0] - 1],
+      ];
+      this.placeholderText = 'Quarterly';
+    }
+    for (const propName in changes) {
+      if (changes.hasOwnProperty(propName)) {
+        if (propName === 'businessCycleRange') {
+          this.isApplied = true;
+          this.onFilterAppliedOrReset(
+            changes[propName]?.previousValue === undefined
+          );
+        }
+      }
+    }
+  }
+
+  clickTime() {
+    this.showTime = !this.showTime;
+  }
+
+  hideTime() {
+    this.showTime = false;
+  }
+
+  clickMonth() {
+    this.showMonth = !this.showMonth;
+  }
+
+  hideMonth() {
+    this.showMonth = false;
+  }
+
+  openMonth() {
+    this.showMonthPopup = !this.showMonthPopup;
+  }
+
+  hideMonthPopup() {
+    this.showMonthPopup = false;
+  }
+
+  clickQuarter() {
+    this.showQuarter = !this.showQuarter;
+  }
+
+  hideQuarter() {
+    this.showQuarter = false;
+  }
+
+  clickBusCycle() {
+    this.showBusCycle = !this.showBusCycle;
+  }
+
+  hideBusCycle() {
+    this.showBusCycle = false;
+  }
+
+  //#region Time filter
+
+  onTimeFilter(event: any) {
+    this.isApplyDisabled = true;
+    this.selectedFilterType = parseInt(event.target.value);
+    this.placeholderText = this.timeFilterType[this.selectedFilterType - 1];
+    this.selectedFilter = [];
+    this.showTime = false;
+    this.isReset = false;
+    this.applyButtonName = 'Apply';
+    this.selectedData.type = this.selectedFilterType;
+  }
+
+  onTimeFilterSelect(event: any, index: any) {
+    const targetData = event?.target;
+    this.selectedFilter = [targetData?.value];
+    this.isApplyDisabled = false;
+    this.selectedType.type = 1; // 1 for monthly
+    this.selectedType.startDate = this.getMonthlyStartDate(index).startDate;
+    this.selectedType.endDate = this.getMonthlyStartDate(index).endDate;
+    this.selectedType.selectedId = [index];
+    this.selectedType.time_filter_type = 'monthly';
+    this.selectedData.type = 1;
+    this.applyButtonName = 'Apply';
+    this.showMonth = false;
+  }
+
+  removeSelectedData(index: any) {
+    this.selectedFilter.splice(index, 1);
+    this.applyButtonName = 'Apply';
+    this.isApplyDisabled = false;
+    this.isApplyDisabled = this.isReset ? false : true;
+  }
+
+  selectQuarterly(event: any, index: any) {
+    this.selectedFilter = [event.target.value];
+    this.selectedType.type = 2; // quarterly
+    this.isApplyDisabled = false;
+    this.selectedType.startDate = this.getQuarterlyMonthRange(index).startDate;
+    this.selectedType.endDate = this.getQuarterlyMonthRange(index).endDate;
+    this.selectedType.selectedId = [index];
+    this.selectedType.time_filter_type = 'quarterly';
+    this.showQuarter = false;
+    this.selectedData.type = 2;
+    this.applyButtonName = 'Apply';
+  }
+
+  getMonthlyStartDate(index: any) {
+    if (index < this.startOfRange.startMonth) {
+      return {
+        startDate: `01-${index}-${this.endOfRange?.endYear}`,
+        endDate: `${new Date(
+          this.endOfRange?.endYear,
+          index,
+          0
+        ).getDate()}-${index}-${this.endOfRange?.endYear}`,
+      };
+    } else {
+      // return `01-${index}-${this.startOfRange?.startYear}`
+      return {
+        startDate: `01-${index}-${this.startOfRange?.startYear}`,
+        endDate: `${new Date(
+          this.startOfRange?.startYear,
+          index,
+          0
+        ).getDate()}-${index}-${this.startOfRange?.startYear}`,
+      };
+    }
+  }
+
+  getQuarterlyMonthRange(index: any) {
+    const monthSelected = index * 3 + 1;
+    if (monthSelected < this.startOfRange.startMonth) {
+      return {
+        startDate: `01-${monthSelected}-${this.endOfRange?.endYear}`,
+        endDate: `${new Date(
+          this.endOfRange?.endYear,
+          monthSelected + 2,
+          0
+        ).getDate()}-${monthSelected + 2}-${this.endOfRange?.endYear}`,
+      };
+    }
+    return {
+      startDate: `01-${monthSelected}-${this.startOfRange?.startYear}`,
+      endDate: `${new Date(
+        this.startOfRange?.startYear,
+        monthSelected + 2,
+        0
+      ).getDate()}-${monthSelected + 2}-${this.startOfRange?.startYear}`,
+    };
+  }
+
+  onFilterAppliedOrReset(isFirstTime?: any) {
+    if (
+      (this.applyButtonName == 'Reset' || this.selectedFilter.length == 0) &&
+      !isFirstTime
+    ) {
+      const preSavedCycle = JSON.parse(
+        localStorage.getItem('businessCycle') ?? '{}'
+      )?.selectedCycle;
+      localStorage.removeItem('timefilter');
+      this.isApplied = false;
+      this.selectedFilterType = 0;
+      this.placeholderText = 'Select a time period';
+      this.selectedFilter = [];
+      this.applyButtonName = 'Apply';
+      this.isReset = false;
+      this.selectedData.type = 0;
+      this.selectedData.selectedId = [];
+      this.selectedType = {
+        type: 0,
+        startDate: preSavedCycle?.start_date,
+        endDate: preSavedCycle?.end_date,
+        time_filter_type: '',
+      };
+    } else if (!isFirstTime) {
+      this.applyButtonName = 'Reset';
+      this.isReset = true;
+      localStorage.setItem('timefilter', JSON.stringify(this.selectedType));
+      this.isApplied = false;
+    }
+  }
+
+  removeQuarterly() {
+    this.selectedFilter = [];
+    this.applyButtonName = 'Apply';
+    this.isApplyDisabled = this.isReset ? false : true;
+  }
+}

package/src/lib/ui-kit/time-filter/time-filter.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TimeFilterComponent } from './time-filter.component';
+
+@NgModule({
+  declarations: [TimeFilterComponent],
+  imports: [CommonModule],
+  exports: [TimeFilterComponent],
+})
+export class TimeFilterModule {}

package/src/lib/ui-kit/tooltip/tooltip.directive.ts

@@ -0,0 +1,150 @@
+import {
+  Directive,
+  Input,
+  ElementRef,
+  HostListener,
+  Renderer2,
+  OnInit,
+  AfterViewInit,
+  ViewChild,
+  OnDestroy,
+} from '@angular/core';
+
+@Directive({
+  selector: '[arTooltip]',
+})
+export class ToolTipDirective implements OnInit, OnDestroy {
+  @Input('arTooltip') tooltipTitle!: string;
+  @Input() placement!: string;
+  @Input() type: any;
+  @Input() tooltipMandatory!: boolean;
+  @Input() showTooltip = true;
+  @Input() animate!: boolean;
+  tooltip!: HTMLElement;
+  offset = 8;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+  ngOnInit() {}
+  @HostListener('mouseenter') onMouseEnter() {
+    this.hide();
+    this.show();
+  }
+  @HostListener('mouseover') onMouseOver() {
+    this.hide();
+    this.show();
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.hide();
+  }
+  @HostListener('mouseout') onMouseOut() {
+    this.hide();
+  }
+  @HostListener('click') onClick() {
+    this.hide();
+  }
+  ngOnDestroy() {
+    this.hide();
+  }
+  show() {
+    if (!this.showTooltip) {
+      return;
+    }
+    this.create();
+    const element = this.el.nativeElement;
+    if (this.tooltipMandatory === true) {
+      this.setPosition();
+      this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
+    } else {
+      if (
+        element.scrollWidth * element.scrollHeight >
+        element.offsetWidth * element.offsetHeight
+      ) {
+        this.setPosition();
+        this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
+      }
+    }
+  }
+
+  hide() {
+    if (document.body.contains(this.tooltip)) {
+      if (this.renderer) {
+        this.renderer.removeChild(
+          document.body,
+          document.getElementById('tooltip')
+        );
+      }
+    }
+  }
+
+  create() {
+    this.tooltip = this.renderer.createElement('span');
+    this.tooltip.setAttribute('id', 'tooltip');
+    this.tooltip.innerHTML = this.tooltipTitle;
+    this.renderer.appendChild(document.body, this.tooltip);
+    this.renderer.addClass(this.tooltip, 'ng-tooltip');
+    this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
+    this.renderer.addClass(this.tooltip, `${this.type}`);
+    if (this.animate) {
+      this.renderer.addClass(this.tooltip, `animate-${this.placement}`);
+    }
+  }
+
+  setPosition() {
+    const hostPos = this.el.nativeElement.getBoundingClientRect();
+    const tooltipPos = this.tooltip.getBoundingClientRect();
+    const scrollPos =
+      window.pageYOffset ||
+      document.documentElement.scrollTop ||
+      document.body.scrollTop ||
+      0;
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    let top;
+    let left;
+    if (this.placement === 'top') {
+      top = hostPos.top - tooltipPos.height - this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.placement === 'bottom') {
+      if (hostPos.top + tooltipPos.height > h) {
+        top = hostPos.top - tooltipPos.height;
+        left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+        this.renderer.removeClass(this.tooltip, `ng-tooltip-bottom`);
+        this.renderer.addClass(this.tooltip, `ng-tooltip-top`);
+      } else {
+        top = hostPos.bottom + this.offset;
+        left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+      }
+    }
+
+    if (this.placement === 'left') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.left - tooltipPos.width - this.offset;
+    }
+
+    if (this.placement === 'right') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.right + this.offset;
+    }
+    if (this.placement === 'bottom-right') {
+      top = hostPos.bottom + this.offset;
+      left = hostPos.left - (tooltipPos.width - 28);
+    }
+    if (this.placement === 'bottom-left') {
+      if (hostPos.top + tooltipPos.height > h - 30) {
+        top = hostPos.top - tooltipPos.height;
+        console.log('bottom left', hostPos.top - tooltipPos.height);
+        left = hostPos.left;
+        this.renderer.removeClass(this.tooltip, `ng-tooltip-bottom-left`);
+        this.renderer.addClass(this.tooltip, `ng-tooltip-top-left`);
+      } else {
+        top = hostPos.bottom + this.offset;
+        left = hostPos.left;
+      }
+    }
+    this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
+    this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
+  }
+}

package/src/lib/ui-kit/tooltip/tooltip.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ToolTipDirective } from './tooltip.directive';
+
+@NgModule({
+  declarations: [ToolTipDirective],
+  imports: [CommonModule],
+  exports: [ToolTipDirective],
+})
+export class TooltipModule {}

package/src/lib/ui-kit/v-loader/loader/loader.component.html

@@ -0,0 +1,6 @@
+<div class="main-loader">
+  <img [ngSrc]="vLoader" alt="" width="45" height="45" />
+  <div class="loader-index">
+    <div class="loader-index-circle"></div>
+  </div>
+</div>

package/src/lib/ui-kit/v-loader/loader/loader.component.less

@@ -0,0 +1,52 @@
+.main-loader {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: transparent;
+  z-index: 9;
+    
+  img {
+    width: 45px;
+    position: relative;
+    z-index: 2;
+  }
+
+  .loader-index {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .loader-index-circle {
+    background: #fff;
+    border-radius: 50%;
+    width: 65px;
+    height: 65px;
+    border-radius: 50%;
+    border: 4px solid transparent;
+    border-top-color: #dbdbdb;
+    -webkit-animation: 1.5s spin infinite linear;
+    animation: 1.5s spin infinite linear;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/lib/ui-kit/v-loader/loader/loader.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Optional } from '@angular/core';
+import { Configurations } from '../../../configurations';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.less'],
+})
+export class LoaderComponent implements OnInit {
+  vLoader: any;
+  
+  public env!: any;
+
+  constructor(@Optional() config?: Configurations) {
+    if (config) {
+      this.env = config.envConfig;
+    }
+    this.vLoader = this.env.vLoader;
+  }
+
+  ngOnInit(): void {}
+}

package/src/lib/ui-kit/v-loader/loader-inline/loader-inline.component.html

@@ -0,0 +1,6 @@
+<div class="inline-loader">
+  <img [ngSrc]="vLoader" alt="" width="45" height="45" />
+  <div class="loader-index">
+    <div class="loader-index-circle"></div>
+  </div>
+</div>

package/src/lib/ui-kit/v-loader/loader-inline/loader-inline.component.less

@@ -0,0 +1,52 @@
+.inline-loader {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: transparent;
+  z-index: 9;
+    
+  img {
+    width: 45px;
+    position: relative;
+    z-index: 2;
+  }
+
+  .loader-index {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .loader-index-circle {
+    background: #fff;
+    border-radius: 50%;
+    width: 65px;
+    height: 65px;
+    border-radius: 50%;
+    border: 4px solid transparent;
+    border-top-color: #dbdbdb;
+    -webkit-animation: 1.5s spin infinite linear;
+    animation: 1.5s spin infinite linear;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/lib/ui-kit/v-loader/loader-inline/loader-inline.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Optional } from '@angular/core';
+import { Configurations } from '../../../configurations';
+
+@Component({
+  selector: 'app-loader-inline',
+  templateUrl: './loader-inline.component.html',
+  styleUrls: ['./loader-inline.component.less'],
+})
+export class LoaderInlineComponent implements OnInit {
+  vLoader: any;
+  
+  public env!: any;
+
+  constructor(@Optional() config?: Configurations) {
+    if (config) {
+      this.env = config.envConfig;
+    }
+    this.vLoader = this.env.vLoader;
+  }
+
+  ngOnInit(): void {}
+}

package/src/lib/ui-kit/v-loader/v-loader.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { LoaderComponent } from './loader/loader.component';
+import { LoaderInlineComponent } from './loader-inline/loader-inline.component';
+
+@NgModule({
+  declarations: [LoaderComponent, LoaderInlineComponent],
+  imports: [CommonModule,NgOptimizedImage],
+  exports: [LoaderComponent, LoaderInlineComponent],
+})
+export class VLoaderModule {}

package/src/public-api.ts

@@ -0,0 +1,11 @@
+/*
+ * Public API Surface of create-dashboard
+ */
+
+// export * from './lib/create-dashboard.service';
+// export * from './lib/create-dashboard.component';
+// export * from './lib/create-dashboard.module';
+
+export * from './lib/create-dashboard.service';
+export * from './lib/create-dashboard-container/create-dashboard.component';
+export * from './lib/create-dashboard-container/create-dashboard.module';

package/src/test.ts

@@ -0,0 +1,28 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/tsconfig.lib.json

@@ -0,0 +1,20 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2020",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}