Adjust Apps and User settings to new Vue components

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

.gitattributes

@@ -12,9 +12,4 @@
 /apps/updatenotification/js/updatenotification.js binary
 /apps/updatenotification/js/updatenotification.js.map binary
 
-/settings/js/settings-admin-security.js binary
-/settings/js/settings-admin-security.js.map binary
-/settings/js/settings-vue.js binary
-/settings/js/settings-vue.js.map binary
-/settings/js/0.js binary
-/settings/js/0.js.map binary
+/settings/js/vue* binary

settings/package.json

@@ -1,7 +1,7 @@
 {
   "name": "settings",
   "description": "Nextcloud settings",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>",
   "license": "AGPL3",
   "private": true,
@@ -16,9 +16,9 @@
     "marked": "^0.6.0",
     "nextcloud-axios": "^0.1.3",
     "nextcloud-password-confirmation": "^0.4.1",
-    "nextcloud-vue": "^0.6.0",
+    "nextcloud-vue": "^0.6.3",
     "v-tooltip": "^2.0.0-rc.33",
-    "vue": "^2.5.22",
+    "vue": "^2.6.6",
     "vue-click-outside": "^1.0.7",
     "vue-infinite-loading": "^2.4.3",
     "vue-localstorage": "^0.6.2",
@@ -41,7 +41,7 @@
     "node-sass": "^4.11.0",
     "sass-loader": "^7.1.0",
     "vue-loader": "^15.6.2",
-    "vue-template-compiler": "^2.5.22",
+    "vue-template-compiler": "^2.6.6",
     "webpack": "^4.29.3",
     "webpack-cli": "^3.2.3",
     "webpack-merge": "^4.2.1"

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
 		},
 	}
 }

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;
 		},
 	}
 }