@2bitgmbh/planning-component 中文文档教程

发布于 3年前 浏览 27 更新于 3年前

Table of Content

[[TOC]]

Introduction

2PLAN 是为 Angular 11 开发的 Angular 组件库,用于管理不同类型的日程安排。 例如项目计划、班次安排和部署计划。 该库使用来自 Angular Material 的材料设计。 它包含一个计划组件,可以在项目或资源基础上可视化计划,以及一个日历组件,资源可以在其中查找他们的时间表。

Getting Started

Installation

  1. 要使用此库,您首先需要使用 npm 安装它:npm install @2bitgmbh/planning-component

  2. 该库现在应该位于项目的 node_modules 文件夹中。 接下来,我们只需要在库完全正常运行之前设置翻译。 库中的翻译是使用 ngx-translate 实现的,其翻译文件位于以下目录 ./node_modules /@2Bitgmbh/planning-component/assets/i18n. 这些文件在运行时是需要的。 要加载库的翻译,您的项目的 angular.json 必须修改如下:

    "architect": {
        "build": {
            "options": {
                "assets": [
                  {
                    "input": "node_modules/@2bitgmbh/planning-component/assets/i18n",
                    "glob": "*.json",
                    "output": "assets/i18n/planning-component"
                  }
                ]
            }
        }
    }
    
  3. 之后,您需要使用 2PLAN 的 LibraryTranslationService 并调用 this.libraryTranslationService.initTranslations(language); 当语言在您的项目中初始化时。

  4. 最后一步是为 momentjs 配置语言环境。 只需在初始化项目语言的位置添加 moment.locale(language); 即可。

  5. 从库中加载翻译的代码可能如下所示:

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

Version

Release Updates
0.2.0 Implemented Library for Angular 11

Build and Test

要构建库,您必须位于工作区 (./client) 的客户端目录中,并且需要安装 Angular CLI。 之后,您可以在命令行中输入以下命令:ng build planning-component

该库没有单元测试,但目录 ./client/e2e 中有一些带有 Protractor 的 E2E 测试。 可以使用命令 npm run e2e-tests-local 在本地运行 E2E 测试。 在工作区的客户端目录中的命令行中输入此命令,将执行测试。 为了使测试正常运行,您还需要使用 ng serve 启动 Web 应用程序并使用 Visual Studio 在本地运行后端。 确保web应用在4200端口运行,后端在5000端口运行,或者在./client/e2e/protractor.local.conf.js文件中修改web应用和后端对应的url .

Components

lib-gantt-activity

lib-gantt-activity 组件用于计划项目的活动。 使用此组件,可以创建和编辑活动分配。 此外,可以直接编辑活动。

如果需要,还可以通过内容投影插入具有附加功能的菜单项。

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>

GanttActivityComponent

Input

Name Required Type Default Description
activities$ true Observable undefined Activities which should be displayed as sections.
allocations$ true Observable undefined Allocations which should be displayed as items.
planningStartDate false Moment moment().startOf("day") The start time of the scheduler as a moment object.
lockPast false boolean false If the past is closed and only planning into the future should be allowed.

Output

Name Type Description
editActivity EventEmitter<string> Is called when an activity is clicked. The activity ID is returned.
addAllocationWithPreselectedData EventEmitter<{ sectionId: string, startDate: moment_.Moment }> Is called when an allocation with preselected data should be added. The activity ID (sectionId) and the start date for the allocation are passed.
editAllocation EventEmitter<string> Is called when an allocation is clicked. The allocation ID is passed.
saveAllocationAfterDragDrop EventEmitter<{ id: string, sectionId: string }> Is called when an allocation should be saved after drag and drop. Since the allocation can only be moved to another activity, only the allocation ID (id) and the new activity id (sectionId) are passed.

lib-gantt-resource

lib-gantt-resource< /code> 组件用于资源调度。 使用此组件,可以创建和编辑资源分配。 此外,可以直接编辑资源。

如果需要,还可以通过内容投影插入具有附加功能的菜单项。

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>

GanttResoucreComponent

Input

