Skip to content

Commit e642e7f

Browse files
author
Jean-Philippe Schreiber
committed
Merge branch 'develop' of github.com:SDV-Plurimedia/sdv-ng2-widgets into develop
2 parents 746c4f9 + 92abca9 commit e642e7f

File tree

10 files changed

+157
-7
lines changed

10 files changed

+157
-7
lines changed

‎_widgets/autocomplete/autocomplete.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,8 @@ export class AutocompleteComponent implements OnInit, OnChanges {
107107
}
108108

109109
} else if (this.config.begin === 0) {
110-
if (this.data[0] !== this.removeData) {
111-
this.data.splice(0, 0, this.removeData);
112-
}
113110
this.results = this.data;
111+
this.addRemoveData();
114112
}
115113
}
116114

‎_widgets/datatable/_widgets/dynamic-action/dynamic-action.interface.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface DynamicActionInterface {
2+
data: any;
3+
scope: any;
4+
destroy: () => {};
5+
}

‎_widgets/datatable/_widgets/dynamic-action/dynamic-action.ts

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import {
2+
Component, OnInit, OnDestroy, Input, ComponentFactoryResolver,
3+
ViewContainerRef, ViewChild
4+
} from '@angular/core';
5+
6+
7+
@Component({
8+
selector: 'dynamic-action',
9+
template: '<div #placeholder></div>'
10+
})
11+
export class DynamicActionComponent implements OnInit, OnDestroy {
12+
13+
@ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;
14+
15+
public dynamicTd: any = null;
16+
@Input() public data: any = null;
17+
@Input() public scope: any = null;
18+
@Input() public classComponent: any = null;
19+
20+
constructor(
21+
private _factoryResolver: ComponentFactoryResolver,
22+
private _viewContainerRef: ViewContainerRef
23+
) {}
24+
25+
ngOnInit() {
26+
let factory = this._factoryResolver.resolveComponentFactory(this.classComponent);
27+
this.dynamicTd = this.viewContainerRef.createComponent(factory);
28+
this.sendDataToDynamicTd();
29+
}
30+
31+
ngOnDestroy() {
32+
if (this.dynamicTd) {
33+
this.dynamicTd.destroy();
34+
}
35+
}
36+
37+
/**
38+
* Envoie des données à l'enfant.
39+
*/
40+
private sendDataToDynamicTd() {
41+
if (this.dynamicTd) {
42+
this.dynamicTd.instance.data = this.data;
43+
this.dynamicTd.instance.scope = this.scope;
44+
}
45+
}
46+
}

‎_widgets/datatable/_widgets/dynamic-td/dynamic-td.interface.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface DynamicTdInterface {
2+
data: any;
3+
scope: any;
4+
destroy: () => {};
5+
}

‎_widgets/datatable/_widgets/dynamic-td/dynamic-td.ts

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import {
2+
Component, OnInit, OnDestroy, Input, ComponentFactoryResolver,
3+
ViewContainerRef, ViewChild
4+
} from '@angular/core';
5+
6+
7+
@Component({
8+
selector: 'dynamic-td',
9+
template: '<div #placeholder></div>'
10+
})
11+
export class DynamicTdComponent implements OnInit, OnDestroy {
12+
13+
@ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;
14+
15+
public dynamicTd: any = null;
16+
@Input() public data: any = null;
17+
@Input() public classComponent: any = null;
18+
@Input() public scope: any = null;
19+
20+
constructor(
21+
private _factoryResolver: ComponentFactoryResolver,
22+
private _viewContainerRef: ViewContainerRef
23+
) {}
24+
25+
ngOnInit() {
26+
let factory = this._factoryResolver.resolveComponentFactory(this.classComponent);
27+
this.dynamicTd = this.viewContainerRef.createComponent(factory);
28+
this.sendDataToDynamicTd();
29+
}
30+
31+
ngOnDestroy() {
32+
if (this.dynamicTd) {
33+
this.dynamicTd.destroy();
34+
}
35+
}
36+
37+
/**
38+
* Envoie des données à l'enfant.
39+
*/
40+
private sendDataToDynamicTd() {
41+
if (this.dynamicTd) {
42+
this.dynamicTd.instance.data = this.data;
43+
this.dynamicTd.instance.scope = this.scope;
44+
}
45+
}
46+
}

‎_widgets/datatable/datatable.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,18 @@
3636
<ng-container *ngFor="let champ of structure">
3737
<td *ngIf="champ.template" [innerHTML]="champ.template"></td>
3838
<td *ngIf="champ.inputHTML" [innerHTML]="getValue(ligne, champ.id, true)"></td>
39-
<td *ngIf="!champ.template && !champ.inputHTML">{{ getValue(ligne, champ.id)}}</td>
39+
<td *ngIf="champ.dynamicClass"><dynamic-td [classComponent]="champ.dynamicClass" [data]="ligne" [scope]="parent_scope"></dynamic-td></td>
40+
<td *ngIf="!champ.template && !champ.inputHTML && !champ.dynamicClass">{{ getValue(ligne, champ.id)}}</td>
4041
</ng-container>
4142
<td *ngIf="buttons">
43+
<ng-container *ngIf="buttons.dynamicClass; else default_buttons">
44+
<dynamic-action [data]="ligne" [scope]="parent_scope" [classComponent]="buttons.dynamicClass"></dynamic-action>
45+
</ng-container>
46+
<ng-template #default_buttons>
4247
<ng-container *ngFor="let button of buttons">
43-
<button class="{{button.class}} form-control" (click)="button.action.apply(parent_scope,[ligne])" [innerHTML]="button.text"></button>
48+
<button class="{{button.class}} form-control" (click)="button.action.apply(parent_scope,[ligne])" [innerHTML]="button.text"></button>
4449
</ng-container>
50+
</ng-template>
4551
</td>
4652
</tr>
4753
</ng-container>

