Continued the upgrade to proper router link and added navigationItem router linkTo capability

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

7 files changed, 48 insertions, 35 deletions

diff --git a/settings/src/components/appNavigation/navigationItem.vue b/settings/src/components/appNavigation/navigationItem.vue
index 1f158367ef7..047b0e1bfbe 100644
--- a/settings/src/components/appNavigation/navigationItem.vue
+++ b/settings/src/components/appNavigation/navigationItem.vue
@@ -5,11 +5,17 @@
 		<div v-if="item.bullet" class="app-navigation-entry-bullet" :style="{ backgroundColor: item.bullet }"></div>
 
 		<!-- Main link -->
-		<a :href="(item.href) ? item.href : '#' " @click="toggleCollapse" :class="item.icon" >
+		<a v-if="item.href" :href="(item.href) ? item.href : '#' " @click="toggleCollapse" :class="item.icon" >
 			<img v-if="item.iconUrl" :alt="item.text" :src="item.iconUrl">
 			{{item.text}}
 		</a>
 
+		<!-- Router link if specified. href OR router -->
+		<router-link :to="item.router" v-else-if="item.router" :class="item.icon" >
+			<img v-if="item.iconUrl" :alt="item.text" :src="item.iconUrl">
+			{{item.text}}
+		</router-link>	
+
 		<!-- Popover, counter and button(s) -->
 		<div v-if="item.utils" class="app-navigation-entry-utils">
 			<ul>