Name Required Type Default Description
resources$ true Observable<IResourceDto[]> undefined Resources which should be displayed as sections.
allocations$ true Observable<AllocationDto[]> undefined Allocations which should be displayed as items.
planningStartDate false Moment moment().startOf("day") The start time of the scheduler as a moment object.
lockPast false boolean false If the past is closed and only planning into the future should be allowed.

Output

Name Type Description
editResource EventEmitter<string> Is called when a resource is clicked. The resource ID is passed.
addAllocationWithPreselectedData EventEmitter<{ sectionId: string, startDate: moment_.Moment }> Is called when an allocation with preselected data should be added. The resource ID (sectionId) and the start date for the allocation are passed.
editAllocation EventEmitter<string> Is called when an allocation is clicked. The allocation ID is passed.
saveAllocationAfterDragDrop EventEmitter<{ id: string, sectionId: string }> Is called when an allocation should be saved after drag and drop. Since the allocation can only be moved to another resource, only the allocation ID (id) and the new resource id (sectionId) are passed.

lib-gantt

Selector

lib-gantt [项目] [ sections]

Example

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

Input

Name Required Type Default Description
items true Item[] null An array of Item to fill up the items of the scheduler.
sections true Section[] null An array of Section to fill up the sections of the scheduler.
events false Events new Events() The events that can be hooked into.
periodStart false Moment moment().startOf("day") The start time of the scheduler as a moment object.
lockPast false boolean false If the past is closed and only planning into the future should be allowed.
locale false string "" Defines which locale for Moment.js should be loaded. By default, Moment.js uses English (United States) locale strings.
showBusinessDayOnly false boolean false Whether only working days are displayed (Mon-Fri).

Models

Section

部分显示在调度程序的左侧。

Name Required Type Default Description
id true string null A unique identifier for the section (e.q. activity or resource id).
name true string null The name to display for the section.
tooltip false string null It is used to display tooltip for the section.
absences false IAbsenceDto[] | undefined undefined The absences for a section. It is used to display absences in the schedule. This property is useful for resource planning
hasConflicts false boolean false Whenever a conflict has arisen in the planning for the section. If it is true a red bar is displayed.

Item

项目用于显示部分的分配。

Name Required Type Default Description
id true number null The identifier for the allocation.
name true string null The name to display for the item.
start true any null A Moment object denoting where this object starts.
end true any null A Moment object denoting where this object ends.
sectionID true number null The id of the section that this item belongs to.
tooltip false string null It is used to display tooltip for the section.
color false string "#ffce00" The background color for the allocation. This is useful to visualize the affiliation to a project.
hasConflicts false boolean false Whenever a conflict for this allocation exists. If it is true, the background color will be red.

Events

事件在与项目/部分的交互时执行,并可用于对它们做出反应。

Name Parameters Return type Description
SectionClickEvent section: Section void Triggered when a section is clicked.
SectionContextMenuEvent section: Section, event: MouseEvent void Triggered when a section is righted click.
PeriodChange start: moment.Moment, end: moment.Moment void Triggered when the period is changed.
AddAllocationWithPreselectedData sectionId: string, startDate: moment.Moment void Triggered when a cell in the scheduler is clicked.
EditAllocation id: string void Triggered when an item is clicked.
SaveAllocationAfterDragDrop id: string, sectionId: string void Triggered when an item is dropped to a new section. id is the id of the item and sectionId is the id of the target section.

lib-calendar

lib-calendar 用于显示具有每月和每周视图的日历。 日历中充满了相应日期跨度的分配。

Selector

lib-calendar

Example

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

Inputs

Name Required Type Default Description
events true IAllocationDto[] null Allocations which are displayed in the calendar.
monthViewSelected false boolean true Sets the initial displayed calendar view. If true the month view is displayed otherwise the week view is displayed.

Outputs

Name Type Description
openAllocation EventEmitter<string> Is called when an allocation is clicked. The allocation ID is passed.

lib-calendar-month

lib-calendar-month 显示日历月视图。 日历中充满了相应时间段的分配。 如果需要,可以通过内容投影在选择标题中添加导航。

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>

Calendar Month

Inputs

Name Required Type Default Description
events true IAllocationDto[] null Allocations which are displayed in the calendar.
startDate true Date new Date() The calendar initially displays the month of the date passed starting with the previous Monday of the first day in that month.

Outputs

