TT#28065 User wants to remove sourcesets

What has been done:
- TT#36196, CallForward: Implement UI delete button and method for
  removing sourceset, plus confirmation dialog component
- TT#36184, CallForward: Implement api layer methods, plus corresponding
  store actions and mutations
- TT#36197, CallForward: Implement success toast, error handling, remove
  dialog and loading animation

Change-Id: I75fd94f9d83bcb28b111c206d5b686f70fe5ddb4

src/api/call-forward.js

@@ -806,3 +806,13 @@ export function createSourcesetWithSource(options) {
             });
     });
 }
+
+export function deleteSourcesetById(id) {
+    return new Promise((resolve, reject) => {
+        Vue.http.delete('/api/cfsourcesets/' + id).then(() => {
+            resolve();
+        }).catch(err => {
+            reject(err);
+        });
+    });
+}

src/components/pages/CallForward/CscSourcesets.vue

@@ -31,6 +31,19 @@
                 class="sources-section"
                 v-if="sourceset.sourcesetId"
             >
+                <div class="sourceset-delete row justify-end">
+                    <q-btn
+                        flat
+                        align="right"
+                        color="negative"
+                        icon="delete"
+                        class="add-destination-button sourceset-delete"
+                        :class="{ 'no-padding': $q.platform.is.mobile, 'mobile-button': $q.platform.is.mobile }"
+                        @click="removeSourceset(sourceset)"
+                    >
+                        {{ deleteSourcesetLabel }}
+                    </q-btn>
+                </div>
                 <div class="sources-title">
                     <q-icon
                         name="contact_phone"
@@ -137,7 +150,8 @@
         QInput,
         QIcon,
         QSelect,
-        QBtn
+        QBtn,
+        Dialog
     } from 'quasar-framework'
     export default {
         name: 'csc-sourcesets',
@@ -178,17 +192,25 @@
             QInput,
             QIcon,
             QSelect,
-            QBtn
+            QBtn,
+            Dialog
         },
         computed: {
             ...mapGetters('callForward', [
                 'addSourceState',
                 'addSourceError',
                 'lastAddedSource',
-                'addSourceFormEnabled'
+                'addSourceFormEnabled',
+                'removeSourcesetError',
+                'removeSourcesetState',
+                'lastRemovedSourceset'
             ]),
             isValid() {
                 return this.source.length > 0 && this.sourcesetName.length > 0;
+            },
+            deleteSourcesetLabel() {
+                return this.$q.platform.is.mobile ? '' :
+                    this.$t('pages.callForward.sources.removeSourcesetButton');
             }
         },
         methods: {
@@ -202,9 +224,14 @@
                 this.tab = 'Everybody';
             },
             sourcesetSources(id) {
-                return this.sourcesets.filter((sourceset) => {
-                    return sourceset.id === id;
-                })[0].sources;
+                if (this.sourcesets[0]) {
+                    return this.sourcesets.filter((sourceset) => {
+                        return sourceset.id === id;
+                    })[0].sources;
+                }
+                else {
+                    return [];
+                }
             },
             destinationsCount(groups) {
                 let groupCollection = [
@@ -250,6 +277,31 @@
             },
             addSource(options) {
                 this.$store.dispatch('callForward/appendSourceToSourceset', options);
+            },
+            removeSourceset(sourceset) {
+                let self = this;
+                Dialog.create({
+                    title: self.$t('pages.callForward.sources.removeSourcesetDialogTitle'),
+                    message: self.$t('pages.callForward.sources.removeSourcesetDialogText', {
+                        sourceset: sourceset.sourcesetName
+                    }),
+                    buttons: [
+                        self.$t('buttons.cancel'),
+                        {
+                            label: self.$t('buttons.remove'),
+                            color: 'negative',
+                            handler () {
+                                self.$store.dispatch('callForward/deleteSourcesetById', sourceset);
+                            }
+                        }
+                    ]
+                });
+            },
+            loadAll() {
+                this.$store.dispatch('callForward/loadDestinations', {
+                    timeset: this.timesetName
+                });
+                this.$store.dispatch('callForward/loadSourcesets');
             }
         },
         watch: {
@@ -272,6 +324,24 @@
                     });
                     this.closeForm();
                 }
