@colijnit/sharedcomponents 1.0.54 → 1.0.56

package/projects/sharedcomponents/src/lib/components/tags/component/treeview/model/tree-view-node-item.ts

@@ -0,0 +1,132 @@
+import {TreeObject} from "../../../../../model/tree-object";
+import {CssUtils} from "../../../../../utils/css-utils";
+import {CoDocument} from "@colijnit/corecomponents_v12/lib/core/model/co-document.bo";
+import {TreeViewNode} from "../../../../../model/tree-view-node-default.model";
+import {Icon} from "../../../../../enum/icon.enum";
+
+export class TreeViewNodeItem extends TreeViewNode {
+
+    private _data: TreeObject;
+
+    private _code: string;
+    private _description: string;
+
+    private _img: CoDocument;
+    private _icon: Icon;
+    private _disabled: boolean;
+    private _customColor: string;
+
+    public constructor() {
+        super();
+        this.setChildren([]); // because the plugin leaves it undefined ...
+    }
+
+    protected filterCondition(term: any): boolean {
+        return this.title.toLowerCase().indexOf(term) !== -1;
+    }
+
+    public styles(): any {
+        return {
+            "padding-left": this.getLevel() * 10 + "px"
+        };
+    }
+
+    public customColors(focusId: number): any {
+        if (this.customColor != null && focusId !== this.getId()) {
+            return {
+                "background-color": "" + CssUtils.DbRgbColorStringToCssRgbColor(this.customColor)
+            };
+        } else {
+            return "";
+        }
+    }
+
+    public iconClass(focusId: number): any {
+        return {
+            "dark": this.customColor == null && focusId !== this.getId(),
+            "light": this.customColor != null || focusId === this.getId()
+        };
+    }
+
+    public classes(focusId: number): any {
+        return {
+            "first-item": this.isFirst(),
+            "last-item": this.isLast(),
+            "middle-item": !this.isFirst() && !this.isLast(),
+            "focus-item": focusId === this.getId(),
+            "disable": this.isDisabled(),
+            "custom-colors": this.hasCustomColors()
+        };
+    }
+
+    public get data(): TreeObject {
+        return this._data;
+    }
+
+    public setData(value: TreeObject): TreeViewNodeItem {
+        this._data = value;
+        return this;
+    }
+
+    public get code(): string {
+        return this._code;
+    }
+
+    public setCode(value: string): TreeViewNodeItem {
+        this._code = value;
+        return this;
+    }
+
+    public get description(): string {
+        return this._description;
+    }
+
+    public setDescription(value: string): TreeViewNodeItem {
+        this._description = value;
+        return this;
+    }
+
+    public get img(): CoDocument {
+        return this._img;
+    }
+
+    public setImg(value: CoDocument): TreeViewNodeItem {
+        this._img = value;
+        return this;
+    }
+
+    public isDisabled(): boolean {
+        return this._disabled;
+    }
+
+    public setDisabled(value: boolean): TreeViewNodeItem {
+        this._disabled = value;
+        return this;
+    }
+
+    public hasCustomColors(): boolean {
+        return this._customColor != null;
+    }
+
+    public get customColor(): string {
+        return this._customColor;
+    }
+
+    public setCustomColor(value: string): TreeViewNodeItem {
+        this._customColor = value;
+        return this;
+    }
+
+    public hasIcon(): boolean {
+        return this._icon != null;
+    }
+
+    public get icon(): string {
+        return this._icon;
+    }
+
+    public setIcon(value: Icon): TreeViewNodeItem {
+        this._icon = value;
+        return this;
+    }
+}

package/projects/sharedcomponents/src/lib/components/tags/component/treeview/treeview.component.ts

