finished register dialog

.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+    "files.autoSave": "afterDelay",
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true,
+    "eslint.format.enable": true,
+    "cSpell.words": [
+        "depubliceren",
+        "Depubliceren",
+        "gedepubliceerd",
+        "Matadata",
+        "nextcloud",
+        "opencatalogi",
+        "organisation",
+        "Organisation",
+        "organisations",
+        "Organisations",
+        "pinia",
+        "Toegangs"
+    ],
+    "[javascript]": {
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    },
+    "[css]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+}

css/main.css

@@ -5,7 +5,6 @@
 }
 
 /* Pages */
-
 .pageHeader {
   margin-block-start: var(--app-navigation-padding);
   margin-inline-start: calc(
@@ -16,13 +15,14 @@
 }
 
 /* Lists */
-
 .listHeader {
   position: sticky;
   top: 0;
   z-index: 1000;
   background-color: var(--color-main-background);
   border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
 }
 
 .searchField {
@@ -37,6 +37,10 @@
 }
 
 /* Detail pages */
+.detailHeader {
+  display: flex;
+  justify-content: space-between;
+}
 
 .detailContainer {
   margin-block-start: var(--OC-margin-20);
@@ -107,6 +111,11 @@
 }
 
 /* Modals */
+.modalContent {
+  margin: var(--OC-margin-50);
+  text-align: center;
+}
+
 .form-group > * {
   margin-block-end: 10px;
 }
@@ -127,7 +136,6 @@
 }
 
 /* File drag and drop */
-
 .filesListDragDropNotice {
   width: 100%;
   min-height: 113px;

docker-compose.yml

@@ -0,0 +1,42 @@
+version: "3.5"
+volumes:
+  nextcloud:
+  apps:
+  db:
+  config:
+
+services:
+  db:
+    image: mariadb:10.6
+    restart: always
+    command: --transaction-isolation=READ-COMMITTED --log-bin=binlog --binlog-format=ROW
+    volumes:
+      - db:/var/lib/mysql
+    environment:
+      - MYSQL_ROOT_PASSWORD='!ChangeMe!'
+      - MYSQL_PASSWORD='!ChangeMe!'
+      - MYSQL_DATABASE=nextcloud
+      - MYSQL_USER=nextcloud
+
+  nextcloud:
+    user: root
+    container_name: nextcloud
+    image: nextcloud
+    restart: always
+    ports:
+      - 8080:80
+    links:
+      - db
+    volumes:
+      - nextcloud:/var/www/html:rw
+      - ./custom-apps:/var/www/html/custom_apps
+      - .:/var/www/html/custom_apps/openregister
+
+    environment:
+      - MYSQL_PASSWORD='!ChangeMe!'
+      - MYSQL_DATABASE=nextcloud
+      - MYSQL_USER=nextcloud
+      - MYSQL_HOST=db
+      - NEXTCLOUD_ADMIN_USER=admin
+      - NEXTCLOUD_ADMIN_PASSWORD=admin
+      - TZ=Europe/Amsterdam

src/modals/Modals.vue

@@ -1,13 +1,20 @@
 <template>
 	<!-- Placeholder Div -->
 	<div>
+		<EditRegister />
+		<DeleteRegister />
 	</div>
 </template>
 
 <script>
+import EditRegister from './register/EditRegister.vue'
+import DeleteRegister from './register/DeleteRegister.vue'
+
 export default {
 	name: 'Modals',
 	components: {
+		EditRegister,
+		DeleteRegister,
 	},
 }
 </script>

src/modals/register/DeleteRegister.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { registerStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.dialog === 'deleteRegister'"
+		name="Register verwijderen"
+		size="normal"
+		:can-close="false">
+		<p v-if="!success">
+			Wil je <b>{{ registerStore.registerItem.title }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Register succesvol verwijderd</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<template #actions>
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				v-if="!success"
+				:disabled="loading"
+				type="error"
+				@click="deleteRegister()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcLoadingIcon,
+	NcNoteCard,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+
+export default {
+	name: 'DeleteRegister',
+	components: {
+		NcDialog,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+		}
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setDialog(false)
+			this.success = false
+			this.loading = false
+			this.error = false
+		},
+		async deleteRegister() {
+			this.loading = true
+
+			registerStore.deleteRegister({
+				...registerStore.registerItem,
+			}).then(({ response }) => {
+				this.success = response.ok
+				this.error = false
+				response.ok && setTimeout(this.closeDialog, 2000)
+			}).catch((error) => {
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van het register'
+			}).finally(() => {
+				this.loading = false
+			})
+		},
+	},
+}
+</script>