audit trail modals

src/modals/Modals.vue

@@ -7,30 +7,42 @@ import { navigationStore } from '../store/store.js'
 	<div>
 		<EditZaakType />
 		<EditKlant />
+		<ViewKlantAuditTrail v-if="navigationStore.modal === 'viewKlantAuditTrail'" />
 		<EditBericht />
+		<ViewBerichtAuditTrail v-if="navigationStore.modal === 'viewBerichtAuditTrail'" />
 		<EditTaak />
+		<ViewTaakAuditTrail v-if="navigationStore.modal === 'viewTaakAuditTrail'" />
 		<EditRol />
 		<EditZaak />
+		<ViewZaakAuditTrail v-if="navigationStore.modal === 'viewZaakAuditTrail'" />
 	</div>
 </template>
 
 <script>
 import EditZaakType from './zaakTypen/EditZaakType.vue'
 import EditKlant from './klanten/EditKlant.vue'
+import ViewKlantAuditTrail from './klanten/ViewKlantAuditTrail.vue'
 import EditBericht from './berichten/EditBericht.vue'
+import ViewBerichtAuditTrail from './berichten/ViewBerichtAuditTrail.vue'
 import EditTaak from './taken/EditTaak.vue'
+import ViewTaakAuditTrail from './taken/ViewTaakAuditTrail.vue'
 import EditRol from './rollen/EditRol.vue'
 import EditZaak from './zaken/EditZaak.vue'
+import ViewZaakAuditTrail from './zaken/ViewZaakAuditTrail.vue'
 
 export default {
 	name: 'Modals',
 	components: {
 		EditZaakType,
 		EditKlant,
+		ViewKlantAuditTrail,
 		EditBericht,
+		ViewBerichtAuditTrail,
 		EditTaak,
+		ViewTaakAuditTrail,
 		EditRol,
-		EditZaak
+		EditZaak,
+		ViewZaakAuditTrail,
 	},
 }
 </script>

