[sidebar] Update existing organizational unit

diff --git a/src/components/sidebar/sidebar.html b/src/components/sidebar/sidebar.html
index f91ea6b4f075f707c01c3dcce82057b1b5f708fa..8c7e39f2e1b14f75652d5ba7b29f9bb7b89ef440 100644 (file)
--- a/src/components/sidebar/sidebar.html
+++ b/src/components/sidebar/sidebar.html
@@ -1,14 +1,22 @@
 <div>
     <div *ng-if="activeOrgUnit">
-        <form *ng-if="editmode">
+        <form *ng-if="editmode" (ng-submit)="onSubmit()" #of="form">
             <div class="form-group">
                 <label>Name</label>
-                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.name">
+                <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>
+
             </div>
             <div class="form-group">
                 <label>Short Name</label>
-                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.shortName">
+                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.shortName" required ng-control="shortname" #shortname="form">
+                <p [hidden]="shortname.valid" 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>
@@ -19,7 +27,8 @@
             </div>
             <div class="form-group">
                 <label>Opening Date</label>
-                <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.openingDate">
+                <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.openingDate" required 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>
@@ -27,7 +36,8 @@
             </div>
             <div class="form-group">
                 <label>URL</label>
-                <input class="form-control" type="url" [(ng-model)]="activeOrgUnit.closedDate">
+                <input class="form-control" type="url" [(ng-model)]="activeOrgUnit.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>
@@ -35,7 +45,10 @@
                     <input class="form-control" type="text" [(ng-model)]="group.name">
                 </div>
             </fieldset>
+            <button type="submit" [disabled]="!of.form.valid" class="btn btn-default">Save</button>
+
         </form>
+
         <section *ng-if="!editmode">
             <label for="actOrgUnitName">Name</label>
 
@@ -71,7 +84,6 @@
             </ul>
         </section>
         <button class="btn btn-default" (click)="editmode = !editmode">{{editmode ? "Cancel" : "Edit"}}</button>
-        <button *ng-if="editmode" class="btn btn-default" (click)="save()">Save</button>
 
     </div>
 </div>
\ No newline at end of file

diff --git a/src/components/sidebar/sidebar.ts b/src/components/sidebar/sidebar.ts
index 736b599f6fc5d023e39711dd711f914a461fdf74..f2e61427fef6dbab26a876eb2f7ff01bfc15444b 100644 (file)
--- a/src/components/sidebar/sidebar.ts
+++ b/src/components/sidebar/sidebar.ts
@@ -1,31 +1,53 @@
 import {Component, NgFor, NgIf, NgModel, CORE_DIRECTIVES,FORM_DIRECTIVES} from 'angular2/angular2';
-import {Http} from 'angular2/http';
+import {Http, Headers} from 'angular2/http';
 
 
 @Component({
     selector: 'mou-sidebar',
-    directives: [CORE_DIRECTIVES,FORM_DIRECTIVES,NgFor,NgModel,NgIf],
-    templateUrl: './components/sidebar/sidebar.html'
+    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor, NgModel, NgIf],
+    templateUrl: './components/sidebar/sidebar.html',
+    styles: [`
+        .ng-valid[required] {
+            border-left: 5px solid #42A948; /* green */
+        }
+        .ng-invalid {
+            border-left: 5px solid #a94442; /* red */
+        }
+    `]
 })
 export class Sidebar {
-    http: Http;
-    activeOrgUnit: Object;
-    editmode: boolean;
+    http:Http;
+    activeOrgUnit:Object;
+    editmode:boolean;
+    submitted = false;
 
-    constructor(http:Http){
+    constructor(http:Http) {
         this.http = http;
         this.editmode = false;
     }
 
-    update(orgunitId){
+    update(orgunitId) {
         console.log(orgunitId);
         this.http.get(dhisAPI + "/api/organisationUnits/" + orgunitId)
             .map(res => res.json())
             .subscribe(res => this.activeOrgUnit = res)
     }
 
-    save(){
-        console.log("YOlo");
+    onSubmit() {
+        this.editmode = false;
+
+        let headers = new Headers();
+        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), {
+                    headers: headers
+                })
+                .map(res => res.json())
+                .subscribe(res => console.log(res));
+        }
+
     }
 }