+
+            },
+            removeSourcesetState(state) {
+                if (state === 'requesting') {
+                    startLoading;
+                }
+                else if (state === 'failed') {
+                    stopLoading;
+                    showGlobalError(this.removeSourcesetError);
+                }
+                else if (state === 'succeeded') {
+                    stopLoading;
+                    showToast(this.$t('pages.callForward.sources.removeSourcesetSuccessMessage', {
+                        sourceset: this.lastRemovedSourceset
+                    }));
+                    this.loadAll();
+                    this.resetForm();
+                }
             }
         }
     }
@@ -298,7 +368,10 @@
         margin-top 8px
 
     .sources-section
-        padding 30px 0 20px 0
+        padding 0 0 20px 0
+
+        .mobile-button > span > i
+            margin 0
 
     .sources-title
         color $secondary

src/locales/en.json

@@ -201,7 +201,12 @@
                 "addSourcesetErrorMessage": "An error occured while trying to create the sourceset. Please try again.",
                 "addSourceButton": "Add source",
                 "addSourceSuccessMessage": "Added new source {source}",
-                "addSourceErrorMessage": "An error occured while trying to add the source. Please try again."
+                "addSourceErrorMessage": "An error occured while trying to add the source. Please try again.",
+                "removeSourcesetButton": "Delete sourceset",
+                "removeSourcesetErrorMessage": "An error occured while trying to delete the sourceset. Please try again.",
+                "removeSourcesetSuccessMessage": "Removed sourceset {sourceset}",
+                "removeSourcesetDialogTitle": "Remove call forward sourceset",
+                "removeSourcesetDialogText": "You are about to remove the sourceset {sourceset}"
             }
         },
         "home": {

src/store/call-forward.js

@@ -23,7 +23,8 @@ import {
     appendTimeToTimeset,
     loadDestinations,
     createSourcesetWithSource,
-    appendSourceToSourceset
+    appendSourceToSourceset,
+    deleteSourcesetById
 } from '../api/call-forward';
 
 const RequestState = {
@@ -61,6 +62,9 @@ export default {
         addTimeError: null,
         addSourcesetState: RequestState.button,
         addSourcesetError: null,
+        removeSourcesetState: RequestState.button,
+        removeSourcesetError: null,
+        lastRemovedSourceset: null,
         lastAddedSourceset: null,
         addSourceState: RequestState.button,
         addSourceError: null,
@@ -152,6 +156,16 @@ export default {
         },
         addSourceFormEnabled(state) {
             return state.addSourceFormEnabled;
+        },
+        removeSourcesetState(state) {
+            return state.removeSourcesetState;
+        },
+        removeSourcesetError(state) {
+            return state.removeSourcesetError ||
+                i18n.t('pages.callForward.sources.removeSourcesetErrorMessage');
+        },
+        lastRemovedSourceset(state) {
+            return state.lastRemovedSourceset;
         }
     },
     mutations: {
@@ -349,6 +363,21 @@ export default {
         },
         setAddSourceFormEnabled(state, value) {
             state.addSourceFormEnabled = value;
+        },
+        removeSourcesetRequesting(state) {
+            state.removeSourcesetState = RequestState.requesting;
+            state.removeSourcesetError = null;
+        },
+        removeSourcesetSucceeded(state) {
+            state.removeSourcesetState  = RequestState.succeeded;
+            state.removeSourcesetError  = null;
+        },
+        removeSourcesetFailed(state, error) {
+            state.removeSourcesetState  = RequestState.failed;
+            state.removeSourcesetError  = error;
+        },
+        setLastRemovedSourceset(state, value) {
+            state.lastRemovedSourceset = value;
         }
     },
     actions: {
@@ -629,6 +658,15 @@ export default {
             }).catch((err) => {
                 context.commit('addSourceFailed', err.message);
             });
+        },
+        deleteSourcesetById(context, options) {
+            context.commit('removeSourcesetRequesting');
+            deleteSourcesetById(options.sourcesetId).then(() => {
+                context.commit('setLastRemovedSourceset', options.sourcesetName);
+                context.commit('removeSourcesetSucceeded');
+            }).catch((err) => {
+                context.commit('removeSourcesetFailed', err.message);
+            });
         }
     }
 };