Skip to content

Commit

Permalink
feat(form): add hint
Browse files Browse the repository at this point in the history
  • Loading branch information
peppedeka authored and trik committed Feb 4, 2021
1 parent da1711f commit e02071e
Show file tree
Hide file tree
Showing 21 changed files with 399 additions and 55 deletions.
2 changes: 2 additions & 0 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,11 @@
/src/e2e-app/example-viewer/* @trik
/src/e2e-app/file-input/* @trik
/src/e2e-app/ion-calendar/* @trik
/src/e2e-app/ion-form/* @peppedeka
/src/e2e-app/ion-date-input-field/* @trik
/src/e2e-app/ion-table-field/* @trik
/src/e2e-app/mat-calendar/* @trik
/src/e2e-app/mat-form/* @peppedeka
/src/e2e-app/mat-date-input-field/* @trik
/src/e2e-app/mat-table-field/* @trik

Expand Down
9 changes: 9 additions & 0 deletions src/core/forms/interface/fields/field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,13 @@ export interface AjfField extends AjfNode {
nextSlideCondition?: AjfCondition;
attachmentOrigin?: AjfAttachmentsOrigin<any>;
attachments?: any[];
/*
* Hint text visualized in tooltip used
* to explain the mean of field
*/
hint?: string;
/**
* Hint icon showed as anchor of hint
*/
hintIcon?: string;
}
4 changes: 3 additions & 1 deletion src/e2e-app/e2e-app/e2e-app-layout.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@

<mat-nav-list *ngIf="showLinks">
<a mat-list-item [routerLink]="['file-input']">File input</a>
<a mat-list-item [routerLink]="['ion-form']">Ionic - Form</a>
<a mat-list-item [routerLink]="['ion-calendar']">Ionic - Calendar</a>
<a mat-list-item [routerLink]="['ion-date-input-field']">Ionic - Date Input Field</a>
<a mat-list-item [routerLink]="['ion-table-field']">Ionic - Table Field</a>
<a mat-list-item [routerLink]="['mat-form']">Material - Form</a>
<a mat-list-item [routerLink]="['mat-calendar']">Material - Calendar</a>
<a mat-list-item [routerLink]="['mat-date-input-field']">Material - Date Input Field</a>
<a mat-list-item [routerLink]="['mat-table-field']">Material - Table Field</a>
Expand All @@ -14,4 +16,4 @@

<main>
<ng-content></ng-content>
</main>
</main>
4 changes: 4 additions & 0 deletions src/e2e-app/e2e-app/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@ import {Routes} from '@angular/router';
import {FileInputE2E} from '../file-input/file-input-e2e';
import {IonicCalendarE2E} from '../ion-calendar/calendar-e2e';
import {IonicDateInputFieldE2E} from '../ion-date-input-field/date-input-field-e2e';
import {IonicFormE2E} from '../ion-form/ion-form-e2e';
import {IonicTableFieldE2E} from '../ion-table-field/table-field-e2e';
import {MaterialCalendarE2E} from '../mat-calendar/calendar-e2e';
import {MaterialDateInputFieldE2E} from '../mat-date-input-field/date-input-field-e2e';
import {MaterialFormE2E} from '../mat-form/mat-form-e2e';
import {MaterialTableFieldE2E} from '../mat-table-field/table-field-e2e';
import {Home} from './e2e-app-layout';

