@annalib/anna-core 7.2.3 → 7.2.4

package/src/lib/anna-core-shared-lib/services/anna-global-config.service.ts

@@ -0,0 +1,170 @@
+import { Injectable } from "@angular/core";
+import {
+    IAngular2MultiSelectSettings,
+    INgxAsideSettings,
+    INgbDatePickerSettings,
+    INgSelectSettings,
+    INgxInfiniteScrollSettings,
+    INgxSkeletonLoaderSettings,
+    IRadioButtonComponentConfig,
+    IConfirmationPopupConfig,
+    IWeekCalendar,
+    ICustomSingleSelect,
+    ICustomMultiSelect,
+} from "../models/anna-global-dropdown-config.model";
+import {
+    IGtHeaderConfig,
+    IGtGeneralConfig
+} from "../models/anna-non-editable-gt-models";
+
+@Injectable({
+    providedIn: "root",
+})
+export class AnnaGlobalConfigService {
+    readonly defaultAngular2MultiSelectSettings: IAngular2MultiSelectSettings;
+    readonly defaultNgxAsideSettings: INgxAsideSettings;
+    readonly defaultNgbDatePickerSettings: INgbDatePickerSettings;
+    readonly defaultNgSelectSettings: INgSelectSettings;
+    readonly defaultNgxInfiniteScrollSettings: INgxInfiniteScrollSettings;
+    readonly defaultNgxSkeletonLoaderSettings: INgxSkeletonLoaderSettings;
+    readonly defaultRadioButtonsComponentConfig: IRadioButtonComponentConfig;
+    readonly defaultConfirmationPopupConfig: IConfirmationPopupConfig;
+    readonly defaultWeekCalendarConfig: IWeekCalendar;
+    readonly defaultGtHeaderConfig: IGtHeaderConfig;
+    readonly defaultGtGeneralConfig: IGtGeneralConfig;
+    readonly defaultSingleSelectConfig: ICustomSingleSelect;
+    readonly defaultMultiSelectConfig: ICustomMultiSelect;
+
+    /*
+     Initializing all default settings
+    */
+    constructor() {
+        console.log("AnnaGlobalConfigService service created.");
+        this.defaultAngular2MultiSelectSettings = {
+            text: "Select option",
+            selectAllText: "Select All",
+            unSelectAllText: "UnSelect All",
+            badgeShowLimit: 1,
+            singleSelection: false,
+            classes: "filter-dropdowns",
+            enableSearchFilter: true,
+            enableCheckAll: true,
+            autoPosition: false,
+            disabled: false,
+            position: "bottom",
+            lazyLoading: false,
+            showCheckbox: true,
+            maxHeight: 300,
+            enableFilterSelectAll: true,
+        };
+
+        this.defaultNgxAsideSettings = {
+            title: '"Filters"',
+            cancelButtonTitle: '"Cancel"',
+            submitButtonTitle: '"Apply"',
+            closeOnEscape: false,
+            showOverlay: false,
+            showDefaultFooter: false,
+            showDefaultHeader: false,
+        };
+
+        this.defaultNgbDatePickerSettings = {
+            autoClose: false,
+            placeholder: "mm-dd-yyyy",
+            displayMonths: 1,
+            firstDayOfWeek: 1,
+            showWeekNumbers: false,
+            readonly: true,
+        };
+
+        this.defaultNgSelectSettings = {
+            allowClear: false,
+            placeholder: "Select",
+        };
+
+        this.defaultNgxInfiniteScrollSettings = {
+            infiniteScrollDistance: 1,
+            infiniteScrollUpDistance: 2,
+            infiniteScrollThrottle: 300,
+            scrollWindow: false,
+        };
+
+        this.defaultNgxSkeletonLoaderSettings = {
+            numberOfSkeletonRows: Array(6).fill(0),
+        };
+
+        this.defaultRadioButtonsComponentConfig = {
+            heading: "Select Option",
+            radioButtons: [
+                {
+                    value: "Yes",
+                    isDisabled: false,
+                    label: "Yes",
+                    class: "",
+                },
+                {
+                    value: "No",
+                    isDisabled: false,
+                    label: "No",
+                    class: "",
+                },
+            ],
+        };
+
+        this.defaultConfirmationPopupConfig = {
+            showCancelButton: true,
+            title: "Are you sure ?",
+            showConfirmButton: true,
+            cancelButtonLabel: "No",
+            confirmButtonLabel: "Yes",
+            showCloseIcon: true,
+            backdrop: "static",
+            windowClass: "",
+            size: "sm",
+            keyboard: false,
+        };
+
+        this.defaultWeekCalendarConfig = {
+            firstDayOfWeek: 1,
+            showWeekNumbers: true,
+            dateFormatToDisplay: "d MMM y",
+            dateFormatForRequest: "y-MM-dd",
+            maxWeeksToShowWithRemainingCount: 2,
+            numberOfMonthsToEnableInPast: 1,
+            selectMultipleWeeks: false,
+            customClass: "",
+            emitMultipleWeekObjects: true,
+            maxWeeksToSelect: 0,
+            showAsDropdown: true,
+            selectCurrentWeek: true,
+        };
+
+        this.defaultGtHeaderConfig = {
+            iconColumn: false,
+            checkboxColumn: false,
+            lastColumnKeys: []
+        };
+
+        this.defaultGtGeneralConfig = {
+            component: "",
+            totalRow: false,
+            isHeaderChecked: false,
+            disableHeaderCheckbox: false,
+            verticalScrollOffsetForFilterTooltip: 0,
+            isGrouped: false,
+            showAllColumnFilter: true,
+            bufferSize: 20,
+            page: ""
+        };
+
+        this.defaultSingleSelectConfig = {
+            showSearchBar: false,
+            placeholder:  "Select",
+            classes: "",
+            position: "BOTTOM",
+            maxHeightOfList: 200
+        }
+
+        this.defaultMultiSelectConfig = {...this.defaultSingleSelectConfig, ...{showErrorWhenNoOptionSelected: true}};
+    }
+}

