1 files changed, 76 insertions, 0 deletions
diff --git a/apps/settings/src/components/AdminDelegation/GroupSelect.vue b/apps/settings/src/components/AdminDelegation/GroupSelect.vue
new file mode 100644
index 00000000000..28d3deb0afa
--- /dev/null
+++ b/apps/settings/src/components/AdminDelegation/GroupSelect.vue
@@ -0,0 +1,76 @@
+<!--
+  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcSelect v-model="selected"
+		:input-id="setting.id"
+		class="group-select"
+		:placeholder="t('settings', 'None')"
+		label="displayName"
+		:options="availableGroups"
+		:multiple="true"
+		:close-on-select="false" />
+</template>
+
+<script>
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import { generateUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
+import { showError } from '@nextcloud/dialogs'
+import logger from '../../logger.ts'
+
+export default {
+	name: 'GroupSelect',
+	components: {
+		NcSelect,
+	},
+	props: {
+		availableGroups: {
+			type: Array,
+			default: () => [],
+		},
+		setting: {
+			type: Object,
+			required: true,
+		},
+		authorizedGroups: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			selected: this.authorizedGroups
+				.filter((group) => group.class === this.setting.class)
+				.map((groupToMap) => this.availableGroups.find((group) => group.gid === groupToMap.group_id))
+				.filter((group) => group !== undefined),
+		}
+	},
+	watch: {
+		selected() {
+			this.saveGroups()
+		},
+	},
+	methods: {
+		async saveGroups() {
+			const data = {
+				newGroups: this.selected,
+				class: this.setting.class,
+			}
+			try {
+				await axios.post(generateUrl('/apps/settings/') + '/settings/authorizedgroups/saveSettings', data)
+			} catch (e) {
+				showError(t('settings', 'Unable to modify setting'))
+				logger.error('Unable to modify setting', e)
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.group-select {
+	width: 100%;
+}
+</style>