Name Type Description
startDateChange EventEmitter<Date> Is called when the month has been changed. The start date of the new month is passed.
openAllocation EventEmitter<string> Is called when an allocation is clicked. The allocation ID is passed.

lib-calendar-week

lib-calendar-week 显示日历周视图。 日历中充满了相应时间段的分配。 如果需要,可以通过内容投影在选择标题中添加导航。

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>

Calendar Week

Inputs

Name Required Type Default Description
events true IAllocationDto[] null Allocations which are displayed in the calendar.
startDate true Date new Date() The calendar initially displays the week of the date passed. Starting at the previous Monday.

Outputs

Name Type Description
startDateChange EventEmitter<Date> Is called when the week has been changed. The start date of the new week is passed.
openAllocation EventEmitter<string> Is called when an allocation is clicked. The allocation ID is passed.

lib-message-overview

lib-message-overview 组件显示所有消息的概览。 它们可以通过相关项目、活动或资源的名称进行过滤。 此外,它还为消息类型以及显示或隐藏接受的消息提供了过滤器。

Example

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

Calendar Month

Inputs

Name Required Type Default Description
messages true IMessageDto[] null Messages that should be displayed in the overview.
messageType false number undefined Preset for the message type filter.

Outputs

Name Type Description
acceptMessageEvent EventEmitter<string> Returns the message ID of the message that the user clicked to accept.
solveConflictEvent EventEmitter<IMessageDto> Returns the message that the user wants to solve.

lib-datetime

如果用户需要,可以使用 lib-gantt-resource 组件能够输入日期和时间。 如果时间不相关,则可以激活“全天”开关。

该组件确保开始必须在结束之前。 此外,可以将进一步的验证定义为输入参数(参见 startDateValidatorendDateValidator)。

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>

DateTime

Input

Name Required Type Default Description
formGroup true FormGroup null The form group from the outer form element into which the component is integrated. For the input fields, form controls are added to the form group.
start true Date null The start date to be displayed in the input field.
end true Date null The end date to be displayed in the input field.
startParent false Date | undefined null The start date of the parent object. For example, an allocation must be within the date range of an activity. So the start date of the activity is passed here. The passed date is set as min property in the datepicker. Furthermore the date is set as start date if start is undefined.
endParent false Date | undefined null The end date of the parent object. For example, an allocation must be within the date range of an activity. So the end date of the activity is passed here. The passed date is set as max property in the datepicker. Furthermore the date is set as start date if end is undefined.
startDateValidator false (selectedStart: moment_.Moment) => any null startDateValidator is executed when the start date changes. If there is no error the function should return undefined. Otherwise the function should return an object with a form error (e.g. {dateRangeProject: true}). The form error is needed to display an error message below the input field.
endDateValidator false (selectedEnd: moment_.Moment) => any null endDateValidator is executed when the end date changes. If there is no error the function should return undefined. Otherwise the function should return an object with a form error (e.g. {dateRangeProject: true}). The form error is needed to display an error message below the input field.
disabled false boolean false Whether all fields should be disabled.

注意 formGroup: 表单控件使用以下键添加到表单组:

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

StartDate 和 endDate 包含一个 Moment.js 对象,它组合了输入的日期和时间。

lib-allocation-dialog

lib-allocation-dialog 组件可用于通过对话框创建或编辑分配。 当要创建或编辑分配时,应该在项目和资源规划中使用它。

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,
    },
});

AllocationDialog

Material Dialog Data

Name Type Description
allocation IAllocationDto The dto of the allocation to be displayed. If a new allocation is to be created, create a new dto.
projects$ Observable<IProjectDto[]> | undefined The projects which can be selected in the dialog. if undefined is passed, the project of an allocation cannot be changed.
currentProjectId string | undefined The project ID to which the allocation activity belongs to. The value should only be specified if projects$ is not undefined. Otherwise, undefined can be passed.
projectActivities$ Observable<IActivityDto[]> | undefined All activities of the currently active project or undefined if project is not specified yet.
resources$ Observable<IResourceDto[]> All resources which are available for selection for the event.
loadActivitiesForProjectFunction (projectId: string) => Observable<IActivityDto[]> Function which is called when the project changes. The function should return all activities of the newly selected project.
lockPast$ Observable<boolean> | undefined Whether the past is closed and only planning into the future is allowed.
messages IMessageDto[] All messages which belong to the allocation or an empty array if no messages exists.