@@ -0,0 +1,258 @@
+import {AfterContentInit, AfterViewInit, Component, DoCheck, Input, OnInit, ViewEncapsulation} from "@angular/core";
+import {TreeViewNodeItem} from "./model/tree-view-node-item";
+import {TreeUtils} from "../../../../utils/tree-utils";
+import {TreeViewNodeItemOptions} from "../../../../model/tree-view-node-item-options.model";
+import {TreeObject} from "../../../../model/tree-object";
+import {TreeView} from "../../../../model/tree-view-default.model";
+import {Icon} from "../../../../enum/icon.enum";
+import {isNill} from "../../../../utils/is-nill.function";
+
+@Component({
+    selector: "treeview",
+    template: `
+<!--        <div class="tree-view" scrollable>-->
+<!--            <ng-tree-view #baseTreeView [tree]="this.tree"-->
+<!--                          [treeViewHeaderTemplate]="ioneTreeViewHeader"-->
+<!--                          [treeViewNodeTemplate]="ioneTreeViewNode">-->
+<!--            </ng-tree-view>-->
+<!--        </div>-->
+        <!-- Header Definition -->
+        <ng-template #ioneTreeViewHeader
+                     let-tree="tree"
+                     let-filter="filter">
+            <div class="tree-header"></div>
+        </ng-template>
+        <!-- Node Definition-->
+        <ng-template #ioneTreeViewNode
+                     let-node="node">
+            <!-- Group all node elements -->
+            <div *ngIf="node.isFiltered()"
+                 class="tree-node-group"
+                 id="n{{ node.getId() }}" (click)="setSelectedNode(node)" (dblclick)="node.toggle()"
+                 [class.expanded]="node.isExpanded() && node.getChildren().length > 0"
+                 [ngStyle]="node.styles()">
+                <!-- Expand button -->
+                <div *ngIf="node.getChildren().length > 0" class="tree-node-fork" (click)="node.toggle()">
+                    <icon class="expand-fork" icon="triangle_up"></icon>
+                </div>
+                <!-- BusinessObject data -->
+                <div class="tree-node-row"
+                     [draggable]="determineDragId(node)" [draggableObject]="determineDragSource(node)"
+                     [ngStyle]="node.customColors(selectedId)"
+                     [ngClass]="node.classes(selectedId)"
+                     [class.selected]="isSelectedNode(node)">
+                    <div *ngIf="node.img" class="tree-node-img">
+                        <doc-image *ngIf="node.img" [docId]="node.img.documentId"></doc-image>
+                    </div>
+                    <icon *ngIf="node.hasIcon() && !node.img" [ngClass]="node.iconClass(selectedId)"
+                          class="tree-node-icon" [icon]="node.icon"></icon>
+                    <div class="text-primary value-text">
+                        {{ node.description}}
+                    </div>
+                </div>
+            </div>
+            <!-- Node Children Definition-->
+            <div *ngIf="node.isExpanded()">
+                <div *ngFor="let child of node.getChildren()">
+                    <ng-tree-view-node [treeViewNodeTemplate]="ioneTreeViewNode"
+                                       [node]="child"></ng-tree-view-node>
+                </div>
+            </div>
+        </ng-template>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class TreeviewComponent implements OnInit, AfterContentInit, AfterViewInit, DoCheck {
+    @Input()
+    public testmode: boolean;
+
+    @Input()
+    public autoSelectFirstRow: boolean;
+
+    @Input()
+    public selectable: boolean;
+
+    @Input()
+    public selectOnlyLeafNodes: boolean;
+
+    @Input()
+    public allowDraggable: boolean;
+
+    @Input()
+    public dragOnlyLeafNodes: boolean;
+
+    @Input()
+    public expandNodesOnInit: boolean;
+
+    @Input()
+    public data: TreeObject[] = [];
+
+    @Input()
+    public set filterTerm(value: string) {
+        this.applyFilter(value);
+    }
+
+    @Input()
+    public set idField(value: string) {
+        this._idField = value;
+    }
+
+    @Input()
+    public set parentIdField(value: string) {
+        this._parentIdField = value;
+    }
+
+    @Input()
+    public set descriptionField(value: string) {
+        this._descriptionField = value;
+    }
+
+    @Input()
+    public set colorField(value: string) {
+        this._colorField = value;
+    }
+
+    @Input()
+    public set imgField(value: string) {
+        this._imgField = value;
+    }
+
+    @Input()
+    public set iconField(value: string) {
+        this._iconField = value;
+    }
+
+    @Input()
+    public set leafIcon(value: Icon) {
+        this._leafIcon = value;
+    }
+
+    @Input()
+    public set leafConditionField(value: string) {
+        this._leafConditionField = value;
+    }
+
+    public get tree(): TreeView {
+        return this._tree;
+    }
+
+    public get selectedId(): number {
+        return (this._selectedNode != null) ? this._selectedNode.getId() : -1;
+    }
+
+    private _idField: string = "id";
+    private _parentIdField: string = "parentId";
+    private _descriptionField: string = "description";
+    private _colorField: string;
+    private _imgField: string;
+    private _iconField: string;
+    private _leafIcon: Icon;
+    private _leafConditionField: string;
+
+    private _tree: TreeView;
+    private _nodes: TreeViewNodeItem[] = [];
+    private _selectedNode: TreeViewNodeItem;
+    private _lastDataLength: number = 0;
+
+    constructor() {
+    }
+
+    ngOnInit(): void {
+        this._tree = new TreeView();
+    }
+
+    ngAfterContentInit(): void {
+        this._updateTree();
+        if (this.autoSelectFirstRow && this.selectable && this._nodes.length > 0) {
+            this.setSelectedNode(this._nodes[0]);
+        }
+    }
+
+    ngAfterViewInit(): void {
+        if (this.expandNodesOnInit && this._nodes) {
+            this._nodes.forEach(node => node.expand(true));
+        }
+    }
+
+    ngDoCheck(): void {
+        if (this.data && this._lastDataLength !== this.data.length) {
+            this._lastDataLength = this.data.length;
+            this._updateTree();
+        }
+    }
+
+    public determineDragId(node: TreeViewNodeItem): number {
+        if (this.allowDraggable && (!this.dragOnlyLeafNodes || (node.getSize() === 1 && TreeUtils.leafConditionMet(node.data, this._leafConditionField)))) {
+            return node.getId();
+        }
+
+        return null;
+    }
+
+    public determineDragSource(node: TreeViewNodeItem): TreeObject {
+        if (this.allowDraggable && (!this.dragOnlyLeafNodes || (node.getSize() === 1 && TreeUtils.leafConditionMet(node.data, this._leafConditionField)))) {
+            return node.data;
+        }
+
+        return null;
+    }
+
+
+    public setSelectedNode(node: TreeViewNodeItem): void {
+        if (node.isDisabled() || !this.selectable || (this.selectOnlyLeafNodes && (node.getSize() > 1 || !TreeUtils.leafConditionMet(node.data, this._leafConditionField)))) {
+            return;
+        }
+
+        this._selectedNode = node;
+    }
+
+    public isSelectedNode(node: TreeViewNodeItem): boolean {
+        return node === this._selectedNode;
+    }
+
+    public getSelectedNode(): TreeViewNodeItem {
+        return this._selectedNode;
+    }
+
+    public getNodes(): TreeViewNodeItem[] {
+        return this._nodes;
+    }
+
+    public getNodeThatContainsChildWithGivenData(childData: any): TreeViewNodeItem {
+        if (this._nodes) {
+            return this._nodes.find(node => node.containsChildWithGivenData(childData));
+        }
+    }
+
+    private _updateTree(): void {
+        if (this.data == null || this.data.length === 0) {
+            return;
+        } else {
+            this._nodes = TreeUtils.convertToTreeViewItems(this.data, this._treeViewNodeOptions());
+        }
+        this._tree.withNodes(this._nodes);
+    }
+
+    private _treeViewNodeOptions(): TreeViewNodeItemOptions {
+        return {
+            idField: this._idField,
+            parentIdField: this._parentIdField,
+            descriptionField: this._descriptionField,
+            colorField: this._colorField,
+            imgField: this._imgField,
+            iconField: this._iconField,
+            leafIcon: this._leafIcon,
+            leafConditionField: this._leafConditionField
+        };
+    }
+
+    private applyFilter(term: string): void {
+        if (this.tree) {
+            if (isNill(term)) {
+                this.tree.filterTree("");
+            } else {
+                this.tree.filterTree(term);
+            }
+        }
+    }
+}

package/projects/sharedcomponents/src/lib/components/tags/tags.component.ts

@@ -0,0 +1,192 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
+import {TagTreeItem} from "../../model/tag-tree-item.bo";
+import {TagCategory} from "../../enum/tag-category.enum";
+import {isNill} from "../../utils/is-nill.function";
+import {notNill} from "../../utils/function/not-nill.function";
+
+@Component({
+  selector: "sc-tags",
+  template: `
+        <co-collapsible
+          [headerTitle]="'Collapsible Title'"
+
+        >
+          <div class="tag-list-wrapper">
+            <div class="tag-wrapper" *ngFor="let tag of joinedTags">
+              <sc-tag-label [model]="tag.description">
+              </sc-tag-label>
+            </div>
+          </div>
+        </co-collapsible>
+
+          <div class="tags-join-content">
+            <co-collapsible class="tags-available" [headerTitle]="'Collapsible Title 2'">
+              <treeview [selectable]="true"
+                        [selectOnlyLeafNodes]="true"
+                        [allowDraggable]="true"
+                        [dragOnlyLeafNodes]="true"
+                        leafIcon="tag"
+                        leafConditionField="tagId"
+                        colorField="color"
+                        imgField="image"
+                        [data]="allTags"
+                        [filterTerm]="filterTerm"
+              ></treeview>
+            </co-collapsible>
+            <co-collapsible class="tags-joined" (drop)="handleDrop($event)" [headerTitle]="'Collapsible Title 3'">
+              <div class="tag-list-wrapper">
+                <div class="tag-join-wrapper" *ngFor="let tag of tagsToBeJoinedFiltered" (click)="setSelectedTag(tag)">
+                  <tag-join-label [tag]="tag" [selected]="isSelectedTag(tag)" (tagCrossClicked)="deleteClicked($event)">
+                  </tag-join-label>
+                </div>
+              </div>
+            </co-collapsible>
+          </div>
+          <div class="footer">
+            <co-button label="OK" (click)="onOkClick()"></co-button>
+            <co-button label="CANCEL" (click)="hide()"></co-button>
+          </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class TagsComponent {
+
+  public readonly tagTreeItemClass: typeof TagTreeItem = TagTreeItem;
+
+  @Input()
+  public collapseable: boolean = true;
+
+  @Input()
+  public set tagCategory(value: TagCategory) {
+    this._tagCategory = value;
+  }
+
+  @Input()
+  public cfgNameAvailableTags: string;
+
+  @Input()
+  public cfgNameJoinedTags: string;
+
+  @Input()
+  public readonly: boolean = false;
+
+  @Input()
+  @Input()
+  public showPlusButtonIfReadonly: boolean = false;
+
+  @Input()
+  public popupSubHeader: string;
+
+  @Input()
+  public set joinedTags(tagsCollection: TagTreeItem[]) {
+    this._joinedTags = tagsCollection || [];
+    this.tagsToBeJoined = [];
+    this.tagsToBeJoined = this.tagsToBeJoined.concat(this._joinedTags);
+    this.tagsToBeJoinedFiltered = [];
+    this.tagsToBeJoinedFiltered = this.tagsToBeJoinedFiltered.concat(this._joinedTags);
+  }
+
+  public get joinedTags(): TagTreeItem[] {
+    return this._joinedTags;
+  }
+
+  @Input()
+  public allTags: TagTreeItem[];
+
+  @Output()
+  public readonly popupCardOpen: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output()
+  public readonly popupCardClose: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output()
+  public deleteClickedPrompt: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output()
+  public readonly joinedTagsChange: EventEmitter<TagTreeItem[]> = new EventEmitter<TagTreeItem[]>();
+  @HostBinding("class.hidden")
+  public hidden: boolean;
+  public plusButtonSelected: boolean;
+  public tagsToBeJoined: TagTreeItem[] = [];
+  public tagsToBeJoinedFiltered: TagTreeItem[] = [];
+
+  public selectedTagToBeJoined: TagTreeItem;
+  public filterTerm: string;
+
+  private _joinedTags: TagTreeItem[] = [];
+
+  private _tagCategory: TagCategory;
+
+  public objectConfigName: string;
+  public required: boolean;
+  public forceReadonly: boolean;
+  public maxLength: number;
+  public decimals: number;
+
+  public redErrorBackground: boolean;
+
+  constructor() {
+  }
+
+  public onPlusButtonSelectedChange(plusButtonSelected: boolean): void {
+    if (plusButtonSelected) {
+      this.popupCardOpen.emit();
+    }
+  }
+
+  public onPopupClose(): void {
+    this.hide();
+  }
+
+  public onOkClick(): void {
+    this.plusButtonSelected = false;
+    this._joinedTags.length = 0;
+    Array.prototype.push.apply(this._joinedTags, this.tagsToBeJoined);
+    this._emitTagsCollectionChange();
+    this.popupCardClose.next();
+  }
+
+  public hide(): void {
+    this.plusButtonSelected = false;
+    this.tagsToBeJoined = [];
+    this.tagsToBeJoined = this.tagsToBeJoined.concat(this._joinedTags);
+    this.popupCardClose.next();
+  }
+
+  public handleDrop(event: any): void {
+    const droppedItem: TagTreeItem = event.object;
+    if (droppedItem && isNill(this.tagsToBeJoined.find(x => x.tagId === droppedItem.tagId))) {
+      this.tagsToBeJoined.push(droppedItem);
+      this.tagsToBeJoinedFiltered.push(droppedItem);
+    }
+  }
+
+  public deleteClicked(event: any): void {
+    const tagToDelete: TagTreeItem = (event instanceof TagTreeItem) ? event : this.selectedTagToBeJoined;
+    const clearSelectionNeeded: boolean = (tagToDelete === this.selectedTagToBeJoined);
+    if (notNill(tagToDelete)) {
+      this.tagsToBeJoined.splice(this.tagsToBeJoined.indexOf(this.tagsToBeJoined.find(x => x.tagId === tagToDelete.tagId)), 1);
+      this.tagsToBeJoinedFiltered.splice(this.tagsToBeJoinedFiltered.indexOf(this.tagsToBeJoinedFiltered.find(x => x.tagId === tagToDelete.tagId)), 1);
+      if (clearSelectionNeeded) {
+        this.selectedTagToBeJoined = null;
+      }
+    }
+  }
+
+  public setSelectedTag(tag: TagTreeItem): void {
+    if (this.selectedTagToBeJoined === tag) {
+      this.selectedTagToBeJoined = null;
+    } else {
+      this.selectedTagToBeJoined = tag;
+    }
+  }
+
+  public isSelectedTag(tag: TagTreeItem): any {
+    return this.selectedTagToBeJoined === tag;
+  }
+
+  private _emitTagsCollectionChange(): void {
+    this.joinedTagsChange.emit(this._joinedTags);
+  }
+
+}

package/projects/sharedcomponents/src/lib/components/tags/tags.module.ts

@@ -0,0 +1,27 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {TagsComponent} from "./tags.component";
+import {ButtonModule, CollapsibleModule, ImageModule} from "@colijnit/corecomponents_v12";
+import {TagLabelComponent} from "./component/tag-label/tag-label.component";
+import {TreeviewComponent} from "./component/treeview/treeview.component";
+import {TagJoinLabelComponent} from "./component/tag-join-label/tag-join-label.component";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CollapsibleModule,
+        ImageModule,
+        ButtonModule,
+    ],
+  declarations: [
+    TagsComponent,
+    TagLabelComponent,
+    TreeviewComponent,
+    TagJoinLabelComponent
+  ],
+  exports: [
+    TagsComponent
+  ]
+})
+export class TagsModule {
+}

