@colijnit/sharedcomponents 261.1.0 → 261.1.2

package/projects/sharedcomponents/src/lib/components/task-modifyer/task-modifier.component.ts

@@ -0,0 +1,355 @@
+import {Component, EventEmitter, forwardRef, HostBinding, Input, OnDestroy, Output, ViewChild} from '@angular/core';
+import {CoreDialogService, DialogResponseInterface, FormComponent} from '@colijnit/corecomponents_v12';
+import {Activity} from '@colijnit/mainapi/build/model/activity.bo';
+import {InputBoolean} from '../../decorator/input-boolean.decorator';
+import {WorkflowCategoryType} from '@colijnit/mainapi/build/enum/workflow-category.enum';
+import {Icon} from '../../enum/icon.enum';
+import {BusinessObjectFactory} from '@colijnit/ioneconnector/build/service/business-object-factory';
+import {Task} from '@colijnit/mainapi/build/model/task.bo';
+import {OperationCallbackActivity} from '../../interface/operation-callback-activity';
+import {IconCacheService} from '../../service/icon-cache.service';
+import {AppPopupButtonType} from '../../enum/app-button-type.enum';
+import {ModifyTaskFormComponent} from '../modify-task-form/modify-task-form.component';
+import {SharedService} from '../../service/shared.service';
+import {SharedComponentsDictionaryService} from '../../translation/shared-components-dictionary.service';
+import {Report} from "@colijnit/mainapi/build/model/report.bo";
+import {ReportType} from "@colijnit/mainapi/build/enum/report-type.enum";
+import {
+  NotificationSummaryBlockComponent
+} from "../modify-task-form/components/notification-summary-block/notification-summary-block.component";
+
+
+@Component({
+    selector: "co-task-modifier",
+    template: `
+        <co-dialog  *ngIf="showForm"
+                    (closeClick)="onPopupClose()"
+                    [headerTemplate]="headerTemplate"
+                    [footerTemplate]="footerTemplate"
+                    class="task-popup"
+                    cssId="task_modifier_popup"
+                    >
+<!--
+          [header]="header"
+          [subHeader]="subHeader"
+          [subHeaderLink]="subHeaderLink"
+          [subSubHeader]="subSubHeader"
+          [headerIcon]="icons.Task"
+          (openLink)="openReferenceInModule()"-->
+      <!--      <ng-template>-->
+          <ng-template #headerTemplate>
+            <div class="header-title-wrapper">
+              <co-icon [iconData]="iconService.getIcon(icons.ListUlRegular)"></co-icon>
+              <div class="co-dialog-header-title" [textContent]="'TASK' | sharedLocalize"></div>
+            </div>
+          </ng-template>
+                <div class="popup-wrapper"
+                     [ngClass]="(showNewForm) ? 'new-task-popup' : ''">
+                    <div class="form-wrapper mini-scrollbar">
+                        <co-form #mainForm (validSubmit)="onValid()">
+<!--
+                            <new-task-form *ngIf="showNewForm" [activity]="editActivity" [myCfgNames]="taskCfgNames" [taskKey]="referenceId" [taskWorkflowCategory]="workflowCategory"></new-task-form>
+-->
+                            <co-modify-task-form #modifyTaskForm *ngIf="showModificationForm"
+                                              [activity]="editActivity"
+                                              [readonly]="readonly"
+                                              [popupContext]="true"
+                                              [branchNo]="branchNo"
+                                              (statusChange)="doHandleStatusChange($event)"
+                                              (showWorkLog)="showWorkLog.emit()"
+                                              (activityChange)="updateEditActivity($event)"
+                                              (triggerFired)="handleTriggerFired()"
+                            ></co-modify-task-form>
+                        </co-form>
+                    </div>
+                </div>
+                <div class="popup-buttons" fxLayout="column">
+                    <div *ngIf="showNewForm" fxLayout="row" class="popup-thumb">
+                        <span [textContent]="'SHOW_AFTER_INSERT' | sharedLocalize"></span>
+               <!--         <thumb [(active)]=showAfterInsert"></thumb>-->
+                    </div>
+                </div>
+          <ng-template #footerTemplate>
+            <div class="co-dialog-footer-button-wrapper">
+              <co-button [disabled]="readonly || taskEditting" class="save-button"
+                         (click)="handleSaveForm()" [iconData]="iconService.getIcon(icons.CheckDuotone)"></co-button>
+              <co-button  class="close-button"
+                         (click)="handleCancelForm()" [iconData]="iconService.getIcon(icons.CrossSkinny)"></co-button>
+              <co-button *ngIf="showModificationForm && !readonly"
+                         [iconData]="iconService.getIcon(icons.Trashbin)" class="delete-button"
+                         [disabled]="readonly || taskEditting"
+                         (click)="deleteTask()"></co-button>
+            </div>
+          </ng-template>
+           <!-- </ng-template>-->
+        </co-dialog>
+    `,
+})
+export class TaskModifierComponent implements OnDestroy {
+    public readonly icons: typeof Icon = Icon;
+
+    @ViewChild(FormComponent)
+    public mainForm: FormComponent;
+
+    @ViewChild(forwardRef(() => ModifyTaskFormComponent))
+    public modifyTaskForm: ModifyTaskFormComponent;
+
+    @ViewChild(NotificationSummaryBlockComponent)
+    public notificationBlock: NotificationSummaryBlockComponent;
+
+    public get readonly(): boolean {
+        //return this.moduleService.readonly &&
+      return false;
+    }
+
+/*    @Input()
+    public taskCfgNames: ActivitiesTaskConfigNames;*/
+
+    @Input()
+    public workflowCategory: WorkflowCategoryType;
+
+    @Input()
+    public reference: string;
+
+    @Input()
+    public referenceId: string;
+
+    @Input()
+    public userGroupId: number;
+
+    @Input()
+    public relationId: number;
+
+    @Input()
+    public branchNo: string;
+
+    @Input()
+    public createTaskOperation: OperationCallbackActivity;
+
+    @Input()
+    @InputBoolean()
+    public forceReadonly: boolean;
+
+    @Output()
+    public readonly editingComplete: EventEmitter<Activity> = new EventEmitter<Activity>();
+
+    @Output()
+    public readonly activitySaved: EventEmitter<Activity> = new EventEmitter<Activity>();
+
+    @Output()
+    public readonly activityDeleted: EventEmitter<Activity> = new EventEmitter<Activity>();
+
+    @Output()
+    public readonly closedWithoutComplete: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    @Output()
+    public readonly showWorkLog: EventEmitter<void> = new EventEmitter<void>();
+
+    @Output()
+    public readonly taskCreated: EventEmitter<Task> = new EventEmitter<Task>();
+
+    @Output()
+    public readonly taskModified: EventEmitter<Task> = new EventEmitter<Task>();
+
+    @Output()
+    public readonly triggerFired: EventEmitter<void> = new EventEmitter<void>();
+
+    @HostBinding("class.co-task-modifier")
+    public showClass() {
+      return true;
+    }
+
+    public get showForm(): boolean {
+        return this.showNewForm || this.showModificationForm;
+    }
+
+    public get header(): string {
+        return (this.showModificationForm) ? "TASK" : "ADD_TASK2";
+    }
+
+    public get subHeader(): string {
+        return this.currentActivity ? this.currentActivity.task.taskId + "" : "";
+    }
+
+    public get subSubHeader(): string {
+        if (this.currentActivity?.task?.lastModifiedBy && this.currentActivity?.task?.lastModifiedDate) {
+            const label = this._dictionary.get('LAST_CHANGE');
+            const lastModifiedBy: string = this.currentActivity.task?.lastModifiedDisplayName;
+            const lastModifiedDate: string = this.currentActivity.task?.lastModifiedDate.toLocaleString();
+
+            return label + ': ' + lastModifiedBy + ' | ' + lastModifiedDate;
+        }
+        return "";
+    }
+
+    public get subHeaderLink(): string {
+        if (this.showModificationForm && this.currentActivity && this.currentActivity.task) {
+            if (this.currentActivity.task.workflowCategory && this.currentActivity.task.reference) {
+                let activityName: string;
+                activityName = this._dictionary.get("WORKFLOW_CATEGORY_" + this.currentActivity.task.workflowCategory) + " " + this.currentActivity.task.reference + ")";
+                return activityName;
+            }
+        }
+        return "";
+    }
+
+    public get userIsTaskReporter(): boolean {
+        return this.editActivity &&
+            ((this.editActivity.task.reporterUserGroupId && this.editActivity.task.reporterUserGroupId === this.userGroupId) ||
+                (this.editActivity.task.reporter && this.editActivity.task.reporter.relationId === this.relationId));
+    }
+
+    private _sendEmailOnNextSave: boolean = false;
+
+    public showAfterInsert: boolean = false;
+    public showNewForm: boolean = false;
+    public showModificationForm: boolean = false;
+    public currentActivity: Activity;
+    public editActivity: Activity;
+
+    public taskEditting: boolean = false;
+
+    constructor(
+        private _dialogService: CoreDialogService,
+        private _boFactory: BusinessObjectFactory,
+        private readonly _dictionary: SharedComponentsDictionaryService,
+        public iconService: IconCacheService,
+        protected sharedService: SharedService
+    ) {
+    }
+
+    ngOnDestroy(): void {
+    }
+
+    public handleSaveForm(): void {
+        this.mainForm.submit();
+    }
+
+    public async onValid(): Promise<void> {
+        if (this.editActivity) {
+            const newActivity: boolean = this.editActivity.isNew;
+            const result = await this.sharedService.updateActivity(this.editActivity);
+            if (result)
+            {
+                if (this._sendEmailOnNextSave) {
+                  this._sendEmailOnNextSave = false;
+                  await this.trySendEmailFromNotificationBlock();
+                }
+                this.activitySaved.next(this.editActivity);
+                this.editingComplete.next(this.editActivity);
+                if (newActivity) {
+                    this.taskCreated.next(this.editActivity.task)
+                } else {
+                    this.taskModified.next(this.editActivity.task);
+                }
+                if (this.showAfterInsert) {
+                    this.startModifyingTask(this.editActivity);
+                }
+
+            }
+            this.hide();
+        }
+    }
+
+    public async trySendEmailFromNotificationBlock(): Promise<void> {
+      const block: NotificationSummaryBlockComponent = (this.modifyTaskForm as any)?.notificationBlock as NotificationSummaryBlockComponent;
+      if (block) {
+        await block.handleSendEmail(new MouseEvent('click'));
+      }
+    }
+
+    public handleCancelForm(): void {
+        this._sendEmailOnNextSave = false;
+        this._createClone();
+        //TODO: is this needed?
+        //this.moduleService.cancelEdit();
+        this.closedWithoutComplete.next(true);
+        this.hide();
+    }
+
+    public onPopupClose(): void {
+        this._sendEmailOnNextSave = false;
+        this.forceReadonly = false;
+        this.hide();
+        this.closedWithoutComplete.next(true);
+    }
+
+    //TODO figure out routing from external component
+    /*public openReferenceInModule(): void {
+        if (this.currentActivity && this.currentActivity.task) {
+            if (this.currentActivity.task.workflowCategory === WorkflowCategoryType.AbsenceFile || this.currentActivity.task.workflowCategory === WorkflowCategoryType.PreventiveAbsenceFile) {
+                this._appNavigator.navigateToIOneModule(IOneModuleName.AbsenceFile, this.currentActivity.task.referenceId);
+            }
+        }
+
+    }*/
+
+    public hide(): void {
+        this.showNewForm = false;
+        this.showModificationForm = false;
+    }
+
+    public async deleteTask(): Promise<void> {
+        const doDelete: DialogResponseInterface = await this._dialogService.showYesNo("DELETE_TASK","DELETE_TASK",false);
+        if (doDelete.button === AppPopupButtonType.Yes) {
+            await this.sharedService.deleteActivity(this.editActivity);
+            this.activityDeleted.next(this.editActivity);
+            this.hide();
+        }
+    }
+
+    public async createNewTask(standalone: boolean = true): Promise<void> {
+        if (this.showForm) {
+            return;
+        }
+
+        this.showAfterInsert = false;
+        this.currentActivity = await this.createTaskOperation({standalone: standalone, workflowCategory: this.workflowCategory, reference: this.reference, referenceId: this.referenceId});
+        this._createClone();
+        this.showNewForm = true;
+    }
+
+    public async startModifyingTask(activity: Activity): Promise<void> {
+        if (this.showForm || !activity.IsTask) {
+            return;
+        }
+
+        this.showAfterInsert = false;
+        await this.sharedService.lockTask(activity.task.taskId);
+        activity.task = activity.task;
+        this.currentActivity = activity;
+        this._createClone();
+        this.showModificationForm = true;
+    }
+
+    public async startModifyingTaskAndWorkLog(activity: Activity): Promise<void> {
+        await this.startModifyingTask(activity);
+        setTimeout(() => {
+            /*if (this.modifyTaskForm) {
+                this.modifyTaskForm.handleRegisterWork();
+            }*/
+        });
+    }
+
+    public _createClone(): void {
+        this.editActivity = this._boFactory.makeWithRawBackendData(Activity, this.currentActivity)as Activity;
+    }
+
+    public doHandleStatusChange(editting: boolean): void {
+        this.taskEditting = editting;
+    }
+
+    public updateEditActivity(activity: Activity): void {
+        this.editActivity = this._boFactory.makeWithRawBackendData(Activity, activity) as Activity;
+    }
+
+    public handleTriggerFired(): void {
+        this.triggerFired.next();
+    }
+
+    public enableEmailOnNextSave(): void {
+      this._sendEmailOnNextSave = true;
+    }
+
+  protected readonly Icon = Icon;
+}