Public Members

Name Type Default Description
acceptMessageEvent EventEmitter<string> new EventEmitter<string>() Is called when a message is accepted. The message ID is passed.
You have to subscribe to this event and forward the call to the server to save the message.
solveConflictEvent EventEmitter<IMessageDto> new EventEmitter<IMessageDto>() Is called when a message is to be resolved.
You have to subscribe to this event and navigate to the route where the planner can solve the message.

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

保存时:

{ event: "save", data: IAllocationDto }

取消时:

{ event: "cancel" }

删除时

{event: "delete", data: IAllocationDto }

lib-allocation-calendar-dialog

<如果要显示日历分配的详细信息,则可以使用 code>lib-allocation-calendar-dialog 组件。 分配在此对话框中不可编辑。 如果已在分配活动中激活,则只能将工作设置为完成。

Selector

lib-allocation-calendar-dialog

Example

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

AllocationCalendarDialog

Material Dialog Data

Name Type Description
allocation IAllocationDto The dto of the allocation to be displayed.
isAcknowledgementActive boolean Whether acknowledgment is active on the activity of the allocation. If true the allocation can be marked as done.

Dialog result

保存时:

{ event: "save", data: IAllocationDto }

取消时:

{ event: "cancel" }

View Models

以下类图描述了视图模型及其连接。 库中使用的属性突出显示。

ViewModels

IAllocationDto

IAllocationDto 是最重要的类,需要在几乎所有组件。 当资源分配给操作以处理它时,将创建相应的分配。 IAllocationDto 需要在甘特图或日历中显示分配,或在对话框中显示分配的确切细节。

Name Type Description
resourceId string The id of the resource to which the allocation was assigned.
activityId string The id of the activity to which the allocation was assigned.
resourceName string | undefined Is used to display the name of the assigned resource of an allocation in lib-gantt-activity.
activityName string | undefined Is used to display the name of the assigned activity of an allocation.
activityProjectName string | undefined Is used to display in lib-allocation-calendar-dialog the name of the project to which the activity belongs.
activityProjectColour string | undefined The project color is used to highlight the allocation.
workingHours number The number of hours a resource has available to complete the work.
isAcknowledged boolean | undefined Whenever the resource has completed the activity.
messages MessageTypes | undefined This property is used to find out if there exists messages for an allocation. If so, the allocation is marked red in lib-gantt.

IActivityDto

对于每个项目,可以定义多个活动。 IActivityDto 用于执行规划和创建 IAllocationDto

Name Type Description
startDate Date | undefined When an allocation is created / edited, the start date of the activity is used to check if the allocation has the same or a greater start date. Otherwise the allocation cannot be saved.
endDate Date | undefined When an allocation is created / edited, the end date of the activity is used to check if the allocation has the same or a smaller end date. Otherwise the allocation cannot be saved.
skills ISkillDto | undefined Is used to calculate whether the skills of the activity of an allocation match the skills of a resource to determine if the resource is appropriate for the allocation.
messages MessageTypes | undefined This property is used to find out if there exists messages for an activity. If so, the activity is marked red in lib-gantt.

IResourceDto

IResourceDto 用于分配资源分配。

Name Type Description
skills ISkillDto | undefined Is used to calculate whether the skills of a resource match the skills of the activity of an allocation to determine if the resource is appropriate for the allocation.
workingDays IWorkingDayDto[] | undefined Is used to calculate whether the days between the start and end dates of an allocation are working days of the resource to determine if the resource is appropriate for the allocation.
absences IAbsenceDto[] | undefined Is used to calculate if the resource has absences between the days from the start and end dates of an allocation to determine if the resource is appropriate for the allocation.

IMessageDto

当计划期间出现错误时,将创建消息。 显示这些消息并可以接受或解决。

