sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#47516 User can remove sound file

Browse Source 
Change-Id: If09ef31e305d7358a563a8bf3a16c2ec30082c6b
changes/21/28721/5
Robert Axelsen 7 years ago
parent 35e9c8d4bf
commit b39ff78a35
12 changed files with 232 additions and 124 deletions
Show Stats Download Patch File Download Diff File

4
src/api/pbx-config.js
Unescape View File

@ -798,3 +798,7 @@ export function playSoundFile(options) {
});
});
}
export function removeSoundFile(id) {
return Vue.http.delete('api/soundfiles/' + id);
}

222
src/components/form/CscSoundFileUpload.vue
Unescape View File

@ -1,105 +1,117 @@
<template>
<q-field
class="csc-upload-field"
:icon="icon"
:label="label"
>
<div
v-if="label"
class="row items-end"
<div>
<q-field
class="csc-upload-field"
:icon="icon"
:label="label"
>
<slot
class="col-auto"
name="additional"
<div
v-if="label"
class="row items-end"
>
</slot>
<slot
class="col-auto"
name="additional"
>
</slot>
<q-input
class="col-xl col-sm-12"
:disable="isPlaying"
dark
readonly
:value="inputValue"
:after="inputButtons"
>
</q-input>
</div>
<q-input
class="col-xl col-sm-12"
v-if="floatLabel"
:disable="isPlaying"
dark
readonly
:float-label="floatLabel"
:value="inputValue"
:after="inputButtons"
/>
</div>
<q-input
v-if="floatLabel"
:disable="isPlaying"
dark
readonly
:float-label="floatLabel"
:value="inputValue"
:after="inputButtons"
/>
<input
v-show="false"
:accept="fileTypes"
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"
<input
v-show="false"
:accept="fileTypes"
ref="fileUpload"
type="file"
@change="inputChange"
/>
</div>
<csc-audio-player
ref="audioPlayer"
class="csc-greeting-player"
:file-url="fileUrl"
:loaded="loaded"
:disable="disablePlayer"
@load="init"
@playing="audioPlayerPlaying"
@stopped="audioPlayerStopped"
/>
<div
class="csc-file-upload-actions"
>
<q-btn
v-if="selectedFile != null"
flat
color="default"
icon="clear"
@click="cancel"
<div
v-show="uploading"
class="row no-wrap csc-upload-progress-field"
>
{{ $t('buttons.cancel') }}
</q-btn>
<q-btn
flat
v-if="selectedFile != null && !uploading"
color="primary"
icon="cloud_upload"
@click="upload"
<q-chip
square
color="primary"
class="upload-chip"
>
{{ `${progress}%` }}
</q-chip>
<q-progress
stripe
animate
color="primary"
:percentage="progress"
class="upload-progress"
/>
</div>
<csc-audio-player
ref="audioPlayer"
class="csc-greeting-player"
:file-url="fileUrl"
:loaded="loaded"
:disable="disablePlayer"
@load="init"
@playing="audioPlayerPlaying"
@stopped="audioPlayerStopped"
/>
<div
class="csc-file-upload-actions"
>
{{ $t('buttons.upload') }}
</q-btn>
<q-btn
:disable="isPlaying"
flat
v-if="uploaded && selectedFile == null && !disable"
<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
:disable="isPlaying"
flat
v-if="uploaded && selectedFile == null"
color="primary"
:icon="removeIcon"
@click="remove"
>
{{ removeLabel }}
</q-btn>
</div>
</q-field>
<q-inner-loading
:visible="updating"
>
<q-spinner-dots
v-if="updating"
color="primary"
icon="undo"
@click="undo"
>
{{ $t('buttons.resetDefaults') }}
</q-btn>
</div>
</q-field>
:size="40"
/>
</q-inner-loading>
</div>
</template>
<script>
@ -109,7 +121,9 @@
QField,
QBtn,
QChip,
QProgress
QProgress,
QInnerLoading,
QSpinnerDots
} from 'quasar-framework'
export default {
name: 'csc-sound-file-upload',
@ -119,7 +133,9 @@
QField,
QBtn,
QChip,
QProgress
QProgress,
QInnerLoading,
QSpinnerDots
},
props: [
'icon',
@ -132,7 +148,9 @@
'fileUrl',
'loaded',
'disable',
'floatLabel'
'floatLabel',
'deleteTerm',
'updating'
],
data () {
return {
@ -145,7 +163,7 @@
return (this.selectedFile ? true : false) || !this.uploaded;
},
inputValue() {
if(this.selectedFile === null) {
if (this.selectedFile === null) {
return this.value;
}
else {
@ -177,6 +195,22 @@
);
}
return buttons;
},
removeLabel() {
if (this.deleteTerm === 'remove') {
return this.$t('buttons.removeFile');
}
else {
return this.$t('buttons.resetDefaults');
}
},
removeIcon() {
if (this.deleteTerm === 'remove') {
return 'delete';
}
else {
return 'undo';
}
}
},
methods: {
@ -212,8 +246,8 @@
reset() {
this.cancel();
},
undo() {
this.$emit('reset');
remove() {
this.$emit('remove');
},
init() {
this.$emit('init');

11
src/components/pages/PbxConfiguration/CscPbxSoundGroup.vue
Unescape View File

@ -13,6 +13,8 @@
:key="item.id"
:item="item"
:group="groupLabel"
:updating="isRemoveFileRequesting(item.id)"
@remove-file="removeFile"
/>
</q-list>
</q-collapsible>
@ -31,6 +33,9 @@
QCollapsible,
QCheckbox
} from 'quasar-framework'
import {
mapGetters
} from 'vuex'
export default {
name: 'csc-pbx-sound-group',
props: {
@ -55,6 +60,9 @@
}
},
computed: {
...mapGetters('pbxConfig', [
'isRemoveFileRequesting'
]),
groupLabelClasses() {
let classes = [];
if (this.invalidGroup) {
@ -64,6 +72,9 @@
}
},
methods: {
removeFile(item) {
this.$emit('remove-file', item);
}
},
watch: {
}

11
src/components/pages/PbxConfiguration/CscPbxSoundItem.vue
Unescape View File

@ -15,8 +15,11 @@
:stop-all="!isLastPlayed(item.id)"
:uploaded="file"
:disable="true"
@init="initSoundFileAudio"
:invalid="isInvalid"
:updating="updating"
delete-term="remove"
@remove="removeFile"
@init="initSoundFileAudio"
>
<div
slot="additional"
@ -54,7 +57,8 @@
name: 'csc-pbx-sound-item',
props: {
item: Object,
group: String
group: String,
updating: Boolean
},
components: {
CscSoundFileUpload,
@ -135,6 +139,9 @@
this.playSoundFile();
this.$refs.uploadSoundFile.setPlayingTrue();
this.$refs.uploadSoundFile.setPausedFalse();
},
removeFile() {
this.$emit('remove-file', this.item)
}
},
watch: {

19
src/components/pages/PbxConfiguration/CscPbxSoundSet.vue
Unescape View File

@ -94,6 +94,7 @@
:group="group"
:group-label="groupLabel(group.name)"
:key="index"
@remove-file="removeFile"
/>
</q-item-tile>
</q-item-main>
@ -130,8 +131,10 @@
/>
</q-item-tile>
</q-item-side>
<q-inner-loading :visible="isLoading">
<q-spinner-mat
<q-inner-loading
:visible="isLoading"
>
<q-spinner-dots
size="60px"
color="primary"
/>
@ -151,7 +154,7 @@
QField,
QInput,
QInnerLoading,
QSpinnerMat,
QSpinnerDots,
QToggle,
QTooltip
} from 'quasar-framework'
@ -184,7 +187,7 @@
QField,
QInput,
QInnerLoading,
QSpinnerMat,
QSpinnerDots,
QToggle,
QTooltip
},
@ -416,6 +419,14 @@
}
});
return count > 0;
},
removeFile(item) {
let options = {
id: item.id,
handle: item.handle,
soundSet: this.setModel
};
this.$emit('remove-file', options);
}
},
watch: {

32
src/components/pages/PbxConfiguration/CscPbxSoundSets.vue
Unescape View File

@ -54,6 +54,7 @@
@save-name="saveSoundSetName"
@save-description="saveSoundSetDescription"
@save-contract-default="saveContractDefault"
@remove-file="removeSoundFileDialog"
/>
</q-list>
<div
@ -63,11 +64,17 @@
{{ $t('pbxConfig.noSoundSets') }}
</div>
<csc-remove-dialog
ref="removeDialog"
ref="removeSoundSetDialog"
:title="$t('pbxConfig.removeSoundSetTitle')"
:message="removeDialogMessage"
:message="removeSoundSetDialogMessage"
@remove="removeSoundSet"
/>
<csc-remove-dialog
ref="removeSoundFileDialog"
:title="$t('pbxConfig.removeSoundFileTitle')"
:message="removeSoundFileDialogMessage"
@remove="removeFile"
/>
</csc-page>
</template>
@ -103,7 +110,8 @@
data () {
return {
currentRemovingSoundSet: null,
addFormEnabled: false,
currentRemovingSoundFile: null,
addFormEnabled: false
}
},
mounted() {
@ -127,18 +135,29 @@
isMobile() {
return !!Platform.is.mobile;
},
removeDialogMessage() {
removeSoundSetDialogMessage() {
if (this.currentRemovingSoundSet !== null) {
return this.$t('pbxConfig.removeSoundSetText', {
set: this.currentRemovingSoundSet.name
});
}
},
removeSoundFileDialogMessage() {
if (this.currentRemovingSoundFile !== null) {
return this.$t('pbxConfig.removeSoundFileText', {
handle: this.currentRemovingSoundFile.handle
});
}
}
},
methods: {
removeSoundSetDialog(soundSet) {
this.currentRemovingSoundSet = soundSet;
this.$refs.removeDialog.open();
this.$refs.removeSoundSetDialog.open();
},
removeSoundFileDialog(item) {
this.currentRemovingSoundFile = item;
this.$refs.removeSoundFileDialog.open();
},
removeSoundSet() {
this.$store.dispatch('pbxConfig/removeSoundSet', this.currentRemovingSoundSet);
@ -172,6 +191,9 @@
},
isSoundSetInvalid(setId) {
return this.soundSetInvalidCount(setId) > 0;
},
removeFile() {
this.$store.dispatch('pbxConfig/removeSoundFile', this.currentRemovingSoundFile);
}
},
watch: {

14
src/components/pages/Voicebox/Voicebox.vue
Unescape View File

@ -29,12 +29,13 @@
:progress="uploadBusyProgress"
:uploading="uploadBusyGreetingRequesting"
:uploaded="busyGreetingId !== null"
@upload="uploadBusyGreeting"
@abort="abortBusy"
@reset="deleteBusy"
:file-url="playBusyGreetingUrl"
:loaded="playBusyGreetingLoaded"
@init="initBusyGreetingAudio"
delete-term="revert"
@remove="deleteBusy"
@upload="uploadBusyGreeting"
@abort="abortBusy"
/>
<csc-sound-file-upload
ref="uploadUnavail"
@ -45,12 +46,13 @@
:progress="uploadUnavailProgress"
:uploading="uploadUnavailGreetingRequesting"
:uploaded="unavailGreetingId !== null"
@upload="uploadUnavailGreeting"
@abort="abortUnavail"
@reset="deleteUnavail"
:file-url="playUnavailGreetingUrl"
:loaded="playUnavailGreetingLoaded"
@init="initUnavailGreetingAudio"
delete-term="revert"
@remove="deleteUnavail"
@upload="uploadUnavailGreeting"
@abort="abortUnavail"
/>
</div>
</div>

10
src/locales/en.json
Unescape View File

@ -27,7 +27,8 @@
"selectNew": "Select new",
"resetDefaults": "Reset to defaults",
"install": "Install",
"addNew": "Add new"
"addNew": "Add new",
"removeFile": "Remove file"
},
"form": {
"destinationLabel": "Destination"
@ -452,7 +453,9 @@
"addSoundSet": "Add Sound Set",
"language": "Language",
"invalidFileTooltip": "This sound set is incomplete ({amount} file is missing)",
"invalidFilesTooltip": "This sound set is incomplete ({amount} files are missing)"
"invalidFilesTooltip": "This sound set is incomplete ({amount} files are missing)",
"removeSoundFileTitle": "Remove sound file",
"removeSoundFileText": "You are about to remove the sound file for {handle}"
},
"callBlocking": {
"privacyEnabledToast": "Your number is hidden to the callee",
@ -528,7 +531,8 @@
"deleteGreetingErrorMessage": "An error occured while trying to delete the greeting sound. Please try again",
"deleteCustomDialogTitle": "Reset busy greeting sound",
"deleteCustomDialogText": "You are about to reset the custom {type} greeting sound to defaults",
"unavailable": "unavailable"
"unavailable": "unavailable",
"busy": "busy"
},
"conferencing": {
"joinText": "Join conference with name"

13
src/store/pbx-config/actions.js
Unescape View File

@ -46,7 +46,8 @@ import {
setSoundSetContractDefault,
getSoundSetWithFiles,
playSoundFile,
createSoundSet
createSoundSet,
removeSoundFile
} from '../../api/pbx-config'
export default {
@ -671,5 +672,15 @@ export default {
}).catch((err) => {
context.commit('addItemFailed', err.message);
});
},
removeSoundFile(context, options) {
context.commit('removeItemRequesting', options.id);
removeSoundFile(options.id).then(() => {
return context.dispatch('reloadSoundSet', options.soundSet);
}).then(() => {
context.commit('removeItemSucceeded');
}).catch((err) => {
context.commit('removeItemFailed', err.message);
});
}
}

9
src/store/pbx-config/getters.js
Unescape View File

@ -326,7 +326,9 @@ export default {
}
},
soundSets(state) {
return state.soundSetsOrdered;
return state.soundSetsList.map((setId) => {
return state.soundSets[setId];
});
},
soundSetFilesLoading(state) {
return (id) => {
@ -385,5 +387,10 @@ export default {
}
return count;
}
},
isRemoveFileRequesting(state) {
return (id) => {
return id ? state.removeItem === id : false;
}
}
}

