Skip to content

Commit

Permalink
feat(material/forms): AjfForm new "card" UI. Added "centeredFieldsCon…
Browse files Browse the repository at this point in the history 
…tent" and "maxColumns" inputs to form.
  • Loading branch information
@robzan8
Marco Tozzi authored and robzan8 committed Apr 28, 2023
1 parent 3947d75 commit 38a0bb7
Show file tree
Hide file tree
Showing 10 changed files with 240 additions and 65 deletions.
1 change: 1 addition & 0 deletions projects/core/forms/src/public_api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
*
*/

export * from './as-validation-errors-string';
export * from './as-field-instance';
export * from './as-repeating-slide-instance';
export * from './base-field';
Expand Down
2 changes: 1 addition & 1 deletion projects/dev-app/src/mat-forms/forms-demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h5>Context</h5>
</mat-grid-tile>
</mat-grid-list>
<div class="demo-form-container" *ngIf="form$|async as form">
<ajf-form [form]="form" [topBar]="true" [hasStartMessage]="false" [hasEndMessage]="false" [readonly]="readonly">
<ajf-form [maxColumns]="1" [centeredFieldsContent]="false" [form]="form" [topBar]="true" [hasStartMessage]="false" [hasEndMessage]="false" [readonly]="readonly">
<button ajfFormTopToolbarButtons mat-button default>button added by form demo</button>
</ajf-form>
</div>
Expand Down
2 changes: 1 addition & 1 deletion projects/dev-app/src/mat-forms/forms-demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
}

.demo-form-container {
height: 500px;
height: 90vh;
position: relative;
}
}
18 changes: 5 additions & 13 deletions projects/material/cypress/integration/report.e2e.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ describe('ajf-report test with local filter', () => {
});

it(`expected first values`, () => {
cy.get('mat-radio-button:first').click();
cy.get('mat-radio-button input').should('exist').first().click();
cy.get('.ajf-text-container').should('have.text', 'firstLabelA,firstLabelB,firstLabelC');
});

it(`expected second values`, () => {
cy.get('mat-radio-button:nth-of-type(2)').click();
cy.get('mat-radio-button input').eq(1).should('exist').click();
cy.get('.ajf-text-container').should('have.text', 'secondLabelA,secondLabelB,secondLabelC');
});
});
Expand All @@ -26,22 +26,14 @@ describe('ajf-report test with global filter:', () => {

it(`select Global zone with 'first' value activate subzones filter(global and local)`, () => {
cy.get('mat-radio-button').should('have.length', 2);
cy.get('mat-radio-button').eq(0).click();
cy.get('mat-radio-button input').eq(0).click();
cy.get('mat-radio-button').should('have.length', 8);
});

it(`global filter: with (global zones)=> 'first' and (Sub Zones) => 1a, first text widget should be showed 'first1a' text widget with filter should be showed '1a'`, () => {
cy.get('mat-radio-button').eq(0).click();
cy.get('mat-radio-button').eq(2).click();
cy.get('mat-radio-button input').eq(0).click();
cy.get('mat-radio-button input').eq(2).click();
cy.get('.global').should('have.text', 'first1a');
cy.get('.local').should('have.text', '1a');
});

it(`variation of filter related to second text widget dont change other widgets`, () => {
cy.get('mat-radio-button').eq(0).click();
cy.get('mat-radio-button').eq(2).click();
cy.get('mat-radio-button').eq(7).click();
cy.get('.global').should('have.text', 'first1a');
cy.get('.local').should('have.text', '1c');
});
});
1 change: 1 addition & 0 deletions projects/material/forms/src/field.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
*ngIf="instance"
[ngClass]="'ajf-field-' + (instance|ajfNodeCompleteName)"
[class.ajf-validated]="instance.validationResults|ajfFieldIsValid"
(keydown)="tabEvent($event, instance)"
>
<ng-template ajf-field-host></ng-template>
</div>
Expand Down
25 changes: 18 additions & 7 deletions projects/material/forms/src/field.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@ ajf-field {
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
ajf-checkbox-group-item {
width: 100%;
.mat-mdc-button {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
}
}
}

.ajf-item-container {
Expand All @@ -16,9 +25,8 @@ ajf-field {
}

tr.ajf-row-odd {
background-color: grey;
background-color: grey;
}

}

