--- /dev/null
+<div id="voice-musiconhold" class="page-layout simple tabbed" layout="column">
+ <!-- HEADER -->
+ <div class="header md-accent-bg" layout="row" layout-align="start center">
+ <div class="white-fg" layout="row" layout-align="start center" flex>
+ <md-button
+ class="goto-musiconholds-button md-icon-button"
+ aria-label="Go to musiconholds"
+ ng-click="vm.gotoMusicOnHolds()"
+ translate
+ translate-attr-aria-label="VOICE.GO_TO_MUSICONHOLDS"
+ >
+ <md-icon md-font-icon="icon-arrow-left"></md-icon>
+ </md-button>
+
+ <div layout="row" layout-align="start center">
+ <div class="musiconhold-image" hide-xs>
+ <img ng-src="assets/images/business/musiconholds.jpg" />
+ </div>
+
+ <div layout="column" layout-align="start start">
+ <div class="h2">
+ #{{vm.musiconhold.id}}
+ <span ng-if="vm.musiconhold.name">{{vm.musiconhold.name}}</span>
+ </div>
+ <div class="subtitle secondary-text">
+ <span translate="APP.CREATED_AT"></span>
+ <span>{{vm.musiconhold.createdAt | date:'medium'}}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div>
+ <md-button
+ type="submit"
+ ng-click="vm.saveMusicOnHold()"
+ ng-if="vm.crudPermissions.canEdit"
+ class="send-button md-accent md-raised"
+ ng-disabled="(generalForm.$invalid) || (mohSoundsForm.$invalid)"
+ translate="APP.SAVE"
+ translate-attr-aria-label="APP.SAVE"
+ >
+ SAVE
+ </md-button>
+ </div>
+ </div>
+ <!-- / HEADER -->
+
+ <!-- CONTENT -->
+ <div class="content">
+ <md-tabs
+ md-selected="vm.selectedTab"
+ md-stretch-tabs="always"
+ flex
+ layout-fill
+ md-dynamic-height
+ >
+ <md-tab>
+ <md-tab-label>
+ <span translate="APP.SETTINGS">SETTINGS</span>
+ </md-tab-label>
+ <md-tab-body>
+ <div
+ class="musiconhold-detail-form-container general md-background-bg md-whiteframe-1dp"
+ >
+ <div class="pb-16" layout="row" layout-align="start center">
+ <div class="h2 secondary-text" translate="APP.GENERAL">
+ GENERAL
+ </div>
+ </div>
+ <form name="generalForm" novalidate>
+ <md-input-container class="md-block">
+ <label translate="APP.NAME">Name</label>
+ <input
+ type="text"
+ name="name"
+ ng-model="vm.musiconhold.name"
+ ng-required="true"
+ autofocus
+ disabled
+ />
+
+ <div
+ ng-messages="generalForm['name'].$error"
+ ng-show="generalForm['name'].$touched"
+ role="alert"
+ >
+ <div ng-message="required">
+ <span translate="APP.ERRORS.NAME_REQUIRED"
+ >Name field is required</span
+ >
+ </div>
+ </div>
+ </md-input-container>
+ <md-input-container class="md-block">
+ <label translate="VOICE.MODE">Mode</label>
+ <md-select
+ name="mode"
+ ng-model="vm.musiconhold.mode"
+ required
+ disabled
+ >
+ <md-option ng-value="'files'">
+ {{ 'VOICE.FILES' | translate }}
+ </md-option>
+
+ <md-option ng-value="'custom'">
+ {{ 'APP.CUSTOM' | translate }}
+ </md-option>
+ </md-select>
+ <div
+ ng-messages="generalForm['mode'].$error"
+ ng-show="generalForm['mode'].$touched"
+ role="alert"
+ >
+ <div ng-message="required">
+ <span translate="VOICE.ERRORS.MODE_REQUIRED"
+ >Mode field is required</span
+ >
+ </div>
+ </div>
+ </md-input-container>
+ <md-input-container
+ ng-if="vm.musiconhold.mode == 'custom'"
+ class="md-block"
+ >
+ <label translate="APP.DIRECTORY">Directory</label>
+ <input
+ type=""
+ name="directory"
+ ng-model="vm.musiconhold.directory"
+ ng-disabled="!vm.crudPermissions.canEdit"
+ />
+
+ <div
+ ng-messages="generalForm['directory'].$error"
+ ng-show="generalForm['directory'].$touched"
+ role="alert"
+ >
+ <div ng-message="required">
+ <span translate="VOICE.ERRORS.DIRECTORY_REQUIRED"
+ >Directory field is required</span
+ >
+ </div>
+ </div>
+ </md-input-container>
+ <md-input-container
+ ng-if="vm.musiconhold.mode == 'custom'"
+ class="md-block"
+ >
+ <label translate="APP.APPLICATION">Application</label>
+ <input
+ type="text"
+ name="application"
+ ng-model="vm.musiconhold.application"
+ ng-required="true"
+ ng-disabled="!vm.crudPermissions.canEdit"
+ />
+
+ <div
+ ng-messages="generalForm['application'].$error"
+ ng-show="generalForm['application'].$touched"
+ role="alert"
+ >
+ <div ng-message="required">
+ <span translate="VOICE.ERRORS.APPLICATION_REQUIRED"
+ >Application field is required</span
+ >
+ </div>
+ </div>
+ </md-input-container>
+ <md-input-container
+ ng-if="vm.musiconhold.mode == 'files'"
+ class="md-block"
+ >
+ <label translate="APP.SORT">Sort</label>
+ <md-select
+ name="sort"
+ ng-model="vm.musiconhold.sort"
+ ng-disabled="!vm.crudPermissions.canEdit"
+ >
+ <md-option ng-value="'random'">
+ {{ 'APP.RANDOM' | translate }}
+ </md-option>
+
+ <md-option ng-value="'alpha'">
+ {{ 'APP.ALPHABETICAL' | translate }}
+ </md-option>
+ </md-select>
+ <div
+ ng-messages="generalForm['sort'].$error"
+ ng-show="generalForm['sort'].$touched"
+ role="alert"
+ >
+ <div ng-message="required">
+ <span translate="VOICE.ERRORS.SORT_REQUIRED"
+ >Sort field is required</span
+ >
+ </div>
+ </div>
+ </md-input-container>
+ </form>
+ </div>
+ </md-tab-body>
+ </md-tab>
+ <md-tab>
+ <md-tab-label>
+ <span translate="APP.AUDIOFILES">AUDIOFILES</span>
+ </md-tab-label>
+ <md-tab-body>
+ <div
+ class="musiconhold-detail-form-container mohsounds md-background-bg md-whiteframe-1dp"
+ >
+ <div
+ ng-controller="MusicOnHoldMohSoundsController as vm_dc"
+ ng-init="vm_dc.init(vm.musiconhold, vm.crudPermissions)"
+ >
+ <md-toolbar
+ class="md-table-toolbar md-default"
+ ng-hide="vm_dc.selectedMusicOnHoldMohSounds.length"
+ >
+ <div class="md-toolbar-tools">
+ <span class="md-subhead" translate="APP.MOHSOUNDS"
+ >MohSounds</span
+ >
+ <ms-search-bar
+ on-search="vm_dc.getMusicOnHoldMohSounds()"
+ query="vm_dc.query"
+ display-on="vm_dc.isSearchBarVisible"
+ ng-disabled="vm_dc.query.search"
+ debounce="300"
+ direction="down"
+ min-chars="5"
+ ></ms-search-bar>
+ <div flex></div>
+ <md-button
+ ng-if="vm_dc.crudPermissions.canEdit"
+ class="md-icon-button"
+ ng-click="vm_dc.createOrEditMusicOnHoldMohSound($event)"
+ aria-label="add mohSound"
+ translate
+ translate-attr-label="APP.ADD_MOHSOUND"
+ >
+ <md-icon md-font-icon="icon-plus"></md-icon>
+ </md-button>
+ </div>
+ </md-toolbar>
+ <md-toolbar
+ class="md-table-toolbar md-accent"
+ ng-show="vm_dc.selectedMusicOnHoldMohSounds.length"
+ >
+ <div class="md-toolbar-tools">
+ <span class="md-subhead"
+ >{{vm_dc.selectedMusicOnHoldMohSounds.length}}
+ {{vm_dc.selectedMusicOnHoldMohSounds.length > 1 ? 'items' :
+ 'item'}} selected</span
+ >
+ <div flex></div>
+ <button
+ class="md-icon-button"
+ ng-csv="vm_dc.exportSelectedMusicOnHoldMohSounds"
+ csv-label="true"
+ filename="musiconholds.csv"
+ >
+ <md-icon md-font-icon="icon-file-excel"></md-icon>
+ </button>
+ <md-button
+ ng-if="vm_dc.crudPermissions.canDelete"
+ class="md-icon-button"
+ ng-click="vm_dc.deleteSelectedMusicOnHoldMohSounds($event)"
+ aria-label="delete selected"
+ translate
+ translate-attr-label="APP.DELETE_SELECTED"
+ >
+ <md-icon md-font-icon="icon-delete"></md-icon>
+ </md-button>
+ </div>
+ </md-toolbar>
+ <md-table-container class="font-size-12">
+ <table
+ md-table
+ md-row-select
+ multiple
+ ng-model="vm_dc.selectedMusicOnHoldMohSounds"
+ md-progress="vm_dc.promise"
+ >
+ <thead
+ md-head
+ md-order="vm_dc.query.sort"
+ md-on-reorder="vm_dc.getMusicOnHoldMohSounds"
+ >
+ <tr md-row>
+ <th md-column md-order-by="id">
+ {{ 'APP.ID' | translate }}
+ </th>
+ <th md-column md-order-by="audio">
+ {{ 'APP.AUDIO' | translate }}
+ </th>
+ <th md-column md-order-by="createdAt">
+ {{ 'APP.CREATED_AT' | translate }}
+ </th>
+ <th md-column width="10px"></th>
+ </tr>
+ </thead>
+ <tbody md-body>
+ <tr
+ md-row
+ md-select="mohSound"
+ md-select-id="id"
+ ng-repeat="mohSound in vm_dc.musiconholdMohSounds.rows"
+ >
+ <td md-cell>{{mohSound.id}}</td>
+ <td md-cell>
+ <!-- audio recording directive -->
+ <ms-recording
+ id="mohSound.id"
+ model="'sound'"
+ ></ms-recording>
+ <!-- / audio recording directive -->
+ </td>
+ <td md-cell>{{ mohSound.createdAt | formatdate }}</td>
+ <td md-cell class="actions">
+ <md-menu>
+ <md-button
+ class="md-icon-button"
+ aria-label="More"
+ translate
+ translate-attr-aria-label="APP.MORE"
+ ng-click="$mdMenu.open($event)"
+ >
+ <md-icon
+ md-font-icon="icon-dots-vertical"
+ ></md-icon>
+ </md-button>
+
+ <md-menu-content width="3">
+ <md-menu-item
+ ng-if="vm_dc.crudPermissions.canDelete"
+ >
+ <md-button
+ ng-click="vm_dc.deleteConfirm(mohSound, $event)"
+ translate="APP.DELETE_MOHSOUND"
+ >
+ Delete MohSound
+ </md-button>
+ </md-menu-item>
+ </md-menu-content>
+ </md-menu>
+ </td>
+ </tr>
+ <tr md-row ng-if="!vm_dc.musiconholdMohSounds.rows.length">
+ <td md-cell colspan="8">
+ <div layout="row" layout-align="center center">
+ <span
+ class="text-boxed-light"
+ translate="APP.NO_MOHSOUND_AVAILABLE"
+ >No mohsound available</span
+ >
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </md-table-container>
+ <md-table-pagination
+ md-label="{page: '{{'VOICE.PAGE' | translate}}:', rowsPerPage: '{{'VOICE.ROWSPERPAGE' | translate}}:', of: '{{'VOICE.OF' | translate}}'}"
+ md-limit="vm_dc.query.limit"
+ md-limit-options="[10, 15, 20, 50, 100, 250]"
+ md-page="vm_dc.query.page"
+ md-total="{{vm_dc.musiconholdMohSounds.count}}"
+ md-on-paginate="vm_dc.getMusicOnHoldMohSounds"
+ md-page-select
+ ></md-table-pagination>
+ </div>
+ </div>
+ </md-tab-body>
+ </md-tab>
+ </md-tabs>
+ </div>
+ <!-- / CONTENT -->
+</div>