package/src/lib/anna-core-shared-lib/services/anna-number-format.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+    providedIn: "root",
+})
+export class AnnaNumberFormatService {
+
+public static GetRoundedValueWithUnits(inputValue: number, digitsToRoundDecimalPoint = 2)
+  {
+      let [value,unit] = AnnaNumberFormatService.GetValueInUnits(Math.abs(inputValue));
+      value = +((+value).toFixed(digitsToRoundDecimalPoint));
+      if(inputValue < 0){
+          value = value * -1;
+      }
+      return value.toString() + unit;
+    //   return (Math.Round(value, digitsToRoundDecimalPoint, MidpointRounding.AwayFromZero) + unit);
+  }
+
+  public static GetValueInUnits(inputValue: number){
+      let unit = "";
+      let thousand = 1000;
+      let million = 1000000;
+      let billion = 1000000000;
+
+      if (inputValue >= thousand && inputValue < million)
+      {
+          inputValue = inputValue / thousand;
+          unit = "K";
+      }
+      else if (inputValue >= million && inputValue < billion)
+      {
+          inputValue = inputValue / million;
+          unit = "M";
+      }
+      else if (inputValue >= billion)
+      {
+          inputValue = inputValue / billion;
+          unit = "B";
+      }
+
+      return [inputValue,unit];
+  }
+}

package/src/lib/anna-core-shared-lib/services/anna-sort.service.ts

