public/src/js/modules/core/directives/ms-advanced-search/ms-advanced-search.html/ms-advanced-search.html

   1 <div layout="column" class="advanced-search-container" flex>
   2   <div layout-margin>
   3     <md-radio-group
   4       ng-model="vm.options.matchType"
   5       class="md-primary"
   6       layout="row"
   7     >
   8       <md-radio-button value="$and" class="md-primary"
   9         >{{ 'DASHBOARDS.MEET_ALL_CONDITIONS' | translate }}
  10       </md-radio-button>
  11       <md-radio-button value="$or"
  12         >{{ 'DASHBOARDS.MEET_ANY_CONDITIONS' | translate }}</md-radio-button
  13       >
  14     </md-radio-group>
  15   </div>
  16
  17   <!-- ACTIVE CONDITIONS -->
  18   <div
  19     layout="row"
  20     ng-if="vm.options.conditions.length > 0"
  21     class="advanced-search-conditions"
  22   >
  23     <md-list>
  24       <md-list-item>
  25         <md-chips
  26           ng-model="vm.options.conditions"
  27           class="advanced-search-chips"
  28           readonly="true"
  29           md-removable="true"
  30           md-on-remove="vm.removeCondition()"
  31         >
  32           <md-chip-template ms-chip-color="{{ $chip.style }}">
  33             <md-menu
  34               md-offset="50 0"
  35               ng-class="{'no-click': vm.pendingCondition}"
  36             >
  37               <span>
  38                 <p class="filter-text">{{ $chip.name }}</p>
  39                 <em ng-show="$chip.operator" class="text-lowercase"
  40                   >{{ $chip.operator }}</em
  41                 >
  42                 <strong>{{ $chip.displayValue }}</strong>
  43                 <em ng-show="$chip.displayEndValue" class="text-lowercase"
  44                   >{{ 'DASHBOARDS.AND' | translate }}</em
  45                 >
  46                 <strong>{{ $chip.displayEndValue }}</strong>
  47               </span>
  48               <md-menu-content width="2" class="md-dense">
  49                 <md-menu-item ng-hide="$chip.disabled">
  50                   <md-button ng-click="vm.editCondition($chip)"
  51                     >Edit
  52                   </md-button>
  53                 </md-menu-item>
  54                 <md-menu-item>
  55                   <md-button ng-click="vm.setConditionStatus($chip)">
  56                     {{ $chip.disabled ? 'Enable' : 'Disable' }}
  57                   </md-button>
  58                 </md-menu-item>
  59               </md-menu-content>
  60             </md-menu>
  61           </md-chip-template>
  62           <button type="button" md-chip-remove class="md-primary remove-filter">
  63             <md-icon
  64               md-font-icon="icon-cancel"
  65               aria-label="Remove Filter"
  66             ></md-icon>
  67           </button>
  68         </md-chips>
  69       </md-list-item>
  70     </md-list>
  71   </div>
  72
  73   <!-- FILTERS -->
  74   <div layout="row">
  75     <div layout="row" class="advanced-search-bar" layout-margin flex>
  76       <!-- FIELD -->
  77       <md-input-container flex="35">
  78         <md-icon md-font-icon="icon-filter-variant"></md-icon>
  79         <md-select
  80           class="font-size-12"
  81           ng-model="vm.selectedField"
  82           ng-change="vm.onFieldChange()"
  83           placeholder="{{ 'DASHBOARDS.SELECT_FIELD' | translate }}"
  84           aria-label="Field"
  85         >
  86           <md-option ng-value="field" ng-repeat="field in vm.options.fields"
  87             >{{ field.name }}</md-option
  88           >
  89         </md-select>
  90       </md-input-container>
  91
  92       <!-- OPERATOR -->
  93       <md-input-container flex="30">
  94         <md-icon md-font-icon="icon-format-text"></md-icon>
  95         <md-select
  96           class="font-size-12"
  97           ng-model="vm.selectedOperator"
  98           ng-change="vm.onOperatorChange(oldValue)"
  99           ng-focus="oldValue=vm.selectedOperator"
 100           md-selected-text="vm.selectedOperator ? ('DASHBOARDS.' + vm.selectedOperator.translate | translate) : ('DASHBOARDS.SELECT_OPERATOR' | translate)"
 101           ng-disabled="!vm.selectedField"
 102           aria-label="Operator"
 103         >
 104           <md-option
 105             ng-value="operator"
 106             ng-repeat="operator in vm.availableOperators"
 107             ng-selected="vm.autoSelectOperator"
 108           >
 109             <div layout="row" class="operators-list">
 110               <span class="operator-symbol"> {{ operator.symbol }} </span>
 111               <span>
 112                 {{ 'DASHBOARDS.' + operator.translate | translate }}
 113               </span>
 114             </div>
 115           </md-option>
 116         </md-select>
 117       </md-input-container>
 118
 119       <!-- TEXT INPUT -->
 120       <md-input-container
 121         ng-if="!vm.selectedField.type || vm.selectedField.type === 'text'"
 122         class="no-errors"
 123         flex
 124       >
 125         <md-icon md-font-icon="icon-format-text"></md-icon>
 126         <input
 127           type="text"
 128           aria-label="Value"
 129           ng-model="vm.value"
 130           ng-change="vm.onValueChange()"
 131           ng-disabled="!vm.selectedField"
 132           ng-keydown="$event.keyCode == 13 && vm.isValidCondition && vm.handleKeyboardAction()"
 133           placeholder="{{ 'DASHBOARDS.VALUE' | translate }}"
 134         />
 135       </md-input-container>
 136       <!-- NUMERIC INPUT -->
 137       <div
 138         ng-if="vm.selectedField.type === 'number'"
 139         flex
 140         layout="row"
 141         layout-margin
 142         class="no-margin"
 143       >
 144         <md-input-container class="no-errors" flex>
 145           <md-icon md-font-icon="icon-numeric"></md-icon>
 146           <input
 147             type="number"
 148             aria-label="Value"
 149             ng-model="vm.value"
 150             ng-change="vm.onValueChange()"
 151             ng-disabled="!vm.selectedField"
 152             min="0"
 153             ng-keydown="$event.keyCode == 13 && vm.isValidCondition && vm.handleKeyboardAction()"
 154             placeholder="{{ vm.selectedOperator.type === '$between' ? 'DASHBOARDS.STARTING_VALUE' : 'DASHBOARDS.VALUE' | translate }}"
 155           />
 156         </md-input-container>
 157         <md-input-container
 158           class="no-errors"
 159           ng-if="vm.selectedOperator.type === '$between'"
 160           ng-class="{'md-input-invalid': !vm.isValidRange}"
 161           flex
 162         >
 163           <md-icon md-font-icon=" icon-numeric"> </md-icon>
 164           <input
 165             class="md-input"
 166             type="number"
 167             aria-label="Value"
 168             ng-model="vm.endRangeValue"
 169             ng-change="vm.checkRange()"
 170             ng-disabled="!vm.value"
 171             min="vm.value"
 172             ng-keydown="$event.keyCode == 13 && vm.isValidCondition && vm.handleKeyboardAction()"
 173             placeholder="{{ 'DASHBOARDS.ENDING_VALUE' | translate }}"
 174           />
 175           <div
 176             ng-if="!vm.isValidRange"
 177             class="md-input-message-animation md-input-messages-animation"
 178           >
 179             {{ ('DASHBOARDS.VALUE_RANGE_CHECK' | translate) + ' ' + vm.value }}
 180           </div>
 181         </md-input-container>
 182       </div>
 183       <!-- SELECT -->
 184       <md-input-container ng-if="vm.selectedField.type === 'select'" flex>
 185         <md-icon md-font-icon="icon-format-text"></md-icon>
 186         <md-select
 187           class="font-size-12"
 188           ng-model="vm.value"
 189           md-on-open="vm.getValues()"
 190           ng-change="vm.onValueChange()"
 191           ng-model-vm.options="{trackBy: '$value.id'}"
 192           ng-keydown="$event.keyCode == 13 && vm.isValidCondition && vm.handleKeyboardAction()"
 193           placeholder="{{ 'DASHBOARDS.VALUE' | translate }}"
 194           aria-label="Value"
 195         >
 196           <md-option ng-value="item" ng-repeat="item in vm.selectedField.values"
 197             >{{item.name}}
 198           </md-option>
 199         </md-select>
 200       </md-input-container>
 201       <!-- MULTISELECT -->
 202       <md-input-container ng-if="vm.selectedField.type === 'multiselect'" flex>
 203         <md-icon md-font-icon="icon-format-text"></md-icon>
 204         <md-select
 205           class="font-size-12"
 206           multiple
 207           ng-model="vm.value"
 208           md-on-open="vm.getValues()"
 209           ng-change="vm.onValueChange()"
 210           ng-model-vm.options="{trackBy: '$value.id'}"
 211           ng-keydown="$event.keyCode == 13 && vm.isValidCondition && vm.handleKeyboardAction()"
 212           placeholder="{{ 'DASHBOARDS.VALUE' | translate }}"
 213           aria-label="Value"
 214         >
 215           <md-option ng-value="item" ng-repeat="item in vm.selectedField.values"
 216             >{{item.name}}
 217           </md-option>
 218         </md-select>
 219       </md-input-container>
 220       <!-- DATE INPUT -->
 221       <div ng-if="vm.selectedField.type === 'date'" flex layout="row">
 222         <mdp-date-picker
 223           mdp-open-on-click
 224           ng-model="vm.value"
 225           ng-change="vm.onValueChange()"
 226           mdp-max-date="vm.maxDateRange"
 227           mdp-placeholder="{{ vm.selectedOperator.type === '$between' ? 'DASHBOARDS.STARTING_DATE' : 'DASHBOARDS.VALUE' | translate }}"
 228           ng-keydown="$event.keyCode == 13 && vm.isValidCondition && vm.handleKeyboardAction()"
 229           flex
 230         >
 231         </mdp-date-picker>
 232         <mdp-date-picker
 233           mdp-open-on-click
 234           ng-if="vm.selectedOperator.type === '$between'"
 235           ng-change="vm.checkRange()"
 236           ng-model="vm.endRangeValue"
 237           mdp-min-date="vm.minDateRange"
 238           mdp-disabled="!vm.value"
 239           mdp-placeholder="{{ 'DASHBOARDS.ENDING_DATE' | translate }}"
 240           ng-keydown="$event.keyCode == 13 && vm.isValidCondition && vm.handleKeyboardAction()"
 241           flex
 242         >
 243         </mdp-date-picker>
 244       </div>
 245       <!-- AUTOCOMPLETE -->
 246       <div
 247         layout="row"
 248         layout-align="start start"
 249         ng-if="vm.selectedField.type === 'autocomplete' && vm.selectedOperator.type != '$substring'"
 250         class="autocomplete-input"
 251         flex
 252       >
 253         <md-icon md-font-icon="icon-format-text"></md-icon>
 254         <md-autocomplete
 255           md-selected-item="vm.value"
 256           md-selected-item-change="vm.onValueChange()"
 257           md-items="item in vm.getValues()"
 258           md-search-text="vm.searchText"
 259           md-item-text="item.displayValue"
 260           md-min-length="4"
 261           md-no-cache="true"
 262           md-floating-label="{{ 'DASHBOARDS.VALUE' | translate }}"
 263           ng-keydown="$event.keyCode == 13 && vm.isValidCondition && vm.handleKeyboardAction()"
 264           flex
 265         >
 266           <md-item-template>
 267             <span md-highlight-text="vm.searchText" md-highlight-flags="i"
 268               >{{item.displayValue}}</span
 269             >
 270           </md-item-template>
 271         </md-autocomplete>
 272       </div>
 273       <md-input-container
 274         ng-if="vm.selectedField.type === 'autocomplete' && vm.selectedOperator.type === '$substring'"
 275         class="no-errors"
 276         flex
 277       >
 278         <md-icon md-font-icon="icon-format-text"></md-icon>
 279         <input
 280           type="text"
 281           aria-label="Value"
 282           ng-model="vm.value"
 283           ng-change="vm.onValueChange()"
 284           ng-disabled="!vm.selectedField"
 285           ng-keydown="$event.keyCode == 13 && vm.isValidCondition && vm.handleKeyboardAction()"
 286           placeholder="{{ 'DASHBOARDS.VALUE' | translate }}"
 287         />
 288       </md-input-container>
 289     </div>
 290     <md-button
 291       class="md-fab md-mini md-primary mt-20"
 292       ng-if="!vm.pendingCondition"
 293       ng-disabled="!vm.isValidCondition"
 294       aria-label="Add filter"
 295       ng-click="vm.addCondition()"
 296       translate-attr-aria-label="DASHBOARDS.ADD"
 297     >
 298       <md-icon md-font-icon="icon-plus"></md-icon>
 299     </md-button>
 300     <md-button
 301       class="md-fab md-mini mt-20"
 302       ng-if="vm.pendingCondition"
 303       ng-disabled="!vm.isValidCondition"
 304       aria-label="Update filter"
 305       ng-click="vm.updateCondition()"
 306       translate-attr-aria-label="DASHBOARDS.UPDATE"
 307     >
 308       <md-icon md-font-icon="icon-check"></md-icon>
 309     </md-button>
 310     <md-button
 311       class="md-fab md-mini md-primary mt-20"
 312       ng-if="vm.pendingCondition"
 313       aria-label="Cancel filter update"
 314       ng-click="vm.cancelUpdateCondition()"
 315       translate-attr-aria-label="DASHBOARDS.CANCEL"
 316     >
 317       <md-icon md-font-icon="icon-close"></md-icon>
 318     </md-button>
 319   </div>
 320 </div>