Adjust Apps and User settings to new Vue components

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

2 files changed, 46 insertions, 46 deletions

diff --git a/settings/src/views/Apps.vue b/settings/src/views/Apps.vue
index 790b5db73b8..59fc85b73fa 100644
--- a/settings/src/views/Apps.vue
+++ b/settings/src/views/Apps.vue
@@ -21,25 +21,27 @@
   -->
 
 <template>
-	<div id="content" class="app-settings" :class="{ 'with-app-sidebar': currentApp}">
-		<app-navigation :menu="menu" />
-		<div id="app-content" class="app-settings-content" :class="{ 'icon-loading': loadingList }">
+	<AppContent app-name="settings" :class="{ 'with-app-sidebar': currentApp}"
+	:content-class="{ 'icon-loading': loadingList }" :navigation-class="{ 'icon-loading': loading }">
+		<template #navigation>
+			<ul id="appscategories">
+				<AppNavigationItem v-for="item in menu" :key="item.key" :item="item" />
+			</ul>
+		</template>
+		<template #content class="app-settings-content" :class="{ 'icon-loading': loadingList }">
 			<app-list :category="category" :app="currentApp" :search="searchQuery"></app-list>
-		</div>
-		<div id="app-sidebar" v-if="id && currentApp">
+		</template>
+		<template #sidebar v-if="id && currentApp" >
 			<app-details :category="category" :app="currentApp"></app-details>
-		</div>
-	</div>
+		</template>
+	</AppContent>
 </template>
 
-
 <script>
-import { AppNavigation } from 'nextcloud-vue';
+import { AppContent, AppNavigationItem } from 'nextcloud-vue';
 import appList from '../components/appList';
 import Vue from 'vue';
 import VueLocalStorage from 'vue-localstorage'
-import Multiselect from 'vue-multiselect';
-import api from '../store/api';
 import AppDetails from '../components/appDetails';
 
 Vue.use(VueLocalStorage)
@@ -57,9 +59,10 @@ export default {
 		}
 	},
 	components: {
+		AppContent,
 		AppDetails,
-		AppNavigation,
 		appList,
+		AppNavigationItem,
 	},
 	methods: {
 		setSearch(query) {
@@ -161,10 +164,7 @@ export default {
 			];
 
 			if (!this.settings.appstoreEnabled) {
-				return {
-					id: 'appscategories',
-					items: defaultCategories,
-				}
+				return defaultCategories
 			}
 
 			if (this.$store.getters.getUpdateCount > 0) {
@@ -204,11 +204,7 @@ export default {
 			});
 
 			// Return
-			return {
-				id: 'appscategories',
-				items: categories,
-				loading: this.loading
-			}
+			return categories
 		},
 	}
 }
diff --git a/settings/src/views/Users.vue b/settings/src/views/Users.vue
index d8a25d37f23..49d37faa4ae 100644
--- a/settings/src/views/Users.vue
+++ b/settings/src/views/Users.vue
@@ -21,16 +21,20 @@
   -->
 
 <template>
-	<div id="content" class="app-settings">
-		<app-navigation :menu="menu">
-			<template slot="settings-content">
+	<AppContent app-name="settings" :navigation-class="{ 'icon-loading': loading }">
+		<template #navigation>
+			<AppNavigationNew button-id="new-user-button" :text="t('settings','New user')" button-class="icon-add" @click="toggleNewUserMenu" />
+			<ul id="usergrouplist">
+				<AppNavigationItem v-for="item in menu" :key="item.key" :item="item" />
+			</ul>
+			<AppNavigationSettings>
 				<div>
 					<p>{{t('settings', 'Default quota:')}}</p>
 					<multiselect :value="defaultQuota" :options="quotaOptions"
-								tag-placeholder="create" :placeholder="t('settings', 'Select default quota')"
-								label="label" track-by="id" class="multiselect-vue"
-								:allowEmpty="false" :taggable="true"
-								@tag="validateQuota" @input="setDefaultQuota">
+								 tag-placeholder="create" :placeholder="t('settings', 'Select default quota')"
+								 label="label" track-by="id" class="multiselect-vue"
+								 :allowEmpty="false" :taggable="true"
+								 @tag="validateQuota" @input="setDefaultQuota">
 					</multiselect>
 
 				</div>
@@ -50,14 +54,21 @@
 					<input type="checkbox" id="showStoragePath" class="checkbox" v-model="showStoragePath">
 					<label for="showStoragePath">{{t('settings', 'Show storage path')}}</label>
 				</div>
-			</template>
-		</app-navigation>
-		<user-list :users="users" :showConfig="showConfig" :selectedGroup="selectedGroup" :externalActions="externalActions" />
-	</div>
+			</AppNavigationSettings>
+		</template>
+		<template #content>
+			<user-list :users="users" :showConfig="showConfig" :selectedGroup="selectedGroup" :externalActions="externalActions" />
+		</template>
+	</AppContent>
 </template>
 
 <script>
-import { AppNavigation } from 'nextcloud-vue';
+import {
+	AppContent,
+	AppNavigationItem,
+	AppNavigationNew,
+	AppNavigationSettings,
+} from 'nextcloud-vue';
 import userList from '../components/userList';
 import Vue from 'vue';
 import VueLocalStorage from 'vue-localstorage'
@@ -70,9 +81,12 @@ export default {
 	name: 'Users',
 	props: ['selectedGroup'],
 	components: {
-		AppNavigation,
+		AppContent,
+		AppNavigationItem,
+		AppNavigationNew,
+		AppNavigationSettings,
 		userList,
-		Multiselect
+		Multiselect,
 	},
 	beforeMount() {
 		this.$store.commit('initGroups', {
@@ -412,17 +426,7 @@ export default {
 			}
 			groups.unshift(addGroup);
 
-			// Return
-			return {
-				id: 'usergrouplist',
-				new: {
-					id:'new-user-button',
-					text: t('settings','New user'),
-					icon: 'icon-add',
-					action: this.toggleNewUserMenu
-				},
-				items: groups
-			}
+			return groups;
 		},
 	}
 }