[sidebar] Using model-driven form instead of data-driven form
authorErik Haider Forsén <erikhf@ifi.uio.no>
Thu, 3 Dec 2015 14:07:48 +0000 (15:07 +0100)
committerErik Haider Forsén <erikhf@ifi.uio.no>
Thu, 3 Dec 2015 14:07:48 +0000 (15:07 +0100)
src/components/sidebar/sidebar.html
src/components/sidebar/sidebar.ts

index 1a0efa4..4c826e6 100644 (file)
 <div>
-    <div [hidden]="!active">
-        <form *ng-if="editmode" (ng-submit)="onSubmit()" #of="form">
-            <h3>{{activeOrgUnit.id?"Update Organizational Unit":"Add new Organizational Unit"}}</h3>
+    <div [hidden]="!active" class="form-background">
+        <form *ng-if="editmode" [(ng-form-model)]="form" (ng-submit)="onSubmit()" #of="form">
+            <h3>{{newObject?"Add new Organizational Unit":"Update Organizational Unit"}}</h3>
+
             <div class="form-group">
                 <label>Name</label>
-                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.name" required ng-control="name" #name="form">
-                <p [hidden]="name.valid" class="alert alert-danger">
-                    Name is required
-                </p>
+                <input class="form-control" type="text" ng-control="name">
+
 
             </div>
             <div class="form-group">
                 <label>Short Name</label>
-                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.shortName" required ng-control="shortname" #shortname="form">
-                <p [hidden]="shortname.valid" class="alert alert-danger">
+                <input class="form-control" type="text" ng-control="shortName" #shortname="form">
+
+                <p [hidden]="shortname.valid || shortname.untouched" class="alert alert-danger">
                     Short name is required
                 </p>
             </div>
 
             <div class="form-group">
                 <label>Description</label>
-                <textarea class="form-control" [(ng-model)]="activeOrgUnit.description" rows="3"></textarea>
+                <textarea class="form-control" ng-control="description" rows="3"></textarea>
             </div>
             <div class="form-group">
                 <label>Code</label>
-                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.code">
+                <input class="form-control" type="text" ng-control="code">
             </div>
+
             <div class="form-group">
                 <label>Opening Date</label>
-                <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.openingDate" required ng-control="openingdate" #openingDate="form">
+                <input class="form-control" type="date" ng-control="openingDate" #openingDate="form">
+
                 <p [hidden]="openingdate.valid" class="alert alert-danger">Opening date is required</p>
             </div>
             <div class="form-group">
                 <label>Closed Date</label>
-                <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.closedDate">
+                <input class="form-control" type="date" ng-control="closedDate">
             </div>
             <div class="form-group">
                 <label>URL</label>
-                <input class="form-control" type="url" [(ng-model)]="activeOrgUnit.url" ng-control="url" #url="form">
+                <input class="form-control" type="url" ng-control="url" #url="form">
+
                 <p [hidden]="url.valid" class="alert alert-danger">The specified URL is not valid</p>
             </div>
             <fieldset class="form-group">
-                <legend>Group(s)</legend>
-                <div *ng-for="#group of activeOrgUnit.organisationUnitGroups">
-                    <input class="form-control" type="text" [(ng-model)]="group.name">
+                <Legend>Coordinates</Legend>
+                <div class="form-group">
+                    <label>lat</label>
+                    <input class="form-control" type="number" ng-control="lat" #lat="form"/>
+                    <label>long</label>
+                    <input class="form-control" type="number" ng-control="lng" #lng="form"/>
                 </div>
+                <p>{{lat.valid}}</p>
+
+                <p>{{lng.valid}}</p>
+            </fieldset>
+
+
+            <fieldset class="form-group">
+                <legend>Contact information</legend>
+                <label>Contact person</label>
+                <input class="form-control" type="text" ng-control="contactPerson"/>
+                <label>Address</label>
+                <input class="form-control" type="text" ng-control="address"/>
+                <label>E-mail</label>
+                <input class="form-control" type="email" ng-control="email"/>
+                <label>Phone number</label>
+                <input class="form-control" type="text" ng-control="phoneNumber"/>
             </fieldset>
             <button type="button" (click)="cancel()" class="btn btn-default">Cancel</button>
