Motion >> Repos - motion-next.git/blob

   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
   5         class="md-toolbar-tools"
   6         layout="row"
   7         layout-align="space-between center"
   8       >
   9         <span class="title">{{vm.title}}</span>
  10         <md-button class="md-icon-button" ng-click="vm.closeDialog()">
  11           <md-icon
  12             md-font-icon="icon-close"
  13             aria-label="Close dialog"
  14           ></md-icon>
  15         </md-button>
  16       </div>
  17     </md-toolbar>
  18
  19     <pre></pre>
  20     <md-dialog-content ms-scroll>
  21       <div class="error-list">
  22         <div
  23           ng-repeat="error in vm.errors"
  24           class="error"
  25           layout="row"
  26           layout-align="space-between center"
  27         >
  28           <div>
  29             <span class="message">{{error.message}}</span>
  30             <span class="type">({{error.type}})</span>
  31           </div>
  32           <md-button class="md-icon-button">
  33             <md-icon
  34               md-font-icon="icon-alert-box"
  35               aria-label="alert error"
  36               class="s16"
  37             ></md-icon>
  38           </md-button>
  39         </div>
  40       </div>
  41       <md-input-container class="md-block">
  42         <label translate="ANALYTICS.TYPE">Type</label>
  43         <md-select
  44           name="type"
  45           ng-model="vm.reportField.type"
  46           ng-change="vm.reportField.field = undefined"
  47           required
  48         >
  49           <md-option value="column">Select a column</md-option>
  50           <md-option value="metric">Select an existing metric</md-option>
  51           <md-option value="custom">Write a custom metric</md-option>
  52         </md-select>
  53         <div
  54           ng-messages="reportForm.type.$error"
  55           ng-show="reportForm.type.$touched"
  56           role="alert"
  57         >
  58           <div ng-message="required">
  59             <span translate="ANALYTICS.ERRORS.TYPE_REQUIRED"
  60               >Type field is required</span
  61             >
  62           </div>
  63         </div>
  64       </md-input-container>
  65       <div ng-switch on="vm.reportField.type">
  66         <md-input-container class="md-block" ng-switch-when="column">
  67           <label translate="ANALYTICS.COLUMN">Column Name</label>
  68           <md-select name="column" ng-model="vm.reportField.field" required>
  69             <md-optgroup label="{{vm.report.table}}">
  70               <md-option
  71                 ng-repeat="column in vm.columns"
  72                 value="{{vm.report.table}}.{{column}}"
  73                 >{{column}}</md-option
  74               >
  75               <!-- <md-option ng-repeat="column in vm.columns" ng-value="">{{column}}</md-option> -->
  76             </md-optgroup>
  77             <md-optgroup
  78               ng-if="vm.report.joins"
  79               ng-repeat="join in vm.report.joins"
  80               label="{{join.foreignTable}}"
  81             >
  82               <md-option
  83                 ng-repeat="field in join.foreignTableFields"
  84                 value="{{join.foreignTable}}.{{field}}"
  85                 >{{field}}</md-option
  86               >
  87             </md-optgroup>
  88           </md-select>
  89           <div
  90             ng-messages="reportForm.column.$error"
  91             ng-show="reportForm.column.$touched"
  92             role="alert"
  93           >
  94             <div ng-message="required">
  95               <span translate="ANALYTICS.ERRORS.COLUMN_REQUIRED"
  96                 >Column field is required</span
  97               >
  98             </div>
  99           </div>
 100         </md-input-container>
 101         <md-input-container class="md-block" ng-switch-when="metric">
 102           <label translate="ANALYTICS.METRIC_NAME">Metric Name</label>
 103           <md-select name="metric" ng-model="vm.reportField.MetricId" required>
 104             <md-option ng-repeat="metric in vm.metrics" ng-value="metric.id"
 105               >{{metric.name}}</md-option
 106             >
 107           </md-select>
 108           <div
 109             ng-messages="reportForm.metric.$error"
 110             ng-show="reportForm.metric.$touched"
 111             role="alert"
 112           >
 113             <div ng-message="required">
 114               <span translate="ANALYTICS.ERRORS.METRIC_REQUIRED"
 115                 >Metric field is required</span
 116               >
 117             </div>
 118           </div>
 119         </md-input-container>
 120         <md-input-container class="md-block" ng-switch-when="custom">
 121           <label translate="ANALYTICS.CUSTOM_METRIC">Custom Metric</label>
 122           <input
 123             type="text"
 124             name="field"
 125             ng-model="vm.reportField.field"
 126             required
 127             md-autofocus
 128           />
 129           <div
 130             ng-messages="reportFieldForm.field.$error"
 131             ng-show="reportFieldForm.field.$touched"
 132             role="alert"
 133           >
 134             <div ng-message="required">
 135               <span translate="ANALYTICS.ERRORS.CUSTOM_METRIC_REQUIRED"
 136                 >Custom Metric field is required</span
 137               >
 138             </div>
 139           </div>
 140         </md-input-container>
 141       </div>
 142       <md-input-container class="md-block">
 143         <label translate="ANALYTICS.ALIAS">Alias</label>
 144         <input
 145           type="text"
 146           name="alias"
 147           ng-model="vm.reportField.alias"
 148           ng-required="vm.reportField.type === 'custom' || vm.reportField.type === 'metric'"
 149         />
 150         <div
 151           ng-messages="reportFieldForm.alias.$error"
 152           ng-show="reportFieldForm.alias.$touched"
 153           role="alert"
 154         >
 155           <div ng-message="required">
 156             <span translate="ANALYTICS.ERRORS.ALIAS_REQUIRED"
 157               >Alias field is required</span
 158             >
 159           </div>
 160         </div>
 161       </md-input-container>
 162       <md-input-container
 163         class="md-block"
 164         ng-if="vm.reportField.type !== 'metric'"
 165       >
 166         <label translate="ANALYTICS.FUNCTION">Function</label>
 167         <md-select name="function" ng-model="vm.reportField.function">
 168           <md-option ng-value="null">No Function</md-option>
 169           <md-option
 170             ng-repeat="function in vm.sqlUtil.getFunctions"
 171             ng-value="function.value"
 172             >{{function.value}}</md-option
 173           >
 174         </md-select>
 175       </md-input-container>
 176       <md-input-container
 177         class="md-block"
 178         ng-if="vm.reportField.type !== 'metric'"
 179       >
 180         <label translate="ANALYTICS.FORMAT">Format</label>
 181         <md-select name="format" ng-model="vm.reportField.format">
 182           <md-option ng-value="null">No Format</md-option>
 183           <md-option
 184             ng-repeat="format in vm.sqlUtil.getFormats"
 185             ng-value="format.value"
 186             >{{format.value}}</md-option
 187           >
 188         </md-select>
 189       </md-input-container>
 190       <md-input-container class="md-block">
 191         <label translate="ANALYTICS.GROUP_BY">Group By</label>
 192         <md-select name="groupBy" ng-model="vm.reportField.groupBy">
 193           <md-option ng-repeat="gb in vm.sqlUtil.getGroupBy" ng-value="gb.value"
 194             >{{gb.value ? 'Yes' : 'No'}}</md-option
 195           >
 196         </md-select>
 197       </md-input-container>
 198       <md-input-container class="md-block">
 199         <label translate="ANALYTICS.ORDER_BY">Order By</label>
 200         <md-select name="orderBy" ng-model="vm.reportField.orderBy">
 201           <md-option ng-value="null">No Order</md-option>
 202           <md-option ng-repeat="ob in vm.sqlUtil.getOrderBy" ng-value="ob.value"
 203             >{{ob.value}}</md-option
 204           >
 205         </md-select>
 206       </md-input-container>
 207       <div class="error-list">
 208         <div
 209           ng-repeat="error in vm.errors"
 210           class="error"
 211           layout="row"
 212           layout-align="space-between center"
 213         >
 214           <div>
 215             <span class="message">{{error.message}}</span>
 216             <span class="type">({{error.type}})</span>
 217           </div>
 218           <md-button class="md-icon-button">
 219             <md-icon
 220               md-font-icon="icon-alert-box"
 221               aria-label="alert error"
 222               class="s16"
 223             ></md-icon>
 224           </md-button>
 225         </div>
 226       </div>
 227     </md-dialog-content>
 228
 229     <md-dialog-actions layout="row" layout-align="space-between center">
 230       <div
 231         layout="row"
 232         layout-align="start center"
 233         ng-if="vm.crudPermissions.canEdit"
 234       >
 235         <md-button
 236           type="submit"
 237           ng-if="!vm.newReportField"
 238           ng-click="vm.saveReportField()"
 239           class="send-button md-accent md-raised"
 240           ng-disabled="reportFieldForm.$invalid || reportFieldForm.$pristine"
 241           aria-label="SAVE"
 242           translate="ANALYTICS.SAVE"
 243           translate-attr-aria-label="ANALYTICS.SAVE"
 244         >
 245           SAVE
 246         </md-button>
 247
 248         <md-button
 249           type="submit"
 250           ng-if="vm.newReportField"
 251           ng-click="vm.addNewReportField()"
 252           class="send-button md-accent md-raised"
 253           ng-disabled="reportFieldForm.$invalid || reportFieldForm.$pristine"
 254           aria-label="ADD"
 255           translate="ANALYTICS.ADD_REPORTFIELD"
 256           translate-attr-aria-label="ANALYTICS.ADD_REPORTFIELD"
 257         >
 258           ADD REPORT FIELD
 259         </md-button>
 260       </div>
 261       <div layout="row">
 262         <md-button
 263           class="md-icon-button"
 264           ng-if="vm.crudPermissions.canDelete && !vm.newReportField"
 265           ng-click="vm.deleteReportField($event)"
 266           aria-label="DELETE"
 267           translate
 268           translate-attr-aria-label="ANALYTICS.DELETE"
 269         >
 270           <md-icon md-font-icon="icon-delete"></md-icon>
 271           <md-tooltip
 272             ><span translate="ANALYTICS.DELETE">DELETE</span></md-tooltip
 273           >
 274         </md-button>
 275       </div>
 276     </md-dialog-actions>
 277   </form>
 278 </md-dialog>