From 146cb67fcb49a14a0bdcf466a15deefa551e3081 Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <ruben@conduction.nl>
Date: Tue, 27 Aug 2024 19:30:00 +0200
Subject: [PATCH] Modal fixes

---
 src/modals/Modals.vue                         |  38 +++++-
 src/modals/ability/DeleteAbility.vue          | 102 +++++++++++++++
 .../character/AddConditionToCharacter.vue     | 116 +++++++++++++++++
 src/modals/character/AddEventToCharacter.vue  | 116 +++++++++++++++++
 src/modals/character/AddItemToCharacter.vue   | 116 +++++++++++++++++
 src/modals/character/AddSkillToCharacter.vue  | 120 ++++++++++++++++++
 src/modals/condition/DeleteCondition.vue      | 102 +++++++++++++++
 src/modals/effect/DeleteEffect.vue            | 102 +++++++++++++++
 src/modals/event/DeleteEvent.vue              | 102 +++++++++++++++
 src/modals/item/DeleteItem.vue                | 102 +++++++++++++++
 src/modals/player/DeletePlayer.vue            | 102 +++++++++++++++
 src/modals/skill/DeleteSkill.vue              | 102 +++++++++++++++
 src/modals/template/DeleteTemplate.vue        | 102 +++++++++++++++
 src/views/characters/CharacterDetails.vue     |  14 +-
 14 files changed, 1331 insertions(+), 5 deletions(-)
 create mode 100644 src/modals/ability/DeleteAbility.vue
 create mode 100644 src/modals/character/AddConditionToCharacter.vue
 create mode 100644 src/modals/character/AddEventToCharacter.vue
 create mode 100644 src/modals/character/AddItemToCharacter.vue
 create mode 100644 src/modals/character/AddSkillToCharacter.vue
 create mode 100644 src/modals/condition/DeleteCondition.vue
 create mode 100644 src/modals/effect/DeleteEffect.vue
 create mode 100644 src/modals/event/DeleteEvent.vue
 create mode 100644 src/modals/item/DeleteItem.vue
 create mode 100644 src/modals/player/DeletePlayer.vue
 create mode 100644 src/modals/skill/DeleteSkill.vue
 create mode 100644 src/modals/template/DeleteTemplate.vue

diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 9f8a687..adf8c67 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -2,43 +2,79 @@
 	<!-- Placeholder -->
 	<div>
 		<EditAbility />
+		<DeleteAbility />
 		<EditCharacter />
 		<DeleteCharacter />
 		<EditCondition />
+		<DeleteCondition />
 		<EditEffect />
+		<DeleteEffect />
 		<EditEvent />
+		<DeleteEvent />
 		<EditItem />
+		<DeleteItem />
 		<EditPlayer />
+		<DeletePlayer />
 		<EditSkill />
+		<DeleteSkill />
 		<EditTemplate />
+		<DeleteTemplate />
+		<AddSkillToCharacter />
+		<AddItemToCharacter />
+		<AddConditionToCharacter />
+		<AddEventToCharacter />
 	</div>
 </template>
 
 <script>
 import EditAbility from './ability/EditAbility.vue'
+import DeleteAbility from './ability/DeleteAbility.vue'
 import EditCharacter from './character/EditCharacter.vue'
 import DeleteCharacter from './character/DeleteCharacter.vue'
 import EditCondition from './condition/EditCondition.vue'
+import DeleteCondition from './condition/DeleteCondition.vue'
 import EditEffect from './effect/EditEffect.vue'
+import DeleteEffect from './effect/DeleteEffect.vue'
 import EditEvent from './event/EditEvent.vue'
+import DeleteEvent from './event/DeleteEvent.vue'
 import EditItem from './item/EditItem.vue'
+import DeleteItem from './item/DeleteItem.vue'
 import EditPlayer from './player/EditPlayer.vue'
+import DeletePlayer from './player/DeletePlayer.vue'
 import EditSkill from './skill/EditSkill.vue'
+import DeleteSkill from './skill/DeleteSkill.vue'
 import EditTemplate from './template/EditTemplate.vue'