package/projects/sharedcomponents/src/lib/components/task-modifyer/task-modifyer.module..ts

@@ -0,0 +1,32 @@
+import {NgModule} from '@angular/core';
+import {TaskModifierComponent} from './task-modifier.component';
+import {ButtonModule, CoDialogModule, FormModule, IconModule} from '@colijnit/corecomponents_v12';
+import {CommonModule} from '@angular/common';
+import {ModifyTaskFormModule} from '../modify-task-form/modify-task-form.module';
+import {BusinessObjectFactory} from '@colijnit/ioneconnector/build/service/business-object-factory';
+import {SharedComponentsTranslationModule} from '../../translation/shared-components-translation.module';
+
+
+@NgModule({
+    imports: [
+        FormModule,
+        CoDialogModule,
+        SharedComponentsTranslationModule,
+        CommonModule,
+        ButtonModule,
+        ModifyTaskFormModule,
+        IconModule
+    ],
+  declarations: [
+    TaskModifierComponent
+  ],
+  exports: [
+    TaskModifierComponent
+  ],
+  providers: [
+    BusinessObjectFactory
+  ]
+})
+export class TaskModifyerModule {
+
+}

package/projects/sharedcomponents/src/lib/components/tile-renderer/tile-render.component.ts

@@ -0,0 +1,137 @@
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnDestroy,
+  Output,
+  TemplateRef,
+  ViewEncapsulation
+} from "@angular/core";
+import {TileSizeType} from "../../enum/tile-size-type";
+import {Icon} from "../../enum/icon.enum";
+import {IconCacheService} from "../../service/icon-cache.service";
+
+@Component({
+    selector: "co-tile-render",
+    template: `
+        <div class="image" (click)="imageClick.emit()">
+            <label *ngIf="inLargeTileMode && tagDescription" [textContent]="tagDescription"></label>
+            <co-icon *ngIf="selected" class="selected small light circle" [iconData]="iconCacheService.getIcon(iconWhenSelected)" ></co-icon>
+            <co-image [source]="imageDataUri" [class.hidden]="(inSmallTileMode || hideImageDisplayWhenNoImage) && !imageDataUri"
+            ></co-image>
+
+
+
+            <ng-content select="[tile-render-image-content]"></ng-content>
+        </div>
+        <div class="info" (click)="infoClick.emit()">
+            <ng-container *ngIf="infoTemplate" [templateWrapper]="infoTemplate"></ng-container>
+            <span *ngIf="inLargeTileMode && label" class="label" [textContent]="label"></span>
+            <span *ngIf="inLargeTileMode && description" class="description" [textContent]="description"></span>
+            <span *ngIf="inLargeTileMode && creationDate" class="creation-date" [textContent]="creationDate | date:'dd-MM-yyyy'"></span>
+            <span *ngIf="inLargeTileMode && creationUser" class="creation-user" [textContent]="creationUser"></span>
+            <!--span *ngIf="inLargeTileMode && modifiedDate" class="modified-date" [textContent]="modifiedDate"></span>
+            <span *ngIf="inLargeTileMode && modifiedUser" class="modified-user" [textContent]="modifiedUser"></span-->
+        </div>
+        <ng-content></ng-content>
+    `,
+    encapsulation: ViewEncapsulation.None,
+})
+/**
+ * A generic component that shows a collection of simple inputs (description, image, price, etc.) as a tile-shaped graphic with an image
+ * part (upper) and an info part (lower).
+ */
+export class TileRenderComponent implements OnDestroy {
+    public readonly icons: typeof Icon = Icon;
+
+    @ContentChild("infoTemplate", { static: true })
+    public infoTemplate: TemplateRef<any>;
+
+    // Image data to show in an <image-display> component.
+    @Input()
+    public imageDataUri: string;
+
+    // Tag text to show in a <tab-label> component.
+    @Input()
+    public tagDescription: string;
+
+    // Label text, not localized.
+    @Input()
+    public label: string;
+
+    // Main description text.
+    @Input()
+    public description: string;
+
+    // Render a large or small tile.
+    @Input()
+    public tileSize: TileSizeType = TileSizeType.Large;
+
+    // The price for display.
+    @Input()
+    public price: number;
+
+    // The price can be hidden by setting this to true.
+    @Input()
+    public hidePrice: boolean;
+
+    // When this tile is selected, this icon will be shown green in the upper-left corner (defaults to 'check').
+    @Input()
+    public iconWhenSelected: string = "check";
+
+    /**
+     * By default, this component shows a special icon and missing-image text for the image when it's empty. Set this to true
+     * to hide the whole image-display instead, when there was no image given.
+     */
+    @Input()
+    public hideImageDisplayWhenNoImage: boolean;
+
+    @Input()
+    public creationDate: Date;
+
+    @Input()
+    public creationUser: string = '';
+
+    @Input()
+    public modifiedDate: Date;
+
+    @Input()
+    public modifiedUser: string = '';
+
+    // Selected tiles have a green border around them.
+    @Input()
+    @HostBinding("class.selected")
+    public selected: boolean;
+
+    // Emits when the image wrapper was clicked (top half of this component) .
+    @Output()
+    public imageClick: EventEmitter<any> = new EventEmitter<any>();
+
+    // Emits when the info wrapper was clicked (bottom half of this component).
+    @Output()
+    public infoClick: EventEmitter<any> = new EventEmitter<any>();
+
+    @HostBinding("class.small-size")
+    public get inSmallTileMode(): boolean {
+        return this.tileSize === TileSizeType.Small;
+    }
+
+    @HostBinding("class.co-tile-render")
+    public showClass(): boolean {
+      return true;
+    }
+
+    public get inLargeTileMode(): boolean {
+      return this.tileSize === TileSizeType.Large;
+    }
+
+    constructor(public iconCacheService: IconCacheService) {
+    }
+    ngOnDestroy(): void {
+        this.infoTemplate = undefined;
+    }
+
+  protected readonly Icon = Icon;
+}

