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

   1 <eg-staff-banner bannerText="Shelving Location Groups" i18n-bannerText>
   2 </eg-staff-banner>
   3
   4 <div class="row justify-content-between mb-3">
   5     <div class="col-md-6">
   6         <div class="form-inline hstack mb-3">
   7             <label for="context-ou" class="form-label me-3" i18n>Shelving Location Groups for:</label>
   8             <eg-org-select domId="context-ou" (onChange)="orgOnChange($event)" [initialOrgId]="1"></eg-org-select>
   9         </div>
  10     </div>
  11     <div class="col-md-6 text-end">
  12         <button type="button" class="btn btn-primary ms-auto mb-3"
  13             (click)="hasPermission ? createLocationGroup() : null"
  14             [ngClass]="{'disabled': !hasPermission}" i18n>
  15             New Location Group
  16         </button>
  17     </div>
  18 </div>
  19 <!--
  20 <pre>{{shelvingLocations | json}}</pre>
  21 -->
  22 <div class="row">
  23     <div class="col-lg-6">
  24         <h2 i18n>Location Groups</h2>
  25         <p i18n>Location groups can be re-ordered by dragging and dropping.</p>
  26
  27         <table class="table table-sm">
  28             <thead>
  29                 <tr>
  30                     <th scope="col" i18n="Shelving location groups">Name</th>
  31                     <th scope="col" i18n="Shelving location groups" class="numeric">Position</th>
  32                     <th scope="col" i18n="Shelving location groups">OPAC Visible?</th>
  33                     <th scope="col" i18n="Shelving location groups" class="text-end">Actions</th>
  34                 </tr>
  35             </thead>
  36             <tbody>
  37                 <tr *ngFor="let group of locationGroups; let dragIndex = index"
  38                     class="locationGroup"
  39                     [ngClass]="{'table-active': group.selected,
  40                         'drag-target': group.id() === dragTarget?.id()}"
  41                     draggable="true"
  42                     (dragstart)="onDragStart($event, group)"
  43                     (dragenter)="onDragEnter($event, group)"
  44                     (dragover)="onDragOver($event)"
  45                     (drop)="onDragDrop($event, dragIndex)">
  46                     <th scope="row" id="locationGroup-{{group.id()}}">
  47                         <button type="button" class="btn btn-link text-start" title="Manage entries for {{group.name}}" i18n-title
  48                         (click)="changeSelectedLocationGroup(group)">
  49                             {{group.name}}
  50                         </button>
  51                     </th>
  52                     <td class="numeric">
  53                         {{group.posit}}
  54                     </td>
  55                     <td *ngIf="group.isVisible" class="text-success fw-bold" i18n="Shelving location groups">Visible</td>
  56                     <td *ngIf="!group.isVisible" class="text-secondary" i18n="Shelving location groups">Not Visible</td>
  57                     <td class="actions text-end">
  58                         <div class="btn-group">
  59                             <button type="button" *ngIf="hasPermission"
  60                                 class="btn btn-link"
  61                                 attr.aria-describedby="locationGroup-{{group.id()}}"
  62                                 title="Edit {{group.name}}" i18n-title
  63                                 (click)="editLocationGroup(group)"
  64                                 i18n="Shelving location groups">
  65                                 Edit
  66                             </button>
  67
  68                             <button type="button" *ngIf="hasPermission"
  69                                 class="btn btn-link text-danger"
  70                                 attr.aria-describedby="locationGroup-{{group.id()}}"
  71                                 title="Delete {{group.name}}" i18n-title
  72                                 (click)="deleteLocationGroup(group)"
  73                                 i18n="Shelving location groups">
  74                                 Delete
  75                             </button>
  76
  77                             <button type="button" class="btn btn-link btn-move text-dark"
  78                                 (keydown.arrowup)="moveUp($event, group, dragIndex)"
  79                                 (keydown.arrowdown)="moveDown($event, group, dragIndex)"
  80                                 attr.aria-label="Move {{group.name}}" i18n-aria-label
  81                                 id="moveGroup{{group.id()}}">
  82                                 <span class="material-icons mat-icon-in-button" aria-hidden="true"
  83                                     title="Move {{group.name}}" i18n-title>open_with</span>
  84                             </button>
  85                         </div>
  86                     </td>
  87                 </tr>
  88             </tbody>
  89         </table>
  90
  91     </div>
  92     <div class="col-lg-6">
  93         <div class="row">
  94             <div class="col-sm-6">
  95                 <h2>
  96                     <span i18n>Shelving Locations in Group:</span>
  97                     <span *ngIf="selectedLocationGroupId"> {{selectedLocationGroup.name}}</span>
  98                 </h2>
  99                 <button type="button" class="btn btn-destroy mx-auto mb-1" (click)="removeEntries()"
 100                     i18n="Shelving location group entries">
 101                     Remove {{removeEntryCount()}} from group &rarr;
 102                 </button>
 103                 <ul class="list-unstyled list-striped list-border mt-4">
 104                     <li *ngFor="let group of groupEntries" class="border px-2 py-1">
 105                         <div class="form-check">
 106                             <input
 107                                 type="checkbox"
 108                                 class="form-check-input"
 109                                 [(ngModel)]="group.checked"
 110                                 [checked]="group.checked"
 111                                 id="{{group.label}}" />
 112                             <label class="form-label form-check-label m-0" for="{{group.label}}">
 113                                 {{group.shortname}} &nbsp; {{group.name}}
 114                             </label>
 115                         </div>
 116                     </li>
 117                 </ul>
 118                 <button *ngIf="groupEntries.length" type="button" class="btn btn-destroy mx-auto mb-1" (click)="removeEntries()"
 119                     i18n="Shelving location group entries">
 120                     Remove {{removeEntryCount()}} from group &rarr;
 121                 </button>
 122             </div>
 123
 124             <div class="col-sm-6">
 125                 <h2 i18n>All Shelving Locations</h2>
 126                 <button type="button" class="btn btn-normal mb-1" (click)="addEntries()"
 127                     i18n="Shelving locations">
 128                     &larr; Add {{addEntryCount()}} to group
 129                 </button>
 130                 <ul class="list-unstyled list-striped list-border mt-4">
 131                     <li *ngFor="let location of shelvingLocations"
 132                         class="border px-2 py-1">
 133                         <div class="form-check">
 134                             <input
 135                             type="checkbox"
 136                             class="form-check-input"
 137                             [(ngModel)]="location.checked"
 138                             [checked]="location.checked"
 139                             id="{{location.label}}" />
 140                             <label class="form-label form-check-label m-0" for="{{location.label}}">
 141                                 {{location.shortname}} &nbsp; {{location.name}}
 142                             </label>
 143                         </div>
 144                     </li>
 145                 </ul>
 146                 <button type="button" class="btn btn-normal mb-1" (click)="addEntries()"
 147                     i18n="Shelving locations">
 148                     &larr; Add {{addEntryCount()}} to group
 149                 </button>
 150             </div>
 151         </div>
 152     </div>
 153 </div>
 154
 155
 156 <eg-fm-record-editor #editDialog hiddenFieldsList="id" idlClass="acplg"
 157     readonlyFields="owner"
 158     requiredFields="name,pos" [defaultNewRecord]="defaultNewRecord"></eg-fm-record-editor>
 159 <eg-string #editLocGroupSuccess i18n-text text="Edited Location Group"></eg-string>
 160 <eg-string #editLocGroupFailure i18n-text
 161     text="Error when trying to edit Location Group"></eg-string>
 162 <eg-string #addedGroupEntriesSuccess i18n-text text="Added to Group Entries"></eg-string>
 163 <eg-string #addedGroupEntriesFailure i18n-text
 164     text="Error when trying to add to Group Entries"></eg-string>
 165 <eg-string #removedGroupEntriesSuccess i18n-text
 166     text="Removed from Group Entries"></eg-string>
 167 <eg-string #removedGroupEntriesFailure i18n-text
 168     text="Error when trying to remove from Group Entries"></eg-string>
 169 <eg-string #changeOrderSuccess i18n-text text="Changed Location Group order"></eg-string>
 170 <eg-string #changeOrderFailure i18n-text
 171     text="Error when trying to change Location Group Order"></eg-string>