/*! * @license * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { Component, OnInit, OnDestroy } from '@angular/core'; import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, AbstractControl } from '@angular/forms'; import { ActivatedRoute, Params } from '@angular/router'; import { debounceTime, takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { set } from 'date-fns'; const DEFAULT_SIZE = 20; @Component({ selector: 'app-task-list-demo', templateUrl: './task-list-demo.component.html', styleUrls: [`./task-list-demo.component.scss`] }) export class TaskListDemoComponent implements OnInit, OnDestroy { taskListForm: UntypedFormGroup; errorMessage: string; minValue = 1; appId: number; defaultAppId: number; id: string; processDefinitionId: string; processInstanceId: string; state: string; assignment: string; name: string; sort: string; start: number; size: number = DEFAULT_SIZE; page: number = 0; dueAfter: string; dueBefore: string; includeProcessInstance: boolean; assignmentOptions = [ {value: 'assignee', title: 'Assignee'}, {value: 'candidate', title: 'Candidate'} ]; includeProcessInstanceOptions = [ {value: 'include', title: 'Include'}, {value: 'exclude', title: 'Exclude'} ]; stateOptions = [ {value: 'all', title: 'All'}, {value: 'active', title: 'Active'}, {value: 'completed', title: 'Completed'} ]; sortOptions = [ {value: 'created-asc', title: 'Created (asc)'}, {value: 'created-desc', title: 'Created (desc)'}, {value: 'due-asc', title: 'Due (asc)'}, {value: 'due-desc', title: 'Due (desc)'} ]; private onDestroy$ = new Subject(); constructor(private route: ActivatedRoute, private formBuilder: UntypedFormBuilder) { } ngOnInit() { if (this.route) { this.route.params.forEach((params: Params) => { if (params['id']) { this.defaultAppId = +params['id']; } }); } this.appId = this.defaultAppId; this.errorMessage = 'Insert App Id'; this.buildForm(); } ngOnDestroy() { this.onDestroy$.next(true); this.onDestroy$.complete(); } buildForm() { this.taskListForm = this.formBuilder.group({ taskAppId: new UntypedFormControl(this.defaultAppId, [Validators.pattern('^[0-9]*$')]), taskName: new UntypedFormControl(), taskId: new UntypedFormControl(), taskProcessDefinitionId: new UntypedFormControl(), taskProcessInstanceId: new UntypedFormControl(), taskAssignment: new UntypedFormControl(), taskState: new UntypedFormControl(), taskSort: new UntypedFormControl(), taskSize: new UntypedFormControl(null, [Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)]), taskPage: new UntypedFormControl(null, [Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)]), taskDueAfter: new UntypedFormControl(), taskDueBefore: new UntypedFormControl(), taskStart: new UntypedFormControl(null, [Validators.pattern('^[0-9]*$')]), taskIncludeProcessInstance: new UntypedFormControl() }); this.taskListForm.valueChanges .pipe( debounceTime(500), takeUntil(this.onDestroy$) ) .subscribe(taskFilter => { if (this.isFormValid()) { this.filterTasks(taskFilter); } }); } filterTasks(taskFilter: any) { this.appId = taskFilter.taskAppId; this.id = taskFilter.taskId; this.processDefinitionId = taskFilter.taskProcessDefinitionId; this.processInstanceId = taskFilter.taskProcessInstanceId; this.name = taskFilter.taskName; this.assignment = taskFilter.taskAssignment; this.state = taskFilter.taskState; this.sort = taskFilter.taskSort; this.start = taskFilter.taskStart; this.dueAfter = taskFilter.taskDueAfter ? this.setDueAfterFilter(taskFilter.taskDueAfter) : null; this.dueBefore = taskFilter.taskDueBefore; if (taskFilter.taskSize) { this.size = parseInt(taskFilter.taskSize, 10); } if (taskFilter.taskPage) { const pageValue = parseInt(taskFilter.taskPage, 10); this.page = pageValue > 0 ? pageValue - 1 : pageValue; } else { this.page = 0; } this.includeProcessInstance = taskFilter.taskIncludeProcessInstance === 'include'; } setDueAfterFilter(date): string { const dueDateFilter = set(new Date(date), { hours: 23, minutes: 59, seconds: 59 }); return dueDateFilter.toString(); } resetTaskForm() { this.taskListForm.reset(); this.resetQueryParameters(); } resetQueryParameters() { this.appId = null; this.id = null; this.processDefinitionId = null; this.processInstanceId = null; this.name = null; this.assignment = null; this.state = null; this.sort = null; this.start = null; this.size = DEFAULT_SIZE; this.page = null; this.dueAfter = null; this.dueBefore = null; } isFormValid() { return this.taskListForm?.dirty && this.taskListForm.valid; } private getControl(key: string): T { return this.taskListForm.get(key) as T; } get taskAppId(): UntypedFormControl { return this.getControl('taskAppId'); } get taskId(): UntypedFormControl { return this.getControl('taskId'); } get taskProcessDefinitionId(): UntypedFormControl { return this.getControl('taskProcessDefinitionId'); } get taskProcessInstanceId(): UntypedFormControl { return this.getControl('taskProcessInstanceId'); } get taskName(): UntypedFormControl { return this.getControl('taskName'); } get taskAssignment(): UntypedFormControl { return this.getControl('taskAssignment'); } get taskState(): UntypedFormControl { return this.getControl('taskState'); } get taskSort(): UntypedFormControl { return this.getControl('taskSort'); } get taskIncludeProcessInstance(): UntypedFormControl { return this.getControl('taskIncludeProcessInstance'); } get taskStart(): UntypedFormControl { return this.getControl('taskStart'); } get taskSize(): UntypedFormControl { return this.getControl('taskSize'); } get taskPage(): UntypedFormControl { return this.getControl('taskPage'); } get taskDueAfter(): UntypedFormControl { return this.getControl('taskDueAfter'); } get taskDueBefore(): UntypedFormControl { return this.getControl('taskDueBefore'); } }