Open-ILS/src/eg2/src/app/staff/reporter/simple/sr-field-chooser.component.html

   1 <div class="chooser-row">
   2
   3 <ngb-accordion #fieldChooser="ngbAccordion" [closeOthers]="true" class="col-md-4">
   4   <ngb-panel *ngIf="fieldType === 'filter'" id="suggested_filters" title="Suggested Filters" i18n-title>
   5     <ng-template ngbPanelContent>
   6       <ng-container *ngFor="let f of allFields">
   7         <eg-sr-field
   8           *ngIf="f.suggest_filter"
   9           [field]=f
  10           [withSelect]=true
  11           [selected]="fieldIsSelected(f)"
  12           (selectEvent)="toggleSelect(f)"
  13         >
  14         </eg-sr-field>
  15       </ng-container>
  16     </ng-template>
  17   </ngb-panel>
  18   <ngb-panel *ngFor="let g of fieldGroups" id="{{g.name}}" title="{{g.label}}">
  19     <ng-template ngbPanelContent>
  20       <ng-container *ngFor="let f of g.members">
  21         <eg-sr-field
  22           *ngIf="!hideField(f)"
  23           [field]=f
  24           [withSelect]=true
  25           [selected]="fieldIsSelected(f)"
  26           (selectEvent)="toggleSelect(f)"
  27         >
  28         </eg-sr-field>
  29       </ng-container>
  30     </ng-template>
  31   </ngb-panel>
  32   <ngb-panel *ngIf="allFields.length > 0" id="all" title="All Fields" i18n-title>
  33     <ng-template ngbPanelContent>
  34       <ng-container *ngFor="let f of allFields">
  35         <eg-sr-field
  36           *ngIf="!hideField(f) && !f.virtual"
  37           [field]=f
  38           [withSelect]=true
  39           [selected]="fieldIsSelected(f)"
  40           (selectEvent)="toggleSelect(f)"
  41         >
  42         </eg-sr-field>
  43       </ng-container>
  44     </ng-template>
  45   </ngb-panel>
  46 </ngb-accordion>
  47
  48 <ngb-accordion #selectedList="ngbAccordion" activeIds="display-field-list,sort-field-list" class="col-md-8">
  49   <ngb-panel id="display-field-list" *ngIf="fieldType === 'filter' && listFields.length > 0">
  50     <ng-template ngbPanelHeader let-opened=true>
  51       <div class="d-flex align-items-center justify-content-between">
  52         <h5 class="m-0" i18n>Fields Selected for Display</h5>
  53       </div>
  54     </ng-template>
  55     <ng-template ngbPanelContent>
  56       <span *ngFor="let f of listFields; index as idx" class="sr-chooser-display-list">{{f.alias}}{{idx === (listFields.length - 1) ? '' : ', '}}</span>
  57     </ng-template>
  58   </ngb-panel>
  59   <ngb-panel id="sort-field-list">
  60     <ng-template ngbPanelHeader let-opened=true>
  61       <div class="d-flex align-items-center justify-content-between">
  62         <h5 *ngIf="fieldType === 'display'" class="m-0" i18n>Field Display Order</h5>
  63         <h5 *ngIf="fieldType === 'filter'" class="m-0" i18n>Filter Fields and Values</h5>
  64       </div>
  65     </ng-template>
  66     <ng-template ngbPanelContent>
  67
  68       <ng-container *ngIf="fieldType === 'display'">
  69         <ng-container *ngFor="let f of selectedFields; index as idx">
  70           <eg-sr-field
  71             *ngIf="!hideField(f)"
  72             [field]=f
  73             [withDeselect]=true
  74             [withAlias]=true
  75             [withTransforms]=true
  76             [withUpDown]=true
  77             [disableUp]="idx === 0"
  78             [disableDown]="idx === (selectedFields.length - 1)"
  79             (fieldChange)="updateField($event)"
  80             (deselectEvent)="toggleSelect(f)"
  81             (upEvent)="moveUp(idx)"
  82             (downEvent)="moveDown(idx)"
  83           >
  84           </eg-sr-field>
  85         </ng-container>
  86       </ng-container>
  87
  88       <ng-container *ngIf="fieldType === 'filter'">
  89         <ng-container *ngFor="let f of selectedFields; index as idx">
  90           <eg-sr-field
  91             *ngIf="!hideField(f)"
  92             [field]=f
  93             [withDeselect]=true
  94             [withTransforms]=true
  95             [withOperators]=true
  96             [withValueInput]=true
  97             (fieldChange)="updateField($event)"
  98             (deselectEvent)="toggleSelect(f)"
  99           >
 100           </eg-sr-field>
 101         </ng-container>
 102       </ng-container>
 103
 104     </ng-template>
 105   </ngb-panel>
 106 </ngb-accordion>
 107
 108 </div>