enh: update usergroup column elements

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>

src/modules/main/partials/ColumnFormComponent.vue

@@ -18,7 +18,6 @@ import DatetimeDateForm from '../../../shared/components/ncTable/partials/rowTyp
 import DatetimeTimeForm from '../../../shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue'
 import TextRichForm from '../../../shared/components/ncTable/partials/rowTypePartials/TextRichForm.vue'
 import UsergroupForm from '../../../shared/components/ncTable/partials/rowTypePartials/UsergroupForm.vue'
-import { AbstractColumn } from '../../../shared/components/ncTable/mixins/columnClass.js'
 
 export default {
 	name: 'ColumnFormComponent',

src/modules/modals/CreateColumn.vue

@@ -78,7 +78,7 @@
 							{{ t('tables', 'Add more') }}
 						</NcCheckboxRadioSwitch>
 					</div>
-					<button class="primary" @click="actionConfirm()">
+					<button class="primary" data-cy="createColumnSaveBtn" @click="actionConfirm()">
 						{{ t('tables', 'Save') }}
 					</button>
 				</div>

src/modules/sidebar/partials/ShareForm.vue

@@ -154,7 +154,7 @@ export default {
 				shareWith: result.value.shareWith,
 				shareType: result.value.shareType,
 				user: result.uuid || result.value.shareWith,
-				isNoUser: result.value.shareType !== SHARE_TYPES.SHARE_TYPE_USER,
+				isNoUser: result.value.shareType !== this.SHARE_TYPES.SHARE_TYPE_USER,
 				displayName: result.name || result.label,
 				icon: result.value.shareType === this.SHARE_TYPES.SHARE_TYPE_USER ? 'icon-user' : 'icon-group',
 				// Vue unique binding to render within Multiselect's AvatarSelectOption

src/shared/components/ncTable/mixins/columnsTypes/usergroup.js

@@ -1,6 +1,5 @@
 import { AbstractUsergroupColumn } from '../columnClass.js'
 import { ColumnTypes } from '../columnHandler.js'
-import { FilterIds } from '../filter.js'
 
 export default class UsergroupColumn extends AbstractUsergroupColumn {
 
@@ -13,10 +12,6 @@ export default class UsergroupColumn extends AbstractUsergroupColumn {
 		this.usergroupSelectGroups = data.usergroupSelectGroups
 	}
 
-	// TODO consider if we want to sort, and how
-	// sort(mode) {
-	// }
-
 	getValueString(valueObject) {
 		valueObject = valueObject || this.value || null
 
@@ -44,16 +39,4 @@ export default class UsergroupColumn extends AbstractUsergroupColumn {
 		return super.isSearchStringFound(this.getValueString(cell), cell, searchString)
 	}
 
-	isFilterFound(cell, filter) {
-		const filterValue = filter.magicValuesEnriched ? filter.magicValuesEnriched : filter.value
-		const valueString = this.getValueString(cell)
-
-		const filterMethod = {
-			[FilterIds.Contains]() { return valueString?.includes(filterValue) },
-			[FilterIds.IsEqual]() { return valueString === filterValue },
-			[FilterIds.IsEmpty]() { return !valueString },
-		}[filter.operator.id]
-		return super.isFilterFound(filterMethod, cell)
-	}
-
 }

src/shared/components/ncTable/partials/TableCellUsergroup.vue

@@ -2,26 +2,27 @@
 	<!-- eslint-disable-next-line vue/no-v-html -->
 	<div v-if="value">
 		<div v-for="item in value" :key="item.id" class="inline">
-			<!-- <NcAvatar :display-name="item.id" :user="item.id" :is-no-user="!item.type === 0"
-				:show-user-status="column.showUserStatus" />
-			<span>
-				{{ item.id }}
-			</span> -->
-			<NcUserBubble :display-name="item.id" :show-user-status="column.showUserStatus" :user="item.type === 0 ? item.id: ''">
-				<h3> User </h3>
-				@{{ item.id }}
-			</NcUserBubble>
+			<div class="fix-col-2">
+				<div style="display:flex; align-items: center;">
+					<NcAvatar :display-name="item.id" :user="item.id" :is-no-user="item.type !== 0"
+						:show-user-status="column.showUserStatus" />
+				</div>
+				<div class="userInfo">
+					<div class="high-line-height">
+						{{ item.id }}
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import { NcAvatar, NcUserBubble } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 export default {
 	name: 'TableCellUsergroup',
 	components: {
 		NcAvatar,
-		NcUserBubble,
 	},
 	props: {
 		column: {
@@ -37,8 +38,19 @@ export default {
 			default: () => [],
 		},
 	},
-	mounted() {
-		console.log(this.value)
-	}
 }
 </script>
+
+<style lang="scss" scoped>
+	.userInfo {
+		padding-left: 5px;
+		padding-right: 10px;
+		font-size: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.high-line-height {
+		line-height: 35px;
+	}
+</style>

src/shared/components/ncTable/partials/columnTypePartials/forms/MainForm.vue

@@ -5,7 +5,7 @@
 			{{ t('tables', 'Title') }}
 		</div>
 		<div class="fix-col-4" :class="{error: titleMissingError}">
-			<input v-model="localTitle" :placeholder="t('tables', 'Enter a column title')">
+			<input v-model="localTitle" data-cy="columnTypeFormInput" :placeholder="t('tables', 'Enter a column title')">
 		</div>
 
 		<!-- description -->

src/shared/components/ncTable/partials/columnTypePartials/forms/UsergroupForm.vue

@@ -3,15 +3,15 @@
 		<div>
 			<div class="col-4 selections space-T space-L">
 				<NcCheckboxRadioSwitch :checked.sync="checkedValue" value="usergroup-user" name="usergroupTypeSelection"
-					type="radio" data-cy="createColumnUserSwitch">
+					type="radio" data-cy="userSwitch">
 					{{ t('tables', 'Users') }}
 				</NcCheckboxRadioSwitch>
 				<NcCheckboxRadioSwitch :checked.sync="checkedValue" value="usergroup-group"
-					name="usergroupTypeSelection" type="radio" data-cy="createColumnGroupSwitch">
+					name="usergroupTypeSelection" type="radio" data-cy="groupSwitch">
 					{{ t('tables', 'Groups') }}
 				</NcCheckboxRadioSwitch>
 				<NcCheckboxRadioSwitch :checked.sync="checkedValue" value="usergroup" name="usergroupTypeSelection"
-					type="radio" data-cy="createColumnUserAndGroupSwitch">
+					type="radio" data-cy="userAndGroupSwitch">
 					{{ t('tables', 'Users and groups') }}
 				</NcCheckboxRadioSwitch>
 			</div>
@@ -21,13 +21,11 @@
 					{{ t('tables', 'Default') }}
 				</div>
 				<div class="fix-col-4 space-B">
-					<!-- TODO: Add prop for single or multiple -->
 					<NcSelect v-model="value" style="width: 100%;" :loading="loading" :options="options"
 						:placeholder="getPlaceholder()" :searchable="true" :get-option-key="(option) => option.key"
 						label="id" :aria-label-combobox="getPlaceholder()"
-						:user-select="mutableColumn.usergroupSelectUsers"
-						:group-select="mutableColumn.usergroupSelectGroups" :close-on-select="false"
-						:multiple="mutableColumn.usergroupMultipleItems" @search="asyncFind" @input="addItem">
+						:user-select="true" :close-on-select="false"
+						:multiple="mutableColumn.usergroupMultipleItems" data-cy="usergroupDefaultSelect" @search="asyncFind" @input="addItem">
 						<template #noResult>
 							{{ noResultText }}
 						</template>
@@ -38,12 +36,11 @@
 						{{ t('tables', 'Select multiple items') }}
 					</div>
 					<div class="fix-col-4 space-L-small">
-						<NcCheckboxRadioSwitch type="switch" :checked.sync="mutableColumn.usergroupMultipleItems" />
+						<NcCheckboxRadioSwitch type="switch" :checked.sync="mutableColumn.usergroupMultipleItems" data-cy="usergroupMultipleSwitch" />
 					</div>
 				</div>
 			</div>
-			<!-- TODO: Make usergroupSelectUsers reactive -->
-			<div v-if="mutableColumn.usergroupSelectUsers" class="row">
+			<div v-if="selectUsers" class="row">
 				<div class="fix-col-4 title">
 					{{ t('tables', 'Show user status') }}
 				</div>
@@ -56,16 +53,13 @@
 </template>
 
 <script>
-import NcUserAndGroupPicker from '../../../../ncUserAndGroupPicker/NcUserAndGroupPicker.vue'
-import { translate as t } from '@nextcloud/l10n'
 import { NcCheckboxRadioSwitch, NcSelect } from '@nextcloud/vue'
 import searchUserGroup from '../../../../../mixins/searchUserGroup.js'
 import ShareTypes from '../../../../../mixins/shareTypesMixin.js'
 
 export default {
 	name: 'UsergroupForm',
 	components: {
-		NcUserAndGroupPicker,
 		NcCheckboxRadioSwitch,
 		NcSelect,
 	},
@@ -84,44 +78,53 @@ export default {
 		return {
 			mutableColumn: this.column,
 			value: this.column.usergroupDefault,
+			// Used in searchUserGroup mixin to decide types to search for
+			selectUsers: this.column.usergroupSelectUsers,
+			selectGroups: this.column.usergroupSelectGroups,
 		}
 	},
 	computed: {
 		localValue: {
 			get() {
-				return this.column.usergroupDefault
+				return this.mutableColumn.usergroupDefault
 			},
 			set(v) {
-				// TODO update to get groups too
 				if (Array.isArray(v)) {
-					this.column.usergroupDefault = v.map(o => {
-						return o
-					})
+					this.mutableColumn.usergroupDefault = v
 				} else {
-					this.column.usergroupDefault = [v]
+					this.mutableColumn.usergroupDefault = [v]
 				}
 
 			},
 		},
 		checkedValue: {
 			get() {
-				if (this.mutableColumn.usergroupSelectUsers && !this.mutableColumn.usergroupSelectGroups) {
+				if (this.selectUsers && !this.selectGroups) {
 					return 'usergroup-user'
-				} else if (!this.mutableColumn.usergroupSelectUsers && this.mutableColumn.usergroupSelectGroups) {
+				} else if (!this.selectUsers && this.selectGroups) {
 					return 'usergroup-group'
 				} else {
 					return 'usergroup'
 				}
 			},
 			set(newValue) {
 				if (newValue === 'usergroup-user') {
+					this.selectUsers = true
 					this.mutableColumn.usergroupSelectUsers = true
+
+					this.selectGroups = false
 					this.mutableColumn.usergroupSelectGroups = false
 				} else if (newValue === 'usergroup-group') {
+					this.selectUsers = false
 					this.mutableColumn.usergroupSelectUsers = false
+
+					this.selectGroups = true
 					this.mutableColumn.usergroupSelectGroups = true
 				} else {
+					this.selectUsers = true
 					this.mutableColumn.usergroupSelectUsers = true
+
+					this.selectGroups = true
 					this.mutableColumn.usergroupSelectGroups = true
 				}
 			},
@@ -141,10 +144,18 @@ export default {
 			}
 		},
 
-		// TODO: filter properly
 		filterOutUnwantedItems(list) {
 			return list
 		},
+
+		formatResult(autocompleteResult) {
+			return {
+				id: autocompleteResult.id,
+				type: autocompleteResult.source.startsWith('users') ? 0 : 1,
+				key: autocompleteResult.id,
+			}
+		},
+
 	},
 
 }

src/shared/components/ncTable/partials/rowTypePartials/UsergroupForm.vue

@@ -3,27 +3,24 @@
 		<NcSelect v-model="localValue" style="width: 100%;" :loading="loading" :options="options"
 			:placeholder="getPlaceholder()" :searchable="true" :get-option-key="(option) => option.key"
 			label="id" :aria-label-combobox="getPlaceholder()"
-			:user-select="column.usergroupSelectUsers" :group-select="column.usergroupSelectGroups"
-			:close-on-select="false" :multiple="column.usergroupMultipleItems" @search="asyncFind"
-			@input="addItem">
+			:user-select="true"
+			:close-on-select="false" :multiple="column.usergroupMultipleItems" data-cy="usergroupRowSelect"
+			@search="asyncFind" @input="addItem">
 			<template #noResult>
 				{{ noResultText }}
 			</template>
 		</NcSelect>
-		<div v-if="canBeCleared" class="icon-close make-empty" @click="emptyValue" />
 	</RowFormWrapper>
 </template>
 
 <script>
 import { NcSelect } from '@nextcloud/vue'
-import NcUserAndGroupPicker from '../../../ncUserAndGroupPicker/NcUserAndGroupPicker.vue'
 import RowFormWrapper from './RowFormWrapper.vue'
 import searchUserGroup from '../../../../mixins/searchUserGroup.js'
 import ShareTypes from '../../../../mixins/shareTypesMixin.js'
 
 export default {
 	components: {
-		NcUserAndGroupPicker,
 		RowFormWrapper,
 		NcSelect,
 	},
@@ -38,26 +35,24 @@ export default {
 			default: () => ([]),
 		},
 	},
+	data() {
+		return {
+			selectUsers: this.column.usergroupSelectUsers,
+			selectGroups: this.column.usergroupSelectGroups,
+		}
+	},
 	computed: {
-		canBeCleared() {
-			return !this.column.mandatory
-		},
 		localValue: {
 			get() {
 				return this.value
 			},
 			set(v) {
-				// TODO update to get groups too
-				console.log('v', v)
 				let formattedValue = null
 				if (Array.isArray(v)) {
-					formattedValue = v.map(o => {
-						return o
-					})
+					formattedValue = v
 				} else {
 					formattedValue = [v]
 				}
-				console.log(formattedValue)
 				this.$emit('update:value', formattedValue)
 			},
 		},
@@ -70,13 +65,19 @@ export default {
 				this.localValue = []
 			}
 		},
-		// TODO: filter properly
+
 		filterOutUnwantedItems(list) {
 			return list
 		},
-		emptyValue() {
-			this.localValue = 'none'
+
+		formatResult(autocompleteResult) {
+			return {
+				id: autocompleteResult.id,
+				type: autocompleteResult.source.startsWith('users') ? 0 : 1,
+				key: autocompleteResult.id,
+			}
 		},
+
 	},
 }
 </script>

src/shared/mixins/searchUserGroup.js

@@ -42,10 +42,10 @@ export default {
 		getShareTypes() {
 			const types = []
 			if (this.selectUsers) {
-				types.push(SHARE_TYPES.SHARE_TYPE_USER)
+				types.push(this.SHARE_TYPES.SHARE_TYPE_USER)
 			}
 			if (this.selectGroups) {
-				types.push(SHARE_TYPES.SHARE_TYPE_GROUP)
+				types.push(this.SHARE_TYPES.SHARE_TYPE_GROUP)
 			}
 			return types
 		},