mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4302] - move cloud folder from app-layout to component (#4525)
This commit is contained in:
Silviu Popa
committed by
Eugenio Romano
Eugenio Romano
parent
17efd33f44
commit
f422fa30d2
@@ -0,0 +1 @@
|
||||
<adf-cloud-app-list (appClick)="onAppClick($event)"></adf-cloud-app-list>
|
||||
@@ -0,0 +1,35 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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 } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { CloudLayoutService } from './services/cloud-layout.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './apps-cloud-demo.component.html'
|
||||
})
|
||||
|
||||
export class AppsCloudDemoComponent {
|
||||
|
||||
constructor(private router: Router, private cloudLayoutService: CloudLayoutService) {
|
||||
}
|
||||
|
||||
onAppClick(app) {
|
||||
this.cloudLayoutService.setCurrentTaskFilterParam({key: 'my-tasks'});
|
||||
this.router.navigate([`/cloud/${app.name}`]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<adf-toolbar>
|
||||
<div fxLayout="column" fxLayoutAlign="center">
|
||||
<div fxLayout="row">
|
||||
<div class="adf-app-crumb">{{appName + ' >'}} </div>
|
||||
<div class="adf-filter-crumb"> {{filterName | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</adf-toolbar>
|
||||
@@ -0,0 +1,8 @@
|
||||
.adf-app-crumb {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.adf-filter-crumb {
|
||||
opacity: 0.8;
|
||||
margin-left: 5px;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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 } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-cloud-breadcrumbs',
|
||||
templateUrl: './cloud-breadcrumb-component.html',
|
||||
styleUrls: ['cloud-breadcrumb-component.scss']
|
||||
})
|
||||
export class CloudBreadcrumbsComponent implements OnInit {
|
||||
|
||||
appName: string;
|
||||
filterName: string;
|
||||
|
||||
constructor(private route: ActivatedRoute) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.route.parent.params.subscribe((
|
||||
params) => {
|
||||
this.appName = params.appName;
|
||||
});
|
||||
this.route.queryParams.subscribe((params) => {
|
||||
if (params.filterName) {
|
||||
this.filterName = params.filterName;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel [expanded]="expandTaskFilter" (opened)="onTaskFilterOpen()" (closed)="onTaskFilterClose()" data-automation-id='Task Filters'>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Task Filters
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<adf-cloud-task-filters
|
||||
*ngIf="expandTaskFilter"
|
||||
[appName]="appName"
|
||||
[showIcons]="true"
|
||||
[filterParam]="currentTaskFilter$ | async"
|
||||
(filterClick)="onTaskFilterSelected($event)">
|
||||
</adf-cloud-task-filters>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel [expanded]="expandProcessFilter" (opened)="onProcessFilterOpen()" (closed)="onProcessFilterClose()" data-automation-id='Process Filters'>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Process Filters
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<adf-cloud-process-filters
|
||||
*ngIf="expandProcessFilter"
|
||||
[appName]="appName"
|
||||
[showIcons]="true"
|
||||
[filterParam]="currentProcessFilter$ | async"
|
||||
(filterClick)="onProcessFilterSelected($event)">
|
||||
</adf-cloud-process-filters>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
@@ -0,0 +1,3 @@
|
||||
adf-cloud-task-filters .adf-filters__entry, adf-cloud-process-filters .adf-filters__entry {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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, ViewEncapsulation, Input, OnInit } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { CloudLayoutService } from './services/cloud-layout.service';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
@Component({
|
||||
selector: 'app-cloud-filters-demo',
|
||||
templateUrl: './cloud-filters-demo.component.html',
|
||||
styleUrls: ['cloud-filters-demo.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class CloudFiltersDemoComponent implements OnInit {
|
||||
|
||||
@Input()
|
||||
appName: string;
|
||||
|
||||
currentTaskFilter$: Observable<any>;
|
||||
currentProcessFilter$: Observable<any>;
|
||||
|
||||
toggleTaskFilter = true;
|
||||
toggleProcessFilter = true;
|
||||
|
||||
expandTaskFilter = true;
|
||||
expandProcessFilter = false;
|
||||
|
||||
constructor(
|
||||
private cloudLayoutService: CloudLayoutService,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.currentTaskFilter$ = this.cloudLayoutService.getCurrentTaskFilterParam();
|
||||
this.currentProcessFilter$ = this.cloudLayoutService.getCurrentProcessFilterParam();
|
||||
let root = '';
|
||||
if (this.route.snapshot && this.route.snapshot.firstChild) {
|
||||
root = this.route.snapshot.firstChild.url[0].path;
|
||||
if (root === 'tasks') {
|
||||
this.expandTaskFilter = true;
|
||||
this.expandProcessFilter = false;
|
||||
} else if (root === 'processes') {
|
||||
this.expandProcessFilter = true;
|
||||
this.expandTaskFilter = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onTaskFilterSelected(filter) {
|
||||
this.cloudLayoutService.setCurrentTaskFilterParam({id: filter.id});
|
||||
const currentFilter = Object.assign({}, filter);
|
||||
this.router.navigate([`/cloud/${this.appName}/tasks/`], { queryParams: currentFilter });
|
||||
}
|
||||
|
||||
onProcessFilterSelected(filter) {
|
||||
this.cloudLayoutService.setCurrentProcessFilterParam({id: filter.id});
|
||||
const currentFilter = Object.assign({}, filter);
|
||||
this.router.navigate([`/cloud/${this.appName}/processes/`], { queryParams: currentFilter });
|
||||
}
|
||||
|
||||
onTaskFilterOpen(): boolean {
|
||||
this.expandTaskFilter = true;
|
||||
this.expandProcessFilter = false;
|
||||
return this.toggleTaskFilter;
|
||||
}
|
||||
|
||||
onTaskFilterClose(): boolean {
|
||||
return !this.toggleTaskFilter;
|
||||
}
|
||||
|
||||
onProcessFilterOpen(): boolean {
|
||||
this.expandProcessFilter = true;
|
||||
this.expandTaskFilter = false;
|
||||
return this.toggleProcessFilter;
|
||||
}
|
||||
|
||||
onProcessFilterClose(): boolean {
|
||||
return !this.toggleProcessFilter;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
|
||||
<mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
|
||||
<div fxFill fxLayout>
|
||||
<adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
|
||||
<adf-sidenav-layout-header>
|
||||
<ng-template>
|
||||
<app-cloud-breadcrumbs></app-cloud-breadcrumbs>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-header>
|
||||
<adf-sidenav-layout-navigation>
|
||||
<ng-template>
|
||||
<adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
|
||||
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
|
||||
<div adf-sidebar-menu-options>
|
||||
<button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
|
||||
<mat-icon>assessment</mat-icon>
|
||||
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div adf-sidebar-menu-options>
|
||||
<button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
|
||||
<mat-icon>assessment</mat-icon>
|
||||
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</adf-sidebar-action-menu>
|
||||
<app-cloud-filters-demo [appName]="appName"></app-cloud-filters-demo>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-navigation>
|
||||
<adf-sidenav-layout-content>
|
||||
<ng-template>
|
||||
<router-outlet></router-outlet>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-content>
|
||||
</adf-sidenav-layout>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
|
||||
<app-cloud-settings></app-cloud-settings>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
@@ -0,0 +1,7 @@
|
||||
.adf-cloud-layout-overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.adf-cloud-layout-tab-body .mat-tab-body-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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, ViewEncapsulation } from '@angular/core';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { CloudLayoutService } from './services/cloud-layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-cloud-layout',
|
||||
templateUrl: './cloud-layout.component.html',
|
||||
styleUrls: ['./cloud-layout.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class CloudLayoutComponent implements OnInit {
|
||||
displayMenu = true;
|
||||
appName: string;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private cloudLayoutService: CloudLayoutService
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
let root: string = '';
|
||||
this.route.params.subscribe((params) => {
|
||||
this.appName = params.appName;
|
||||
});
|
||||
|
||||
if (this.route.snapshot && this.route.snapshot.firstChild) {
|
||||
root = this.route.snapshot.firstChild.url[0].path;
|
||||
}
|
||||
|
||||
this.route.queryParams.subscribe((params) => {
|
||||
if (root === 'tasks' && params.id) {
|
||||
this.cloudLayoutService.setCurrentTaskFilterParam({ id: params.id });
|
||||
}
|
||||
|
||||
if (root === 'processes' && params.id) {
|
||||
this.cloudLayoutService.setCurrentProcessFilterParam({ id: params.id });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onStartTask() {
|
||||
this.router.navigate([`/cloud/${this.appName}/start-task/`]);
|
||||
}
|
||||
|
||||
onStartProcess() {
|
||||
this.router.navigate([`/cloud/${this.appName}/start-process/`]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<div fxFlex fxLayout="column" class="adf-settings-container">
|
||||
<mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
|
||||
{{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<mat-slide-toggle [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
|
||||
{{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<mat-slide-toggle [color]="'primary'" [checked]="taskDetailsRedirection" (change)="toggleTaskDetailsRedirection()" data-automation-id="taskDetailsRedirection">
|
||||
{{ 'SETTINGS_CLOUD.TASK_DETAILS_REDIRECTION' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<mat-form-field data-automation-id="selectionMode">
|
||||
<mat-label>
|
||||
{{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }}
|
||||
</mat-label>
|
||||
<mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
|
||||
<mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
|
||||
{{ option.title }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
.adf-settings-container {
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
.adf-settings-container mat-form-field {
|
||||
max-width: 200px;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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 } from '@angular/core';
|
||||
import { CloudLayoutService } from './services/cloud-layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-cloud-settings',
|
||||
templateUrl: './cloud-settings.component.html',
|
||||
styleUrls: ['./cloud-settings.component.scss']
|
||||
})
|
||||
export class CloudSettingsComponent implements OnInit {
|
||||
|
||||
multiselect: boolean;
|
||||
selectionMode: string;
|
||||
testingMode: boolean;
|
||||
taskDetailsRedirection: boolean;
|
||||
|
||||
selectionModeOptions = [
|
||||
{ value: '', title: 'None' },
|
||||
{ value: 'single', title: 'Single' },
|
||||
{ value: 'multiple', title: 'Multiple' }
|
||||
];
|
||||
|
||||
constructor(private cloudLayoutService: CloudLayoutService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.cloudLayoutService.getCurrentSettings()
|
||||
.subscribe((settings) => this.setCurrentSettings(settings));
|
||||
}
|
||||
|
||||
setCurrentSettings(settings) {
|
||||
if (settings) {
|
||||
this.multiselect = settings.multiselect;
|
||||
this.testingMode = settings.testingMode;
|
||||
this.selectionMode = settings.selectionMode;
|
||||
this.taskDetailsRedirection = settings.taskDetailsRedirection;
|
||||
}
|
||||
}
|
||||
|
||||
toggleMultiselect() {
|
||||
this.multiselect = !this.multiselect;
|
||||
this.setSetting();
|
||||
}
|
||||
|
||||
toggleTestingMode() {
|
||||
this.testingMode = !this.testingMode;
|
||||
this.setSetting();
|
||||
}
|
||||
|
||||
toggleTaskDetailsRedirection() {
|
||||
this.taskDetailsRedirection = !this.taskDetailsRedirection;
|
||||
this.setSetting();
|
||||
}
|
||||
|
||||
onSelectionModeChange() {
|
||||
this.setSetting();
|
||||
}
|
||||
|
||||
setSetting() {
|
||||
this.cloudLayoutService.setCurrentSettings({
|
||||
multiselect: this.multiselect,
|
||||
testingMode: this.testingMode,
|
||||
selectionMode: this.selectionMode,
|
||||
taskDetailsRedirection: this.taskDetailsRedirection
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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 { Directive, HostListener, Input } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[appNestedMenuPosition]'
|
||||
})
|
||||
export class NestedMenuPositionDirective {
|
||||
|
||||
@Input()
|
||||
menuMinimized: string;
|
||||
|
||||
nestedMenuLeftPadding: string = '220px';
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
onClick() {
|
||||
|
||||
const overlayContainer = (document.querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement);
|
||||
(document.querySelector('.cdk-overlay-pane') as HTMLElement).style.width = '100%';
|
||||
|
||||
if (!this.menuMinimized) {
|
||||
setTimeout(() => {
|
||||
overlayContainer.style.left = this.nestedMenuLeftPadding;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
<mat-card class="adf-section">
|
||||
<mat-card-title>
|
||||
{{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}}
|
||||
</mat-card-title>
|
||||
|
||||
<mat-card-content>
|
||||
<br>
|
||||
<mat-radio-group (change)="onChangePeopleMode($event)">
|
||||
<mat-radio-button checked="true" class="adf-people-single-mode" data-automation-id="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
|
||||
'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
|
||||
<mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
|
||||
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<div class="people-control-options">
|
||||
<mat-radio-group (change)="onChangePeopleFilterMode($event)">
|
||||
<mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
|
||||
'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
|
||||
<mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-people-filter-role" value="role">{{
|
||||
'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<mat-form-field *ngIf="!isPeopleAppNameSelected()" class="adf-preselect-value">
|
||||
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"]</mat-label>
|
||||
<input matInput (input)="setPeopleRoles($event)" data-automation-id="adf-people-roles-input" />
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="isPeopleAppNameSelected()" class="adf-preselect-value">
|
||||
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
|
||||
<input matInput (input)="setPeopleAppName($event)" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="adf-preselect-value-full">
|
||||
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}: {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
|
||||
<input matInput (input)="setPeoplePreselectValue($event)" data-automation-id="adf-people-preselect-input" />
|
||||
</mat-form-field>
|
||||
<mat-checkbox class="adf-preselect-value" (change)="onChangePeopleValidation($event)">{{
|
||||
'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<adf-cloud-people
|
||||
[preSelectUsers]="preSelectUsers"
|
||||
[validate]="peoplePreselectValidation"
|
||||
[appName]="peopleAppName"
|
||||
[roles]="peopleRoles"
|
||||
[appName]="peopleAppName"
|
||||
[mode]="peopleMode"></adf-cloud-people>
|
||||
</div>
|
||||
|
||||
<div class="adf-people-list" *ngIf="canShowPeopleList()">
|
||||
<mat-list role="list">
|
||||
<mat-list-item *ngFor="let item of preSelectUsers" role="listitem">
|
||||
<mat-icon mat-list-icon>person</mat-icon>
|
||||
{{ item?.firstName }} {{ item?.lastName }}
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="adf-section">
|
||||
<mat-card-title>
|
||||
{{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}}
|
||||
</mat-card-title>
|
||||
|
||||
<mat-card-content>
|
||||
<br>
|
||||
<mat-radio-group (change)="onChangeGroupsMode($event)">
|
||||
<mat-radio-button checked="true" class="adf-people-single-mode" data-automation-id="adf-group-single-mode" value="{{ groupSingleMode }}">{{
|
||||
'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
|
||||
<mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-group-multiple-mode" value="{{ groupMultipleMode }}">{{
|
||||
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<div class="groups-control-options">
|
||||
<mat-radio-group (change)="onChangeGroupsFilterMode($event)">
|
||||
<mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
|
||||
'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
|
||||
<mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-group-filter-role" value="role">{{
|
||||
'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<mat-form-field *ngIf="!isGroupAppNameSelected()" class="adf-preselect-value">
|
||||
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"]</mat-label>
|
||||
<input matInput (input)="setGroupRoles($event)" data-automation-id="adf-group-roles-input"/>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="isGroupAppNameSelected()" class="adf-preselect-value">
|
||||
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
|
||||
<input matInput (input)="setGroupAppName($event)" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="adf-preselect-value-full">
|
||||
<mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
|
||||
<input matInput (input)="setGroupsPreselectValue($event)" data-automation-id="adf-group-preselect-input" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<adf-cloud-group [mode]="groupMode" [roles]="groupRoles" [appName]="groupAppName" [preSelectGroups]="preSelectGroup"
|
||||
(selectGroup)="onSelectGroup($event)" (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
|
||||
</div>
|
||||
|
||||
<div class="adf-group-list" *ngIf="canShowGroupList()">
|
||||
<mat-list role="list">
|
||||
<mat-list-item *ngFor="let item of preSelectGroup" role="listitem">
|
||||
<mat-icon mat-list-icon>group</mat-icon>
|
||||
{{ item.name }}
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -0,0 +1,31 @@
|
||||
.adf {
|
||||
&-section {
|
||||
mat-card-title {
|
||||
font-size:18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
mat-radio-group {
|
||||
margin:7px 10px;
|
||||
|
||||
mat-radio-button {
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
mat-card-content {
|
||||
|
||||
.adf-preselect-value {
|
||||
margin-right: 15px;
|
||||
min-width: 330px;
|
||||
|
||||
&-big {
|
||||
width:60%;
|
||||
}
|
||||
|
||||
&-full {
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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, ViewEncapsulation } from '@angular/core';
|
||||
import { PeopleCloudComponent, GroupCloudComponent, GroupModel } from '@alfresco/adf-process-services-cloud';
|
||||
import { MatRadioChange, MatCheckboxChange } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-people-groups-cloud',
|
||||
templateUrl: './people-groups-cloud-demo.component.html',
|
||||
styleUrls: ['./people-groups-cloud-demo.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class PeopleGroupCloudDemoComponent {
|
||||
|
||||
DEFAULT_FILTER_MODE: string = 'appName';
|
||||
DEFAULT_GROUP_PLACEHOLDER: string = `[{"id": "1", "name":"activitiUserGroup"}]`;
|
||||
DEFAULT_PEOPLE_PLACEHOLDER: string = `[{"id": "1", email": "user@user.com", "firstName":"user", "lastName": "lastName", "username": "user"}]`;
|
||||
|
||||
peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
|
||||
preSelectUsers: string[] = [];
|
||||
peopleRoles: string[] = [];
|
||||
peopleAppName: string;
|
||||
peopleFilterMode: string = this.DEFAULT_FILTER_MODE;
|
||||
peoplePreselectValidation: Boolean = false;
|
||||
|
||||
groupMode: string = GroupCloudComponent.MODE_SINGLE;
|
||||
preSelectGroup: GroupModel[] = [];
|
||||
selectedGroupList: GroupModel[] = [];
|
||||
groupRoles: string[];
|
||||
groupAppName: string;
|
||||
groupFilterMode: string = this.DEFAULT_FILTER_MODE;
|
||||
|
||||
setPeoplePreselectValue(event: any) {
|
||||
this.preSelectUsers = this.getArrayFromString(event.target.value);
|
||||
}
|
||||
|
||||
setGroupsPreselectValue(event: any) {
|
||||
this.preSelectGroup = this.getArrayFromString(event.target.value);
|
||||
}
|
||||
|
||||
setPeopleRoles(event: any) {
|
||||
this.peopleRoles = this.getArrayFromString(event.target.value);
|
||||
}
|
||||
|
||||
setGroupRoles(event: any) {
|
||||
this.groupRoles = this.getArrayFromString(event.target.value);
|
||||
}
|
||||
|
||||
setPeopleAppName(event: any) {
|
||||
this.peopleAppName = event.target.value;
|
||||
}
|
||||
|
||||
setGroupAppName(event: any) {
|
||||
this.groupAppName = event.target.value;
|
||||
}
|
||||
|
||||
onChangePeopleMode(event: MatRadioChange) {
|
||||
this.peopleMode = event.value;
|
||||
this.preSelectUsers = [...this.preSelectUsers];
|
||||
}
|
||||
|
||||
onChangeGroupsMode(event: MatRadioChange) {
|
||||
this.groupMode = event.value;
|
||||
this.preSelectGroup = [...this.preSelectGroup];
|
||||
}
|
||||
|
||||
onChangePeopleFilterMode(event: MatRadioChange) {
|
||||
this.peopleFilterMode = event.value;
|
||||
this.resetPeopleFilter();
|
||||
}
|
||||
|
||||
onChangeGroupsFilterMode(event: MatRadioChange) {
|
||||
this.groupFilterMode = event.value;
|
||||
this.restGroupFilter();
|
||||
}
|
||||
|
||||
isPeopleAppNameSelected() {
|
||||
return this.peopleFilterMode === 'appName';
|
||||
}
|
||||
|
||||
isGroupAppNameSelected() {
|
||||
return this.groupFilterMode === 'appName';
|
||||
}
|
||||
|
||||
resetPeopleFilter() {
|
||||
if (this.isPeopleAppNameSelected()) {
|
||||
this.peopleRoles = [];
|
||||
} else {
|
||||
this.peopleAppName = '';
|
||||
}
|
||||
}
|
||||
|
||||
restGroupFilter() {
|
||||
if (this.isGroupAppNameSelected()) {
|
||||
this.groupRoles = [];
|
||||
} else {
|
||||
this.groupAppName = '';
|
||||
}
|
||||
}
|
||||
|
||||
onChangePeopleValidation(event: MatCheckboxChange) {
|
||||
this.peoplePreselectValidation = event.checked;
|
||||
this.preSelectUsers = [...this.preSelectUsers];
|
||||
}
|
||||
|
||||
isStringArray(str: string) {
|
||||
try {
|
||||
const result = JSON.parse(str);
|
||||
return Array.isArray(result);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
private getArrayFromString(value: string) {
|
||||
|
||||
if (this.isStringArray(value)) {
|
||||
return JSON.parse(value);
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
canShowPeopleList() {
|
||||
return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE;
|
||||
}
|
||||
|
||||
canShowGroupList() {
|
||||
return this.groupMode === GroupCloudComponent.MODE_MULTIPLE;
|
||||
}
|
||||
|
||||
onRemoveGroup(group: GroupModel) {
|
||||
this.preSelectGroup = this.preSelectGroup.filter((value: any) => value.id !== group.id);
|
||||
}
|
||||
|
||||
onSelectGroup(group: GroupModel) {
|
||||
if (this.groupMode === GroupCloudComponent.MODE_MULTIPLE) {
|
||||
this.preSelectGroup.push(group);
|
||||
}
|
||||
}
|
||||
|
||||
get peopleSingleMode() {
|
||||
return PeopleCloudComponent.MODE_SINGLE;
|
||||
}
|
||||
|
||||
get peopleMultipleMode() {
|
||||
return PeopleCloudComponent.MODE_MULTIPLE;
|
||||
}
|
||||
|
||||
get groupSingleMode() {
|
||||
return GroupCloudComponent.MODE_SINGLE;
|
||||
}
|
||||
|
||||
get groupMultipleMode() {
|
||||
return GroupCloudComponent.MODE_MULTIPLE;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
|
||||
<button data-automation-id="go-back" mat-icon-button (click)="onGoBack()">
|
||||
<mat-icon>arrow_back</mat-icon> Go Back
|
||||
</button>
|
||||
|
||||
<h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
|
||||
|
||||
<div class="adf-process-cloud-container">
|
||||
|
||||
<adf-cloud-task-list
|
||||
fxFlex
|
||||
class="adf-cloud-layout-overflow"
|
||||
[appName]="appName"
|
||||
[processInstanceId]="processInstanceId"
|
||||
(rowClick)="onRowClick($event)"
|
||||
#taskCloud>
|
||||
</adf-cloud-task-list>
|
||||
|
||||
<adf-cloud-process-header
|
||||
class="adf-process-cloud-header"
|
||||
[appName]="appName"
|
||||
[processInstanceId]="processInstanceId">
|
||||
</adf-cloud-process-header>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
.adf {
|
||||
&-process-cloud-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-cloud-layout-overflow {
|
||||
width:67%;
|
||||
}
|
||||
|
||||
&-process-cloud-header {
|
||||
margin-left: 10px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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 } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
templateUrl: './process-details-cloud-demo.component.html',
|
||||
styleUrls: ['./process-details-cloud-demo.component.scss']
|
||||
})
|
||||
export class ProcessDetailsCloudDemoComponent {
|
||||
|
||||
processInstanceId: string;
|
||||
appName: string;
|
||||
|
||||
constructor(private route: ActivatedRoute, private router: Router) {
|
||||
this.route.params.subscribe((params) => {
|
||||
this.processInstanceId = params.processInstanceId;
|
||||
});
|
||||
|
||||
this.route.parent.params.subscribe((params) => {
|
||||
this.appName = params.appName;
|
||||
});
|
||||
}
|
||||
|
||||
onGoBack() {
|
||||
this.router.navigate([`/cloud/${this.appName}/`]);
|
||||
}
|
||||
|
||||
onRowClick(taskId: string) {
|
||||
if (taskId) {
|
||||
this.router.navigate([`/cloud/${this.appName}/task-details/${taskId}`]);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<div fxLayout="column" fxFill fxLayoutGap="2px">
|
||||
<adf-cloud-edit-process-filter
|
||||
[appName]="appName"
|
||||
[id]="filterId"
|
||||
[filterProperties]="processFilterProperties.filterProperties"
|
||||
[sortProperties]="processFilterProperties.sortProperties"
|
||||
[actions]="processFilterProperties.actions"
|
||||
(filterChange)="onFilterChange($event)"
|
||||
(action)="onProcessFilterAction($event)">
|
||||
</adf-cloud-edit-process-filter>
|
||||
<div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
|
||||
<adf-cloud-process-list #processCloud
|
||||
fxFlex
|
||||
class="adf-cloud-layout-overflow"
|
||||
[appName]="editedFilter.appName"
|
||||
[initiator]="editedFilter.initiator"
|
||||
[processDefinitionId]="editedFilter.processDefinitionId"
|
||||
[processDefinitionKey]="editedFilter.processDefinitionKey"
|
||||
[id]="editedFilter.processInstanceId"
|
||||
[status]="editedFilter.status"
|
||||
[name]="editedFilter.processName"
|
||||
[businessKey]="editedFilter.businessKey"
|
||||
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
|
||||
[lastModifiedTo]="editedFilter.lastModifiedTo"
|
||||
[sorting]="sortArray"
|
||||
[selectionMode]="selectionMode"
|
||||
[multiselect]="multiselect"
|
||||
(rowClick)="onRowClick($event)"
|
||||
(rowsSelected)="onRowsSelected($event)">
|
||||
</adf-cloud-process-list>
|
||||
<adf-pagination
|
||||
[target]="processCloud"
|
||||
(changePageSize)="onChangePageSize($event)"
|
||||
(nextPage)="resetSelectedRows()"
|
||||
(prevPage)="resetSelectedRows()">
|
||||
</adf-pagination>
|
||||
<div *ngIf="testingMode">
|
||||
Selected rows:
|
||||
<ul>
|
||||
<li *ngFor="let row of selectedRows">{{ row.id }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,123 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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, ViewChild, OnInit } from '@angular/core';
|
||||
import {
|
||||
ProcessListCloudComponent,
|
||||
ProcessFilterCloudModel,
|
||||
ProcessListCloudSortingModel,
|
||||
ProcessFiltersCloudComponent
|
||||
} from '@alfresco/adf-process-services-cloud';
|
||||
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
|
||||
import { CloudLayoutService } from './services/cloud-layout.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './processes-cloud-demo.component.html',
|
||||
styleUrls: ['./processes-cloud-demo.component.scss']
|
||||
})
|
||||
export class ProcessesCloudDemoComponent implements OnInit {
|
||||
|
||||
public static ACTION_SAVE_AS = 'saveAs';
|
||||
static PROCESS_FILTER_PROPERTY_KEYS = 'adf-edit-process-filter';
|
||||
|
||||
@ViewChild('processCloud')
|
||||
processCloud: ProcessListCloudComponent;
|
||||
|
||||
@ViewChild('processFiltersCloud')
|
||||
processFiltersCloud: ProcessFiltersCloudComponent;
|
||||
|
||||
appName: string = '';
|
||||
isFilterLoaded: boolean;
|
||||
|
||||
filterId: string = '';
|
||||
sortArray: any = [];
|
||||
selectedRow: any;
|
||||
multiselect: boolean;
|
||||
selectionMode: string;
|
||||
selectedRows: string[] = [];
|
||||
testingMode: boolean;
|
||||
processFilterProperties: any = { filterProperties: [], sortProperties: [], actions: [] };
|
||||
|
||||
editedFilter: ProcessFilterCloudModel;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private cloudLayoutService: CloudLayoutService,
|
||||
private userPreference: UserPreferencesService,
|
||||
private appConfig: AppConfigService) {
|
||||
const properties = this.appConfig.get<Array<any>>(ProcessesCloudDemoComponent.PROCESS_FILTER_PROPERTY_KEYS);
|
||||
if (properties) {
|
||||
this.processFilterProperties = properties;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.isFilterLoaded = false;
|
||||
this.route.parent.params.subscribe((params) => {
|
||||
this.appName = params.appName;
|
||||
});
|
||||
|
||||
this.route.queryParams.subscribe((params) => {
|
||||
this.isFilterLoaded = true;
|
||||
this.onFilterChange(params);
|
||||
this.filterId = params.id;
|
||||
});
|
||||
|
||||
this.cloudLayoutService.getCurrentSettings()
|
||||
.subscribe((settings) => this.setCurrentSettings(settings));
|
||||
}
|
||||
|
||||
setCurrentSettings(settings) {
|
||||
if (settings) {
|
||||
this.multiselect = settings.multiselect;
|
||||
this.testingMode = settings.testingMode;
|
||||
this.selectionMode = settings.selectionMode;
|
||||
}
|
||||
}
|
||||
|
||||
onChangePageSize(event) {
|
||||
this.userPreference.paginationSize = event.maxItems;
|
||||
}
|
||||
|
||||
resetSelectedRows() {
|
||||
this.selectedRows = [];
|
||||
}
|
||||
|
||||
onRowClick(processInstanceId) {
|
||||
this.router.navigate([`/cloud/${this.appName}/process-details/${processInstanceId}`]);
|
||||
}
|
||||
|
||||
onFilterChange(query: any) {
|
||||
this.editedFilter = Object.assign({}, query);
|
||||
this.sortArray = [new ProcessListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order })];
|
||||
}
|
||||
|
||||
onProcessFilterAction(filterAction: any) {
|
||||
this.cloudLayoutService.setCurrentProcessFilterParam({ id: filterAction.filter.id });
|
||||
if (filterAction.actionType === ProcessesCloudDemoComponent.ACTION_SAVE_AS) {
|
||||
this.router.navigate([`/cloud/${this.appName}/processes/`], { queryParams: filterAction.filter });
|
||||
}
|
||||
}
|
||||
|
||||
onRowsSelected(nodes) {
|
||||
this.resetSelectedRows();
|
||||
this.selectedRows = nodes.map((node) => node.obj.entry);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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 { Injectable } from '@angular/core';
|
||||
import { Observable, BehaviorSubject } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class CloudLayoutService {
|
||||
|
||||
private settings = {
|
||||
multiselect: false,
|
||||
testingMode: false,
|
||||
taskDetailsRedirection: true,
|
||||
selectionMode: 'single'
|
||||
};
|
||||
|
||||
private filterTaskSubject: BehaviorSubject<any> = new BehaviorSubject({index: 0});
|
||||
private filterTask$: Observable<any>;
|
||||
private filterProcessSubject: BehaviorSubject<any> = new BehaviorSubject({index: 0});
|
||||
private filterProcess$: Observable<any>;
|
||||
private settingsSubject: BehaviorSubject<any> = new BehaviorSubject(this.settings);
|
||||
private settings$: Observable<any>;
|
||||
|
||||
constructor() {
|
||||
this.filterTask$ = this.filterTaskSubject.asObservable();
|
||||
this.filterProcess$ = this.filterProcessSubject.asObservable();
|
||||
this.settings$ = this.settingsSubject.asObservable();
|
||||
}
|
||||
|
||||
getCurrentTaskFilterParam() {
|
||||
return this.filterTask$;
|
||||
}
|
||||
|
||||
setCurrentTaskFilterParam(param) {
|
||||
this.filterTaskSubject.next(param);
|
||||
}
|
||||
|
||||
getCurrentProcessFilterParam() {
|
||||
return this.filterProcess$;
|
||||
}
|
||||
|
||||
setCurrentProcessFilterParam(param) {
|
||||
this.filterProcessSubject.next(param);
|
||||
}
|
||||
|
||||
getCurrentSettings() {
|
||||
return this.settings$;
|
||||
}
|
||||
|
||||
setCurrentSettings(param) {
|
||||
this.settingsSubject.next(param);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<adf-cloud-start-process
|
||||
[appName]="appName"
|
||||
[name]="processName"
|
||||
(error)="openSnackMessage($event)"
|
||||
(success)="onStartProcessSuccess()"
|
||||
(cancel)="onCancelStartProcess()">
|
||||
</adf-cloud-start-process>
|
||||
@@ -0,0 +1,63 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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 } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { NotificationService, AppConfigService } from '@alfresco/adf-core';
|
||||
import { CloudLayoutService } from './services/cloud-layout.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './start-process-cloud-demo.component.html',
|
||||
styleUrls: ['./start-process-cloud-demo.component.scss']
|
||||
})
|
||||
export class StartProcessCloudDemoComponent implements OnInit {
|
||||
|
||||
appName;
|
||||
processName: string;
|
||||
|
||||
constructor(private appConfig: AppConfigService,
|
||||
private cloudLayoutService: CloudLayoutService,
|
||||
private route: ActivatedRoute,
|
||||
private notificationService: NotificationService,
|
||||
private router: Router) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.parent.params.subscribe((params) => {
|
||||
this.appName = params.appName;
|
||||
});
|
||||
|
||||
this.processName = this.appConfig.get<string>('adf-start-process.name');
|
||||
}
|
||||
|
||||
onStartProcessSuccess() {
|
||||
this.cloudLayoutService.setCurrentProcessFilterParam({ key: 'running-processes' });
|
||||
this.router.navigate([`/cloud/${this.appName}/processes`]);
|
||||
}
|
||||
|
||||
onCancelStartProcess() {
|
||||
this.cloudLayoutService.setCurrentProcessFilterParam({ key: 'all-processes' });
|
||||
this.router.navigate([`/cloud/${this.appName}/processes`]);
|
||||
}
|
||||
|
||||
openSnackMessage(event: any) {
|
||||
this.notificationService.openSnackMessage(
|
||||
event.response.body.message,
|
||||
4000
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<adf-cloud-start-task
|
||||
[appName]="appName"
|
||||
(error)="openSnackMessage($event)"
|
||||
(success)="onStartTaskSuccess()"
|
||||
(cancel)="onCancelStartTask()">
|
||||
</adf-cloud-start-task>
|
||||
@@ -0,0 +1,59 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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 } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { NotificationService } from '@alfresco/adf-core';
|
||||
import { CloudLayoutService } from './services/cloud-layout.service';
|
||||
@Component({
|
||||
templateUrl: './start-task-cloud-demo.component.html',
|
||||
styleUrls: ['./start-task-cloud-demo.component.scss']
|
||||
})
|
||||
export class StartTaskCloudDemoComponent implements OnInit {
|
||||
|
||||
appName;
|
||||
|
||||
constructor(
|
||||
private cloudLayoutService: CloudLayoutService,
|
||||
private route: ActivatedRoute,
|
||||
private notificationService: NotificationService,
|
||||
private router: Router) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.parent.params.subscribe((params) => {
|
||||
this.appName = params.appName;
|
||||
});
|
||||
}
|
||||
|
||||
onStartTaskSuccess() {
|
||||
this.cloudLayoutService.setCurrentTaskFilterParam({key: 'my-tasks'});
|
||||
this.router.navigate([`/cloud/${this.appName}/tasks`]);
|
||||
}
|
||||
|
||||
onCancelStartTask() {
|
||||
this.cloudLayoutService.setCurrentTaskFilterParam({key: 'my-tasks'});
|
||||
this.router.navigate([`/cloud/${this.appName}/tasks`]);
|
||||
}
|
||||
|
||||
openSnackMessage(event: any) {
|
||||
this.notificationService.openSnackMessage(
|
||||
event.response.body.message,
|
||||
4000
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}</h4>
|
||||
|
||||
<div class="adf-task-detail-container">
|
||||
<div class="adf-task-control">
|
||||
<button mat-button (click)="goBack()">Cancel</button>
|
||||
<button mat-button color="primary" *ngIf="canCompleteTask()" adf-cloud-complete-task [appName]="appName" [taskId]="taskId"
|
||||
(success)="onCompletedTask()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
|
||||
|
||||
<button mat-button color="primary" *ngIf="canClaimTask()" adf-cloud-claim-task [appName]="appName" [taskId]="taskId"
|
||||
(success)="onClaimTask()">{{ 'ADF_CLOUD_TASK_HEADER.BUTTON.CLAIM' | translate }}</button>
|
||||
|
||||
<button mat-button color="primary" *ngIf="canUnClaimTask()" adf-cloud-unclaim-task [appName]="appName" [taskId]="taskId"
|
||||
(success)="onUnclaimTask()">{{ 'ADF_CLOUD_TASK_HEADER.BUTTON.RELEASE' | translate }}</button>
|
||||
</div>
|
||||
|
||||
<adf-cloud-task-header class="adf-demop-card-container" [appName]="appName" [taskId]="taskId" [readOnly]="readOnly">
|
||||
</adf-cloud-task-header>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
|
||||
.adf {
|
||||
|
||||
&-task-detail-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-task-tiitle {
|
||||
margin-left:15px;
|
||||
}
|
||||
|
||||
&-task-control {
|
||||
width:70%;
|
||||
}
|
||||
|
||||
&-demop-card-container {
|
||||
width:30%;
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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 } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { TaskDetailsCloudModel, TaskCloudService } from '@alfresco/adf-process-services-cloud';
|
||||
|
||||
@Component({
|
||||
templateUrl: './task-details-cloud-demo.component.html',
|
||||
styleUrls: ['./task-details-cloud-demo.component.scss']
|
||||
})
|
||||
export class TaskDetailsCloudDemoComponent implements OnInit {
|
||||
|
||||
taskDetails: TaskDetailsCloudModel;
|
||||
taskId: string;
|
||||
appName: string;
|
||||
readOnly = false;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private taskCloudService: TaskCloudService
|
||||
) {
|
||||
this.route.params.subscribe((params) => {
|
||||
this.taskId = params.taskId;
|
||||
});
|
||||
this.route.parent.params.subscribe((params) => {
|
||||
this.appName = params.appName;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.loadTaskDetailsById(this.appName, this.taskId);
|
||||
}
|
||||
|
||||
loadTaskDetailsById(appName: string, taskId: string) {
|
||||
this.taskCloudService.getTaskById(appName, taskId).subscribe(
|
||||
(taskDetails: TaskDetailsCloudModel ) => {
|
||||
this.taskDetails = taskDetails;
|
||||
});
|
||||
}
|
||||
|
||||
isTaskValid(): boolean {
|
||||
return this.appName !== undefined && this.taskId !== undefined;
|
||||
}
|
||||
|
||||
canCompleteTask(): boolean {
|
||||
return this.taskDetails && this.taskCloudService.canCompleteTask(this.taskDetails);
|
||||
}
|
||||
|
||||
canClaimTask(): boolean {
|
||||
return this.taskDetails && this.taskCloudService.canClaimTask(this.taskDetails);
|
||||
}
|
||||
|
||||
canUnClaimTask(): boolean {
|
||||
return this.taskDetails && this.taskCloudService.canUnclaimTask(this.taskDetails);
|
||||
}
|
||||
|
||||
goBack() {
|
||||
this.router.navigate([`/cloud/${this.appName}/`]);
|
||||
}
|
||||
|
||||
onCompletedTask() {
|
||||
this.goBack();
|
||||
}
|
||||
|
||||
onUnclaimTask() {
|
||||
this.goBack();
|
||||
}
|
||||
|
||||
onClaimTask() {
|
||||
this.goBack();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
<div fxLayout="column" fxFill fxLayoutGap="2px">
|
||||
<adf-cloud-edit-task-filter
|
||||
[appName]="appName"
|
||||
[id]="filterId"
|
||||
[filterProperties]="taskFilterProperties.filterProperties"
|
||||
[sortProperties]="taskFilterProperties.sortProperties"
|
||||
[actions]="taskFilterProperties.actions"
|
||||
(action)="onTaskFilterAction($event)"
|
||||
(filterChange)="onFilterChange($event)">
|
||||
</adf-cloud-edit-task-filter>
|
||||
<div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
|
||||
<adf-cloud-task-list #taskCloud
|
||||
fxFlex
|
||||
class="adf-cloud-layout-overflow"
|
||||
[appName]="editedFilter.appName"
|
||||
[processDefinitionId]="editedFilter.processDefinitionId"
|
||||
[processInstanceId]="editedFilter.processInstanceId"
|
||||
[name]="editedFilter.taskName"
|
||||
[parentTaskId]="editedFilter.parentTaskId"
|
||||
[priority]="editedFilter.priority"
|
||||
[owner]="editedFilter.owner"
|
||||
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
|
||||
[lastModifiedTo]="editedFilter.lastModifiedTo"
|
||||
[status]="editedFilter.status"
|
||||
[assignee]="editedFilter.assignee"
|
||||
[createdDate]="editedFilter.createdDate"
|
||||
[dueDate]="editedFilter.dueDate"
|
||||
[sorting]="sortArray"
|
||||
[multiselect]="multiselect"
|
||||
[selectionMode]="selectionMode"
|
||||
(rowClick)="onRowClick($event)"
|
||||
(rowsSelected)="onRowsSelected($event)"
|
||||
#taskCloud>
|
||||
</adf-cloud-task-list>
|
||||
<adf-pagination
|
||||
[target]="taskCloud"
|
||||
(changePageSize)="onChangePageSize($event)"
|
||||
(nextPage)="resetSelectedRows()"
|
||||
(prevPage)="resetSelectedRows()">
|
||||
</adf-pagination>
|
||||
<div *ngIf="testingMode">
|
||||
Selected rows:
|
||||
<ul>
|
||||
<li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,121 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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, ViewChild, OnInit } from '@angular/core';
|
||||
import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel } from '@alfresco/adf-process-services-cloud';
|
||||
import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { CloudLayoutService } from './services/cloud-layout.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'tasks-cloud-demo.component.html',
|
||||
styleUrls: ['tasks-cloud-demo.component.scss']
|
||||
})
|
||||
export class TasksCloudDemoComponent implements OnInit {
|
||||
|
||||
public static ACTION_SAVE_AS = 'saveAs';
|
||||
static TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter';
|
||||
|
||||
@ViewChild('taskCloud')
|
||||
taskCloud: TaskListCloudComponent;
|
||||
|
||||
appName: string = '';
|
||||
|
||||
isFilterLoaded = false;
|
||||
|
||||
selectedRow: any;
|
||||
|
||||
sortArray: TaskListCloudSortingModel[];
|
||||
editedFilter: TaskFilterCloudModel;
|
||||
taskFilterProperties: any = { filterProperties: [], sortProperties: [], actions: [] };
|
||||
|
||||
filterId;
|
||||
multiselect: boolean;
|
||||
selectedRows: string[] = [];
|
||||
testingMode: boolean;
|
||||
selectionMode: string;
|
||||
taskDetailsRedirection: boolean;
|
||||
|
||||
constructor(
|
||||
private cloudLayoutService: CloudLayoutService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private userPreference: UserPreferencesService,
|
||||
private appConfig: AppConfigService) {
|
||||
|
||||
const properties = this.appConfig.get<Array<any>>(TasksCloudDemoComponent.TASK_FILTER_PROPERTY_KEYS);
|
||||
if (properties) {
|
||||
this.taskFilterProperties = properties;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.isFilterLoaded = false;
|
||||
this.route.parent.params.subscribe((params) => {
|
||||
this.appName = params.appName;
|
||||
});
|
||||
|
||||
this.route.queryParams.subscribe((params) => {
|
||||
this.isFilterLoaded = true;
|
||||
this.onFilterChange(params);
|
||||
this.filterId = params.id;
|
||||
});
|
||||
|
||||
this.cloudLayoutService.getCurrentSettings()
|
||||
.subscribe((settings) => this.setCurrentSettings(settings));
|
||||
}
|
||||
|
||||
setCurrentSettings(settings) {
|
||||
if (settings) {
|
||||
this.multiselect = settings.multiselect;
|
||||
this.testingMode = settings.testingMode;
|
||||
this.selectionMode = settings.selectionMode;
|
||||
this.taskDetailsRedirection = settings.taskDetailsRedirection;
|
||||
}
|
||||
}
|
||||
|
||||
onChangePageSize(event) {
|
||||
this.userPreference.paginationSize = event.maxItems;
|
||||
}
|
||||
|
||||
resetSelectedRows() {
|
||||
this.selectedRows = [];
|
||||
}
|
||||
|
||||
onRowClick(taskId) {
|
||||
if (!this.multiselect && this.selectionMode !== 'multiple' && this.taskDetailsRedirection) {
|
||||
this.router.navigate([`/cloud/${this.appName}/task-details/${taskId}`]);
|
||||
}
|
||||
}
|
||||
|
||||
onRowsSelected(nodes) {
|
||||
this.resetSelectedRows();
|
||||
this.selectedRows = nodes.map((node) => node.obj.entry);
|
||||
}
|
||||
|
||||
onFilterChange(filter: any) {
|
||||
this.editedFilter = Object.assign({}, filter);
|
||||
this.sortArray = [new TaskListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order })];
|
||||
}
|
||||
|
||||
onTaskFilterAction(filterAction: any) {
|
||||
this.cloudLayoutService.setCurrentTaskFilterParam({ id: filterAction.filter.id });
|
||||
if (filterAction.actionType === TasksCloudDemoComponent.ACTION_SAVE_AS) {
|
||||
this.router.navigate([`/cloud/${this.appName}/tasks/`], { queryParams: filterAction.filter });
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user