@colijnit/sharedcomponents 261.1.0 → 261.1.2

package/projects/sharedcomponents/src/lib/components/modify-task-form/modify-task-form.component.ts

@@ -0,0 +1,340 @@
+import {Component, EventEmitter, forwardRef, HostBinding, Input, OnInit, Output, ViewChild} from "@angular/core";
+import {Activity} from "@colijnit/mainapi/build/model/activity.bo";
+import {
+  FormMasterService, IconCacheService,
+  SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+  ScreenConfigAdapterComponent
+} from "@colijnit/corecomponents_v12";
+import {TableName} from "@colijnit/mainapi/build/enum/table-name.enum";
+import {CoDocument} from "@colijnit/mainapi/build/model/co-document.bo";
+import {ActivitiesTaskConfigNames} from "../../interface/activities-task-config-names";
+import {BusinessObjectFactory} from "@colijnit/ioneconnector/build/service/business-object-factory";
+import {InputBoolean} from "../../decorator/input-boolean.decorator";
+import {SharedService} from "../../service/shared.service";
+import {TagCategory} from "@colijnit/mainapi/build/enum/tab-category.enum";
+import {TagTreeItem} from "@colijnit/mainapi/build/model/tag-tree-item.bo";
+import {
+  NotificationSummaryBlockComponent
+} from "./components/notification-summary-block/notification-summary-block.component";
+
+@Component({
+  selector: "co-modify-task-form",
+  template: `
+    <div class="wrapper">
+      <div class="modify-task-header-wrapper">
+        <div class="modify-task-header">
+                    <span class="header-menu"
+                          [class.active]="selectedMenu === 'content-menu1'"
+                          [textContent]="'TASK_DETAILS' | sharedLocalize"
+                          (click)="showContent('content-menu1')"></span>
+          <span class="header-menu"
+                [class.active]="selectedMenu === 'content-menu2'"
+                [textContent]="'TASK_INFORMATION' | sharedLocalize"
+                (click)="showContent('content-menu2')"></span>
+          <span class="header-menu"
+                [class.active]="selectedMenu === 'content-menu3'"
+                [textContent]="'PLANNING' | sharedLocalize"
+                (click)="showContent('content-menu3')"></span>
+        </div>
+      </div>
+      <div class="content-menu-wrapper narrow-scrollbar">
+        <div class="content-menu" [hidden]="selectedMenu !== 'content-menu1'">
+          <div class="content-row-wrapper">
+            <div class="content-left">
+              <co-task-details [readonly]="readonly"
+                               [table]="TableNames.Tasks"
+                               [key]="key"
+                               [(activity)]="activity"
+                               (activityChange)="activityChange.emit($event)"
+                               (showWorkLog)="handleShowWorkLow()"
+                               (triggerFired)="handleTriggerFired()"
+                               noBorder
+              ></co-task-details>
+              <div class="task-column">
+                <co-input-checkbox
+                  class="invoice-checkbox"
+                  [label]="'MARKED' | sharedLocalize"
+                  [(model)]="activity.task.isInvoiced">
+                </co-input-checkbox>
+                <div class="marked-time-wrapper">
+                  <co-input-checkbox
+                    [(model)]="activity.task.workMandatory"
+                    [label]="'TIMEREGISTRATION_MANDATORY' | sharedLocalize"
+                    noModuleService>
+                  </co-input-checkbox>
+                  <!-- TODO implement back later-->
+                  <!-- <arrow-link *ngIf="!readonly" label="REGISTER_TIME_HERE" (click)="handleRegisterWork()"></arrow-link>-->
+                </div>
+              </div>
+
+            </div>
+            <div class="content-right">
+              <div class="activity-content-header" [textContent]="'PERSONS' | sharedLocalize"></div>
+              <co-executive-summary-block
+                [readonly]="readonly"
+                [(activity)]="activity"
+                (activityChange)="activityChange.emit($event)" noBorder
+              ></co-executive-summary-block>
+
+              <!--TODO implement new file upload here-->
+              <!-- <activity-attachments
+                       [(activity)]="activity"
+                       [readonly]="readonly"
+                       [key]="activity.task.id"
+                       [noForceInput]="true"
+                       (activityChange)="activityChange.emit($event)"
+                       noBorder
+               ></activity-attachments>-->
+            </div>
+          </div>
+          <div class="activities-wrapper">
+            <co-activity-list [activities]="activities">
+
+            </co-activity-list>
+          </div>
+        </div>
+        <div class="content-menu" [hidden]="selectedMenu !== 'content-menu2'">
+          <co-status-summary-block
+            [readonly]="readonly"
+            [(activity)]="activity"
+            [table]="TableNames.Tasks"
+            [key]="key"
+            (activityChange)="activityChange.emit($event)" noBorder
+          ></co-status-summary-block>
+          <co-creation-summary-block
+            [readonly]="readonly"
+            [(activity)]="activity"
+            (activityChange)="activityChange.emit($event)" noBorder
+          ></co-creation-summary-block>
+          <!--<planning-summary-block
+                  [readonly]="readonly"
+                  [(activity)]="activity"
+                  (activityChange)="activityChange.emit($event)" noBorder
+          ></planning-summary-block>-->
+        </div>
+        <div class="content-menu" [hidden]="selectedMenu !== 'content-menu3'">
+          <co-notification-summary-block
+            #notificationBlock
+            [readonly]="readonly"
+            [branchNo]="branchNo"
+            [(activity)]="activity"
+            (activityChange)="activityChange.emit($event)" noBorder
+          ></co-notification-summary-block>
+
+          <div class="edit-tags-wrapper">
+            <co-simple-tags-form [tags]="allTags"
+                                 [linkedTags]="activity.task.tags">
+            </co-simple-tags-form>
+          </div>
+          <div class="transaction-tag-wrapper" *ngFor="let tag of activity.task.tags">
+            <div class="tag" [textContent]="tag.description"></div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  `,
+  providers: [
+    FormMasterService,
+    {
+      provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+      useExisting: forwardRef(() => ModifyTaskFormComponent)
+    }
+  ],
+})
+export class ModifyTaskFormComponent implements OnInit, ScreenConfigAdapterComponent {
+  //public readonly TagCategory: typeof TagCategory = TagCategory;
+  public readonly TableNames: typeof TableName = TableName;
+
+  /* @ViewChild(ActivityActivitiesComponent, { static: true })
+   public activityActivities: ActivityActivitiesComponent;*/
+
+  @ViewChild(NotificationSummaryBlockComponent)
+  public notificationBlock: NotificationSummaryBlockComponent;
+
+  @Input()
+  public set activity(value: Activity) {
+    this._activity = value;
+    this.key = this._activity.task.taskId + "";
+  }
+
+  @HostBinding("class.co-modify-task-form")
+  public showClass() {
+    return true;
+  }
+
+  public get activity(): Activity {
+    return this._activity;
+  }
+
+  public get hasDocuments(): boolean {
+    return (this._activity?.task?.documents?.length > 0);
+  }
+
+  @Input()
+  public activityTaskConfigNames: ActivitiesTaskConfigNames;
+
+  @Input()
+  public readonly: boolean = false;
+
+  @Input()
+  public popupContext: boolean = false;
+
+  @Input()
+  public branchNo: string;
+
+  @Input()
+  @InputBoolean()
+  public set forceReadonly(value: boolean) {
+    this.readonly = value;
+  }
+
+  @HostBinding("class.hidden")
+  public hidden: boolean;
+
+  @Output()
+  public activityChange: EventEmitter<Activity> = new EventEmitter<Activity>();
+
+  @Output()
+  public statusChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @Output()
+  public showWorkLog: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output()
+  public triggerFired: EventEmitter<void> = new EventEmitter<void>();
+
+  public selectedMenu: string = 'content-menu1'
+  public activities: Activity[] = [];
+  public table: TableName = TableName.Tasks;
+  public key: string;
+  public expandActivities: boolean = false;
+
+  public objectConfigName: string;
+  public required: boolean;
+  public maxLength: number;
+  public decimals: number;
+  public redErrorBackground: boolean;
+
+  public showTagPopup: boolean = false;
+  public allTags: TagTreeItem[] = [];
+  //public editingTags: TagTreeItem[] = [];
+
+  /*public get mobile(): boolean {
+      return this._mediaMonitor.isExtraSmall();
+  }*/
+
+  private _activity: Activity;
+
+  public handleAddDocuments(docs: CoDocument[]): void {
+    docs.forEach(doc => this.activity.task.documents.push(doc));
+  }
+
+  public handleAddDocument(doc: CoDocument): void {
+    this.activity.task.documents.push(doc);
+  }
+
+  constructor(
+    private _boFactory: BusinessObjectFactory,
+    private sharedService: SharedService,
+    public iconCacheService: IconCacheService
+    //private _mediaMonitor: MediaMonitorService,
+    /*private _activityService: ActivityService*/
+  ) {
+  }
+
+  public ngOnInit(): void {
+    this._getActivities();
+    this._getTags();
+  }
+
+  public showContent(menu: string): void {
+    this.selectedMenu = menu;
+  }
+
+  public handleRegisterWork(): void {
+    setTimeout(() => {
+      /*if (this.activityActivities) {
+          this.expandActivities = true;
+          this.activityActivities.showRegisterWorkLeaf();
+      }*/
+    });
+  }
+
+  public handleSaveActivity(activity: Activity): void {
+    this._updateTaskObject(activity, activity.IsWork ? "workLog" : "remarks");
+    const index: number = this.activities.findIndex((src) => {
+      return src.getId() === activity.getId();
+    });
+    if (index > -1) {
+      this.activities[index] = activity;
+    } else {
+      this.activities.push(activity);
+    }
+    this.activities = this.activities.slice(0); // reset view
+  }
+
+  public handleDeleteActivity(activity: Activity): void {
+    if (activity.IsWork) {
+      this.activity.task.deleteWorkLog(activity.work);
+    } else if (activity.IsRemark) {
+      this.activity.task.deleteRemark(activity.remark);
+    }
+  }
+
+  public handleShowWorkLow(): void {
+    this.expandActivities = true;
+    this.showWorkLog.emit();
+  }
+
+  public handleEditTags(): void {
+    this._getTags();
+    this.showTagPopup = true;
+  }
+
+  public handleSaveTags(tags: TagTreeItem[]): void {
+    this.activity.task.tags = tags;
+  }
+
+  public handleTriggerFired(): void {
+    this.triggerFired.next();
+  }
+
+  private _updateTaskObject(activity: Activity, prop: string): void {
+    const cloneActivity = this._boFactory.makeWithRawBackendData(Activity, activity);
+    if ((cloneActivity as Activity).isNew) {
+      this.activity.task[prop].push(activity.getBaseContent());
+    } else {
+      const index: number = this.activity.task[prop].findIndex((src) => {
+        return src.getId() === activity.getBaseContent().getId();
+      });
+      if (index > -1) {
+        this.activity.task[prop][index] = activity.getBaseContent();
+      }
+    }
+    activity.editting = false;
+    activity.isNew = false;
+  }
+
+  private async _getActivities(): Promise<void> {
+    if (!this.key) {
+      return;
+    }
+    this.activities = await this.sharedService.getActivities(this.table, this.key.toString());
+  }
+
+  private async _getTags(): Promise<void> {
+    this.allTags = await this.sharedService.getTagsFullTree(TagCategory.tasks, true);
+
+    /*if (!this.key) {
+      return;
+    } else {
+      this.editingTags = await this.sharedService.getJoinedTags(this.table, this.key.toString());
+    }*//*if (!this.key) {
+      return;
+    } else {
+      this.editingTags = await this.sharedService.getJoinedTags(this.table, this.key.toString());
+    }*/
+  }
+
+}

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

