@colijnit/sharedcomponents 261.1.0 → 261.1.2

package/projects/sharedcomponents/src/lib/components/open-activity-list/components/base-open-activity-list.component.ts

@@ -0,0 +1,299 @@
+import {Directive, Injectable, Input, OnDestroy} from "@angular/core";
+import {Activity} from "@colijnit/mainapi/build/model/activity.bo";
+import {isNill} from "@colijnit/ioneconnector/build/utils/function/is-nill.function";
+import {ActivityListViewModel} from "@colijnit/mainapi/build/model/activity-list-view-model";
+import {ActivityViewModel} from "@colijnit/mainapi/build/model/activity-view-model";
+import {DateUtils} from "../../../utils/date-utils";
+import {InputBoolean} from "../../../decorator/input-boolean.decorator";
+
+@Directive()
+@Injectable()
+export abstract class BaseActivityListComponent implements OnDestroy {
+
+    protected reloadTimer: number = 60000; // 1 minute in milliseconds
+
+    @Input()
+    @InputBoolean()
+    public handleOpenLinkSidebar: boolean = false;
+
+    public set activities(value: Activity[]) {
+        clearTimeout(this._updateInterval);
+        this._activities = value;
+        this.filteredActivities = this._activities.slice();
+        this.applyFilter();
+        this._startInterval();
+    }
+
+    public get activities(): Activity[] {
+        return this._activities;
+    }
+
+    public set delegatedActivities(value: Activity[]) {
+        if (value && value.length > 0) {
+            clearTimeout(this._updateInterval);
+            this._delegatedActivities = value;
+            this.filteredDelegatedActivities = this._delegatedActivities.slice();
+            this.applyFilter();
+            this._startInterval();
+        }
+    }
+
+    public get delegatedActivities(): Activity[] {
+        return this._delegatedActivities;
+    }
+
+    public filterFrom: Date;
+    public filterTo: Date;
+    public searchText: string;
+
+    //filtered lists
+    public filteredActivities: Activity[];
+    public filteredDelegatedActivities: Activity[];
+
+    //viewmodels
+    public privateActivityListViewModels: ActivityListViewModel[] = [];
+    public privateDelegatedActivityListViewModels: ActivityListViewModel[] = [];
+    public filteredActivityListViewModels: ActivityListViewModel[] = [];
+    public filteredDelegatedActivityListViewModels: ActivityListViewModel[] = [];
+
+    private _showUsergroupActivities: boolean = false
+
+   // TODO: return this.userService.showUsergroupActivities and allow to set properly;
+   public get showUsergroupActivities(): boolean {
+     return this._showUsergroupActivities
+    }
+
+    public set showUsergroupActivities(value: boolean) {
+      this._showUsergroupActivities = value
+    }
+
+    private _activities: Activity[] = [];
+    private _delegatedActivities: Activity[] = [];
+    private _updateInterval: number;
+
+    constructor() {
+      //protected userService: UserService
+    }
+
+    ngOnDestroy(): void {
+        clearInterval(this._updateInterval);
+    }
+
+    public abstract getActivities();
+    public abstract getDelegatedActivities();
+
+    public reset(): void {
+        this.filteredActivities = [];
+        this.filteredDelegatedActivities = [];
+        this._activities = [];
+        this._delegatedActivities = [];
+    }
+
+    public applyFilter(): void {
+        this._applyFilter(this.activities, this.filteredActivities, this.filteredActivityListViewModels);
+        this._applyFilter(this.delegatedActivities, this.filteredDelegatedActivities, this.filteredDelegatedActivityListViewModels);
+        this._refreshActivities();
+        this.afterFilterApplied();
+    }
+
+    protected afterFilterApplied(): void {
+
+    }
+
+    protected getTheActivities(): void {
+        this.getActivities();
+        this.getDelegatedActivities();
+    }
+
+    private _removeNotShowing(listViewModels: ActivityListViewModel[]): void {
+        for (let i = listViewModels.length - 1; i > 0; i--) {
+            const listViewModel: ActivityListViewModel = listViewModels[i];
+            if (!listViewModel.showing) {
+                listViewModels.splice(i, 1);
+            } else { // iterate through activityViewModels
+                for (let j = listViewModel.activities.length - 1; j > 0; j--) {
+                    const activityViewModel: ActivityViewModel = listViewModel.activities[j];
+                    if (!activityViewModel.showing) {
+                        listViewModel.activities.splice(j, 1);
+                    }
+                }
+            }
+        }
+    }
+
+    protected updatePrivateListsWithFilteredLists(): void {
+        this.privateActivityListViewModels =
+            this._updatePrivateListWithFilteredList(this.privateActivityListViewModels, this.filteredActivityListViewModels);
+        this.privateDelegatedActivityListViewModels =
+            this._updatePrivateListWithFilteredList(this.privateDelegatedActivityListViewModels, this.filteredDelegatedActivityListViewModels);
+    }
+
+    private _applyFilter(activities: Activity[], filteredActivities: Activity[], filteredActivityListViewModels: ActivityListViewModel[]): void {
+        if (isNill(activities)) {
+            filteredActivities.length = 0;
+            return;
+        }
+        filteredActivities = activities.slice(0);
+
+        if (this.filterFrom && this.filterTo) {
+            filteredActivities =
+                activities.filter((a: Activity) => {
+                    if (a.executionDateTime === null || a.overDue) {
+                        return true;
+                    } else {
+                        return DateUtils.IsInBetween(a.executionDateTime, this.filterFrom, this.filterTo, false);
+                    }
+                });
+        }
+        filteredActivities.sort((a: Activity, b: Activity) => a.deadlineDateTime > b.deadlineDateTime ? 1 : -1);
+        this._searchText(filteredActivities);
+        this._prepareViewModels(filteredActivities, filteredActivityListViewModels);
+    }
+
+    private _searchText(filteredActivities: Activity[]): void {
+        if (!this.searchText) {
+            return;
+        }
+        for (let i = filteredActivities.length - 1; i >= 0; i--) {
+            const activity: Activity = filteredActivities[i];
+            let found: boolean = false;
+            for (let key in activity) {
+                if (activity.hasOwnProperty(key)) {
+                    if (activity[key].toString().indexOf(this.searchText) > -1) {
+                        found = true;
+                        break;
+                    }
+                }
+            }
+            if (!found) {
+                filteredActivities.splice(i, 1);
+            }
+        }
+    }
+
+    private _updatePrivateListWithFilteredList(
+        listViewModels: ActivityListViewModel[],
+        filteredList: ActivityListViewModel[]
+    ): ActivityListViewModel[] {
+        let result: ActivityListViewModel[];
+        if (listViewModels.length === 0) {
+            result = filteredList.slice();
+        } else {
+            result = listViewModels.slice();
+            // set showing to false for items which are not in the list anymore
+            for (let i = 0; i < result.length; i++) {
+                const listViewModel: ActivityListViewModel = result[i];
+                const filteredViewModel: ActivityListViewModel = filteredList.find(f => f.position === listViewModel.position);
+                if (!filteredViewModel) {
+                    // flag as removed when listviewmodel is no longer in the list
+                    listViewModel.showing = false;
+                } else {
+                    for (let j = 0; j < listViewModel.activities.length; j++) {
+                        const viewModel: ActivityViewModel = listViewModel.activities[j];
+                        if (!filteredViewModel.activities.find(fa => fa.guid === viewModel.guid)) {
+                            // flag as removed when viewmodel is no longer in the list
+                            viewModel.showing = false;
+                        }
+                    }
+                }
+            }
+            // add new items
+            for (let i = 0; i < filteredList.length; i++) {
+                const filteredActivityListViewModel: ActivityListViewModel = filteredList[i];
+                const listViewModel: ActivityListViewModel = result.find(lvm => lvm.label === filteredActivityListViewModel.label);
+                if (!listViewModel) {
+                    result.push(filteredActivityListViewModel);
+                } else {
+                    for (let j = 0; j < filteredActivityListViewModel.activities.length; j++) {
+                        const filteredActivityViewModel: ActivityViewModel = filteredActivityListViewModel.activities[j];
+                        if (!listViewModel.activities.find(a => a.activity.getId() === filteredActivityViewModel.activity.getId())) {
+                            listViewModel.activities.push(filteredActivityViewModel);
+                        }
+                    }
+                }
+            }
+        }
+        result.sort(this._sortByPosition);
+        return result;
+    }
+
+    private _refreshActivities(): void {
+        // first remove items which are set invisible before
+        this._removeNotShowing(this.privateActivityListViewModels);
+        this._removeNotShowing(this.privateDelegatedActivityListViewModels);
+        // update private list with (new) filtered list
+        this.updatePrivateListsWithFilteredLists();
+    }
+
+    private _prepareViewModels(filteredActivities: Activity[], filteredActivityListViewModels: ActivityListViewModel[]): void {
+        filteredActivityListViewModels.map(alm => {
+            alm.showing = false;
+            alm.activities.map(aa => aa.showing = false);
+        });
+        if (filteredActivities) {
+            for (let i = 0; i < filteredActivities.length; i++) {
+                const activity: Activity = filteredActivities[i];
+                if (!activity.overDue && DateUtils.IsToday(activity.deadlineDateTime)) {
+                    this._addToActivityListViewModel(filteredActivityListViewModels, 'TODAY', 1, activity);
+                } else if (activity.overDue) {
+                    this._addToActivityListViewModel(filteredActivityListViewModels, 'TOO_LATE', 2, activity);
+                } else if (activity.deadlineDateTime) {
+                    this._addToActivityListViewModel(filteredActivityListViewModels, 'NEXT2', 3, activity);
+                } else {
+                    this._addToActivityListViewModel(filteredActivityListViewModels, 'UNSCHEDULED', 4, activity);
+                }
+            }
+        }
+        filteredActivityListViewModels.sort(this._sortByPosition);
+        this._setAmountListViewModels(filteredActivityListViewModels);
+    }
+
+    private _setAmountListViewModels(filteredActivityListViewModels: ActivityListViewModel[]): void {
+        for (let i = 0; i < filteredActivityListViewModels.length; i++) {
+            filteredActivityListViewModels[i].setAmount();
+        }
+    }
+
+    private _sortByPosition(a: ActivityListViewModel, b: ActivityListViewModel): number {
+        return a.position > b.position ? 1 : -1;
+    }
+
+    private _addToActivityListViewModel(filteredActivityListViewModels: ActivityListViewModel[], label: string, order: number, activity: Activity): void {
+        const activityListViewModel: ActivityListViewModel = this._getActivityListViewModel(filteredActivityListViewModels, label, order);
+        activityListViewModel.showing = true;
+        const activityViewModel: ActivityViewModel = this._getActivityViewModel(activityListViewModel, activity);
+        activityViewModel.showing = !activityViewModel.deleted;
+        this._updateViewModelContent(activityViewModel, activity);
+    }
+
+    private _getActivityViewModel(listViewModel: ActivityListViewModel, activity: Activity): ActivityViewModel {
+        let viewModel: ActivityViewModel = listViewModel.activities.find(a => a.activity.getId() === activity.getId());
+        if (!viewModel) {
+            viewModel = new ActivityViewModel();
+            viewModel.activity = activity;
+            viewModel.parent = listViewModel;
+            listViewModel.activities.push(viewModel);
+        }
+        return viewModel;
+    }
+
+    private _getActivityListViewModel(filteredActivityListViewModels: ActivityListViewModel[], label: string, order: number): ActivityListViewModel {
+        let result: ActivityListViewModel = filteredActivityListViewModels.find(a => a.label === label);
+        if (!result) {
+            result = new ActivityListViewModel(label, order);
+            filteredActivityListViewModels.push(result);
+        }
+        return result;
+    }
+
+    private _startInterval(): void {
+        this._updateInterval = window.setInterval(() => {
+            this.getTheActivities();
+        }, this.reloadTimer);
+    }
+
+    private _updateViewModelContent(activityViewModel: ActivityViewModel, activity: Activity): ActivityViewModel {
+        activityViewModel.activity = activity;
+        return activityViewModel;
+    }
+}

