lp1852321 Angular Shelving Location Groups UI Port
[Evergreen.git] / 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>