Files
pc_builder/inertia/directives/v-delete-confirm.ts
T
Kevin L'Hereec 94f89be605 chore: harden config, strengthen frontend typing, fix UTF-8 mojibake
Security config (3.1):
- config/session.ts: cookie.secure now follows app.inProduction instead of
  being hardcoded to false
- config/shield.ts: enable CSP with baseline directives compatible with
  Vite dev server and Inertia (self + @viteDevUrl/@viteHmrUrl)

Frontend typing (3.2):
- Replace 'any' props with concrete types (Computer, Component, ComponentType,
  ComputerState) across computers/*.vue and components/*.vue, using the
  existing inertia/pages/types/UITypes.ts definitions
- Fix UITypes.ts: export ComponentType/ComputerState, switch from interface
  to type (interfaces are never assignable to Inertia's ComponentProps index
  signature), drop the stale componentTypeId/componentStateId fields that
  didn't match the actual Lucid schema (real field is typeId, no component
  state exists)
- Add an asPageProp() boundary cast in the two controllers: Lucid's
  serialize() returns a loosely typed ModelObject that isn't structurally
  assignable to the concrete page prop shapes (and the inertia/** tree is
  excluded from the backend tsconfig, so real types can't be imported
  directly across that boundary)

UTF-8 mojibake fixes (3.3):
- Repair broken accented characters (├®/├á/├┤ -> é/à/ô, Ôé¼ -> €) left over
  from a bad encoding during the GWT->Inertia migration, across
  ComponentEditor.vue, ComputerComponentsTable.vue, SimpleGallery.vue,
  TableComponent.vue, isAdminMode.ts and the custom directives

Misc cleanup (3.5):
- computer.ts: replace console.warn with the app logger (includes
  computerId) when .cost is accessed without preloading components
2026-07-23 11:10:37 +02:00

55 lines
1.7 KiB
TypeScript

import { createApp, DirectiveBinding, h, ObjectDirective } from 'vue'
import DeleteConfirmationModal from '~/pages/widgets/DeleteConfirmationModal.vue'
// Interface pour étendre HTMLElement avec _handleClick
interface HTMLElementWithHandleClick extends HTMLElement {
_handleClick?: (event: Event) => void
}
const deleteConfirmDirective: ObjectDirective<HTMLElementWithHandleClick> = {
mounted(el: HTMLElementWithHandleClick, binding: DirectiveBinding) {
const handleClick = (event: Event) => {
event.stopPropagation() // Empêcher la propagation de l'événement
event.preventDefault() // Empêcher l'action par défaut
const modalApp = createApp({
data() {
return { show: true }
},
methods: {
confirm() {
this.show = false
document.body.removeChild(modalContainer)
binding.value() // Exécuter la fonction de suppression
},
cancel() {
this.show = false
document.body.removeChild(modalContainer)
},
},
render() {
return h(DeleteConfirmationModal, {
show: this.show,
onConfirm: this.confirm,
onCancel: this.cancel,
})
},
})
const modalContainer = document.createElement('div')
document.body.appendChild(modalContainer)
modalApp.mount(modalContainer)
}
el.addEventListener('click', handleClick)
el._handleClick = handleClick // Stocker la référence pour la suppression ultérieure
},
unmounted(el: HTMLElementWithHandleClick) {
if (el._handleClick) {
el.removeEventListener('click', el._handleClick)
}
},
}
export default deleteConfirmDirective