fixup! fixup! fixup! fixup! New member button and virtual list

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

package.json

@@ -44,7 +44,7 @@
 		"@nextcloud/moment": "^1.1.1",
 		"@nextcloud/paths": "^1.1.2",
 		"@nextcloud/router": "^2.0.0",
-		"@nextcloud/vue": "^4.0.0-alpha.0",
+		"@nextcloud/vue": "^4.0.0-alpha.1",
 		"b64-to-blob": "^1.2.19",
 		"camelcase": "^5.3.1",
 		"cdav-library": "git+https://github.com/nextcloud/cdav-library.git",

src/components/MemberList.vue

@@ -30,7 +30,7 @@
 
 		<VirtualList class="members-list"
 			data-key="id"
-			:data-sources="list"
+			:data-sources="filteredList"
 			:data-component="MembersListItem"
 			:estimate-size="68" />
 
@@ -49,8 +49,6 @@
 
 <script>
 import AppContentList from '@nextcloud/vue/dist/Components/AppContentList'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import VirtualList from 'vue-virtual-scroll-list'
 
 import MembersListItem from './MembersList/MembersListItem'
@@ -60,14 +58,12 @@ import RouterMixin from '../mixins/RouterMixin'
 import { getRecommendations, getSuggestions } from '../services/collaborationAutocompletion'
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { subscribe } from '@nextcloud/event-bus'
-import { SHARES_TYPES_MEMBER_MAP } from '../models/constants.ts'
+import { SHARES_TYPES_MEMBER_MAP, CIRCLES_MEMBER_GROUPING } from '../models/constants.ts'
 
 export default {
 	name: 'MemberList',
 
 	components: {
-		Actions,
-		ActionButton,
 		AppContentList,
 		VirtualList,
 		EntityPicker,
@@ -91,19 +87,7 @@ export default {
 			pickerCircle: null,
 			pickerData: [],
 			pickerSelection: {},
-			pickerTypes: [{
-				id: `picker-${OC.Share.SHARE_TYPE_USER}`,
-				label: t('contacts', 'Users'),
-			}, {
-				id: `picker-${OC.Share.SHARE_TYPE_GROUP}`,
-				label: t('contacts', 'Groups'),
-			}, {
-				id: `picker-${OC.Share.SHARE_TYPE_CIRCLE}`,
-				label: t('contacts', 'Circles'),
-			}, {
-				id: `picker-${OC.Share.SHARE_TYPE_EMAIL}`,
-				label: t('contacts', 'Email'),
-			}],
+			pickerTypes: CIRCLES_MEMBER_GROUPING,
 		}
 	},
 
@@ -115,6 +99,26 @@ export default {
 		circle() {
 			return this.$store.getters.getCircle(this.selectedCircle)
 		},
+
+		filteredList() {
+			// Group per userType
+			const groupedList = this.list.reduce(function(r, a) {
+				r[a.userType] = r[a.userType] || []
+				r[a.userType].push(a)
+				return r
+			}, Object.create(null))
+
+			return CIRCLES_MEMBER_GROUPING
+				// Filter unpopulated types
+				.filter(group => groupedList[group.type])
+				// Injecting headings
+				.map(group => [{
+					heading: true,
+					...group,
+				}, ...(groupedList[group.type] || [])])
+				// Merging sub-arrays
+				.flat()
+		},
 	},
 
 	mounted() {

src/components/MembersList/MembersListItem.vue

@@ -21,7 +21,10 @@
   -->
 
 <template>
-	<ListItemIcon
+	<span v-if="source.heading" class="members-list__heading">
+		{{ source.label }}
+	</span>
+	<ListItemIcon v-else
 		:id="source.singleId"
 		:key="source.singleId"
 		:avatar-size="44"
@@ -87,7 +90,6 @@ import ShieldCheck from 'vue-material-design-icons/ShieldCheck'
 
 import { changeMemberLevel } from '../../services/circles.ts'
 import { showError } from '@nextcloud/dialogs'
-import Member from '../../models/member.ts'
 import RouterMixin from '../../mixins/RouterMixin'
 
 export default {
@@ -106,7 +108,7 @@ export default {
 
 	props: {
 		source: {
-			type: Member,
+			type: Object,
 			required: true,
 		},
 	},
@@ -272,6 +274,22 @@ export default {
 }
 </script>
 <style lang="scss">
+.members-list__heading {
+	display: flex;
+	overflow: hidden;
+	flex-shrink: 0;
+	order: 1;
+	padding-top: 22px;
+	padding-left: 8px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	opacity: .7;
+	color: var(--color-primary-element);
+	box-shadow: none !important;
+	font-weight: bold;
+	line-height: 22px;
+}
+
 .members-list__item {
 	padding: 8px;
 

src/models/constants.d.ts

@@ -34,6 +34,11 @@ export declare const CIRCLES_MEMBER_TYPES: {
 export declare const CIRCLES_MEMBER_LEVELS: {
     [x: number]: string;
 };
+export declare const CIRCLES_MEMBER_GROUPING: {
+    id: string;
+    label: string;
+    type: number;
+}[];
 export declare const SHARES_TYPES_MEMBER_MAP: {
     [x: number]: number;
 };

src/models/constants.ts

@@ -92,6 +92,26 @@ export const CIRCLES_MEMBER_LEVELS = {
 	[MEMBER_LEVEL_OWNER]: t('circles', 'Owner'),
 }
 
+// Represents the picker options but also the 
+// sorting of the members list
+export const CIRCLES_MEMBER_GROUPING = [{
+	id: `picker-${OC.Share.SHARE_TYPE_USER}`,
+	label: t('contacts', 'Users'),
+	type: MEMBER_TYPE_USER
+}, {
+	id: `picker-${OC.Share.SHARE_TYPE_EMAIL}`,
+	label: t('contacts', 'Emails'),
+	type: MEMBER_TYPE_MAIL
+}, {
+	id: `picker-${OC.Share.SHARE_TYPE_GROUP}`,
+	label: t('contacts', 'Groups'),
+	type: MEMBER_TYPE_GROUP
+}, {
+	id: `picker-${OC.Share.SHARE_TYPE_CIRCLE}`,
+	label: t('contacts', 'Circles'),
+	type: MEMBER_TYPE_CIRCLE
+}]
+
 export const SHARES_TYPES_MEMBER_MAP = {
 	[OC.Share.SHARE_TYPE_CIRCLE]: MEMBER_TYPE_SINGLEID,
 	[OC.Share.SHARE_TYPE_USER]: MEMBER_TYPE_USER,

src/models/member.d.ts

@@ -52,6 +52,10 @@ export default class Member {
      * Member userId
      */
     get userId(): string;
+    /**
+     * Member userId
+     */
+    get userType(): string;
     /**
      * Member level
      *

src/models/member.ts

@@ -91,6 +91,13 @@ export default class Member {
 		return this._data.userId
 	}
 
+	/**
+	 * Member userId
+	 */
+	get userType(): string {
+		return this._data.userType
+	}
+
 	/**
 	 * Member level
 	 *