-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #67 from ConductionNL/feature/CONNECTOR-125/sync-c…
…onfig feature/CONNECTOR-125/sync-config
- Loading branch information
Showing
9 changed files
with
682 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
127 changes: 127 additions & 0 deletions
127
src/modals/SynchronizationSourceConfig/DeleteSynchronizationSourceConfig.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| <script setup> | ||
| import { navigationStore, synchronizationStore } from '../../store/store.js' | ||
| </script> | ||
|
|
||
| <template> | ||
| <NcDialog name="Delete Source Config" | ||
| :can-close="false"> | ||
| <div v-if="success !== null || error"> | ||
| <NcNoteCard v-if="success" type="success"> | ||
| <p>Successfully deleted source config</p> | ||
| </NcNoteCard> | ||
| <NcNoteCard v-if="!success" type="error"> | ||
| <p>Something went wrong deleting the source config</p> | ||
| </NcNoteCard> | ||
| <NcNoteCard v-if="error" type="error"> | ||
| <p>{{ error }}</p> | ||
| </NcNoteCard> | ||
| </div> | ||
| <p v-if="success === null"> | ||
| Do you want to delete <b>{{ synchronizationStore.synchronizationSourceConfigKey }}</b>? | ||
| </p> | ||
| <template #actions> | ||
| <NcButton :disabled="loading" @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="deleteSourceConfig()"> | ||
| <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: 'DeleteSynchronizationSourceConfig', | ||
| 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) | ||
| synchronizationStore.setSynchronizationSourceConfigKey(null) | ||
| }, | ||
| deleteSourceConfig() { | ||
| this.loading = true | ||
| const sourceConfigClone = { ...synchronizationStore.synchronizationItem.sourceConfig } | ||
| if (synchronizationStore.synchronizationSourceConfigKey in sourceConfigClone) { | ||
| delete sourceConfigClone[synchronizationStore.synchronizationSourceConfigKey] | ||
| } else { | ||
| this.error = 'Source config not found' | ||
| this.loading = false | ||
| return | ||
| } | ||
| const synchronizationItem = { | ||
| ...synchronizationStore.synchronizationItem, | ||
| sourceConfig: sourceConfigClone, | ||
| } | ||
| synchronizationStore.saveSynchronization(synchronizationItem) | ||
| .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> |
152 changes: 152 additions & 0 deletions
152
src/modals/SynchronizationSourceConfig/EditSynchronizationSourceConfig.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| <script setup> | ||
| import { synchronizationStore, navigationStore } from '../../store/store.js' | ||
| </script> | ||
|
|
||
| <template> | ||
| <NcModal ref="modalRef" | ||
| label-id="editSourceConfig" | ||
| @close="closeModal"> | ||
| <div class="modalContent"> | ||
| <h2>{{ synchronizationStore.synchronizationSourceConfigKey ? 'Edit' : 'Add' }} Source Config</h2> | ||
| <NcNoteCard v-if="success" type="success"> | ||
| <p>Source Config 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="sourceConfigKey" | ||
| label="Source Config Key*" | ||
| required | ||
| :error="isTaken(sourceConfig.key)" | ||
| :helper-text="isTaken(sourceConfig.key) ? 'This source config key is already in use. Please choose a different key name.' : ''" | ||
| :value.sync="sourceConfig.key" /> | ||
| <NcTextField | ||
| id="sourceConfigValue" | ||
| label="Source Config Value*" | ||
| required | ||
| :value.sync="sourceConfig.value" /> | ||
| </div> | ||
| </form> | ||
|
|
||
| <NcButton v-if="!success" | ||
| :disabled="loading | ||
| || !sourceConfig.key | ||
| || !sourceConfig.value | ||
| /// checks if the key is unique, ignores if the key is not changed | ||
| || isTaken(sourceConfig.key) | ||
| /// checks if the value is the same as the one in the source config, only works if the key is not changed | ||
| || synchronizationStore.synchronizationItem.sourceConfig[sourceConfig.key] === sourceConfig.value" | ||
| type="primary" | ||
| @click="editSourceConfig()"> | ||
| <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: 'EditSynchronizationSourceConfig', | ||
| components: { | ||
| NcModal, | ||
| NcButton, | ||
| NcLoadingIcon, | ||
| NcNoteCard, | ||
| NcTextField, | ||
| // Icons | ||
| ContentSaveOutline, | ||
| }, | ||
| data() { | ||
| return { | ||
| sourceConfig: { | ||
| key: '', | ||
| value: '', | ||
| }, | ||
| success: null, | ||
| loading: false, | ||
| error: false, | ||
| closeTimeoutFunc: null, | ||
| } | ||
| }, | ||
| mounted() { | ||
| this.initializeSourceConfig() | ||
| }, | ||
| methods: { | ||
| initializeSourceConfig() { | ||
| if (synchronizationStore.synchronizationSourceConfigKey) { | ||
| this.sourceConfig.key = synchronizationStore.synchronizationSourceConfigKey | ||
| this.sourceConfig.value = synchronizationStore.synchronizationItem.sourceConfig[synchronizationStore.synchronizationSourceConfigKey] | ||
| } | ||
| }, | ||
| isTaken(key) { | ||
| if (!synchronizationStore.synchronizationItem?.sourceConfig) 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 (synchronizationStore.synchronizationSourceConfigKey === key) return false | ||
| const allKeys = Object.keys(synchronizationStore.synchronizationItem.sourceConfig) | ||
| if (allKeys.includes(key)) return true | ||
| return false | ||
| }, | ||
| closeModal() { | ||
| navigationStore.setModal(false) | ||
| clearTimeout(this.closeTimeoutFunc) | ||
| synchronizationStore.setSynchronizationSourceConfigKey(null) | ||
| }, | ||
| editSourceConfig() { | ||
| this.loading = true | ||
| const isSourceConfigKeyPresent = !!synchronizationStore.synchronizationSourceConfigKey | ||
| const keyChanged = synchronizationStore.synchronizationSourceConfigKey !== this.sourceConfig.key | ||
| // copy the source config object | ||
| const newSourceConfig = { ...synchronizationStore.synchronizationItem.sourceConfig } | ||
| // if synchronizationSourceConfigKey is set remove that from the object | ||
| if (isSourceConfigKeyPresent && keyChanged) { | ||
| delete newSourceConfig[synchronizationStore.synchronizationSourceConfigKey] | ||
| } | ||
| // add the new key | ||
| newSourceConfig[this.sourceConfig.key] = this.sourceConfig.value | ||
| const newSynchronizationItem = { | ||
| ...synchronizationStore.synchronizationItem, | ||
| sourceConfig: newSourceConfig, | ||
| } | ||
| synchronizationStore.saveSynchronization(newSynchronizationItem) | ||
| .then(({ response }) => { | ||
| this.success = response.ok | ||
| this.closeTimeoutFunc = setTimeout(this.closeModal, 2000) | ||
| }) | ||
| .catch((error) => { | ||
| this.error = error.message || 'An error occurred while saving the source config' | ||
| }) | ||
| .finally(() => { | ||
| this.loading = false | ||
| }) | ||
| }, | ||
| }, | ||
| } | ||
| </script> |
Oops, something went wrong.