package/projects/sharedcomponents/src/lib/components/open-activity-list/components/personal-activity-overview/personal-activity-overview.component.ts

@@ -0,0 +1,40 @@
+import {Component, HostBinding} from "@angular/core";
+import {
+  BaseActivityOverviewComponent
+} from "../../../activity-overview-component/components/base-activity-overview.component";
+
+
+@Component({
+    selector: "co-personal-activity-overview",
+    template: `
+        <div class="overview-wrapper pointer-hover" (click)="handleOpenLinkOrUrl($event)">
+            <div class="overview-wrapper-labels">
+                <div class="activity-title" [textContent]="activityTitle"></div>
+                <div class="activity-context-title" [textContent]="activityContextTitle"></div>
+            </div>
+            <div class="overview-wrapper-date">
+                <div class="date-wrapper" [class.overdue]="overDue">
+                    <ng-container *ngIf="!sameDates">
+                        <div class="date" [textContent]="targetDate | date:'dd-MM-YYYY'"></div>
+                        <div class="date-divider" [textContent]="'-'"></div>
+                    </ng-container>
+                  <!--TODO REINSTATE AFTER finding what the heck is wrong with date-->
+                        <!--<div class="date" [textContent]="deadlineDate | date:'dd-MM-YYYY'"></div>-->
+                </div>
+            </div>
+        </div>
+        <!--TODO REINSTATE AFTER FIXING FORM-->
+        <!--  <co-task-modifier
+                (editingComplete)="onSaveActivity($event)"
+                (activityDeleted)="onDeleteActivity($event)"
+                (showWorkLog)="showTaskFormAndWorkLog()"
+        ></co-task-modifier>-->
+      <!--  [taskCfgNames]="taskCfgNames"-->
+    `,
+})
+export class PersonalActivityOverviewComponent extends BaseActivityOverviewComponent {
+  @HostBinding("class.co-personal-activity-overview")
+  public showClass() {
+    return true;
+  }
+}

