mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
#755 placeholders support
This commit is contained in:
Denys Vuika
Mario Romano
parent
96ce41fcec
commit
7ea09bbde0
@ -32,7 +32,6 @@ import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
|
||||
|
||||
export * from './src/components/activiti-form.component';
|
||||
export * from './src/components/activiti-start-form.component';
|
||||
export * from './src/components/widgets/textfield-widget.component';
|
||||
export * from './src/services/form.service';
|
||||
export * from './src/components/widgets/index';
|
||||
export * from './src/services/ecm-model.service';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label amount-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield amount-widget"
|
||||
[class.amount-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
type="text"
|
||||
pattern="-?[0-9]*(\.[0-9]+)?"
|
||||
@ -7,7 +8,7 @@
|
||||
[attr.required]="isRequired()"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="checkVisibility(field)"
|
||||
[disabled]="field.readOnly">
|
||||
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}, {{currency}}</label>
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@ describe('AmountWidget', () => {
|
||||
let widget: AmountWidget;
|
||||
|
||||
beforeEach(() => {
|
||||
widget = new AmountWidget(null);
|
||||
widget = new AmountWidget();
|
||||
});
|
||||
|
||||
it('should setup currentcy from field', () => {
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, ElementRef, OnInit } from '@angular/core';
|
||||
import { TextFieldWidgetComponent } from './../textfield-widget.component';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { WidgetComponent } from './../widget.component';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
@ -24,16 +24,12 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
|
||||
templateUrl: './amount.widget.html',
|
||||
styleUrls: ['./amount.widget.css']
|
||||
})
|
||||
export class AmountWidget extends TextFieldWidgetComponent implements OnInit {
|
||||
export class AmountWidget extends WidgetComponent implements OnInit {
|
||||
|
||||
static DEFAULT_CURRENCY: string = '$';
|
||||
|
||||
currency: string = AmountWidget.DEFAULT_CURRENCY;
|
||||
|
||||
constructor(elementRef: ElementRef) {
|
||||
super(elementRef);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.field && this.field.currency) {
|
||||
this.currency = this.field.currency;
|
||||
|
||||
@ -54,6 +54,7 @@ export class FormFieldModel extends FormWidgetModel {
|
||||
overrideId: boolean;
|
||||
tab: string;
|
||||
colspan: number = 1;
|
||||
placeholder: string = null;
|
||||
minLength: number = 0;
|
||||
maxLength: number = 0;
|
||||
minValue: string;
|
||||
@ -157,6 +158,10 @@ export class FormFieldModel extends FormWidgetModel {
|
||||
this.currency = json.currency;
|
||||
this._value = this.parseValue(json);
|
||||
|
||||
if (json.placeholder && json.placeholder !== '' && json.placeholder !== 'null') {
|
||||
this.placeholder = json.placeholder;
|
||||
}
|
||||
|
||||
// <container>
|
||||
this.numberOfColumns = <number> json.numberOfColumns;
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<div class="mdl-grid" *ngIf="field?.isVisible" id="data-widget">
|
||||
<div class="mdl-cell mdl-cell--11-col">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield date-widget"
|
||||
[class.date-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
type="text"
|
||||
[attr.id]="field.id"
|
||||
@ -9,8 +10,8 @@
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="onDateChanged()"
|
||||
(onOk)="onDateSelected()"
|
||||
[disabled]="field.readOnly">
|
||||
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}} (d-M-yyyy)</label>
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { Component, ElementRef, OnInit, AfterViewChecked } from '@angular/core';
|
||||
import { TextFieldWidgetComponent } from './../textfield-widget.component';
|
||||
import { WidgetComponent } from './../widget.component';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
@ -24,14 +24,14 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
|
||||
templateUrl: './date.widget.html',
|
||||
styleUrls: ['./date.widget.css']
|
||||
})
|
||||
export class DateWidget extends TextFieldWidgetComponent implements OnInit, AfterViewChecked {
|
||||
export class DateWidget extends WidgetComponent implements OnInit, AfterViewChecked {
|
||||
|
||||
DATE_FORMAT: string = 'D-M-YYYY';
|
||||
|
||||
datePicker: any;
|
||||
|
||||
constructor(elementRef: ElementRef) {
|
||||
super(elementRef);
|
||||
constructor(private elementRef: ElementRef) {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label functional-group-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield functional-group-widget"
|
||||
[class.functional-group-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
type="text"
|
||||
[attr.id]="field.id"
|
||||
@ -7,8 +8,8 @@
|
||||
(ngModelChange)="checkVisibility(field)"
|
||||
(keyup)="onKeyUp($event)"
|
||||
(blur)="onBlur()"
|
||||
[disabled]="field.readOnly">
|
||||
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
|
||||
</div>
|
||||
<div class="functional-group-widget--autocomplete mdl-shadow--2dp" *ngIf="popupVisible && groups.length > 0">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label multiline-text-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield multiline-text-widget"
|
||||
[class.multiline-text-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<textarea class="mdl-textfield__input"
|
||||
type="text"
|
||||
rows= "3"
|
||||
@ -7,9 +8,9 @@
|
||||
[attr.required]="isRequired()"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="checkVisibility(field)"
|
||||
[disabled]="field.readOnly">
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
</textarea>
|
||||
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
|
||||
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
|
||||
</div>
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ describe('MultilineTextWidget', () => {
|
||||
let widget: MultilineTextWidget;
|
||||
|
||||
beforeEach(() => {
|
||||
widget = new MultilineTextWidget(null);
|
||||
widget = new MultilineTextWidget();
|
||||
});
|
||||
|
||||
it('should exist', () => {
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, ElementRef } from '@angular/core';
|
||||
import { TextFieldWidgetComponent } from './../textfield-widget.component';
|
||||
import { Component } from '@angular/core';
|
||||
import { WidgetComponent } from './../widget.component';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
@ -24,10 +24,5 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
|
||||
templateUrl: './multiline-text.widget.html',
|
||||
styleUrls: ['./multiline-text.widget.css']
|
||||
})
|
||||
export class MultilineTextWidget extends TextFieldWidgetComponent {
|
||||
|
||||
constructor(elementRef: ElementRef) {
|
||||
super(elementRef);
|
||||
}
|
||||
|
||||
export class MultilineTextWidget extends WidgetComponent {
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield number-widget"
|
||||
[class.number-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
type="text"
|
||||
pattern="-?[0-9]*(\.[0-9]+)?"
|
||||
@ -7,7 +8,7 @@
|
||||
[attr.required]="isRequired()"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="checkVisibility(field)"
|
||||
[disabled]="field.readOnly">
|
||||
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
|
||||
</div>
|
||||
|
||||
@ -22,7 +22,7 @@ describe('NumberWidget', () => {
|
||||
let widget: NumberWidget;
|
||||
|
||||
beforeEach(() => {
|
||||
widget = new NumberWidget(null);
|
||||
widget = new NumberWidget();
|
||||
});
|
||||
|
||||
it('should exist', () => {
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, ElementRef } from '@angular/core';
|
||||
import { TextFieldWidgetComponent } from './../textfield-widget.component';
|
||||
import { Component } from '@angular/core';
|
||||
import { WidgetComponent } from './../widget.component';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
@ -24,10 +24,5 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
|
||||
templateUrl: './number.widget.html',
|
||||
styleUrls: ['./number.widget.css']
|
||||
})
|
||||
export class NumberWidget extends TextFieldWidgetComponent {
|
||||
|
||||
constructor(elementRef: ElementRef) {
|
||||
super(elementRef);
|
||||
}
|
||||
|
||||
export class NumberWidget extends WidgetComponent {
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label people-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield people-widget"
|
||||
[class.people-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
type="text"
|
||||
[attr.id]="field.id"
|
||||
@ -7,8 +8,8 @@
|
||||
(ngModelChange)="checkVisibility(field)"
|
||||
(keyup)="onKeyUp($event)"
|
||||
(blur)="onBlur()"
|
||||
[disabled]="field.readOnly">
|
||||
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
|
||||
</div>
|
||||
<div class="people-widget--autocomplete mdl-shadow--2dp" *ngIf="popupVisible && users.length > 0">
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label text-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield text-widget"
|
||||
[class.text-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
type="text"
|
||||
[attr.id]="field.id"
|
||||
[attr.required]="isRequired()"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="onFieldChanged(field)"
|
||||
[disabled]="field.readOnly">
|
||||
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
|
||||
</div>
|
||||
|
||||
@ -15,20 +15,15 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ElementRef } from '@angular/core';
|
||||
import { TextWidget } from './text.widget';
|
||||
import { FormFieldModel } from './../core/form-field.model';
|
||||
import { FormFieldTypes } from '../core/form-field-types';
|
||||
|
||||
describe('TextWidget', () => {
|
||||
|
||||
let widget: TextWidget;
|
||||
let elementRef: ElementRef;
|
||||
let componentHandler;
|
||||
|
||||
beforeEach(() => {
|
||||
elementRef = new ElementRef(null);
|
||||
widget = new TextWidget(elementRef);
|
||||
widget = new TextWidget();
|
||||
|
||||
componentHandler = jasmine.createSpyObj('componentHandler', [
|
||||
'upgradeAllRegistered'
|
||||
@ -37,32 +32,4 @@ describe('TextWidget', () => {
|
||||
window['componentHandler'] = componentHandler;
|
||||
});
|
||||
|
||||
it('should upgrade material textfield', () => {
|
||||
spyOn(widget, 'setupMaterialTextField').and.stub();
|
||||
|
||||
widget.field = new FormFieldModel(null, {
|
||||
type: FormFieldTypes.TEXT,
|
||||
value: '<text>'
|
||||
});
|
||||
widget.ngAfterViewInit();
|
||||
expect(widget.setupMaterialTextField).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should require mdl component handler to setup textfield', () => {
|
||||
expect(widget.setupMaterialComponents(null)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should require element reference to setup textfield', () => {
|
||||
widget = new TextWidget(null);
|
||||
expect(widget.setupMaterialComponents(componentHandler)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should require field value to setup textfield', () => {
|
||||
widget.field = new FormFieldModel(null, {
|
||||
type: FormFieldTypes.TEXT,
|
||||
value: null
|
||||
});
|
||||
expect(widget.setupMaterialComponents(componentHandler)).toBeFalsy();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, ElementRef } from '@angular/core';
|
||||
import { TextFieldWidgetComponent } from './../textfield-widget.component';
|
||||
import { Component } from '@angular/core';
|
||||
import { WidgetComponent } from './../widget.component';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
@ -24,10 +24,5 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
|
||||
templateUrl: './text.widget.html',
|
||||
styleUrls: ['./text.widget.css']
|
||||
})
|
||||
export class TextWidget extends TextFieldWidgetComponent {
|
||||
|
||||
constructor(elementRef: ElementRef) {
|
||||
super(elementRef);
|
||||
}
|
||||
|
||||
export class TextWidget extends WidgetComponent {
|
||||
}
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ElementRef } from '@angular/core';
|
||||
import { WidgetComponent } from './widget.component';
|
||||
|
||||
export abstract class TextFieldWidgetComponent extends WidgetComponent {
|
||||
|
||||
protected elementRef: ElementRef;
|
||||
|
||||
constructor(elementRef: ElementRef) {
|
||||
super();
|
||||
this.elementRef = elementRef;
|
||||
}
|
||||
|
||||
setupMaterialComponents(handler: any): boolean {
|
||||
super.setupMaterialComponents(handler);
|
||||
// workaround for MDL issues with dynamic components
|
||||
if (handler) {
|
||||
if (this.elementRef && this.hasValue()) {
|
||||
return this.setupMaterialTextField(this.elementRef, handler, this.field.value.toString());
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,14 +1,15 @@
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label typeahead-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield typeahead-widget"
|
||||
[class.is-dirty]="value"
|
||||
[class.typeahead-widget__invalid]="!field.isValid" id="typehead-div" *ngIf="field.isVisible">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
type="text"
|
||||
[attr.id]="field.id"
|
||||
[(ngModel)]="value"
|
||||
(keyup)="onKeyUp($event)"
|
||||
(blur)="onBlur()"
|
||||
[disabled]="field.readOnly">
|
||||
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
|
||||
</div>
|
||||
<div class="typeahead-autocomplete mdl-shadow--2dp" *ngIf="options.length > 0 && popupVisible">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user