From b39ff78a353a81acb88bb5db808a8a229ca5ba9d Mon Sep 17 00:00:00 2001
From: Robert Axelsen <raxelsen@sipwise.com>
Date: Wed, 3 Apr 2019 10:50:55 +0200
Subject: [PATCH] TT#47516 User can remove sound file

Change-Id: If09ef31e305d7358a563a8bf3a16c2ec30082c6b
---
 src/api/pbx-config.js                         |   4 +
 src/components/form/CscSoundFileUpload.vue    | 222 ++++++++++--------
 .../PbxConfiguration/CscPbxSoundGroup.vue     |  11 +
 .../PbxConfiguration/CscPbxSoundItem.vue      |  11 +-
 .../pages/PbxConfiguration/CscPbxSoundSet.vue |  19 +-
 .../PbxConfiguration/CscPbxSoundSets.vue      |  32 ++-
 src/components/pages/Voicebox/Voicebox.vue    |  14 +-
 src/locales/en.json                           |  10 +-
 src/store/pbx-config/actions.js               |  13 +-
 src/store/pbx-config/getters.js               |   9 +-
 src/store/pbx-config/mutations.js             |   9 +-
 src/store/pbx-config/state.js                 |   2 +-
 12 files changed, 232 insertions(+), 124 deletions(-)

diff --git a/src/api/pbx-config.js b/src/api/pbx-config.js
index 50bfe623..54447232 100644
--- a/src/api/pbx-config.js
+++ b/src/api/pbx-config.js
@@ -798,3 +798,7 @@ export function playSoundFile(options) {
             });
     });
 }
+
+export function removeSoundFile(id) {
+    return Vue.http.delete('api/soundfiles/' + id);
+}
diff --git a/src/components/form/CscSoundFileUpload.vue b/src/components/form/CscSoundFileUpload.vue
index 8f0b9ce6..9e96cbd0 100644
--- a/src/components/form/CscSoundFileUpload.vue
+++ b/src/components/form/CscSoundFileUpload.vue
@@ -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');
diff --git a/src/components/pages/PbxConfiguration/CscPbxSoundGroup.vue b/src/components/pages/PbxConfiguration/CscPbxSoundGroup.vue
index 148297fb..f81e122f 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSoundGroup.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSoundGroup.vue
@@ -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: {
         }
diff --git a/src/components/pages/PbxConfiguration/CscPbxSoundItem.vue b/src/components/pages/PbxConfiguration/CscPbxSoundItem.vue
index 50bd19ea..c81a3fc6 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSoundItem.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSoundItem.vue
@@ -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: {
diff --git a/src/components/pages/PbxConfiguration/CscPbxSoundSet.vue b/src/components/pages/PbxConfiguration/CscPbxSoundSet.vue
index 01e41b2a..d998e5f9 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSoundSet.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSoundSet.vue
@@ -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: {
diff --git a/src/components/pages/PbxConfiguration/CscPbxSoundSets.vue b/src/components/pages/PbxConfiguration/CscPbxSoundSets.vue
index 736f43d2..107d224c 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSoundSets.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSoundSets.vue
@@ -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: {
diff --git a/src/components/pages/Voicebox/Voicebox.vue b/src/components/pages/Voicebox/Voicebox.vue
index 80de78ce..19774e19 100644
--- a/src/components/pages/Voicebox/Voicebox.vue
+++ b/src/components/pages/Voicebox/Voicebox.vue
@@ -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>
diff --git a/src/locales/en.json b/src/locales/en.json
index 1c611583..fad9fa3f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -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"
diff --git a/src/store/pbx-config/actions.js b/src/store/pbx-config/actions.js
index 467a6fab..3c26665b 100644
--- a/src/store/pbx-config/actions.js
+++ b/src/store/pbx-config/actions.js
@@ -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);
+        });
     }
 }
diff --git a/src/store/pbx-config/getters.js b/src/store/pbx-config/getters.js
index 841bbcfc..18e627a1 100644
--- a/src/store/pbx-config/getters.js
+++ b/src/store/pbx-config/getters.js
@@ -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;
+        }
     }
 }
diff --git a/src/store/pbx-config/mutations.js b/src/store/pbx-config/mutations.js
index b40bbbcf..1feedfda 100644
--- a/src/store/pbx-config/mutations.js
+++ b/src/store/pbx-config/mutations.js
@@ -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;
diff --git a/src/store/pbx-config/state.js b/src/store/pbx-config/state.js
index 3ede0245..b0e13a0b 100644
--- a/src/store/pbx-config/state.js
+++ b/src/store/pbx-config/state.js
@@ -82,7 +82,7 @@ export default {
     listSoundSetsState: RequestState.initiated,
     listSoundSetsError: null,
     soundSets: {},
-    soundSetsOrdered: [],
+    soundSetsList: [],
     soundSetFilesStates: {},
     soundSetFilesErrors: {},
     soundSetReloading: null,