Migrate to @nextcloud/vue 1.x.x

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 229 insertions, 254 deletions

diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue
index 74b5fbde0fa..c125edcb93c 100644
--- a/apps/settings/src/views/Apps.vue
+++ b/apps/settings/src/views/Apps.vue
@@ -27,7 +27,57 @@
 		:navigation-class="{ 'icon-loading': loading }">
 		<AppNavigation>
 			<ul id="appscategories">
-				<AppNavigationItem v-for="item in menu" :key="item.key" :item="item" />
+				<AppNavigationItem
+					id="app-category-your-apps"
+					:to="{ name: 'apps' }"
+					:exact="true"
+					icon="icon-category-installed"
+					:title="t('settings', 'Your apps')" />
+				<AppNavigationItem
+					id="app-category-enabled"
+					:to="{ name: 'apps-category', params: { category: 'enabled' } }"
+					icon="icon-category-enabled"
+					:title="t('settings', 'Active apps')" />
+				<AppNavigationItem
+					id="app-category-disabled"
+					:to="{ name: 'apps-category', params: { category: 'disabled' } }"
+					icon="icon-category-disabled"
+					:title="t('settings', 'Disabled apps')" />
+				<AppNavigationItem
+					v-if="updateCount > 0"
+					id="app-category-updates"
+					:to="{ name: 'apps-category', params: { category: 'updates' } }"
+					icon="icon-download"
+					:title="t('settings', 'Updates')">
+					<AppNavigationCounter slot="counter">
+						{{ updateCount }}
+					</AppNavigationCounter>
+				</AppNavigationItem>
+				<AppNavigationItem
+					id="app-category-your-bundles"
+					:to="{ name: 'apps-category', params: { category: 'app-bundles' } }"
+					icon="icon-category-app-bundles"
+					:title="t('settings', 'App bundles')" />
+
+				<AppNavigationSpacer />
+
+				<!-- App store categories -->
+				<template v-if="settings.appstoreEnabled">
+					<AppNavigationItem
+						v-for="cat in categories"
+						:key="'icon-category-' + cat.ident"
+						:icon="'icon-category-' + cat.ident"
+						:to="{
+							name: 'apps-category',
+							params: { category: cat.ident },
+						}"
+						:title="cat.displayName" />
+				</template>
+
+				<AppNavigationItem
+					id="app-developer-docs"
+					href="settings.developerDocumentation"
+					:title="t('settings', 'Developer documentation') + ' ↗'" />
 			</ul>
 		</AppNavigation>
 		<AppContent class="app-settings-content" :class="{ 'icon-loading': loadingList }">
@@ -40,16 +90,17 @@
 </template>
 
 <script>
-import {
-	AppContent,
-	AppNavigation,
-	AppNavigationItem,
-	AppSidebar,
-	Content,
-} from 'nextcloud-vue'
-import AppList from '../components/AppList'
+import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
+import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import AppNavigationSpacer from '@nextcloud/vue/dist/Components/AppNavigationSpacer'
+import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
+import Content from '@nextcloud/vue/dist/Components/Content'
 import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
+
+import AppList from '../components/AppList'
 import AppDetails from '../components/AppDetails'
 
 Vue.use(VueLocalStorage)