package/projects/sharedcomponents/src/lib/components/open-activity-list/components/personal-activity-overview/personal-activity-overview.module..ts

@@ -0,0 +1,18 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {PersonalActivityOverviewComponent} from "./personal-activity-overview.component";
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    PersonalActivityOverviewComponent
+  ],
+  exports: [
+    PersonalActivityOverviewComponent
+  ]
+})
+export class PersonalActivityOverviewModule {
+
+}

package/projects/sharedcomponents/src/lib/components/preferred-planning/preferred-planning.component.ts

@@ -0,0 +1,254 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {AgendaEventPerDay} from "../../model/agenda-event-per-day.model";
+import {AgendaEvent} from "../../model/agenda-event.model";
+import {IconCacheService} from "../../service/icon-cache.service";
+import {Icon} from "../../enum/icon.enum";
+
+@Component({
+  selector: "co-preferred-planning",
+  template: `
+    <div class="co-preferred-planning">
+      <div class="content-wrapper">
+        <p [textContent]="headerDescription"></p>
+        <div class="planning-container">
+          <div class="planning-options" *ngIf="events">
+            <ng-container *ngFor="let event of events | slice:0:limit; let i=index">
+              <div class="eventOption" id="event-{{i}}">
+                <p [textContent]="event.date | date:'EEEE dd MMMM':'nl'"></p>
+                <ng-container *ngFor="let option of event.events">
+                  <div class="planning-option">
+                    <co-input-checkbox
+                      [disabled]="checkDisabled"
+                      [model]="option.checked"
+                      [label]="option.description"
+                      (modelChange)="handleOptionSelect($event, option, event.date, i)"
+                    ></co-input-checkbox>
+                  </div>
+                </ng-container>
+              </div>
+            </ng-container>
+          </div>
+          <div class="planning-disclaimer">
+            <h2 [textContent]="disclaimerHeader"></h2>
+            <div class="planning-disclaimer-contents">
+              <co-icon class="disclaimer-icon" [iconData]="iconCacheService.getIcon(icons.CheckRound)"></co-icon>
+              <p [textContent]="disclaimerDescription"></p>
+            </div>
+          </div>
+        </div>
+        <div (click)="loadMore()" class="load-more-container"
+             [ngClass]="!moreLoadable ? 'load-more-container-disabled':''">
+          <p>
+            <co-icon [iconData]="iconCacheService.getIcon(icons.ArrowFatRight)"></co-icon>
+            <span [textContent]="loadMoreButtonText"></span>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <co-button class="submit-button"
+               [label]="buttonLabel"
+               (click)="buttonClick.emit($event)">
+    </co-button>
+  `,
+  animations: [
+    trigger("showHideWindow", [
+      state("void", style({transform: "scaleY(0)"})),
+      state("*", style({transform: "scaleY(1)"})),
+      transition(":enter, :leave", [
+        animate("200ms ease-in-out")
+      ])
+    ])
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class PreferredPlanningComponent implements OnInit {
+  @ViewChild("dayStart", {static: true})
+  public dayStart: ElementRef;
+
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public firstAvailableDate: Date;
+
+  @Input()
+  public buttonLabel: string = "";
+
+  @Input()
+  public headerText: string = "";
+
+  @Input()
+  public headerDescription: string = "";
+
+  @Input()
+  public disclaimerHeader: string = "";
+
+  @Input()
+  public disclaimerDescription: string = "";
+
+  @Input()
+  public loadMoreButtonText: string = "";
+
+  @Input()
+  public eventsPerDay: AgendaEventPerDay[] = [];
+
+  @Input()
+  public selectedDate: Date;
+
+  @Output()
+  public readonly buttonClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @Output()
+  public selected: EventEmitter<AgendaEventPerDay> = new EventEmitter<AgendaEventPerDay>();
+
+  @HostBinding("class.co-preferred-planning")
+  public showClass: boolean = true;
+
+  public days: Date[] = [];
+  public events: AgendaEventPerDay[] = [];
+  public limit: number = 4;
+  public selectedOption: AgendaEvent;
+  public moreLoadable: boolean = true;
+
+  public checkDisabled: boolean = false;
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    public iconCacheService: IconCacheService,
+    private _changeDetector: ChangeDetectorRef
+  ) {
+
+  }
+
+  ngOnInit() {
+
+    // const eventone = new AgendaEvent();
+    // eventone.checked = false;
+    // eventone.showCheckbox = true;
+    // eventone.draggable = false;
+    // eventone.id = 2;
+    // eventone.dayPartNo = 2;
+    // eventone.date = new Date('2024-10-21T00:00:00');
+    // eventone.from = new Date('2024-10-21T09:00:00');
+    // eventone.to = new Date('2024-10-21T12:00:00');
+    // eventone.fromString = "09:00 AM";
+    // eventone.toString = "12:00 PM";
+    // eventone.fromToRepresentation = "09:00 AM - 12:00 PM";
+    // eventone.description = "Morgen van 9.00- 12.00 uur";
+    //
+    // const eventwo = new AgendaEvent();
+    // eventwo.checked = false;
+    // eventwo.showCheckbox = true;
+    // eventwo.draggable = false;
+    // eventwo.id = 3;
+    // eventwo.dayPartNo = 3;
+    // eventwo.date = new Date('2024-10-21T00:00:00');
+    // eventwo.from = new Date('2024-10-21T12:00:00');
+    // eventwo.to = new Date('2024-10-21T15:00:00');
+    // eventwo.fromString = "12:00 PM";
+    // eventwo.toString = "03:00 PM";
+    // eventwo.fromToRepresentation = "12:00 PM - 03:00 PM";
+    // eventwo.description = "Hele dag";
+    //
+    //
+    // const eventthree = new AgendaEvent();
+    // eventthree.checked = false;
+    // eventthree.showCheckbox = true;
+    // eventthree.draggable = false;
+    // eventthree.id = 7;
+    // eventthree.dayPartNo = 1;
+    // eventthree.date = new Date('2024-10-21T00:00:00');
+    // eventthree.from = new Date('2024-10-21T09:00:00');
+    // eventthree.to = new Date('2024-10-21T12:00:00');
+    // eventthree.fromString = "09:00 AM";
+    // eventthree.toString = "12:00 PM";
+    // eventthree.fromToRepresentation = "09:00 AM - 12:00 PM";
+    // eventthree.description = "Morgen van 9.00- 12.00 uur";
+    //
+    // const evenfour = new AgendaEvent();
+    // evenfour.checked = false;
+    // evenfour.showCheckbox = true;
+    // evenfour.draggable = false;
+    // evenfour.id = 8;
+    // evenfour.dayPartNo = 2;
+    // evenfour.date = new Date('2024-10-21T00:00:00');
+    // evenfour.from = new Date('2024-10-21T12:00:00');
+    // evenfour.to = new Date('2024-10-21T15:00:00');
+    // evenfour.fromString = "12:00 PM";
+    // evenfour.toString = "03:00 PM";
+    // evenfour.fromToRepresentation = "12:00 PM - 03:00 PM";
+    // evenfour.description = "Hele dag";
+    //
+    // const testData = new AgendaEventPerDay();
+    // testData.date = new Date('2024-10-21T00:00:00');
+    // testData.events.push(eventone);
+    // testData.events.push(eventwo);
+    //
+    // const testDataTwo = new AgendaEventPerDay();
+    // testDataTwo.date = new Date('2024-11-21T00:00:00');
+    // testDataTwo.events.push(eventthree);
+    // testDataTwo.events.push(evenfour);
+    //
+    // this.events.push(testData);
+    // this.events.push(testDataTwo);
+
+    if (this.eventsPerDay) {
+      this.events = this.eventsPerDay;
+      if (this.eventsPerDay.length <= this.limit) {
+        this.moreLoadable = false;
+      }
+      this._changeDetector.detectChanges();
+    }
+  }
+
+  public handleOptionSelect(event: boolean, selectedOption: AgendaEvent, date: Date, index: number): void {
+    this.events.forEach(day => {
+      day.events.forEach(opt => opt.checked = false);
+    });
+
+    const target: HTMLElement = document.getElementById('event-' + index);
+    const olderItems = document.getElementsByClassName('eventOption');
+    for (let i = 0; i < olderItems.length; i++) {
+      olderItems[i].classList.remove('day-selected');
+    }
+
+    if (event) {
+      selectedOption.checked = true;
+      this.selectedOption = selectedOption;
+
+      const agendaEventPerDay: AgendaEventPerDay = new AgendaEventPerDay();
+      agendaEventPerDay.date = date;
+      agendaEventPerDay.events.push(selectedOption);
+      this.selected.emit(agendaEventPerDay);
+
+      target?.classList.add('day-selected');
+    } else {
+      this.selectedOption = null;
+      this.selected.emit(null);
+    }
+    this._changeDetector.detectChanges();
+  }
+
+  public loadMore(): void {
+    this.limit = this.limit += 4;
+    if (this.eventsPerDay.length <= this.limit) {
+      this.moreLoadable = false;
+    }
+    this._changeDetector.detectChanges();
+  }
+}

package/projects/sharedcomponents/src/lib/components/preferred-planning/preferred-planning.module.ts

@@ -0,0 +1,30 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {
+  ButtonModule,
+  IconModule,
+  InputCheckboxModule,
+  InputDatePickerModule,
+  InputRadioButtonModule
+} from "@colijnit/corecomponents_v12";
+import {PreferredPlanningComponent} from "./preferred-planning.component";
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    InputDatePickerModule,
+    IconModule,
+    ButtonModule,
+    InputCheckboxModule,
+    InputRadioButtonModule,
+  ],
+  declarations: [
+    PreferredPlanningComponent,
+  ],
+  exports: [
+    PreferredPlanningComponent
+  ]
+})
+export class PreferredPlanningModule {
+}