diff --git a/src/dialogs/Dialogs.vue b/src/dialogs/Dialogs.vue index 9160f1f7..f1439539 100644 --- a/src/dialogs/Dialogs.vue +++ b/src/dialogs/Dialogs.vue @@ -30,6 +30,7 @@ import { navigationStore } from '../store/store.js' <CopyOrganizationDialog /> <DeleteThemeDialog /> <CopyThemeDialog /> + <CopyMenuDialog v-if="navigationStore.dialog === 'copyMenu'" /> </div> </template> @@ -58,6 +59,7 @@ import DeletePublicationThemeDialog from './publicationTheme/DeletePublicationTh import CopyThemeDialog from './theme/CopyThemeDialog.vue' import DeleteThemeDialog from './theme/DeleteThemeDialog.vue' import DownloadPublicationDialog from './publication/DownloadPublicationDialog.vue' +import CopyMenuDialog from './menu/CopyMenuDialog.vue' export default { name: 'Dialogs', @@ -86,6 +88,7 @@ export default { DeleteThemeDialog, CopyThemeDialog, DownloadPublicationDialog, + CopyMenuDialog, }, } </script> diff --git a/src/dialogs/menu/CopyMenuDialog.vue b/src/dialogs/menu/CopyMenuDialog.vue new file mode 100644 index 00000000..43608b67 --- /dev/null +++ b/src/dialogs/menu/CopyMenuDialog.vue @@ -0,0 +1,119 @@ +<script setup> +import { navigationStore, menuStore } from '../../store/store.js' +</script> + +<template> + <NcDialog name="Menu kopieren" + :can-close="false"> + <div v-if="success !== null || error"> + <NcNoteCard v-if="success" type="success"> + <p>Menu succesvol gekopieerd</p> + </NcNoteCard> + <NcNoteCard v-if="!success" type="error"> + <p>Er is iets fout gegaan bij het kopiëren van Menu</p> + </NcNoteCard> + <NcNoteCard v-if="error" type="error"> + <p>{{ error }}</p> + </NcNoteCard> + </div> + + <p v-if="success === null"> + Wil je <b>{{ menuStore.menuItem?.name }}</b> kopiëren? + </p> + + <template #actions> + <NcButton :disabled="loading" icon="" @click="navigationStore.setDialog(false)"> + <template #icon> + <Cancel :size="20" /> + </template> + {{ success !== null ? 'Sluiten' : 'Annuleer' }} + </NcButton> + <NcButton v-if="success === null" + :disabled="loading" + type="primary" + @click="copyMenu()"> + <template #icon> + <NcLoadingIcon v-if="loading" :size="20" /> + <ContentCopy v-if="!loading" :size="20" /> + </template> + Kopiëren + </NcButton> + </template> + </NcDialog> +</template> + +<script> +import { NcButton, NcDialog, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue' +import _ from 'lodash' + +import Cancel from 'vue-material-design-icons/Cancel.vue' +import ContentCopy from 'vue-material-design-icons/ContentCopy.vue' + +import { Menu } from '../../entities/index.js' + +export default { + name: 'CopyMenuDialog', + components: { + NcDialog, + NcButton, + NcNoteCard, + NcLoadingIcon, + // Icons + Cancel, + ContentCopy, + }, + data() { + return { + loading: false, + success: null, + error: false, + } + }, + methods: { + copyMenu() { + this.loading = true + + const menuClone = _.cloneDeep(menuStore.menuItem) + + menuClone.name = 'KOPIE: ' + menuClone.name + delete menuClone.id + delete menuClone.uuid + + const menuItem = new Menu(menuClone) + + menuStore.saveMenu(menuItem) + .then(({ response }) => { + this.loading = false + this.success = response.ok + + navigationStore.setSelected('menus') + // Wait for the user to read the feedback then close the model + setTimeout(() => { + navigationStore.setDialog(false) + }, 2000) + }) + .catch((err) => { + this.error = err + 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> diff --git a/src/views/menus/MenuDetail.vue b/src/views/menus/MenuDetail.vue index 07f5ac0e..15d31f3b 100644 --- a/src/views/menus/MenuDetail.vue +++ b/src/views/menus/MenuDetail.vue @@ -39,7 +39,7 @@ import { getTheme } from '../../services/getTheme.js' </template> Bewerken </NcActionButton> - <NcActionButton @click="menuStore.setMenuItem(menu); navigationStore.setModal('copyMenu')"> + <NcActionButton @click="menuStore.setMenuItem(menu); navigationStore.setDialog('copyMenu')"> <template #icon> <ContentCopy :size="20" /> </template> diff --git a/src/views/menus/MenuList.vue b/src/views/menus/MenuList.vue index f1214045..e6509169 100644 --- a/src/views/menus/MenuList.vue +++ b/src/views/menus/MenuList.vue @@ -59,6 +59,12 @@ import { navigationStore, menuStore } from '../../store/store.js' </template> Bewerken </NcActionButton> + <NcActionButton @click="menuStore.setMenuItem(menu); navigationStore.setDialog('copyMenu')"> + <template #icon> + <ContentCopy :size="20" /> + </template> + Kopiëren + </NcActionButton> <NcActionButton @click="menuStore.setMenuItem(menu); navigationStore.setModal('deleteMenu')"> <template #icon> <Delete :size="20" /> @@ -93,6 +99,7 @@ import Pencil from 'vue-material-design-icons/Pencil.vue' import Plus from 'vue-material-design-icons/Plus.vue' import Refresh from 'vue-material-design-icons/Refresh.vue' import MenuClose from 'vue-material-design-icons/MenuClose.vue' +import ContentCopy from 'vue-material-design-icons/ContentCopy.vue' export default { name: 'MenuList',