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

   1 <div class="sr-field-container">
   2
   3   <div class="sr-field{{ withSelect === true ? '-select' : '' }}" (click)="selectAction()">
   4
   5     <div *ngIf="withSelect" class="sr-field-select col-md-1">
   6       <input (change)="selectAction()" (click)="selectAction()" class="sr-checkbox" type="checkbox"
   7         id="chk{{field.name}}" checked="{{ selected === true ? 'checked' : '' }}" />
   8     </div>
   9
  10     <div *ngIf="withDeselect" class="sr-field-deselect col-md-1">
  11       <button class="btn btn-sm material-icon-button p-1 sr-checkbox" title="Un-Select Field" (click)="deselectAction()" title-i18n>
  12         <span class="material-icons">remove_circle_outline</span></button>
  13     </div>
  14
  15     <div *ngIf="withAlias" class="sr-field-name col-md-auto">
  16       <span class="sr-field-explainer" i18n>Name</span>
  17       <input class="form-control" type="textbox" [disabled]="!editAlias" [(ngModel)]="field.alias" />
  18       <span *ngIf="field.alias !== field.label" class="sr-field-explainer">({{field.label}})</span>
  19     </div>
  20     <div *ngIf="!withAlias" class="sr-field-name col-md-auto">
  21       <span *ngIf="withTransforms || withOperators || withValueInput" class="sr-field-explainer"><br /></span>
  22       <label *ngIf="withSelect" (click)="selectAction()" class="sr-field-label" for="chk{{field.name}}">{{field.label}}</label>
  23       <label *ngIf="!withSelect" class="sr-field-label">{{field.label}}</label>
  24     </div>
  25
  26     <div *ngIf="withTransforms || withOperators" class="sr-field-xform col-md-3">
  27
  28       <div *ngIf="withTransforms">
  29         <span class="sr-field-explainer" i18n>Transform</span>
  30         <select class="form-control" (change)="transformChange($event)" [disabled]="field.force_transform">
  31           <option *ngFor="let t of transforms" value="{{t.name}}" selected="{{ field.transform.name === t.name ? 'selected' : '' }}">
  32             <span *ngIf="t.name === 'Bare'" i18n>Raw Data</span>
  33             <span *ngIf="t.name === 'upper'" i18n>Upper Case</span>
  34             <span *ngIf="t.name === 'lower'" i18n>Lower Case</span>
  35             <span *ngIf="t.name === 'substring'" i18n>Substring</span>
  36             <span *ngIf="t.name === 'day_name'" i18n>Day Name</span>
  37             <span *ngIf="t.name === 'month_name'" i18n>Month Name</span>
  38             <span *ngIf="t.name === 'doy'" i18n>Day of Year</span>
  39             <span *ngIf="t.name === 'woy'" i18n>Week of Year</span>
  40             <span *ngIf="t.name === 'moy'" i18n>Month of Year</span>
  41             <span *ngIf="t.name === 'qoy'" i18n>Quarter of Year</span>
  42             <span *ngIf="t.name === 'dom'" i18n>Day of Month</span>
  43             <span *ngIf="t.name === 'dow'" i18n>Day of Week</span>
  44             <span *ngIf="t.name === 'year_trunc'" i18n>Year</span>
  45             <span *ngIf="t.name === 'month_trunc'" i18n>Month</span>
  46             <span *ngIf="t.name === 'date_trunc'" i18n>Date</span>
  47             <span *ngIf="t.name === 'hour_trunc'" i18n>Hour</span>
  48             <span *ngIf="t.name === 'quarter'" i18n>Quarter</span>
  49             <span *ngIf="t.name === 'months_ago'" i18n>Months Ago</span>
  50             <span *ngIf="t.name === 'hod'" i18n>Hour of Day</span>
  51             <span *ngIf="t.name === 'quarters_ago'" i18n>Quarters Ago</span>
  52             <span *ngIf="t.name === 'age'" i18n>Age</span>
  53             <span *ngIf="t.name === 'first'" i18n>First Value</span>
  54             <span *ngIf="t.name === 'last'" i18n>Last Value</span>
  55             <span *ngIf="t.name === 'min'" i18n>Minimum Value</span>
  56             <span *ngIf="t.name === 'max'" i18n>Maximum Value</span>
  57             <span *ngIf="t.name === 'count'" i18n>Count</span>
  58             <span *ngIf="t.name === 'count_distinct'" i18n>Count</span>{{ '' // This is currently the only Count transform offered; if that's changed this will need its 'Distinct' back. }}
  59             <span *ngIf="t.name === 'sum'" i18n>Sum</span>
  60             <span *ngIf="t.name === 'average'" i18n>Average</span>
  61           </option>
  62         </select>
  63       </div>
  64
  65       <div *ngIf="withOperators">
  66         <span class="sr-field-explainer" i18n>Operator</span>
  67         <select class="form-control" (change)="operatorChange($event)" [disabled]="field.force_operator">
  68           <option *ngFor="let o of operators" value="{{o.name}}" selected="{{ field.operator.name === o.name ? 'selected' : '' }}">
  69             <span *ngIf="o.name === '= any'" i18n>Equals</span> {{ '' // this and the next are used for bools only }}
  70             <span *ngIf="o.name === '<> any'" i18n>Does Not Equal</span>
  71             <span *ngIf="o.name === '='" i18n>Equals</span>
  72             <span *ngIf="o.name === 'like'" i18n>Contains Matching Substring (Case Sensitive)</span>{{ '' // This is on hiatus along with non-distinct counting }}
  73             <span *ngIf="o.name === 'ilike'" i18n>Contains String</span>
  74             <span *ngIf="o.name === '>' && (field.transform.final_datatype || field.datatype) === 'timestamp'" i18n>After</span>
  75             <span *ngIf="o.name === '>' && (field.transform.final_datatype || field.datatype) !== 'timestamp'" i18n>Greater Than</span>
  76             <span *ngIf="o.name === '>=' && (field.transform.final_datatype || field.datatype) === 'timestamp'" i18n>On or After</span>
  77             <span *ngIf="o.name === '>=' && (field.transform.final_datatype || field.datatype) !== 'timestamp'" i18n>Greater Than or Equal to</span>
  78             <span *ngIf="o.name === '<' && (field.transform.final_datatype || field.datatype) === 'timestamp'" i18n>Before</span>
  79             <span *ngIf="o.name === '<' && (field.transform.final_datatype || field.datatype) !== 'timestamp'" i18n>Less Than</span>
  80             <span *ngIf="o.name === '<=' && (field.transform.final_datatype || field.datatype) === 'timestamp'" i18n>On or Before</span>
  81             <span *ngIf="o.name === '<=' && (field.transform.final_datatype || field.datatype) !== 'timestamp'" i18n>Less Than or Equal to</span>
  82             <span *ngIf="o.name === 'in'" i18n>In List</span>
  83             <span *ngIf="o.name === 'not in'" i18n>Not In List</span>
  84             <span *ngIf="o.name === 'between'" i18n>Between</span>
  85             <span *ngIf="o.name === 'not between'" i18n>Not Between</span>
  86             <span *ngIf="o.name === 'is'" i18n>Is Null</span>
  87             <span *ngIf="o.name === 'is not'" i18n>Is Not Null</span>
  88             <span *ngIf="o.name === 'is blank'" i18n>Is Null or Blank</span>
  89             <span *ngIf="o.name === 'is not blank'" i18n>Is Not Null or Blank</span>
  90           </option>
  91         </select>
  92       </div>
  93
  94     </div>
  95
  96     <div *ngIf="withValueInput" class="sr-field-value col-md-5">
  97       <span class="sr-field-explainer" i18n>Filter value</span>
  98
  99       <div *ngIf="field.operator.name.indexOf('in') > -1">
 100         <div [ngSwitch]="field.transform.final_datatype || field.datatype">
 101           <div *ngSwitchCase="'link'">
 102             <eg-multi-select [linkedLibraryLabel]="field.org_filter_field" [idlBaseQuery]="linkedIdlBaseQuery" [idlClass]="field.class" [startValue]="getBracketListValue(field.filter_value)"
 103               (onChange)="setBracketListValue($event)">
 104             </eg-multi-select>
 105           </div>
 106           <div *ngSwitchCase="'org_unit'">
 107             <eg-multi-select [idlClass]="'aou'" [startValue]="getBracketListValue(field.filter_value)"
 108               (onChange)="setBracketListValue($event)">
 109             </eg-multi-select>
 110           </div>
 111           <div *ngSwitchDefault>
 112             <eg-text-multi-select [startValue]="field.filter_value"
 113               (onChange)="setSingleValue($event)">
 114             </eg-text-multi-select>
 115           </div>
 116         </div>
 117       </div>
 118
 119       <div *ngIf="field.operator.name.indexOf('between') > -1">
 120         <div [ngSwitch]="field.transform.final_datatype || field.datatype">
 121           <div *ngSwitchCase="'interval'">
 122             <eg-interval-input [initialValue]="field.filter_value[0]" (onChange)="firstBetweenValue($event)"></eg-interval-input>
 123             <span i18n>and</span>
 124             <eg-interval-input [initialValue]="field.filter_value[1]" (onChange)="secondBetweenValue($event)"> </eg-interval-input>
 125           </div>
 126           <div *ngSwitchCase="'timestamp'">
 127             <eg-date-select [initialIso]="field.filter_value[0]" (onChangeAsIso)="firstBetweenValue($event)"></eg-date-select>
 128             <span i18n>and</span>
 129             <eg-date-select [initialIso]="field.filter_value[1]" (onChangeAsIso)="secondBetweenValue($event)"></eg-date-select>
 130           </div>
 131           <div *ngSwitchCase="'link'">{{ '' }}</div>
 132           <div *ngSwitchCase="'org_unit'">{{ '' }}</div>
 133           <div *ngSwitchCase="'bool'">{{ '' }}</div>
 134           <div *ngSwitchDefault>
 135             <input class="form-control" type="textbox" value="{{field.filter_value[0]}}" (change)="firstBetweenValue($event.target.value)" />
 136             <span i18n>and</span>
 137             <input class="form-control" type="textbox" value="{{field.filter_value[1]}}" (change)="secondBetweenValue($event.target.value)" />
 138           </div>
 139         </div>
 140       </div>
 141
 142       <div *ngIf="field.operator.name.indexOf('between') === -1 && field.operator.name.indexOf('in') === -1 && field.operator.name.indexOf('is') === -1">
 143         <div [ngSwitch]="field.transform.final_datatype || field.datatype">
 144           <div *ngSwitchCase="'org_unit'">
 145             <eg-org-family-select
 146               (onChange)="setOrgFamilyValue($event)"
 147               [selectedOrgId]="field._org_family_primaryOrgId"
 148               [ancestorSelectorChecked]="field._org_family_includeAncestors"
 149               [descendantSelectorChecked]="field._org_family_includeDescendants">
 150             </eg-org-family-select>
 151           </div>
 152           <div *ngSwitchCase="'link'">
 153             <eg-combobox i18n-placeholder placeholder="Select..." idlClass="{{field.class}}"
 154               id="{{field.name}}-{{field.class}}-{{field.key}}"
 155               [idlBaseQuery]="linkedIdlBaseQuery"
 156               [idlIncludeLibraryInLabel]="field.org_filter_field"
 157               [asyncSupportsEmptyTermClick]="true"
 158               [selectedId]="field.filter_value"
 159               (onChange)="setSingleValue($event[field.key])">
 160             </eg-combobox>
 161           </div>
 162           <div *ngSwitchCase="'timestamp'">
 163             <eg-date-select [initialIso]="field.filter_value" (onChangeAsIso)="setSingleValue($event)"></eg-date-select>
 164           </div>
 165           <div *ngSwitchCase="'interval'">
 166             <eg-interval-input [initialValue]="field.filter_value" (onChange)="setSingleValue($event)"></eg-interval-input>
 167           </div>
 168           <div *ngSwitchCase="'bool'">
 169             <select class="form-control" (change)="setSingleValue($event.target.value)">
 170               <option selected="{{ !field.filter_value ? 'selected' : '' }}" disabled="disabled" i18n>Select one</option>
 171               <option value="{t}" selected="{{ field.filter_value === '{t}' ? 'selected' : '' }}" i18n>True</option>
 172               <option value="{f}" selected="{{ field.filter_value === '{f}' ? 'selected' : '' }}" i18n>False</option>
 173               <option value="{t,f}" selected="{{ (field.filter_value && (field.filter_value !== '{t}' && field.filter_value !== '{f}') ) ? 'selected' : '' }}" i18n>Both</option>
 174             </select>
 175           </div>
 176
 177           <div *ngSwitchDefault>
 178             <input class="form-control" type="textbox" value="{{field.filter_value}}" (change)="setSingleValue($event.target.value)" />
 179           </div>
 180         </div>
 181       </div>
 182     </div>
 183
 184     <div *ngIf="withSortDirection" class="sr-field-sortdir col-md-5">
 185       <span class="sr-field-explainer" i18n>Direction</span>
 186       <select class="form-control" (change)="directionChange($event)">
 187
 188         <option *ngIf="field.datatype === 'timestamp'" value="ascending" selected="{{ field.direction === 'ascending' ? 'selected' : '' }}" i18n>Later dates at the bottom</option>
 189         <option *ngIf="field.datatype === 'number' || field.datatype === 'int' || field.datatype === 'float' || field.datatype === 'money'"
 190           value="ascending" selected="{{ field.direction === 'ascending' ? 'selected' : '' }}" i18n>Larger numbers at the bottom</option>
 191         <option *ngIf="field.datatype !== 'timestamp' && field.datatype !== 'number' && field.datatype !== 'int' && field.datatype !== 'float' && field.datatype !== 'money'"
 192           value="ascending" selected="{{ field.direction === 'ascending' ? 'selected' : '' }}" i18n>Ascending (1, 2, a, b, A, B)</option>
 193
 194         <option *ngIf="field.datatype === 'timestamp'" value="descending" selected="{{ field.direction === 'descending' ? 'selected' : '' }}" i18n>Later dates at the top</option>
 195         <option *ngIf="field.datatype === 'number' || field.datatype === 'int' || field.datatype === 'float' || field.datatype === 'money'"
 196           value="descending" selected="{{ field.direction === 'descending' ? 'selected' : '' }}" i18n>Larger numbers at the top</option>
 197         <option *ngIf="field.datatype !== 'timestamp' && field.datatype !== 'number' && field.datatype !== 'int' && field.datatype !== 'float' && field.datatype !== 'money'"
 198           value="descending" selected="{{ field.direction === 'descending' ? 'selected' : '' }}" i18n>Descending (B, A, b, a, 2, 1)</option>
 199
 200       </select>
 201     </div>
 202
 203     <div *ngIf="withUpDown" class="sr-field-updown col-md-2">
 204       <button (click)="upAction()" class="btn btn-outline-primary btn-sm" [disabled]="disableUp"><span class="material-icons">arrow_upward</span></button>
 205       <button (click)="downAction()" class="btn btn-outline-primary btn-sm" [disabled]="disableDown"><span class="material-icons">arrow_downward</span></button>
 206     </div>
 207
 208   </div>
 209
 210 </div>