9
src/store/pbx-config/mutations.js
Unescape View File

@ -482,11 +482,10 @@ export default {
state.listSoundSetsState = RequestState.succeeded;
state.listSoundSetsError = null;
state.soundSets = {};
state.soundSetsOrdered = [];
sets.items.forEach((set) => {
state.soundSets[set.id] = set;
state.soundSetsOrdered.push(set);
});
state.soundSetsList = Object.keys(state.soundSets);
},
listSoundSetsFailed(state, error) {
state.listState = RequestState.failed;
@ -516,11 +515,7 @@ export default {
state.soundSetReloadingState = RequestState.succeeded;
state.soundSetReloadingError = null;
Vue.set(state.soundSets, set.id, set);
for (let i = 0; i < state.soundSetsOrdered.length; i++) {
if(state.soundSetsOrdered[i].id === set.id) {
state.soundSetsOrdered[i] = set;
}
}
state.soundSetsList = Object.keys(state.soundSets);
},
soundSetReloadingFailed(state, err) {
state.soundSetReloadingState = RequestState.failed;

2
src/store/pbx-config/state.js
Unescape View File

@ -82,7 +82,7 @@ export default {
listSoundSetsState: RequestState.initiated,
listSoundSetsError: null,
soundSets: {},
soundSetsOrdered: [],
soundSetsList: [],
soundSetFilesStates: {},
soundSetFilesErrors: {},
soundSetReloading: null,

Write Preview
Loading…
Cancel
Save