[sidebar] template for showing and editing a organization unit
authorErik Haider Forsén <erikhf@ifi.uio.no>
Thu, 26 Nov 2015 09:05:18 +0000 (10:05 +0100)
committerErik Haider Forsén <erikhf@ifi.uio.no>
Thu, 26 Nov 2015 09:05:18 +0000 (10:05 +0100)
src/components/sidebar/sidebar.html
src/components/sidebar/sidebar.ts

index 875e2c2..f91ea6b 100644 (file)
@@ -1,19 +1,77 @@
 <div>
     <div *ng-if="activeOrgUnit">
-        <div class="form-group">
-            <label>Name</label>
-            <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.name" [disabled]="!editmode">
-        </div>
-        <div class="form-group">
-            <label>Shortname</label>
-            <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.shortName" [disabled]="!editmode">
-        </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" [disabled]="!editmode">
+        <form *ng-if="editmode">
+            <div class="form-group">
+                <label>Name</label>
+                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.name">
             </div>
-        </fieldset>
-        <button class="btn btn-default" (click)="editmode = !editmode">Edit</button>
+            <div class="form-group">
+                <label>Short Name</label>
+                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.shortName">
+            </div>
+            <div class="form-group">
+                <label>Description</label>
+                <textarea class="form-control" [(ng-model)]="activeOrgUnit.description" rows="3"></textarea>
+            </div>
+            <div class="form-group">
+                <label>Code</label>
+                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.code">
+            </div>
+            <div class="form-group">
+                <label>Opening Date</label>
+                <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.openingDate">
+            </div>
+            <div class="form-group">
+                <label>Closed Date</label>
+                <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.closedDate">
+            </div>
+            <div class="form-group">
+                <label>URL</label>
+                <input class="form-control" type="url" [(ng-model)]="activeOrgUnit.closedDate">
+            </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">
+                </div>
+            </fieldset>
+        </form>
+        <section *ng-if="!editmode">
+            <label for="actOrgUnitName">Name</label>
+
+            <p id="actOrgUnitName">{{(activeOrgUnit.name) || "[None]"}}</p>
+
+            <label for="actOrgUnitShortName">Short Name</label>
+
+            <p id="actOrgUnitShortName">{{(activeOrgUnit.shortName)||["None"]}}</p>
+
+            <label for="actOrgUnitDescription">Description</label>
+
+            <p id="actOrgUnitDescription">{{(activeOrgUnit.description)||"None"}}</p>
+
+            <label for="actOrgUnitCode">Code</label>
+
+            <p id="actOrgUnitCode">{{(activeOrgUnit.code)||["None"]}}</p>
+
+            <label for="actOrgUnitOpeningDate">Opening Date</label>
+
+            <p id="actOrgUnitOpeningDate">{{activeOrgUnit.openingDate||["None"]}}</p>
+
+            <label for="actOrgUnitClosingDate">Closed Date</label>
+
+            <p id="actOrgUnitClosingDate">{{activeOrgUnit.closingDate||["None"]}}</p>
+
+            <label for="actOrgUnitURL">Url</label>
+
+            <p id="actOrgUnitURL">{{(activeOrgUnit.url) ||["None"]}}</p>
+
+            <label>Group(s)</label>
+            <ul *ng-for="#group of activeOrgUnit.organisationUnitGroups">
+                <li>{{group.name}}</li>
+            </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
index 704268c..736b599 100644 (file)
@@ -14,7 +14,7 @@ export class Sidebar {
 
     constructor(http:Http){
         this.http = http;
-        editmode = false;
+        this.editmode = false;
     }
 
     update(orgunitId){
@@ -23,5 +23,9 @@ export class Sidebar {
             .map(res => res.json())
             .subscribe(res => this.activeOrgUnit = res)
     }
+
+    save(){
+        console.log("YOlo");
+    }
 }