@@ -0,0 +1,40 @@
+import {NgModule} from '@angular/core';
+import {ModifyTaskFormComponent} from './modify-task-form.component';
+import {TaskDetailsModule} from './components/task-details/task-details.module';
+import {ButtonModule, InputCheckboxModule} from '@colijnit/corecomponents_v12';
+import {StatusSummaryBlockModule} from './components/status-summary-block/status-summary-block.module';
+import {CreationSummaryBlockModule} from './components/creation-summary-block/creation-summary-block.module';
+import {ExecutiveSummaryBlockModule} from './components/executive-summary-block/executive-summary-block.module';
+import {NotificationSummaryBlockModule} from './components/notification-summary-block/notification-summary-block.module';
+import {ActivityListModule} from '../activity-list/activity-list.module';
+import {SimpleTagsModule} from '../simple-tags/simple-tags.module';
+import {CommonModule} from '@angular/common';
+import {SimpleTagsFormModule} from '../simple-tags-form/simple-tags-form.module';
+import {SharedComponentsTranslationModule} from '../../translation/shared-components-translation.module';
+
+
+@NgModule({
+    imports: [
+        SharedComponentsTranslationModule,
+        TaskDetailsModule,
+        InputCheckboxModule,
+        ExecutiveSummaryBlockModule,
+        StatusSummaryBlockModule,
+        CreationSummaryBlockModule,
+        NotificationSummaryBlockModule,
+        ActivityListModule,
+        SimpleTagsModule,
+        ButtonModule,
+        CommonModule,
+        SimpleTagsFormModule
+    ],
+  declarations: [
+    ModifyTaskFormComponent
+  ],
+  exports: [
+    ModifyTaskFormComponent
+  ]
+})
+export class ModifyTaskFormModule {
+
+}