src/modals/berichten/ViewBerichtAuditTrail.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { berichtStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal label-id="View Bericht Audit Trail modal"
+		@close="closeDialog">
+		<div class="modal__content">
+			<div class="audit-item">
+				<h3>Audit Trail ID: {{ auditTrail.id }}</h3>
+
+				<p><strong>Action:</strong> {{ auditTrail.action }}</p>
+				<p><strong>User:</strong> {{ auditTrail.userName }} ({{ auditTrail.user }})</p>
+				<p><strong>Session:</strong> {{ auditTrail.session }}</p>
+				<p><strong>IP Address:</strong> {{ auditTrail.ipAddress }}</p>
+				<p><strong>Created:</strong> {{ new Date(auditTrail.created).toLocaleString() }}</p>
+
+				<div v-if="auditTrail.changed">
+					<h4>Changes:</h4>
+					<ul>
+						<li v-for="(change, key) in auditTrail.changed" :key="key">
+							<strong>{{ key }}:</strong><br>
+							<span>Old: {{ change.old ?? 'N/A' }}</span><br>
+							<span>New: {{ change.new ?? 'N/A' }}</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Close
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcModal,
+	NcButton,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+
+export default {
+	name: 'ViewBerichtAuditTrail',
+	components: {
+		NcModal,
+		NcButton,
+		Cancel,
+	},
+	data() {
+		return {
+			auditTrail: {}, // Initialize with an empty object
+		}
+	},
+	mounted() {
+		// Assuming berichtStore.auditTrailItem is a single audit trail object
+		this.auditTrail = berichtStore.auditTrailItem || {}
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setModal(null)
+			berichtStore.setAuditTrailItem(null)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modal__content {
+	margin: 0.8rem;
+}
+
+.audit-item {
+	border-bottom: 1px solid #ccc;
+	padding: 0 0 10px 0;
+	margin: 0 0 10px 0;
+}
+
+.navigation-buttons {
+	margin-top: 10px;
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+}
+</style>

src/modals/klanten/ViewKlantAuditTrail.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { klantStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal label-id="View Klant Audit Trail modal"
+		@close="closeDialog">
+		<div class="modal__content">
+			<div class="audit-item">
+				<h3>Audit Trail ID: {{ auditTrail.id }}</h3>
+
+				<p><strong>Action:</strong> {{ auditTrail.action }}</p>
+				<p><strong>User:</strong> {{ auditTrail.userName }} ({{ auditTrail.user }})</p>
+				<p><strong>Session:</strong> {{ auditTrail.session }}</p>
+				<p><strong>IP Address:</strong> {{ auditTrail.ipAddress }}</p>
+				<p><strong>Created:</strong> {{ new Date(auditTrail.created).toLocaleString() }}</p>
+
+				<div v-if="auditTrail.changed">
+					<h4>Changes:</h4>
+					<ul>
+						<li v-for="(change, key) in auditTrail.changed" :key="key">
+							<strong>{{ key }}:</strong><br>
+							<span>Old: {{ change.old ?? 'N/A' }}</span><br>
+							<span>New: {{ change.new ?? 'N/A' }}</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Close
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcModal,
+	NcButton,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+
+export default {
+	name: 'ViewKlantAuditTrail',
+	components: {
+		NcModal,
+		NcButton,
+		Cancel,
+	},
+	data() {
+		return {
+			auditTrail: {}, // Initialize with an empty object
+		}
+	},
+	mounted() {
+		// Assuming klantStore.auditTrailItem is a single audit trail object
+		this.auditTrail = klantStore.auditTrailItem || {}
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setModal(null)
+			klantStore.setAuditTrailItem(null)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modal__content {
+	margin: 0.8rem;
+}
+
+.audit-item {
+	border-bottom: 1px solid #ccc;
+	padding: 0 0 10px 0;
+	margin: 0 0 10px 0;
+}
+
+.navigation-buttons {
+	margin-top: 10px;
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+}
+</style>

src/modals/taken/ViewTaakAuditTrail.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { taakStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal label-id="View Taak Audit Trail modal"
+		@close="closeDialog">
+		<div class="modal__content">
+			<div class="audit-item">
+				<h3>Audit Trail ID: {{ auditTrail.id }}</h3>
+
+				<p><strong>Action:</strong> {{ auditTrail.action }}</p>
+				<p><strong>User:</strong> {{ auditTrail.userName }} ({{ auditTrail.user }})</p>
+				<p><strong>Session:</strong> {{ auditTrail.session }}</p>
+				<p><strong>IP Address:</strong> {{ auditTrail.ipAddress }}</p>
+				<p><strong>Created:</strong> {{ new Date(auditTrail.created).toLocaleString() }}</p>
+
+				<div v-if="auditTrail.changed">
+					<h4>Changes:</h4>
+					<ul>
+						<li v-for="(change, key) in auditTrail.changed" :key="key">
+							<strong>{{ key }}:</strong><br>
+							<span>Old: {{ change.old ?? 'N/A' }}</span><br>
+							<span>New: {{ change.new ?? 'N/A' }}</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Close
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcModal,
+	NcButton,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+
+export default {
+	name: 'ViewTaakAuditTrail',
+	components: {
+		NcModal,
+		NcButton,
+		Cancel,
+	},
+	data() {
+		return {
+			auditTrail: {}, // Initialize with an empty object
+		}
+	},
+	mounted() {
+		// Assuming taakStore.auditTrailItem is a single audit trail object
+		this.auditTrail = taakStore.auditTrailItem || {}
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setModal(null)
+			taakStore.setAuditTrailItem(null)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modal__content {
+	margin: 0.8rem;
+}
+
+.audit-item {
+	border-bottom: 1px solid #ccc;
+	padding: 0 0 10px 0;
+	margin: 0 0 10px 0;
+}
+
+.navigation-buttons {
+	margin-top: 10px;
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+}
+</style>