What has been done: - TT#44661 Voicebox: As a Customer, I want to upload a custom "busy" greeting sound - TT#44663, Voicebox: As a Customer, I want to delete/reset the custom "busy" greeting sound - Refactoring of CscVoiceMailPlayer to more generic CscAudioPlayer Change-Id: I24f9d607b9d1acece56cd47c0bd8c99d125d45b4changes/59/24059/19
raxelsen
7 years ago
committed by
Hans-Peter Herzog
parent
2fb4691943
commit
f872d4de20
@ -0,0 +1,172 @@
|
|||||||
|
<template>
|
||||||
|
<q-field
|
||||||
|
class="csc-upload-field"
|
||||||
|
:icon="icon"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
readonly
|
||||||
|
:float-label="label"
|
||||||
|
:value="inputValue"
|
||||||
|
:after="inputButtons"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
v-show="false"
|
||||||
|
ref="fileUpload"
|
||||||
|
type="file"
|
||||||
|
@change="inputChange"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-show="uploading"
|
||||||
|
class="row no-wrap csc-upload-progress-field"
|
||||||
|
>
|
||||||
|
<q-chip
|
||||||
|
square
|
||||||
|
color="primary"
|
||||||
|
class="upload-chip"
|
||||||
|
>
|
||||||
|
{{ `${progress}%` }}
|
||||||
|
</q-chip>
|
||||||
|
<q-progress
|
||||||
|
stripe
|
||||||
|
animate
|
||||||
|
color="primary"
|
||||||
|
:percentage="progress"
|
||||||
|
class="upload-progress"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="csc-file-upload-actions"
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
v-if="selectedFile != null"
|
||||||
|
flat
|
||||||
|
color="default"
|
||||||
|
icon="clear"
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
{{ $t('buttons.cancel') }}
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
v-if="selectedFile != null && !uploading"
|
||||||
|
color="primary"
|
||||||
|
icon="cloud_upload"
|
||||||
|
@click="upload"
|
||||||
|
>
|
||||||
|
{{ $t('buttons.upload') }}
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
v-if="uploaded && selectedFile == null"
|
||||||
|
color="primary"
|
||||||
|
icon="undo"
|
||||||
|
@click="undo"
|
||||||
|
>
|
||||||
|
{{ $t('buttons.resetDefaults') }}
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</q-field>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
QInput,
|
||||||
|
QField,
|
||||||
|
QBtn,
|
||||||
|
QChip,
|
||||||
|
QProgress
|
||||||
|
} from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-sound-file-upload',
|
||||||
|
components: {
|
||||||
|
QInput,
|
||||||
|
QField,
|
||||||
|
QBtn,
|
||||||
|
QChip,
|
||||||
|
QProgress
|
||||||
|
},
|
||||||
|
props: [
|
||||||
|
'icon',
|
||||||
|
'label',
|
||||||
|
'value',
|
||||||
|
'uploading',
|
||||||
|
'uploaded',
|
||||||
|
'progress',
|
||||||
|
'fileTypes'
|
||||||
|
],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
selectedFile: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
inputValue() {
|
||||||
|
if(this.selectedFile === null) {
|
||||||
|
return this.value;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return this.selectedFile.name;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inputButtons() {
|
||||||
|
let buttons = [];
|
||||||
|
let self = this;
|
||||||
|
buttons.push({
|
||||||
|
icon: 'folder',
|
||||||
|
error: false,
|
||||||
|
handler (event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
self.$refs.fileUpload.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return buttons;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
inputChange(event) {
|
||||||
|
this.selectedFile = event.target.files[0];
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
this.selectedFile = null;
|
||||||
|
this.$refs.fileUpload.value = null;
|
||||||
|
if(this.uploading) {
|
||||||
|
this.abort();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
upload() {
|
||||||
|
this.$emit('upload', this.selectedFile);
|
||||||
|
},
|
||||||
|
abort() {
|
||||||
|
this.$emit('abort');
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.cancel();
|
||||||
|
},
|
||||||
|
undo() {
|
||||||
|
this.$emit('reset');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
@import '../../themes/quasar.variables';
|
||||||
|
.csc-file-upload-actions
|
||||||
|
padding-top $flex-gutter-xs
|
||||||
|
.csc-upload-field
|
||||||
|
.q-field-icon
|
||||||
|
color $primary
|
||||||
|
.csc-upload-progress-field
|
||||||
|
margin 10px 0 5px 0
|
||||||
|
|
||||||
|
.upload-chip
|
||||||
|
min-height 20px
|
||||||
|
height 20px
|
||||||
|
width 50px
|
||||||
|
border-top-right-radius 0
|
||||||
|
border-bottom-right-radius 0
|
||||||
|
|
||||||
|
.upload-progress
|
||||||
|
height 20px
|
||||||
|
</style>
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<q-field
|
||||||
|
class="csc-form-field upload-field"
|
||||||
|
icon="music_note"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
for="voicemail-file-upload"
|
||||||
|
class="upload-label"
|
||||||
|
>
|
||||||
|
{{ $t('voicebox.label.busyGreeting') }}
|
||||||
|
</label>
|
||||||
|
<span
|
||||||
|
v-show="selectedFile.length === 0"
|
||||||
|
>
|
||||||
|
<slot name="status-label" />
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
v-show="requesting"
|
||||||
|
class="row no-wrap progress-field"
|
||||||
|
>
|
||||||
|
<q-chip
|
||||||
|
square
|
||||||
|
color="primary"
|
||||||
|
class="upload-chip"
|
||||||
|
>
|
||||||
|
{{ `${progress}%` }}
|
||||||
|
</q-chip>
|
||||||
|
<q-progress
|
||||||
|
stripe
|
||||||
|
animate
|
||||||
|
color="primary"
|
||||||
|
:percentage="progress"
|
||||||
|
class="upload-progress"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="upload-filename">
|
||||||
|
{{ selectedFile }}
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
v-show="selectedFile.length === 0 && id"
|
||||||
|
>
|
||||||
|
<slot name="extra-buttons" />
|
||||||
|
</span>
|
||||||
|
<q-btn
|
||||||
|
v-show="selectedFile.length > 0"
|
||||||
|
flat
|
||||||
|
color="negative"
|
||||||
|
icon="cancel"
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
{{ $t('buttons.cancel') }}
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-show="!requesting"
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
@click="$refs.upload.click()"
|
||||||
|
icon="folder"
|
||||||
|
>
|
||||||
|
{{ selectLabel }}
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
v-show="selectedFile.length > 0 && !requesting"
|
||||||
|
color="primary"
|
||||||
|
icon="cloud_upload"
|
||||||
|
@click="upload"
|
||||||
|
>
|
||||||
|
{{ $t('buttons.upload') }}
|
||||||
|
</q-btn>
|
||||||
|
<input
|
||||||
|
ref="upload"
|
||||||
|
id="voicemail-file-upload"
|
||||||
|
type="file"
|
||||||
|
:accept="fileTypes"
|
||||||
|
@change="processFile($event)"
|
||||||
|
/>
|
||||||
|
</q-field>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
QField,
|
||||||
|
QInput,
|
||||||
|
QBtn,
|
||||||
|
QProgress,
|
||||||
|
QChip
|
||||||
|
} from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-upload-file',
|
||||||
|
props: [
|
||||||
|
'progress',
|
||||||
|
'requesting',
|
||||||
|
'fileTypes',
|
||||||
|
'id'
|
||||||
|
],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
selectedFile: '',
|
||||||
|
file: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
QField,
|
||||||
|
QInput,
|
||||||
|
QBtn,
|
||||||
|
QProgress,
|
||||||
|
QChip
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
selectLabel() {
|
||||||
|
return this.id ? this.$t('buttons.selectNew') :
|
||||||
|
this.$t('buttons.select');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cancel() {
|
||||||
|
if (this.requesting) {
|
||||||
|
this.abort();
|
||||||
|
}
|
||||||
|
else if (this.selectedFile.length > 0) {
|
||||||
|
this.$emit('reset');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.file = null;
|
||||||
|
this.selectedFile = '';
|
||||||
|
this.$refs.upload.value = '';
|
||||||
|
},
|
||||||
|
processFile(event) {
|
||||||
|
let file = event.target.files[0];
|
||||||
|
let fileName = file ? file.name : '';
|
||||||
|
let fileNameSplit = fileName.split('.');
|
||||||
|
let extension = fileNameSplit[1] ? fileNameSplit[1] : null;
|
||||||
|
if (fileName.length > 22 && extension) {
|
||||||
|
fileName = `${fileName.substring(0, 14)}...${extension}`;
|
||||||
|
}
|
||||||
|
else if (fileName.length > 22 && !extension) {
|
||||||
|
fileName = `${fileName.substring(0, 17)}...`;
|
||||||
|
}
|
||||||
|
this.file = file;
|
||||||
|
this.selectedFile = fileName;
|
||||||
|
},
|
||||||
|
upload() {
|
||||||
|
this.$emit('upload', this.file);
|
||||||
|
},
|
||||||
|
abort() {
|
||||||
|
this.$emit('abort');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
@import '../../themes/quasar.variables.styl'
|
||||||
|
|
||||||
|
#voicemail-file-upload
|
||||||
|
display none
|
||||||
|
|
||||||
|
.upload-field
|
||||||
|
margin-bottom 10px
|
||||||
|
|
||||||
|
.upload-label
|
||||||
|
display block
|
||||||
|
color $csc-label
|
||||||
|
font-size 16px
|
||||||
|
margin-bottom 5px
|
||||||
|
|
||||||
|
.reset-button
|
||||||
|
padding 0
|
||||||
|
|
||||||
|
.q-icon
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
.upload-filename
|
||||||
|
color $black
|
||||||
|
margin-bottom 10px
|
||||||
|
|
||||||
|
.q-field-icon
|
||||||
|
margin-top 20px
|
||||||
|
|
||||||
|
.inactive-label
|
||||||
|
color $secondary
|
||||||
|
|
||||||
|
.active-label
|
||||||
|
color $primary
|
||||||
|
|
||||||
|
.progress-field
|
||||||
|
margin 10px 0 5px 0
|
||||||
|
|
||||||
|
.upload-chip
|
||||||
|
min-height 20px
|
||||||
|
height 20px
|
||||||
|
width 50px
|
||||||
|
border-top-right-radius 0
|
||||||
|
border-bottom-right-radius 0
|
||||||
|
|
||||||
|
.upload-progress
|
||||||
|
height 20px
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue