What has been done: - TT#44664, Voicebox: As a Customer, I want to upload a custom "unavailable" greeting sound - TT#44665, Voicebox: As a Customer, I want to delete/reset the custom "unavailable" greeting sound Change-Id: Ifd266e0af78a6844135a8bd024998b70789efe5echanges/38/24238/9
raxelsen
7 years ago
parent
f872d4de20
commit
399de962c5
@ -1,202 +0,0 @@
|
|||||||
|
|
||||||
<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