Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html

   1 <ng-template #dialogContent>
   2   <div class="modal-header">
   3     <h4 class="modal-title" i18n>Grid Columns Configuration</h4>
   4     <button type="button" class="btn-close btn-close-white"
   5       i18n-aria-label aria-label="Close" (click)="close()"></button>
   6   </div>
   7   <div class="modal-body eg-grid-column-config-dialog">
   8
   9     <div class="row">
  10       <div class="col-lg-1 eg-grid-header-cell" i18n>Visible</div>
  11       <div class="col-lg-3 eg-grid-header-cell" i18n>Column Name</div>
  12       <div class="col-lg-1 eg-grid-header-cell" i18n>Move Up</div>
  13       <div class="col-lg-1 eg-grid-header-cell" i18n>Move Down</div>
  14       <div class="col-lg-2 eg-grid-header-cell" i18n>First Visible</div>
  15       <div class="col-lg-2 eg-grid-header-cell" i18n>Last Visible</div>
  16       <div class="col-lg-2 eg-grid-header-cell"
  17         *ngIf="columnSet.isMultiSortable" i18n>Sort Priority</div>
  18     </div>
  19     <div class="row pt-1" *ngFor="let col of columnSet.columns"
  20       [ngClass]="{visible : col.visible}">
  21       <div class="col-lg-1">
  22         <button type="button" class="btn" (click)="toggleVisibility(col)">
  23           <span *ngIf="col.visible" class="badge badge-success" aria-label="Visible" i18n-aria-label>&#x2713;</span>
  24           <span *ngIf="!col.visible" class="badge badge-warning" aria-label="Hidden" i18n-aria-label>&#x2717;</span>
  25         </button>
  26       </div>
  27       <div class="col-lg-3">
  28         <button type="button" class="btn" (click)="toggleVisibility(col)">{{col.label}}</button>
  29       </div>
  30       <div class="col-lg-1">
  31         <button type="button" class="btn" title="Move column up" i18n-title aria-label="Move column up" i18n-aria-label
  32           (click)="columnSet.moveColumn(col, -1)">
  33           <span class="material-icons" aria-hidden="true">arrow_upward</span>
  34         </button>
  35       </div>
  36       <div class="col-lg-1">
  37         <button type="button" class="btn" title="Move column down" i18n-title aria-label="Move column down" i18n-aria-label
  38           (click)="columnSet.moveColumn(col, 1)">
  39           <span class="material-icons" aria-hidden="true">arrow_downward</span>
  40         </button>
  41       </div>
  42       <div class="col-lg-2">
  43         <button type="button" class="btn" title="Make first visible" i18n-title aria-label="Make first visible" i18n-aria-label
  44           (click)="columnSet.moveColumn(col, -10000)">
  45           <span class="material-icons" aria-hidden="true">vertical_align_top</span>
  46         </button>
  47       </div>
  48       <div class="col-lg-2">
  49         <button type="button" class="btn" title="Make last visible" i18n-title aria-label="Make last visible" i18n-aria-label
  50           (click)="columnSet.moveColumn(col, 10000)">
  51           <span class="material-icons" aria-hidden="true">vertical_align_bottom</span>
  52         </button>
  53       </div>
  54       <div class="col-lg-2" *ngIf="columnSet.isMultiSortable">
  55         <div *ngIf="col.isMultiSortable">
  56           <input type='number' [(ngModel)]="col.sort"
  57             title="Sort Priority / Direction" i18n-title style='width:2.8em'/>
  58         </div>
  59       </div>
  60
  61     </div>
  62   </div>
  63   <div class="modal-footer">
  64     <button type="button" class="btn btn-info" (click)="columnSet.moveVisibleToFront()">
  65       Move Visible Columns To Top
  66     </button>
  67     <button type="button" class="btn btn-success ms-2"
  68       (click)="close('confirmed')" i18n>Close</button>
  69   </div>
  70 </ng-template>