export const E2E_APP_ROUTES: Routes = [
{path: '', component: Home},
{path: 'file-input', component: FileInputE2E},
{path: 'ion-form', component: IonicFormE2E},
{path: 'ion-calendar', component: IonicCalendarE2E},
{path: 'ion-date-input-field', component: IonicDateInputFieldE2E},
{path: 'ion-table-field', component: IonicTableFieldE2E},
{path: 'mat-form', component: MaterialFormE2E},
{path: 'mat-calendar', component: MaterialCalendarE2E},
{path: 'mat-date-input-field', component: MaterialDateInputFieldE2E},
{path: 'mat-table-field', component: MaterialTableFieldE2E},
Expand Down
4 changes: 4 additions & 0 deletions src/e2e-app/ion-form/ion-form-e2e.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<h1>Number Field Example</h1>
<section>
<ajf-form [form]="form"></ajf-form>
</section>
39 changes: 39 additions & 0 deletions src/e2e-app/ion-form/ion-form-e2e.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* @license
* Copyright (C) Gnucoop soc. coop.
*
* This file is part of the Advanced JSON forms (ajf).
*
* Advanced JSON forms (ajf) is free software: you can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the License,
* or (at your option) any later version.
*
* Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
* General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Advanced JSON forms (ajf).
* If not, see http://www.gnu.org/licenses/.
*
*/

import {AjfFormsModule as CoreFormsModule} from '@ajf/core/forms';
import {AjfFormsModule} from '@ajf/ionic/forms';
import {NgModule} from '@angular/core';

import {IonicFormE2E} from './ion-form-e2e';

@NgModule({
imports: [
AjfFormsModule,
CoreFormsModule,
],
declarations: [
IonicFormE2E,
],
})
export class IonicFormE2eModule {
}
80 changes: 80 additions & 0 deletions src/e2e-app/ion-form/ion-form-e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/**
* @license
* Copyright (C) Gnucoop soc. coop.
*
* This file is part of the Advanced JSON forms (ajf).
*
* Advanced JSON forms (ajf) is free software: you can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the License,
* or (at your option) any later version.
*
* Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
* General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Advanced JSON forms (ajf).
* If not, see http://www.gnu.org/licenses/.
*
*/

import {AjfForm, AjfFormSerializer} from '@ajf/core/forms';
import {Component} from '@angular/core';

const formSchema: any = {
choicesOrigins: [{
type: 'fixed',
name: 'animals',
choicesType: 'string',
choices: [{value: 'dog', label: 'Dog'}, {value: 'cat', label: 'Cat'}]
}],
nodes: [{
parent: 0,
id: 1,
name: 'number1',
label: 'Number Field Example',
nodeType: 3,
nodes: [
{
id: 10,
parent: 1,
name: 'number',
label: 'Number',
nodeType: 0,
fieldType: 2,
hint: 'Is a field that allows only numeric inputs',
hintIcon: 'help-outline',
},
{
parent: 10,
id: 11,
name: 'pet_type',
label: 'Do you have a cat or a dog?',
nodeType: 0,
fieldType: 4,
choicesOriginRef: 'animals',
hint: 'which pet do you have at home?',
}
]
}]
};

@Component({
selector: 'ion-form-e2e',
templateUrl: 'ion-form-e2e.html',
styles: [`
ajf-form {
display: contents;
}
`]
})
export class IonicFormE2E {
formSchema: string = JSON.stringify(formSchema);
form: AjfForm;

constructor() {
this.form = AjfFormSerializer.fromJson(formSchema);
}
}
20 changes: 7 additions & 13 deletions src/e2e-app/main-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,22 @@ import {E2E_APP_ROUTES} from './e2e-app/routes';
import {FileInputE2eModule} from './file-input/file-input-e2e-module';
import {IonicCalendarE2eModule} from './ion-calendar/calendar-e2e-module';
import {IonicDateInputFieldE2eModule} from './ion-date-input-field/date-input-field-e2e-module';
import {IonicFormE2eModule} from './ion-form/ion-form-e2e.module';
import {IonicTableFieldE2eModule} from './ion-table-field/table-field-e2e-module';
import {MaterialCalendarE2eModule} from './mat-calendar/calendar-e2e-module';
import {MaterialDateInputFieldE2eModule} from './mat-date-input-field/date-input-field-e2e-module';
import {MaterialFormE2eModule} from './mat-form/mat-form-e2e.module';
import {MaterialTableFieldE2eModule} from './mat-table-field/table-field-e2e-module';

@NgModule({
imports: [
BrowserModule,
E2eAppModule,
IonicModule.forRoot(),
NoopAnimationsModule,
RouterModule.forRoot(E2E_APP_ROUTES),
TranslateModule.forRoot(),
BrowserModule, E2eAppModule, IonicModule.forRoot(), NoopAnimationsModule,
RouterModule.forRoot(E2E_APP_ROUTES), TranslateModule.forRoot(),

// E2E demos
FileInputE2eModule,
IonicCalendarE2eModule,
IonicDateInputFieldE2eModule,
IonicTableFieldE2eModule,
MaterialCalendarE2eModule,
MaterialDateInputFieldE2eModule,
MaterialTableFieldE2eModule,
FileInputE2eModule, IonicCalendarE2eModule, IonicDateInputFieldE2eModule,
IonicTableFieldE2eModule, MaterialCalendarE2eModule, MaterialDateInputFieldE2eModule,
MaterialTableFieldE2eModule, MaterialFormE2eModule, IonicFormE2eModule
],
declarations: [
E2eApp,
Expand Down
4 changes: 4 additions & 0 deletions src/e2e-app/mat-form/mat-form-e2e.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<h1>Number Field Example</h1>
<section>
<ajf-form [form]="form"></ajf-form>
</section>
39 changes: 39 additions & 0 deletions src/e2e-app/mat-form/mat-form-e2e.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* @license
* Copyright (C) Gnucoop soc. coop.
*
* This file is part of the Advanced JSON forms (ajf).
*
* Advanced JSON forms (ajf) is free software: you can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the License,
* or (at your option) any later version.
*
* Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
* General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Advanced JSON forms (ajf).
* If not, see http://www.gnu.org/licenses/.
*
*/

import {AjfFormsModule as CoreFormsModule} from '@ajf/core/forms';
import {AjfFormsModule} from '@ajf/material/forms';
import {NgModule} from '@angular/core';

import {MaterialFormE2E} from './mat-form-e2e';

@NgModule({
imports: [
AjfFormsModule,
CoreFormsModule,
],
declarations: [
MaterialFormE2E,
],
})
export class MaterialFormE2eModule {
}
75 changes: 75 additions & 0 deletions src/e2e-app/mat-form/mat-form-e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
/**
* @license
* Copyright (C) Gnucoop soc. coop.
*
* This file is part of the Advanced JSON forms (ajf).
*
* Advanced JSON forms (ajf) is free software: you can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the License,
* or (at your option) any later version.
*
* Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
* General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Advanced JSON forms (ajf).
* If not, see http://www.gnu.org/licenses/.
*
*/

import {AjfForm, AjfFormSerializer} from '@ajf/core/forms';
import {Component} from '@angular/core';

const formSchema: any = {
choicesOrigins: [{
type: 'fixed',
name: 'animals',
choicesType: 'string',
choices: [{value: 'dog', label: 'Dog'}, {value: 'cat', label: 'Cat'}]
}],
nodes: [{
parent: 0,
id: 1,
name: 'number1',
label: 'Number Field Example',
nodeType: 3,
nodes: [
{
id: 10,
parent: 1,
name: 'number',
label: 'Number',
nodeType: 0,
fieldType: 2,
hint: 'Is a field that allows only numeric inputs',
hintIcon: 'help_outline',
},
{
parent: 10,
id: 11,
name: 'pet_type',
label: 'Do you have a cat or a dog?',
nodeType: 0,
fieldType: 4,
choicesOriginRef: 'animals',
hint: 'which pet do you have at home?',
}
]
}]
};

@Component({
selector: 'mat-form-e2e',
templateUrl: 'mat-form-e2e.html',
})
export class MaterialFormE2E {
formSchema: string = JSON.stringify(formSchema);
form: AjfForm;

constructor() {
this.form = AjfFormSerializer.fromJson(formSchema);
}
}
5 changes: 4 additions & 1 deletion src/ionic/forms/form.html
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,12 @@ <h2>
<ng-container *ngFor="let fieldInstance of slideInstance.flatNodes; trackBy: trackNodeById">
<div [ngClass]="'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size" class="ajf-field-entry"
*ngIf="fieldInstance.visible">
<i [class]="(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon" item-right></i>
<i [class]="(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon" item-right></i>
<p>{{ (fieldInstance|ajfAsFieldInstance).node.description }}</p>
<ion-label [innerHTML]="fieldInstance.node.label | translate"></ion-label>
<ion-icon *ngIf="(fieldInstance|ajfAsFieldInstance).node?.hint as hint"
[name]="(fieldInstance|ajfAsFieldInstance).node?.hintIcon || 'help-outline'"
(click)="openPopover($event, hint)"></ion-icon>
<ajf-field [instance]="fieldInstance|ajfAsFieldInstance" [readonly]="readonly"></ajf-field>
</div>
</ng-container>
Expand Down

0 comments on commit e02071e

Please sign in to comment.