public/pp-planer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(slides): make delete icon always visible, fix confirm dialog z-index, and reset dropzone after upload

Browse source 
- Remove opacity-0/group-hover:opacity-100 so delete button is always visible
- Wrap ConfirmDialog in Teleport to body so it renders above all content
- Replace router.delete with axios.delete for proper slide deletion
- Add dropzoneKey ref to force Vue3Dropzone re-mount after upload completes
This commit is contained in:
Thorsten Bus 2026-03-02 13:25:09 +01:00
parent 8cbda3b8bc
commit 1c1e63de3d
2 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
resources/js/Components/SlideGrid.vue
View file

@ -1,6 +1,7 @@
<script setup>
import { ref, computed } from 'vue'
import { router } from '@inertiajs/vue3'
import axios from 'axios'
import ConfirmDialog from '@/Components/ConfirmDialog.vue'
import LoadingSpinner from '@/Components/LoadingSpinner.vue'
@ -85,19 +86,17 @@ function confirmDelete() {
if (!slideToDelete.value) return
deleting.value = true
router.delete(route('slides.destroy', slideToDelete.value.id), {
preserveScroll: true,
preserveState: true,
onSuccess: () => {
axios.delete(route('slides.destroy', slideToDelete.value.id))
.then(() => {
confirmingDelete.value = false
slideToDelete.value = null
deleting.value = false
emit('deleted')
},
onError: () => {
router.reload({ preserveScroll: true })
})
.catch(() => {
deleting.value = false
},
})
})
}
// Expire date editing
@ -194,7 +193,7 @@ function isExpired(expireDate) {
<button
data-testid="slide-grid-delete-button"
@click.stop="promptDelete(slide)"
class="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-lg bg-black/50 text-white/80 opacity-0 backdrop-blur-sm transition-all duration-200 hover:bg-red-600 hover:text-white group-hover:opacity-100"
class="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-lg bg-black/50 text-white/80 backdrop-blur-sm transition-all duration-200 hover:bg-red-600 hover:text-white"
title="Löschen"
>
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@ -321,16 +320,18 @@ function isExpired(expireDate) {
</div>
<!-- Delete confirmation dialog -->
<ConfirmDialog
:show="confirmingDelete"
title="Folie löschen?"
:message="`Möchtest du die Folie '${slideToDelete?.original_filename || ''}' wirklich löschen?`"
confirm-label="Löschen"
cancel-label="Abbrechen"
variant="danger"
@confirm="confirmDelete"
@cancel="cancelDelete"
/>
<Teleport to="body">
<ConfirmDialog
:show="confirmingDelete"
title="Folie löschen?"
:message="`Möchtest du die Folie '${slideToDelete?.original_filename || ''}' wirklich löschen?`"
confirm-label="Löschen"
cancel-label="Abbrechen"
variant="danger"
@confirm="confirmDelete"
@cancel="cancelDelete"
/>
</Teleport>
</div>
</template>

3
resources/js/Components/SlideUploader.vue
View file

@ -24,6 +24,7 @@ const props = defineProps({
const emit = defineEmits(['uploaded'])
const files = ref([])
const dropzoneKey = ref(0)
const expireDate = ref('')
const uploading = ref(false)
const uploadProgress = ref(0)
@ -68,6 +69,7 @@ function uploadNextFile(index) {
uploading.value = false
uploadProgress.value = 100
files.value = []
dropzoneKey.value++
emit('uploaded')
// Reload Inertia page data to reflect newly uploaded slides
@ -206,6 +208,7 @@ function dismissError() {
<!-- Dropzone -->
<Vue3Dropzone
:key="dropzoneKey"
data-testid="slide-uploader-dropzone"
v-model="files"
:multiple="true"