+import DeleteTemplate from './template/DeleteTemplate.vue'
+import AddSkillToCharacter from './character/AddSkillToCharacter.vue'
+import AddItemToCharacter from './character/AddItemToCharacter.vue'
+import AddConditionToCharacter from './character/AddConditionToCharacter.vue'
+import AddEventToCharacter from './character/AddEventToCharacter.vue'
 
 export default {
 	name: 'Modals',
 	components: {
 		EditAbility,
+		DeleteAbility,
 		EditCharacter,
 		DeleteCharacter,
 		EditCondition,
+		DeleteCondition,
 		EditEffect,
+		DeleteEffect,
 		EditEvent,
+		DeleteEvent,
 		EditItem,
-		EditSkill,
+		DeleteItem,
 		EditPlayer,
+		DeletePlayer,
+		EditSkill,
+		DeleteSkill,
 		EditTemplate,
+		DeleteTemplate,
+		AddSkillToCharacter,
+		AddItemToCharacter,
+		AddConditionToCharacter,
+		AddEventToCharacter,
 	},
 }
 </script>
diff --git a/src/modals/ability/DeleteAbility.vue b/src/modals/ability/DeleteAbility.vue
new file mode 100644
index 0000000..c5fac7a
--- /dev/null
+++ b/src/modals/ability/DeleteAbility.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { abilityStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.dialog === 'deleteAbility'"
+		name="Vaardigheid verwijderen"
+		size="normal"
+		:can-close="false">
+
+		<p v-if="!success">
+			Wil je <b>{{ abilityStore.abilityItem.name }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Vaardigheid succesvol verwijderd</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<template #actions>
+			<NcButton
+				@click="navigationStore.setDialog(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				v-if="!success"
+				:disabled="loading"
+				type="error"
+				@click="deleteAbility()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+	
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcTextField,
+	NcTextArea,
+	NcSelect,
+	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: 'DeleteAbility',
+	components: {
+		NcDialog,
+		NcTextField,
+		NcTextArea,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+		}
+	},
+	methods: {
+		async deleteAbility() {
+			this.loading = true
+			try {
+				await abilityStore.deleteAbility()
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setDialog(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van de vaardigheid'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/character/AddConditionToCharacter.vue b/src/modals/character/AddConditionToCharacter.vue
new file mode 100644
index 0000000..1dad319
--- /dev/null
+++ b/src/modals/character/AddConditionToCharacter.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { characterStore, conditionStore, navigationStore } from '../../store/store.js'
+import { onMounted } from 'vue'
+
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.modal === 'addConditionToCharacter'"
+		name="Conditie toevoegen aan karakter"
+		size="normal"
+		:can-close="false">
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Conditie succesvol toegevoegd aan karakter</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+	
+		<div v-if="!success" class="formContainer">
+			<p>Let op: Het toevoegen van een conditie aan een karakter kan invloed hebben op de eigenschappen en vaardigheden van het karakter. Dit is een asynchroon proces, dus het kan even duren voordat de wijzigingen zichtbaar worden.</p>
+			
+			<NcSelect
+				:disabled="loading"
+				label="Conditie *"
+				inputLabel="Conditie *"
+				:options="conditionStore.conditions"
+				:value.sync="selectedCondition"
+				option-label="name"
+				option-value="id"
+				required
+			/>
+		</div>
+
+		<template #actions>
+			<NcButton @click="navigationStore.setModal(false)">
+				<template #icon><Cancel :size="20" /></template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+				<template #icon><Help :size="20" /></template>
+				Help
+			</NcButton>
+			<NcButton v-if="!success" :disabled="loading" type="primary" @click="addConditionToCharacter()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcSelect,
+	NcLoadingIcon,
+	NcNoteCard,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue' 
+import Plus from 'vue-material-design-icons/Plus.vue' 
+import Help from 'vue-material-design-icons/Help.vue' 
+
+export default {
+	name: 'AddConditionToCharacter',
+	components: {
+		NcDialog,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		Cancel,
+		Plus,
+		Help,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+			selectedCondition: null,
+		}
+	},
+	mounted(){
+		conditionStore.refreshConditionList()
+	},
+	methods: {
+		async addConditionToCharacter() {
+			this.loading = true
+			try {
+				if (!characterStore.characterItem.conditions) {
+					characterStore.characterItem.conditions = []
+				}
+				characterStore.characterItem.conditions.push(this.selectedCondition)
+				await characterStore.saveCharacter()
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setModal(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het toevoegen van de conditie aan het karakter'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/character/AddEventToCharacter.vue b/src/modals/character/AddEventToCharacter.vue
new file mode 100644
index 0000000..d13264e
--- /dev/null
+++ b/src/modals/character/AddEventToCharacter.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { characterStore, eventStore, navigationStore } from '../../store/store.js'
+import { onMounted } from 'vue'
+
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.modal === 'addEventToCharacter'"
+		name="Event toevoegen aan karakter"
+		size="normal"
+		:can-close="false">
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Event succesvol toegevoegd aan karakter</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+	
+		<div v-if="!success" class="formContainer">
+			<p>Let op: Het toevoegen van een event aan een karakter kan invloed hebben op de eigenschappen en geschiedenis van het karakter. Dit is een asynchroon proces, dus het kan even duren voordat de wijzigingen zichtbaar worden.</p>
+			
+			<NcSelect
+				:disabled="loading"
+				label="Event *"
+				inputLabel="Event *"
+				:options="eventStore.events"
+				:value.sync="selectedEvent"
+				option-label="name"
+				option-value="id"
+				required
+			/>
+		</div>
+
+		<template #actions>
+			<NcButton @click="navigationStore.setModal(false)">
+				<template #icon><Cancel :size="20" /></template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+				<template #icon><Help :size="20" /></template>
+				Help
+			</NcButton>
+			<NcButton v-if="!success" :disabled="loading" type="primary" @click="addEventToCharacter()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcSelect,
+	NcLoadingIcon,
+	NcNoteCard,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue' 
+import Plus from 'vue-material-design-icons/Plus.vue' 
+import Help from 'vue-material-design-icons/Help.vue' 
+
+export default {
+	name: 'AddEventToCharacter',
+	components: {
+		NcDialog,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		Cancel,
+		Plus,
+		Help,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+			selectedEvent: null,
+		}
+	},
+	mounted(){
+		eventStore.refreshEventList()
+	},
+	methods: {
+		async addEventToCharacter() {
+			this.loading = true
+			try {
+				if (!characterStore.characterItem.events) {
+					characterStore.characterItem.events = []
+				}
+				characterStore.characterItem.events.push(this.selectedEvent)
+				await characterStore.saveCharacter()
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setModal(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het toevoegen van het event aan het karakter'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/character/AddItemToCharacter.vue b/src/modals/character/AddItemToCharacter.vue
new file mode 100644
index 0000000..f4d22ab
--- /dev/null
+++ b/src/modals/character/AddItemToCharacter.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { characterStore, itemStore, navigationStore } from '../../store/store.js'
+import { onMounted } from 'vue'
+
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.modal === 'addItemToCharacter'"
+		name="Item toevoegen aan karakter"
+		size="normal"
+		:can-close="false">
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Item succesvol toegevoegd aan karakter</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+	
+		<div v-if="!success" class="formContainer">
+			<p>Let op: Het toevoegen van een item aan een karakter kan invloed hebben op de eigenschappen van het karakter. Dit is een asynchroon proces, dus het kan even duren voordat de wijzigingen zichtbaar worden.</p>
+			
+			<NcSelect
+				:disabled="loading"
+				label="Item *"
+				inputLabel="Item *"
+				:options="itemStore.items"
+				:value.sync="selectedItem"
+				option-label="name"
+				option-value="id"
+				required
+			/>
+		</div>
+
+		<template #actions>
+			<NcButton @click="navigationStore.setModal(false)">
+				<template #icon><Cancel :size="20" /></template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+				<template #icon><Help :size="20" /></template>
+				Help
+			</NcButton>
+			<NcButton v-if="!success" :disabled="loading" type="primary" @click="addItemToCharacter()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcSelect,
+	NcLoadingIcon,
+	NcNoteCard,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue' 
+import Plus from 'vue-material-design-icons/Plus.vue' 
+import Help from 'vue-material-design-icons/Help.vue' 
+
+export default {
+	name: 'AddItemToCharacter',
+	components: {
+		NcDialog,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		Cancel,
+		Plus,
+		Help,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+			selectedItem: null,
+		}
+	},
+	mounted(){
+		itemStore.refreshItemList()
+	},
+	methods: {
+		async addItemToCharacter() {
+			this.loading = true
+			try {
+				if (!characterStore.characterItem.items) {
+					characterStore.characterItem.items = []
+				}
+				characterStore.characterItem.items.push(this.selectedItem)
+				await characterStore.saveCharacter()
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setModal(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het toevoegen van het item aan het karakter'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/character/AddSkillToCharacter.vue b/src/modals/character/AddSkillToCharacter.vue
new file mode 100644
index 0000000..4a41e0f
--- /dev/null
+++ b/src/modals/character/AddSkillToCharacter.vue
@@ -0,0 +1,120 @@
+<script setup>
+import { characterStore, skillStore, navigationStore } from '../../store/store.js'
+import { onMounted } from 'vue'
+
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.modal === 'addSkillToCharacter'"
+		name="Vaardigheid toevoegen aan karakter"
+		size="normal"
+		:can-close="false">
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Vaardigheid succesvol toegevoegd aan karakter</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+	
+		<div v-if="!success" class="formContainer">
+			<p>Let op: Het toevoegen van een vaardigheid aan een karakter zal leiden tot een herberekening van de statistieken van het karakter. Dit is een asynchroon proces, dus het kan even duren voordat de wijzigingen zichtbaar worden.</p>
+			
+			<NcSelect
+				:disabled="loading"
+				label="Vaardigheid *"
+				inputLabel="Vaardigheid *"
+				:options="skills"
+				:value.sync="selectedSkill"
+				option-label="name"
+				option-value="id"
+				required
+			/>
+		</div>
+
+		<template #actions>
+			<NcButton @click="navigationStore.setModal(false)">
+				<template #icon><Cancel :size="20" /></template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+				<template #icon><Help :size="20" /></template>
+				Help
+			</NcButton>
+			<NcButton v-if="!success" :disabled="loading" type="primary" @click="addSkillToCharacter()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcSelect,
+	NcLoadingIcon,
+	NcNoteCard,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue' 
+import Plus from 'vue-material-design-icons/Plus.vue' 
+import Help from 'vue-material-design-icons/Help.vue' 
+
+export default {
+	name: 'AddSkillToCharacter',
+	components: {
+		NcDialog,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		Cancel,
+		Plus,
+		Help,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+			selectedSkill: null,
+			skills: {
+				options: [],
+				value: null
+			}
+		}
+	},
+	mounted(){
+		skillStore.refreshSkillList()
+	},
+	methods: {
+		async addSkillToCharacter() {
+			this.loading = true
+			try {
+				if (!characterStore.characterItem.skills) {
+					characterStore.characterItem.skills = []
+				}
+				characterStore.characterItem.skills.push(this.selectedSkill)
+				await characterStore.saveCharacter()
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setModal(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het toevoegen van de vaardigheid aan het karakter'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/condition/DeleteCondition.vue b/src/modals/condition/DeleteCondition.vue
new file mode 100644
index 0000000..02edece
--- /dev/null
+++ b/src/modals/condition/DeleteCondition.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { conditionStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.dialog === 'deleteCondition'"
+		name="Conditie verwijderen"
+		size="normal"
+		:can-close="false">
+
+		<p v-if="!success">
+			Wil je <b>{{ conditionStore.conditionItem.name }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Conditie succesvol verwijderd</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<template #actions>
+			<NcButton
+				@click="navigationStore.setDialog(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				v-if="!success"
+				:disabled="loading"
+				type="error"
+				@click="deleteCondition()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+	
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcTextField,
+	NcTextArea,
+	NcSelect,
+	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: 'DeleteCondition',
+	components: {
+		NcDialog,
+		NcTextField,
+		NcTextArea,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+		}
+	},
+	methods: {
+		async deleteCondition() {
+			this.loading = true
+			try {
+				await conditionStore.deleteCondition()
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setDialog(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van de conditie'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/effect/DeleteEffect.vue b/src/modals/effect/DeleteEffect.vue
new file mode 100644
index 0000000..a7bab83
--- /dev/null
+++ b/src/modals/effect/DeleteEffect.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { effectStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.dialog === 'deleteEffect'"
+		name="Effect verwijderen"
+		size="normal"
+		:can-close="false">
+
+		<p v-if="!success">
+			Wil je <b>{{ effectStore.effectItem.name }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Effect succesvol verwijderd</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<template #actions>
+			<NcButton
+				@click="navigationStore.setDialog(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				v-if="!success"
+				:disabled="loading"
+				type="error"
+				@click="deleteEffect()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+	
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcTextField,
+	NcTextArea,
+	NcSelect,
+	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: 'DeleteEffect',
+	components: {
+		NcDialog,
+		NcTextField,
+		NcTextArea,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+		}
+	},
+	methods: {
+		async deleteEffect() {
+			this.loading = true
+			try {
+				await effectStore.deleteEffect()
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setDialog(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van het effect'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/event/DeleteEvent.vue b/src/modals/event/DeleteEvent.vue
new file mode 100644
index 0000000..3cc720b
--- /dev/null
+++ b/src/modals/event/DeleteEvent.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { eventStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.dialog === 'deleteEvent'"
+		name="Gebeurtenis verwijderen"
+		size="normal"
+		:can-close="false">
+
+		<p v-if="!success">
+			Wil je <b>{{ eventStore.eventItem.name }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Gebeurtenis succesvol verwijderd</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<template #actions>
+			<NcButton
+				@click="navigationStore.setDialog(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				v-if="!success"
+				:disabled="loading"
+				type="error"
+				@click="deleteEvent()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+	
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcTextField,
+	NcTextArea,
+	NcSelect,
+	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: 'DeleteEvent',
+	components: {
+		NcDialog,
+		NcTextField,
+		NcTextArea,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+		}
+	},
+	methods: {
+		async deleteEvent() {
+			this.loading = true
+			try {
+				await eventStore.deleteEvent()
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setDialog(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van de gebeurtenis'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/item/DeleteItem.vue b/src/modals/item/DeleteItem.vue
new file mode 100644
index 0000000..89bbc92
--- /dev/null
+++ b/src/modals/item/DeleteItem.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { itemStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.dialog === 'deleteItem'"
+		name="Item verwijderen"
+		size="normal"
+		:can-close="false">
+
+		<p v-if="!success">
+			Wil je <b>{{ itemStore.itemItem.name }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Item succesvol verwijderd</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<template #actions>
+			<NcButton
+				@click="navigationStore.setDialog(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				v-if="!success"
+				:disabled="loading"
+				type="error"
+				@click="deleteItem()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+	
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcTextField,
+	NcTextArea,
+	NcSelect,
+	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: 'DeleteItem',
+	components: {
+		NcDialog,
+		NcTextField,
+		NcTextArea,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+		}
+	},
+	methods: {
+		async deleteItem() {
+			this.loading = true
+			try {
+				await itemStore.deleteItem()
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setDialog(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van het item'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/player/DeletePlayer.vue b/src/modals/player/DeletePlayer.vue
new file mode 100644
index 0000000..ae8e51e
--- /dev/null
+++ b/src/modals/player/DeletePlayer.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { playerStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.dialog === 'deletePlayer'"
+		name="Speler verwijderen"
+		size="normal"
+		:can-close="false">
+
+		<p v-if="!success">
+			Wil je <b>{{ playerStore.playerItem.name }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Speler succesvol verwijderd</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<template #actions>
+			<NcButton
+				@click="navigationStore.setDialog(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				v-if="!success"
+				:disabled="loading"
+				type="error"
+				@click="deletePlayer()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+	
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcTextField,
+	NcTextArea,
+	NcSelect,
+	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: 'DeletePlayer',
+	components: {
+		NcDialog,
+		NcTextField,
+		NcTextArea,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+		}
+	},
+	methods: {
+		async deletePlayer() {
+			this.loading = true
+			try {
+				await playerStore.deletePlayer()
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setDialog(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van de speler'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/skill/DeleteSkill.vue b/src/modals/skill/DeleteSkill.vue
new file mode 100644
index 0000000..03cbaa2
--- /dev/null
+++ b/src/modals/skill/DeleteSkill.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { skillStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.dialog === 'deleteSkill'"
+		name="Vaardigheid verwijderen"
+		size="normal"
+		:can-close="false">
+
+		<p v-if="!success">
+			Wil je <b>{{ skillStore.skillItem.name }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Vaardigheid succesvol verwijderd</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<template #actions>
+			<NcButton
+				@click="navigationStore.setDialog(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				v-if="!success"
+				:disabled="loading"
+				type="error"
+				@click="deleteSkill()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+	
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcTextField,
+	NcTextArea,
+	NcSelect,
+	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: 'DeleteSkill',
+	components: {
+		NcDialog,
+		NcTextField,
+		NcTextArea,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+		}
+	},
+	methods: {
+		async deleteSkill() {
+			this.loading = true
+			try {
+				await skillStore.deleteSkill()
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setDialog(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van de vaardigheid'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/modals/template/DeleteTemplate.vue b/src/modals/template/DeleteTemplate.vue
new file mode 100644
index 0000000..b6623e1
--- /dev/null
+++ b/src/modals/template/DeleteTemplate.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { templateStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.dialog === 'deleteTemplate'"
+		name="Sjabloon verwijderen"
+		size="normal"
+		:can-close="false">
+
+		<p v-if="!success">
+			Wil je <b>{{ templateStore.templateItem.name }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+
+		<NcNoteCard v-if="success" type="success">
+			<p>Sjabloon succesvol verwijderd</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<template #actions>
+			<NcButton
+				@click="navigationStore.setDialog(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				v-if="!success"
+				:disabled="loading"
+				type="error"
+				@click="deleteTemplate()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+	
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcTextField,
+	NcTextArea,
+	NcSelect,
+	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: 'DeleteTemplate',
+	components: {
+		NcDialog,
+		NcTextField,
+		NcTextArea,
+		NcButton,
+		NcSelect,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+		}
+	},
+	methods: {
+		async deleteTemplate() {
+			this.loading = true
+			try {
+				await templateStore.deleteTemplate()
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				this.error = false
+				setTimeout(() => {
+					this.success = false
+					navigationStore.setDialog(false)
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van het sjabloon'
+			}
+		}
+	},
+}
+</script>
diff --git a/src/views/characters/CharacterDetails.vue b/src/views/characters/CharacterDetails.vue
index 0cf837a..55ced8d 100644
--- a/src/views/characters/CharacterDetails.vue
+++ b/src/views/characters/CharacterDetails.vue
@@ -21,25 +21,31 @@
 							</template>
 							Bewerken
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('addDocument')">
+						<NcActionButton @click="navigationStore.setModal('addSkillToCharacter')">
 							<template #icon>
 								<FileDocumentPlusOutline :size="20" />
 							</template>
 							Vaardigheid toevoegen
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('addRoll')">
+						<NcActionButton @click="navigationStore.setModal('addItemToCharacter')">
 							<template #icon>
 								<AccountPlus :size="20" />
 							</template>
 							Item toevoegen
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('addTaak')">
+						<NcActionButton @click="navigationStore.setModal('addConditionToCharacter')">
 							<template #icon>
 								<CalendarPlus :size="20" />
 							</template>
 							Conditie toevoegen
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('addBericht')">
+						<NcActionButton @click="navigationStore.setModal('addEventToCharacter')">
+							<template #icon>
+								<CalendarPlus :size="20" />
+							</template>
+							Event toevoegen
+						</NcActionButton>
+						<NcActionButton @click="navigationStore.setModal('downloadPdfFromCharacter')">
 							<template #icon>
 								<MessagePlus :size="20" />
 							</template>