package/projects/sharedcomponents/src/lib/components/multi-property-toggler/multiple-property-toggler.component.ts

@@ -0,0 +1,106 @@
+/**
+ * Custom component for enabling and disabling multiple items based on an input enum
+ * For the component to work, an enum is required and a list of enabled items so that
+ * the component knows which items from the enum are already enabled
+ *
+ * Note: can be improved by not only accepting a string array of enabledItemProperties but also a full cgref number because that will save one conversion step as
+ * BO's already contain these numbers.
+ */
+
+import {AfterViewInit, Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
+//import {EnumUtils} from "../../utils/enum-utils";
+import {KeyValuePair} from "../../interface/key-value-pair";
+import {Icon} from "../../enum/icon.enum";
+import {RefCodeUtils} from "../../utils/ref-code-utils";
+import {EnumUtils} from "../../utils/enum-utils";
+
+@Component({
+    selector: "co-multiple-property-toggler",
+    template: `
+        <div class="input-text-content-wrapper">
+            <h3 [textContent]="label"></h3> <!-- | sharedLocalize-->
+
+            <div class="property-toggling-container">
+
+                <div class="row" *ngFor="let propertyTogglerItem of objectifiedEnum | keyvalue">
+
+                    <co-input-checkbox [model]="isValueActive(propertyTogglerItem.value)"
+                                     (click)="clickToToggleProperty(propertyTogglerItem.value)"></co-input-checkbox>
+
+                    <label [textContent]="propertyTogglerItem.value.value"></label>
+                </div>
+            </div>
+        </div>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class MultiplePropertyTogglerComponent implements AfterViewInit {
+    @Input()
+    public label: string = "";
+
+    // Input an Enum with names and properties and it will be converted
+    @Input()
+    public propertyNamesToToggle: any;
+
+    @Input()
+    public readonly : boolean = false;
+
+    // Input the cgrefcode sum so it knows which items will be enabled
+    @Input()
+    public enableditems: number;
+
+    @Output()
+    public enableditemsChange: EventEmitter<number> = new EventEmitter<number>();
+
+    // Outputs the sum of cgrefkeys of all newly enabled items
+    @Output()
+    public readonly onPropertyItemChange: EventEmitter<number> = new EventEmitter<number>();
+
+    @HostBinding("class.co-multiple-property-toggler")
+    public showClass(): boolean {
+      return true;
+    }
+
+    public readonly Icons: typeof Icon = Icon;
+
+    public objectifiedEnum: KeyValuePair[] = [];
+
+    public enabledItemNumberList: number[] = [];
+
+    ngAfterViewInit(): void {
+        if (this.propertyNamesToToggle) {
+            this.objectifiedEnum = EnumUtils.createObjectFromEnum(this.propertyNamesToToggle);
+        } else {
+            // PropertytogglerItems is empty
+        }
+        this.makeNumberArrayFromCgRefCodeSum();
+    }
+
+    public isValueActive(propertyToCheck: any): boolean {
+        return this.enabledItemNumberList.includes(propertyToCheck.key);
+    }
+
+    public clickToToggleProperty(target: any): void {
+        let newRefNumberSum: number = 0;
+
+        if (this.enabledItemNumberList.includes(target.key)) {
+            this.enabledItemNumberList.splice(this.enabledItemNumberList.indexOf(target.key), 1);
+        } else {
+            this.enabledItemNumberList.push(target.key);
+        }
+
+        this.enabledItemNumberList.forEach(
+            enabledItem => {
+                newRefNumberSum += this.objectifiedEnum.find(x => x.key === enabledItem).key;
+            }
+        );
+
+        this.onPropertyItemChange.emit(newRefNumberSum);
+    }
+
+    public makeNumberArrayFromCgRefCodeSum(): void {
+        if (this.enableditems) {
+            this.enabledItemNumberList = RefCodeUtils.GetMultiRefCodeChoices(this.enableditems);
+        }
+    }
+}

package/projects/sharedcomponents/src/lib/components/multi-property-toggler/multiple-property-toggler.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from "@angular/core";
+import {MultiplePropertyTogglerComponent} from "./multiple-property-toggler.component";
+import {InputCheckboxModule} from "@colijnit/corecomponents_v12";
+import {CommonModule} from "@angular/common";
+
+@NgModule({
+  imports: [
+    InputCheckboxModule,
+    CommonModule
+  ],
+  declarations: [
+  MultiplePropertyTogglerComponent
+  ],
+  exports: [
+  MultiplePropertyTogglerComponent
+  ]
+})
+export class MultiplePropertyTogglerModule {
+
+}