@colijnit/sharedcomponents 261.1.2 → 261.20.0

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

@@ -1,92 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,208 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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> {
-
-  }
-
-}