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

[AAE-4358][AAE-4359] [APA] Floating label added for the process and task filters (#6872)

Browse Source
This commit is contained in:
Sushmitha V 2021-04-07 16:30:28 +05:30 committed by GitHub
parent a244200258
commit c60d456332
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 92 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
angular.json
View File

@ -30,7 +30,9 @@
"tsConfig": "tsconfig.dev.json",
"polyfills": "demo-shell/src/polyfills.ts",
"stylePreprocessorOptions": {
"includePaths": ["lib"]
"includePaths": [
"lib"
]
},
"assets": [
"demo-shell/src/assets",
@ -308,8 +310,13 @@
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["tsconfig.dev.json"],
"exclude": ["**/node_modules/**/*", "package.json"]
"tsConfig": [
"tsconfig.dev.json"
],
"exclude": [
"**/node_modules/**/*",
"package.json"
]
}
}
}
@ -342,8 +349,12 @@
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["./e2e/tsconfig.e2e.json"],
"exclude": ["**/node_modules/**/*"]
"tsConfig": [
"./e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**/*"
]
}
}
}
@ -384,7 +395,9 @@
"lib/core/tsconfig.lib.json",
"lib/core/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
"exclude": [
"**/node_modules/**"
]
}
}
}
@ -425,7 +438,9 @@
"lib/content-services/tsconfig.lib.json",
"lib/content-services/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
"exclude": [
"**/node_modules/**"
]
}
}
}
@ -466,7 +481,9 @@
"lib/process-services/tsconfig.lib.json",
"lib/process-services/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
"exclude": [
"**/node_modules/**"
]
}
}
}
@ -507,7 +524,9 @@
"lib/process-services-cloud/tsconfig.lib.json",
"lib/process-services-cloud/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
"exclude": [
"**/node_modules/**"
]
}
}
}
@ -548,7 +567,9 @@
"lib/insights/tsconfig.lib.json",
"lib/insights/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
"exclude": [
"**/node_modules/**"
]
}
}
}
@ -588,7 +609,9 @@
"lib/extensions/tsconfig.lib.json",
"lib/extensions/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
"exclude": [
"**/node_modules/**"
]
}
}
}
@ -618,7 +641,9 @@
"lib/testing/tsconfig.lib.json",
"lib/testing/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
"exclude": [
"**/node_modules/**"
]
}
}
}
@ -643,5 +668,8 @@
}
}
},
"defaultProject": "demoshell"
}
"defaultProject": "demoshell",
"cli": {
"analytics": "0ce5075f-0835-439a-bebe-7c41750179a6"
}
}

4
lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.html
View File

@ -1,5 +1,5 @@
<mat-form-field [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" [attr.data-automation-id]="processFilterProperty.key">
<mat-select
placeholder="{{ processFilterProperty.label | translate }}"
[value]="type"
@ -12,7 +12,7 @@
</mat-form-field>
<ng-container *ngIf="isDateRangeType()">
<mat-form-field class="adf-cloud-date-range-picker">
<mat-form-field [floatLabel]="'auto'" class="adf-cloud-date-range-picker">
<mat-label>{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE_TITLE' | translate }}</mat-label>
<mat-date-range-input [formGroup]="dateRangeForm" [rangePicker]="picker">
<input matStartDate formControlName="from" placeholder="{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.START_DATE' | translate }}">

8
lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts
View File

@ -145,4 +145,12 @@ describe('DateRangeFilterComponent', () => {
expect(component.dateRangeForm.get('from').value).toEqual(moment(mockFilterProperty.value._startFrom));
expect(component.dateRangeForm.get('to').value).toEqual(moment(mockFilterProperty.value._startTo));
});
it('should have floating labels when values are present', () => {
fixture.detectChanges();
const inputLabelsNodes = document.querySelectorAll('mat-form-field');
inputLabelsNodes.forEach(labelNode => {
expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto');
});
});
});

2
lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
View File

@ -1,5 +1,5 @@
<form>
<mat-form-field class="adf-people-cloud">
<mat-form-field [floatLabel]="'auto'" class="adf-people-cloud">
<mat-label *ngIf="!isReadonly()" id="adf-people-cloud-title-id">{{ title | translate }}</mat-label>
<mat-chip-list #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
<mat-chip

10
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
View File

