added unset property to mapping

src/entities/mapping/mapping.ts

@@ -13,7 +13,7 @@ export class Mapping extends ReadonlyBaseClass implements TMapping {
 	public readonly name: string
 	public readonly description: string
 	public readonly mapping: Record<string, unknown>
-	public readonly unset: any[]
+	public readonly unset: string[]
 	public readonly cast: Record<string, unknown>
 	public readonly passThrough: boolean
 	public readonly dateCreated: string
@@ -47,7 +47,7 @@ export class Mapping extends ReadonlyBaseClass implements TMapping {
 			name: z.string().max(255),
 			description: z.string(),
 			mapping: z.record(z.any()),
-			unset: z.array(z.any()),
+			unset: z.array(z.string()),
 			cast: z.record(z.any()),
 			passThrough: z.boolean(),
 			dateCreated: z.string().or(z.literal('')),

src/entities/mapping/mapping.types.ts

@@ -7,7 +7,7 @@ export type TMapping = {
     name: string
     description: string
     mapping: Record<string, unknown>
-    unset: any[]
+    unset: string[]
     cast: Record<string, unknown>
     passThrough: boolean
     dateCreated: string

src/modals/MappingTest/components/TestMappingMappingSelect.vue

@@ -143,6 +143,10 @@ import { mappingStore } from '../../../store/store.js'
 					:error="!validJson(mappingItem.cast, true)"
 					:helper-text="!validJson(mappingItem.cast, true) ? 'Invalid JSON' : ''" />
 
+				<NcTextArea :value.sync="mappingItem.unset"
+					label="unset"
+					helper-text="Enter a comma-separated list of keys." />
+
 				<div class="buttons">
 					<NcButton class="reset-button"
 						type="secondary"
@@ -229,6 +233,7 @@ export default {
 				description: '',
 				mapping: '{}',
 				cast: '{}',
+				unset: '', // array as string
 			},
 			// use uniqueMappingId as the "No mapping" option's ID to avoid any possible truthy comparisons
 			uniqueMappingId: Symbol('No Mapping'), // Symbol creates a truly unique value, so unique making 2 of the same symbol will never be the same.
@@ -296,12 +301,14 @@ export default {
 					description: '',
 					mapping: '{}',
 					cast: '{}',
+					unset: '',
 				}
 			} else {
 				this.mappingItem.name = this.mappings.value.fullMapping.name
 				this.mappingItem.description = this.mappings.value.fullMapping.description
 				this.mappingItem.mapping = JSON.stringify(this.mappings.value.fullMapping.mapping, null, 2)
 				this.mappingItem.cast = JSON.stringify(this.mappings.value.fullMapping.cast, null, 2)
+				this.mappingItem.unset = this.mappings.value.fullMapping.unset.join(', ') // turn the array into a string
 			}
 		},
 		async fetchMappings(currentMappingItem = null) {
@@ -419,6 +426,7 @@ export default {
 					description: this.mappingItem.description,
 					mapping: JSON.parse(this.mappingItem.mapping),
 					cast: this.mappingItem.cast ? JSON.parse(this.mappingItem.cast) : null,
+					unset: this.mappingItem.unset.split(/ *, */g),
 				},
 				inputObject: JSON.parse(this.inputObject.value),
 				schema: this.schemas.value?.id,
@@ -443,6 +451,7 @@ export default {
 				description: this.mappingItem.description,
 				mapping: JSON.parse(this.mappingItem.mapping),
 				cast: JSON.parse(this.mappingItem.cast),
+				unset: this.mappingItem.unset.split(/ *, */g),
 			})
 
 			mappingStore.saveMapping(newMappingItem)

src/modals/Modals.vue

@@ -23,6 +23,8 @@ import { navigationStore } from '../store/store.js'
 		<DeleteMappingMapping />
 		<EditMappingCast />
 		<DeleteMappingCast />
+		<EditMappingUnset v-if="navigationStore.modal === 'editMappingUnset'" />
+		<DeleteMappingUnset v-if="navigationStore.modal === 'deleteMappingUnset'" />
 		<DeleteSynchronization />
 		<EditSynchronization />
 		<TestSynchronization />
@@ -68,6 +70,8 @@ import DeleteMappingCast from './mappingCast/DeleteMappingCast.vue'
 import ViewJobLog from './Log/ViewJobLog.vue'
 import ViewSynchronizationLog from './Log/ViewSynchronizationLog.vue'
 import ViewSynchronizationContract from './Log/ViewSynchronizationContract.vue'
+import EditMappingUnset from './mappingUnset/EditMappingUnset.vue'
+import DeleteMappingUnset from './mappingUnset/DeleteMappingUnset.vue'
 
 export default {
 	name: 'Modals',
@@ -102,6 +106,8 @@ export default {
 		ViewJobLog,
 		ViewSynchronizationLog,
 		ViewSynchronizationContract,
+		EditMappingUnset,
+		DeleteMappingUnset,
 	},
 	setup() {
 		return {

src/modals/mappingUnset/DeleteMappingUnset.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { navigationStore, mappingStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog name="Delete Mapping Unset"
+		:can-close="false">
+		<div v-if="success !== null || error">
+			<NcNoteCard v-if="success" type="success">
+				<p>Successfully deleted mapping unset</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success" type="error">
+				<p>Something went wrong deleting the mapping unset</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+		</div>
+		<p v-if="success === null">
+			Do you want to delete <b>{{ mappingStore.mappingUnsetKey }}</b>? This action cannot be undone.
+		</p>
+		<template #actions>
+			<NcButton :disabled="loading" icon="" @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success !== null ? 'Close' : 'Cancel' }}
+			</NcButton>
+			<NcButton
+				v-if="success === null"
+				:disabled="loading"
+				icon="Delete"
+				type="error"
+				@click="deleteMappingUnset()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Delete v-if="!loading" :size="20" />
+				</template>
+				Delete
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcDialog, NcNoteCard, NcLoadingIcon } from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+
+export default {
+	name: 'DeleteMappingUnset',
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		// Icons
+		Cancel,
+		Delete,
+	},
+	data() {
+		return {
+			loading: false,
+			success: null,
+			error: false,
+			closeTimeoutFunc: null,
+		}
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			mappingStore.setMappingUnsetKey(null)
+		},
+		deleteMappingUnset() {
+			this.loading = true
+
+			const mappingClone = { ...mappingStore.mappingItem }
+
+			const unsetIndex = mappingClone.unset.indexOf(mappingStore.mappingUnsetKey)
+			if (unsetIndex > -1) {
+				mappingClone.unset.splice(unsetIndex, 1)
+			} else {
+				this.error = 'Mapping unset not found'
+				this.loading = false
+				return
+			}
+
+			const mappingItem = {
+				...mappingStore.mappingItem,
+				unset: mappingClone.unset,
+			}
+
+			mappingStore.saveMapping(mappingItem)
+				.then(({ response }) => {
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+				})
+				.catch((err) => {
+					this.error = err
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style>
+.modal__content {
+    margin: var(--OC-margin-50);
+    text-align: center;
+}
+
+.zaakDetailsContainer {
+    margin-block-start: var(--OC-margin-20);
+    margin-inline-start: var(--OC-margin-20);
+    margin-inline-end: var(--OC-margin-20);
+}
+
+.success {
+    color: green;
+}
+</style>

src/modals/mappingUnset/EditMappingUnset.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { mappingStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="editMappingUnset"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>{{ mappingStore.mappingUnsetKey ? 'Edit' : 'Add' }} Mapping Unset</h2>
+			<NcNoteCard v-if="success" type="success">
+				<p>Mapping Unset successfully added</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+
+			<form v-if="!success" @submit.prevent="handleSubmit">
+				<div class="form-group">
+					<NcTextField
+						id="unsetKey"
+						label="Unset Key*"
+						required
+						:error="isUnsetTaken(unsetKey)"
+						:helper-text="isUnsetTaken(unsetKey) ? 'This unset key is already in use. Please choose a different key name.' : ''"
+						:value.sync="unsetKey" />
+				</div>
+			</form>
+
+			<NcButton v-if="!success"
+				:disabled="loading || !unsetKey || isUnsetTaken(unsetKey) || mappingStore.mappingUnsetKey === unsetKey"
+				type="primary"
+				@click="editMappingUnset()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentSaveOutline v-if="!loading" :size="20" />
+				</template>
+				Save
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcModal,
+	NcLoadingIcon,
+	NcNoteCard,
+	NcTextField,
+} from '@nextcloud/vue'
+
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+
+export default {
+	name: 'EditMappingUnset',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcTextField,
+		// Icons
+		ContentSaveOutline,
+	},
+	data() {
+		return {
+			unsetKey: '',
+			success: null,
+			loading: false,
+			error: false,
+			closeTimeoutFunc: null,
+		}
+	},
+	mounted() {
+		this.initializeMappingUnset()
+	},
+	methods: {
+		initializeMappingUnset() {
+			if (mappingStore.mappingUnsetKey) {
+				this.unsetKey = mappingStore.mappingUnsetKey
+			}
+		},
+		isUnsetTaken(key) {
+			if (!mappingStore.mappingItem?.unset) return false
+
+			// if the key is the same as the one we are editing, don't check for duplicates.
+			// this is safe since you are not allowed to save the same key anyway (only for edit modal).
+			if (mappingStore.mappingUnsetKey === key) return false
+
+			const allKeys = mappingStore.mappingItem.unset
+			if (allKeys.includes(key)) return true
+
+			return false
+		},
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			mappingStore.setMappingUnsetKey(null)
+		},
+		editMappingUnset() {
+			this.loading = true
+
+			// copy the mapping item unset array
+			const newMappingUnset = [...mappingStore.mappingItem.unset]
+
+			// if mappingUnsetKey is set remove that from the array
+			if (mappingStore.mappingUnsetKey) {
+				newMappingUnset.splice(newMappingUnset.indexOf(mappingStore.mappingUnsetKey), 1)
+			}
+
+			// add the new key
+			newMappingUnset.push(this.unsetKey)
+
+			// remove duplicates (if all went well duplicates shouldn't exist anyway)
+			const uniqueMappingUnset = [...new Set(newMappingUnset)]
+
+			const newMappingItem = {
+				...mappingStore.mappingItem,
+				unset: uniqueMappingUnset,
+			}
+
+			mappingStore.saveMapping(newMappingItem)
+				.then(({ response }) => {
+					this.success = response.ok
+					this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+				})
+				.catch((error) => {
+					this.error = error.message || 'An error occurred while saving the mapping unset'
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>

src/store/modules/mapping.js

@@ -8,6 +8,7 @@ export const useMappingStore = defineStore('mapping', {
 		mappingList: [],
 		mappingMappingKey: null,
 		mappingCastKey: null,
+		mappingUnsetKey: null,
 	}),
 	actions: {
 		setMappingItem(mappingItem) {
@@ -28,6 +29,10 @@ export const useMappingStore = defineStore('mapping', {
 			this.mappingCastKey = mappingCastKey
 			console.log('Active mapping cast key set to ' + mappingCastKey)
 		},
+		setMappingUnsetKey(mappingUnsetKey) {
+			this.mappingUnsetKey = mappingUnsetKey
+			console.log('Active mapping unset key set to ' + mappingUnsetKey)
+		},
 		/* istanbul ignore next */ // ignore this for Jest until moved into a service
 		async refreshMappingList(search = null) {
 			// @todo this might belong in a service?