Skip to content

Commit

Permalink
Delete/Edit modals
Browse files Browse the repository at this point in the history
  • Loading branch information
rubenvdlinde committed Jan 17, 2025
1 parent ba459f1 commit 122fe90
Show file tree
Hide file tree
Showing 3 changed files with 354 additions and 0 deletions.
108 changes: 108 additions & 0 deletions src/modals/menu/DeleteMenu.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<script setup>
import { menuStore, navigationStore } from '../../store/store.js'
</script>

<template>
<NcDialog v-if="navigationStore.dialog === 'deleteMenu'"
name="Delete Menu"
size="normal"
:can-close="false">
<p v-if="success === null">
Do you want to permanently delete <b>{{ menuStore.menuItem?.id }}</b>? This action cannot be undone.
</p>

<NcNoteCard v-if="success" type="success">
<p>Menu successfully deleted</p>
</NcNoteCard>
<NcNoteCard v-if="error" type="error">
<p>{{ error }}</p>
</NcNoteCard>

<template #actions>
<NcButton @click="closeDialog">
<template #icon>
<Cancel :size="20" />
</template>
{{ success === null ? 'Cancel' : 'Close' }}
</NcButton>
<NcButton
v-if="success === null"
:disabled="loading"
type="error"
@click="deleteMenu()">
<template #icon>
<NcLoadingIcon v-if="loading" :size="20" />
<TrashCanOutline v-if="!loading" :size="20" />
</template>
Delete
</NcButton>
</template>
</NcDialog>
</template>

<script>
import {
NcButton,
NcDialog,
NcLoadingIcon,
NcNoteCard,
} from '@nextcloud/vue'
import Cancel from 'vue-material-design-icons/Cancel.vue'
import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
/**
* Component for deleting menu items
*/
export default {
name: 'DeleteMenu',
components: {
NcDialog,
NcButton,
NcLoadingIcon,
NcNoteCard,
// Icons
TrashCanOutline,
Cancel,
},
data() {
return {
success: null,
loading: false,
error: false,
closeModalTimeout: null,
}
},
methods: {
/**
* Closes the delete dialog and resets state
*/
closeDialog() {
navigationStore.setDialog(false)
clearTimeout(this.closeModalTimeout)
this.success = null
this.loading = false
this.error = false
},
/**
* Deletes the selected menu item
*/
async deleteMenu() {
this.loading = true
menuStore.deleteMenu({
...menuStore.menuItem,
}).then(({ response }) => {
this.success = response.ok
this.error = false
response.ok && (this.closeModalTimeout = setTimeout(this.closeDialog, 2000))
}).catch((error) => {
this.success = false
this.error = error.message || 'An error occurred while deleting the menu'
}).finally(() => {
this.loading = false
})
},
},
}
</script>
144 changes: 144 additions & 0 deletions src/modals/menu/EditMenu.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<script setup>
import { menuStore, navigationStore } from '../../store/store.js'
</script>

<template>
<NcDialog v-if="navigationStore.dialog === 'editMenu'"
:name="menuStore.menuItem?.id ? 'Edit Menu' : 'Add Menu'"
size="normal"
:can-close="false">
<NcNoteCard v-if="success" type="success">
<p>Menu successfully modified</p>
</NcNoteCard>
<NcNoteCard v-if="error" type="error">
<p>{{ error }}</p>
</NcNoteCard>

<template #actions>
<NcButton
@click="closeDialog">
<template #icon>
<Cancel :size="20" />
</template>
{{ success ? 'Close' : 'Cancel' }}
</NcButton>
<NcButton v-if="success === null"
:disabled="loading"
type="primary"
@click="editMenu()">
<template #icon>
<NcLoadingIcon v-if="loading" :size="20" />
<ContentSaveOutline v-if="!loading && menuStore.menuItem?.id" :size="20" />
<Plus v-if="!loading && !menuStore.menuItem?.id" :size="20" />
</template>
{{ menuStore.menuItem?.id ? 'Save' : 'Add' }}
</NcButton>
</template>

<div v-if="!success" class="formContainer">
<NcTextArea :disabled="loading"
label="Menu"
placeholder="Menu content"
:value.sync="menuItem.content" />
</div>
</NcDialog>
</template>

