@2bitgmbh/planning-component v0.2.0

Table of Content

[TOC]

Introduction

2PLAN is a Angular Component Library developed for Angular 11, which is used to manage different types of schedules. E.g. project plan, shift schedules and deployment plan. The library uses material design from Angular Material. It contains a planning component which can visualize the planning on project or resource basis and a calendar component where the resources can look up their schedules.

Getting Started

Installation

1. To use this library you first need to install it with npm: npm install @2bitgmbh/planning-component.

2. The library should now be in the node_modules folder of your project. Next, we just need to set up the translation before the library is fully functional. The translation in the library is implemented with ngx-translate and has its translation files in the following directory ./node_modules/@2Bitgmbh/planning-component/assets/i18n. These files are needed at runtime. To load the translations of the library, the angular.json of your project must be modified as follows:

   ```json
   "architect": {
       "build": {
           "options": {
               "assets": [
                 {
                   "input": "node_modules/@2bitgmbh/planning-component/assets/i18n",
                   "glob": "*.json",
                   "output": "assets/i18n/planning-component"
                 }
               ]
           }
       }
   }
   ```

3. After that, you need to use the LibraryTranslationService from 2PLAN and call this.libraryTranslationService.initTranslations(language); when the language is initialized in your project.

4. The last step is to configure the locale for momentjs. Just add moment.locale(language); where your project language is initialized.

5. The code to load the translation from the library could look like this.:

   this.translateService.use(language).subscribe(() => {
       moment.locale(language);
       this.dateAdapter.setLocale(language);
       this.libraryTranslationService.initTranslations(language);
   });

Version

Build and Test

To build the library you have to be in the client directory of the workspace (./client) and it is required that the Angular CLI is installed. After that, you can enter the following command in the command line: ng build planning-component.

The library has no unit tests, but there are some E2E tests with Protractor in the directory ./client/e2e. The E2E tests can be run locally with the command npm run e2e-tests-local. Enter this command on the command line in the client directory of the workspace and the tests will be executed. In order for the tests to work, you also need to start the web application with ng serve and run the backend locally with Visual Studio. Make sure to run the web application on port 4200 and the backend on port 5000 or change the corresponding url of the web application and backend in the ./client/e2e/protractor.local.conf.js file.

Components

lib-gantt-activity

The lib-gantt-activity component is used to plan the activities of a project. With this component, allocations for activities can be created and edited. In addition, the activities can be edited directly.

If desired, menu items with additional functions can also be inserted via Content Projection.

Selector

lib-gantt-activity

Example

<lib-gantt-activity [activities$]="filteredActivities$"
                    [allocations$]="allocations$"
                    [planningStartDate]="planningStartDate"
                    (editActivity)="editActivity($event)"
                    (addAllocationWithPreselectedData)="addAllocationWithPreselectedData($event)"
                    (editAllocation)="editAllocation($event)">
  <button mat-menu-item (click)="addActivity()">{{"ACTIVITY.CREATE" | translate}}</button>
</lib-gantt-activity>

Input

Output

lib-gantt-resource

The lib-gantt-resource component is used for resource scheduling. With this component, allocations for resources can be created and edited. In addition, the resources can be edited directly.

If desired, menu items with additional functions can also be inserted via content projection.

Selector

lib-gantt-resource

Example

<lib-gantt-resource
  [resources$]="resources$"
  [allocations$]="allocations$"
  [planningStartDate]="planningStartDate"
  (editResource)="editResource($event)"
  (addAllocationWithPreselectedData)="addAllocationWithPreselectedData($event)"
  (editAllocation)="editAllocation($event)">
</lib-gantt-resource>

Input

Output

lib-gantt

Selector

lib-gantt [items] [sections]

Example

<lib-gantt [items]="items"
           [sections]="sections"
           [events]="events"
           [periodStart]="planningStartDate">
  <ng-content></ng-content>
</lib-gantt>

Input

Models

Section

Sections are displayed on the left side of the scheduler.

Item

Items are used to display the assignments of a section.

Events

The events are executed on interactions with the items / sections and can be used to react to them.

lib-calendar

The lib-calendar is used to display a calendar with monthly and weekly view. The calendar is filled with allocations on the corresponding date spans.

Selector

lib-calendar

Example

<lib-calendar 
    [events]="events" 
    [monthViewSelected]="true"
    (openAllocation)="openAllocation($event)">
</lib-calendar>

Inputs

Outputs

lib-calendar-month

The lib-calendar-month displays a calendar monthly view. The calendar is filled with allocations on the corresponding time period. If desired, a navigation in the selection header can be added via content projection.

Example

<lib-calendar-month 
    *ngIf="monthViewSelected"
    [events]="events"
    [(startDate)]="currentDate"
    (openAllocation)="openAllocationHandler($event)">
  <ng-container>
    <button mat-icon-button [matMenuTriggerFor]="dropMenu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #dropMenu="matMenu">
      <button mat-menu-item
              (click)="changeView('month')"
              [class.selected-view]="monthViewSelected">
        {{ "CALENDAR.MONTH" | translate }}
      </button>
      <button mat-menu-item
              (click)="changeView('week')"
              [class.selected-view]="!monthViewSelected">
        {{ "CALENDAR.WEEK" | translate }}
      </button>
    </mat-menu>
  </ng-container>
