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="paramsAdmin.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_CLOSE'| translate}}"
   8                            id="params-admin-close-cross"
   9                            ng-click="paramsAdmin.close()">
  10                     <md-icon class="material-icons clickable" >
  11                         close
  12                     </md-icon>
  13                     <md-tooltip md-direction="bottom">{{'YANGMAN_CLOSE'| translate}}</md-tooltip>
  14                 </md-button>
  15             </div>
  16         </md-toolbar>
  17         <md-dialog-content class="paramsAdminDialog" layout="column">
  18             <div class="md-dialog-content" layout="column">
  19                 <!-- top part for search and sort bar -->
  20                 <div class="paramsAdminDialog__searchBox" layout="row">
  21
  22                     <!-- search icon, form, clear button -->
  23                     <md-icon class="material-icons">search</md-icon>
  24                     <input class=""
  25                            id="params-admin-search-field"
  26                            type="text"
  27                            flex
  28                            ng-change="paramsAdmin.filterChange()"
  29                            placeholder="{{'YANGMAN_SEARCH' | translate}}"
  30                            ng-model="paramsAdmin.search"
  31                            aria-invalid="false" />
  32                     <md-button aria-label="{{'YANGMAN_CLEAR_SEARCH'| translate}}"
  33                                id="params-admin-search-clear"
  34                                ng-click="paramsAdmin.clearFilter()"
  35                                ng-if="paramsAdmin.search">
  36                         <md-icon class="material-icons clickable" >
  37                             close
  38                         </md-icon>
  39                         <md-tooltip md-direction="bottom">{{'YANGMAN_CLEAR_SEARCH'| translate}}</md-tooltip>
  40                     </md-button>
  41                     <!-- /search icon, form, clear button -->
  42
  43                     <!-- sorting menu -->
  44                     <md-menu md-offset="35 15" layout-align="center start">
  45                         <md-button aria-label="{{'YANGMAN_SORT'| translate}}"
  46                                    class=""
  47                                    id="params-admin-sort-menu"
  48                                    ng-click="$mdOpenMenu()">
  49                             <i class="material-icons">sort</i>
  50                             <md-tooltip md-direction="bottom">
  51                                 {{'YANGMAN_SORTING' | translate}}
  52                             </md-tooltip>
  53                         </md-button>
  54                         <md-menu-content>
  55                             <!-- sort by name -->
  56                             <md-menu-item>
  57                                 <md-button aria-label="{{'YANGMAN_PARAMS_KEY'| translate}}"
  58                                            id="params-admin-sort-name-{{paramsAdmin.sortAsc ? 'desc' : 'asc'}}"
  59                                            ng-click="paramsAdmin.sortBy('_name', '_value')">
  60                                     {{'YANGMAN_SORT_BY'| translate}}
  61                                     {{'YANGMAN_PARAMS_KEY'| translate}}
  62                                     {{paramsAdmin.sortAsc ? 'YANGMAN_SORT_DESC' : 'YANGMAN_SORT_ASC' | translate}}
  63                                 </md-button>
  64                             </md-menu-item>
  65                             <!-- /sort by name -->
  66
  67                             <!-- sort by value -->
  68                             <md-menu-item>
  69                                 <md-button aria-label="{{'YANGMAN_PARAMS_VALUE'| translate}}"
  70                                            id="params-admin-sort-value-{{paramsAdmin.sortAsc ? 'desc' : 'asc'}}"
  71                                            ng-click="paramsAdmin.sortBy('_value', '_name')">
  72                                     {{'YANGMAN_SORT_BY'| translate}}
  73                                     {{'YANGMAN_PARAMS_VALUE'| translate}}
  74                                     {{paramsAdmin.sortAsc ? 'YANGMAN_SORT_DESC' : 'YANGMAN_SORT_ASC' | translate}}
  75                                 </md-button>
  76                             </md-menu-item>
  77                             <!-- /sort by value -->
  78
  79                         </md-menu-content>
  80                     </md-menu>
  81                     <!-- /sorting menu -->
  82
  83                     <!-- menu for import and export parameters -->
  84                     <input type="file" accept=".json" id="importParameters" on-read-file="paramsAdmin.importParameters($fileContent)">
  85                     <md-menu md-offset="35 15" layout-align="center start">
  86                         <md-button aria-label="{{ 'YANGMAN_PARAMS_IMPORT_EXPORT' | translate }}"
  87                                    id="params-admin-import-export-menu"
  88                                    ng-click="$mdOpenMenu()">
  89                             <i class="material-icons">import_export</i>
  90                             <md-tooltip md-direction="bottom">
  91                                 {{ 'YANGMAN_PARAMS_IMPORT_EXPORT' | translate }}
  92                             </md-tooltip>
  93                         </md-button>
  94                         <md-menu-content>
  95                             <md-menu-item>
  96                                 <md-button id="params-admin-import-parameters">
  97                                     <label for="importParameters">
  98                                         {{'YANGMAN_IMPORT_PARAMS'| translate}}
  99                                     </label>
 100                                 </md-button>
 101                             </md-menu-item>
 102                             <md-menu-item>
 103                                 <md-button aria-label="{{'YANGMAN_EXPORT_PARAMETERS' | translate}}"
 104                                            id="params-admin-export-parameters"
 105                                            ng-click="paramsAdmin.exportParameters()">
 106                                     {{'YANGMAN_EXPORT_PARAMETERS' | translate}}
 107                                 </md-button>
 108                             </md-menu-item>
 109                         </md-menu-content>
 110                     </md-menu>
 111                     <!-- /menu for import and export parameters -->
 112
 113                 </div>
 114
 115                 <md-divider></md-divider>
 116                 <!-- /top part for search and sort bar -->
 117
 118                 <!-- parameters list -->
 119                 <md-content class="paramsAdminDialog__paramsList scrollableY" layout="column">
 120
 121                     <div layout="row"
 122                          ng-repeat="param in paramsAdmin.parametersList.list |
 123                                         filter: paramsAdmin.filterParam |
 124                                         orderBy: paramsAdmin.sortFunc : !paramsAdmin.sortAsc
 125                                         track by $index">
 126                         <!-- name input -->
 127                         <md-input-container>
 128                             <label>{{'YANGMAN_PARAM_KEY' | translate}}</label>
 129                             <input name="name_{{$index}}"
 130                                    id="params-admin-list-name-{{$index}}"
 131                                    ng-model="param.name"
 132                                    ng-required="param.value"
 133                                    ng-change="paramsAdmin.validateNamesUnique()"
 134                                    ng-focus="$last && paramsAdmin.createEmptyParam()"
 135                                    autocomplete="off">
 136                             <div ng-messages="paramsAdmin.paramsForm['name_'+$index].$error" multiple md-auto-hide="false">
 137                                 <div ng-message="required"
 138                                      id="params-admin-name-required">
 139                                     {{'YANGMAN_PARAM_KEY_REQUIRED'| translate}}
 140                                 </div>
 141                                 <div ng-message="unique"
 142                                      id="params-admin-name-unique">
 143                                     {{'YANGMAN_PARAM_EXISTING_KEY'| translate}}
 144                                 </div>
 145                             </div>
 146                         </md-input-container>
 147                         <!-- / name input -->
 148
 149                         <!-- value input -->
 150                         <md-input-container flex>
 151                             <label>{{'YANGMAN_PARAM_VALUE' | translate}}</label>
 152                             <input ng-model="param.value"
 153                                    id="params-admin-value-list-{{$index}}"
 154                                    ng-focus="$last && paramsAdmin.createEmptyParam()">
 155                         </md-input-container>
 156                         <!-- /value input -->
 157
 158                         <!-- remove param button -->
 159                         <md-button aria-label="{{'YANGMAN_REMOVE_PARAM' | translate}}"
 160                                    id="params-admin-list-remove-{{$index}}"
 161                                    class=""
 162                                    ng-if="!$last"
 163                                    ng-click="paramsAdmin.removeParam(param)">
 164                             <md-tooltip md-direction="bottom">
 165                                 {{'YANGMAN_REMOVE_PARAM' | translate}}
 166                             </md-tooltip>
 167                             <i class="material-icons">close</i>
 168                         </md-button>
 169                         <!-- /remove param button -->
 170
 171
 172                     </div>
 173                 </md-content>
 174                 <!-- /parameters list -->
 175
 176             </div>
 177         </md-dialog-content>
 178         <md-dialog-actions layout="row">
 179             <span flex></span>
 180             <md-button id="params-admin-close-button" ng-click="paramsAdmin.close()">
 181                 {{'YANGMAN_CLOSE'| translate}}
 182             </md-button>
 183             <md-button ng-click="paramsAdmin.save()"
 184                        id="params-admin-save-button"
 185                        ng-disabled="!paramsAdmin.paramsForm.$valid">
 186                 {{'YANGMAN_SAVE'| translate}}
 187             </md-button>
 188         </md-dialog-actions>
 189     </form>
 190 </md-dialog>