@annalib/anna-core 0.0.2 → 0.0.3

package/src/lib/anna-generic-table-lib/components/anna-sort/anna-sort.component.html

@@ -0,0 +1,47 @@
+<p class="sort">
+    <i
+        class="mdi mdi-sort"
+        [ngClass]="{
+            active: this.annaSortService.sortByDesc.get(this.sortBy) || this.annaSortService.sortByAsc.get(this.sortBy),
+            disable: disableSort
+        }"
+        [ngbTooltip]="sortTooltip"
+        placement="{{ placement != undefined ? 'auto' : 'bottom' }}"
+        container="body"
+        [autoClose]="true"
+        triggers="manual"
+        #sort="ngbTooltip"
+        (click)="bindTheValueToToolTip(sort)"
+    ></i>
+</p>
+
+<ng-template #sortTooltip>
+    <section class="sort-container">
+        <div>
+            <input
+                type="radio"
+                id="ascending"
+                [ngModel]="selectedRadio"
+                name="sortToolTip"
+                value="ascending"
+                (click)="sortByAscending()"
+            />
+            <label for="ascending">Ascending</label>
+        </div>
+        <div>
+            <input
+                type="radio"
+                id="descending"
+                [ngModel]="selectedRadio"
+                name="sortToolTip"
+                value="descending"
+                (click)="sortByDescending()"
+            />
+            <label for="descending">Descending</label>
+        </div>
+        <div>
+            <input type="radio" id="none" [ngModel]="selectedRadio" name="sortToolTip" value="none" (click)="removeSorting()" />
+            <label for="none">None</label>
+        </div>
+    </section>
+</ng-template>

package/src/lib/anna-generic-table-lib/components/anna-sort/anna-sort.component.scss

@@ -0,0 +1 @@
+@import "../../../anna-core-shared-lib/scss/sort";

package/src/lib/anna-generic-table-lib/components/anna-sort/anna-sort.component.spec.ts

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

package/src/lib/anna-generic-table-lib/components/anna-sort/anna-sort.component.ts

@@ -0,0 +1,126 @@
+// Angular import statements
+import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
+
+// Third party import statements
+import { cloneDeep } from "lodash-es";
+
+// User defined import statements
+
+//sub-entries of anna lib import statement
+import { AnnaSortService } from "@annalib/anna-core/src/lib/anna-core-shared-lib";;
+
+
+
+@Component({
+    selector: "anna-core-sort-lib",
+    templateUrl: "./anna-sort.component.html",
+    styleUrls: ["./anna-sort.component.scss"]
+})
+export class AnnaSortComponent {
+    @Input() data: any;
+    @Input() sortBy: string;
+    @Input() disableSort: boolean;
+    @Input("placement") placement: string;
+    selectedRadio: string;
+    clonedData: any[];
+    firstSortApplied: boolean = false;
+    @Output("sort") sortedData = new EventEmitter();
+
+    constructor(public annaSortService: AnnaSortService) {}
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if(!this.firstSortApplied && changes['data'] && changes['data'].currentValue){
+          this.clonedData = cloneDeep(this.data);
+        }
+    }
+
+    isFirstTimeSorting(){
+        this.firstSortApplied = true;
+        this.clonedData = cloneDeep(this.data);
+    }
+
+    sortByAscending() {
+        if (!this.firstSortApplied) {
+            this.isFirstTimeSorting();
+        }
+
+        const isAsc = true;
+
+        if (this.sortBy === "dates") {
+            this.sortBy = "startDate";
+        }
+        this.setAscState();
+        this.setDescState();
+        this.annaSortService.sortByAsc.set(this.sortBy, true);
+        this.annaSortService.isAsc = true;
+        this.annaSortService.keySorted = this.sortBy;
+        this.sortedData.emit(this.annaSortService.sort(isAsc, this.data, this.sortBy));
+        this.closeTooltip();
+    }
+
+    sortByDescending() {
+        if (!this.firstSortApplied) {
+            this.isFirstTimeSorting();
+        }
+        const isAsc = false;
+        if (this.sortBy === "dates") {
+            this.sortBy = "endDate";
+        }
+
+        this.setDescState();
+        this.setAscState();
+        this.annaSortService.sortByDesc.set(this.sortBy, true);
+        this.annaSortService.isAsc = false;
+        this.annaSortService.keySorted = this.sortBy;
+        this.sortedData.emit(this.annaSortService.sort(isAsc, this.data, this.sortBy));
+        this.closeTooltip();
+    }
+
+    setAscState() {
+        this.annaSortService.sortByAsc.forEach((value, key) => {
+            this.annaSortService.sortByAsc.set(key, false);
+        });
+    }
+
+    setDescState() {
+        this.annaSortService.sortByDesc.forEach((value, key) => {
+            this.annaSortService.sortByDesc.set(key, false);
+        });
+    }
+
+    removeSorting() {
+        this.firstSortApplied = false;
+        this.annaSortService.sortByAsc = new Map();
+        this.annaSortService.sortByDesc = new Map();
+        this.sortedData.emit({ data: this.clonedData, type: "none" });
+        this.closeTooltip();
+    }
+
+    bindTheValueToToolTip(tooltip: any) {
+        if (this.annaSortService.tooltip == tooltip) {
+            this.closeTooltip();
+        } else {
+            this.closeTooltip();
+            this.annaSortService.tooltip = tooltip;
+            this.annaSortService.tooltip.open();
+            this.selectRadioButton();
+        }
+    }
+
+    selectRadioButton() {
+        if (this.annaSortService.sortByAsc.has(this.sortBy) && this.annaSortService.sortByAsc.get(this.sortBy)) {
+            this.selectedRadio = "ascending";
+        } else if (this.annaSortService.sortByDesc.has(this.sortBy) && this.annaSortService.sortByDesc.get(this.sortBy)) {
+            this.selectedRadio = "descending";
+        } else {
+            this.selectedRadio = "none";
+        }
+    }
+
+    closeTooltip() {
+        if (this.annaSortService.tooltip && this.annaSortService.tooltip.isOpen()) {
+            this.annaSortService.tooltip.close();
+        }
+        this.annaSortService.tooltip = null;
+    }
+}