package/projects/sharedcomponents/src/lib/directives/click-outside.directive.ts

@@ -0,0 +1,25 @@
+import {
+  Directive,
+  EventEmitter,
+  HostListener,
+  Output,
+  ElementRef,
+} from '@angular/core';
+
+@Directive({
+  selector: '[outsideClick]',
+})
+export class ClickOutsideDirective {
+
+  @Output()
+  outsideClick: EventEmitter<MouseEvent> = new EventEmitter();
+
+  @HostListener('document:mousedown', ['$event'])
+  onClick(event: MouseEvent): void {
+    if (!this.elementRef.nativeElement.contains(event.target)) {
+      this.outsideClick.emit(event);
+    }
+  }
+
+  constructor(private elementRef: ElementRef) {}
+}

package/projects/sharedcomponents/src/lib/enum/calendar-view.enum.ts

@@ -0,0 +1,8 @@
+export enum CalendarView {
+    DayView = "DAY",
+    WeekView = "WEEK",
+    WeekSelectView = "WEEK_SELECT",
+
+    WeekPlanningView = "WEEK_PLANNING",
+    MonthView = "MONTH",
+}

package/projects/sharedcomponents/src/lib/enum/gauge-color.enum.ts

@@ -0,0 +1,8 @@
+export enum GaugeColor {
+  Lowest = '#E0E0E0',
+  Low = '#fff7b8',
+  MediumLow = '#ffe367',
+  MediumHigh = '#ffc15b',
+  High = '#F88952',
+  Highest = '#5FDCB3',
+}