package/projects/sharedcomponents/src/lib/components/tile-renderer/tile-render.module.ts

@@ -0,0 +1,26 @@
+import {NgModule} from "@angular/core";
+import {TileRenderComponent} from "./tile-render.component";
+import {ImageDisplayModule} from "../image-display/image-display.module";
+import {CommonModule} from "@angular/common";
+import {IconModule, ImageModule, TemplateWrapperModule} from "@colijnit/corecomponents_v12";
+
+@NgModule({
+  imports: [
+    ImageDisplayModule,
+    CommonModule,
+    IconModule,
+    ImageModule,
+    TemplateWrapperModule
+  ],
+  declarations: [
+    TileRenderComponent
+  ],
+  exports: [
+    TileRenderComponent
+  ],
+  providers: [
+  ]
+})
+export class TileRenderModule {
+
+}

package/projects/sharedcomponents/src/lib/components/workflow-info-tiles/components/workflow-info-tile.component.ts

@@ -0,0 +1,59 @@
+import {
+  Component,
+  HostBinding,
+  Input, OnInit,
+  ViewEncapsulation
+} from "@angular/core";
+import {WorkflowProcessInfoPerStatus} from "@colijnit/mainapi/build/model/workflow-process-info-per-status";
+import {IconCacheService} from "../../../service/icon-cache.service";
+import {Icon} from "../../../enum/icon.enum";
+import {ColorSequenceService} from "@colijnit/corecomponents_v12";
+
+@Component({
+    selector: "co-workflow-info-tile",
+    template: `
+        <div class="top">
+            <div class="tile-row">
+              <label class="status-text" [textContent]="'STATUS' | sharedLocalize"></label>
+              <co-icon class="corner-icon" [iconData]="iconCacheService.getIcon(Icon.DetailView)" ></co-icon>
+            </div>
+              <label class="name-text" [textContent]="workflowProcessInfoPerStatus.statusName"></label>
+        </div>
+        <div class="bottom">
+            <label  class="name-text" [textContent]="workflowProcessInfoPerStatus.workflowProcessCount"></label>
+        </div>
+    `,
+    encapsulation: ViewEncapsulation.None,
+})
+
+export class WorkflowInfoTileComponent implements OnInit{
+    public readonly Icon = Icon;
+
+    @Input()
+    public workflowProcessInfoPerStatus: WorkflowProcessInfoPerStatus;
+
+    @Input()
+    public isActive = false;
+
+    @HostBinding("class.co-workflow-info-tile")
+    public showClass(): boolean {
+      return true;
+    }
+
+    @HostBinding("class.active")
+    get activeClass(): boolean {
+      return this.isActive;
+    }
+
+    @HostBinding("style.background-color")
+    public backgroundColor: string;
+
+    constructor(public iconCacheService: IconCacheService,
+                public colorService: ColorSequenceService) {
+    }
+
+    ngOnInit() {
+      this.backgroundColor = (this.workflowProcessInfoPerStatus && this.workflowProcessInfoPerStatus.color) ?
+                                                    this.workflowProcessInfoPerStatus.color.replace('0x', '#') : "";
+    }
+}

package/projects/sharedcomponents/src/lib/components/workflow-info-tiles/components/workflow-info-tile.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {WorkflowInfoTileComponent} from './workflow-info-tile.component';
+import {IconModule} from '@colijnit/corecomponents_v12';
+import {SharedComponentsTranslationModule} from '../../../translation/shared-components-translation.module';
+
+@NgModule({
+  imports: [
+    SharedComponentsTranslationModule,
+    IconModule
+  ],
+  declarations: [
+    WorkflowInfoTileComponent
+  ],
+  exports: [
+    WorkflowInfoTileComponent
+  ],
+  providers: [
+  ]
+})
+export class WorkflowInfoTileModule {
+
+}