@@ -0,0 +1,179 @@
+// Angular import statements
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { SortType } from '../models/anna-sort.model';
+import { AnnaDateTimeFormatService } from './anna-date-time-format.service';
+
+// Third party import statements
+
+// User defined import statements
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AnnaSortService {
+  columnSortState: Map<string, SortType>;
+  noSortingAppliedData: any[];
+  updateSortTypeSubject: Subject<string> = new Subject();
+
+  dateSet = new Set([
+    'endDate',
+    'startDate',
+    'end_date',
+    'start_date',
+    'flightStartDate',
+    'flightEndDate',
+  ]);
+
+  constructor(private annaDateTimeFormatService: AnnaDateTimeFormatService) {
+    console.log('AnnaTableColumnSortService sevice created.');
+  }
+
+  sortDataForComponentOtherThanLurAndCsrPage(
+    isAsc: boolean,
+    data: any[],
+    key: string
+  ) {
+    let param1: string | number;
+    let param2: string | number;
+
+    if (this.dateSet.has(key)) {
+      data.sort((a, b) => {
+        return this.annaDateTimeFormatService.compareDate(
+          a[key],
+          b[key],
+          isAsc
+        );
+      });
+    } else if (key === 'AirDateAndTime') {
+      data.sort((a, b) => {
+        let first, second;
+        if (a[key] == '-') {
+          return 1;
+        }
+
+        if (b[key] == '-') {
+          return -1;
+        } else {
+          first =
+            this.annaDateTimeFormatService.formatDateAndHHMMATimeToStandardFormat(
+              a[key]
+            );
+          second =
+            this.annaDateTimeFormatService.formatDateAndHHMMATimeToStandardFormat(
+              b[key]
+            );
+          let compareDate = this.annaDateTimeFormatService.compareDate(
+            first,
+            second,
+            isAsc
+          );
+          return compareDate;
+        }
+      });
+    } else if (key == 'startEndTime' || key == 'TimeBand') {
+      data.sort((a, b) => {
+        if (isAsc) {
+          param1 = a[key][1];
+          param2 = b[key][1];
+        } else {
+          param1 = a[key][2];
+          param2 = b[key][2];
+        }
+        let val = isAsc
+          ? this.annaDateTimeFormatService.sortByTimeAscending(param1, param2)
+          : this.annaDateTimeFormatService.sortByTimeDescending(param1, param2);
+        return val;
+      });
+    } else {
+      data.sort((a, b) => {
+        param1 = a[key];
+        param2 = b[key];
+
+        if (param1 !== param2) {
+          return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
+        }
+
+        return 0;
+      });
+    }
+
+    return data;
+  }
+
+  sortEnterEditLurAndCsrPage(isAsc: boolean, data: any[], key: any) {
+    let param1: string | number;
+    let param2: string | number;
+
+    if (key.includes('_')) {
+      let keys = key.split('_');
+      let weekNumber = keys[0];
+      let sortKey = keys[1];
+
+      if (keys.length > 2) {
+        sortKey =
+          keys[2] == true
+            ? 'BookedAurIncludingNoChargeSpots'
+            : 'BookedAurExcludingNoChargeSpots';
+      }
+
+      data.sort((a, b) => {
+        let aInventoryCodeWeekWiseKey = Object.keys(
+          a.WeekWiseInventoryCodeData
+        ).filter((key) => key.split('_')[1] == weekNumber);
+        let bInventoryCodeWeekWiseKey = Object.keys(
+          b.WeekWiseInventoryCodeData
+        ).filter((key) => key.split('_')[1] == weekNumber);
+
+        param1 = null;
+        param2 = null;
+        if (aInventoryCodeWeekWiseKey.length > 0) {
+          param1 =
+            a.WeekWiseInventoryCodeData[aInventoryCodeWeekWiseKey[0]][
+              sortKey
+            ][1];
+        }
+
+        if (bInventoryCodeWeekWiseKey.length > 0) {
+          param2 =
+            b.WeekWiseInventoryCodeData[bInventoryCodeWeekWiseKey[0]][
+              sortKey
+            ][1];
+        }
+
+        if (param1 !== param2) {
+          return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
+        }
+
+        return 0;
+      });
+    } else if (key == 'TimeBand') {
+      data.sort((a, b) => {
+        if (isAsc) {
+          param1 = a[key][1];
+          param2 = b[key][1];
+        } else {
+          param1 = a[key][2];
+          param2 = b[key][2];
+        }
+        let val = isAsc
+          ? this.annaDateTimeFormatService.sortByTimeAscending(param1, param2)
+          : this.annaDateTimeFormatService.sortByTimeDescending(param1, param2);
+        return val;
+      });
+    } else {
+      data.sort((a, b) => {
+        param1 = a[key];
+        param2 = b[key];
+
+        if (param1 !== param2) {
+          return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
+        }
+
+        return 0;
+      });
+    }
+
+    return data;
+  }
+}

