Add new group entry on users list + fixes

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

Author: skjnldsv

settings/css/settings.scss

@@ -1377,21 +1377,6 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 
 /* USERS LIST -------------------------------------------------------------- */
 #body-settings {
-	#app-navigation {
-		/* Hack to override the javascript orderBy */
-		#usergrouplist > li {
-			order: 4;
-			&#everyone {
-				order:1;
-			}
-			&#admin {
-				order:2;
-			}
-			&#disabled {
-				order:3;
-			}
-		}
-	}
 	$grid-row-height: 46px;
 	#app-content.user-list-grid {
 		display: grid;

settings/js/settings-vue.js

@@ -1,7 +1,7 @@
 {
   "name": "settings",
   "description": "Nextcloud settings",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "author": "John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>",
   "license": "AGPL3",
   "private": true,
@@ -13,6 +13,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
+    "nextcloud-vue": "^0.1.2",
     "v-tooltip": "^2.0.0-rc.33",
     "vue": "^2.5.17",
     "vue-click-outside": "^1.0.7",
@@ -34,6 +35,8 @@
     "babel-preset-stage-3": "^6.24.1",
     "css-loader": "^1.0.0",
     "file-loader": "^1.1.11",
+    "node-sass": "^4.9.3",
+    "sass-loader": "^7.1.0",
     "vue-loader": "^15.4.2",
     "vue-template-compiler": "^2.5.17",
     "webpack": "^4.19.1",

settings/js/settings-vue.js.map

@@ -44,9 +44,9 @@
 		</div>
 
 		<form class="row" id="new-user" v-show="showConfig.showNewUserForm"
-			  v-on:submit.prevent="createUser" :disabled="loading"
+			  v-on:submit.prevent="createUser" :disabled="loading.all"
 			  :class="{'sticky': scrolled && showConfig.showNewUserForm}">
-			<div :class="loading?'icon-loading-small':'icon-add'"></div>
+			<div :class="loading.all?'icon-loading-small':'icon-add'"></div>
 			<div class="name">
 				<input id="newusername" type="text" required v-model="newUser.id"
 					   :placeholder="t('settings', 'Username')" name="username"
@@ -74,12 +74,13 @@
 			<div class="groups">
 				<!-- hidden input trick for vanilla html5 form validation -->
 				<input type="text" :value="newUser.groups" v-if="!settings.isAdmin"
-					   tabindex="-1" id="newgroups" :required="!settings.isAdmin" />
-				<multiselect :options="canAddGroups" v-model="newUser.groups"
-							 :placeholder="t('settings', 'Add user in group')"
-							 label="name" track-by="id" class="multiselect-vue"
-							 :multiple="true" :close-on-select="false"
-							 :allowEmpty="settings.isAdmin">
+					   tabindex="-1" id="newgroups" :required="!settings.isAdmin"
+					   :class="{'icon-loading-small': loading.groups}"/>
+				<multiselect v-model="newUser.groups" :options="canAddGroups" :disabled="loading.groups||loading.all"
+						 tag-placeholder="create" :placeholder="t('settings', 'Add user in group')"
+						 label="name" track-by="id" class="multiselect-vue"
+						 :multiple="true" :taggable="true" :close-on-select="false"
+						 @tag="createGroup">
 							 <!-- If user is not admin, he is a subadmin.
 							 	  Subadmins can't create users outside their groups
 								  Therefore, empty select is forbidden -->
@@ -154,7 +155,10 @@ export default {
 		return {
 			unlimitedQuota: unlimitedQuota,
 			defaultQuota: defaultQuota,
-			loading: false,
+			loading: {
+				all: false,
+				groups: false
+			},
 			scrolled: false,
 			searchQuery: '',
 			newUser: {
@@ -318,10 +322,10 @@ export default {
 		resetForm() {
 			// revert form to original state
 			Object.assign(this.newUser, this.$options.data.call(this).newUser);
-			this.loading = false;
+			this.loading.all = false;
 		},
 		createUser() {
-			this.loading = true;
+			this.loading.all = true;
 			this.$store.dispatch('addUser', {
 				userid: this.newUser.id,
 				password: this.newUser.password,
@@ -332,7 +336,7 @@ export default {
 				quota: this.newUser.quota.id,
 				language: this.newUser.language.code,
 			}).then(() => this.resetForm())
-			.catch(() => this.loading = false);
+			.catch(() => this.loading.all = false);
 		},
 		setNewUserDefaultGroup(value) {
 			if (value && value.length > 0) {
@@ -345,6 +349,25 @@ export default {
 			}
 			// fallback, empty selected group
 			this.newUser.groups = [];
+		},
+
+		/**
+		 * Create a new group
+		 * 
+		 * @param {string} groups Group id
+		 * @returns {Promise}
+		 */
+		createGroup(gid) {
+			this.loading.groups = true;
+			this.$store.dispatch('addGroup', gid)
+				.then((group) => {
+					this.newUser.groups.push(this.groups.find(group => group.id === gid))
+					this.loading.groups = false;
+				})
+				.catch(() => {
+					this.loading.groups = false;
+				});
+			return this.$store.getters.getGroups[this.groups.length];
 		}
 	}
 }

settings/package-lock.json

@@ -296,7 +296,10 @@ const actions = {
 	addGroup(context, gid) {
 		return api.requireAdmin().then((response) => {
 			return api.post(OC.linkToOCS(`cloud/groups`, 2), {groupid: gid})
-				.then((response) => context.commit('addGroup', {gid: gid, displayName: gid}))
+				.then((response) => {
+					context.commit('addGroup', {gid: gid, displayName: gid})
+					return {gid: gid, displayName: gid}
+				})
 				.catch((error) => {throw error;});
 		}).catch((error) => {
 			context.commit('API_FAILURE', { gid, error });

settings/package.json

@@ -34,15 +34,14 @@
 
 
 <script>
-import appNavigation from '../components/appNavigation';
+import { AppNavigation } 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)
 Vue.use(VueLocalStorage)
 
 export default {
@@ -59,7 +58,7 @@ export default {
 	},
 	components: {
 		AppDetails,
-		appNavigation,
+		AppNavigation,
 		appList,
 	},
 	methods: {