Gruppenverwaltung start

src/components/Group.vue

@@ -0,0 +1,40 @@
+<template>
+	<b-card no-body>
+		<b-card-header header-tag="header"
+			role="tab">
+			<b-button block @click="accordionToggle(index)" variant="secondary">{{ ele }}</b-button>
+		</b-card-header>
+		<b-collapse :id="groupDefId + index "
+			accordion="groupaccordion"
+			role="tabpanel">
+			<b-card-body>
+				<b-card-text>I start opened because <code>visible</code> is <code>true</code></b-card-text>
+				<b-card-text>Mein Text!</b-card-text>
+			</b-card-body>
+		</b-collapse>
+	</b-card>
+</template>
+
+<script>
+// import Content from '@nextcloud/vue/dist/Components/Content'
+
+export default {
+	name: 'Group',
+	components: {
+	},
+	// Properties of Group-Elements
+	props: ['index', 'ele'],
+	data() {
+		return {
+			// Main Group-ID for all Accordions
+			groupDefId: 'acc_groupele_',
+		}
+	},
+	methods: {
+		// Toggle the Group-Accordion-Element
+		accordionToggle(ele) {
+			this.$root.$emit('bv::toggle::collapse', this.groupDefId + ele)
+		},
+	},
+}
+</script>

src/views/AgencyData.vue

@@ -1,44 +1,40 @@
 <template>
 	<Content app-name="AgencyData">
-		<b-container v-if="isLoading" class="">
+		<b-container fluid
+			v-if="isLoading">
 			<h3>Agenturdaten</h3>
 			<FormulateForm
 				v-model="agency"
 				@submit="submitHandler">
-				<b-row cols="2"
-					cols-sm="2"
-					cols-md="2"
-					cols-lg="4">
+				<b-row>
 					<b-col>
 						<FormulateInput name="name"
 							label="Agenturname"
 							type="text" />
 					</b-col>
+				</b-row>
+				<b-row>
 					<b-col>
 						<FormulateInput name="inhaber"
 							label="Agenturinhaber"
 							type="text" />
 					</b-col>
 				</b-row>
-				<b-row cols="2"
-					cols-sm="2"
-					cols-md="2"
-					cols-lg="4">
+				<b-row>
 					<b-col>
 						<FormulateInput name="street"
 							label="Straße"
 							type="text" />
 					</b-col>
+				</b-row>
+				<b-row>
 					<b-col>
 						<FormulateInput name="city"
 							label="Stadt"
 							type="text" />
 					</b-col>
 				</b-row>
-				<b-row cols="2"
-					cols-sm="2"
-					cols-md="2"
-					cols-lg="4">
+				<b-row>
 					<b-col>
 						<FormulateInput name="plz"
 							label="PLZ"
@@ -49,16 +45,15 @@
 								['min', 10000]
 							]" />
 					</b-col>
+				</b-row>
+				<b-row>
 					<b-col>
 						<FormulateInput name="agencymail"
 							label="Agentur-Email-Adressedd"
 							type="text" />
 					</b-col>
 				</b-row>
-				<b-row cols="2"
-					cols-sm="2"
-					cols-md="2"
-					cols-lg="4">
+				<b-row>
 					<b-col>
 						<FormulateInput name="phone"
 							label="Telefonnummer"

src/views/GroupManagement.vue

@@ -1,13 +1,21 @@
 <template>
 	<Content app-name="GroupManagement">
-		<b-container class="bv-example-row">
+		<b-container fluid>
 			<h3>Gruppenverwaltung</h3>
-			<hr>
+			<div class="accordion" role="tablist">
+				<Group no-body
+					fluid
+					v-for="(group, index) in groups"
+					:key="group"
+					:index="index"
+					:ele="group" />
+			</div>
 		</b-container>
 	</Content>
 </template>
 <script>
 import Content from '@nextcloud/vue/dist/Components/Content'
+import Group from '../components/Group.vue'
 // import '@braid/vue-formulate/themes/snow/snow.scss'
 // import { generateUrl } from '@nextcloud/router'
 // const axios = require('axios').default
@@ -16,10 +24,11 @@ export default ({
 	name: 'GroupManagement',
 	components: {
 		Content,
+		Group,
 	},
 	data() {
 		return {
-			groups: [],
+			groups: ['Gruppe 1', 'Gruppe 2', 'Gruppe 3'],
 		}
 	},
 	created() {