‎_widgets/form-builder/_widgets/field-factory/fields/dynamic/dynamic.interface.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Field} from '../../../../_models/field';
2+
import {FormBuilder} from '../../../../_models/form_builder';
3+
import {EventEmitter} from '@angular/core';
4+
5+
export interface DynamicFieldInterface {
6+
model: any;
7+
field: Field;
8+
form: FormBuilder;
9+
updateModel: EventEmitter<any>;
10+
}

‎documentation/docs/index.md

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ Exemple de component:
254254

255255
public structure = [
256256
{ id: "id", label: "ID"},
257-
{ id: "name", label: "Nom du champ"}
257+
{ id: "name", label: "Nom du champ"},
258258
];
259259

260260
public buttons = [
@@ -281,14 +281,35 @@ Il est également possible de fournir du contenu HTML généré dynamiquement, p
281281

282282
```{public structure = [
283283
{ id: "id", label: "ID"},
284-
{ id: "liste_lapins", label: "Mes Lapins", inputHTML: true}
284+
{ id: "liste_lapins", label: "Mes Lapins", inputHTML: true},
285285
];```
286286
287287
- Ensuite, dans mon model :
288288
1. Ajouter la propriété "liste_lapin".
289289
2. Générer le HTML qui corresponds.
290290
3. L'affecter à cette propriété.
291291
292+
Il est également possible de fournir un widget pour une cellule donnée, pour ce faire :
293+
294+
295+
public structure = [
296+
{ id: "id", label: "ID"},
297+
{ id: "liste_lapins", label: "Mes Lapins", inputHTML: true},
298+
{ id: "dynamic", label: "Dynamic", dynamicClass: MyDynamicComponent}
299+
];
300+
301+
Ce widget peut implémenter l'interface mise à disposition (il n'est pas nécessaire de mettre les balises "td" au sein de ce widget):
302+
303+
import {DynamicTdInterface} from 'sdv-ng2-widgets';
304+
305+
Pour les boutons, on peut également fournir un widget, pour ce faire, l'objet bouton fournit doit être formaté comme ceci :
306+
307+
308+
public buttons = {
309+
dynamicClass: MyButtonComponent
310+
};
311+
312+
**ATTENTION : N'oubliez pas d'ajouter ces widgets dans les entryComponents de votre ngModule.**
292313
293314
Dans mon model
294315
@@ -604,6 +625,12 @@ sur un des champs du **model**, il faut soit :
604625
* Le faire dans le composant (**this.model[this.field.id]="bidule")
605626
* Avoir un Output() updateModel qui va s'occuper d'émettre la nouvelle valeur
606627
628+
Une interface a été mise à disposition pour les widgets dynamic, il suffit pour cela de l'utiliser dans votre widget :
629+
630+
import {DynamicFieldInterface} from 'sdv-ng2-widgets';
631+
632+
**ATTENTION : N'oubliez pas d'ajouter ce widget dans les entryComponents de votre ngModule.**
633+
607634
###### Email<a id="email"></a>
608635
Un input email. La validité de l'email est gérée par une directive Angular.
609636
* **min_length** - **number** - **default = 1** -La longueur minimale du champ

‎index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
11
export * from './sdv-ng2-widgets.module';
2+
export {DynamicTdInterface} from './_widgets/datatable/_widgets/dynamic-td/dynamic-td.interface';
3+
export {DynamicActionInterface} from './_widgets/datatable/_widgets/dynamic-action/dynamic-action.interface';
4+
export {DynamicFieldInterface} from './_widgets/form-builder/_widgets/field-factory/fields/dynamic/dynamic.interface';

‎sdv-ng2-widgets.module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ import { Button3dComponent } from './_widgets/button-3d/button-3d';
2828
import { ChevronComponent } from './_widgets/chevron/chevron';
2929
import { CkeditorComponent } from './_widgets/ckeditor/ckeditor';
3030
import { CornerButtonComponent } from './_widgets/corner-button/corner-button';
31+
import { DynamicTdComponent } from './_widgets/datatable/_widgets/dynamic-td/dynamic-td';
32+
import { DynamicActionComponent } from './_widgets/datatable/_widgets/dynamic-action/dynamic-action';
3133
import { DatatableComponent } from './_widgets/datatable/datatable';
3234
import { DatepickerComponent } from './_widgets/datepicker/datepicker';
3335
import { DropdownComponent } from './_widgets/dropdown/dropdown';
@@ -78,6 +80,8 @@ let widgets = [
7880
ChevronComponent,
7981
CkeditorComponent,
8082
CornerButtonComponent,
83+
DynamicTdComponent,
84+
DynamicActionComponent,
8185
DatatableComponent,
8286
DatepickerComponent,
8387
DropdownComponent,

0 commit comments

Comments
 (0)