table {
Expand All @@ -29,7 +37,8 @@ table {
td {
position: relative;

span, input {
span,
input {
cursor: text;
position: absolute;
width: 100%;
Expand All @@ -51,15 +60,17 @@ table {
}

&:last-child {
span, input {
span,
input {
border-right-color: #cccccc;
}
}
}

&:last-of-type {
td {
span, input {
span,
input {
border-bottom-color: #cccccc;
}
}
Expand All @@ -69,6 +80,6 @@ table {

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
-webkit-appearance: none;
margin: 0;
}
19 changes: 18 additions & 1 deletion projects/material/forms/src/field.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,11 @@
*
*/

import {AjfFieldComponentsMap, AjfFormField as CoreFormField} from '@ajf/core/forms';
import {
AjfFieldComponentsMap,
AjfFieldInstance,
AjfFormField as CoreFormField,
} from '@ajf/core/forms';
import {BooleanInput} from '@angular/cdk/coercion';
import {
ChangeDetectionStrategy,
Expand All @@ -46,5 +50,18 @@ export class AjfFormField extends CoreFormField {
this.componentsMap = fieldService.componentsMap;
}

tabEvent(evt: KeyboardEvent, instance: AjfFieldInstance) {
if (evt.code != 'Tab') return;
const isShiftKey: boolean = evt.shiftKey;
const cardIdNext = 'field_entry_' + (isShiftKey ? instance.node.id - 1 : instance.node.id + 1);

const targetElement = document.querySelector(`#${cardIdNext}`) as HTMLElement;

if (targetElement == null || instance == null) {
evt.preventDefault();
evt.stopPropagation();
}
}

static ngAcceptInputType_readonly: BooleanInput;
}
135 changes: 96 additions & 39 deletions projects/material/forms/src/form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,11 @@ <h2>
[ngForOf]="slideInstance.flatNodes"
[ngForTrackBy]="trackNodeById"
>
<div
[ngClass]="'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size"
<mat-card
appearance="outlined"
[ngClass]="'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +
' ajf-max-columns-' + maxColumns +
(centeredFieldsContent ? ' ajf-centered-field' : '')"
class="ajf-field-entry"
*ngIf="fieldInstance.visible"
>
Expand All @@ -112,26 +115,51 @@ <h2>
{{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |
transloco }}
</p>
<label
[attr.id]="fieldInstance.node.name"
*ngIf="(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7"
[innerHTML]="fieldInstance.node.label | transloco"
></label>
<mat-icon
class="ajf-tooltip-icon"
*ngIf="(fieldInstance|ajfAsFieldInstance).node?.hint as hint"
[matTooltip]="hint"
matTooltipPosition="right"

<mat-card-header>
<mat-card-title>
<label
[attr.id]="fieldInstance.node.name"
*ngIf="(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7"
[innerHTML]="fieldInstance.node.label | transloco"
></label>
</mat-card-title>
<mat-icon
class="ajf-tooltip-icon"
*ngIf="(fieldInstance|ajfAsFieldInstance).node?.hint as hint"
[matTooltip]="hint"
matTooltipPosition="right"
>
{{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||
'help'}}</mat-icon
></mat-card-header
>
{{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||
'help'}}</mat-icon
<mat-card-content>
<ajf-field
[instance]="fieldInstance|ajfAsFieldInstance"
[readonly]="readonly || !slideInstance.editable"
[id]="'field_entry_' + fieldInstance.node.id"
>
</ajf-field>
</mat-card-content>
<mat-card-actions
[ngClass]="(fieldInstance|ajfAsFieldInstance)?.valid ?
'ajf-valid-field'
: 'ajf-invalid-field'"
>
<ajf-field
[instance]="fieldInstance|ajfAsFieldInstance"
[readonly]="readonly || !slideInstance.editable"
>
</ajf-field>
</div>
<ng-container
*ngIf="(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate"
>
<span class="ajf-field-error-message"
>{{(fieldInstance|ajfAsFieldInstanceErrors)}}</span
>
<mat-icon class="ajf-warning">warning</mat-icon>
</ng-container>
<ng-template #ajfValidFieldTemplate>
<mat-icon class="ajf-success">check</mat-icon>
</ng-template>
</mat-card-actions>
</mat-card>
</ng-template>
</mat-card-content>
</mat-card>
Expand Down Expand Up @@ -185,8 +213,11 @@ <h2>
[ngForOf]="slideInstance.slideNodes[idx]"
[ngForTrackBy]="trackNodeById"
>
<div
[ngClass]="'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size"
<mat-card
appearance="outlined"
[ngClass]="'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +
' ajf-max-columns-' + maxColumns +
(centeredFieldsContent ? ' ajf-centered-field' : '')"
class="ajf-field-entry"
*ngIf="fieldInstance.visible"
>
Expand All @@ -198,25 +229,51 @@ <h2>
{{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |
transloco }}
</p>
<label
[attr.id]="fieldInstance.node.name"
[innerHTML]="fieldInstance.node.label | transloco"
></label>
<mat-icon
class="ajf-tooltip-icon"
*ngIf="(fieldInstance|ajfAsFieldInstance).node?.hint as hint"
[matTooltip]="hint"
matTooltipPosition="right"
>
{{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||
'help'}}</mat-icon

<mat-card-header>
<mat-card-title>
<label
[attr.id]="fieldInstance.node.name"
*ngIf="(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7"
[innerHTML]="fieldInstance.node.label | transloco"
></label>
</mat-card-title>
<mat-icon
class="ajf-tooltip-icon"
*ngIf="(fieldInstance|ajfAsFieldInstance).node?.hint as hint"
[matTooltip]="hint"
matTooltipPosition="right"
>
{{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||
'help'}}</mat-icon
></mat-card-header
>
<ajf-field
[instance]="fieldInstance|ajfAsFieldInstance"
[readonly]="readonly || (!lastSlide && (slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval)"
<mat-card-content>
<ajf-field
[instance]="fieldInstance|ajfAsFieldInstance"
[readonly]="readonly || !slideInstance.editable"
[id]="'field_entry_' + fieldInstance.node.id"
>
</ajf-field>
</mat-card-content>
<mat-card-actions
[ngClass]="(fieldInstance|ajfAsFieldInstance)?.valid ?
'ajf-valid-field'
: 'ajf-invalid-field'"
>
</ajf-field>
</div>
<ng-container
*ngIf="(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate"
>
<span class="ajf-field-error-message"
>{{(fieldInstance|ajfAsFieldInstanceErrors)}}</span
>
<mat-icon class="ajf-warning">warning</mat-icon>
</ng-container>
<ng-template #ajfValidFieldTemplate>
<mat-icon class="ajf-success">check</mat-icon>
</ng-template>
</mat-card-actions>
</mat-card>
</ng-template>
</mat-card-content>
</mat-card>
Expand Down

0 comments on commit 38a0bb7

Please sign in to comment.