Name Type Description
startDate Date | undefined Defines the start date of a conflict. Only used for the validation cases ResourceNotAvailable, ResourceMultipleBooking, HolidayBooking.
endDate Date | undefined Defines the end date of a conflict. Only used for the validation cases ResourceNotAvailable, ResourceMultipleBooking, HolidayBooking.
validationCase ValidationCase Defines why a message exists. Based on the case, an appropriate message is displayed.
projectName string | undefined Is only used if the message affects only the project. The project name is displayed in the message details.
activityName string | undefined Is only used if the message affects only the activity of a project. The activity name is displayed in the message details.
allocations MessageAllocationSummaryDto[] | undefined Defines which allocations are affected by the message. E.g. if there are parallel bookings for a resource on different projects, only one message will be created and the affected allocations will be listed in allocations. In MessageAllocationSummaryDto the information is stored, which project, which activity and which resource the message concerns.

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:

    "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

Release Updates
0.2.0 Implemented Library for Angular 11

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>

GanttActivityComponent

Input

Name Required Type Default Description
activities$ true Observable undefined Activities which should be displayed as sections.
allocations$ true Observable undefined Allocations which should be displayed as items.
planningStartDate false Moment moment().startOf("day") The start time of the scheduler as a moment object.
lockPast false boolean false If the past is closed and only planning into the future should be allowed.

Output

Name Type Description
editActivity EventEmitter<string> Is called when an activity is clicked. The activity ID is returned.
addAllocationWithPreselectedData EventEmitter<{ sectionId: string, startDate: moment_.Moment }> Is called when an allocation with preselected data should be added. The activity ID (sectionId) and the start date for the allocation are passed.
editAllocation EventEmitter<string> Is called when an allocation is clicked. The allocation ID is passed.
saveAllocationAfterDragDrop EventEmitter<{ id: string, sectionId: string }> Is called when an allocation should be saved after drag and drop. Since the allocation can only be moved to another activity, only the allocation ID (id) and the new activity id (sectionId) are passed.

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>

GanttResoucreComponent

Input

Name Required Type Default Description
resources$ true Observable<IResourceDto[]> undefined Resources which should be displayed as sections.
allocations$ true Observable<AllocationDto[]> undefined Allocations which should be displayed as items.
planningStartDate false Moment moment().startOf("day") The start time of the scheduler as a moment object.
lockPast false boolean false If the past is closed and only planning into the future should be allowed.

Output

Name Type Description
editResource EventEmitter<string> Is called when a resource is clicked. The resource ID is passed.
addAllocationWithPreselectedData EventEmitter<{ sectionId: string, startDate: moment_.Moment }> Is called when an allocation with preselected data should be added. The resource ID (sectionId) and the start date for the allocation are passed.
editAllocation EventEmitter<string> Is called when an allocation is clicked. The allocation ID is passed.
saveAllocationAfterDragDrop EventEmitter<{ id: string, sectionId: string }> Is called when an allocation should be saved after drag and drop. Since the allocation can only be moved to another resource, only the allocation ID (id) and the new resource id (sectionId) are passed.

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

Name Required Type Default Description
items true Item[] null An array of Item to fill up the items of the scheduler.
sections true Section[] null An array of Section to fill up the sections of the scheduler.
events false Events new Events() The events that can be hooked into.
periodStart false Moment moment().startOf("day") The start time of the scheduler as a moment object.
lockPast false boolean false If the past is closed and only planning into the future should be allowed.
locale false string "" Defines which locale for Moment.js should be loaded. By default, Moment.js uses English (United States) locale strings.
showBusinessDayOnly false boolean false Whether only working days are displayed (Mon-Fri).

Models

Section

Sections are displayed on the left side of the scheduler.

Name Required Type Default Description
id true string null A unique identifier for the section (e.q. activity or resource id).
name true string null The name to display for the section.
tooltip false string null It is used to display tooltip for the section.
absences false IAbsenceDto[] | undefined undefined The absences for a section. It is used to display absences in the schedule. This property is useful for resource planning
hasConflicts false boolean false Whenever a conflict has arisen in the planning for the section. If it is true a red bar is displayed.

Item

Items are used to display the assignments of a section.

Name Required Type Default Description
id true number null The identifier for the allocation.
name true string null The name to display for the item.
start true any null A Moment object denoting where this object starts.
end true any null A Moment object denoting where this object ends.
sectionID true number null The id of the section that this item belongs to.
tooltip false string null It is used to display tooltip for the section.
color false string "#ffce00" The background color for the allocation. This is useful to visualize the affiliation to a project.
hasConflicts false boolean false Whenever a conflict for this allocation exists. If it is true, the background color will be red.

