Initial commit: PC Builder AdonisJS project

inertia/directives/v-delete-confirm.ts

@@ -0,0 +1,54 @@
+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

inertia/directives/v-price.ts

@@ -0,0 +1,30 @@
+import { ObjectDirective } from 'vue'
+
+// Fonction pour formater le prix
+const formatPrice = (value: string): string => {
+  const numberValue = Number.parseFloat(value)
+  return Number.isNaN(numberValue) ? '' : numberValue.toFixed(2).replace('.', ',')
+}
+
+// Interface pour ├®tendre HTMLInputElement avec _handleBlur
+interface HTMLInputElementWithHandleBlur extends HTMLInputElement {
+  _handleBlur?: () => void
+}
+
+const priceDirective: ObjectDirective<HTMLInputElementWithHandleBlur> = {
+  mounted(el: HTMLInputElementWithHandleBlur) {
+    const handleBlur = () => {
+      el.value = formatPrice(el.value)
+      el.dispatchEvent(new Event('input')) // Pour mettre à jour le v-model
+    }
+    el.addEventListener('blur', handleBlur)
+    el._handleBlur = handleBlur // Stocker la r├®f├®rence pour la suppression ult├®rieure
+  },
+  unmounted(el: HTMLInputElementWithHandleBlur) {
+    if (el._handleBlur) {
+      el.removeEventListener('blur', el._handleBlur)
+    }
+  },
+}
+
+export default priceDirective

inertia/directives/v_validation_error.ts

@@ -0,0 +1,111 @@
+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