diff options
-rw-r--r-- | src/components/ConfirmationDialog.vue | 73 | ||||
-rw-r--r-- | src/files-action.js | 36 |
2 files changed, 106 insertions, 3 deletions
diff --git a/src/components/ConfirmationDialog.vue b/src/components/ConfirmationDialog.vue new file mode 100644 index 00000000..d42e8f26 --- /dev/null +++ b/src/components/ConfirmationDialog.vue @@ -0,0 +1,73 @@ +<template> + <NcModal class="confirm-modal" @close="cancel"> + <div class="confirm-modal"> + <h2>{{ title }}</h2> + <slot /> + <div class="confirm-modal__buttons"> + <NcButton type="tertiary" :disabled="disabled" @click="cancel"> + {{ t('contacts', 'Cancel') }} + </NcButton> + <NcButton v-if="resolve" + :disabled="disabled" + type="primary" + @click="confirm"> + {{ confirmText }} + </NcButton> + </div> + </div> + </NcModal> +</template> + +<script> +import { NcButton, NcModal } from '@nextcloud/vue' +import { translate as t } from '@nextcloud/l10n' + +export default { + name: 'ConfirmationDialog', + components: { + NcButton, + NcModal, + }, + props: { + title: { + type: String, + required: true, + }, + resolve: { + type: Function, + required: true, + }, + reject: { + type: Function, + required: true, + }, + confirmText: { + type: String, + default: t('contacts', 'Confirm'), + }, + disabled: { + type: Boolean, + default: undefined, + }, + }, + methods: { + confirm() { + this.resolve() + }, + cancel() { + this.reject() + }, + }, +} +</script> + +<style lang="scss" scoped> +.confirm-modal { + padding: 20px; + + &__buttons { + display: flex; + justify-content: space-between; + } +} +</style> diff --git a/src/files-action.js b/src/files-action.js index 2db84c8e..1c4adb85 100644 --- a/src/files-action.js +++ b/src/files-action.js @@ -20,11 +20,16 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * */ +import ConfirmationDialog from './components/ConfirmationDialog.vue' + import { generateUrl } from '@nextcloud/router' import { translate as t } from '@nextcloud/l10n' -import { registerFileAction, FileAction, Permission, DefaultType } from '@nextcloud/files' +import { DefaultType, FileAction, Permission, registerFileAction } from '@nextcloud/files' /* eslint-disable-next-line import/no-unresolved */ import ContactSvg from '@mdi/svg/svg/account-multiple.svg?raw' +import Vue from 'vue' + +Vue.prototype.t = t const mime = 'text/vcard' const name = 'contacts-import' @@ -44,8 +49,33 @@ if (nextcloudVersionIsGreaterThanOr28) { }, iconSvgInline: () => ContactSvg, async exec(file) { - window.location = generateUrl(`/apps/contacts/import?file=${file.path}`) - return true + let dialog + try { + // Open the confirmation dialog + const containerId = 'confirmation-' + Math.random().toString(16).slice(2) + const container = document.createElement('div') + container.id = containerId + document.body.appendChild(container) + await new Promise((resolve, reject) => { + const ImportConfirmationDialog = Vue.extend(ConfirmationDialog) + dialog = new ImportConfirmationDialog({ + propsData: { + title: t('contacts', 'Are you sure you want to import this contact file?'), + resolve, + reject, + }, + }) + dialog.$mount(`#${containerId}`) + }) + + // Redirect to the import page if the user confirmed + window.location = generateUrl(`/apps/contacts/import?file=${file.path}`) + } catch (e) { + // Do nothing if the user cancels + } + + // Destroy confirmation modal (div element is removed from the DOM by vue) + dialog.$destroy() }, })) } else { |