package/src/lib/anna-core.module.ts

@@ -0,0 +1,112 @@
+
+
+// Angular import statements
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatRadioModule } from "@angular/material/radio";
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatTableModule } from '@angular/material/table';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+// Third party import statements
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxSliderModule } from '@angular-slider/ngx-slider';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { NgCircleProgressModule } from 'ng-circle-progress';
+
+//Anna-core User defined import statements
+import { AnnaFilterSearchedTextPipe } from './anna-core-shared-lib/pipes/annaFilterSearchedText.pipe';
+import { AnnaNoDataComponent } from './anna-core-shared-lib/components/anna-no-data/anna-no-data.component';
+import { AnnaIconColumnComponent } from './anna-core-shared-lib/components/anna-icon-column/anna-icon-column.component';
+import { AnnaBuyerApprovalIconTemplateComponent } from './anna-core-shared-lib/components/anna-buyer-approval-icon-template/anna-buyer-approval-icon-template.component';
+import { AnnaLiveIconTemplateComponent } from './anna-core-shared-lib/components/anna-live-icon-template/anna-live-icon-template.component';
+import { AnnaNotifyIconTemplateComponent } from './anna-core-shared-lib/components/anna-notify-icon-template/anna-notify-icon-template.component';
+import { AnnaPayForPerformanceIconTemplateComponent } from './anna-core-shared-lib/components/anna-pay-for-performance-icon-template/anna-pay-for-performance-icon-template.component';
+import { AnnaRejectedIconTemplateComponent } from './anna-core-shared-lib/components/anna-rejected-icon-template/anna-rejected-icon-template.component';
+import { showEllipsisTextOnHoverDirective } from './anna-core-shared-lib/directives/show-ellipsis-text/show-ellipsis-text.directive';
+import { AnnaConvertZeroOrNullOrUndefinedPipe } from './anna-core-shared-lib/pipes/annaConvertZeroOrNullOrUndefined.pipe';
+
+//Anna-dropdown-lib User defined import statements 
+import { AnnaWeekCalendarComponent  } from './anna-dropdown-lib/components/anna-week-calendar-filter/anna-week-calendar-filter.component';
+import { AnnaCalendarFilterComponent } from './anna-dropdown-lib/components/anna-calendar-filter/anna-calendar-filter.component';
+
+
+//Anna-generic-table User defined import statements
+import { AnnaNonEditableGenericTableComponent } from './anna-generic-table-lib/components/anna-non-editable-generic-table/anna-non-editable-generic-table.component';
+import { AnnaSortComponent } from './anna-generic-table-lib/components/anna-sort/anna-sort.component';
+import { AnnaTableVirtualScrollViewportComponent } from './anna-generic-table-lib/components/anna-table-virtual-scroll-viewport/anna-table-virtual-scroll-viewport.component';
+import { AnnaFixedRowSizeTableVirtualScrollStrategyDirective } from './anna-generic-table-lib/directives/anna-fixed-row-size-table-virtual-scroll-strategy';
+import { AnnaVirtualTableDirective } from './anna-generic-table-lib/directives/anna-virtual-table';
+import { AnnaTypeofDataPipe } from './anna-core-shared-lib/pipes/annaTypeOfData.pipe';
+import { AnnaReplaceCharPipe } from './anna-core-shared-lib/pipes/annaReplaceChar.pipe';
+import { DigitOnlyDirective } from './anna-core-shared-lib/directives/digits-only/digits-only.directive';
+
+@NgModule({
+  declarations: [
+    AnnaNoDataComponent,
+    AnnaFilterSearchedTextPipe,
+    AnnaConvertZeroOrNullOrUndefinedPipe,
+    AnnaTypeofDataPipe,
+    AnnaFilterSearchedTextPipe,
+    AnnaReplaceCharPipe,
+    AnnaBuyerApprovalIconTemplateComponent,
+    AnnaLiveIconTemplateComponent,
+    AnnaNotifyIconTemplateComponent,
+    AnnaPayForPerformanceIconTemplateComponent,
+    AnnaRejectedIconTemplateComponent,
+    showEllipsisTextOnHoverDirective,
+    AnnaIconColumnComponent,
+    AnnaWeekCalendarComponent,
+    AnnaCalendarFilterComponent,
+    AnnaSortComponent,
+    AnnaVirtualTableDirective,
+    AnnaNonEditableGenericTableComponent,
+    AnnaTableVirtualScrollViewportComponent,
+    AnnaFixedRowSizeTableVirtualScrollStrategyDirective,
+    DigitOnlyDirective
+  ],
+  imports: [
+    CommonModule,
+    NgbModule,
+    FormsModule,
+    MatRadioModule,
+    MatButtonToggleModule,
+    MatTableModule,
+    NgxSliderModule,
+    NgxSkeletonLoaderModule,
+    ScrollingModule,
+    NgCircleProgressModule.forRoot({
+      radius: 100,
+      outerStrokeWidth: 16,
+      innerStrokeWidth: 8,
+      outerStrokeColor: '#78C000',
+      innerStrokeColor: '#C7E596',
+      animationDuration: 300,
+    }),
+  ],
+  exports : [
+    AnnaNoDataComponent,
+    AnnaFilterSearchedTextPipe,
+    AnnaConvertZeroOrNullOrUndefinedPipe,
+    AnnaTypeofDataPipe,
+    AnnaReplaceCharPipe,
+    AnnaFilterSearchedTextPipe,
+    AnnaBuyerApprovalIconTemplateComponent,
+    AnnaLiveIconTemplateComponent,
+    AnnaNotifyIconTemplateComponent,
+    AnnaPayForPerformanceIconTemplateComponent,
+    AnnaRejectedIconTemplateComponent,
+    showEllipsisTextOnHoverDirective,
+    AnnaIconColumnComponent,
+    AnnaWeekCalendarComponent,
+    AnnaCalendarFilterComponent,
+    AnnaSortComponent,
+    AnnaVirtualTableDirective,
+    AnnaNonEditableGenericTableComponent,
+    AnnaTableVirtualScrollViewportComponent,
+    AnnaFixedRowSizeTableVirtualScrollStrategyDirective,
+    DigitOnlyDirective
+  ]
+})
+export class AnnaCoreModule { }

