TT#28067 Remove source from sourceset

What has been done:
- TT#36185, CallForward: Implement api layer methods, plus corresponding
  store actions and mutations
- TT#36191, CallForward: Implement UI deletion icon and method, plus
  confirmation dialog component
- TT#36193, CallForward: Implement success toast, error handling and
  loading animation

Change-Id: I4ac5136e4565448bd0ccaa3da924868a1c57d66f

src/api/call-forward.js

@@ -816,3 +816,30 @@ export function deleteSourcesetById(id) {
         });
     });
 }
+
+export function deleteItemFromArrayByIndex(options) {
+    return options.array.filter((item, index) => {
+        return options.index !== index;
+    })
+}
+
+export function deleteSourceFromSourcesetByIndex(options) {
+    return new Promise((resolve, reject) => {
+        let sources = deleteItemFromArrayByIndex({
+            array: options.sources,
+            index: options.sourceIndex
+        });
+        let headers = {
+            'Content-Type': 'application/json-patch+json'
+        };
+        Vue.http.patch('/api/cfsourcesets/' + options.sourceset.sourcesetId, [{
+            op: 'replace',
+            path: '/sources',
+            value: sources
+        }], { headers: headers }).then(() => {
+            resolve();
+        }).catch(err => {
+            reject(err);
+        });
+    });
+}

src/components/pages/CallForward/CscSourcesets.vue

@@ -49,17 +49,25 @@
                         name="contact_phone"
                         class="sources-icon"
                     />
-                        {{ $t('pages.callForward.sources.sourcesTitleMode',
-                            { mode: capitalizedMode(sourceset.sourcesetMode) }) }}
+                    {{ $t('pages.callForward.sources.sourcesTitleMode',
+                        { mode: capitalizedMode(sourceset.sourcesetMode) }) }}
                 </div>
                 <q-list no-border>
                     <q-item
-                        v-for="source in sourcesetSources(sourceset.sourcesetId)"
-                        class="source-item"
                         highlight
                         separator
+                        v-for="(source, index) in sourcesetSources(sourceset.sourcesetId)"
+                        class="source-item"
                     >
+                        <q-item-main>
                         {{ source.source }}
+                        </q-item-main>
+                        <q-item-side
+                            right
+                            icon="delete"
+                            color="negative"
+                            @click="removeSource(sourceset, source.source, index)"
+                        />
                     </q-item>
                 </q-list>
                 <q-btn
@@ -147,12 +155,16 @@
         QItem,
         QItemMain,
         QItemTile,
+        QItemSide,
         QInput,
         QIcon,
         QSelect,
         QBtn,
-        Dialog
+        Dialog,
+        Alert
     } from 'quasar-framework'
+    import 'quasar-extras/animate/bounceInRight.css'
+    import 'quasar-extras/animate/bounceOutRight.css'
     export default {
         name: 'csc-sourcesets',
         props: {
@@ -189,11 +201,13 @@
             QItem,
             QItemMain,
             QItemTile,
+            QItemSide,
             QInput,
             QIcon,
             QSelect,
             QBtn,
-            Dialog
+            Dialog,
+            Alert
         },
         computed: {
             ...mapGetters('callForward', [
@@ -203,7 +217,10 @@
                 'addSourceFormEnabled',
                 'removeSourcesetError',
                 'removeSourcesetState',
-                'lastRemovedSourceset'
+                'lastRemovedSourceset',
+                'removeSourceState',
+                'removeSourceError',
+                'lastRemovedSource'
             ]),
             isValid() {
                 return this.source.length > 0 && this.sourcesetName.length > 0;
@@ -214,6 +231,46 @@
             }
         },
         methods: {
+            removeSource(sourceset, source, index) {
+                let self = this;
+                let sources = this.sourcesetSources(sourceset.sourcesetId);
+                let isLastSource = sources.length === 1;
+                if (isLastSource) {
+                    this.alertDeleteLastSource();
+                }
+                else {
+                    Dialog.create({
+                        title: self.$t('pages.callForward.sources.removeSourceDialogTitle'),
+                        message: self.$t('pages.callForward.sources.removeSourceDialogText', {
+                            source: source
+                        }),
+                        buttons: [
+                            self.$t('buttons.cancel'),
+                            {
+                                label: self.$t('buttons.remove'),
+                                color: 'negative',
+                                handler () {
+                                    self.$store.dispatch('callForward/deleteSourceFromSourcesetByIndex', {
+                                        sourceset: sourceset,
+                                        sources: sources,
+                                        sourceIndex: index
+                                    });
+                                }
+                            }
+                        ]
+                    });
+                }
+            },
+            alertDeleteLastSource() {
+                Alert.create({
+                    enter: 'bounceInRight',
+                    leave: 'bounceOutRight',
+                    position: 'top-center',
+                    html: this.$t('pages.callForward.sources.removeLastSourceDialogText'),
+                    icon: 'warning',
+                    dismissible: true
+                });
+            },
             capitalizedMode(mode) {
                 return `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`;
             },
@@ -297,10 +354,13 @@
                     ]
                 });
             },
-            loadAll() {
+            loadDestinations() {
                 this.$store.dispatch('callForward/loadDestinations', {
                     timeset: this.timesetName
                 });
+            },
+            loadAll() {
+                this.loadDestinations();
                 this.$store.dispatch('callForward/loadSourcesets');
             }
         },
