Merge 0f4b47a into 5ca987b

ESSS · Nov 28, 2018 · d2db9f5 · d2db9f5
2 parents 5ca987b + 0f4b47a
commit d2db9f5
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -87,9 +87,12 @@ Template:
 ```
 Component:
 ```ts
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, OnDestroy {
+
+  @ViewChild(NgXformEditSaveComponent) xformComponent: NgXformEditSaveComponent;
+  @ViewChild('customField') customFieldTmpl: TemplateRef<any>;
+  @ViewChild('onchangefn') onchangefnTmpl: TemplateRef<any>;
 
-  @ViewChild(NgXformComponent) xformComponent: NgXformComponent;
   private colors: any[] = [
     { id: 0, name: 'other' },
     { id: 1, name: 'blue' },
@@ -100,18 +103,28 @@ export class HomeComponent implements OnInit {
     { id: 6, name: 'purple' }
   ];
 
+  public onchangefnSubject = new Subject<string>();
+
   public fields: DynamicField[];
-  public editing = true;
   public horizontal = false;
   public labelWidth = 2;
+  public model: any;
+  public invertedPhraseValue = '';
+  public subscriptions: Subscription[] = [];
 
-  constructor(private titleService: Title, private http: HttpClient) {
+  constructor(private titleService: Title, private http: HttpClient) { }
+
+  ngOnInit() {
     const minDate = new Date();
     const maxDate = new Date();
 
+    this.subscriptions.push(this.onchangefnSubject.asObservable().subscribe(
+      (value: string) =>  this.invertedPhraseValue = value.split('').reverse().join('')
+    ));
+
     minDate.setDate(minDate.getDate() - 3);
     maxDate.setDate(maxDate.getDate() + 3);
-
+    this.titleService.setTitle('Home | @esss/ng-xform');
     this.fields = [
       new TextField({
         key: 'name',
@@ -141,6 +154,8 @@ export class HomeComponent implements OnInit {
         label: 'Color',
         searchable: true,
         options: this.colors,
+        addNewOption: true,
+        addNewOptionText: 'Add Color',
         optionLabelKey: 'name',
       }),
       new TextField({
@@ -152,13 +167,14 @@ export class HomeComponent implements OnInit {
         key: 'address',
         fields: [
           new SelectField({
-            key: 'street',
-            label: 'Street',
+            key: 'country',
+            label: 'Country',
             searchHandler: this.observableSource.bind(this),
             searchByValueKeyHandler: this.observableSourceByPlaceId.bind(this),
+            searchOnFocus: true,
             searchable: true,
-            optionLabelKey: 'formatted_address',
-            optionValueKey: 'place_id',
+            optionLabelKey: 'name',
+            optionValueKey: 'alpha3Code',
             validators: [
               Validators.required
             ]
@@ -184,15 +200,41 @@ export class HomeComponent implements OnInit {
       new MeasureField({
         key: 'length',
         label: 'Length',
-        modelUnit: 'm',
-        viewUnit: of('cm').delay(200),
-        availableUnits: of(['m', 'cm', 'mm', 'ft']).delay(200),
-        formatOptions: {notation: 'fixed', precision: 4}
+        modelUnit: 'mm',
+        viewUnit: of('m').pipe(delay(200)),
+        availableUnits: of(['m', 'cm', 'mm']).pipe(delay(200))
+      }),
+      new MeasureField({
+        key: 'width',
+        label: 'Width',
+        modelUnit: 'inch',
+        viewUnit: of('inch').pipe(delay(200)),
+        availableUnits: of(['inch', 'ft']).pipe(delay(200))
+      }),
+      new TextField({
+        key: 'phrase',
+        label: 'Write a phrase',
+        onChangeFn: (value: string) => {
+          this.onchangefnSubject.next(value);
+        }
+      }),
+      new CustomField({
+        key: 'invertedPhrase',
+        label: 'Inverted phrase',
+        readOnly: true,
+        tmpl: this.onchangefnTmpl
       }),
       new CheckboxField({
         key: 'news',
         label: 'News'
       }),
+      new RadioGroupField({
+        key: 'gender',
+        label: 'Gender',
+        options: of([{id: 1, label: 'male'}, {id: 2, label: 'female'}]).pipe(delay(2000)),
+        optionValueKey: 'id',
+        optionLabelKey: 'label'
+      }),
       new MultilineField({
         key: 'comment',
         label: 'Comment',
@@ -203,22 +245,33 @@ export class HomeComponent implements OnInit {
         label: 'Date of birth',
         theme: 'blue',
         minDate: minDate,
-        maxDate: maxDate
+        maxDate: maxDate,
+        showWeekNumbers: true
+      }),
+      new DateRangeField({
+        key: 'range',
+        label: 'Date range',
+        theme: 'blue'
+      }),
+      new CustomField({
+        key: 'custom_amount',
+        label: 'Custom Field Amount',
+        tmpl: this.customFieldTmpl
       }),
     ];
   }
 
-  ngOnInit() {
-    this.titleService.setTitle('Home | @esss/ng-xform');
+  ngOnDestroy() {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
   }
 
   public onSubmit(values: object) {
-    this.editing = !this.editing;
-    console.log(values);
+    this.model = values;
+    this.model.invertedPhrase = this.invertedPhraseValue;
   }
 
   populate() {
-    this.xformComponent.form.patchValue({
+    this.xformComponent.setValue({
       name: 'Customer',
       email: 'customer@mail.com',
       type_tags: [2],
@@ -228,34 +281,45 @@ export class HomeComponent implements OnInit {
       address: {
         street: 'ChIJn7h-4b9JJ5URGCq6n0zj1tM'
       },
+      gender: 1,
       length: { value: 2, unit: 'm'},
+      width: { value: 3, unit: 'ft'},
+      phrase: 'dogs are awesome',
       news: true,
       comment: 'Mussum Ipsum, cacilds vidis litro abertis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo, vitae ' +
       'iaculis nisl. Quem num gosta di mé, boa gentis num é. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. Em pé ' +
       'sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Leite de capivaris, leite de mula manquis sem cabeça. Praesent ' +
       'vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Casamentiss faiz malandris se pirulitá. Sapien in monti ' +
       'palavris qui num significa nadis i pareci latim.',
-      birth: new Date()
+      birth: new Date(),
+      range: [
+        '2018-09-06T03:00:00.000Z',
+        '2018-10-08T03:00:00.000Z'
+      ],
+      custom_amount: 456
     });
   }
 
   public observableSource(keyword: any): Observable<any[]> {
-    const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${keyword}`;
+    const url = `https://restcountries.eu/rest/v2/name/${keyword}`;
     if (keyword) {
       return this.http.get(url)
-        .map((res) => res['results']);
+        .pipe(
+          map((res) => res as any[])
+        );
     } else {
       return of([]);
     }
   }
 
-  public observableSourceByPlaceId(place_id: any): Observable<any> {
+  public observableSourceByPlaceId(keyword: any): Observable<any> {
     return of({
-      'place_id': 'ChIJn7h-4b9JJ5URGCq6n0zj1tM',
-      'formatted_address': 'Florianópolis - State of Santa Catarina, Brazil'
-    }).delay(300);
+      'alpha3Code': 'BRA',
+      'name': 'Brazil'
+    }).pipe(delay(300));
   }
 }
+
 ```
 ### Custom Field
 
@@ -360,6 +424,24 @@ new TextField<User>({
 ``` 
 the TextField ```key``` attribute will accept only keys of the class User (i.e. 'name', 'email', 'address'), and show and error if any other value is provided.
 
+### On change function
+You can add a parameter ```onChangeFn``` on your ```DynamicField``` fields. This parameter receives a 
+anonymous function, just like in the following example:
+
+```ts
+new TextField({
+  key: 'phrase',
+  label: 'Write a phrase',
+  onChangeFn: (value: string) => {
+    // push new typed value to a subject
+    this.onchangefnSubject.next(value);
+  }
+}),
+```
+This parameter can be used to execute async functions that depends on user input or push values of 
+a field to a ```Subject()``` just like is shown above. 
+
+
 ### Locales
 DatepickerField can use different locales. 
 

diff --git a/config/karma.conf.js b/config/karma.conf.js
@@ -27,6 +27,7 @@ module.exports = function (config) {
         flags: [
           '--headless',
           '--disable-gpu',
+	  '--no-sandbox',
           // Without a remote debugging port, Google Chrome exits immediately.
           '--remote-debugging-port=9222',
         ],

diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/src/app/home/home.component.html b/demo/src/app/home/home.component.html
@@ -50,15 +50,26 @@ <h1>ng-xform</h1>
     </div>
   </div>
 </section>
+<ng-template #onchangefn let-customControl="control" let-isEditing="isEditing">
+  <div class="input-group">
+    <input type="text"
+      [formControl]="customControl"
+      [attr.disabled]="!isEditing || null"
+      class="form-control"
+      style="text-align:left"
+      id="invertedPhrase"
+      [value]="invertedPhraseValue" />
+  </div>
+</ng-template>
 <ng-template #customField let-customControl="control" let-isEditing="isEditing">
   <div class="input-group">
     <div class="input-group-addon">$</div>
     <input type="number"
       [formControl]="customControl"
-      [attr.disabled]="!isEditing || null" 
+      [attr.disabled]="!isEditing || null"
       class="form-control"
-      style="text-align:right" 
-      id="exampleInputAmount" 
+      style="text-align:right"
+      id="exampleInputAmount"
       placeholder="Amount" />
     <div class="input-group-addon">.00</div>
   </div>