</lib-calendar-month>

Inputs

Outputs

lib-calendar-week

The lib-calendar-week displays a calendar weekly view. The calendar is filled with allocations on the corresponding time period. If desired, a navigation in the selection header can be added via content projection.

Example

<lib-calendar-week 
    [events]="events"
    [(startDate)]="currentDate"
    (openAllocation)="openAllocationHandler($event)">
  <ng-container>
    <button mat-icon-button [matMenuTriggerFor]="dropMenu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #dropMenu="matMenu">
      <button mat-menu-item
              (click)="changeView('month')"
              [class.selected-view]="monthViewSelected">
        {{ "CALENDAR.MONTH" | translate }}
      </button>
      <button mat-menu-item
              (click)="changeView('week')"
              [class.selected-view]="!monthViewSelected">
        {{ "CALENDAR.WEEK" | translate }}
      </button>
    </mat-menu>
  </ng-container>
</lib-calendar-week>

Inputs

Outputs

lib-message-overview

The lib-message-overview component displays an overview of all messages. They can be filtered by the names of the concerning projects, activities or resources. Furthermore, it provides a filter for the message type and for showing or hiding the accepted messages.

Example

<lib-message-overview 
    [messages]="data.messages" 
    (acceptMessageEvent)="handleAcceptEvent($event)" 
    (solveConflictEvent)="handleSolveConflictEvent($event)">
</lib-message-overview>

Inputs

Outputs

lib-datetime

The lib-gantt-resource component can be used if a user should be able to to enter a date and time. If the times are not relevant, the switch "all day" can be activated.

The component ensures that the start must be before the end. In addition, further validations can be defined as input parameters (see startDateValidator and endDateValidator).

Selector

lib-datetime [formGroup] [start] [end]

Example

<lib-datetime [formGroup]="activityForm"
              [startParent]="activityProject.startDate"
              [endParent]="activityProject.endDate"
              [start]="activity.startDate"
              [end]="activity.endDate"
              [disabled]="!isEditable"
              [startDateValidator]="isStartDateValid"
              [endDateValidator]="isEndDateValid">
</lib-datetime>

Input

NOTE formGroup: The form controls are added to the form group with the following keys:

• "startDate"
• "startTime"
• "endDate"
• "endTime"

StartDate and endDate contains a Moment.js object which combines the entered date and time.

lib-allocation-dialog

The lib-allocation-dialog component can be used to create or edit an allocation via dialog. It should be used in project and resource planning when an allocation is to be created or edited.

Selector

lib-allocation-dialog

Example

const dialogRef = this.dialog.open(AllocationDialogComponent, {
    width: "80%",
    data: {
        allocation,
        currentProjectId,
        projects$,
        projectActivities$,
        resources$: this.resourcesClient.getResources(),
        loadActivitiesForProjectFunction: this.loadActivitiesForProject,
        lockPast$,
        messages,
    },
});

Material Dialog Data

Public Members

Example

const dialogRef = this.dialog.open(AllocationDialogComponent, { ... });
const messageAcceptSubscription = dialogRef.componentInstance.acceptMessageEvent.subscribe(value => {
    this.handleMessageAcceptEvent(value, dialogRef, allocation.id);
});
const solveConflictEvent = dialogRef.componentInstance.solveConflictEvent.subscribe(value => {
    this.handleSolveConflictEvent(value);
});
dialogRef.afterClosed().subscribe(result => {
	  messageAcceptSubscription.unsubscribe();
    solveConflictEvent.unsubscribe();
});

Dialog result

On Save:

{ event: "save", data: IAllocationDto }

On Cancel:

{ event: "cancel" }

On Delete

{event: "delete", data: IAllocationDto }

lib-allocation-calendar-dialog

The lib-allocation-calendar-dialog component can be used if details of an allocation from the calendar are to be displayed. The allocation is not editable in this dialog. Only the work can be set to done if this has been activated on the activity of the allocation.

Selector

lib-allocation-calendar-dialog

Example

const dialogRef = this.dialog.open(AllocationCalendarDialogComponent, {
    width: "80%",
    data: {
        allocation: dto,
        isAcknowledgementActive: activityDto.acknowledgement,
    },
});

Material Dialog Data

Dialog result

On Save:

{ event: "save", data: IAllocationDto }

On Cancel:

{ event: "cancel" }

View Models

The following class diagram describes the view models and their connections. The properties that are used in the library are highlighted.

IAllocationDto

The IAllocationDto is the most important class, which is needed in almost all components. When a resource is assigned to an operation to process it, a corresponding allocation is created. The IAllocationDto is needed to display an allocation in the gantt or in the calendar or to display the exact details of an allocation in the dialog.

IActivityDto

For each project, several activities can be defined. The IActivityDto is used to perform the planning and to create IAllocationDto.

IResourceDto

The IResourceDto is used to assign an allocation to a resource.

IMessageDto

Messages are created, when errors occur during planning. These messages are displayed and can be accepted or resolved.