@@ -319,9 +379,7 @@
                         source: this.lastAddedSource
                     }));
                     this.$store.dispatch('callForward/loadSourcesets');
-                    this.$store.dispatch('callForward/loadDestinations', {
-                        timeset: this.timesetName
-                    });
+                    this.loadDestinations();
                     this.closeForm();
                 }
 
@@ -342,6 +400,22 @@
                     this.loadAll();
                     this.resetForm();
                 }
+            },
+            removeSourceState(state) {
+                if (state === 'requesting') {
+                    startLoading();
+                }
+                else if (state === 'failed') {
+                    stopLoading();
+                    showGlobalError(this.removeSourceError);
+                }
+                else if (state === 'succeeded') {
+                    stopLoading();
+                    showToast(this.$t('pages.callForward.sources.removeSourceSuccessMessage', {
+                        source: this.lastRemovedSource
+                    }));
+                    this.loadAll();
+                }
             }
         }
     }

src/locales/en.json

@@ -12,7 +12,8 @@
         "edit": "Edit",
         "add": "Add",
         "moveUp": "Move up",
-        "moveDown": "Move down"
+        "moveDown": "Move down",
+        "dismiss": "Dismiss"
     },
     "toasts": {
         "callAvailable": "You are now able to start and receive calls",
@@ -206,7 +207,12 @@
                 "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}"
+                "removeSourcesetDialogText": "You are about to remove the sourceset {sourceset}",
+                "removeSourceSuccessMessage": "Removed source {source}",
+                "removeSourceErrorMessage": "An error occured while trying to remove the source. Please try again.",
+                "removeSourceDialogTitle": "Remove call forward source",
+                "removeSourceDialogText": "You are about to remove the source entry for {source}",
+                "removeLastSourceDialogText": "Removing the last source entry is not allowed."
             }
         },
         "home": {

src/store/call-forward.js

@@ -24,7 +24,8 @@ import {
     loadDestinations,
     createSourcesetWithSource,
     appendSourceToSourceset,
-    deleteSourcesetById
+    deleteSourcesetById,
+    deleteSourceFromSourcesetByIndex
 } from '../api/call-forward';
 
 const RequestState = {
@@ -69,6 +70,9 @@ export default {
         addSourceState: RequestState.button,
         addSourceError: null,
         lastAddedSource: null,
+        removeSourceState: RequestState.button,
+        removeSourceError: null,
+        lastRemovedSource: null,
         activeForm: '',
         formType: '',
         destinationsetId: '',
@@ -166,6 +170,16 @@ export default {
         },
         lastRemovedSourceset(state) {
             return state.lastRemovedSourceset;
+        },
+        removeSourceState(state) {
+            return state.removeSourceState;
+        },
+        removeSourceError(state) {
+            return state.removeSourceError ||
+                i18n.t('pages.callForward.sources.removeSourceErrorMessage');
+        },
+        lastRemovedSource(state) {
+            return state.lastRemovedSource;
         }
     },
     mutations: {
@@ -378,6 +392,21 @@ export default {
         },
         setLastRemovedSourceset(state, value) {
             state.lastRemovedSourceset = value;
+        },
+        removeSourceRequesting(state) {
+            state.removeSourceState = RequestState.requesting;
+            state.removeSourceError = null;
+        },
+        removeSourceSucceeded(state) {
+            state.removeSourceState = RequestState.succeeded;
+            state.removeSourceError = null;
+        },
+        removeSourceFailed(state, error) {
+            state.removeSourceState = RequestState.failed;
+            state.removeSourceError = error;
+        },
+        setLastRemovedSource(state, value) {
+            state.lastRemovedSource = value;
         }
     },
     actions: {
@@ -667,6 +696,15 @@ export default {
             }).catch((err) => {
                 context.commit('removeSourcesetFailed', err.message);
             });
+        },
+        deleteSourceFromSourcesetByIndex(context, options) {
+            context.commit('removeSourceRequesting');
+            deleteSourceFromSourcesetByIndex(options).then(() => {
+                context.commit('setLastRemovedSource', options.sources[options.sourceIndex].source);
+                context.commit('removeSourceSucceeded');
+            }).catch((err) => {
+                context.commit('removeSourceFailed', err.message);
+            });
         }
     }
 };

t/api/call-forward.js

@@ -15,7 +15,8 @@ import {
     deleteTimeFromTimeset,
     convertAddTime,
     addNameIdAndTerminating,
-    createSourcesetWithSource
+    createSourcesetWithSource,
+    deleteItemFromArrayByIndex
 } from '../../src/api/call-forward';
 import { assert } from 'chai';
 
@@ -967,4 +968,25 @@ describe('CallForward', function() {
 
     });
 
+    it('should attempt to remove source from sources array', function(){
+
+        let options = {
+            array: [
+                { source: 1111 },
+                { source: 2222 },
+                { source: 3333 },
+                { source: 4444 }
+            ],
+            index: 1
+        };
+        let result = [
+            { source: 1111 },
+            { source: 3333 },
+            { source: 4444 }
+        ];
+
+        assert.deepEqual(deleteItemFromArrayByIndex(options), result);
+
+    });
+
 });