Kevin L'Hereec
94f89be605
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
112 lines
4.1 KiB
TypeScript
112 lines
4.1 KiB
TypeScript
import { createVNode, DirectiveBinding, ObjectDirective, render } from 'vue'
|
|
import ValidationError from '~/pages/widgets/ValidationError.vue'
|
|
|
|
interface ValidationErrorBinding extends DirectiveBinding {
|
|
value: string | null
|
|
}
|
|
|
|
const validationErrorDirective: ObjectDirective<HTMLElement, string | null> = {
|
|
mounted(el: HTMLElement, binding: ValidationErrorBinding) {
|
|
const errorMessage = binding.value
|
|
const fieldName = el.getAttribute('name')
|
|
|
|
if (errorMessage && fieldName) {
|
|
const container = document.createElement('div')
|
|
container.classList.add(`validation-error-container-${fieldName}`)
|
|
container.classList.add(
|
|
'transition-all',
|
|
'duration-2500',
|
|
'ease-in-out',
|
|
'w-0',
|
|
'opacity-0'
|
|
) // Ajout des classes Tailwind pour la transition
|
|
|
|
container.style.position = 'absolute'
|
|
container.style.bottom = '-17px'
|
|
container.style.right = '0px'
|
|
container.style.whiteSpace = 'nowrap'
|
|
container.style.textAlign = 'right'
|
|
|
|
if (el.parentNode && el.parentNode instanceof HTMLElement) {
|
|
el.parentNode.style.position = 'relative'
|
|
el.parentNode.appendChild(container)
|
|
const vnode = createVNode(ValidationError, { message: errorMessage })
|
|
render(vnode, container)
|
|
|
|
// Force reflow pour déclencher la transition
|
|
void container.offsetWidth
|
|
container.classList.remove('w-0', 'opacity-0')
|
|
container.classList.add('w-full', 'opacity-100')
|
|
|
|
// Attach the container to the element for future reference
|
|
;(el as any)._validationErrorContainer = container
|
|
} else {
|
|
console.error('Parent node is null or not an HTMLElement during mounted')
|
|
}
|
|
}
|
|
},
|
|
updated(el: HTMLElement, binding: ValidationErrorBinding) {
|
|
const errorMessage = binding.value
|
|
const fieldName = el.getAttribute('name')
|
|
let container = (el as any)._validationErrorContainer
|
|
|
|
if (errorMessage && fieldName) {
|
|
if (container) {
|
|
const vnode = createVNode(ValidationError, { message: errorMessage })
|
|
render(vnode, container)
|
|
} else {
|
|
const newContainer = document.createElement('div')
|
|
newContainer.classList.add(`validation-error-container-${fieldName}`)
|
|
newContainer.classList.add(
|
|
'transition-all',
|
|
'duration-2500',
|
|
'ease-in-out',
|
|
'w-0',
|
|
'opacity-0'
|
|
) // Ajout des classes Tailwind pour la transition
|
|
|
|
newContainer.style.position = 'absolute'
|
|
newContainer.style.bottom = '-17px'
|
|
newContainer.style.right = '0px'
|
|
newContainer.style.whiteSpace = 'nowrap'
|
|
newContainer.style.textAlign = 'right'
|
|
|
|
if (el.parentNode && el.parentNode instanceof HTMLElement) {
|
|
el.parentNode.style.position = 'relative'
|
|
el.parentNode.appendChild(newContainer)
|
|
const vnode = createVNode(ValidationError, { message: errorMessage })
|
|
render(vnode, newContainer)
|
|
|
|
// Force reflow pour déclencher la transition
|
|
void newContainer.offsetWidth
|
|
newContainer.classList.remove('w-0', 'opacity-0')
|
|
newContainer.classList.add('w-100', 'opacity-100')
|
|
// Attach the container to the element for future reference
|
|
;(el as any)._validationErrorContainer = newContainer
|
|
} else {
|
|
console.error('Parent node is null or not an HTMLElement during updated')
|
|
}
|
|
}
|
|
} else if (container) {
|
|
container.classList.remove('w-100', 'opacity-100')
|
|
container.classList.remove('transition-all', 'duration-2500', 'ease-in-out') // Supprimez les classes de transition pour la disparition
|
|
container.classList.add('w-0', 'opacity-0')
|
|
|
|
// Supprimez le conteneur immédiatement sans délai
|
|
render(null, container)
|
|
container.remove()
|
|
;(el as any)._validationErrorContainer = null
|
|
}
|
|
},
|
|
unmounted(el: HTMLElement) {
|
|
// Clean up the error container when the element is unmounted
|
|
const container = (el as any)._validationErrorContainer
|
|
if (container) {
|
|
render(null, container)
|
|
container.remove()
|
|
}
|
|
},
|
|
}
|
|
|
|
export default validationErrorDirective
|