Implement loading indicators
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
parent
8b919ecdc4
commit
7c639a5399
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue