From 52895cb41ef061900081e82f6232c417f2aa221b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 30 May 2018 10:40:50 +0200 Subject: [PATCH] Add loading indicator and disable buttons during actions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- settings/src/components/appList/appItem.vue | 21 +++++-- settings/src/components/appManagement.vue | 2 +- settings/src/store/apps.js | 63 +++++++++++++++------ 3 files changed, 61 insertions(+), 25 deletions(-) diff --git a/settings/src/components/appList/appItem.vue b/settings/src/components/appList/appItem.vue index 7a9d3e9c9f..9c784c11de 100644 --- a/settings/src/components/appList/appItem.vue +++ b/settings/src/components/appList/appItem.vue @@ -63,11 +63,12 @@
- - - - - +
{{ app.error }}
+
+ + + +
@@ -101,7 +102,6 @@ return { isSelected: false, groupCheckedAppsData: false, - loading: false, scrolled: false, filterId: '', }; @@ -114,6 +114,15 @@ this.filterId = 'invertIconApps' + Math.floor((Math.random() * 100 )) + new Date().getSeconds() + new Date().getMilliseconds(); }, computed: { + loading() { + let self = this; + return function(id) { + return self.$store.getters.loading(id); + } + }, + installing() { + return this.$store.getters.loading('install'); + }, filterUrl() { return `url(#${this.filterId})`; }, diff --git a/settings/src/components/appManagement.vue b/settings/src/components/appManagement.vue index 06df59b32b..b2b78baaf5 100644 --- a/settings/src/components/appManagement.vue +++ b/settings/src/components/appManagement.vue @@ -82,7 +82,7 @@ .catch((error) => { OC.Notification.show(error)}); }, install(appId) { - this.$store.dispatch('installApp', { appId: appId }) + this.$store.dispatch('enableApp', { appId: appId }) .then((response) => { OC.Settings.Apps.rebuildNavigation(); }) .catch((error) => { OC.Notification.show(error)}); }, diff --git a/settings/src/store/apps.js b/settings/src/store/apps.js index 09bc00a396..eb58444393 100644 --- a/settings/src/store/apps.js +++ b/settings/src/store/apps.js @@ -66,6 +66,16 @@ const mutations = { state.allApps = apps; }, + setError(state, {appId, error}) { + let app = state.apps.find(app => app.id === appId); + app.error = error; + }, + + clearError(state, {appId, error}) { + let app = state.apps.find(app => app.id === appId); + app.error = null; + }, + enableApp(state, {appId, groups}) { let app = state.apps.find(app => app.id === appId); app.active = true; @@ -98,12 +108,22 @@ const mutations = { state.updateCount = 0; }, startLoading(state, id) { - Vue.set(state.loading, id, true); - console.log(state.loading); + if (Array.isArray(id)) { + id.forEach((_id) => { + Vue.set(state.loading, _id, true); + }) + } else { + Vue.set(state.loading, id, true); + } }, stopLoading(state, id) { - Vue.set(state.loading, id, false); - console.log(state.loading); + if (Array.isArray(id)) { + id.forEach((_id) => { + Vue.set(state.loading, _id, false); + }) + } else { + Vue.set(state.loading, id, false); + } }, }; @@ -145,14 +165,22 @@ const actions = { apps = [appId]; } return api.requireAdmin().then((response) => { - return api.post(OC.generateUrl(`settings/apps/enable`), {appIds: apps, groups: groups}) + context.commit('startLoading', apps); + context.commit('startLoading', 'install'); + return api.post(OC.generateUrl(`settings/apps/enable`), {appIds: apps, groups: groups}) .then((response) => { + context.commit('stopLoading', apps); + context.commit('stopLoading', 'install'); apps.forEach(_appId => { context.commit('enableApp', {appId: _appId, groups: groups}); }); return true; }) - .catch((error) => context.commit('APPS_API_FAILURE', { appId, error })) + .catch((error) => { + context.commit('stopLoading', apps); + context.commit('stopLoading', 'install'); + context.commit('APPS_API_FAILURE', { appId, error }) + }) }).catch((error) => context.commit('API_FAILURE', { appId, error })); }, disableApp(context, { appId }) { @@ -163,35 +191,34 @@ const actions = { apps = [appId]; } return api.requireAdmin().then((response) => { + context.commit('startLoading', apps); return api.post(OC.generateUrl(`settings/apps/disable`), {appIds: apps}) .then((response) => { + context.commit('stopLoading', apps); apps.forEach(_appId => { context.commit('disableApp', _appId); }); return true; }) - .catch((error) => context.commit('APPS_API_FAILURE', { appId, error })) - }).catch((error) => context.commit('API_FAILURE', { appId, error })); - }, - // TODO: use enable app - installApp(context, { appId }) { - return api.requireAdmin().then((response) => { - return api.get(OC.generateUrl(`settings/apps/enable/${appId}`)) - .then((response) => { - context.commit('enableApp', appId); - return true; + .catch((error) => { + context.commit('stopLoading', apps); + context.commit('APPS_API_FAILURE', { appId, error }) }) - .catch((error) => context.commit('APPS_API_FAILURE', { appId, error })) }).catch((error) => context.commit('API_FAILURE', { appId, error })); }, uninstallApp(context, { appId }) { return api.requireAdmin().then((response) => { + context.commit('startLoading', appId); return api.get(OC.generateUrl(`settings/apps/uninstall/${appId}`)) .then((response) => { + context.commit('stopLoading', appId); context.commit('uninstallApp', appId); return true; }) - .catch((error) => context.commit('APPS_API_FAILURE', { appId, error })) + .catch((error) => { + context.commit('stopLoading', appId); + context.commit('APPS_API_FAILURE', { appId, error }) + }) }).catch((error) => context.commit('API_FAILURE', { appId, error })); },