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

   1 <md-dialog class="import-dialog" aria-label="Import contact">
   2   <form name="importForm" 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" translate="CONTACTMANAGER.IMPORT_CONTACTS"
  10           >Import Contacts</span
  11         >
  12         <md-button
  13           ng-if="vm.result.finish || !vm.processing"
  14           class="md-icon-button"
  15           ng-click="vm.closeDialog()"
  16         >
  17           <md-icon
  18             md-font-icon="icon-close"
  19             aria-label="Close dialog"
  20           ></md-icon>
  21         </md-button>
  22       </div>
  23     </md-toolbar>
  24
  25     <div md-background-bg layout="row" layout-align="start start">
  26       <md-progress-linear
  27         ng-disabled="!vm.processing || vm.result.finish"
  28         md-mode="indeterminate"
  29         class="md-warn"
  30       ></md-progress-linear>
  31     </div>
  32
  33     <md-dialog-content ms-scroll>
  34       <div class="error-list">
  35         <div
  36           ng-repeat="error in vm.errors"
  37           class="error"
  38           layout="row"
  39           layout-align="space-between center"
  40         >
  41           <div>
  42             <span class="message">{{error.message}}</span>
  43             <span class="type">({{error.type}})</span>
  44           </div>
  45           <md-button class="md-icon-button">
  46             <md-icon
  47               md-font-icon="icon-alert-box"
  48               aria-label="alert error"
  49               class="s16"
  50             ></md-icon>
  51           </md-button>
  52         </div>
  53       </div>
  54
  55       <div>
  56         <md-content ng-show="!vm.processing">
  57           <div class="form-title" translate="CONTACTMANAGER.CONTACTMANAGER">
  58             CONTACT MANAGER
  59           </div>
  60
  61           <md-input-container
  62             class="md-icon-float md-block"
  63             ng-repeat="contactField in vm.contactFields"
  64           >
  65             <label
  66               >{{'CONTACTMANAGER.' + contactField.key | uppercase |
  67               translate}}</label
  68             >
  69             <md-select
  70               name="{{contactField.key}}"
  71               ng-model="vm.binding[contactField.key]"
  72               placeholder="{{'CONTACTMANAGER.' + contactField.key | uppercase | translate}}"
  73               ng-required="contactField.required"
  74             >
  75               <md-option ng-value="field" ng-repeat="field in vm.fields"
  76                 >{{ field }}</md-option
  77               >
  78               <md-option ng-value="null" ng-hide="contactField.required">
  79                 <em>{{ 'CONTACTMANAGER.NONE' | translate }}</em>
  80               </md-option>
  81             </md-select>
  82           </md-input-container>
  83
  84           <md-input-container class="md-icon-float md-block">
  85             <label translate="CONTACTMANAGER.LIST">List</label>
  86             <md-select
  87               name="list"
  88               ng-model="vm.ListId"
  89               placeholder="Select a list"
  90               ng-change="vm.onChangeList()"
  91               required
  92             >
  93               <md-option ng-value="list.id" ng-repeat="list in vm.lists.rows"
  94                 >{{list.name}}</md-option
  95               >
  96             </md-select>
  97           </md-input-container>
  98
  99           <md-input-container
 100             class="md-icon-float md-block"
 101             ng-repeat="customField in vm.customFields.rows"
 102           >
 103             <label>{{customField.alias}}</label>
 104             <md-select
 105               ng-model="vm.binding['cf_' + customField.id]"
 106               placeholder="{{customField.alias}}"
 107               ng-required="customField.required"
 108             >
 109               <md-option ng-value="field" ng-repeat="field in vm.fields"
 110                 >{{ field }}</md-option
 111               >
 112               <md-option ng-value="null" ng-hide="customField.required">
 113                 <em>{{ 'CONTACTMANAGER.NONE' | translate }}</em>
 114               </md-option>
 115             </md-select>
 116           </md-input-container>
 117
 118           <md-input-container class="md-icon-float md-block">
 119             <label translate="CONTACTMANAGER.COMPANY">Company</label>
 120             <md-select
 121               name="company"
 122               ng-model="vm.CompanyId"
 123               placeholder="Select a company"
 124             >
 125               <md-option
 126                 ng-value="company.id"
 127                 ng-repeat="company in vm.companies.rows"
 128                 >{{company.name}}</md-option
 129               >
 130               <md-option ng-value="null">
 131                 <em translate="CONTACTMANAGER.NONE">None</em>
 132               </md-option>
 133             </md-select>
 134           </md-input-container>
 135
 136           <md-input-container class="md-icon-float md-block">
 137             <md-select
 138               ng-model="vm.duplicates"
 139               placeholder="{{ 'CONTACTMANAGER.CHECK_DUPLICATES' | translate}}"
 140               multiple
 141             >
 142               <md-option
 143                 ng-value="contactField.key"
 144                 ng-repeat="contactField in vm.contactFields"
 145                 >{{ 'CONTACTMANAGER.' + contactField.key | uppercase |
 146                 translate}}</md-option
 147               >
 148             </md-select>
 149           </md-input-container>
 150
 151           <div ng-if="vm.license.dialer">
 152             <div class="form-title" translate="CONTACTMANAGER.MOTIONDIALER">
 153               MOTION BULL
 154             </div>
 155
 156             <md-input-container
 157               class="md-icon-float md-block"
 158               ng-repeat="motionBullField in vm.motionBullFields"
 159             >
 160               <label
 161                 >{{'CONTACTMANAGER.' + motionBullField.key | uppercase |
 162                 translate}}</label
 163               >
 164               <md-select
 165                 name="{{motionBullField.key}}"
 166                 ng-model="vm.binding[motionBullField.key]"
 167                 placeholder="{{'CONTACTMANAGER.' + motionBullField.key | uppercase | translate}}"
 168                 ng-required="motionBullField.required"
 169               >
 170                 <md-option ng-value="field" ng-repeat="field in vm.fields"
 171                   >{{ field }}</md-option
 172                 >
 173                 <md-option ng-value="null" ng-hide="contactField.required">
 174                   <em>{{ 'CONTACTMANAGER.NONE' | translate }}</em>
 175                 </md-option>
 176               </md-select>
 177             </md-input-container>
 178           </div>
 179         </md-content>
 180
 181         <div class="error-list" ng-if="vm.result.finish">
 182           <div class="info" layout="row" layout-align="space-between center">
 183             <div>
 184               <div class="message">
 185                 {{'CONTACTMANAGER.UPLOAD_COMPLETED' | translate | uppercase}}
 186                 ({{vm.result.elapsed}}s)
 187               </div>
 188             </div>
 189             <md-button class="md-icon-button">
 190               <md-icon
 191                 md-font-icon="icon-alert-box"
 192                 aria-label="alert error"
 193                 class="s16"
 194               ></md-icon>
 195             </md-button>
 196           </div>
 197         </div>
 198
 199         <div layout="row" ng-if="vm.processing">
 200           <!-- WIDGET PROCESSING -->
 201           <ms-widget ng-if="!vm.result.finish" class="h-140" flex>
 202             <!-- Front -->
 203             <ms-widget-front class="p-16 white-bg">
 204               <div
 205                 class="pt-8 pb-8"
 206                 layout="column"
 207                 layout-align="center center"
 208                 flex
 209               >
 210                 <div class="md-display-1 pb-8 orange-fg">
 211                   <span ng-bind="vm.result.rows"></span>
 212                 </div>
 213                 <div
 214                   ng-if="vm.processing"
 215                   class="font-weight-500 secondary-text"
 216                 >
 217                   Please wait, we are processing your contacts...
 218                 </div>
 219               </div>
 220             </ms-widget-front>
 221             <!-- / Front -->
 222           </ms-widget>
 223           <!-- / WIDGET PROCESSING -->
 224           <!-- WIDGET SUCCESS -->
 225           <ms-widget ng-if="vm.result.finish" class="h-140" flex>
 226             <!-- Front -->
 227             <ms-widget-front class="p-16 white-bg">
 228               <div
 229                 class="pt-8 pb-8"
 230                 layout="column"
 231                 layout-align="center center"
 232                 flex
 233               >
 234                 <div class="md-display-1 pb-8 green-fg">
 235                   <span ng-bind="vm.result.affectedRows"></span>
 236                 </div>
 237                 <div
 238                   class="font-weight-500 secondary-text"
 239                   translate="CONTACTMANAGER.SUCCESS"
 240                 >
 241                   Success
 242                 </div>
 243               </div>
 244             </ms-widget-front>
 245             <!-- / Front -->
 246           </ms-widget>
 247           <!-- / WIDGET SUCCESS -->
 248
 249           <!-- WIDGET FAILURE -->
 250           <ms-widget ng-if="vm.result.finish" class="h-140" flex>
 251             <!-- Front -->
 252             <ms-widget-front class="p-16 white-bg">
 253               <div
 254                 class="pt-8 pb-8"
 255                 layout="column"
 256                 layout-align="center center"
 257                 flex
 258               >
 259                 <div class="md-display-1 pb-8 red-fg">
 260                   <span ng-bind="vm.result.failedRows"></span>
 261                 </div>
 262                 <div
 263                   class="font-weight-500 secondary-text"
 264                   translate="CONTACTMANAGER.FAILURE"
 265                 >
 266                   Failure
 267                 </div>
 268               </div>
 269             </ms-widget-front>
 270             <!-- / Front -->
 271           </ms-widget>
 272           <!-- / WIDGET FAILURE -->
 273
 274           <!-- WIDGET DUPLICATES -->
 275           <ms-widget
 276             ng-if="vm.result.duplicatedRows && vm.result.finish"
 277             class="h-140"
 278             flex
 279           >
 280             <!-- Front -->
 281             <ms-widget-front class="p-16 white-bg">
 282               <div
 283                 class="pt-8 pb-8"
 284                 layout="column"
 285                 layout-align="center center"
 286                 flex
 287               >
 288                 <div class="md-display-1 pb-8 orange-fg">
 289                   <span ng-bind="vm.result.duplicatedRows"></span>
 290                 </div>
 291                 <div
 292                   class="font-weight-500 secondary-text"
 293                   translate="CONTACTMANAGER.DUPLICATES"
 294                 >
 295                   Duplicates
 296                 </div>
 297               </div>
 298             </ms-widget-front>
 299             <!-- / Front -->
 300           </ms-widget>
 301           <!-- / WIDGET DUPLICATES -->
 302         </div>
 303       </div>
 304     </md-dialog-content>
 305
 306     <md-dialog-actions layout="row" layout-align="space-between center">
 307       <div layout="row">
 308         <md-button
 309           ng-if="!vm.processing"
 310           ng-disabled="importForm.$invalid || importForm.$pristine"
 311           ng-click="vm.uploadCsv()"
 312           class="md-accent md-raised"
 313           aria-label="UPLOAD"
 314           translate="CONTACTMANAGER.UPLOAD"
 315           translate-attr-aria-label="CONTACTMANAGER.IMPORT"
 316         >
 317           IMPORT
 318         </md-button>
 319         <md-button
 320           ng-if="vm.processing && !vm.result.finish && !vm.stopping"
 321           ng-click="vm.stopUpload()"
 322           class="md-accent md-raised"
 323           aria-label="Stop Upload"
 324           translate="CONTACTMANAGER.STOP"
 325           translate-attr-aria-label="CONTACTMANAGER.STOP"
 326         >
 327           STOP
 328         </md-button>
 329         <md-button
 330           ng-if="vm.result.finish && vm.result.errors.length"
 331           ng-csv="vm.getArrayErrors()"
 332           csv-header="vm.getHeaderErrors()"
 333           class="md-accent md-raised"
 334           aria-label="Export Errors"
 335           filename="contacts_import_errors.csv"
 336         >
 337           <md-icon md-font-icon="icon-file-excel"></md-icon>
 338           {{'CONTACTMANAGER.EXPORT_ERRORS' | translate}}
 339         </md-button>
 340       </div>
 341     </md-dialog-actions>
 342   </form>
 343 </md-dialog>