Events

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

Name Parameters Return type Description
SectionClickEvent section: Section void Triggered when a section is clicked.
SectionContextMenuEvent section: Section, event: MouseEvent void Triggered when a section is righted click.
PeriodChange start: moment.Moment, end: moment.Moment void Triggered when the period is changed.
AddAllocationWithPreselectedData sectionId: string, startDate: moment.Moment void Triggered when a cell in the scheduler is clicked.
EditAllocation id: string void Triggered when an item is clicked.
SaveAllocationAfterDragDrop id: string, sectionId: string void Triggered when an item is dropped to a new section. id is the id of the item and sectionId is the id of the target section.

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

Name Required Type Default Description
events true IAllocationDto[] null Allocations which are displayed in the calendar.
monthViewSelected false boolean true Sets the initial displayed calendar view. If true the month view is displayed otherwise the week view is displayed.

Outputs

Name Type Description
openAllocation EventEmitter<string> Is called when an allocation is clicked. The allocation ID is passed.

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>

Calendar Month

Inputs

Name Required Type Default Description
events true IAllocationDto[] null Allocations which are displayed in the calendar.
startDate true Date new Date() The calendar initially displays the month of the date passed starting with the previous Monday of the first day in that month.

Outputs

Name Type Description
startDateChange EventEmitter<Date> Is called when the month has been changed. The start date of the new month is passed.
openAllocation EventEmitter<string> Is called when an allocation is clicked. The allocation ID is passed.

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>

Calendar Week

Inputs

Name Required Type Default Description
events true IAllocationDto[] null Allocations which are displayed in the calendar.
startDate true Date new Date() The calendar initially displays the week of the date passed. Starting at the previous Monday.

Outputs

Name Type Description
startDateChange EventEmitter<Date> Is called when the week has been changed. The start date of the new week is passed.
openAllocation EventEmitter<string> Is called when an allocation is clicked. The allocation ID is passed.

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>

Calendar Month

Inputs

Name Required Type Default Description
messages true IMessageDto[] null Messages that should be displayed in the overview.
messageType false number undefined Preset for the message type filter.

Outputs

Name Type Description
acceptMessageEvent EventEmitter<string> Returns the message ID of the message that the user clicked to accept.
solveConflictEvent EventEmitter<IMessageDto> Returns the message that the user wants to solve.

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>

DateTime

Input

Name Required Type Default Description
formGroup true FormGroup null The form group from the outer form element into which the component is integrated. For the input fields, form controls are added to the form group.
start true Date null The start date to be displayed in the input field.
end true Date null The end date to be displayed in the input field.
startParent false Date | undefined null The start date of the parent object. For example, an allocation must be within the date range of an activity. So the start date of the activity is passed here. The passed date is set as min property in the datepicker. Furthermore the date is set as start date if start is undefined.
endParent false Date | undefined null The end date of the parent object. For example, an allocation must be within the date range of an activity. So the end date of the activity is passed here. The passed date is set as max property in the datepicker. Furthermore the date is set as start date if end is undefined.
startDateValidator false (selectedStart: moment_.Moment) => any null startDateValidator is executed when the start date changes. If there is no error the function should return undefined. Otherwise the function should return an object with a form error (e.g. {dateRangeProject: true}). The form error is needed to display an error message below the input field.
endDateValidator false (selectedEnd: moment_.Moment) => any null endDateValidator is executed when the end date changes. If there is no error the function should return undefined. Otherwise the function should return an object with a form error (e.g. {dateRangeProject: true}). The form error is needed to display an error message below the input field.
disabled false boolean false Whether all fields should be disabled.

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,
    },
});

AllocationDialog

Material Dialog Data