-            <button type="submit" [disabled]="!of.form.valid" class="btn btn-default">{{activeOrgUnit.id? "Update" :"Add"}}</button>
+            <button type="submit" [disabled]="!of.form.valid" class="btn btn-default">{{newObject? "Add":"Update"}}
+            </button>
 
         </form>
 
+
         <section *ng-if="!editmode">
             <label for="actOrgUnitName">Name</label>
 
-            <p id="actOrgUnitName">{{(activeOrgUnit.name) || "[None]"}}</p>
+            <p id="actOrgUnitName">{{(form.controls.name.value) || "[None]"}}</p>
 
             <label for="actOrgUnitShortName">Short Name</label>
 
-            <p id="actOrgUnitShortName">{{(activeOrgUnit.shortName)||["None"]}}</p>
+            <p id="actOrgUnitShortName">{{(form.controls.shortName.value)||["None"]}}</p>
 
             <label for="actOrgUnitDescription">Description</label>
 
-            <p id="actOrgUnitDescription">{{(activeOrgUnit.description)||"None"}}</p>
+            <p id="actOrgUnitDescription">{{(form.controls.description.value)||"None"}}</p>
 
             <label for="actOrgUnitCode">Code</label>
 
-            <p id="actOrgUnitCode">{{(activeOrgUnit.code)||["None"]}}</p>
+            <p id="actOrgUnitCode">{{(form.controls.code.value)||["None"]}}</p>
 
             <label for="actOrgUnitOpeningDate">Opening Date</label>
 
-            <p id="actOrgUnitOpeningDate">{{activeOrgUnit.openingDate||["None"]}}</p>
+            <p id="actOrgUnitOpeningDate">{{form.controls.openingDate.value||["None"]}}</p>
 
             <label for="actOrgUnitClosingDate">Closed Date</label>
 
-            <p id="actOrgUnitClosingDate">{{activeOrgUnit.closingDate||["None"]}}</p>
+            <p id="actOrgUnitClosingDate">{{form.controls.closedDate.value||["None"]}}</p>
 
             <label for="actOrgUnitURL">Url</label>
 
-            <p id="actOrgUnitURL">{{(activeOrgUnit.url) ||["None"]}}</p>
+            <p id="actOrgUnitURL">{{(form.controls.url.value) ||["None"]}}</p>
 
-            <label>Group(s)</label>
-            <ul *ng-for="#group of activeOrgUnit.organisationUnitGroups">
-                <li>{{group.name}}</li>
-            </ul>
             <button class="btn btn-default" (click)="editmode = !editmode">Edit</button>
         </section>
 
-
     </div>
 </div>
\ No newline at end of file
index b79a400..0df2a26 100644 (file)
@@ -1,4 +1,4 @@
-import {Component, NgFor, NgIf, NgModel, CORE_DIRECTIVES,FORM_DIRECTIVES} from 'angular2/angular2';
+import {Component, NgFor, NgIf, NgModel, Control, ControlGroup, ControlArray, Validators, FormBuilder, CORE_DIRECTIVES,FORM_DIRECTIVES} from 'angular2/angular2';
 import {Http, Headers} from 'angular2/http';
 
 declare var zone: Zone;
@@ -8,33 +8,83 @@ declare var zone: Zone;
     directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor, NgModel, NgIf],
     templateUrl: './components/sidebar/sidebar.html',
     styles: [`
-        .ng-valid[required] {
+        .ng-valid.ng-dirty {
             border-left: 5px solid #42A948; /* green */
         }
         .ng-invalid {
             border-left: 5px solid #a94442; /* red */
         }
+        .form-background {
+            padding: 10px;
+            background: white;
+        }
     `]
 })
