[sidebar] Working on adding object
[u/erikhf/frm.git] / src / components / sidebar / sidebar.html
1 <div>
2     <div [hidden]="!active">
3         <form *ng-if="editmode" (ng-submit)="onSubmit()" #of="form">
4             <h3>{{activeOrgUnit.id?"Update Organizational Unit":"Add new Organizational Unit"}}</h3>
5             <div class="form-group">
6                 <label>Name</label>
7                 <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.name" required ng-control="name" #name="form">
8                 <p [hidden]="name.valid" class="alert alert-danger">
9                     Name is required
10                 </p>
11
12             </div>
13             <div class="form-group">
14                 <label>Short Name</label>
15                 <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.shortName" required ng-control="shortname" #shortname="form">
16                 <p [hidden]="shortname.valid" class="alert alert-danger">
17                     Short name is required
18                 </p>
19             </div>
20
21             <div class="form-group">
22                 <label>Description</label>
23                 <textarea class="form-control" [(ng-model)]="activeOrgUnit.description" rows="3"></textarea>
24             </div>
25             <div class="form-group">
26                 <label>Code</label>
27                 <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.code">
28             </div>
29             <div class="form-group">
30                 <label>Opening Date</label>
31                 <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.openingDate" required ng-control="openingdate" #openingDate="form">
32                 <p [hidden]="openingdate.valid" class="alert alert-danger">Opening date is required</p>
33             </div>
34             <div class="form-group">
35                 <label>Closed Date</label>
36                 <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.closedDate">
37             </div>
38             <div class="form-group">
39                 <label>URL</label>
40                 <input class="form-control" type="url" [(ng-model)]="activeOrgUnit.url" ng-control="url" #url="form">
41                 <p [hidden]="url.valid" class="alert alert-danger">The specified URL is not valid</p>
42             </div>
43             <fieldset class="form-group">
44                 <legend>Group(s)</legend>
45                 <div *ng-for="#group of activeOrgUnit.organisationUnitGroups">
46                     <input class="form-control" type="text" [(ng-model)]="group.name">
47                 </div>
48             </fieldset>
49             <button type="button" (click)="cancel()" class="btn btn-default">Cancel</button>
50             <button type="submit" [disabled]="!of.form.valid" class="btn btn-default">{{activeOrgUnit.id? "Update" :"Add"}}</button>
51
52         </form>
53
54         <section *ng-if="!editmode">
55             <label for="actOrgUnitName">Name</label>
56
57             <p id="actOrgUnitName">{{(activeOrgUnit.name) || "[None]"}}</p>
58
59             <label for="actOrgUnitShortName">Short Name</label>
60
61             <p id="actOrgUnitShortName">{{(activeOrgUnit.shortName)||["None"]}}</p>
62
63             <label for="actOrgUnitDescription">Description</label>
64
65             <p id="actOrgUnitDescription">{{(activeOrgUnit.description)||"None"}}</p>
66
67             <label for="actOrgUnitCode">Code</label>
68
69             <p id="actOrgUnitCode">{{(activeOrgUnit.code)||["None"]}}</p>
70
71             <label for="actOrgUnitOpeningDate">Opening Date</label>
72
73             <p id="actOrgUnitOpeningDate">{{activeOrgUnit.openingDate||["None"]}}</p>
74
75             <label for="actOrgUnitClosingDate">Closed Date</label>
76
77             <p id="actOrgUnitClosingDate">{{activeOrgUnit.closingDate||["None"]}}</p>
78
79             <label for="actOrgUnitURL">Url</label>
80
81             <p id="actOrgUnitURL">{{(activeOrgUnit.url) ||["None"]}}</p>
82
83             <label>Group(s)</label>
84             <ul *ng-for="#group of activeOrgUnit.organisationUnitGroups">
85                 <li>{{group.name}}</li>
86             </ul>
87             <button class="btn btn-default" (click)="editmode = !editmode">Edit</button>
88         </section>
89
90
91     </div>
92 </div>