@annalib/anna-core 0.0.2 → 0.0.3

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-sort.service.ts

@@ -0,0 +1,200 @@
+// Angular import statements
+import { Injectable } from "@angular/core";
+import { AnnaDateTimeFormatService } from './anna-date-time-format.service';
+
+// Third party import statements
+
+// User defined import statements
+import { Days, Constants} from "../constants/shared.constant";
+
+@Injectable({
+  providedIn: "root",
+})
+export class AnnaSortService {
+  sortByAsc: Map<string, boolean> = new Map();
+  sortByDesc: Map<string, boolean> = new Map();
+  dateSet = new Set(["endDate", "startDate", "end_date", "start_date", "flightStartDate", "flightEndDate"]);
+  tooltip: any;
+  keySorted: string;
+  isAsc: boolean;
+
+  constructor(private annaDateTimeFormatService: AnnaDateTimeFormatService) {
+    console.log("AnnaTableColumnSortService sevice created.")
+   }
+
+  checkIfSortingIsApplied(sortMap: Map<string, boolean>, setValueTo: boolean) {
+    let obj: { key: string, setValueTo: any } = { key: "", setValueTo: null };
+
+    for (let [key, value] of sortMap.entries()) {
+      if (value) {
+        obj = { key, setValueTo };
+        break;
+      }
+    }
+    return obj;
+  }
+
+  sort(isAsc: boolean, data: any[], sortBy: string) {
+    const dataToExclude: any[] = [];
+    const dataToInclude: any[] = [];
+    let param1: string | number;
+    let param2: string | number;
+    if (this.dateSet.has(sortBy)) {
+      data.sort((a, b) => {
+        return this.annaDateTimeFormatService.compareDate(a[sortBy], b[sortBy], isAsc);
+      });
+    }
+    else if (sortBy === "AirDateAndTime") {
+      data.sort((a, b) => {
+        let first, second;
+        if (a[sortBy] == "-") {
+          return 1;
+        }
+        if (b[sortBy] == "-") {
+          return -1;
+        }
+        else {
+          first = this.annaDateTimeFormatService.formatDateAndHHMMATimeToStandardFormat(a[sortBy]);
+          second = this.annaDateTimeFormatService.formatDateAndHHMMATimeToStandardFormat(b[sortBy]);
+          let compareDate = this.annaDateTimeFormatService.compareDate(first, second, isAsc)
+          return compareDate;
+        }
+      });
+    }
+    else if (sortBy === "startEndTime" || sortBy === "TimeBand") {
+      data.sort((a, b) => {
+        if (isAsc) {
+          param1 = a[sortBy][1];
+          param2 = b[sortBy][1];
+        } else {
+          param1 = a[sortBy][2];
+          param2 = b[sortBy][2];
+        }
+        let val = isAsc
+          ? this.annaDateTimeFormatService.sortByTimeAscending(param1, param2)
+          : this.annaDateTimeFormatService.sortByTimeDescending(param1, param2);
+        return val;
+      });
+    } else if (sortBy === "days") {
+      data.sort((a, b) => {
+        param1 = a[sortBy].includes("-") ? Days[a[sortBy].split("-")[0]] : Days[a[sortBy]];
+        param2 = b[sortBy].includes("-") ? Days[b[sortBy].split("-")[0]] : Days[b[sortBy]];
+        return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
+      });
+    }
+    //sort by string or number
+    else {
+      data.forEach((a) => {
+        // if(a['sort'] == undefined) //
+        //for component other than enter/edit lur page
+        if (!("sort" in a)) {
+          dataToInclude.push(a);
+        }
+        //for enter/edit lur page
+        else {
+          dataToExclude.push(a);
+        }
+      });
+
+      data = [];
+      data = dataToInclude;
+      data.sort((a, b): number => {
+        param1 = a[sortBy];
+        param2 = b[sortBy];
+
+        if (Array.isArray(a[sortBy])) {
+          param1 = a[sortBy][0] === "-" ? 0 : a[sortBy][0];
+          if (a[sortBy][0].includes(Constants.dollars)) {
+            param1 = +a[sortBy][0].split(Constants.dollars)[1];
+          }
+        }
+
+        if (Array.isArray(b[sortBy])) {
+          param2 = b[sortBy][0] == "-" ? 0 : b[sortBy][0];
+          if (b[sortBy][0].includes(Constants.dollars)) {
+            param2 = +b[sortBy][0].split(Constants.dollars)[1];
+          }
+        }
+
+        if (param1 !== param2) {
+          return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
+        }
+        // CHANGES@ANNALIB changed it to from false to 0
+        return 0;
+      });
+
+      if (dataToExclude.length > 0) {
+        if (sortBy.includes("_")) {
+          let keys: any = sortBy.split("_");
+          let weekNumber = keys[0];
+          let sortKey = keys[1];
+          if (keys.length > 2) {
+            sortKey = keys[2] == true ? "BookedAurIncludingNoChargeSpots" : "BookedAurExcludingNoChargeSpots";
+          }
+          dataToExclude.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 {
+          dataToExclude.sort((a, b) => {
+            param1 = a[sortBy];
+            param2 = b[sortBy];
+
+            if (param1 !== param2) {
+              return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
+            }
+
+            return 0;
+          });
+        }
+      }
+    }
+    return { data: [...data, ...dataToExclude], type: isAsc };
+  }
+
+  callSort(data: any[]) {
+    let sortBy = null;
+    let isAsc: boolean;
+    this.sortByAsc.forEach((value, key) => {
+        if (value === true) {
+            sortBy = key;
+            isAsc = true;
+        }
+    });
+    if (sortBy == null) {
+        this.sortByDesc.forEach((value, key) => {
+            if (value === true) {
+                sortBy = key;
+                isAsc = false;
+            }
+        });
+    }
+    if (sortBy != null) {
+        return this.sort(isAsc, data, sortBy).data;
+    } else {
+        return data;
+    }
+}
+
+
+}

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

@@ -0,0 +1,31 @@
+// Angular import statements
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// Third party import statements
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+// User defined import statements
+import { AnnaWeekCalendarComponent } from './components/anna-week-calendar-filter/anna-week-calendar-filter.component';
+import { AnnaCalendarFilterComponent } from './components/anna-calendar-filter/anna-calendar-filter.component';
+
+//sub-entries of anna lib import statement
+import { AnnaCoreSharedLibModule } from '@annalib/anna-core/src/lib/anna-core-shared-lib';
+
+@NgModule({
+  declarations: [
+    AnnaWeekCalendarComponent,
+    AnnaCalendarFilterComponent
+  ],
+  imports: [
+    CommonModule,
+    NgbModule,
+    AnnaCoreSharedLibModule
+  ],
+  exports: [
+    AnnaWeekCalendarComponent,
+    AnnaCalendarFilterComponent
+  ]
+
+})
+export class AnnaDropdownLibModule { }

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

@@ -0,0 +1,29 @@
+<ngb-datepicker
+    class="custom-datepicker"
+    #dp
+    [maxDate]="maxDate"
+    [minDate]="minDate"
+    [displayMonths]="1"
+    [dayTemplate]="t"
+    [startDate]="fromDate"
+    (dateSelect)="onDateSelection($event)"
+    navigation="select"
+>
+</ngb-datepicker>
+<div class="buttons">
+    <button class="btn" (click)="cancelSelection()">Cancel</button>
+    <button class="btn" (click)="applySelection()" [disabled]="disableApplyBtn">Apply</button>
+</div>
+
+<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>

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

@@ -0,0 +1,122 @@
+@import "../../../anna-core-shared-lib/scss/fonts", "../../../anna-core-shared-lib/scss/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;
+}

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

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+
+import { AnnaCalendarFilterComponent } from "./anna-calendar-filter.component";
+
+describe("OrderListingCalendarFilterComponent", () => {
+    let component: AnnaCalendarFilterComponent;
+    let fixture: ComponentFixture<AnnaCalendarFilterComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [AnnaCalendarFilterComponent],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AnnaCalendarFilterComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,76 @@
+// Angular import statements
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { NgbDate } from "@ng-bootstrap/ng-bootstrap";
+
+@Component({
+    selector: "anna-core-calendar-filter-lib",
+    templateUrl: "./anna-calendar-filter.component.html",
+    styleUrls: ["./anna-calendar-filter.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AnnaCalendarFilterComponent implements OnInit {
+    // @ViewChild(NgbDatepicker) datepicker: NgbDatepicker;
+    @Input() maxDate: any;
+    @Input() minDate: any;
+    @Input() showDate: any;
+    @Output() selectedDate = new EventEmitter();
+    @Input() selectedFromDate: any;
+    @Input() selectedToDate: any;
+    @Output() apply = new EventEmitter();
+    @Output() cancel = new EventEmitter();
+    fromDate: any;
+    toDate: any;
+    hoveredDate: any;
+    disableApplyBtn: boolean = false;
+    constructor() {}
+
+    ngOnInit() {
+        this.fromDate = this.selectedFromDate;
+        this.toDate = this.selectedToDate;
+    }
+
+    dateSelected(event: any) {
+        this.selectedDate.emit(event);
+    }
+
+    onDateSelection(date: NgbDate) {
+        if (!this.fromDate && !this.toDate) {
+            this.fromDate = date;
+        } else if (this.fromDate && !this.toDate && (date.after(this.fromDate) || date.equals(this.fromDate))) {
+            this.toDate = date;
+        } else {
+            this.toDate = null;
+            this.fromDate = date;
+        }
+        this.disableCalendarApplyBtn();
+    }
+
+    isHovered(date: NgbDate) {
+        return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
+    }
+
+    isInside(date: NgbDate) {
+        return this.toDate && date.after(this.fromDate) && date.before(this.toDate);
+    }
+
+    isRange(date: NgbDate) {
+        return (
+            date.equals(this.fromDate) || (this.toDate && date.equals(this.toDate)) || this.isInside(date) || this.isHovered(date)
+        );
+    }
+
+    cancelSelection() {
+        this.cancel.emit();
+    }
+
+    applySelection() {
+        if (this.fromDate && this.toDate) {
+            let dateObj = { fromDate: this.fromDate, toDate: this.toDate };
+            this.apply.emit(dateObj);
+        }
+    }
+
+    disableCalendarApplyBtn() {
+        this.disableApplyBtn = !(this.fromDate && this.toDate);
+    }
+}