@colijnit/sharedcomponents 261.1.0 → 261.1.2

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

@@ -0,0 +1,92 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
+import {IconCacheService} from "../../service/icon-cache.service";
+import {Icon} from "../../enum/icon.enum";
+import {CdkDragDrop} from "@angular/cdk/drag-drop";
+import {SharedService} from "../../service/shared.service";
+import {TagTreeItem} from "@colijnit/mainapi/build/model/tag-tree-item.bo";
+
+@Component({
+  selector: "co-simple-tags",
+  template: `
+    <co-dialog
+      [headerTemplate]="headerTemplate"
+      [footerTemplate]="footerTemplate"
+      (closeClick)="closeClick.emit()"
+    >
+      <ng-template #headerTemplate>
+        <div class="header-wrapper">
+          <co-icon [iconData]="iconCacheService.getIcon(icon.TagRegular)"></co-icon>
+          <span class="co-dialog-header-title" [textContent]="'Tags'"></span>
+        </div>
+      </ng-template>
+
+      <div class="dialog-content-wrapper">
+        <co-simple-tags-form [tags]="tags" [(linkedTags)]="linkedTags"></co-simple-tags-form>
+      </div>
+
+      <ng-template #footerTemplate>
+        <div class="co-dialog-footer-button-wrapper">
+          <co-button class="save-button"
+            [iconData]="iconCacheService.getIcon(icon.CheckDuotone)"
+            (click)="handleSaveTags()"
+          ></co-button>
+          <co-button
+            class="close-button"
+            [iconData]="iconCacheService.getIcon(icon.CrossSkinny)"
+            (click)="closeClick.next()"
+          ></co-button>
+        </div>
+      </ng-template>
+    </co-dialog>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class SimpleTagsComponent {
+  public readonly icon: typeof Icon = Icon;
+
+  @Input()
+  public set tags(tags: TagTreeItem[]) {
+    this._tags = tags;
+  }
+
+  public get tags(): TagTreeItem[] {
+    return this._tags;
+  }
+
+  @Input()
+  public set linkedTags(tags: TagTreeItem[]) {
+    this._linkedTags = tags;
+  }
+
+  public get linkedTags(): TagTreeItem[] {
+    return this._linkedTags;
+  }
+
+  @Output()
+  public closeClick: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output()
+  public saveClick: EventEmitter<TagTreeItem[]> = new EventEmitter<TagTreeItem[]>();
+
+  public breadCrumbs: TagTreeItem[] = [];
+  public displayTags: TagTreeItem[] = [];
+  public searchString: string = '';
+
+  private _tags: TagTreeItem[] = [];
+  private _linkedTags: TagTreeItem[] = [];
+
+  @HostBinding("class.co-simple-tags")
+  public showClass() {
+    return true;
+  }
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    public sharedService: SharedService,
+  ) { }
+
+  public handleSaveTags(): void {
+    this.saveClick.next(this._linkedTags);
+    this.closeClick.next();
+  }
+}

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

@@ -0,0 +1,26 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {SimpleTagsComponent} from "./simple-tags.component";
+import {ButtonModule, CoDialogModule, IconModule, InputSearchModule} from "@colijnit/corecomponents_v12";
+import {DragDropModule} from "@angular/cdk/drag-drop";
+import {SimpleTagsFormModule} from "../simple-tags-form/simple-tags-form.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoDialogModule,
+        InputSearchModule,
+        IconModule,
+        DragDropModule,
+        ButtonModule,
+        SimpleTagsFormModule
+    ],
+  declarations: [
+    SimpleTagsComponent
+  ],
+  exports: [
+    SimpleTagsComponent
+  ]
+})
+export class SimpleTagsModule {
+}

package/projects/sharedcomponents/src/lib/components/simple-tags-form/simple-tags-form.component.ts

@@ -0,0 +1,208 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
+import {IconCacheService} from "../../service/icon-cache.service";
+import {Icon} from "../../enum/icon.enum";
+import {CdkDragDrop} from "@angular/cdk/drag-drop";
+import {SharedService} from "../../service/shared.service";
+import {TagTreeItem} from "@colijnit/mainapi/build/model/tag-tree-item.bo";
+
+@Component({
+  selector: "co-simple-tags-form",
+  template: `
+    <div class="form-content-wrapper">
+      <div class="collection-navigation co-small-scrollbar">
+        <span class="title" [textContent]="'Beschikbare tags'"></span>
+        <co-input-search
+          [(model)]="searchString"
+          [placeholder]="'Search for tag name'"
+          (search)="searchCollection()"
+          (modelChange)="searchCollection()"
+          (rightIconClick)="searchCollection()"
+        ></co-input-search>
+        <div class="breadcrumbs">
+          <co-icon
+            [iconData]="iconCacheService.getIcon(icon.HouseBlankRegular)"
+            (click)="setRootDisplayTags()"
+          ></co-icon>
+          <div class="crumbs">
+            <span class="spacer" [textContent]="'|'"></span>
+            <div class="crumb" *ngFor="let crumb of breadCrumbs; let index = index" (click)="handleCrumbClicked(crumb, index)">
+              <span class="spacer" *ngIf="index !== 0" [textContent]="'/'"></span>
+              <span [textContent]="crumb.description"></span>
+            </div>
+          </div>
+        </div>
+        <div class="collection-view"
+             cdkDropList
+             cdkDropListSortingDisabled
+             #collectionList="cdkDropList"
+             [cdkDropListData]="displayTags"
+             [cdkDropListConnectedTo]="[linkedList]">
+          <div class="collection-item"
+                *ngFor="let tag of displayTags"
+                cdkDrag
+                [cdkDragDisabled]="tag.tagType !== 'T' || linkedTags.includes(tag)"
+                [class.draggable]="tag.tagType === 'T' && !linkedTags.includes(tag)"
+                [class.disabled]="linkedTags.includes(tag)"
+                (click)="handleTagSelected(tag)">
+
+            <div class="collection-item" *cdkDragPlaceholder>
+              <co-icon *ngIf="tag.tagType === 'T'" [iconData]="iconCacheService.getIcon(icon.TagRegular)"></co-icon>
+              <span [textContent]="tag.description"></span>
+            </div>
+
+            <div *cdkDragPreview><co-icon [iconData]="iconCacheService.getIcon(icon.TagRegular)"></co-icon></div>
+
+            <co-icon *ngIf="tag.tagType === 'T'" [iconData]="iconCacheService.getIcon(icon.TagRegular)"></co-icon>
+            <span [textContent]="tag.description"></span>
+          </div>
+        </div>
+      </div>
+
+      <div class="linked-tags-view">
+        <span class="title" [textContent]="'Gekoppelde tags'"></span>
+        <div class="view-wrapper"
+             cdkDropList
+             #linkedList="cdkDropList"
+             [cdkDropListData]="linkedTags"
+             (cdkDropListDropped)="handleAddTag($event)">
+          <div class="tag-item" *ngFor="let tag of linkedTags" [cdkDragDisabled]="true" cdkDrag [style.background-color]="tag.color?.replace('0x', '#')">
+            <div class="placeholderLinked" *cdkDragPlaceholder></div>
+
+            <div class="thumbnail-description">
+              <co-icon *ngIf="!tag.image?.thumbnailBody" [iconData]="iconCacheService.getIcon(icon.TagRegular)"></co-icon>
+              <div *ngIf="tag.image" class="thumbnail-wrapper">
+                <img [src]="tag.image.thumbnailBodyAsDataUri">
+              </div>
+
+              <div class="description-wrapper">
+                <span [textContent]="tag.parentDescription"></span>
+                <span class="description" [textContent]="tag.description"></span>
+              </div>
+            </div>
+            <co-icon class="delete-tag" (click)="deleteLinkedTag(tag)"
+                     [iconData]="iconCacheService.getIcon(icon.XSolid)"
+            ></co-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class SimpleTagsFormComponent {
+  public readonly icon: typeof Icon = Icon;
+
+  @Input()
+  public set tags(tags: TagTreeItem[]) {
+    this._tags = tags;
+    this.setRootDisplayTags();
+  }
+
+  @Input()
+  public set linkedTags(tags: TagTreeItem[]) {
+    this._linkedTags = tags;
+    tags.forEach((tag) => this._loadThumbnail(tag));
+  }
+
+  public get linkedTags(): TagTreeItem[] {
+    return this._linkedTags;
+  }
+
+  @Output()
+  public readonly linkedTagsChange: EventEmitter<TagTreeItem[]> = new EventEmitter<TagTreeItem[]>();
+
+  public breadCrumbs: TagTreeItem[] = [];
+  public displayTags: TagTreeItem[] = [];
+  public searchString: string = '';
+
+  private _tags: TagTreeItem[] = [];
+  private _linkedTags: TagTreeItem[] = [];
+
+  @HostBinding("class.co-simple-tags-form")
+  public showClass() {
+    return true;
+  }
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    public sharedService: SharedService,
+  ) { }
+
+  public setRootDisplayTags(): void {
+    this.displayTags = this._tags.filter((tag: TagTreeItem) => tag.treeLevel === 0);
+    this.breadCrumbs = [];
+    this.searchString = '';
+  }
+
+  public handleTagSelected(selectedTag: TagTreeItem): void {
+    if (selectedTag.tagType === 'TR' || selectedTag.tagType === 'TG') {
+      if (selectedTag !== this.breadCrumbs[0]) {
+        this.breadCrumbs.push(selectedTag);
+      }
+      this.displayTags = this._tags.filter((tag: TagTreeItem) => {
+        return tag.parentId === selectedTag.id && tag.treeLevel === selectedTag.treeLevel + 1
+      });
+    }
+  }
+
+  public handleCrumbClicked(tag: TagTreeItem, index: number): void {
+    if (tag !== this.breadCrumbs[this.breadCrumbs.length - 1]) {
+      this.breadCrumbs.splice(index + 1);
+      this.handleTagSelected(tag);
+    }
+  }
+
+  public handleAddTag(event: CdkDragDrop<TagTreeItem[], any>): void {
+    const draggedTag: TagTreeItem = this.displayTags[event.previousIndex];
+    if (!this._linkedTags.includes(draggedTag)) {
+      this._linkedTags.push(this.displayTags[event.previousIndex]);
+      this._loadThumbnail(draggedTag);
+    }
+  }
+
+  public deleteLinkedTag(tag: TagTreeItem): void {
+    this._linkedTags.splice(this._linkedTags.indexOf(tag), 1);
+  }
+
+  public searchCollection(): void {
+    if (!this.searchString) {
+      this.searchString = '';
+      this.setRootDisplayTags();
+      return;
+    }
+    if (this.searchString.length < 2) {
+      return;
+    }
+    if (this.searchString === '') {
+      this.setRootDisplayTags();
+      return;
+    }
+
+    const matchingObjects: TagTreeItem[] = [];
+
+    this._tags.filter((item) => item.tagType === 'T').forEach((obj) => {
+      Object.values(obj).forEach((value) => {
+        if (typeof value === 'string' || typeof value === 'number') {
+          const stringValue = String(value).toLowerCase();
+          if (stringValue.includes(this.searchString.toLowerCase())) {
+            matchingObjects.push(obj);
+          }
+        }
+      });
+    });
+
+    this.displayTags = matchingObjects;
+    this.breadCrumbs = [];
+  }
+
+  private _loadThumbnail(tagTreeItem: TagTreeItem): void {
+    if (tagTreeItem.image && tagTreeItem.image.documentId && !tagTreeItem.image.thumbnailBody) {
+      this.sharedService.getDocumentContent(tagTreeItem.image.documentId, true)
+        .then((result) => {
+          if (result) {
+            tagTreeItem.image.thumbnailBody = result;
+          }
+        });
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/simple-tags-form/simple-tags-form.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {SimpleTagsFormComponent} from "./simple-tags-form.component";
+import {ButtonModule, CoDialogModule, IconModule, InputSearchModule} from "@colijnit/corecomponents_v12";
+import {DragDropModule} from "@angular/cdk/drag-drop";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoDialogModule,
+    InputSearchModule,
+    IconModule,
+    DragDropModule,
+    ButtonModule
+  ],
+  declarations: [
+    SimpleTagsFormComponent
+  ],
+  exports: [
+    SimpleTagsFormComponent
+  ]
+})
+export class SimpleTagsFormModule {
+}

package/projects/sharedcomponents/src/lib/components/statusbar/statusbar-popup.component.ts

@@ -0,0 +1,118 @@
+import {Component, ElementRef, EventEmitter, HostBinding, Input, OnInit, Output, ViewChild, ViewChildren, ViewEncapsulation} from '@angular/core';
+import {StatusbarData} from './statusbar.component';
+import {ArcElement, Chart, DoughnutController} from 'chart.js';
+
+Chart.register(
+    DoughnutController,
+    ArcElement
+);
+
+export enum GaugeColor {
+    Disabled = "#e7e7e7",
+    Lowest = '#E0E0E0',
+    Low = '#fff7b8',
+    MediumLow = '#ffe367',
+    MediumHigh = '#ffc15b',
+    High = '#F88952',
+    Highest = '#5FDCB3',
+}
+
+@Component({
+    selector: "co-statusbar-popup",
+    template: `
+        <div class="co-statusbar-popup-wrapper" [overlay]="parentForOverlay">
+            <div class="status-descriptions">
+                <div *ngFor="let data of statusbarData; let index = index" class="status-description" (click)="handleStatusClicked(data.category ? data.category : '')">
+                    <div class="statusbar-canvas-wrapper">
+                        <canvas #doughnutCanvas class="chart-canvas"></canvas>
+                        <span class="statusbar-inner-canvas-label" [textContent]="data.percentage"></span>
+                    </div>
+                    <span class="statusbar-description" [textContent]="data.label"></span>
+                </div>
+            </div>
+        </div>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class StatusbarPopupComponent implements OnInit {
+    @ViewChildren('doughnutCanvas', { read: ElementRef }) set content(content) {
+        this.doughnutCharts = content.toArray();
+        this._prepareChartData();
+    }
+
+    @Input()
+    public defaultColor: '#e0e0e0';
+
+    @Input()
+    public statusbarData: StatusbarData[] = [];
+
+    @Input()
+    public parentForOverlay: ElementRef;
+
+    @Output()
+    public statusClicked: EventEmitter<string> = new EventEmitter<string>();
+
+    @HostBinding("class.co-statusbar-popup")
+    public showClass: boolean = true;
+
+    public doughnutCharts: ElementRef[] = [];
+
+    ngOnInit() {
+        this._prepareChartData();
+    }
+
+    private _prepareChartData(): void {
+        if (!this.doughnutCharts || this.doughnutCharts.length === 0) {
+            return;
+        }
+        this.doughnutCharts.forEach((chart: ElementRef, index: number) => {
+            new Chart(chart.nativeElement, {
+                type: 'doughnut',
+                data: {
+                    datasets: [{
+                        label: this.statusbarData[index].label,
+                        data: this._getDataForChart(this.statusbarData[index].percentage),
+                        backgroundColor: [
+                            this._getColor(this.statusbarData[index].percentage),
+                            this._getColor(-1),
+                        ],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    cutout: '70%'
+                }
+            });
+        })
+    }
+
+    private _getColor(value: number): string {
+        if (value == null) {
+          return GaugeColor.Disabled;
+        } else if (value <= 0) {
+            return GaugeColor.Lowest;
+        } else if (value >= 1 && value < 25) {
+            return GaugeColor.Low;
+        } else if (value >= 25 && value < 50) {
+            return GaugeColor.MediumLow;
+        } else if (value >= 50 && value < 75) {
+            return GaugeColor.MediumHigh;
+        } else if (value >= 75 && value < 100) {
+            return GaugeColor.High;
+        } else if (value >= 100) {
+            return GaugeColor.Highest;
+        }
+    }
+
+    private _getDataForChart(value: number) {
+      if (value == null) {
+        return [100, 0];
+      } else {
+        return [Math.max(0.0001, value), 100 - Math.max(0.0001,value)];
+      }
+    }
+
+    public handleStatusClicked( label: string ) {
+        this.statusClicked.emit(label);
+    }
+}

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

@@ -0,0 +1,115 @@
+import { animate, state, style, transition, trigger } from "@angular/animations";
+import {
+  Component,
+  ComponentRef,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
+import {OverlayService} from '@colijnit/corecomponents_v12';
+import {StatusbarPopupComponent} from './statusbar-popup.component';
+
+export interface StatusbarData {
+  label: string,
+  percentage?: number,
+  count?: number,
+  totalCount?: number,
+  category?: string;
+}
+
+@Component({
+  selector: "co-statusbar",
+  template: `
+    <div class="co-statusbar-wrapper" *ngIf="statusbarData" [clickOutside]="popupShowing"
+         (clickOutside)="handleHidePopup()">
+      <div class="statuses">
+        <div *ngFor="let data of statusbarData; let index = index" class="status">
+          <co-linear-gauge [class.focused-status]="focusedStatusIndex !== undefined && focusedStatusIndex === index"
+                           [value]="data.percentage" [count]="data.count ? data.count : undefined"></co-linear-gauge>
+        </div>
+      </div>
+    </div>
+  `,
+  providers: [
+      OverlayService
+  ],
+  animations: [
+    trigger("showHidePopup", [
+      state("void", style({opacity: 0})),
+      state("*", style({opacity: 1})),
+      transition("void <=> *", animate("250ms ease-in-out")),
+    ])
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class StatusbarComponent {
+
+  @Input()
+  public set statusbarData(value: StatusbarData[]) {
+    this._statusbarData = value;
+    this.adjustTooHighPercentages();
+  }
+
+  public get statusbarData() {
+    return this._statusbarData;
+  }
+
+  @Input()
+  public defaultColor: '#e0e0e0';
+
+  @Input()
+  public focusedStatusIndex: number;
+
+  @Output()
+  statusbarClick: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output()
+  public statusClicked: EventEmitter<string> = new EventEmitter<string>();
+
+  @HostBinding("class.co-statusbar")
+  public showClass() {
+    return true;
+  }
+
+  @HostListener("click", ["$event"])
+  public handleClick(event: MouseEvent) {
+    this.handleShowPopup(event);
+  }
+
+  public popupShowing: boolean = false;
+
+  private _statusbarData: StatusbarData[];
+  private _statusbarPopupComponentRef: ComponentRef<any>;
+
+  constructor(
+      private _elementRef: ElementRef,
+      private _overlayService: OverlayService) {
+  }
+
+  public handleShowPopup(event: MouseEvent): void {
+    if (this.popupShowing) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this._statusbarPopupComponentRef = this._overlayService.createComponent(StatusbarPopupComponent, {parentForOverlay: this._elementRef, statusbarData: this.statusbarData, defaultColor: this.defaultColor}, { statusClicked: (label: string) => this.handleStatusClicked(label)});
+    this.popupShowing = true;
+  }
+
+  public handleHidePopup(): void {
+    this._overlayService.removeComponent(this._statusbarPopupComponentRef);
+    this.popupShowing = false;
+  }
+
+  public adjustTooHighPercentages(): void {
+    this._statusbarData.forEach(data => data.percentage > 100 ? data.percentage = 100 : false);
+  }
+
+  public handleStatusClicked(label: string) {
+    this.statusClicked.emit(label);
+  }
+}

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

@@ -0,0 +1,25 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ClickoutsideModule, OverlayModule} from '@colijnit/corecomponents_v12';
+import {CoLinearGaugeModule} from '../linear-gauge/co-linear-gauge.module';
+import {StatusbarComponent} from './statusbar.component';
+import {StatusbarPopupComponent} from './statusbar-popup.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoLinearGaugeModule,
+        ClickoutsideModule,
+        OverlayModule
+    ],
+    declarations: [
+        StatusbarComponent,
+        StatusbarPopupComponent
+    ],
+    exports: [
+        StatusbarComponent,
+        StatusbarPopupComponent
+    ]
+})
+export class StatusbarModule {
+}

package/projects/sharedcomponents/src/lib/components/stock/base/base-stock.component.ts

@@ -0,0 +1,17 @@
+import {Directive, Input, OnInit} from '@angular/core';
+
+@Directive()
+export abstract class BaseStockComponent implements OnInit {
+
+  @Input()
+  public goodId: number;
+
+  ngOnInit() {
+    this.getData();
+  }
+
+  protected async getData(): Promise<void> {
+
+  }
+
+}