<script>
import {
NcButton,
NcDialog,
NcTextArea,
NcLoadingIcon,
NcNoteCard,
} from '@nextcloud/vue'
import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
import Cancel from 'vue-material-design-icons/Cancel.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
/**
* Component for editing menu items
*/
export default {
name: 'EditMenu',
components: {
NcDialog,
NcTextArea,
NcButton,
NcLoadingIcon,
NcNoteCard,
// Icons
ContentSaveOutline,
Cancel,
Plus,
},
data() {
return {
menuItem: {
content: '',
},
success: null,
loading: false,
error: false,
hasUpdated: false,
closeDialogTimeout: null,
}
},
mounted() {
this.initializeMenuItem()
},
updated() {
if (navigationStore.dialog === 'editMenu' && !this.hasUpdated) {
this.initializeMenuItem()
this.hasUpdated = true
}
},
methods: {
/**
* Initialize menu item data from store
*/
initializeMenuItem() {
if (menuStore.menuItem?.id) {
this.menuItem = {
...menuStore.menuItem,
content: menuStore.menuItem.content || '',
}
}
},
/**
* Close the dialog and reset state
*/
closeDialog() {
navigationStore.setDialog(false)
clearTimeout(this.closeDialogTimeout)
this.success = null
this.loading = false
this.error = false
this.hasUpdated = false
this.menuItem = {
content: '',
}
},
/**
* Save menu item changes
*/
async editMenu() {
this.loading = true
menuStore.saveMenu({
...this.menuItem,
}).then(({ response }) => {
this.success = response.ok
this.error = false
response.ok && (this.closeDialogTimeout = setTimeout(this.closeDialog, 2000))
}).catch((error) => {
this.success = false
this.error = error.message || 'An error occurred while saving the menu'
}).finally(() => {
this.loading = false
})
},
},
}
</script>
102 changes: 102 additions & 0 deletions src/modals/page/DeletePage.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<script setup>
import { pageStore, navigationStore } from '../../store/store.js'
</script>

<template>
<NcDialog v-if="navigationStore.dialog === 'deletePage'"
name="Delete Page"
size="normal"
:can-close="false">
<p v-if="success === null">
Do you want to permanently delete <b>{{ pageStore.pageItem?.id }}</b>? This action cannot be undone.
</p>

<NcNoteCard v-if="success" type="success">
<p>Page successfully deleted</p>
</NcNoteCard>
<NcNoteCard v-if="error" type="error">
<p>{{ error }}</p>
</NcNoteCard>

<template #actions>
<NcButton @click="closeDialog">
<template #icon>
<Cancel :size="20" />
</template>
{{ success === null ? 'Cancel' : 'Close' }}
</NcButton>
<NcButton
v-if="success === null"
:disabled="loading"
type="error"
@click="deletePage()">
<template #icon>
<NcLoadingIcon v-if="loading" :size="20" />
<TrashCanOutline v-if="!loading" :size="20" />
</template>
Delete
</NcButton>
</template>
</NcDialog>
</template>

<script>
import {
NcButton,
NcDialog,
NcLoadingIcon,
NcNoteCard,
} from '@nextcloud/vue'
import Cancel from 'vue-material-design-icons/Cancel.vue'
import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
/**
* Component for deleting pages
*/
export default {
name: 'DeletePage',
components: {
NcDialog,
NcButton,
NcLoadingIcon,
NcNoteCard,
// Icons
TrashCanOutline,
Cancel,
},
data() {
return {
success: null,
loading: false,
error: false,
closeModalTimeout: null,
}
},
methods: {
closeDialog() {
navigationStore.setDialog(false)
clearTimeout(this.closeModalTimeout)
this.success = null
this.loading = false
this.error = false
},
async deletePage() {
this.loading = true
pageStore.deletePage({
...pageStore.pageItem,
}).then(({ response }) => {
this.success = response.ok
this.error = false
response.ok && (this.closeModalTimeout = setTimeout(this.closeDialog, 2000))
}).catch((error) => {
this.success = false
this.error = error.message || 'An error occurred while deleting the page'
}).finally(() => {
this.loading = false
})
},
},
}
</script>

0 comments on commit 122fe90

Please sign in to comment.