inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-5505] deprecate angular flex layout library (#8562)

Browse Source 
* ADF-5505 Removed some angular flex usages

* ADF-5505 Deprecated usage of angular flex layout in demo shell

* ADF-5505 Deprecated usage of angular flex layout in core files

* ADF-5505 Removed usage of angular flex layout from files from process services

* ADF-5505 Removed usage of angular flex layout from files from process services cloud

* ADF-5505 Removed usage of fxflex and fxlayout from left files

* ADF-5505 Removed usage of fxhide from left files

* ADF-5505 Fixed issue with incorrect colors

* ADF-5505 Fixed some lint issues

* ADF-5505 Removed imports of FlexLayoutModule

* ADF-5505 Uninstalled angular flex layout dependency

* ADF-5505 Removed usage of ngClass with gt-md

* ADF-5505 Removed duplicated selector

* ADF-5505 Removed empty line

* ADF-5505 Changed encapsulation
This commit is contained in:
AleksanderSklorz
2023-05-17 14:44:59 +02:00
committed by GitHub
parent 7e2a7f5b2c
commit 3b1842f038
148 changed files with 1852 additions and 1260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html
View File

@@ -1,8 +1,4 @@
<adf-toolbar>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayout="row">
<div class="app-crumb">{{appName + ' >'}} </div>
<div class="app-filter-crumb"> {{filterName | translate}}</div>
</div>
</div>
<div class="app-crumb">{{appName + ' >'}} </div>
<div class="app-filter-crumb"> {{filterName | translate}}</div>
</adf-toolbar>

18
demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss
View File

@@ -1,8 +1,14 @@
.app-app-crumb {
opacity: 0.5;
}
app-cloud-breadcrumbs {
.app-app-crumb {
opacity: 0.5;
}
.app-filter-crumb {
opacity: 0.8;
margin-left: 5px;
.app-filter-crumb {
opacity: 0.8;
margin-left: 5px;
}
adf-toolbar {
display: flex;
}
}

5
demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts
View File

@@ -15,13 +15,14 @@
* limitations under the License.
*/
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-cloud-breadcrumbs',
templateUrl: './cloud-breadcrumb-component.html',
styleUrls: ['./cloud-breadcrumb-component.scss']
styleUrls: ['./cloud-breadcrumb-component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CloudBreadcrumbsComponent implements OnInit {
appName: string;

68
demo-shell/src/app/components/cloud/cloud-layout.component.html
View File

@@ -1,39 +1,37 @@
<mat-tab-group fxFill class="app-cloud-layout-tab-body">
<mat-tab-group class="app-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>
<adf-sidenav-layout [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>
</mat-tab>
<mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
<app-cloud-settings></app-cloud-settings>

15
demo-shell/src/app/components/cloud/cloud-layout.component.scss
View File

@@ -5,3 +5,18 @@
.app-cloud-layout-tab-body .mat-tab-body-wrapper {
height: 100%;
}
app-cloud-layout {
.app-cloud-layout-tab-body {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
adf-sidenav-layout {
flex-direction: row;
box-sizing: border-box;
display: flex;
}
}
}

70
demo-shell/src/app/components/cloud/community/community-cloud.component.html
View File

@@ -1,36 +1,34 @@
<mat-tab-group fxFill class="app-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-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-community-cloud-filters-demo></app-community-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>
<mat-tab-group class="app-cloud-layout-tab-body">
<mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
<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-community-cloud-filters-demo></app-community-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>
</mat-tab>
<mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
<app-cloud-settings></app-cloud-settings>
</mat-tab>
</mat-tab-group>

20
demo-shell/src/app/components/cloud/community/community-cloud.component.scss Normal file
View File

@@ -0,0 +1,20 @@
.app-cloud-layout-overflow {
overflow: auto;
}
.app-cloud-layout-tab-body {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
.mat-tab-body-wrapper {
height: 100%;
}
adf-sidenav-layout {
min-height: 100%;
min-width: 100%;
}
}

9
demo-shell/src/app/components/cloud/community/community-cloud.component.ts
View File

@@ -21,14 +21,7 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
@Component({
templateUrl: './community-cloud.component.html',
styles: [`.app-cloud-layout-overflow {
overflow: auto;
}
.app-cloud-layout-tab-body .mat-tab-body-wrapper {
height: 100% !important;
}
`],
styleUrls: ['./community-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CommunityCloudComponent implements OnInit {

4
demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html
View File

@@ -8,11 +8,9 @@
<div class="app-process-cloud-container">
<adf-cloud-task-list
fxFlex
class="app-cloud-layout-overflow"
[processInstanceId]="processInstanceId"
(rowClick)="onRowClick($event)"
#taskCloud>
(rowClick)="onRowClick($event)">
</adf-cloud-task-list>
<adf-cloud-process-header

23
demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.scss
View File

@@ -1,14 +1,17 @@
.app {
&-process-cloud-container {
display: flex;
}
app-community-process-details-cloud {
.app {
&-process-cloud-container {
display: flex;
}
&-cloud-layout-overflow {
width: 67%;
}
&-cloud-layout-overflow {
width: 67%;
flex: 1;
}
&-process-cloud-header {
margin-left: 10px;
width: 25%;
&-process-cloud-header {
margin-left: 10px;
width: 25%;
}
}
}

6
demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.ts
View File

@@ -15,12 +15,14 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-community-process-details-cloud',
templateUrl: './community-process-details-cloud.component.html',
styleUrls: ['./community-process-details-cloud.component.scss']
styleUrls: ['./community-process-details-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CommunityProcessDetailsCloudDemoComponent {

80
demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html
View File

@@ -1,42 +1,42 @@
<div fxLayout="column" fxFill fxLayoutGap="2px">
<adf-cloud-edit-process-filter
[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="app-cloud-layout-overflow"
[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>
<adf-cloud-edit-process-filter
[id]="filterId"
[filterProperties]="processFilterProperties.filterProperties"
[sortProperties]="processFilterProperties.sortProperties"
[actions]="processFilterProperties.actions"
(filterChange)="onFilterChange($event)"
(action)="onProcessFilterAction($event)">
</adf-cloud-edit-process-filter>
<div
class="app-cloud-process-list-container"
*ngIf="editedFilter">
<adf-cloud-process-list
#processCloud
class="app-cloud-layout-overflow"
[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>

21
demo-shell/src/app/components/cloud/community/community-processes-cloud.component.scss Normal file
View File

@@ -0,0 +1,21 @@
app-community-processes-cloud-demo {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
.app-cloud-process-list-container {
place-content: stretch space-between;
align-items: stretch;
margin-top: 2px;
}
&, .app-cloud-process-list-container {
flex-direction: column;
display: flex;
}
.app-cloud-layout-overflow, .app-cloud-process-list-container {
flex: 1;
}
}

15
demo-shell/src/app/components/cloud/community/community-processes-cloud.component.ts
View File

@@ -15,17 +15,17 @@
* limitations under the License.
*/
import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {
ProcessListCloudComponent,
ProcessFilterCloudModel,
ProcessListCloudSortingModel,
ProcessFilterCloudService,
ProcessFiltersCloudComponent,
ProcessFilterCloudService
ProcessListCloudComponent,
ProcessListCloudSortingModel
} from '@alfresco/adf-process-services-cloud';
import { ActivatedRoute, Router } from '@angular/router';
import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
import { CloudLayoutService } from '../services/cloud-layout.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -35,7 +35,10 @@ const PROCESS_FILTER_PROPERTY_KEYS = 'adf-edit-process-filter';
const ACTION_SAVE_AS = 'saveAs';
@Component({
templateUrl: './community-processes-cloud.component.html'
selector: 'app-community-processes-cloud-demo',
templateUrl: './community-processes-cloud.component.html',
styleUrls: ['./community-processes-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CommunityProcessesCloudDemoComponent implements OnInit, OnDestroy {
@ViewChild('processCloud')

88
demo-shell/src/app/components/cloud/community/community-task-cloud.component.html
View File

@@ -1,46 +1,46 @@
<div fxLayout="column" fxFill fxLayoutGap="2px">
<adf-cloud-edit-task-filter
[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="app-cloud-layout-overflow"
[processDefinitionId]="editedFilter.processDefinitionId"
[processInstanceId]="editedFilter.processInstanceId"
[name]="editedFilter.taskName"
[id]="editedFilter.taskId"
[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)">
</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>
<adf-cloud-edit-task-filter
[id]="filterId"
[filterProperties]="taskFilterProperties.filterProperties"
[sortProperties]="taskFilterProperties.sortProperties"
[actions]="taskFilterProperties.actions"
(action)="onTaskFilterAction($event)"
(filterChange)="onFilterChange($event)">
</adf-cloud-edit-task-filter>
<div
class="app-cloud-task-list-container"
*ngIf="editedFilter">
<adf-cloud-task-list
#taskCloud
class="app-cloud-layout-overflow"
[processDefinitionId]="editedFilter.processDefinitionId"
[processInstanceId]="editedFilter.processInstanceId"
[name]="editedFilter.taskName"
[id]="editedFilter.taskId"
[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)">
</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>

27
demo-shell/src/app/components/cloud/community/community-task-cloud.component.scss Normal file
View File

@@ -0,0 +1,27 @@
app-community-tasks-cloud-demo {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
.adf-cloud-layout-tab-body {
.mat-tab-body-wrapper {
height: 100%;
}
}
.app-cloud-task-list-container {
place-content: stretch space-between;
align-items: stretch;
margin-top: 2px;
}
&, .app-cloud-task-list-container {
flex-direction: column;
display: flex;
}
.app-cloud-layout-overflow, .app-cloud-task-list-container {
flex: 1;
}
}

15
demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts
View File

@@ -15,9 +15,14 @@
* limitations under the License.
*/
import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel, TaskFilterCloudService } from '@alfresco/adf-process-services-cloud';
import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {
TaskFilterCloudModel,
TaskFilterCloudService,
TaskListCloudComponent,
TaskListCloudSortingModel
} from '@alfresco/adf-process-services-cloud';
import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
import { ActivatedRoute, Router } from '@angular/router';
import { CloudLayoutService } from '../services/cloud-layout.service';
import { Subject } from 'rxjs';
@@ -28,8 +33,10 @@ const ACTION_SAVE_AS = 'saveAs';
const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter';
@Component({
selector: 'app-community-tasks-cloud-demo',
templateUrl: './community-task-cloud.component.html',
styles: [`.adf-cloud-layout-tab-body .mat-tab-body-wrapper { height: 100%; }`]
styleUrls: ['./community-task-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CommunityTasksCloudDemoComponent implements OnInit, OnDestroy {
@ViewChild('taskCloud')

28
demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.html
View File

@@ -1,20 +1,16 @@
<h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }}</h4>
<div fxLayout="column" fxFill fxLayoutGap="2px">
<div fxLayout="row" fxFill>
<div fxLayout="column" fxFlex="80%">
<adf-cloud-task-form
[taskId]="taskId"
(cancelClick)="goBack()"
(taskClaimed)="onClaimTask()"
(taskCompleted)="onTaskCompleted()"
(taskUnclaimed)="onUnclaimTask()"
(formSaved)="onFormSaved()"
(error)="onError($event)">
</adf-cloud-task-form>
</div>
<adf-cloud-task-header fxFlex
[taskId]="taskId">
</adf-cloud-task-header>
<div class="app-community-task-details-cloud-column">
<div class="app-community-task-details-cloud-row">
<adf-cloud-task-form
[taskId]="taskId"
(cancelClick)="goBack()"
(taskClaimed)="onClaimTask()"
(taskCompleted)="onTaskCompleted()"
(taskUnclaimed)="onUnclaimTask()"
(formSaved)="onFormSaved()"
(error)="onError($event)">
</adf-cloud-task-form>
<adf-cloud-task-header [taskId]="taskId"></adf-cloud-task-header>
</div>
</div>

56
demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss
View File

@@ -1,18 +1,48 @@
.app {
&-task-detail-container {
display: flex;
}
app-community-task-details-cloud {
.app {
&-task-detail-container {
display: flex;
}
&-task-title {
margin-left: 15px;
}
&-task-title {
margin-left: 15px;
}
&-task-control {
width: 70%;
}
&-task-control {
width: 70%;
}
&-demop-card-container {
width: 30%;
font-family: inherit;
&-demop-card-container {
width: 30%;
font-family: inherit;
}
&-community-task-details-cloud-column {
margin: 0;
flex-direction: column;
.app-community-task-details-cloud-row {
flex-direction: row;
adf-cloud-task-form {
flex: 1 1 100%;
flex-direction: column;
display: flex;
max-width: 80%;
}
adf-cloud-task-header {
flex: 1;
}
}
}
&-community-task-details-cloud-column, &-community-task-details-cloud-row {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
display: flex;
}
}
}

6
demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.ts
View File

@@ -15,13 +15,15 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NotificationService } from '@alfresco/adf-core';
@Component({
selector: 'app-community-task-details-cloud',
templateUrl: './community-task-details-cloud.component.html',
styleUrls: ['./community-task-details-cloud.component.scss']
styleUrls: ['./community-task-details-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CommunityTaskDetailsCloudDemoComponent {

4
demo-shell/src/app/components/cloud/community/community.module.ts
View File

@@ -19,7 +19,6 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CoreModule } from '@alfresco/adf-core';
import { FlexLayoutModule } from '@angular/flex-layout';
import {
ProcessServicesCloudModule,
LocalPreferenceCloudService,
@@ -76,8 +75,7 @@ const routes: Routes = [
CoreModule,
ProcessServicesCloudModule,
RouterModule.forChild(routes),
AppCloudSharedModule,
FlexLayoutModule
AppCloudSharedModule
],
declarations: [
CommunityCloudComponent,

4
demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html
View File

@@ -7,12 +7,10 @@
<div class="app-process-cloud-container">
<adf-cloud-task-list
fxFlex
class="app-cloud-layout-overflow"
[appName]="appName"
[processInstanceId]="processInstanceId"
(rowClick)="onRowClick($event)"
#taskCloud>
(rowClick)="onRowClick($event)">
</adf-cloud-task-list>
<adf-cloud-process-header

23
demo-shell/src/app/components/cloud/process-details-cloud-demo.component.scss
View File

@@ -1,14 +1,17 @@
.app {
&-process-cloud-container {
display: flex;
}
app-process-details-cloud-demo {
.app {
&-process-cloud-container {
display: flex;
}
&-cloud-layout-overflow {
width: 67%;
}
&-cloud-layout-overflow {
width: 67%;
flex: 1;
}
&-process-cloud-header {
margin-left: 10px;
width: 25%;
&-process-cloud-header {
margin-left: 10px;
width: 25%;
}
}
}

6
demo-shell/src/app/components/cloud/process-details-cloud-demo.component.ts
View File

@@ -15,12 +15,14 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-process-details-cloud-demo',
templateUrl: './process-details-cloud-demo.component.html',
styleUrls: ['./process-details-cloud-demo.component.scss']
styleUrls: ['./process-details-cloud-demo.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ProcessDetailsCloudDemoComponent {

132
demo-shell/src/app/components/cloud/processes-cloud-demo.component.html
View File

@@ -1,70 +1,70 @@
<div fxLayout="column" fxFill fxLayoutGap="2px">
<adf-cloud-edit-process-filter
[appName]="appName"
[id]="filterId"
[filterProperties]="filterProperties"
[sortProperties]="filterSortProperties"
[actions]="filterActions"
[processFilter]="editedFilter"
(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="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[appVersion]="editedFilter.appVersion"
[initiator]="editedFilter.initiator"
[processDefinitionId]="editedFilter.processDefinitionId"
[processDefinitionName]="editedFilter.processDefinitionName"
[processDefinitionKey]="editedFilter.processDefinitionKey"
[id]="editedFilter.processInstanceId"
[status]="editedFilter.status"
[name]="editedFilter.processName"
[businessKey]="editedFilter['businessKey']"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[sorting]="[{orderBy: editedFilter.sort, direction: editedFilter.order}]"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu"
[multiselect]="multiselect"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(showRowContextMenu)="onShowRowContextMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(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">
<div *ngIf="multiselect">
{{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
<ul>
<li *ngFor="let row of selectedRows">{{ row.id }}</li>
</ul>
<adf-cloud-edit-process-filter
[appName]="appName"
[id]="filterId"
[filterProperties]="filterProperties"
[sortProperties]="filterSortProperties"
[actions]="filterActions"
[processFilter]="editedFilter"
(filterChange)="onFilterChange($event)"
(action)="onProcessFilterAction($event)">
</adf-cloud-edit-process-filter>
<div
*ngIf="editedFilter"
class="app-processes-list-container">
<adf-cloud-process-list
#processCloud
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[appVersion]="editedFilter.appVersion"
[initiator]="editedFilter.initiator"
[processDefinitionId]="editedFilter.processDefinitionId"
[processDefinitionName]="editedFilter.processDefinitionName"
[processDefinitionKey]="editedFilter.processDefinitionKey"
[id]="editedFilter.processInstanceId"
[status]="editedFilter.status"
[name]="editedFilter.processName"
[businessKey]="editedFilter['businessKey']"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[sorting]="[{orderBy: editedFilter.sort, direction: editedFilter.order}]"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu"
[multiselect]="multiselect"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(showRowContextMenu)="onShowRowContextMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(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">
<div *ngIf="multiselect">
{{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
<ul>
<li *ngFor="let row of selectedRows">{{ row.id }}</li>
</ul>
</div>
<div *ngIf="actionMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedAction">
<span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedAction.id }}</span><br>
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
</div>
<div *ngIf="actionMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedAction">
<span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedAction.id }}</span><br>
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
</div>
</div>
<div *ngIf="contextMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedContextAction">
<span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
</div>
</div>
<div *ngIf="contextMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedContextAction">
<span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
</div>
</div>
</div>

22
demo-shell/src/app/components/cloud/processes-cloud-demo.component.scss Normal file
View File

@@ -0,0 +1,22 @@
app-processes-cloud-demo {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
.app-processes-list-container {
box-sizing: border-box;
place-content: stretch space-between;
align-items: stretch;
margin-top: 2px;
}
&, .app-processes-list-container {
flex-direction: column;
display: flex;
}
.app-processes-list-container, .app-cloud-layout-overflow {
flex: 1;
}
}

17
demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts
View File

@@ -15,10 +15,16 @@
* limitations under the License.
*/
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProcessFilterAction, ProcessFilterCloudModel, PROCESS_FILTER_ACTION_DELETE, PROCESS_FILTER_ACTION_SAVE, PROCESS_FILTER_ACTION_SAVE_AS } from '@alfresco/adf-process-services-cloud';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import {
PROCESS_FILTER_ACTION_DELETE,
PROCESS_FILTER_ACTION_SAVE,
PROCESS_FILTER_ACTION_SAVE_AS,
ProcessFilterAction,
ProcessFilterCloudModel
} from '@alfresco/adf-process-services-cloud';
import { ActivatedRoute, Router } from '@angular/router';
import { UserPreferencesService, DataCellEvent } from '@alfresco/adf-core';
import { DataCellEvent, UserPreferencesService } from '@alfresco/adf-core';
import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -26,7 +32,10 @@ import { Pagination } from '@alfresco/js-api';
import { CloudProcessFiltersService } from './services/cloud-process-filters.service';
@Component({
templateUrl: './processes-cloud-demo.component.html'
selector: 'app-processes-cloud-demo',
templateUrl: './processes-cloud-demo.component.html',
styleUrls: ['./processes-cloud-demo.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
appName: string = '';

76
demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.html
View File

@@ -1,42 +1,38 @@
<div fxLayout
fxFill>
<adf-cloud-service-task-filters [appName]="appName"
[filterParam]="{index: 0}"
(filterClicked)="onTaskFilterSelected($event)"
(filterSelected)="onTaskFilterSelected($event)">
</adf-cloud-service-task-filters>
<div fxLayout="column"
fxFlex>
<adf-cloud-edit-service-task-filter [id]="filterId"
[appName]="appName"
[filterProperties]="taskFilterProperties.filterProperties"
[sortProperties]="taskFilterProperties.sortProperties"
[actions]="taskFilterProperties.actions"
(filterChange)="onFilterChange($event)">
</adf-cloud-edit-service-task-filter>
<div fxLayout="column"
fxFlex
fxFill
fxLayoutAlign="space-between"
*ngIf="editedFilter">
<adf-cloud-service-task-list #taskCloud
fxFlex
[queryParams]="editedFilter"
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[sorting]="sortArray"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu">
</adf-cloud-service-task-list>
<adf-pagination [target]="taskCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
</div>
<adf-cloud-service-task-filters
[appName]="appName"
[filterParam]="{index: 0}"
(filterClicked)="onTaskFilterSelected($event)"
(filterSelected)="onTaskFilterSelected($event)">
</adf-cloud-service-task-filters>
<div class="app-task-list-with-filter">
<adf-cloud-edit-service-task-filter
[id]="filterId"
[appName]="appName"
[filterProperties]="taskFilterProperties.filterProperties"
[sortProperties]="taskFilterProperties.sortProperties"
[actions]="taskFilterProperties.actions"
(filterChange)="onFilterChange($event)">
</adf-cloud-edit-service-task-filter>
<div
class="app-task-list-container"
*ngIf="editedFilter">
<adf-cloud-service-task-list
#taskCloud
[queryParams]="editedFilter"
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[sorting]="sortArray"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu">
</adf-cloud-service-task-list>
<adf-pagination
[target]="taskCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
</div>
</div>

25
demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.scss Normal file
View File

@@ -0,0 +1,25 @@
app-service-task-list-cloud-demo {
min-height: 100%;
min-width: 100%;
display: flex;
.app-task-list-with-filter, .app-task-list-container {
flex-direction: column;
display: flex;
flex: 1;
}
&, .app-task-list-container {
height: 100%;
width: 100%;
}
.app-task-list-container {
place-content: stretch space-between;
align-items: stretch;
.app-cloud-layout-overflow {
flex: 1;
}
}
}

15
demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts
View File

@@ -15,9 +15,13 @@
* limitations under the License.
*/
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { TaskListCloudSortingModel, ServiceTaskListCloudComponent, ServiceTaskFilterCloudModel } from '@alfresco/adf-process-services-cloud';
import { UserPreferencesService, AppConfigService, PaginationModel } from '@alfresco/adf-core';
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {
ServiceTaskFilterCloudModel,
ServiceTaskListCloudComponent,
TaskListCloudSortingModel
} from '@alfresco/adf-process-services-cloud';
import { AppConfigService, PaginationModel, UserPreferencesService } from '@alfresco/adf-core';
import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -25,7 +29,10 @@ import { takeUntil } from 'rxjs/operators';
const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-service-task-filter';
@Component({
templateUrl: './service-task-list-cloud-demo.component.html'
selector: 'app-service-task-list-cloud-demo',
templateUrl: './service-task-list-cloud-demo.component.html',
styleUrls: ['./service-task-list-cloud-demo.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ServiceTaskListCloudDemoComponent implements OnInit, OnDestroy {
@ViewChild('taskCloud')

138
demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
View File

@@ -1,71 +1,67 @@
<div fxFlex fxLayout="column" class="app-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]="actionMenu" (change)="toggleActionMenu()" data-automation-id="actionmenu">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="contextMenu" (change)="toggleContextMenu()" data-automation-id="contextmenu">
{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | 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-slide-toggle [color]="'primary'" [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
{{ 'SETTINGS_CLOUD.PROCESS_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>
<mat-card *ngIf="actionMenu || contextMenu">
<mat-card-header>
<mat-card-title>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<form [formGroup]="actionMenuForm" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<mat-form-field fxFlex="23%">
<input matInput formControlName="key" placeholder="{{ 'SETTINGS_CLOUD.ACTION.KEY' | translate }}">
</mat-form-field>
<mat-form-field fxFlex="23%">
<input matInput formControlName="title" placeholder="{{ 'SETTINGS_CLOUD.ACTION.TITLE' | translate }}">
</mat-form-field>
<mat-form-field fxFlex="23%">
<input matInput formControlName="icon" placeholder="{{ 'SETTINGS_CLOUD.ACTION.ICON' | translate }}"I>
</mat-form-field>
<mat-checkbox formControlName="visible">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="disabled">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }}
</mat-checkbox>
<button mat-raised-button (click)="addAction()">
{{ 'SETTINGS_CLOUD.ACTION.ADD_BUTTON' | translate }}
</button>
</form>
<div *ngIf="actions.length > 0">
<mat-chip-list #chipList>
<mat-chip *ngFor="let action of actions" [removable]="true">
{{action.title}}
<mat-icon
matChipRemove
(click)="removeAction(action)">
cancel
</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
</mat-card-content>
</mat-card>
</div>
<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]="actionMenu" (change)="toggleActionMenu()" data-automation-id="actionmenu">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="contextMenu" (change)="toggleContextMenu()" data-automation-id="contextmenu">
{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | 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-slide-toggle [color]="'primary'" [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
{{ 'SETTINGS_CLOUD.PROCESS_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>
<mat-card *ngIf="actionMenu || contextMenu">
<mat-card-header>
<mat-card-title>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
<mat-form-field>
<input matInput formControlName="key" placeholder="{{ 'SETTINGS_CLOUD.ACTION.KEY' | translate }}">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="title" placeholder="{{ 'SETTINGS_CLOUD.ACTION.TITLE' | translate }}">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="icon" placeholder="{{ 'SETTINGS_CLOUD.ACTION.ICON' | translate }}">
</mat-form-field>
<mat-checkbox formControlName="visible">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="disabled">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }}
</mat-checkbox>
<button mat-raised-button (click)="addAction()">
{{ 'SETTINGS_CLOUD.ACTION.ADD_BUTTON' | translate }}
</button>
</form>
<div *ngIf="actions.length > 0">
<mat-chip-list>
<mat-chip *ngFor="let action of actions" [removable]="true">
{{action.title}}
<mat-icon
matChipRemove
(click)="removeAction(action)">
cancel
</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
</mat-card-content>
</mat-card>

26
demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
View File

@@ -1,7 +1,25 @@
.app-settings-container {
app-cloud-settings {
padding: 20px 30px;
}
flex-direction: column;
display: flex;
flex: 1;
.app-settings-container mat-form-field {
max-width: 200px;
mat-form-field {
max-width: 200px;
}
.app-cloud-settings-form {
display: flex;
place-content: center space-around;
align-items: center;
mat-form-field {
flex: 1 1 100%;
max-width: 23%;
}
mat-form-field, mat-checkbox {
margin-right: 20px;
}
}
}

9
demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts
View File

@@ -15,16 +15,17 @@
* limitations under the License.
*/
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CloudLayoutService, ActionMenuModel } from '../services/cloud-layout.service';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActionMenuModel, CloudLayoutService } from '../services/cloud-layout.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
@Component({
selector: 'app-cloud-settings',
templateUrl: './cloud-settings.component.html',
styleUrls: ['./cloud-settings.component.scss']
styleUrls: ['./cloud-settings.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CloudSettingsComponent implements OnInit, OnDestroy {
private onDestroy$ = new Subject<boolean>();

4
demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
View File

@@ -23,7 +23,6 @@ import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { CoreModule } from '@alfresco/adf-core';
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [
@@ -32,8 +31,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
MatDialogModule,
MatInputModule,
MatSelectModule,
MatSlideToggleModule,
FlexLayoutModule
MatSlideToggleModule
],
declarations: [ CloudSettingsComponent ],
exports: [ CommonModule, CloudSettingsComponent]

27
demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html
View File

@@ -1,19 +1,18 @@
<h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}</h4>
<div fxLayout="column" fxFill fxLayoutGap="2px">
<div fxLayout="row" fxFill>
<div fxLayout="column" fxFlex="80%">
<adf-cloud-task-form
[appName]="appName"
[taskId]="taskId"
(cancelClick)="goBack()"
(taskCompleted)="onTaskCompleted()"
(formContentClicked)="onFormContentClicked($event)"
(formSaved)="onFormSaved()"
(error)="onError($event)">
</adf-cloud-task-form>
</div>
<adf-cloud-task-header #taskHeader fxFlex
<div class="app-task-details-cloud-column">
<div class="app-task-details-cloud-row">
<adf-cloud-task-form
[appName]="appName"
[taskId]="taskId"
(cancelClick)="goBack()"
(taskCompleted)="onTaskCompleted()"
(formContentClicked)="onFormContentClicked($event)"
(formSaved)="onFormSaved()"
(error)="onError($event)">
</adf-cloud-task-form>
<adf-cloud-task-header
#taskHeader
[appName]="appName"
[taskId]="taskId">
</adf-cloud-task-header>

56
demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss
View File

@@ -1,18 +1,48 @@
.app {
&-task-detail-container {
display: flex;
}
app-task-details-cloud-demo {
.app {
&-task-detail-container {
display: flex;
}
&-task-title {
margin-left: 15px;
}
&-task-title {
margin-left: 15px;
}
&-task-control {
width: 70%;
}
&-task-control {
width: 70%;
}
&-demop-card-container {
width: 30%;
font-family: inherit;
&-demop-card-container {
width: 30%;
font-family: inherit;
}
&-task-details-cloud-column {
margin: 0;
flex-direction: column;
.app-task-details-cloud-row {
flex-direction: row;
adf-cloud-task-form {
flex: 1 1 100%;
flex-direction: column;
display: flex;
max-width: 80%;
}
adf-cloud-task-header {
flex: 1;
}
}
}
&-task-details-cloud-column, &-task-details-cloud-row {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
display: flex;
}
}
}

6
demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts
View File

@@ -15,15 +15,17 @@
* limitations under the License.
*/
import { Component, ViewChild } from '@angular/core';
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NotificationService } from '@alfresco/adf-core';
import { TaskHeaderCloudComponent } from '@alfresco/adf-process-services-cloud';
import { PreviewService } from '../../services/preview.service';
@Component({
selector: 'app-task-details-cloud-demo',
templateUrl: './task-details-cloud-demo.component.html',
styleUrls: ['./task-details-cloud-demo.component.scss']
styleUrls: ['./task-details-cloud-demo.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class TaskDetailsCloudDemoComponent {

134
demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html
View File

@@ -1,72 +1,70 @@
<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="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[processDefinitionId]="editedFilter.processDefinitionId"
[processInstanceId]="editedFilter.processInstanceId"
[name]="editedFilter.taskName"
[id]="editedFilter.taskId"
[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"
[standalone]="editedFilter.standalone"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(showRowContextMenu)="onShowRowContextMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowsSelected)="onRowsSelected($event)">
</adf-cloud-task-list>
<adf-pagination
[target]="taskCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
<div *ngIf="testingMode">
<div *ngIf="multiselect">
{{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
<ul>
<li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
</ul>
<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 class="adf-cloud-task-list-container" *ngIf="editedFilter">
<adf-cloud-task-list
#taskCloud
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[processDefinitionId]="editedFilter.processDefinitionId"
[processInstanceId]="editedFilter.processInstanceId"
[name]="editedFilter.taskName"
[id]="editedFilter.taskId"
[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"
[standalone]="editedFilter.standalone"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(showRowContextMenu)="onShowRowContextMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowsSelected)="onRowsSelected($event)">
</adf-cloud-task-list>
<adf-pagination
[target]="taskCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
<div *ngIf="testingMode">
<div *ngIf="multiselect">
{{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
<ul>
<li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
</ul>
</div>
<div *ngIf="actionMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedAction">
<span [attr.data-automation-id]="selectedAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedAction.id }}</span><br>
<span [attr.data-automation-id]="selectedAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
</div>
<div *ngIf="actionMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedAction">
<span [attr.data-automation-id]="selectedAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedAction.id }}</span><br>
<span [attr.data-automation-id]="selectedAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
</div>
</div>
<div *ngIf="contextMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedContextAction">
<span [attr.data-automation-id]="selectedContextAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
<span [attr.data-automation-id]="selectedContextAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
</div>
</div>
<div *ngIf="contextMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedContextAction">
<span [attr.data-automation-id]="selectedContextAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
<span [attr.data-automation-id]="selectedContextAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
</div>
</div>
</div>

22
demo-shell/src/app/components/cloud/tasks-cloud-demo.component.scss Normal file
View File

@@ -0,0 +1,22 @@
app-tasks-cloud-demo {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
.adf-cloud-task-list-container {
box-sizing: border-box;
place-content: stretch space-between;
align-items: stretch;
margin-top: 2px;
}
&, .adf-cloud-task-list-container {
flex-direction: column;
display: flex;
}
.adf-cloud-task-list-container, .app-cloud-layout-overflow {
flex: 1;
}
}

15
demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts
View File

@@ -15,9 +15,13 @@
* limitations under the License.
*/
import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel } from '@alfresco/adf-process-services-cloud';
import { UserPreferencesService, AppConfigService, DataCellEvent } from '@alfresco/adf-core';
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {
TaskFilterCloudModel,
TaskListCloudComponent,
TaskListCloudSortingModel
} from '@alfresco/adf-process-services-cloud';
import { AppConfigService, DataCellEvent, UserPreferencesService } from '@alfresco/adf-core';
import { ActivatedRoute, Router } from '@angular/router';
import { CloudLayoutService } from './services/cloud-layout.service';
import { Subject } from 'rxjs';
@@ -28,7 +32,10 @@ const ACTION_DELETE = 'delete';
const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter';
@Component({
templateUrl: './tasks-cloud-demo.component.html'
selector: 'app-tasks-cloud-demo',
templateUrl: './tasks-cloud-demo.component.html',
styleUrls: ['./tasks-cloud-demo.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class TasksCloudDemoComponent implements OnInit, OnDestroy {
@ViewChild('taskCloud')