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