Name Type Description
allocation IAllocationDto The dto of the allocation to be displayed. If a new allocation is to be created, create a new dto.
projects$ Observable<IProjectDto[]> | undefined The projects which can be selected in the dialog. if undefined is passed, the project of an allocation cannot be changed.
currentProjectId string | undefined The project ID to which the allocation activity belongs to. The value should only be specified if projects$ is not undefined. Otherwise, undefined can be passed.
projectActivities$ Observable<IActivityDto[]> | undefined All activities of the currently active project or undefined if project is not specified yet.
resources$ Observable<IResourceDto[]> All resources which are available for selection for the event.
loadActivitiesForProjectFunction (projectId: string) => Observable<IActivityDto[]> Function which is called when the project changes. The function should return all activities of the newly selected project.
lockPast$ Observable<boolean> | undefined Whether the past is closed and only planning into the future is allowed.
messages IMessageDto[] All messages which belong to the allocation or an empty array if no messages exists.

Public Members

Name Type Default Description
acceptMessageEvent EventEmitter<string> new EventEmitter<string>() Is called when a message is accepted. The message ID is passed.
You have to subscribe to this event and forward the call to the server to save the message.
solveConflictEvent EventEmitter<IMessageDto> new EventEmitter<IMessageDto>() Is called when a message is to be resolved.
You have to subscribe to this event and navigate to the route where the planner can solve the message.

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,
    },
});

AllocationCalendarDialog

Material Dialog Data

Name Type Description
allocation IAllocationDto The dto of the allocation to be displayed.
isAcknowledgementActive boolean Whether acknowledgment is active on the activity of the allocation. If true the allocation can be marked as done.

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.

ViewModels

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.

Name Type Description
resourceId string The id of the resource to which the allocation was assigned.
activityId string The id of the activity to which the allocation was assigned.
resourceName string | undefined Is used to display the name of the assigned resource of an allocation in lib-gantt-activity.
activityName string | undefined Is used to display the name of the assigned activity of an allocation.
activityProjectName string | undefined Is used to display in lib-allocation-calendar-dialog the name of the project to which the activity belongs.
activityProjectColour string | undefined The project color is used to highlight the allocation.
workingHours number The number of hours a resource has available to complete the work.
isAcknowledged boolean | undefined Whenever the resource has completed the activity.
messages MessageTypes | undefined This property is used to find out if there exists messages for an allocation. If so, the allocation is marked red in lib-gantt.

IActivityDto

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

Name Type Description
startDate Date | undefined When an allocation is created / edited, the start date of the activity is used to check if the allocation has the same or a greater start date. Otherwise the allocation cannot be saved.
endDate Date | undefined When an allocation is created / edited, the end date of the activity is used to check if the allocation has the same or a smaller end date. Otherwise the allocation cannot be saved.
skills ISkillDto | undefined Is used to calculate whether the skills of the activity of an allocation match the skills of a resource to determine if the resource is appropriate for the allocation.
messages MessageTypes | undefined This property is used to find out if there exists messages for an activity. If so, the activity is marked red in lib-gantt.

IResourceDto

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

Name Type Description
skills ISkillDto | undefined Is used to calculate whether the skills of a resource match the skills of the activity of an allocation to determine if the resource is appropriate for the allocation.
workingDays IWorkingDayDto[] | undefined Is used to calculate whether the days between the start and end dates of an allocation are working days of the resource to determine if the resource is appropriate for the allocation.
absences IAbsenceDto[] | undefined Is used to calculate if the resource has absences between the days from the start and end dates of an allocation to determine if the resource is appropriate for the allocation.

IMessageDto

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

Name Type Description
startDate Date | undefined Defines the start date of a conflict. Only used for the validation cases ResourceNotAvailable, ResourceMultipleBooking, HolidayBooking.
endDate Date | undefined Defines the end date of a conflict. Only used for the validation cases ResourceNotAvailable, ResourceMultipleBooking, HolidayBooking.
validationCase ValidationCase Defines why a message exists. Based on the case, an appropriate message is displayed.
projectName string | undefined Is only used if the message affects only the project. The project name is displayed in the message details.
activityName string | undefined Is only used if the message affects only the activity of a project. The activity name is displayed in the message details.
allocations MessageAllocationSummaryDto[] | undefined Defines which allocations are affected by the message. E.g. if there are parallel bookings for a resource on different projects, only one message will be created and the affected allocations will be listed in allocations. In MessageAllocationSummaryDto the information is stored, which project, which activity and which resource the message concerns.
更多

友情链接

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文