add nova
This commit is contained in:
284
nova/resources/js/components/DeleteMenu.vue
Normal file
284
nova/resources/js/components/DeleteMenu.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="h-9" v-if="hasDropDownMenuItems">
|
||||
<Dropdown>
|
||||
<Button
|
||||
variant="ghost"
|
||||
padding="tight"
|
||||
icon="trash"
|
||||
trailing-icon="chevron-down"
|
||||
:aria-label="__('Trash Dropdown')"
|
||||
/>
|
||||
|
||||
<template #menu>
|
||||
<DropdownMenu class="px-1" width="250">
|
||||
<nav class="py-1">
|
||||
<!-- Delete Menu -->
|
||||
<DropdownMenuItem
|
||||
v-if="shouldShowDeleteItem"
|
||||
as="button"
|
||||
class="border-none"
|
||||
dusk="delete-selected-button"
|
||||
@click.prevent="confirmDeleteSelectedResources"
|
||||
>
|
||||
{{ __(viaManyToMany ? 'Detach Selected' : 'Delete Selected') }}
|
||||
<CircleBadge>{{ selectedResourcesCount }}</CircleBadge>
|
||||
</DropdownMenuItem>
|
||||
|
||||
<!-- Restore Resources -->
|
||||
<DropdownMenuItem
|
||||
v-if="shouldShowRestoreItem"
|
||||
as="button"
|
||||
dusk="restore-selected-button"
|
||||
@click.prevent="confirmRestore"
|
||||
>
|
||||
{{ __('Restore Selected') }}
|
||||
<CircleBadge>{{ selectedResourcesCount }}</CircleBadge>
|
||||
</DropdownMenuItem>
|
||||
|
||||
<!-- Force Delete Resources -->
|
||||
<DropdownMenuItem
|
||||
v-if="shouldShowForceDeleteItem"
|
||||
as="button"
|
||||
dusk="force-delete-selected-button"
|
||||
@click.prevent="confirmForceDeleteSelectedResources"
|
||||
>
|
||||
{{ __('Force Delete Selected') }}
|
||||
<CircleBadge>{{ selectedResourcesCount }}</CircleBadge>
|
||||
</DropdownMenuItem>
|
||||
</nav>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
</Dropdown>
|
||||
|
||||
<DeleteResourceModal
|
||||
:mode="viaManyToMany ? 'detach' : 'delete'"
|
||||
:show="selectedResources.length > 0 && deleteSelectedModalOpen"
|
||||
@close="closeDeleteSelectedModal"
|
||||
@confirm="deleteSelectedResources"
|
||||
/>
|
||||
|
||||
<DeleteResourceModal
|
||||
:show="selectedResources.length > 0 && forceDeleteSelectedModalOpen"
|
||||
mode="delete"
|
||||
@close="closeForceDeleteSelectedModal"
|
||||
@confirm="forceDeleteSelectedResources"
|
||||
>
|
||||
<ModalHeader v-text="__('Force Delete Resource')" />
|
||||
<ModalContent>
|
||||
<p
|
||||
class="leading-normal"
|
||||
v-text="
|
||||
__('Are you sure you want to force delete the selected resources?')
|
||||
"
|
||||
/>
|
||||
</ModalContent>
|
||||
</DeleteResourceModal>
|
||||
|
||||
<RestoreResourceModal
|
||||
:show="selectedResources.length > 0 && restoreModalOpen"
|
||||
@close="closeRestoreModal"
|
||||
@confirm="restoreSelectedResources"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import find from 'lodash/find'
|
||||
import { Button } from 'laravel-nova-ui'
|
||||
import { InteractsWithQueryString } from '@/mixins'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Button,
|
||||
},
|
||||
|
||||
emits: [
|
||||
'close',
|
||||
'deleteAllMatching',
|
||||
'deleteSelected',
|
||||
'forceDeleteAllMatching',
|
||||
'forceDeleteSelected',
|
||||
'restoreAllMatching',
|
||||
'restoreSelected',
|
||||
],
|
||||
|
||||
mixins: [InteractsWithQueryString],
|
||||
|
||||
props: [
|
||||
'allMatchingResourceCount',
|
||||
'allMatchingSelected',
|
||||
'authorizedToDeleteAnyResources',
|
||||
'authorizedToDeleteSelectedResources',
|
||||
'authorizedToForceDeleteAnyResources',
|
||||
'authorizedToForceDeleteSelectedResources',
|
||||
'authorizedToRestoreAnyResources',
|
||||
'authorizedToRestoreSelectedResources',
|
||||
'resources',
|
||||
'selectedResources',
|
||||
'show',
|
||||
'softDeletes',
|
||||
'trashedParameter',
|
||||
'viaManyToMany',
|
||||
],
|
||||
|
||||
data: () => ({
|
||||
deleteSelectedModalOpen: false,
|
||||
forceDeleteSelectedModalOpen: false,
|
||||
restoreModalOpen: false,
|
||||
}),
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
mounted() {
|
||||
document.addEventListener('keydown', this.handleEscape)
|
||||
|
||||
Nova.$on('close-dropdowns', this.handleClosingDropdown)
|
||||
},
|
||||
|
||||
/**
|
||||
* Prepare the component to be unmounted.
|
||||
*/
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('keydown', this.handleEscape)
|
||||
|
||||
Nova.$off('close-dropdowns', this.handleClosingDropdown)
|
||||
},
|
||||
|
||||
methods: {
|
||||
confirmDeleteSelectedResources() {
|
||||
this.deleteSelectedModalOpen = true
|
||||
},
|
||||
|
||||
confirmForceDeleteSelectedResources() {
|
||||
this.forceDeleteSelectedModalOpen = true
|
||||
},
|
||||
|
||||
confirmRestore() {
|
||||
this.restoreModalOpen = true
|
||||
},
|
||||
|
||||
closeDeleteSelectedModal() {
|
||||
this.deleteSelectedModalOpen = false
|
||||
},
|
||||
|
||||
closeForceDeleteSelectedModal() {
|
||||
this.forceDeleteSelectedModalOpen = false
|
||||
},
|
||||
|
||||
closeRestoreModal() {
|
||||
this.restoreModalOpen = false
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete the selected resources.
|
||||
*/
|
||||
deleteSelectedResources() {
|
||||
this.$emit(
|
||||
this.allMatchingSelected ? 'deleteAllMatching' : 'deleteSelected'
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* Force delete the selected resources.
|
||||
*/
|
||||
forceDeleteSelectedResources() {
|
||||
this.$emit(
|
||||
this.allMatchingSelected
|
||||
? 'forceDeleteAllMatching'
|
||||
: 'forceDeleteSelected'
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* Restore the selected resources.
|
||||
*/
|
||||
restoreSelectedResources() {
|
||||
this.$emit(
|
||||
this.allMatchingSelected ? 'restoreAllMatching' : 'restoreSelected'
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle the escape key press event.
|
||||
*/
|
||||
handleEscape(e) {
|
||||
if (this.show && e.keyCode == 27) {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the modal.
|
||||
*/
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle closing the dropdown.
|
||||
*/
|
||||
handleClosingDropdown() {
|
||||
this.deleteSelectedModalOpen = false
|
||||
this.forceDeleteSelectedModalOpen = false
|
||||
this.restoreModalOpen = false
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
trashedOnlyMode() {
|
||||
return this.queryStringParams[this.trashedParameter] == 'only'
|
||||
},
|
||||
|
||||
hasDropDownMenuItems() {
|
||||
return (
|
||||
this.shouldShowDeleteItem ||
|
||||
this.shouldShowRestoreItem ||
|
||||
this.shouldShowForceDeleteItem
|
||||
)
|
||||
},
|
||||
|
||||
shouldShowDeleteItem() {
|
||||
return (
|
||||
!this.trashedOnlyMode &&
|
||||
Boolean(
|
||||
this.authorizedToDeleteSelectedResources || this.allMatchingSelected
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
shouldShowRestoreItem() {
|
||||
return (
|
||||
this.softDeletes &&
|
||||
!this.viaManyToMany &&
|
||||
(this.softDeletedResourcesSelected || this.allMatchingSelected) &&
|
||||
(this.authorizedToRestoreSelectedResources || this.allMatchingSelected)
|
||||
)
|
||||
},
|
||||
|
||||
shouldShowForceDeleteItem() {
|
||||
return (
|
||||
this.softDeletes &&
|
||||
!this.viaManyToMany &&
|
||||
(this.authorizedToForceDeleteSelectedResources ||
|
||||
this.allMatchingSelected)
|
||||
)
|
||||
},
|
||||
|
||||
selectedResourcesCount() {
|
||||
return this.allMatchingSelected
|
||||
? this.allMatchingResourceCount
|
||||
: this.selectedResources.length
|
||||
},
|
||||
|
||||
/**
|
||||
* Determine if any soft deleted resources are selected.
|
||||
*/
|
||||
softDeletedResourcesSelected() {
|
||||
return Boolean(
|
||||
find(this.selectedResources, resource => resource.softDeleted)
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user