package/src/lib/anna-generic-table-lib/components/anna-table-virtual-scroll-viewport/anna-table-virtual-scroll-viewport.component.html

@@ -0,0 +1,13 @@
+<!--
+  Wrap the rendered content in an element that will be used to offset it based on the scroll
+  position.
+-->
+<div #contentWrapper class="anna-table-virtual-scroll-content-wrapper">
+	<ng-content></ng-content>
+</div>
+<!--
+  Spacer used to force the scrolling container to the correct size for the *total* number of items
+  so that the scrollbar captures the size of the entire data set.
+-->
+<div class="app-table-virtual-scroll-spacer" [style.width]="_totalContentWidth" [style.height]="_totalContentHeight">
+</div>

package/src/lib/anna-generic-table-lib/components/anna-table-virtual-scroll-viewport/anna-table-virtual-scroll-viewport.component.scss

@@ -0,0 +1,88 @@
+// When elements such as `<tr>` or `<li>` are repeated inside the cdk-virtual-scroll-viewport,
+// their container element (e.g. `<table>`, `<ul>`, etc.) needs to be placed in the viewport as
+// well. We reset some properties here to prevent these container elements from introducing
+// additional space that would throw off the scrolling calculations.
+@mixin _cdk-virtual-scroll-clear-container-space($direction) {
+  $start: if($direction == horizontal, "left", "top");
+  $end: if($direction == horizontal, "right", "bottom");
+
+  & > dl:not([cdkVirtualFor]),
+  & > ol:not([cdkVirtualFor]),
+  & > table:not([cdkVirtualFor]),
+  & > ul:not([cdkVirtualFor]) {
+    padding: {
+      #{$start}: 0;
+      #{$end}: 0;
+    }
+    margin: {
+      #{$start}: 0;
+      #{$end}: 0;
+    }
+    border: {
+      #{$start}-width: 0;
+      #{$end}-width: 0;
+    }
+    outline: none;
+  }
+}
+
+// Scrolling container.
+anna-table-virtual-scroll-viewport {
+  display: block;
+  position: relative;
+  overflow: auto;
+  contain: strict;
+  // transform: translateZ(0);
+  will-change: scroll-position;
+  -webkit-overflow-scrolling: touch;
+
+}
+
+// Wrapper element for the rendered content. This element will be transformed to push the rendered
+// content to its correct offset in the data set as a whole.
+.anna-table-virtual-scroll-content-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  contain: content;
+  // Note: We can't put `will-change: transform;` here because it causes Safari to not update the
+  // viewport's `scrollHeight` when the spacer's transform changes.
+
+  [dir="rtl"] & {
+    right: 0;
+    left: auto;
+  }
+}
+
+.app-table-virtual-scroll-orientation-horizontal
+  .anna-table-virtual-scroll-content-wrapper {
+  min-height: 100%;
+  @include _cdk-virtual-scroll-clear-container-space(horizontal);
+}
+
+.app-table-virtual-scroll-orientation-vertical
+  .anna-table-virtual-scroll-content-wrapper {
+  min-width: 100%;
+  @include _cdk-virtual-scroll-clear-container-space(vertical);
+}
+
+// Spacer element that whose width or height will be adjusted to match the size of the entire data
+// set if it were rendered all at once. This ensures that the scrollable content region is the
+// correct size.
+.app-table-virtual-scroll-spacer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1px;
+  width: 1px;
+  transform-origin: 0 0;
+
+  // Note: We can't put `will-change: transform;` here because it causes Safari to not update the
+  // viewport's `scrollHeight` when the spacer's transform changes.
+
+  [dir="rtl"] & {
+    right: 0;
+    left: auto;
+    transform-origin: 100% 0;
+  }
+}

package/src/lib/anna-generic-table-lib/components/anna-table-virtual-scroll-viewport/anna-table-virtual-scroll-viewport.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnnaTableVirtualScrollViewportComponent } from './anna-table-virtual-scroll-viewport.component';
+
+describe('AnnaTableVirtualScrollViewportComponent', () => {
+  let component: AnnaTableVirtualScrollViewportComponent;
+  let fixture: ComponentFixture<AnnaTableVirtualScrollViewportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AnnaTableVirtualScrollViewportComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnnaTableVirtualScrollViewportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});