@@ -58,12 +109,14 @@ export default {
 	name: 'Apps',
 	components: {
 		AppContent,
+		AppDetails,
+		AppList,
 		AppNavigation,
+		AppNavigationCounter,
 		AppNavigationItem,
+		AppNavigationSpacer,
 		AppSidebar,
 		Content,
-		AppDetails,
-		AppList,
 	},
 	props: {
 		category: {
@@ -102,95 +155,6 @@ export default {
 		settings() {
 			return this.$store.getters.getServerData
 		},
-
-		// BUILD APP NAVIGATION MENU OBJECT
-		menu() {
-			// Data provided php side
-			let categories = this.$store.getters.getCategories
-			categories = Array.isArray(categories) ? categories : []
-
-			// Map groups
-			categories = categories.map(category => {
-				const item = {}
-				item.id = 'app-category-' + category.ident
-				item.icon = 'icon-category-' + category.ident
-				item.classes = []							// empty classes, active will be set later
-				item.router = {								// router link to
-					name: 'apps-category',
-					params: { category: category.ident },
-				}
-				item.text = category.displayName
-
-				return item
-			})
-
-			// Add everyone group
-			const defaultCategories = [
-				{
-					id: 'app-category-your-apps',
-					classes: [],
-					router: { name: 'apps' },
-					icon: 'icon-category-installed',
-					text: t('settings', 'Your apps'),
-				},
-				{
-					id: 'app-category-enabled',
-					classes: [],
-					icon: 'icon-category-enabled',
-					router: { name: 'apps-category', params: { category: 'enabled' } },
-					text: t('settings', 'Active apps'),
-				}, {
-					id: 'app-category-disabled',
-					classes: [],
-					icon: 'icon-category-disabled',
-					router: { name: 'apps-category', params: { category: 'disabled' } },
-					text: t('settings', 'Disabled apps'),
-				},
-			]
-
-			if (!this.settings.appstoreEnabled) {
-				return defaultCategories
-			}
-
-			if (this.$store.getters.getUpdateCount > 0) {
-				defaultCategories.push({
-					id: 'app-category-updates',
-					classes: [],
-					icon: 'icon-download',
-					router: { name: 'apps-category', params: { category: 'updates' } },
-					text: t('settings', 'Updates'),
-					utils: { counter: this.$store.getters.getUpdateCount },
-				})
-			}
-
-			defaultCategories.push({
-				id: 'app-category-app-bundles',
-				classes: [],
-				icon: 'icon-category-app-bundles',
-				router: { name: 'apps-category', params: { category: 'app-bundles' } },
-				text: t('settings', 'App bundles'),
-			})
-
-			categories = defaultCategories.concat(categories)
-
-			// Set current group as active
-			const activeGroup = categories.findIndex(group => group.id === 'app-category-' + this.category)
-			if (activeGroup >= 0) {
-				categories[activeGroup].classes.push('active')
-			} else {
-				categories[0].classes.push('active')
-			}
-
-			categories.push({
-				id: 'app-developer-docs',
-				classes: [],
-				href: this.settings.developerDocumentation,
-				text: t('settings', 'Developer documentation') + ' ↗',
-			})
-
-			// Return
-			return categories
-		},
 	},
 	watch: {
 		category: function(val, old) {
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index 7954cf42905..01fb9a9b48a 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -28,7 +28,70 @@
 				button-class="icon-add"
 				@click="toggleNewUserMenu" />
 			<ul id="usergrouplist">
-				<AppNavigationItem v-for="item in menu" :key="item.key" :item="item" />
+				<AppNavigationItem
+					id="addgroup"
+					ref="addGroup"
+					:edit-placeholder="t('settings', 'Enter group name')"
+					:editable="true"
+					:loading="loadingAddGroup"
+					:title="t('settings', 'Add group')"
+					icon="icon-add"
+					@click="toggleAddGroupEntry(true)"
+					@update:title="createGroup" />
+				<AppNavigationItem
+					id="everyone"
+					:exact="true"
+					:title="t('settings', 'Everyone')"
+					:to="{ name: 'users' }"
+					icon="icon-contacts-dark">
+					<AppNavigationCounter v-if="userCount > 0" slot="counter">
+						{{ userCount }}
+					</AppNavigationCounter>
+				</AppNavigationItem>
+				<AppNavigationItem
+					id="admin"
+					:exact="true"
+					:title="t('settings', 'Admins')"
+					:to="{ name: 'users', params: { selectedGroup: 'admin' } }"
+					icon="icon-user-admin">
+					<AppNavigationCounter v-if="adminGroupMenu.count" slot="counter">
+						{{ adminGroupMenu.count }}
+					</AppNavigationCounter>
+				</AppNavigationItem>
+
+				<!-- Hide the disabled if none, if we don't have the data (-1) show it -->
+				<AppNavigationItem
+					v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1"
+					id="disabled"
+					:exact="true"
+					:title="t('settings', 'Disabled users')"
+					:to="{ name: 'users', params: { selectedGroup: 'disabled' } }"
+					icon="icon-disabled-users">
+					<AppNavigationCounter v-if="disabledGroupMenu.usercount > 0" slot="counter">
+						{{ disabledGroupMenu.usercount }}
+					</AppNavigationCounter>
+				</AppNavigationItem>
+
+				<AppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
+				<AppNavigationItem
+					v-for="group in groupList"
+					:id="group.id"
+					:key="group.id"
+					:exact="true"
+					:title="group.title"
+					:to="{ name: 'users', params: { selectedGroup: group.id } }">
+					<AppNavigationCounter v-if="group.count" slot="counter">
+						{{ group.count }}
+					</AppNavigationCounter>
+					<template slot="actions">
+						<ActionButton
+							v-if="group.id !== 'admin' && group.id !== 'disabled' && settings.isAdmin"
+							icon="icon-delete"
+							@click="removeGroup(group.id)">
+							{{ t('settings', 'Remove group') }}
+						</ActionButton>
+					</template>
+				</AppNavigationItem>
 			</ul>
 			<AppNavigationSettings>
 				<div>
@@ -85,17 +148,19 @@
 </template>
 
 <script>
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
+import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
+import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
+import Content from '@nextcloud/vue/dist/Components/Content'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
-import {
-	AppContent,
-	AppNavigation,
-	AppNavigationItem,
-	AppNavigationNew,
-	AppNavigationSettings,
-	Content,
-	Multiselect,
-} from 'nextcloud-vue'
+
 import UserList from '../components/UserList'
 
 Vue.use(VueLocalStorage)
@@ -103,14 +168,17 @@ Vue.use(VueLocalStorage)
 export default {
 	name: 'Users',
 	components: {
+		ActionButton,
 		AppContent,
 		AppNavigation,
+		AppNavigationCaption,
+		AppNavigationCounter,
 		AppNavigationItem,
 		AppNavigationNew,
 		AppNavigationSettings,
 		Content,
-		UserList,
 		Multiselect,
+		UserList,
 	},
 	props: {
 		selectedGroup: {
@@ -125,7 +193,6 @@ export default {
 			// temporary value used for multiselect change
 			selectedQuota: false,
 			externalActions: [],
-			showAddGroupEntry: false,
 			loadingAddGroup: false,
 			showConfig: {
 				showStoragePath: false,
@@ -140,6 +207,9 @@ export default {
 		users() {
 			return this.$store.getters.getUsers
 		},
+		groups() {
+			return this.$store.getters.getGroups
+		},
 		usersOffset() {
 			return this.$store.getters.getUsersOffset
 		},
@@ -206,134 +276,20 @@ export default {
 
 		},
 
-		// BUILD APP NAVIGATION MENU OBJECT
-		menu() {
-			// Data provided php side
-			const self = this
-			let groups = this.$store.getters.getGroups
-			groups = Array.isArray(groups) ? groups : []
-
-			// Map groups
-			groups = groups.map(group => {
-				const item = {}
-				item.id = group.id.replace(' ', '_')
-				item.key = item.id
-				item.utils = {}
-
-				// router link to
-				item.router = {
-					name: 'group',
-					params: { selectedGroup: group.id },
-				}
-
-				// group name
-				item.text = group.name
-				item.title = group.name
-
-				// users count for all groups
-				if (group.usercount - group.disabled > 0 || group.usercount === -1) {
-					item.utils.counter = group.usercount - group.disabled
-				}
-
-				if (item.id !== 'admin' && item.id !== 'disabled' && this.settings.isAdmin) {
-					// add delete button on real groups
-					item.utils.actions = [{
-						icon: 'icon-delete',
-						text: t('settings', 'Remove group'),
-						action: function() {
-							self.removeGroup(group.id)
-						},
-					}]
-				}
-				return item
-			})
-
-			// Every item is added on top of the array, so we're going backward
-			// Groups, separator, disabled, admin, everyone
-
-			// Add separator
-			let realGroups = groups.find((group) => { return group.id !== 'disabled' && group.id !== 'admin' })
-			realGroups = typeof realGroups === 'undefined' ? [] : realGroups
-			realGroups = Array.isArray(realGroups) ? realGroups : [realGroups]
-			if (realGroups.length > 0) {
-				const separator = {
-					caption: true,
-					text: t('settings', 'Groups'),
-				}
-				groups.unshift(separator)
-			}
-
-			// Adjust admin and disabled groups
-			const adminGroup = groups.find(group => group.id === 'admin')
-			const disabledGroup = groups.find(group => group.id === 'disabled')
-
-			// filter out admin and disabled
-			groups = groups.filter(group => ['admin', 'disabled'].indexOf(group.id) === -1)
-
-			if (adminGroup && adminGroup.text) {
-				adminGroup.text = t('settings', 'Admins')	// rename admin group
-				adminGroup.icon = 'icon-user-admin'			// set icon
-				groups.unshift(adminGroup)					// add admin group if present
-			}
-			if (disabledGroup && disabledGroup.text) {
-				disabledGroup.text = t('settings', 'Disabled users')	// rename disabled group
-				disabledGroup.icon = 'icon-disabled-users'				// set icon
-				if (disabledGroup.utils && (
-					disabledGroup.utils.counter > 0						// add disabled if not empty
-					|| disabledGroup.utils.counter === -1)				// add disabled if ldap enabled
-				) {
-					groups.unshift(disabledGroup)
-					if (disabledGroup.utils.counter === -1) {
-						// hides the counter instead of showing -1
-						delete disabledGroup.utils.counter
-					}
-				}
-			}
-
-			// Add everyone group
-			const everyoneGroup = {
-				id: 'everyone',
-				key: 'everyone',
-				icon: 'icon-contacts-dark',
-				router: { name: 'users' },
-				text: t('settings', 'Everyone'),
-			}
-			// users count
-			if (this.userCount > 0) {
-				Vue.set(everyoneGroup, 'utils', {
-					counter: this.userCount,
-				})
-			}
-			groups.unshift(everyoneGroup)
-
-			const addGroup = {
-				id: 'addgroup',
-				key: 'addgroup',
-				icon: 'icon-add',
-				text: t('settings', 'Add group'),
-				classes: this.loadingAddGroup ? 'icon-loading-small' : '',
-			}
-			if (this.showAddGroupEntry) {
-				Vue.set(addGroup, 'edit', {
-					text: t('settings', 'Add group'),
-					action: this.createGroup,
-					reset: function() {
-						self.showAddGroupEntry = false
-					},
-				})
-				addGroup.classes = 'editing'
-			} else {
-				Vue.set(addGroup, 'action', function() {
-					self.showAddGroupEntry = true
-					// focus input
-					Vue.nextTick(() => {
-						window.addgroup.querySelector('form > input[type="text"]').focus()
-					})
-				})
-			}
-			groups.unshift(addGroup)
+		groupList() {
+			const groups = Array.isArray(this.groups) ? this.groups : []
 
 			return groups
+				// filter out disabled and admin
+				.filter(group => group.id !== 'disabled' && group.id !== 'admin')
+				.map(group => this.formatGroupMenu(group))
+		},
+
+		adminGroupMenu() {
+			return this.formatGroupMenu(this.groups.find(group => group.id === 'admin'))
+		},
+		disabledGroupMenu() {
+			return this.formatGroupMenu(this.groups.find(group => group.id === 'disabled'))
 		},
 	},
 	beforeMount() {
@@ -446,26 +402,81 @@ export default {
 		/**
 		 * Create a new group
 		 *
-		 * @param {Object} event The form submit event
+		 * @param {string} gid The group id
 		 */
-		createGroup(event) {
-			const gid = event.target[0].value
-			this.loadingAddGroup = true
-			this.$store.dispatch('addGroup', gid)
-				.then(() => {
-					this.showAddGroupEntry = false
-					this.loadingAddGroup = false
-					this.$router.push({
-						name: 'group',
-						params: {
-							selectedGroup: gid,
-						},
-					})
+		async createGroup(gid) {
+			// group is not valid
+			if (gid.trim() === '') {
+				Vue.nextTick(() => {
+					this.toggleAddGroupEntry(true)
 				})
-				.catch(() => {
-					this.loadingAddGroup = false
+				return
+			}
+
+			try {
+				this.loadingAddGroup = true
+				await this.$store.dispatch('addGroup', gid.trim())
+
+				this.toggleAddGroupEntry(false)
+				this.$router.push({
+					name: 'group',
+					params: {
+						selectedGroup: gid.trim(),
+					},
 				})
+			} catch {
+				this.toggleAddGroupEntry(true)
+			} finally {
+				this.loadingAddGroup = false
+			}
+		},
+
+		/**
+		 * Toggle the add group entry editing state
+		 * @param {boolean} [state] set state instead of toggling
+		 */
+		toggleAddGroupEntry(state) {
+			if (state === undefined) {
+				state = !this.$refs.addGroup.editing
+			}
+			this.$refs.addGroup.editing = state
+
+			// focus input
+			Vue.nextTick(() => {
+				if (this.$refs.addGroup.$el) {
+					const input = this.$refs.addGroup.$el.querySelector('form > input[type="text"]')
+					if (input) {
+						input.focus()
+					}
+				}
+			})
+		},
+
+		/**
+		 * Format a group to a menu entry
+		 * @param {Object} group the group
+		 * @returns {Object}
+		 */
+		formatGroupMenu(group) {
+			const item = {}
+			item.id = group.id.replace(' ', '_')
+			item.title = group.name
+			item.usercount = group.usercount
+
+			// users count for all groups
+			if (group.usercount - group.disabled > 0) {
+				item.count = group.usercount - group.disabled
+			}
+
+			return item
 		},
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+// force hiding the editing action for the add group entry
+#usergrouplist #addgroup::v-deep .app-navigation-entry__utils {
+	display: none;
+}
+</style>