package/src/lib/anna-dropdown-lib/components/anna-calendar-filter/anna-calendar-filter.component.html

@@ -0,0 +1,46 @@
+<!-- container="body"
+datepickerClass = "calendar-filter" -->
+                 
+<p class="calendar-label">{{label | titlecase }}</p>
+<form>
+    <div class="col-12">
+      <div class="dp-hidden position-absolute">
+        <div class="input-group">
+          <input name="datepicker"
+                 class="form-control"
+                 ngbDatepicker
+                 #datepicker="ngbDatepicker"
+                 (dateSelect)="onDateSelection($event)"
+                 [displayMonths]="1"
+                 [dayTemplate]="t"
+                 [maxDate]="maxDate"
+                 [minDate]="minDate"
+                 [autoClose]="'outside'"
+                 [startDate]="fromDate"
+                 navigation="select"
+                 >
+          <ng-template #t let-date let-focused="focused">
+            <span class="custom-day"
+                  [class.focused]="focused"
+                  [class.range]="isRange(date)"
+                  [class.faded]="isHovered(date) || isInside(date)"
+                  (mouseenter)="hoveredDate = date"
+                  (mouseleave)="hoveredDate = null">
+              {{ date.day }}
+            </span>
+          </ng-template>
+        </div>
+      </div>
+      <div class="input-group">
+        <input #dpFromDate
+               id = "datepicker-input"
+               class="form-control" placeholder="mm/dd/yyyy"
+               readonly
+               name="dpFromDate"
+               [value]="dateToBeShownInInput"
+        >
+        <button class="icon-container" (click)="datepicker.toggle()" type="button"><i class="mdi mdi-calendar-range"></i></button>
+      </div>
+    </div>
+</form>
+

package/src/lib/anna-dropdown-lib/components/anna-calendar-filter/anna-calendar-filter.component.scss

