@colijnit/sharedcomponents 261.1.0 → 261.1.2

package/projects/sharedcomponents/src/lib/components/stock-statusbar/stock-statusbar.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {StockStatusbarComponent} from "./stock-statusbar.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    StockStatusbarComponent
+  ],
+  exports: [
+    StockStatusbarComponent
+  ]
+})
+export class StockStatusbarModule {
+}

package/projects/sharedcomponents/src/lib/components/tab-bar/tab-bar.component.ts

@@ -0,0 +1,110 @@
+import {Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation} from "@angular/core";
+import {Tab} from "./tab.interface";
+import {StockManagementWarehouses} from "@colijnit/articleapi/build/model/stock-management-warehouses.bo";
+import {StockService} from "../../service/stock.service";
+import {SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME} from "@colijnit/corecomponents_v12";
+
+@Component({
+  selector: "co-tab-bar",
+  template: `
+    <div class="tab-bar-wrapper">
+      <div class="tab-bar-warehouse-wrapper">
+        <div class="stock-location-group">
+          <div class="stock-location-right-group">
+            <co-list-of-values *ngIf="showWarehouseSelection"
+                               [label]="wareHouseLabel"
+                               [displayField]="'warehouseDescription'"
+                               [collection]="dataWareHouseCode"
+                               [multiselect]="false"
+                               [required]="false"
+                               [readonly]="false"
+                               [customCssClass]="'mini-scrollbar'"
+                               [searchPlaceholder]="wareHouseSearchLabel"
+                               [(model)]="selectedWarehouse"
+                               (modelChange)="onSelectWarehouse($event)"
+                               class="custom-height"
+            >
+            </co-list-of-values>
+          </div>
+        </div>
+      </div>
+      <div class="tab-bar">
+        <div class="tab-bar-primary">
+          <div class="tab-primary" *ngFor="let tab of tabs">
+            <co-button
+                    [label]="tab.title"
+                    [screenConfigurationObject]="tab.cfg"
+                    [class.active]="tab.active"
+                    (click)="selectTab(tab)"
+            ></co-button>
+          </div>
+        </div>
+        <div class="secondary-tab-bar" *ngIf="ActivateSecondaryTabs">
+          <co-button *ngFor="let tab of secondaryTabs"
+                     [label]="tab.title"
+                     [screenConfigurationObject]="tab.cfg"
+                     [class.active]="tab.active"
+                     (click)="selectSecondaryTab(tab)"
+          ></co-button>
+        </div>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class TabBarComponent {
+
+  @Input()
+  public wareHouseLabel: string;
+
+  @Input()
+  public wareHouseSearchLabel: string;
+
+  @Input()
+  public tabs: Tab[] = [];
+
+  @Input()
+  public secondaryTabs: Tab[] = [];
+
+  @Input()
+  public ActivateSecondaryTabs: boolean = false;
+
+  @Input()
+  public dataWareHouseCode: StockManagementWarehouses[] = [];
+
+  @Input()
+  public article: any;
+
+  @Input()
+  public showWarehouseSelection: boolean = false;
+
+  @Output()
+  public warehouseSelected: EventEmitter<StockManagementWarehouses> = new EventEmitter<StockManagementWarehouses>();
+
+  @Input()
+  public selectedWarehouse: StockManagementWarehouses = new StockManagementWarehouses();
+
+  constructor(private _stockService: StockService) {
+  }
+
+  public selectTab(tab: Tab): void {
+    if (tab.clickHandler) {
+      tab.clickHandler();
+    }
+    this.tabs.forEach(t => t.active = false);
+    tab.active = true;
+  }
+
+  public selectSecondaryTab(secondaryTab: Tab): void {
+    if (secondaryTab.clickHandler) {
+      secondaryTab.clickHandler();
+    }
+    this.secondaryTabs.forEach(t => t.active = false);
+    secondaryTab.active = true;
+  }
+
+  public onSelectWarehouse(event: StockManagementWarehouses): void {
+    this.warehouseSelected.emit(event);
+  }
+
+}

package/projects/sharedcomponents/src/lib/components/tab-bar/tab-bar.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {TabBarComponent} from "./tab-bar.component";
+import {ButtonModule, ListOfValuesModule, ScreenConfigurationModule} from "@colijnit/corecomponents_v12";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        ListOfValuesModule,
+        ScreenConfigurationModule,
+        ButtonModule,
+    ],
+  declarations: [
+    TabBarComponent
+  ],
+  exports: [
+    TabBarComponent
+  ]
+})
+export class TabBarModule {
+
+}

package/projects/sharedcomponents/src/lib/components/tab-bar/tab.interface.ts

@@ -0,0 +1,8 @@
+import {SharedCfgName} from "../../enum/shared-cfg-name.enum";
+
+export interface Tab {
+  title: string;
+  active: boolean;
+  clickHandler?: () => void;
+  cfg: SharedCfgName;
+}

package/projects/sharedcomponents/src/lib/components/tags/component/tag-join-label/tag-join-label.component.ts

@@ -0,0 +1,61 @@
+import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {TagTreeItem} from "../../../../model/tag-tree-item.bo";
+import {CssUtils} from "@colijnit/mainapi/build/utils/css-utils";
+
+@Component({
+    selector: "tag-join-label",
+    template: `
+        <div class="labelgroup" [ngStyle]="styles()" [class.custom-colors]="tag.color != null" [class.focus-item]="selected">
+            <co-image *ngIf="tag.image" [source]="tagImage"></co-image>
+            <div class="tag-icon" *ngIf="!tag.image">
+                <icon icon="tag"
+                      [class.dark]="tag.color == null && !selected"
+                      [class.light]="tag.color != null || selected"
+                ></icon>
+            </div>
+            <div class="labeltext">
+                <span class="parentText" [class.custom-colors]="tag.color != null" [class.focus-item]="selected" *ngIf="tag.parentDescription" [textContent]="tag.parentDescription"></span>
+                <span class="mainText value-text" [class.custom-colors]="tag.color != null" [class.focus-item]="selected" [textContent]="tag.description"></span>
+            </div>
+        </div>
+        <co-button class="circle transparent small"
+                   (click)="onCrossClick($event)"
+        ></co-button>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+// Component to show a fancy tag label for a raw label text.
+export class TagJoinLabelComponent {
+    // The tag description text to show.
+    @Input()
+    public tag: TagTreeItem;
+
+    @Input()
+    public selected: boolean;
+
+    @Input()
+    public tagImage: string;
+
+    @Output()
+    public readonly tagCrossClicked: EventEmitter<TagTreeItem> = new EventEmitter<TagTreeItem>();
+
+    constructor() {
+    }
+
+    public styles(): any {
+        if (!this.selected && this.tag.color != null) {
+            return {
+                "background-color": "" + CssUtils.DbRgbColorStringToCssRgbColor(this.tag.color)
+            };
+        } else {
+            return "";
+        }
+    }
+
+    public onCrossClick(event: MouseEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.tagCrossClicked.emit(this.tag);
+    }
+}

package/projects/sharedcomponents/src/lib/components/tags/component/tag-label/tag-label.component.ts

@@ -0,0 +1,47 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+
+@Component({
+    selector: "sc-tag-label",
+    template: `
+        <!--icon icon="label" [ngStyle]="fills()"></icon-->
+        <div class="labelgroup" [ngStyle]="styles()">
+            <div class="labeltext" [class.custom-colors]="this.customColor != null">
+                <span [textContent]="model"></span>
+            </div>
+        </div>
+    `,
+     encapsulation: ViewEncapsulation.None
+})
+
+export class TagLabelComponent {
+    // The tag description text to show.
+    @Input()
+    public model: string;
+
+    public get customColor(): string {
+        return this._customColor;
+    }
+
+    private _customColor: string;
+
+    constructor() {
+    }
+
+    public fills(): any {
+        return this._getColorStyleObject("fill");
+    }
+
+    public styles(): any {
+        return this._getColorStyleObject("background-color");
+    }
+
+    private _getColorStyleObject(cssStyleType: string): any {
+        if (this._customColor != null) {
+            const styleObj: any = {};
+            styleObj[cssStyleType] = "" + this._customColor;
+            return styleObj;
+        } else {
+            return "";
+        }
+    }
+}

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 {CoDocument} from "@colijnit/mainapi/build/model/co-document.bo";
+import {TreeViewNode} from "../../../../../model/tree-view-node-default.model";
+import {Icon} from "../../../../../enum/icon.enum";
+import {CssUtils} from "@colijnit/mainapi/build/utils/css-utils";
+
+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,261 @@
+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";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+
+@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()">
+                    <co-icon class="expand-fork" [iconData]="iconCacheService.getIcon(icon.Trashbin)"></co-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>
+                    <co-icon *ngIf="node.hasIcon() && !node.img" [ngClass]="node.iconClass(selectedId)"
+                          class="tree-node-icon" [iconData]="iconCacheService.getIcon(node.icon)"></co-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 {
+    public readonly icon: typeof Icon = Icon;
+
+    @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(public iconCacheService: IconCacheService) {
+    }
+
+    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);
+            }
+        }
+    }
+}