forked from OpenCatalogi/opencatalogi
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ba459f1
commit 122fe90
Showing
3 changed files
with
354 additions
and
0 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
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> |
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,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> |
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,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> |