+
 export class Sidebar {
+    form: ControlGroup;
     http:Http;
-    activeOrgUnit:Object;
+    newObject: boolean;
     editmode:boolean;
     active: boolean;
-    constructor(http:Http) {
+
+    id: Control = new Control("");
+    name: Control = new Control("", Validators.required);
+    shortName: Control = new Control("",Validators.required);
+    description: Control = new Control("");
+    code: Control = new Control("");
+    openingDate: Control = new Control("",Validators.required);
+    closedDate: Control = new Control("");
+    url: Control = new Control("");
+    lat: Control = new Control("");
+    lng: Control = new Control("");
+    parent: Control = new Control("");
+    contactPerson: Control = new Control("");
+    address: Control = new Control("");
+    email: Control = new Control("");
+    phoneNumber: Control = new Control("");
+
+
+    constructor(http:Http, fb: FormBuilder) {
         this.http = http;
         this.editmode = false;
         this.active = false;
-        this.activeOrgUnit = new Object();
+        this.form = fb.group({
+            "id": this.id,
+            "name": this.name,
+            "shortName": this.shortName,
+            "description": this.description,
+            "code": this.code,
+            "openingDate": this.openingDate,
+            "closedDate": this.closedDate,
+            "url": this.url,
+            "lat": this.lat,
+            "lng": this.lng,
+            "parent": this.parent,
+            "contactPerson": this.contactPerson,
+            "address": this.address,
+            "email": this.email,
+            "phoneNumber": this.phoneNumber
+        });
     }
 
     update(orgunitId) {
         this.active = true;
+        this.newObject = false;
         this.http.get(dhisAPI + "/api/organisationUnits/" + orgunitId)
             .map(res => res.json())
-            .subscribe(res => this.activeOrgUnit = res)
+            .subscribe(res => this.updateValues(res))
     }
 
+    updateValues(res){
+        for(control in this.form.controls){
+            if(res[control] !== undefined) {
+                this.form.controls[control].updateValue(res[control]);
+            }
+            else
+                this.form.controls[control].updateValue("");
+        }
+    }
     onSubmit() {
         this.editmode = false;
 
@@ -42,36 +92,66 @@ export class Sidebar {
         headers.append('Accept', 'application/json');
         headers.append('Content-Type', 'application/json');
 
-        if (this.activeOrgUnit.id) {
-            this.http.put(dhisAPI + "/api/organisationUnits/" + this.activeOrgUnit.id, JSON.stringify(this.activeOrgUnit), {
+        let jsonObject = this.form.value;
+
+        $.each(jsonObject, function(key, value){
+            if (value === "" || value === null){
+                delete jsonObject[key];
+            }
+        });
+
+
+
+        console.log(this.form.value);
+
+        if (this.newObject) {
+            jsonObject.parent = {};
+            jsonObject.parent.id = this.form.controls.parent.value;
+            jsonObject.featureType="POINT";
+            jsonObject.coordinates="[" + this.form.controls.lat.value + ","+this.form.controls.lng.value+"]";
+            delete jsonObject["lat"];
+            delete jsonObject["lng"];
+            this.http.post(dhisAPI + "/api/organisationUnits/", JSON.stringify(jsonObject), {
                     headers: headers
                 })
                 .map(res => res.json())
                 .subscribe(res => console.log(res));
+        }else{
+            this.http.put(dhisAPI + "/api/organisationUnits/" + this.form.controls.id.value, JSON.stringify(jsonObject),{
+                headers: headers
+            })
+            .map(res => res.json())
+            .subscribe(res => console.log(res));
         }
 
 
 
+
+        //console.log(this.form);
+
+
     }
 
     cancel(){
         this.editmode = false;
-        if(this.activeOrgUnit.id){
-            this.update(this.activeOrgUnit.id);
-        }else{
-            this.activeOrgUnit = new Object();
-        }
     }
 
-    addData(data){
-
-        this.active = true;
+    add(data){
+        this.newObject=true;
+        this.setActive();
         this.editmode = true;
         console.log(data);
-        this.activeOrgUnit = new Object();
-        this.activeOrgUnit.name = "Erik";
+
+        this.form.controls.lat.updateValue(data.location.lat);
+        this.form.controls.lng.updateValue(data.location.lng);
+        this.form.controls.parent.updateValue(data.parent);
+
         console.log("faen");
-        zone.afterTask();
+
+    }
+
+    setActive(){
+        this.active = true;
     }
 }