public/src/js/modules/main/apps/voice/views/voicemails/edit/view.html/view.html

   1 <div id="voice-voicemail" class="page-layout simple tabbed" layout="column">
   2   <!-- HEADER -->
   3   <div class="header md-accent-bg" layout="row" layout-align="start center">
   4     <div class="white-fg" layout="row" layout-align="start center" flex>
   5       <md-button
   6         class="goto-voicemails-button md-icon-button"
   7         aria-label="Go to voicemails"
   8         ng-click="vm.gotoVoicemails()"
   9         translate
  10         translate-attr-aria-label="VOICE.GO_TO_VOICEMAILS"
  11       >
  12         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  13       </md-button>
  14
  15       <div layout="row" layout-align="start center">
  16         <div class="voicemail-image" hide-xs>
  17           <img ng-src="assets/images/business/voicemails.jpg" />
  18         </div>
  19
  20         <div layout="column" layout-align="start start">
  21           <div class="h2">
  22             #{{vm.voicemail.id}}
  23             <span ng-if="vm.voicemail.name">{{vm.voicemail.name}}</span>
  24           </div>
  25           <div class="subtitle secondary-text">
  26             <span translate="APP.CREATED_AT"></span>
  27             <span>{{vm.voicemail.createdAt | date:'medium'}}</span>
  28           </div>
  29         </div>
  30       </div>
  31     </div>
  32     <div>
  33       <md-button
  34         type="submit"
  35         ng-click="vm.saveVoicemail()"
  36         ng-if="vm.crudPermissions.canEdit"
  37         class="send-button md-accent md-raised"
  38         ng-disabled="(generalForm.$invalid) || (advancedForm.$invalid) || (messagesForm.$invalid)"
  39         translate="APP.SAVE"
  40         translate-attr-aria-label="APP.SAVE"
  41       >
  42         SAVE
  43       </md-button>
  44     </div>
  45   </div>
  46   <!-- / HEADER -->
  47
  48   <!-- CONTENT -->
  49   <div class="content">
  50     <md-tabs
  51       md-selected="vm.selectedTab"
  52       md-stretch-tabs="always"
  53       flex
  54       layout-fill
  55       md-dynamic-height
  56     >
  57       <md-tab>
  58         <md-tab-label>
  59           <span translate="APP.SETTINGS">SETTINGS</span>
  60         </md-tab-label>
  61         <md-tab-body>
  62           <div
  63             class="voicemail-detail-form-container general md-background-bg md-whiteframe-1dp"
  64           >
  65             <div class="pb-16" layout="row" layout-align="start center">
  66               <div class="h2 secondary-text" translate="APP.GENERAL">
  67                 GENERAL
  68               </div>
  69             </div>
  70             <form name="generalForm" novalidate>
  71               <md-input-container class="md-block">
  72                 <label translate="APP.FULLNAME">FullName</label>
  73                 <input
  74                   type="text"
  75                   name="fullname"
  76                   ng-model="vm.voicemail.fullname"
  77                   ng-required="true"
  78                   autofocus
  79                   ng-disabled="!vm.crudPermissions.canEdit"
  80                 />
  81
  82                 <div
  83                   ng-messages="generalForm['fullname'].$error"
  84                   ng-show="generalForm['fullname'].$touched"
  85                   role="alert"
  86                 >
  87                   <div ng-message="required">
  88                     <span translate="APP.ERRORS.FULLNAME_REQUIRED"
  89                       >FullName field is required</span
  90                     >
  91                   </div>
  92                 </div>
  93               </md-input-container>
  94               <md-input-container class="md-block">
  95                 <label translate="APP.EMAIL">Email</label>
  96                 <input
  97                   type="email"
  98                   name="email"
  99                   ng-model="vm.voicemail.email"
 100                   ng-required="vm.voicemail.attach === 'yes'"
 101                   ng-disabled="!vm.crudPermissions.canEdit"
 102                 />
 103
 104                 <div
 105                   ng-messages="generalForm['email'].$error"
 106                   ng-show="generalForm['email'].$touched"
 107                   role="alert"
 108                 >
 109                   <div ng-message="required">
 110                     <span translate="APP.ERRORS.EMAIL_REQUIRED"
 111                       >Email field is required</span
 112                     >
 113                   </div>
 114                   <div ng-message="email">
 115                     <span translate="APP.ERRORS.EMAIL_MUST_VALID"
 116                       >Email must be a valid e-mail address</span
 117                     >
 118                   </div>
 119                 </div>
 120               </md-input-container>
 121               <md-input-container class="md-block">
 122                 <label translate="APP.PASSWORD">Password</label>
 123                 <input
 124                   type="password"
 125                   name="password"
 126                   ng-model="vm.voicemail.password"
 127                   placeholder="Password"
 128                   translate
 129                   translate-attr-placeholder="APP.PASSWORD"
 130                   required
 131                 />
 132                 <div ng-messages="generalForm['password'].$error" role="alert">
 133                   <div ng-message="required">
 134                     <span translate="APP.ERRORS.PASSWORD_REQUIRED"
 135                       >Password field is required</span
 136                     >
 137                   </div>
 138                   <div ng-message="pattern">
 139                     <span translate="VOICE.ERRORS.SECURE_PASSWORD_PATTERN"
 140                       >Must contain at least 8 characters, with a minimum of 1
 141                       lowercase letter, 1 uppercase letter, 1 numeric character
 142                       and 1 special character ~!?*@#$%^&-_=+[{]}.</span
 143                     >
 144                   </div>
 145                 </div>
 146               </md-input-container>
 147
 148               <md-input-container class="md-block" ng-if="vm.newVoicemail ">
 149                 <label translate="APP.CONFIRM_PASSWORD">Confirm Password</label>
 150                 <input
 151                   type="password"
 152                   match-password="password"
 153                   name="confirmPassword"
 154                   ng-model="confirmPassword"
 155                   required
 156                 />
 157                 <div
 158                   ng-messages="generalForm.confirmPassword.$error"
 159                   role="alert"
 160                   multiple
 161                 >
 162                   <div ng-message="required">
 163                     <span translate="VOICE.ERRORS.CONFIRM_REQUIRED"
 164                       >Confirm field is required</span
 165                     >
 166                   </div>
 167                   <div ng-message="passwordMatch">
 168                     <span translate="VOICE.ERRORS.CONFIRM_NOT_MATCH"
 169                       >Your password did not match</span
 170                     >
 171                   </div>
 172                 </div>
 173               </md-input-container>
 174
 175               <md-input-container class="md-block">
 176                 <label translate="APP.MAILBOX">MailBox</label>
 177                 <input
 178                   type="text"
 179                   name="mailbox"
 180                   ng-model="vm.voicemail.mailbox"
 181                   ng-required="true"
 182                   disabled
 183                 />
 184
 185                 <div
 186                   ng-messages="generalForm['mailbox'].$error"
 187                   ng-show="generalForm['mailbox'].$touched"
 188                   role="alert"
 189                 >
 190                   <div ng-message="required">
 191                     <span translate="APP.ERRORS.MAILBOX_REQUIRED"
 192                       >MailBox field is required</span
 193                     >
 194                   </div>
 195                 </div>
 196               </md-input-container>
 197               <md-input-container class="md-block">
 198                 <label translate="APP.VOICEMAIL_CONTEXT"
 199                   >Voicemail_Context</label
 200                 >
 201                 <md-select
 202                   name="context"
 203                   ng-model="vm.voicemail.context"
 204                   required
 205                   ng-disabled="!vm.crudPermissions.canEdit"
 206                 >
 207                   <md-option
 208                     ng-value="context.name"
 209                     ng-repeat="context in vm.contexts"
 210                     ng-disabled="context.canSelect === false"
 211                     >{{ context.name }}</md-option
 212                   >
 213                 </md-select>
 214                 <div class="hint">
 215                   <span translate="APP.HELP.VOICEMAIL_CONTEXT"></span>
 216                 </div>
 217                 <div
 218                   ng-messages="generalForm['context'].$error"
 219                   ng-show="generalForm['context'].$touched"
 220                   role="alert"
 221                 >
 222                   <div ng-message="required">
 223                     <span translate="VOICE.ERRORS.VOICEMAIL_CONTEXT_REQUIRED"
 224                       >Voicemail_Context field is required</span
 225                     >
 226                   </div>
 227                 </div>
 228               </md-input-container>
 229             </form>
 230           </div>
 231         </md-tab-body>
 232       </md-tab>
 233       <md-tab>
 234         <md-tab-label>
 235           <span translate="APP.ADVANCED">ADVANCED</span>
 236         </md-tab-label>
 237         <md-tab-body>
 238           <div
 239             class="voicemail-detail-form-container advanced md-background-bg md-whiteframe-1dp"
 240           >
 241             <div class="pb-16" layout="row" layout-align="start center">
 242               <div class="h2 secondary-text" translate="APP.ADVANCED">
 243                 ADVANCED
 244               </div>
 245             </div>
 246             <form name="advancedForm" novalidate>
 247               <md-input-container class="md-block">
 248                 <label translate="APP.TIMEZONE">TimeZone</label>
 249                 <input
 250                   type="text"
 251                   name="tz"
 252                   ng-model="vm.voicemail.tz"
 253                   ng-required="true"
 254                   autofocus
 255                   ng-disabled="!vm.crudPermissions.canEdit"
 256                 />
 257
 258                 <div
 259                   ng-messages="advancedForm['tz'].$error"
 260                   ng-show="advancedForm['tz'].$touched"
 261                   role="alert"
 262                 >
 263                   <div ng-message="required">
 264                     <span translate="APP.ERRORS.TIMEZONE_REQUIRED"
 265                       >TimeZone field is required</span
 266                     >
 267                   </div>
 268                 </div>
 269               </md-input-container>
 270               <md-input-container class="md-block">
 271                 <label translate="APP.ATTACH">Attach</label>
 272                 <md-select
 273                   name="attach"
 274                   ng-model="vm.voicemail.attach"
 275                   ng-disabled="!vm.crudPermissions.canEdit"
 276                 >
 277                   <md-option ng-value="'yes'">
 278                     {{ 'APP.YES' | translate }}
 279                   </md-option>
 280
 281                   <md-option ng-value="'no'">
 282                     {{ 'APP.NO' | translate }}
 283                   </md-option>
 284                 </md-select>
 285                 <div
 286                   ng-messages="advancedForm['attach'].$error"
 287                   ng-show="advancedForm['attach'].$touched"
 288                   role="alert"
 289                 >
 290                   <div ng-message="required">
 291                     <span translate="VOICE.ERRORS.ATTACH_REQUIRED"
 292                       >Attach field is required</span
 293                     >
 294                   </div>
 295                 </div>
 296               </md-input-container>
 297               <md-input-container class="md-block">
 298                 <label translate="APP.ENVELOPE">Envelope</label>
 299                 <md-select
 300                   name="envelope"
 301                   ng-model="vm.voicemail.envelope"
 302                   ng-disabled="!vm.crudPermissions.canEdit"
 303                 >
 304                   <md-option ng-value="'yes'">
 305                     {{ 'APP.YES' | translate }}
 306                   </md-option>
 307
 308                   <md-option ng-value="'no'">
 309                     {{ 'APP.NO' | translate }}
 310                   </md-option>
 311                 </md-select>
 312                 <div
 313                   ng-messages="advancedForm['envelope'].$error"
 314                   ng-show="advancedForm['envelope'].$touched"
 315                   role="alert"
 316                 >
 317                   <div ng-message="required">
 318                     <span translate="VOICE.ERRORS.ENVELOPE_REQUIRED"
 319                       >Envelope field is required</span
 320                     >
 321                   </div>
 322                 </div>
 323               </md-input-container>
 324               <md-input-container class="md-block">
 325                 <label translate="APP.DELETE">Delete</label>
 326                 <md-select
 327                   name="delete"
 328                   ng-model="vm.voicemail.delete"
 329                   ng-disabled="!vm.crudPermissions.canEdit"
 330                 >
 331                   <md-option ng-value="'yes'">
 332                     {{ 'APP.YES' | translate }}
 333                   </md-option>
 334
 335                   <md-option ng-value="'no'">
 336                     {{ 'APP.NO' | translate }}
 337                   </md-option>
 338                 </md-select>
 339                 <div
 340                   ng-messages="advancedForm['delete'].$error"
 341                   ng-show="advancedForm['delete'].$touched"
 342                   role="alert"
 343                 >
 344                   <div ng-message="required">
 345                     <span translate="VOICE.ERRORS.DELETE_REQUIRED"
 346                       >Delete field is required</span
 347                     >
 348                   </div>
 349                 </div>
 350               </md-input-container>
 351               <md-input-container class="md-block">
 352                 <label translate="APP.EMAILBODY">EmailBody</label>
 353                 <input
 354                   type="text"
 355                   name="emailbody"
 356                   ng-model="vm.voicemail.emailbody"
 357                   ng-disabled="!vm.crudPermissions.canEdit"
 358                 />
 359
 360                 <div
 361                   ng-messages="advancedForm['emailbody'].$error"
 362                   ng-show="advancedForm['emailbody'].$touched"
 363                   role="alert"
 364                 >
 365                   <div ng-message="required">
 366                     <span translate="VOICE.ERRORS.EMAILBODY_REQUIRED"
 367                       >EmailBody field is required</span
 368                     >
 369                   </div>
 370                 </div>
 371               </md-input-container>
 372               <md-input-container class="md-block">
 373                 <label translate="APP.EMAILSUBJECT">EmailSubject</label>
 374                 <input
 375                   type="text"
 376                   name="emailsubject"
 377                   ng-model="vm.voicemail.emailsubject"
 378                   ng-disabled="!vm.crudPermissions.canEdit"
 379                 />
 380
 381                 <div
 382                   ng-messages="advancedForm['emailsubject'].$error"
 383                   ng-show="advancedForm['emailsubject'].$touched"
 384                   role="alert"
 385                 >
 386                   <div ng-message="required">
 387                     <span translate="VOICE.ERRORS.EMAILSUBJECT_REQUIRED"
 388                       >EmailSubject field is required</span
 389                     >
 390                   </div>
 391                 </div>
 392               </md-input-container>
 393               <md-input-container class="md-block">
 394                 <label translate="APP.MAXSECONDS">MaxSeconds</label>
 395                 <input
 396                   type="number"
 397                   name="maxsecs"
 398                   ng-model="vm.voicemail.maxsecs"
 399                   min="0"
 400                   ng-disabled="!vm.crudPermissions.canEdit"
 401                 />
 402
 403                 <div
 404                   ng-messages="advancedForm['maxsecs'].$error"
 405                   ng-show="advancedForm['maxsecs'].$touched"
 406                   role="alert"
 407                 >
 408                   <div ng-message="required">
 409                     <span translate="VOICE.ERRORS.MAXSECONDS_REQUIRED"
 410                       >MaxSeconds field is required</span
 411                     >
 412                   </div>
 413                   <div ng-message="min">
 414                     <span
 415                       translate="VOICE.ERRORS.MAXSECONDS_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 416                       >MaxSeconds must be a valid greater or equal than</span
 417                     >
 418                     <span>0</span>
 419                   </div>
 420                 </div>
 421               </md-input-container>
 422               <md-input-container class="md-block">
 423                 <label translate="APP.MAXMESSAGES">MaxMessages</label>
 424                 <input
 425                   type="number"
 426                   name="maxmsg"
 427                   ng-model="vm.voicemail.maxmsg"
 428                   min="0"
 429                   max="9999"
 430                   ng-disabled="!vm.crudPermissions.canEdit"
 431                 />
 432
 433                 <div
 434                   ng-messages="advancedForm['maxmsg'].$error"
 435                   ng-show="advancedForm['maxmsg'].$touched"
 436                   role="alert"
 437                 >
 438                   <div ng-message="required">
 439                     <span translate="VOICE.ERRORS.MAXMESSAGES_REQUIRED"
 440                       >MaxMessages field is required</span
 441                     >
 442                   </div>
 443                   <div ng-message="min">
 444                     <span
 445                       translate="VOICE.ERRORS.MAXMESSAGES_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 446                       >MaxMessages must be a valid greater or equal than</span
 447                     >
 448                     <span>0</span>
 449                   </div>
 450                   <div ng-message="max">
 451                     <span
 452                       translate="VOICE.ERRORS.MAXMESSAGES_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 453                       >MaxMessages must be a valid greater or equal than</span
 454                     >
 455                     <span>9999</span>
 456                   </div>
 457                 </div>
 458               </md-input-container>
 459             </form>
 460           </div>
 461         </md-tab-body>
 462       </md-tab>
 463       <md-tab>
 464         <md-tab-label>
 465           <span translate="APP.MESSAGES">MESSAGES</span>
 466         </md-tab-label>
 467         <md-tab-body>
 468           <div
 469             class="voicemail-detail-form-container messages md-background-bg md-whiteframe-1dp"
 470           >
 471             <div
 472               ng-controller="VoicemailMessagesController as vm_dc"
 473               ng-init="vm_dc.init(vm.voicemail, vm.crudPermissions)"
 474             >
 475               <md-toolbar
 476                 class="md-table-toolbar md-default"
 477                 ng-hide="vm_dc.selectedVoicemailMessages.length"
 478               >
 479                 <div class="md-toolbar-tools">
 480                   <span class="md-subhead" translate="APP.MESSAGES"
 481                     >Messages</span
 482                   >
 483                   <ms-search-bar
 484                     on-search="vm_dc.query.filter = query"
 485                     on-collapse="vm_dc.query.filter = undefined"
 486                     debounce="300"
 487                     direction="down"
 488                   ></ms-search-bar>
 489                   <div flex></div>
 490                 </div>
 491               </md-toolbar>
 492               <md-toolbar
 493                 class="md-table-toolbar md-accent"
 494                 ng-show="vm_dc.selectedVoicemailMessages.length"
 495               >
 496                 <div class="md-toolbar-tools">
 497                   <span class="md-subhead"
 498                     >{{vm_dc.selectedVoicemailMessages.length}}
 499                     {{vm_dc.selectedVoicemailMessages.length > 1 ? 'items' :
 500                     'item'}} selected</span
 501                   >
 502                   <div flex></div>
 503                   <button
 504                     class="md-icon-button"
 505                     ng-csv="vm_dc.exportSelectedVoicemailMessages"
 506                     csv-label="true"
 507                     filename="voicemails.csv"
 508                   >
 509                     <md-icon md-font-icon="icon-file-excel"></md-icon>
 510                   </button>
 511                   <md-button
 512                     ng-if="vm_dc.crudPermissions.canDelete"
 513                     class="md-icon-button"
 514                     ng-click="vm_dc.deleteSelectedVoicemailMessages($event)"
 515                     aria-label="delete selected"
 516                     translate
 517                     translate-attr-label="APP.DELETE_SELECTED"
 518                   >
 519                     <md-icon md-font-icon="icon-delete"></md-icon>
 520                   </md-button>
 521                 </div>
 522               </md-toolbar>
 523               <md-table-container class="font-size-12">
 524                 <table
 525                   md-table
 526                   md-row-select
 527                   multiple
 528                   ng-model="vm_dc.selectedVoicemailMessages"
 529                   md-progress="vm_dc.promise"
 530                 >
 531                   <thead
 532                     md-head
 533                     md-order="vm_dc.query.sort"
 534                     md-on-reorder="vm_dc.getVoicemailMessages"
 535                   >
 536                     <tr md-row>
 537                       <th md-column md-order-by="id">
 538                         {{ 'APP.ID' | translate }}
 539                       </th>
 540                       <th md-column md-order-by="callerid">
 541                         {{ 'APP.CALLER_ID' | translate }}
 542                       </th>
 543                       <th md-column md-order-by="duration">
 544                         {{ 'APP.DURATION' | translate }}
 545                       </th>
 546                       <th md-column md-order-by="audio">
 547                         {{ 'APP.AUDIO' | translate }}
 548                       </th>
 549                       <th md-column md-order-by="stamp">
 550                         {{ 'APP.RECEIVED_AT' | translate }}
 551                       </th>
 552                       <th md-column width="10px"></th>
 553                     </tr>
 554                   </thead>
 555                   <tbody md-body>
 556                     <tr
 557                       md-row
 558                       md-select="message"
 559                       md-select-id="id"
 560                       ng-repeat="message in vm_dc.voicemailMessages.rows"
 561                     >
 562                       <td md-cell>{{message.id}}</td>
 563                       <td md-cell>{{message.callerid}}</td>
 564                       <td md-cell>{{message.duration}}</td>
 565                       <td md-cell>
 566                         <!-- audio recording directive -->
 567                         <ms-recording
 568                           id="message.id"
 569                           model="'voiceMailMessage'"
 570                         ></ms-recording>
 571                         <!-- / audio recording directive -->
 572                       </td>
 573                       <td md-cell>{{ message.stamp | formatdate }}</td>
 574                       <td md-cell class="actions">
 575                         <md-menu>
 576                           <md-button
 577                             class="md-icon-button"
 578                             aria-label="More"
 579                             translate
 580                             translate-attr-aria-label="APP.MORE"
 581                             ng-click="$mdMenu.open($event)"
 582                           >
 583                             <md-icon
 584                               md-font-icon="icon-dots-vertical"
 585                             ></md-icon>
 586                           </md-button>
 587
 588                           <md-menu-content width="3">
 589                             <md-menu-item
 590                               ng-if="vm_dc.crudPermissions.canDelete"
 591                             >
 592                               <md-button
 593                                 ng-click="vm_dc.deleteConfirm(message, $event)"
 594                                 translate="VOICE.DELETE_MESSAGE"
 595                               >
 596                                 Delete Message
 597                               </md-button>
 598                             </md-menu-item>
 599                           </md-menu-content>
 600                         </md-menu>
 601                       </td>
 602                     </tr>
 603                     <tr md-row ng-if="!vm_dc.voicemailMessages.rows.length">
 604                       <td md-cell colspan="8">
 605                         <div layout="row" layout-align="center center">
 606                           <span
 607                             class="text-boxed-light"
 608                             translate="APP.NO_MESSAGE_AVAILABLE"
 609                             >No message available</span
 610                           >
 611                         </div>
 612                       </td>
 613                     </tr>
 614                   </tbody>
 615                 </table>
 616               </md-table-container>
 617               <md-table-pagination
 618                 md-label="{page: '{{'VOICE.PAGE' | translate}}:', rowsPerPage: '{{'VOICE.ROWSPERPAGE' | translate}}:', of: '{{'VOICE.OF' | translate}}'}"
 619                 md-limit="vm_dc.query.limit"
 620                 md-limit-options="[10, 15, 20, 50, 100, 250]"
 621                 md-page="vm_dc.query.page"
 622                 md-total="{{vm_dc.voicemailMessages.count}}"
 623                 md-on-paginate="vm_dc.getVoicemailMessages"
 624                 md-page-select
 625               >
 626               </md-table-pagination>
 627             </div>
 628           </div>
 629         </md-tab-body>
 630       </md-tab>
 631     </md-tabs>
 632   </div>
 633   <!-- / CONTENT -->
 634 </div>