public/app/main/apps/analytics/views/reports/edit/field/dialog.html

   1 <md-dialog class="reportField-dialog" aria-label="New Report Field">
   2     <form name="reportFieldForm" class="md-inline-form" novalidate>
   3         <md-toolbar class="md-accent md-hue-2">
   4             <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
   5                 <span class="title">{{vm.title}}</span>
   6                 <md-button class="md-icon-button" ng-click="vm.closeDialog()">
   7                     <md-icon md-font-icon="icon-close" aria-label="Close dialog"></md-icon>
   8                 </md-button>
   9             </div>
  10         </md-toolbar>
  11
  12         <md-dialog-content ms-scroll>
  13             <div class="error-list">
  14                 <div ng-repeat="error in vm.errors" class="error" layout="row" layout-align="space-between center">
  15                     <div>
  16                         <span class="message">{{error.message}}</span>
  17                         <span class="type">({{error.type}})</span>
  18                     </div>
  19                     <md-button class="md-icon-button">
  20                         <md-icon md-font-icon="icon-alert-box" aria-label="alert error" class="s16"></md-icon>
  21                     </md-button>
  22                 </div>
  23             </div>
  24             <md-input-container class="md-block">
  25                 <label translate="ANALYTICS.TYPE">Type</label>
  26                 <md-select name="type" ng-model="vm.reportField.type" ng-change="vm.reportField.field = undefined" required>
  27                     <md-option value="column">Select a column</md-option>
  28                     <md-option value="metric">Select an existing metric</md-option>
  29                     <md-option value="custom">Write a custom metric</md-option>
  30                 </md-select>
  31                 <div ng-messages="reportForm.type.$error" ng-show="reportForm.type.$touched" role="alert">
  32                     <div ng-message="required">
  33                         <span translate="ANALYTICS.ERRORS.TYPE_REQUIRED">Type field is required</span>
  34                     </div>
  35                 </div>
  36             </md-input-container>
  37             <div ng-switch on="vm.reportField.type">
  38                 <md-input-container class="md-block" ng-switch-when="column">
  39                     <label translate="ANALYTICS.COLUMN">Column Name</label>
  40                     <md-select name="column" ng-model="vm.reportField.field" required>
  41                         <md-option ng-repeat="column in vm.columns" ng-value="column">{{column}}</md-option>
  42                     </md-select>
  43                     <div ng-messages="reportForm.column.$error" ng-show="reportForm.column.$touched" role="alert">
  44                         <div ng-message="required">
  45                             <span translate="ANALYTICS.ERRORS.COLUMN_REQUIRED">Column field is required</span>
  46                         </div>
  47                     </div>
  48                 </md-input-container>
  49                 <md-input-container class="md-block" ng-switch-when="metric">
  50                     <label translate="ANALYTICS.METRIC_NAME">Metric Name</label>
  51                     <md-select name="metric" ng-model="vm.reportField.MetricId" required>
  52                         <md-option ng-repeat="metric in vm.metrics" ng-value="metric.id">{{metric.name}}</md-option>
  53                     </md-select>
  54                     <div ng-messages="reportForm.metric.$error" ng-show="reportForm.metric.$touched" role="alert">
  55                         <div ng-message="required">
  56                             <span translate="ANALYTICS.ERRORS.METRIC_REQUIRED">Metric field is required</span>
  57                         </div>
  58                     </div>
  59                 </md-input-container>
  60                 <md-input-container class="md-block" ng-switch-when="custom">
  61                     <label translate="ANALYTICS.CUSTOM_METRIC">Custom Metric</label>
  62                     <input type="text" name="field" ng-model="vm.reportField.field" required md-autofocus>
  63                     <div ng-messages="reportFieldForm.field.$error" ng-show="reportFieldForm.field.$touched" role="alert">
  64                         <div ng-message="required">
  65                             <span translate="ANALYTICS.ERRORS.CUSTOM_METRIC_REQUIRED">Custom Metric field is required</span>
  66                         </div>
  67                     </div>
  68                 </md-input-container>
  69             </div>
  70             <md-input-container class="md-block">
  71                 <label translate="ANALYTICS.ALIAS">Alias</label>
  72                 <input type="text" name="alias" ng-model="vm.reportField.alias" ng-required="vm.reportField.type === 'custom' || vm.reportField.type === 'metric'">
  73                 <div ng-messages="reportFieldForm.alias.$error" ng-show="reportFieldForm.alias.$touched" role="alert">
  74                     <div ng-message="required">
  75                         <span translate="ANALYTICS.ERRORS.ALIAS_REQUIRED">Alias field is required</span>
  76                     </div>
  77                 </div>
  78             </md-input-container>
  79             <md-input-container class="md-block" ng-if="vm.reportField.type !== 'metric'">
  80                 <label translate="ANALYTICS.FUNCTION">Function</label>
  81                 <md-select name="function" ng-model="vm.reportField.function">
  82                     <md-option ng-value="null">No Function</md-option>
  83                     <md-option ng-repeat="function in vm.sqlUtil.getFunctions" ng-value="function.value">{{vm.reportField.field ? function.option(vm.reportField.field) : function.value}}</md-option>
  84                 </md-select>
  85             </md-input-container>
  86             <md-input-container class="md-block" ng-if="vm.reportField.type !== 'metric'">
  87                 <label translate="ANALYTICS.FORMAT">Format</label>
  88                 <md-select name="format" ng-model="vm.reportField.format">
  89                     <md-option ng-value="null">No Format</md-option>
  90                     <md-option ng-repeat="format in vm.sqlUtil.getFormats" ng-value="format.value">{{vm.reportField.field ? format.option(vm.reportField.field) : format.value}}</md-option>
  91                 </md-select>
  92             </md-input-container>
  93             <md-input-container class="md-block">
  94                 <label translate="ANALYTICS.GROUP_BY">Group By</label>
  95                 <md-select name="groupBy" ng-model="vm.reportField.groupBy">
  96                     <md-option ng-repeat="gb in vm.sqlUtil.getGroupBy" ng-value="gb.value">{{vm.reportField.field ? gb.option(vm.reportField.field) : gb.value}}</md-option>
  97                 </md-select>
  98             </md-input-container>
  99             <md-input-container class="md-block">
 100                 <label translate="ANALYTICS.ORDER_BY">Order By</label>
 101                 <md-select name="orderBy" ng-model="vm.reportField.orderBy">
 102                     <md-option ng-value="null">No Order</md-option>
 103                     <md-option ng-repeat="ob in vm.sqlUtil.getOrderBy" ng-value="ob.value">{{vm.reportField.field ? ob.option(vm.reportField.field) : ob.value}}</md-option>
 104                 </md-select>
 105             </md-input-container>
 106             <div class="error-list">
 107                 <div ng-repeat="error in vm.errors" class="error" layout="row" layout-align="space-between center">
 108                     <div>
 109                         <span class="message">{{error.message}}</span>
 110                         <span class="type">({{error.type}})</span>
 111                     </div>
 112                     <md-button class="md-icon-button">
 113                         <md-icon md-font-icon="icon-alert-box" aria-label="alert error" class="s16"></md-icon>
 114                     </md-button>
 115                 </div>
 116             </div>
 117         </md-dialog-content>
 118
 119         <md-dialog-actions layout="row" layout-align="space-between center">
 120             <div layout="row" layout-align="start center">
 121                 <md-button type="submit" ng-if="!vm.newReportField" ng-click="vm.saveReportField()" class="send-button md-accent md-raised" ng-disabled="reportFieldForm.$invalid || reportFieldForm.$pristine" aria-label="SAVE" translate="ANALYTICS.SAVE" translate-attr-aria-label="ANALYTICS.SAVE">
 122                     SAVE
 123                 </md-button>
 124
 125                 <md-button type="submit" ng-if="vm.newReportField" ng-click="vm.addNewReportField()" class="send-button md-accent md-raised" ng-disabled="reportFieldForm.$invalid || reportFieldForm.$pristine" aria-label="ADD" translate="ANALYTICS.ADD_REPORTFIELD" translate-attr-aria-label="ANALYTICS.ADD_REPORTFIELD">
 126                     ADD REPORT FIELD
 127                 </md-button>
 128             </div>
 129             <div layout="row">
 130                 <md-button class="md-icon-button" ng-if="!vm.newReportField" ng-click="vm.deleteReportField($event)" aria-label="DELETE" translate translate-attr-aria-label="ANALYTICS.DELETE">
 131                     <md-icon md-font-icon="icon-delete"></md-icon>
 132                     <md-tooltip><span translate="ANALYTICS.DELETE">DELETE</span></md-tooltip>
 133                 </md-button>
 134             </div>
 135         </md-dialog-actions>
 136     </form>
 137 </md-dialog>