Implement loading indicators

Signed-off-by: Julius Härtl <jus@bitgrid.net>

settings/src/components/appList.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div id="app-content" class="app-settings-content" :class="{ 'with-app-sidebar': app }">
+	<div id="app-content" class="app-settings-content" :class="{ 'with-app-sidebar': app, 'icon-loading': loading }">
 		<div id="apps-list" class="installed" v-if="useListView">
 			<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" />
 		</div>
@@ -44,7 +44,7 @@
 			<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" :list-view="false" />
 		</div>
 
-		<div id="apps-list" class="installed" v-if="search !== ''">
+		<div id="apps-list" class="installed" v-if="search !== '' && searchApps.length > 0">
 			<div class="section">
 				<div></div>
 				<h2>{{ t('settings', 'Results from other categories') }}</h2>
@@ -52,7 +52,7 @@
 			<app-item v-for="app in searchApps" :key="app.id" :app="app" :category="category" :list-view="true" />
 		</div>
 
-		<div id="apps-list-empty" class="emptycontent emptycontent-search" v-if="apps.length == 0 && loading">
+		<div id="apps-list-empty" class="emptycontent emptycontent-search" v-if="!loading && searchApps.length === 0 && apps.length === 0">
 			<div id="app-list-empty-icon" class="icon-search"></div>
 			<h2>{{ t('settings', 'No apps found for your versoin')}}</h2>
 		</div>
@@ -74,21 +74,10 @@ export default {
 		Multiselect,
 		appItem
 	},
-	data() {
-		return {
-			loading: false,
-			scrolled: false,
-		};
-	},
-	watch: {
-
-	},
-	mounted() {
-		//this.$store.dispatch('getApps', { category: this.category });
-		this.$store.dispatch('getGroups');
-
-	},
 	computed: {
+		loading() {
+			return this.$store.getters.loading('list');
+		},
 		apps() {
 			return this.$store.getters.getApps
 				.filter(app => app.name.toLowerCase().search(this.search.toLowerCase()) !== -1)
@@ -100,14 +89,8 @@ export default {
 						return (!this.apps.find(_app => _app.id === app.id));
 					}
 					return false;
-
 				});
 		},
-		groups() {
-			return this.$store.getters.getGroups
-				.filter(group => group.id !== 'disabled')
-				.sort((a, b) => a.name.localeCompare(b.name));
-		},
 		useAppStoreView() {
 			return !this.useListView && !this.useBundleView;
 		},
@@ -120,6 +103,6 @@ export default {
 	},
 	methods: {
 
-	}
+	},
 }
 </script>

settings/src/store/apps.js

@@ -22,12 +22,15 @@
 
 import api from './api';
 import axios from 'axios/index';
+import Vue from 'vue';
 
 const state = {
 	apps: [],
 	allApps: [],
 	categories: [],
-	updateCount: 0
+	updateCount: 0,
+	loading: {},
+	loadingList: false,
 };
 
 const mutations = {
@@ -93,10 +96,23 @@ const mutations = {
 		state.apps = [];
 		state.categories = [];
 		state.updateCount = 0;
-	}
+	},
+	startLoading(state, id) {
+		Vue.set(state.loading, id, true);
+		console.log(state.loading);
+	},
+	stopLoading(state, id) {
+		Vue.set(state.loading, id, false);
+		console.log(state.loading);
+	},
 };
 
 const getters = {
+	loading(state) {
+		return function(id) {
+			return state.loading[id];
+		}
+	},
 	getCategories(state) {
 		return state.categories;
 	},
@@ -166,28 +182,34 @@ const actions = {
 	},
 
 	getApps(context, { category }) {
+		context.commit('startLoading', 'list');
 		return api.get(OC.generateUrl(`settings/apps/list?category=${category}`))
 			.then((response) => {
 				context.commit('setApps', response.data.apps);
+				context.commit('stopLoading', 'list');
 				return true;
 			})
 			.catch((error) => context.commit('API_FAILURE', error))
 	},
 
 	getAllApps(context) {
+		context.commit('startLoading', 'all');
 		return api.get(OC.generateUrl(`settings/apps/list`))
 			.then((response) => {
 				context.commit('setAllApps', response.data.apps);
+				context.commit('stopLoading', 'all');
 				return true;
 			})
 			.catch((error) => context.commit('API_FAILURE', error))
 	},
 
 	getCategories(context) {
+		context.commit('startLoading', 'categories');
 		return api.get(OC.generateUrl('settings/apps/categories'))
 			.then((response) => {
 				if (response.data.length > 0) {
 					context.commit('appendCategories', response.data);
+					context.commit('stopLoading', 'categories');
 					return true;
 				}
 				return false;

settings/src/views/Apps.vue

@@ -69,6 +69,7 @@ export default {
 		this.$store.dispatch('getCategories');
 		this.$store.dispatch('getApps', {category: this.category});
 		this.$store.dispatch('getAllApps');
+		this.$store.dispatch('getGroups');
 		this.$store.commit('setUpdateCount', this.$store.getters.getServerData.updateCount)
 		console.log(this.$store.getters.getServerData.updateCount);
 	},
@@ -93,6 +94,9 @@ export default {
 		}
 	},
 	computed: {
+		loading() {
+			return this.$store.getters.loading('categories');
+		},
 		currentApp() {
 			return this.apps.find(app => app.id === this.id );
 		},
@@ -102,9 +106,6 @@ export default {
 		apps() {
 			return this.$store.getters.getApps;
 		},
-		loading() {
-			return Object.keys(this.apps).length === 0;
-		},
 		updateCount() {
 			return this.$store.getters.getUpdateCount;
 		},
@@ -161,7 +162,7 @@ export default {
 			if (!this.settings.appstoreEnabled) {
 				return {
 					id: 'appscategories',
-					items: defaultCategories
+					items: defaultCategories,
 				}
 			}
 
@@ -204,7 +205,8 @@ export default {
 			// Return
 			return {
 				id: 'appscategories',
-				items: categories
+				items: categories,
+				loading: this.loading
 			}
 		},
 	}