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>