modules/yangman-resources/src/main/resources/yangman/views/popup/parameters-admin.tpl.html

   1 <md-dialog aria-label="{{'YANGMAN_PARAMETERS_ADMINISTRATION'| translate}}"  ng-cloak>
   2     <form name="paramsForm">
   3         <md-toolbar>
   4             <div class="md-toolbar-tools">
   5                 <h2>{{'YANGMAN_PARAMETERS_ADMINISTRATION'| translate}}</h2>
   6                 <span flex></span>
   7                 <md-button aria-label="{{'YANGMAN_CANCEL'| translate}}"
   8                            ng-click="paramsAdmin.cancel()">
   9                     <md-icon class="material-icons clickable" >
  10                         close
  11                     </md-icon>
  12                     <md-tooltip md-direction="bottom">{{'YANGMAN_CANCEL'| translate}}</md-tooltip>
  13                 </md-button>
  14             </div>
  15         </md-toolbar>
  16         <md-dialog-content class="paramsAdminDialog" layout="column">
  17             <div class="md-dialog-content" layout="column">
  18                 <!-- top part for search and sort bar -->
  19                 <div class="paramsAdminDialog__searchBox" layout="row">
  20
  21                     <!-- search icon, form, clear button -->
  22                     <md-icon class="material-icons">search</md-icon>
  23                     <input class="ng-pristine ng-valid ng-touched"
  24                            type="text"
  25                            flex
  26                            placeholder="{{'YANGMAN_SEARCH' | translate}}"
  27                            ng-model="paramsAdmin.search"
  28                            aria-invalid="false" />
  29                     <md-button aria-label="{{'YANGMAN_CLEAR_SEARCH'| translate}}"
  30                                ng-click="paramsAdmin.clearFilter()"
  31                                ng-if="paramsAdmin.search">
  32                         <md-icon class="material-icons clickable" >
  33                             close
  34                         </md-icon>
  35                         <md-tooltip md-direction="bottom">{{'YANGMAN_CLEAR_SEARCH'| translate}}</md-tooltip>
  36                     </md-button>
  37                     <!-- /search icon, form, clear button -->
  38
  39                     <!-- sorting menu -->
  40                     <md-menu class="paramsAdminDialog__searchBox__sortMenu"
  41                              md-offset="35 15"
  42                              layout-align="center start">
  43                         <md-button aria-label="{{'YANGMAN_SORT'| translate}}" class="" ng-click="$mdOpenMenu()">
  44                             <i class="material-icons">sort</i>
  45                             <md-tooltip md-direction="bottom">
  46                                 {{'YANGMAN_SORTING' | translate}}
  47                             </md-tooltip>
  48                         </md-button>
  49                         <md-menu-content class="reqMenu">
  50                             <!-- sort by key -->
  51                             <md-menu-item>
  52                                 <md-button aria-label="{{'YANGMAN_PARAMS_KEY'| translate}}"
  53                                            ng-click="paramsAdmin.sortBy('_key')">
  54                                     {{'YANGMAN_SORT_BY'| translate}}
  55                                     {{'YANGMAN_PARAMS_KEY'| translate}}
  56                                     {{paramsAdmin.sortAsc ? 'YANGMAN_SORT_DESC' : 'YANGMAN_SORT_ASC' | translate}}
  57                                 </md-button>
  58                             </md-menu-item>
  59                             <!-- /sort by key -->
  60
  61                             <!-- sort by value -->
  62                             <md-menu-item>
  63                                 <md-button aria-label="{{'YANGMAN_PARAMS_VALUE'| translate}}"
  64                                            ng-click="paramsAdmin.sortBy('_value')">
  65                                     {{'YANGMAN_SORT_BY'| translate}}
  66                                     {{'YANGMAN_PARAMS_VALUE'| translate}}
  67                                     {{paramsAdmin.sortAsc ? 'YANGMAN_SORT_DESC' : 'YANGMAN_SORT_ASC' | translate}}
  68                                 </md-button>
  69                             </md-menu-item>
  70                             <!-- /sort by value -->
  71
  72                         </md-menu-content>
  73                     </md-menu>
  74                     <!-- /sorting menu -->
  75
  76                 </div>
  77
  78                 <md-divider></md-divider>
  79                 <!-- /top part for search and sort bar -->
  80
  81                 <!-- parameters list -->
  82                 <md-content class="paramsAdminDialog__paramsList scrollableY" layout="column">
  83
  84                     <div layout="row"
  85                          ng-repeat="param in paramsAdmin.parametersList.list |
  86                                         filter: paramsAdmin.filterParam |
  87                                         orderBy: paramsAdmin.sortFunc : !paramsAdmin.sortAsc
  88                                         track by $index">
  89
  90                         <!-- key input -->
  91                         <md-input-container>
  92                             <label>{{'YANGMAN_PARAM_KEY' | translate}}</label>
  93                             <input name="key_{{$index}}"
  94                                    ng-model="param.key"
  95                                    ng-required="param.value"
  96                                    unique="{{paramsAdmin.parametersList.getKeysInArr(param)}}"
  97                                    ng-focus="$last && paramsAdmin.createEmptyParam()">
  98                             <div ng-messages="paramsForm['key_'+$index].$error" multiple md-auto-hide="false">
  99                                 <div ng-message="required">
 100                                     {{'YANGMAN_PARAM_KEY_REQUIRED'| translate}}
 101                                 </div>
 102                                 <div ng-message="unique">
 103                                     {{'YANGMAN_PARAM_EXISTING_KEY'| translate}}
 104                                 </div>
 105                             </div>
 106                         </md-input-container>
 107                         <!-- / key input -->
 108
 109                         <!-- value input -->
 110                         <md-input-container flex>
 111                             <label>{{'YANGMAN_PARAM_VALUE' | translate}}</label>
 112                             <input ng-model="param.value" ng-focus="$last && paramsAdmin.createEmptyParam()">
 113                         </md-input-container>
 114                         <!-- /value input -->
 115
 116                         <!-- remove param button -->
 117                         <md-button aria-label="{{'YANGMAN_REMOVE_PARAM' | translate}}"
 118                                    class=""
 119                                    ng-if="!$last"
 120                                    ng-click="paramsAdmin.removeParam(param)">
 121                             <md-tooltip md-direction="bottom">
 122                                 {{'YANGMAN_REMOVE_PARAM' | translate}}
 123                             </md-tooltip>
 124                             <i class="material-icons">close</i>
 125                         </md-button>
 126                         <!-- /remove param button -->
 127
 128
 129                     </div>
 130                 </md-content>
 131                 <!-- /parameters list -->
 132
 133             </div>
 134         </md-dialog-content>
 135         <md-dialog-actions layout="row">
 136             <span flex></span>
 137             <md-button ng-click="paramsAdmin.cancel()">
 138                 {{'YANGMAN_CANCEL'| translate}}
 139             </md-button>
 140             <md-button ng-click="paramsAdmin.save()" ng-disabled="!paramsForm.$valid">
 141                 {{'YANGMAN_SAVE'| translate}}
 142             </md-button>
 143         </md-dialog-actions>
 144     </form>
 145 </md-dialog>