package/{lib/enum/icon.enum.d.ts → projects/sharedcomponents/src/lib/enum/icon.enum.ts}

@@ -1,5 +1,6 @@
 /** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
-export declare enum Icon {
+
+export enum Icon {
     Account = "account",
     AngleLeftSolid = "angle_left_solid",
     AngleRightSolid = "angle_right_solid",
@@ -33,4 +34,4 @@ export declare enum Icon {
     TagRegular = "tag_regular",
     Xml = "xml",
     XSolid = "x_solid"
-}
+}

package/projects/sharedcomponents/src/lib/enum/keyboard-code.enum.ts

@@ -0,0 +1,30 @@
+export enum KeyboardCode {
+  Backspace = "Backspace",
+  Digit0 = "Digit0",
+  Digit1 = "Digit1",
+  Digit2 = "Digit2",
+  Digit3 = "Digit3",
+  Digit4 = "Digit4",
+  Digit5 = "Digit5",
+  Digit6 = "Digit6",
+  Digit7 = "Digit7",
+  Digit8 = "Digit8",
+  Digit9 = "Digit9",
+  Enter = "Enter",
+  Escape = "Escape",
+  Minus = "Minus",
+  Numpad0 = "Numpad0",
+  Numpad1 = "Numpad1",
+  Numpad2 = "Numpad2",
+  Numpad3 = "Numpad3",
+  Numpad4 = "Numpad4",
+  Numpad5 = "Numpad5",
+  Numpad6 = "Numpad6",
+  Numpad7 = "Numpad7",
+  Numpad8 = "Numpad8",
+  Numpad9 = "Numpad9",
+  NumpadDecimal = "NumpadDecimal",
+  NumpadEnter = "NumpadEnter",
+  NumpadSubtract = "NumpadSubtract",
+  Period = "Period"
+}