Open-ILS/src/eg2/src/app/staff/admin/local/shelving_location_groups/shelving_location_groups.component.html

   1 <div class="row">
   2     <div style="font-size: 24px;" class="mr-3">Shelving Location Groups</div>
   3     <eg-org-select (onChange)="orgOnChange($event)" [initialOrgId]="1"></eg-org-select>
   4 </div>
   5 <div class="row">
   6     <p>Location groups can be re-ordered by dragging and dropping.</p>
   7 </div>
   8 <div style="height: 450px;">
   9     <div class="row h-100">
  10         <div class="col-lg-6 h-100">
  11             <eg-staff-banner bannerText="Location Groups" i18n-bannerText>
  12             </eg-staff-banner>
  13             <div class="text-center">
  14                 <div class="btn btn-outline-dark mb-3 ml-2" (click)="createLocationGroup()"
  15                     *ngIf="hasPermission">
  16                     New Location Group
  17                 </div>
  18                 <div class="btn btn-outline-dark mb-3 ml-2 disabled"
  19                     *ngIf="!hasPermission">
  20                     New Location Group
  21                 </div>
  22             </div>
  23             <div class="row">
  24                 <div class="col-lg-6 h-100 p-2 text-center">
  25                     <span class="align-middle font-weight-bold">Name</span>
  26                 </div>
  27                 <div class="col-lg-1 h-100 p-2 text-center">
  28                     <span class="align-middle font-weight-bold">Pos</span>
  29                 </div>
  30                 <div class="col-lg-2 h-100 p-2 text-center">
  31                     <span class="align-middle font-weight-bold">Visible?</span>
  32                 </div>
  33                 <div class="col-lg-3">
  34                 </div>
  35             </div>
  36
  37             <div *ngFor="let group of locationGroups; let dragIndex = index"
  38                 class="d-flex flex-row locationGroup"
  39                 onmouseover="this.style.cursor='move'"
  40                 draggable="true"
  41                 (dragstart)="onDragStart($event, group)"
  42                 (dragenter)="onDragEnter($event, group)"
  43                 (dragover)="onDragOver($event)"
  44                 (drop)="onDragDrop($event, dragIndex)">
  45                 <div *ngIf="group.selected"
  46                     class="col-lg-6 h-100 p-2 bg-warning border border-dark">
  47                     <span class="align-middle">{{group.name}}</span>
  48                 </div>
  49                 <div *ngIf="!group.selected" class="col-lg-6 h-100 p-2"
  50                     (click)='changeSelectedLocationGroup(group)'>
  51                     <span class="align-middle">{{group.name}}</span>
  52                 </div>
  53                 <div class="col-lg-1 h-100 p-2 text-center">
  54                     <span class="align-middle">{{group.posit}}</span>
  55                 </div>
  56                 <div class="col-lg-2 h-100 p-2 text-center">
  57                     <span *ngIf="group.isVisible" class="align-middle text-success">
  58                         Visible
  59                     </span>
  60                     <span *ngIf="!group.isVisible" class="align-middle text-danger">
  61                         Not Visible
  62                     </span>
  63                 </div>
  64                 <div class="col-lg-3 h-100 btn-group p-2">
  65                     <span *ngIf="hasPermission"
  66                         class="btn btn-sm btn-outline-dark mr-1"
  67                         (click)="editLocationGroup(group)">
  68                         Edit
  69                     </span>
  70                     <span *ngIf="!hasPermission"
  71                         class="btn btn-sm btn-outline-dark mr-1 disabled">
  72                         Edit
  73                     </span>
  74                     <span *ngIf="hasPermission"
  75                         class="btn btn-sm btn-danger mr-2"
  76                         (click)="deleteLocationGroup(group)">
  77                         Delete
  78                     </span>
  79                     <span *ngIf="!hasPermission"
  80                         class="btn btn-sm btn-danger mr-2 disabled">
  81                         Delete
  82                     </span>
  83                     <span class="align-middle">
  84                         <svg class="pt-2" xmlns="http://www.w3.org/2000/svg" width="24"
  85                             height="24" viewBox="0 0 24 24">
  86                             <path fill="none" d="M0 0h24v24H0V0z"/><path d="M11 18c0
  87                             1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2
  88                             .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9
  89                             2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2
  90                             .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9
  91                             2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9
  92                             2-2-.9-2-2-2z"/>
  93                         </svg>
  94                         <!-- As of Nov 2019 drag_indicator not included in library -->
  95                         <!-- <span class="material-icons pt-2">drag_indicator</span> -->
  96                     </span>
  97                 </div>
  98             </div>
  99         </div>
 100         <div class="col-lg-3 h-100">
 101             <eg-staff-banner bannerText="Group Entries" i18n-bannerText></eg-staff-banner>
 102             <div class="text-center">
 103                 <div class="btn btn-outline-dark mb-2" (click)="removeEntries()">
 104                     Remove &rarr;
 105                 </div>
 106             </div>
 107             <div class="row overflow-auto h-100">
 108                 <table class="table table-striped col-lg-10 offset-lg-1">
 109                     <thead></thead>
 110                     <tbody>
 111                         <tr *ngFor="let group of groupEntries" class="row">
 112                             <td>
 113                                 <input
 114                                 type="checkbox"
 115                                 class="mr-2"
 116                                 [(ngModel)]="group.checked"
 117                                 [checked]="group.checked"
 118                                 id="{{group.label}}" />
 119                                 <label for="{{group.label}}">
 120                                     {{group.shortname}} &nbsp; {{group.name}}
 121                                 </label>
 122                             </td>
 123                         </tr>
 124                     </tbody>
 125                 </table>
 126             </div>
 127         </div>
 128         <div class="col-lg-3 h-100">
 129             <eg-staff-banner bannerText="Shelving Locations" i18n-bannerText>
 130             </eg-staff-banner>
 131             <div class="text-center">
 132                 <div class="btn btn-outline-dark mb-2" (click)="addEntries()">
 133                     &larr; Add
 134                 </div>
 135             </div>
 136             <div  class="row overflow-auto h-100">
 137                 <table class="table table-striped col-lg-10 offset-lg-1">
 138                     <thead></thead>
 139                     <tbody>
 140                         <ng-container *ngFor="let location of shelvingLocations" >
 141                             <tr class="row" *ngIf="!location.hidden">
 142                                 <td>
 143                                     <input
 144                                     type="checkbox"
 145                                     class="mr-2"
 146                                     [(ngModel)]="location.checked"
 147                                     [checked]="location.checked"
 148                                     id="{{location.label}}" />
 149                                     <label for="{{location.label}}">
 150                                         {{location.shortname}} &nbsp; {{location.name}}
 151                                     </label>
 152                                 </td>
 153                             </tr>
 154                         </ng-container>
 155                     </tbody>
 156                 </table>
 157             </div>
 158         </div>
 159     </div>
 160 </div>
 161
 162 <eg-fm-record-editor #editDialog hiddenFieldsList="id" idlClass="acplg"
 163     readonlyFields="owner"
 164     requiredFields="name,pos" [defaultNewRecord]="defaultNewRecord"></eg-fm-record-editor>
 165 <eg-string #editLocGroupSuccess i18n-text text="Edited Location Group"></eg-string>
 166 <eg-string #editLocGroupFailure i18n-text
 167     text="Error when trying to edit Location Group"></eg-string>
 168 <eg-string #addedGroupEntriesSuccess i18n-text text="Added to Group Entries"></eg-string>
 169 <eg-string #addedGroupEntriesFailure i18n-text
 170     text="Error when trying to add to Group Entries"></eg-string>
 171 <eg-string #removedGroupEntriesSuccess i18n-text
 172     text="Removed from Group Entries"></eg-string>
 173 <eg-string #removedGroupEntriesFailure i18n-text
 174     text="Error when trying to remove from Group Entries"></eg-string>
 175 <eg-string #changeOrderSuccess i18n-text text="Changed Location Group order"></eg-string>
 176 <eg-string #changeOrderFailure i18n-text
 177     text="Error when trying to change Location Group Order"></eg-string>