nc-vue-agency/src/components/Group.vue

<template>
	<b-card no-body>
		<b-card-header header-tag="header"
			role="tab">
			<b-button block
				variant="secondary"
				@click="accordionToggle(index)">
				{{ group.name }}
			</b-button>
			<span v-if="group.isDefault"><small>Standardgruppe</small></span>
			<b-button v-if="!group.isDefault"
				style="float: right; "
				size="sm"
				variant=""
				@click="delGroup(group.gid)">
				<b-icon icon="trash-fill" aria-hidden="true" />
			</b-button>
		</b-card-header>
		<b-collapse :id="groupDefId + index "
			accordion="groupaccordion"
			role="tabpanel">
			<b-card-body>
				<Permission :groupid="group.gid" />
				The GroupId is {{ group.gid }} <br>
				<span v-if="group.isDefault">Ist default</span>
				<span v-else>Nicht default</span>
				<hr>
				<!-- SHAREING -->
				<!--<Multiselect
					:v-model="contributors"
					:multiple="true"
					placeholder="Suche"
					:options="agencyContributor"
					@input="updateContributor" />-->
				<Multiselect v-if="!group.isMainGroup"
					v-model="value"
					:options="formattedContributors"
					label="displayName"
					placeholder="Mitarbeiter der Gruppe hinzufügen"
					track-by="user"
					:multiple="true"
					style="width: 350px"
					@input="updateContributorsValue()">
					<template #singleLabel="{ option }">
						<ListItemIcon v-bind="option"
							:title="option.displayName"
							:avatar-size="24"
							:no-margin="true" />
					</template>
				</Multiselect>
			</b-card-body>
		</b-collapse>
	</b-card>
</template>
<script>
// import { generateUrl, generateOcsUrl } from '@nextcloud/router'
import { generateUrl } from '@nextcloud/router'
import axios from '@nextcloud/axios'
import Permission from './Permission'
import { Multiselect, ListItemIcon } from '@nextcloud/vue'

export default {
	name: 'Group',
	components: {
		Permission,
		Multiselect,
		ListItemIcon,
	},
	// Properties of Group-Elements
	props: {
		index: {
			type: Number,
			default: 0,
		},
		group: {
			type: Object,
			default: null,
		},
	},
	data() {
		return {
			// Main Group-ID for all Accordions
			groupDefId: 'acc_groupele_',
			value: [],
			contributors: [],
			formattedContributors: [],
		}
	},
	mounted() {
		this.value = null
		this.getAgencyContributors()
	},
	methods: {
		async updateContributorsValue() {
			const selectedUsers = []
			this.value.forEach((item) => {
				selectedUsers.push(item.user)
			})
			const r = await axios.put(generateUrl('/apps/agency/updateagencygroupcontributors/' + this.group.gid), { users: selectedUsers })
			console.log(r)
		},
		// Contributors changed, update the formattedContributors for the Field
		updateContributors() {
			this.formattedContributors = this.contributors.map(item => {
				return {
					user: item.user,
					displayName: item.displayName,
					icon: 'icon-user',
				}
			})
		},
		// Loading the Contributors for the Agency
		async getAgencyContributors() {
			const response = await axios.get(generateUrl('/apps/agency/getagencycontributors'))
			this.contributors = response.data
			// Contributors loaded, now update formattedContributors to see the result in the field
			this.updateContributors()
			// After Updating the Users in that group, add current users of the group
			this.value = this.group.users.map(item => {
				return {
					user: item.user,
					displayName: item.displayName,
					icon: 'icon-user',
				}
			})
		},
		// Toggle the Group-Accordion-Element
		accordionToggle(ele) {
			this.$root.$emit('bv::toggle::collapse', this.groupDefId + ele)
		},
		async delGroupFinal(id) {
			const r = await axios.get(generateUrl('/apps/agency/delagencygroup/' + this.group.gid))
			console.log(r)
			// TODO: Hier eine Mitteilung einbauen, damit der User weiß, was abging
			this.$emit('updateGroupData')
		},
		delGroup(id) {
			// Confirm Window
			this.$confirm({
				message: 'Möchten Sie die Gruppe ' + this.group.name + ' löschen?',
				button: {
					yes: 'Ja',
					no: 'Nein',
				},
				callback: confirm => {
					if (confirm) {
						this.delGroupFinal(id)
					}
				},
			})
		},
	},
}
</script>