diff --git a/settings/src/components/userList.vue b/settings/src/components/userList.vue
index 28ff66465e2..2323317e982 100644
--- a/settings/src/components/userList.vue
+++ b/settings/src/components/userList.vue
@@ -156,11 +156,11 @@ export default {
 			return this.$store.getters.getServerData;
 		},
 		filteredUsers() {
-			if (this.$route.hash === '#group_disabled') {
+			if (this.selectedGroup === 'disabled') {
 				let disabledUsers = this.users.filter(user => user.enabled !== true);
 				if (disabledUsers.length===0 && this.$refs.infiniteLoading && this.$refs.infiniteLoading.isComplete) {
 					// disabled group is empty, redirection to all users
-					window.location.hash = '#group_everyone';
+					this.$router.push('users');
 					this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
 				}
 				return disabledUsers;
@@ -169,7 +169,7 @@ export default {
 		},
 		groups() {
 			// data provided php side + remove the disabled group
-			return this.$store.getters.getGroups.filter(group => group.id !== '_disabled');
+			return this.$store.getters.getGroups.filter(group => group.id !== 'disabled');
 		},
 		subAdminsGroups() {
 			// data provided php side
diff --git a/settings/src/main.js b/settings/src/main.js
index 62b5b04f78d..a03fe1b16e1 100644
--- a/settings/src/main.js
+++ b/settings/src/main.js
@@ -11,7 +11,7 @@ Vue.prototype.t = t;
 Vue.prototype.OC = OC;
 Vue.prototype.oc_userconfig = oc_userconfig;
 
-window.app = new Vue({
+const app = new Vue({
 	router,
 	store,
 	render: h => h(App)
diff --git a/settings/src/router.js b/settings/src/router.js
index e23a07e3ffc..a1d6470ceb1 100644
--- a/settings/src/router.js
+++ b/settings/src/router.js
@@ -15,14 +15,14 @@ Vue.use(Router);
 
 export default new Router({
 	mode: 'history',
-	base: window.location.pathname,
-	parseQuery: function(query) {console.log(query);},
 	routes: [{
-		path: '/settings/users',
+		path: '(/index.php)?/settings/users',
 		component: Users,
 		props: true,
+		name: 'users',
 		children: [{
 			  path: ':selectedGroup',
+			  name: 'group',
 			  component: Users
 			},
 		]
diff --git a/settings/src/store/api.js b/settings/src/store/api.js
index ef1ba4e56d6..b0e59918bb1 100644
--- a/settings/src/store/api.js
+++ b/settings/src/store/api.js
@@ -37,6 +37,8 @@ export default {
 	 *			.then((response) => {API success})
 	 *			.catch((error) => {throw error;});
 	 *	}).catch((error) => {requireAdmin OR API failure});
+	 * 
+	 * @returns {Promise}
 	 */
 	requireAdmin() {
 		return new Promise(function(resolve, reject) {
diff --git a/settings/src/store/users.js b/settings/src/store/users.js
index cd5e2bbbaa9..6523c85037a 100644
--- a/settings/src/store/users.js
+++ b/settings/src/store/users.js
@@ -90,7 +90,7 @@ const mutations = {
 	enableDisableUser(state, { userid, enabled }) {
 		state.users.find(user => user.id == userid).enabled = enabled;
 		// increment or not
-		state.groups.find(group => group.id == '_disabled').usercount += enabled ? -1 : 1;
+		state.groups.find(group => group.id == 'disabled').usercount += enabled ? -1 : 1;
 		state.userCount += enabled ? 1 : -1;
 		console.log(enabled);
 	},
@@ -144,7 +144,7 @@ const actions = {
 	 * @param {int} options.limit List number to return from offset
 	 * @param {string} options.search Search amongst users
 	 * @param {string} options.group Get users from group
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	getUsers(context, { offset, limit, search, group }) {
 		search = typeof search === 'string' ? search : '';
@@ -179,7 +179,7 @@ const actions = {
 	 * @param {Object} options
 	 * @param {int} options.offset List offset to request
 	 * @param {int} options.limit List number to return from offset
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	getUsersFromList(context, { offset, limit, search }) {
 		search = typeof search === 'string' ? search : '';
@@ -201,7 +201,7 @@ const actions = {
 	 * @param {Object} options
 	 * @param {int} options.offset List offset to request
 	 * @param {int} options.limit List number to return from offset
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	getUsersFromGroup(context, { groupid, offset, limit }) {
 		return api.get(OC.linkToOCS(`cloud/users/${groupid}/details?offset=${offset}&limit=${limit}`, 2))
@@ -221,7 +221,7 @@ const actions = {
 	 * 
 	 * @param {Object} context
 	 * @param {string} gid Group id
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	addGroup(context, gid) {
 		return api.requireAdmin().then((response) => {
@@ -236,7 +236,7 @@ const actions = {
 	 * 
 	 * @param {Object} context
 	 * @param {string} gid Group id
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	removeGroup(context, gid) {
 		return api.requireAdmin().then((response) => {
@@ -253,7 +253,7 @@ const actions = {
 	 * @param {Object} options
 	 * @param {string} options.userid User id
 	 * @param {string} options.gid Group id
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	addUserGroup(context, { userid, gid }) {
 		return api.requireAdmin().then((response) => {
@@ -270,7 +270,7 @@ const actions = {
 	 * @param {Object} options
 	 * @param {string} options.userid User id
 	 * @param {string} options.gid Group id
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	removeUserGroup(context, { userid, gid }) {
 		return api.requireAdmin().then((response) => {
@@ -287,7 +287,7 @@ const actions = {
 	 * @param {Object} options
 	 * @param {string} options.userid User id
 	 * @param {string} options.gid Group id
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	addUserSubAdmin(context, { userid, gid }) {
 		return api.requireAdmin().then((response) => {
@@ -304,7 +304,7 @@ const actions = {
 	 * @param {Object} options
 	 * @param {string} options.userid User id
 	 * @param {string} options.gid Group id
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	removeUserSubAdmin(context, { userid, gid }) {
 		return api.requireAdmin().then((response) => {
@@ -319,7 +319,7 @@ const actions = {
 	 * 
 	 * @param {Object} context
 	 * @param {string} userid User id 
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	deleteUser(context, { userid }) {
 		return api.requireAdmin().then((response) => {
@@ -340,7 +340,7 @@ const actions = {
 	 * @param {string} options.groups User groups
 	 * @param {string} options.subadmin User subadmin groups
 	 * @param {string} options.quota User email
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	addUser({context, dispatch}, { userid, password, email, groups, subadmin, quota, language }) {
 		return api.requireAdmin().then((response) => {
@@ -355,7 +355,7 @@ const actions = {
 	 * 
 	 * @param {Object} context
 	 * @param {string} userid User id 
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	addUserData(context, userid) {
 		return api.requireAdmin().then((response) => {
@@ -371,7 +371,7 @@ const actions = {
 	 * @param {Object} options
 	 * @param {string} options.userid User id
 	 * @param {boolean} options.enabled User enablement status
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	enableDisableUser(context, { userid, enabled = true }) {
 		let userStatus = enabled ? 'enable' : 'disable';
@@ -390,7 +390,7 @@ const actions = {
 	 * @param {string} options.userid User id
 	 * @param {string} options.key User field to edit
 	 * @param {string} options.value Value of the change
-	 * @returns {Promise}
+	 * @returns Promise
 	 */
 	setUserData(context, { userid, key, value }) {
 		let allowedEmpty = ['email', 'displayname'];
diff --git a/settings/src/views/Users.vue b/settings/src/views/Users.vue
index 051f6338434..cad152f71ef 100644
--- a/settings/src/views/Users.vue
+++ b/settings/src/views/Users.vue
@@ -129,17 +129,21 @@ export default {
 			groups = groups.map(group => {
 				let item = {};
 				item.id = group.id.replace(' ', '_');
-				item.classes = [];
-				item.href = '#group'+group.id.replace(' ', '_');
-				item.text = group.name;
-				item.utils = {counter: group.usercount};
-				if (item.id !== 'admin' && item.id !== '_disabled') {
-					// add delete button
+				item.classes = [];							// empty classes, active will be set later
+				item.router = {								// router link to
+					name: 'group',
+					params: {selectedGroup: group.id}
+				};
+				item.text = group.name;						// group name
+				item.utils = {counter: group.usercount};	// users count
+
+				if (item.id !== 'admin' && item.id !== 'disabled') {
+					// add delete button on real groups
 					let self = this;
 					item.utils.actions = [{
 						icon: 'icon-delete',
 						text: t('settings', 'Remove group'),
-						action: function(){}
+						action: () => {}
 					}];
 				};
 				return item;
@@ -147,28 +151,29 @@ export default {
 
 			// Adjust data
 			let adminGroup = groups.find(group => group.id == 'admin');
-	   		let disabledGroup = groups.find(group => group.id == '_disabled');
+			   let disabledGroupIndex = groups.findIndex(group => group.id == 'disabled');
+			   let disabledGroup = groups[disabledGroupIndex];
 			if (adminGroup.text) {
 				adminGroup.text = t('settings', 'Admins'); // rename admin group
 			}
 			if (disabledGroup.text) {
 				disabledGroup.text = t('settings', 'Disabled users'); // rename disabled group
 				if (disabledGroup.utils.counter === 0) {
-					groups.splice(groups.findIndex(group => group.id == '_disabled'), 1); // remove disabled if empty
+					groups.splice(disabledGroupIndex, 1); // remove disabled if empty
 				}
 			}
 
 			// Add everyone group
 			groups.unshift({
-				id: '_everyone',
+				id: 'everyone',
 				classes: [],
-				href:'#group_everyone',
+				router: {name:'users'},
 				text: t('settings', 'Everyone'),
 				utils: {counter: this.userCount}
 			});
 
 			// Set current group as active
-			let activeGroup = groups.findIndex(group => group.href === this.$route.hash);
+			let activeGroup = groups.findIndex(group => group.id === this.selectedGroup);
 			if (activeGroup >= 0) {
 				groups[activeGroup].classes.push('active');
 			} else {