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

   1 <div id="voice-musiconhold" 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-musiconholds-button md-icon-button"
   7         aria-label="Go to musiconholds"
   8         ng-click="vm.gotoMusicOnHolds()"
   9         translate
  10         translate-attr-aria-label="VOICE.GO_TO_MUSICONHOLDS"
  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="musiconhold-image" hide-xs>
  17           <img ng-src="assets/images/business/musiconholds.jpg" />
  18         </div>
  19
  20         <div layout="column" layout-align="start start">
  21           <div class="h2">
  22             #{{vm.musiconhold.id}}
  23             <span ng-if="vm.musiconhold.name">{{vm.musiconhold.name}}</span>
  24           </div>
  25           <div class="subtitle secondary-text">
  26             <span translate="VOICE.CREATED_AT"></span>
  27             <span>{{vm.musiconhold.createdAt | date:'medium'}}</span>
  28           </div>
  29         </div>
  30       </div>
  31     </div>
  32     <div>
  33       <md-button
  34         type="submit"
  35         ng-click="vm.saveMusicOnHold()"
  36         ng-if="vm.crudPermissions.canEdit"
  37         class="send-button md-accent md-raised"
  38         ng-disabled="(generalForm.$invalid) || (mohSoundsForm.$invalid)"
  39         translate="VOICE.SAVE"
  40         translate-attr-aria-label="VOICE.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="VOICE.SETTINGS">SETTINGS</span>
  60         </md-tab-label>
  61         <md-tab-body>
  62           <div
  63             class="musiconhold-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="VOICE.GENERAL">
  67                 GENERAL
  68               </div>
  69             </div>
  70             <form name="generalForm" novalidate>
  71               <md-input-container class="md-block">
  72                 <label translate="VOICE.NAME">Name</label>
  73                 <input
  74                   type="text"
  75                   name="name"
  76                   ng-model="vm.musiconhold.name"
  77                   ng-required="true"
  78                   autofocus
  79                   disabled
  80                 />
  81
  82                 <div
  83                   ng-messages="generalForm['name'].$error"
  84                   ng-show="generalForm['name'].$touched"
  85                   role="alert"
  86                 >
  87                   <div ng-message="required">
  88                     <span translate="VOICE.ERRORS.NAME_REQUIRED"
  89                       >Name field is required</span
  90                     >
  91                   </div>
  92                 </div>
  93               </md-input-container>
  94               <md-input-container class="md-block">
  95                 <label translate="VOICE.MODE">Mode</label>
  96                 <md-select
  97                   name="mode"
  98                   ng-model="vm.musiconhold.mode"
  99                   required
 100                   disabled
 101                 >
 102                   <md-option ng-value="'files'">
 103                     {{ 'VOICE.FILES' | translate }}
 104                   </md-option>
 105
 106                   <md-option ng-value="'custom'">
 107                     {{ 'VOICE.CUSTOM' | translate }}
 108                   </md-option>
 109                 </md-select>
 110                 <div
 111                   ng-messages="generalForm['mode'].$error"
 112                   ng-show="generalForm['mode'].$touched"
 113                   role="alert"
 114                 >
 115                   <div ng-message="required">
 116                     <span translate="VOICE.ERRORS.MODE_REQUIRED"
 117                       >Mode field is required</span
 118                     >
 119                   </div>
 120                 </div>
 121               </md-input-container>
 122               <md-input-container
 123                 ng-if="vm.musiconhold.mode == 'custom'"
 124                 class="md-block"
 125               >
 126                 <label translate="VOICE.DIRECTORY">Directory</label>
 127                 <input
 128                   type=""
 129                   name="directory"
 130                   ng-model="vm.musiconhold.directory"
 131                   ng-disabled="!vm.crudPermissions.canEdit"
 132                 />
 133
 134                 <div
 135                   ng-messages="generalForm['directory'].$error"
 136                   ng-show="generalForm['directory'].$touched"
 137                   role="alert"
 138                 >
 139                   <div ng-message="required">
 140                     <span translate="VOICE.ERRORS.DIRECTORY_REQUIRED"
 141                       >Directory field is required</span
 142                     >
 143                   </div>
 144                 </div>
 145               </md-input-container>
 146               <md-input-container
 147                 ng-if="vm.musiconhold.mode == 'custom'"
 148                 class="md-block"
 149               >
 150                 <label translate="VOICE.APPLICATION">Application</label>
 151                 <input
 152                   type="text"
 153                   name="application"
 154                   ng-model="vm.musiconhold.application"
 155                   ng-required="true"
 156                   ng-disabled="!vm.crudPermissions.canEdit"
 157                 />
 158
 159                 <div
 160                   ng-messages="generalForm['application'].$error"
 161                   ng-show="generalForm['application'].$touched"
 162                   role="alert"
 163                 >
 164                   <div ng-message="required">
 165                     <span translate="VOICE.ERRORS.APPLICATION_REQUIRED"
 166                       >Application field is required</span
 167                     >
 168                   </div>
 169                 </div>
 170               </md-input-container>
 171               <md-input-container
 172                 ng-if="vm.musiconhold.mode == 'files'"
 173                 class="md-block"
 174               >
 175                 <label translate="VOICE.SORT">Sort</label>
 176                 <md-select
 177                   name="sort"
 178                   ng-model="vm.musiconhold.sort"
 179                   ng-disabled="!vm.crudPermissions.canEdit"
 180                 >
 181                   <md-option ng-value="'random'">
 182                     {{ 'VOICE.RANDOM' | translate }}
 183                   </md-option>
 184
 185                   <md-option ng-value="'alpha'">
 186                     {{ 'VOICE.ALPHABETICAL' | translate }}
 187                   </md-option>
 188                 </md-select>
 189                 <div
 190                   ng-messages="generalForm['sort'].$error"
 191                   ng-show="generalForm['sort'].$touched"
 192                   role="alert"
 193                 >
 194                   <div ng-message="required">
 195                     <span translate="VOICE.ERRORS.SORT_REQUIRED"
 196                       >Sort field is required</span
 197                     >
 198                   </div>
 199                 </div>
 200               </md-input-container>
 201             </form>
 202           </div>
 203         </md-tab-body>
 204       </md-tab>
 205       <md-tab>
 206         <md-tab-label>
 207           <span translate="VOICE.AUDIOFILES">AUDIOFILES</span>
 208         </md-tab-label>
 209         <md-tab-body>
 210           <div
 211             class="musiconhold-detail-form-container mohsounds md-background-bg md-whiteframe-1dp"
 212           >
 213             <div
 214               ng-controller="MusicOnHoldMohSoundsController as vm_dc"
 215               ng-init="vm_dc.init(vm.musiconhold, vm.crudPermissions)"
 216             >
 217               <md-toolbar
 218                 class="md-table-toolbar md-default"
 219                 ng-hide="vm_dc.selectedMusicOnHoldMohSounds.length"
 220               >
 221                 <div class="md-toolbar-tools">
 222                   <span class="md-subhead" translate="VOICE.MOHSOUNDS"
 223                     >MohSounds</span
 224                   >
 225                   <ms-search-bar
 226                     on-search="vm_dc.query.filter = query"
 227                     on-collapse="vm_dc.query.filter = undefined"
 228                     debounce="300"
 229                     direction="down"
 230                   ></ms-search-bar>
 231                   <div flex></div>
 232                   <md-button
 233                     ng-if="vm_dc.crudPermissions.canEdit"
 234                     class="md-icon-button"
 235                     ng-click="vm_dc.createOrEditMusicOnHoldMohSound($event)"
 236                     aria-label="add mohSound"
 237                     translate
 238                     translate-attr-label="VOICE.ADD_MOHSOUND"
 239                   >
 240                     <md-icon md-font-icon="icon-plus"></md-icon>
 241                   </md-button>
 242                 </div>
 243               </md-toolbar>
 244               <md-toolbar
 245                 class="md-table-toolbar md-accent"
 246                 ng-show="vm_dc.selectedMusicOnHoldMohSounds.length"
 247               >
 248                 <div class="md-toolbar-tools">
 249                   <span class="md-subhead"
 250                     >{{vm_dc.selectedMusicOnHoldMohSounds.length}}
 251                     {{vm_dc.selectedMusicOnHoldMohSounds.length > 1 ? 'items' :
 252                     'item'}} selected</span
 253                   >
 254                   <div flex></div>
 255                   <button
 256                     class="md-icon-button"
 257                     ng-csv="vm_dc.exportSelectedMusicOnHoldMohSounds"
 258                     csv-label="true"
 259                     filename="musiconholds.csv"
 260                   >
 261                     <md-icon md-font-icon="icon-file-excel"></md-icon>
 262                   </button>
 263                   <md-button
 264                     ng-if="vm_dc.crudPermissions.canDelete"
 265                     class="md-icon-button"
 266                     ng-click="vm_dc.deleteSelectedMusicOnHoldMohSounds($event)"
 267                     aria-label="delete selected"
 268                     translate
 269                     translate-attr-label="VOICE.DELETE_SELECTED"
 270                   >
 271                     <md-icon md-font-icon="icon-delete"></md-icon>
 272                   </md-button>
 273                 </div>
 274               </md-toolbar>
 275               <md-table-container class="font-size-12">
 276                 <table
 277                   md-table
 278                   md-row-select
 279                   multiple
 280                   ng-model="vm_dc.selectedMusicOnHoldMohSounds"
 281                   md-progress="vm_dc.promise"
 282                 >
 283                   <thead
 284                     md-head
 285                     md-order="vm_dc.query.sort"
 286                     md-on-reorder="vm_dc.getMusicOnHoldMohSounds"
 287                   >
 288                     <tr md-row>
 289                       <th md-column md-order-by="id">
 290                         {{ 'VOICE.ID' | translate }}
 291                       </th>
 292                       <th md-column md-order-by="audio">
 293                         {{ 'VOICE.AUDIO' | translate }}
 294                       </th>
 295                       <th md-column md-order-by="createdAt">
 296                         {{ 'VOICE.CREATED_AT' | translate }}
 297                       </th>
 298                       <th md-column width="10px"></th>
 299                     </tr>
 300                   </thead>
 301                   <tbody md-body>
 302                     <tr
 303                       md-row
 304                       md-select="mohSound"
 305                       md-select-id="id"
 306                       ng-repeat="mohSound in vm_dc.musiconholdMohSounds.rows"
 307                     >
 308                       <td md-cell>{{mohSound.id}}</td>
 309                       <td md-cell>
 310                         <!-- audio recording directive -->
 311                         <ms-recording
 312                           id="mohSound.id"
 313                           model="'sound'"
 314                         ></ms-recording>
 315                         <!-- / audio recording directive -->
 316                       </td>
 317                       <td md-cell>{{ mohSound.createdAt | formatdate }}</td>
 318                       <td md-cell class="actions">
 319                         <md-menu>
 320                           <md-button
 321                             class="md-icon-button"
 322                             aria-label="More"
 323                             translate
 324                             translate-attr-aria-label="VOICE.MORE"
 325                             ng-click="$mdMenu.open($event)"
 326                           >
 327                             <md-icon
 328                               md-font-icon="icon-dots-vertical"
 329                             ></md-icon>
 330                           </md-button>
 331
 332                           <md-menu-content width="3">
 333                             <md-menu-item
 334                               ng-if="vm_dc.crudPermissions.canDelete"
 335                             >
 336                               <md-button
 337                                 ng-click="vm_dc.deleteConfirm(mohSound, $event)"
 338                                 translate="VOICE.DELETE_MOHSOUND"
 339                               >
 340                                 Delete MohSound
 341                               </md-button>
 342                             </md-menu-item>
 343                           </md-menu-content>
 344                         </md-menu>
 345                       </td>
 346                     </tr>
 347                     <tr md-row ng-if="!vm_dc.musiconholdMohSounds.rows.length">
 348                       <td md-cell colspan="8">
 349                         <div layout="row" layout-align="center center">
 350                           <span
 351                             class="text-boxed-light"
 352                             translate="VOICE.NO_MOHSOUND_AVAILABLE"
 353                             >No mohsound available</span
 354                           >
 355                         </div>
 356                       </td>
 357                     </tr>
 358                   </tbody>
 359                 </table>
 360               </md-table-container>
 361               <md-table-pagination
 362                 md-label="{page: '{{'VOICE.PAGE' | translate}}:', rowsPerPage: '{{'VOICE.ROWSPERPAGE' | translate}}:', of: '{{'VOICE.OF' | translate}}'}"
 363                 md-limit="vm_dc.query.limit"
 364                 md-limit-options="[10, 15, 20, 50, 100, 250]"
 365                 md-page="vm_dc.query.page"
 366                 md-total="{{vm_dc.musiconholdMohSounds.count}}"
 367                 md-on-paginate="vm_dc.getMusicOnHoldMohSounds"
 368                 md-page-select
 369               ></md-table-pagination>
 370             </div>
 371           </div>
 372         </md-tab-body>
 373       </md-tab>
 374     </md-tabs>
 375   </div>
 376   <!-- / CONTENT -->
 377 </div>