@ -24,7 +24,7 @@
<form [formGroup]="editProcessFilterForm" *ngIf="editProcessFilterForm">
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="start center">
<ng-container *ngFor="let processFilterProperty of processFilterProperties">
<mat-form-field fxFlex="23%" *ngIf="processFilterProperty.type === 'select'" [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'select'" [attr.data-automation-id]="processFilterProperty.key">
<mat-select
placeholder="{{processFilterProperty.label | translate}}"
[formControlName]="processFilterProperty.key"
@ -36,7 +36,7 @@
>{{ propertyOption.label | translate }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="23%" *ngIf="processFilterProperty.type === 'multi-select'" [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'multi-select'" [attr.data-automation-id]="processFilterProperty.key">
<mat-select
placeholder="{{processFilterProperty.label | translate}}"
[formControlName]="processFilterProperty.key"
@ -47,21 +47,21 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="23%" *ngIf="processFilterProperty.type === 'text'" [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'text'" [attr.data-automation-id]="processFilterProperty.key">
<input matInput
[formControlName]="processFilterProperty.key"
type="text"
placeholder="{{processFilterProperty.label | translate}}"
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"/>
</mat-form-field>
<mat-form-field fxFlex="23%" *ngIf="processFilterProperty.type === 'number'" [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'number'" [attr.data-automation-id]="processFilterProperty.key">
<input matInput
[formControlName]="processFilterProperty.key"
type="number" min="0"
placeholder="{{processFilterProperty.label | translate}}"
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"/>
</mat-form-field>
<mat-form-field fxFlex="23%" *ngIf="processFilterProperty.type === 'date'" [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'date'" [attr.data-automation-id]="processFilterProperty.key">
<mat-label>{{processFilterProperty.label | translate}}</mat-label>
<input
matInput

12
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
View File

@ -38,6 +38,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { ProcessCloudService } from '../../services/process-cloud.service';
import { DateCloudFilterType } from '../../../models/date-cloud-filter.model';
import { ApplicationVersionModel } from '../../../models/application-version.model';
import { MatIconTestingModule } from '@angular/material/icon/testing';
describe('EditProcessFilterCloudComponent', () => {
let component: EditProcessFilterCloudComponent;
@ -73,7 +74,8 @@ describe('EditProcessFilterCloudComponent', () => {
imports: [
TranslateModule.forRoot(),
ProcessServiceCloudTestingModule,
ProcessFiltersCloudModule
ProcessFiltersCloudModule,
MatIconTestingModule
],
providers: [
MatDialog,
@ -357,6 +359,14 @@ describe('EditProcessFilterCloudComponent', () => {
}));
});
it('should have floating labels when values are present', async(() => {
fixture.detectChanges();
const inputLabelsNodes = document.querySelectorAll('mat-form-field');
inputLabelsNodes.forEach(labelNode => {
expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto');
});
}));
it('should be able to filter filterProperties when input is defined', async(() => {
fixture.detectChanges();
component.filterProperties = ['appName', 'processName'];

3
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
View File

@ -31,6 +31,7 @@
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="start center">
<ng-container *ngFor="let taskFilterProperty of taskFilterProperties">
<mat-form-field fxFlex="23%"
[floatLabel]="'auto'"
*ngIf="taskFilterProperty.type === 'select'"
[attr.data-automation-id]="taskFilterProperty.key">
<mat-select placeholder="{{taskFilterProperty.label | translate}}"
@ -44,6 +45,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="23%"
[floatLabel]="'auto'"
*ngIf="taskFilterProperty.type === 'text'"
[attr.data-automation-id]="taskFilterProperty.key">
<input matInput
@ -53,6 +55,7 @@
[attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key" />
</mat-form-field>
<mat-form-field fxFlex="23%"
[floatLabel]="'auto'"
*ngIf="taskFilterProperty.type === 'date'"
[attr.data-automation-id]="taskFilterProperty.key">
<mat-label>{{taskFilterProperty.label | translate}}</mat-label>

12
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.spec.ts
View File

@ -33,6 +33,7 @@ import { TaskCloudService } from '../../../services/task-cloud.service';
import { fakeServiceFilter } from '../../mock/task-filters-cloud.mock';
import { TranslateModule } from '@ngx-translate/core';
import { EditServiceTaskFilterCloudComponent } from './edit-service-task-filter-cloud.component';
import { MatIconTestingModule } from '@angular/material/icon/testing';
describe('EditServiceTaskFilterCloudComponent', () => {
let component: EditServiceTaskFilterCloudComponent;
@ -48,7 +49,8 @@ describe('EditServiceTaskFilterCloudComponent', () => {
imports: [
TranslateModule.forRoot(),
ProcessServiceCloudTestingModule,
TaskFiltersCloudModule
TaskFiltersCloudModule,
MatIconTestingModule
],
providers: [
MatDialog,
@ -433,6 +435,14 @@ describe('EditServiceTaskFilterCloudComponent', () => {
});
}));
it('should have floating labels when values are present', async(() => {
fixture.detectChanges();
const inputLabelsNodes = document.querySelectorAll('mat-form-field');
inputLabelsNodes.forEach(labelNode => {
expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto');
});
}));
it('should able to build a editTaskFilter form with default properties if input is empty', async(() => {
const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
component.ngOnChanges({ 'id': taskFilterIdChange });

2
lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.html
View File

@ -1,5 +1,5 @@
<div class="adf-cloud-assignment-container" fxLayout="row">
<mat-form-field>
<mat-form-field [floatLabel]="'auto'">
<mat-select class="adf-task-assignment-filter"
placeholder="{{ 'ADF_CLOUD_TASK_ASSIGNEMNT_FILTER.ASSIGNMENT_TYPE' | translate }}"
[(ngModel)]="assignmentType"

8
lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.spec.ts
View File

@ -73,4 +73,12 @@ describe('EditTaskFilterCloudComponent', () => {
const candidateGroups = fixture.debugElement.nativeElement.querySelector('.adf-group-cloud-filter');
expect(candidateGroups).toBeTruthy();
});
it('should have floating labels when values are present', () => {
fixture.detectChanges();
const inputLabelsNodes = document.querySelectorAll('mat-form-field');
inputLabelsNodes.forEach(labelNode => {
expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto');
});
});
});