diff --git a/src/components/Settings/SettingsImportContacts.vue b/src/components/Settings/SettingsImportContacts.vue index ea17fd12d..22446cee7 100644 --- a/src/components/Settings/SettingsImportContacts.vue +++ b/src/components/Settings/SettingsImportContacts.vue @@ -70,10 +70,6 @@ <span class="import-contact__button-icon icon-folder-white" /> {{ t('contacts', 'Import from files') }} </button> - <!-- <button id="cancel" class="button import-contact__button import-contact__button--cancel" @click="toggleModal"> - <span class="import-contact__button-icon icon-close" /> - {{ t('contacts', 'Cancel') }} - </button> --> </section> </Modal> </template> @@ -93,6 +89,8 @@ import { generateRemoteUrl } from '@nextcloud/router' import { getFilePickerBuilder } from '@nextcloud/dialogs' import axios from 'axios' +const CancelToken = axios.CancelToken + const picker = getFilePickerBuilder(t('contacts', 'Choose a vcard file to import')) .setMultiSelect(false) .setModal(true) @@ -106,6 +104,7 @@ export default { data() { return { + cancelRequest: () => {}, importDestination: false, isOpened: false, loading: false, @@ -191,6 +190,10 @@ export default { toggleModal() { this.isOpened = !this.isOpened + // cancel any ongoing request if closed + if (!this.isOpened) { + this.cancelRequest() + } }, clickImportInput() { @@ -203,8 +206,18 @@ export default { async openPicker() { try { this.loading = true + // unlikely, but let's cancel any previous request + this.cancelRequest() + + // prepare cancel token for axios request + const source = CancelToken.source() + this.cancelRequest = source.cancel + + // pick and retrieve file const path = await picker.pick() - const file = await axios.get(generateRemoteUrl(`dav/files/${getCurrentUser().uid}`) + encodePath(path)) + const file = await axios.get(generateRemoteUrl(`dav/files/${getCurrentUser().uid}`) + encodePath(path), { + cancelToken: source.token, + }) this.$store.dispatch('changeStage', 'parsing') this.$store.dispatch('setAddressbook', this.selectedAddressbook.displayName) @@ -223,6 +236,7 @@ export default { * Reset default component state */ resetState() { + this.cancelRequest = () => {} this.importDestination = false this.isOpened = false this.loading = false @@ -234,9 +248,6 @@ export default { <style lang="scss" scoped> .import-contact { &__modal { - h3 { - padding-bottom: 22px; - } section { padding: 22px; // only one padding bewteen sections