public/src/js/modules/main/apps/whatsapp/views/whatsappAccounts/create/dialog.html/dialog.html

   1 <md-dialog class="whatsappAccount-dialog" aria-label="New WhatsappAccount">
   2   <form name="whatsappAccountForm" 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 | translate }}</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     <md-dialog-content ms-scroll>
  20       <div class="error-list">
  21         <div
  22           ng-repeat="error in vm.errors"
  23           class="error"
  24           layout="row"
  25           layout-align="space-between center"
  26         >
  27           <div>
  28             <span class="message">{{error.message}}</span>
  29             <span class="type">({{error.type}})</span>
  30           </div>
  31           <md-button class="md-icon-button">
  32             <md-icon
  33               md-font-icon="icon-alert-box"
  34               aria-label="alert error"
  35               class="s16"
  36             ></md-icon>
  37           </md-button>
  38         </div>
  39       </div>
  40       <md-input-container class="md-block">
  41         <label translate="WHATSAPP.NAME">Name</label>
  42         <input
  43           type="text"
  44           name="name"
  45           ng-model="vm.whatsappAccount.name"
  46           ng-required="true"
  47           autofocus
  48           ng-disabled="!vm.newWhatsappAccount"
  49         />
  50
  51         <div class="hint"><span translate="WHATSAPP.HELP.NAME"></span></div>
  52         <div
  53           ng-messages="whatsappAccountForm['name'].$error"
  54           ng-show="whatsappAccountForm['name'].$touched"
  55           role="alert"
  56         >
  57           <div ng-message="required">
  58             <span translate="WHATSAPP.ERRORS.NAME_REQUIRED"
  59               >Name field is required</span
  60             >
  61           </div>
  62         </div>
  63       </md-input-container>
  64       <md-input-container class="md-block">
  65         <label translate="WHATSAPP.KEY">key</label>
  66         <input
  67           type="text"
  68           name="key"
  69           ng-model="vm.whatsappAccount.key"
  70           md-maxlength="5"
  71           ng-required="true"
  72         />
  73
  74         <div
  75           ng-messages="whatsappAccountForm['key'].$error"
  76           ng-show="whatsappAccountForm['key'].$touched"
  77           role="alert"
  78         >
  79           <div ng-message="required">
  80             <span translate="WHATSAPP.ERRORS.KEY_REQUIRED"
  81               >key field is required</span
  82             >
  83           </div>
  84           <div ng-message="md-maxlength">
  85             <span
  86               translate="WHATSAPP.ERRORS.KEY_MAX_LENGTH"
  87               translate-values="{max: 5}"
  88               >key must have a maximum length equal to 5</span
  89             >
  90           </div>
  91         </div>
  92       </md-input-container>
  93       <md-input-container class="md-block">
  94         <label translate="WHATSAPP.LIST">List</label>
  95         <md-select name="ListId" ng-model="vm.whatsappAccount.ListId" required>
  96           <md-option
  97             ng-value="ListId.id"
  98             ng-repeat="ListId in vm.lists"
  99             ng-disabled="ListId.canSelect === false"
 100             >{{ ListId.name }}</md-option
 101           >
 102         </md-select>
 103         <div class="hint"><span translate="WHATSAPP.HELP.LIST"></span></div>
 104         <div
 105           ng-messages="whatsappAccountForm['ListId'].$error"
 106           ng-show="whatsappAccountForm['ListId'].$touched"
 107           role="alert"
 108         >
 109           <div ng-message="required">
 110             <span translate="WHATSAPP.ERRORS.LIST_REQUIRED"
 111               >List field is required</span
 112             >
 113           </div>
 114         </div>
 115       </md-input-container>
 116       <md-input-container class="md-block">
 117         <label translate="WHATSAPP.MOTIONPROXY">MotionProxy</label>
 118         <input
 119           type="url"
 120           name="remote"
 121           ng-model="vm.whatsappAccount.remote"
 122           md-maxlength="255"
 123           ng-required="true"
 124         />
 125
 126         <div class="hint">
 127           <span translate="WHATSAPP.HELP.MOTIONPROXY"></span>
 128         </div>
 129         <div
 130           ng-messages="whatsappAccountForm['remote'].$error"
 131           ng-show="whatsappAccountForm['remote'].$touched"
 132           role="alert"
 133         >
 134           <div ng-message="required">
 135             <span translate="WHATSAPP.ERRORS.MOTIONPROXY_REQUIRED"
 136               >MotionProxy field is required</span
 137             >
 138           </div>
 139           <div ng-message="url">
 140             <span translate="WHATSAPP.ERRORS.MOTIONPROXY_MUST_VALID_URL"
 141               >MotionProxy must be a valid url http://www.xcally.com</span
 142             >
 143           </div>
 144           <div ng-message="md-maxlength">
 145             <span
 146               translate="WHATSAPP.ERRORS.MOTIONPROXY_MAX_LENGTH"
 147               translate-values="{max: 255}"
 148               >MotionProxy must have a maximum length equal to 255</span
 149             >
 150           </div>
 151         </div>
 152       </md-input-container>
 153       <md-input-container class="md-block">
 154         <label translate="WHATSAPP.TYPE">Type</label>
 155         <md-select name="type" ng-model="vm.whatsappAccount.type">
 156           <md-option ng-value="'twilio'">Twilio</md-option>
 157         </md-select>
 158         <div
 159           ng-messages="whatsappAccountForm['type'].$error"
 160           ng-show="whatsappAccountForm['type'].$touched"
 161           role="alert"
 162         >
 163           <div ng-message="required">
 164             <span translate="WHATSAPP.ERRORS.TYPE_REQUIRED"
 165               >Type field is required</span
 166             >
 167           </div>
 168         </div>
 169       </md-input-container>
 170       <md-input-container
 171         ng-if="vm.whatsappAccount.type == 'twilio'"
 172         class="md-block"
 173       >
 174         <label translate="WHATSAPP.ACCOUNTSID">AccountSID</label>
 175         <input
 176           type="text"
 177           name="accountSid"
 178           ng-model="vm.whatsappAccount.accountSid"
 179           ng-required="true"
 180         />
 181
 182         <div
 183           ng-messages="whatsappAccountForm['accountSid'].$error"
 184           ng-show="whatsappAccountForm['accountSid'].$touched"
 185           role="alert"
 186         >
 187           <div ng-message="required">
 188             <span translate="WHATSAPP.ERRORS.ACCOUNTSID_REQUIRED"
 189               >AccountSID field is required</span
 190             >
 191           </div>
 192         </div>
 193       </md-input-container>
 194       <md-input-container
 195         ng-if="vm.whatsappAccount.type == 'twilio'"
 196         class="md-block"
 197       >
 198         <label translate="WHATSAPP.AUTHTOKEN">AuthToken</label>
 199         <input
 200           type="text"
 201           name="authToken"
 202           ng-model="vm.whatsappAccount.authToken"
 203           ng-required="true"
 204         />
 205
 206         <div
 207           ng-messages="whatsappAccountForm['authToken'].$error"
 208           ng-show="whatsappAccountForm['authToken'].$touched"
 209           role="alert"
 210         >
 211           <div ng-message="required">
 212             <span translate="WHATSAPP.ERRORS.AUTHTOKEN_REQUIRED"
 213               >AuthToken field is required</span
 214             >
 215           </div>
 216         </div>
 217       </md-input-container>
 218       <md-input-container class="md-block">
 219         <label translate="WHATSAPP.PHONE">phone</label>
 220         <input
 221           type="text"
 222           name="phone"
 223           ng-model="vm.whatsappAccount.phone"
 224           ng-required="true"
 225         />
 226
 227         <div
 228           ng-messages="whatsappAccountForm['phone'].$error"
 229           ng-show="whatsappAccountForm['phone'].$touched"
 230           role="alert"
 231         >
 232           <div ng-message="required">
 233             <span translate="WHATSAPP.ERRORS.PHONE_REQUIRED"
 234               >phone field is required</span
 235             >
 236           </div>
 237         </div>
 238       </md-input-container>
 239       <md-input-container class="md-block">
 240         <label translate="WHATSAPP.DESCRIPTION">Description</label>
 241         <input
 242           type="text"
 243           name="description"
 244           ng-model="vm.whatsappAccount.description"
 245         />
 246
 247         <div
 248           ng-messages="whatsappAccountForm['description'].$error"
 249           ng-show="whatsappAccountForm['description'].$touched"
 250           role="alert"
 251         >
 252           <div ng-message="required">
 253             <span translate="WHATSAPP.ERRORS.DESCRIPTION_REQUIRED"
 254               >Description field is required</span
 255             >
 256           </div>
 257         </div>
 258       </md-input-container>
 259
 260       <div class="error-list">
 261         <div
 262           ng-repeat="error in vm.errors"
 263           class="error"
 264           layout="row"
 265           layout-align="space-between center"
 266         >
 267           <div>
 268             <span class="message">{{error.message}}</span>
 269             <span class="type">({{error.type}})</span>
 270           </div>
 271           <md-button class="md-icon-button">
 272             <md-icon
 273               md-font-icon="icon-alert-box"
 274               aria-label="alert error"
 275               class="s16"
 276             ></md-icon>
 277           </md-button>
 278         </div>
 279       </div>
 280     </md-dialog-content>
 281
 282     <md-dialog-actions
 283       layout="row"
 284       layout-align="space-between center"
 285       ng-if="!vm.crudPermissions.readOnly"
 286     >
 287       <div layout="row" layout-align="start center">
 288         <md-button
 289           type="submit"
 290           ng-if="vm.crudPermissions.canEdit && !vm.newWhatsappAccount"
 291           ng-click="vm.saveWhatsappAccount()"
 292           class="send-button md-accent md-raised"
 293           ng-disabled="whatsappAccountForm.$invalid || whatsappAccountForm.$pristine"
 294           aria-label="SAVE"
 295           translate="WHATSAPP.SAVE"
 296           translate-attr-aria-label="WHATSAPP.SAVE"
 297         >
 298           SAVE
 299         </md-button>
 300
 301         <md-button
 302           type="submit"
 303           ng-if="vm.crudPermissions.canEdit && vm.newWhatsappAccount"
 304           ng-click="vm.addNewWhatsappAccount()"
 305           class="send-button md-accent md-raised"
 306           ng-disabled="whatsappAccountForm.$invalid"
 307           aria-label="ADD"
 308           translate="WHATSAPP.ADD_WHATSAPPACCOUNT"
 309           translate-attr-aria-label="WHATSAPP.ADD_WHATSAPPACCOUNT"
 310         >
 311           ADD WHATSAPPACCOUNT
 312         </md-button>
 313       </div>
 314       <div layout="row">
 315         <md-button
 316           class="md-icon-button"
 317           ng-if="vm.crudPermissions.canDelete && !vm.newWhatsappAccount"
 318           ng-click="vm.deleteWhatsappAccount($event)"
 319           aria-label="DELETE"
 320           translate
 321           translate-attr-aria-label="WHATSAPP.DELETE"
 322         >
 323           <md-icon md-font-icon="icon-delete"></md-icon>
 324           <md-tooltip
 325             ><span translate="WHATSAPP.DELETE">DELETE</span></md-tooltip
 326           >
 327         </md-button>
 328       </div>
 329     </md-dialog-actions>
 330   </form>
 331 </md-dialog>