@@ -0,0 +1,153 @@
+@import "fonts", "colors";
+
+:host::ng-deep div.ngb-dp-arrow.right {
+  width: 2.4375rem !important;
+  background-color: white !important;
+}
+
+:host::ng-deep div.ngb-dp-weekday {
+  color: $oliveGreen;
+  border-top: 1px solid rgba(183, 183, 183, 0.6);
+  margin-top: 0.5rem;
+  @include fonts(Roboto, 0.8125rem, normal, bold, normal, 2.6, normal);
+}
+
+:host::ng-deep div.ngb-dp-week {
+  background-color: white !important;
+}
+
+:host::ng-deep div.ngb-dp-header {
+  background-color: white !important;
+}
+
+:host::ng-deep div.bg-primary {
+  background-color: $lightGray-9 !important;
+  border-radius: 0.25rem;
+}
+
+:host::ng-deep .ngb-dp-arrow-btn:focus {
+  outline-width: 0px;
+}
+:host::ng-deep .right .ngb-dp-navigation-chevron,
+:host::ng-deep .ngb-dp-navigation-chevron {
+  color: black;
+}
+
+:host::ng-deep .custom-select {
+  border: 1px solid rgba(183, 183, 183, 0.6);
+  box-shadow: none;
+}
+
+:host::ng-deep .btn:focus {
+  box-shadow: none;
+}
+
+// div {
+//   margin: 0 0.3125rem;
+// }
+
+.custom-day {
+  text-align: center;
+  padding: 0.185rem 0.25rem;
+  color: black;
+  display: inline-block;
+  height: 2rem;
+  width: 2rem;
+}
+.custom-day.focused {
+  background-color: $lightGray-5;
+}
+.custom-day.range {
+  background-color: $primary-color;
+  // border-radius: $fs-4;
+  color: white;
+  // font-weight: 600;
+}
+
+.custom-day:hover {
+  background-color: $lightGray-9;
+  border-radius: 0.25rem;
+  color: $gray74;
+}
+
+:host::ng-deep div.ngb-dp-day.disabled {
+  cursor: not-allowed;
+}
+
+.custom-day.faded {
+  background-color: rgba(38, 139, 255, 0.2);
+  color: black;
+  font-weight: 600;
+}
+:host::ng-deep div.ngb-dp-week div.ngb-dp-day.disabled .custom-day {
+  color: $gray74;
+  opacity: 50%;
+}
+
+@mixin button-text {
+  text-align: center;
+  outline: none;
+  @include fonts(Roboto, 0.875rem, normal, normal, normal, 1.14, normal);
+}
+
+.buttons {
+  display: flex;
+  margin: 0px auto 0.4375rem;
+  margin-bottom: 0;
+  justify-content: center;
+  button.btn:disabled {
+    background: $gray74;
+    opacity: 0.5;
+    color: $charcoal;
+  }
+  .btn {
+    display: inline-block;
+    // width: 50%;
+    margin: 8px 4px 0 8px;
+    padding: 5px 16px;
+    // border-radius: 4px;
+    @include button-text();
+    border: none;
+    color: #268bff;
+    background-color: #e5f1ff;
+  }
+  .btn:last-of-type {
+    background-color: $primary-color;
+    color: white;
+  }
+}
+
+:host::ng-deep .ngb-dp-day {
+  font-weight: bold;
+}
+
+
+input#datepicker-input, button.icon-container{
+  background: white;
+  border: none;
+}
+
+input#datepicker-input{
+  color: #202b47;
+  @include fonts(Roboto, 14px, normal, normal, normal, normal, normal);
+}
+
+input#datepicker-input:focus{
+  box-shadow: none;
+}
+
+
+div.input-group{
+  border: 1px solid #b7b7b7;
+  border-radius: 2px;
+  width: 94%;
+}
+
+.calendar-label{
+  @include fonts(Roboto, 12px, normal, normal, normal, normal, normal);
+  color: #666;
+  margin-top: 7px;
+  margin-bottom: 0;
+  text-align: left;
+  margin-left: 15px;
+}