@innertia-solutions/innertia-nuxt 0.1.12 → 0.1.13

package/composables/useFile.js

@@ -0,0 +1,189 @@
+import {
+  IconFile, IconPhoto, IconVideo, IconMusic, IconFileZip,
+  IconFileTypePdf, IconFileTypeXls, IconFileTypeCsv,
+  IconFileTypeDocx, IconFileTypePpt, IconFileTypeTxt,
+} from '@tabler/icons-vue'
+
+/**
+ * useFile — API unificada para trabajar con archivos del backend innertia-laravel.
+ *
+ * Cubre:
+ *   - upload(endpoint, file|files, { field, onProgress, extraData, signal })
+ *   - download(fileId, filename?)            — trigger descarga programática
+ *   - view(fileId)                            — abrir inline en otra pestaña
+ *   - viewUrl(fileId) / downloadUrl(fileId)   — URLs absolutas a las rutas de innertia-laravel
+ *   - formatSize(bytes)                       — helper humano-legible
+ *   - iconFor(mimeType)                       — devuelve el componente Tabler para el mime
+ *
+ * Autenticación: los interceptores de useApi (auth Bearer, X-Tenant, X-Organization)
+ * se aplican automáticamente al XHR de upload.
+ */
+export function useFile() {
+  const config  = useRuntimeConfig()
+  const baseUrl = config.public.apiBaseUrl || '/api'
+
+  // useRequestInterceptors es el mismo que usa useApi() — comparte auth/tenant/org headers.
+  const { run } = useRequestInterceptors()
+
+  // ── URLs ───────────────────────────────────────────────────────────────────
+  /** GET /files/{id} — inline view (respeta permisos del backend). */
+  const viewUrl     = (fileId) => `${baseUrl}/files/${fileId}`
+  /** GET /files/{id}/download — force download (respeta permisos). */
+  const downloadUrl = (fileId) => `${baseUrl}/files/${fileId}/download`
+
+  // ── Helpers ────────────────────────────────────────────────────────────────
+  const formatSize = (bytes) => {
+    if (bytes == null) return ''
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+    if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+    return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
+  }
+
+  /** Devuelve el componente Tabler para un mime type. */
+  const iconFor = (mimeType) => {
+    if (!mimeType) return IconFile
+    if (mimeType.startsWith('image/'))                          return IconPhoto
+    if (mimeType.startsWith('video/'))                          return IconVideo
+    if (mimeType.startsWith('audio/'))                          return IconMusic
+    if (mimeType === 'application/pdf')                         return IconFileTypePdf
+    if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return IconFileTypeXls
+    if (mimeType === 'text/csv')                                return IconFileTypeCsv
+    if (mimeType.includes('word') || mimeType.includes('document')) return IconFileTypeDocx
+    if (mimeType.includes('presentation') || mimeType.includes('powerpoint')) return IconFileTypePpt
+    if (mimeType.startsWith('text/'))                           return IconFileTypeTxt
+    if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive')) return IconFileZip
+    return IconFile
+  }
+
+  // ── View / Download ────────────────────────────────────────────────────────
+  /** Abre el file inline en una nueva pestaña (usa la auth de cookie). */
+  const view = (fileId) => {
+    if (typeof window === 'undefined') return
+    window.open(viewUrl(fileId), '_blank', 'noopener,noreferrer')
+  }
+
+  /**
+   * Trigger descarga programática. Funciona con archivos auth/restricted
+   * porque el browser envía cookies automáticamente.
+   */
+  const download = (fileId, filename) => {
+    if (typeof window === 'undefined') return
+    const a = document.createElement('a')
+    a.href = downloadUrl(fileId)
+    if (filename) a.download = filename
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+
+  // ── Upload (con progress vía XHR) ──────────────────────────────────────────
+  /**
+   * Upload un archivo (o lista) a un endpoint del producto. El endpoint
+   * recibe `multipart/form-data` con el campo `field` y debe persistir el
+   * archivo (típicamente `File::fromRequest($request, 'file')` del lado Laravel).
+   *
+   * Para varios archivos pasa un array — el campo se envía como `field[]`.
+   * Devuelve el JSON parseado del response (típicamente el File record creado).
+   *
+   * Opciones:
+   *   field       — nombre del campo. Default 'file'.
+   *   onProgress  — callback(percent: number 0-100)
+   *   extraData   — campos adicionales para incluir en el FormData
+   *   signal      — AbortSignal para cancelar
+   */
+  const upload = (endpoint, file, options = {}) => {
+    const field    = options.field ?? 'file'
+    const files    = Array.isArray(file) ? file : [file]
+    const formData = new FormData()
+    const fieldName = files.length > 1 ? `${field}[]` : field
+
+    for (const f of files) formData.append(fieldName, f)
+
+    if (options.extraData) {
+      for (const [k, v] of Object.entries(options.extraData)) {
+        if (v == null) continue
+        formData.append(k, typeof v === 'object' ? JSON.stringify(v) : String(v))
+      }
+    }
+
+    // Recolectar headers vía los interceptores (auth, tenant, org).
+    // NO incluimos Content-Type — el browser lo setea con el boundary correcto.
+    const headers = {
+      'Accept': 'application/json',
+      'X-Innertia-Source': import.meta.server ? 'ssr' : 'client',
+    }
+    run(headers, {})
+    delete headers['Content-Type']
+
+    const cleanPath = endpoint.startsWith('/') ? endpoint.slice(1) : endpoint
+    const url       = `${baseUrl}/${cleanPath}`
+
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest()
+      xhr.open('POST', url)
+      xhr.withCredentials = true
+
+      for (const [k, v] of Object.entries(headers)) {
+        try { xhr.setRequestHeader(k, v) } catch (_) { /* algunos headers son read-only */ }
+      }
+
+      xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable && options.onProgress) {
+          options.onProgress(Math.round((e.loaded / e.total) * 100), e.loaded, e.total)
+        }
+      })
+
+      // Cuando el upload del cliente terminó (100%) pero el server aún no
+      // respondió — útil para mostrar estado "Procesando…" en la UI.
+      xhr.upload.addEventListener('loadend', () => {
+        options.onUploaded?.()
+      })
+
+      xhr.addEventListener('load', () => {
+        const status = xhr.status
+        const ctype  = xhr.getResponseHeader('content-type') ?? ''
+        const body   = ctype.includes('application/json')
+          ? safeJsonParse(xhr.responseText)
+          : xhr.responseText
+
+        if (status >= 200 && status < 300) {
+          resolve(body)
+        } else {
+          const err = new Error(`Upload failed (${status})`)
+          err.status = status
+          err.data   = body
+          reject(err)
+        }
+      })
+
+      xhr.addEventListener('error',   () => reject(new Error('Network error during upload')))
+      xhr.addEventListener('abort',   () => reject(Object.assign(new Error('Upload aborted'), { aborted: true })))
+      xhr.addEventListener('timeout', () => reject(new Error('Upload timeout')))
+
+      if (options.signal) {
+        if (options.signal.aborted) {
+          xhr.abort()
+          return
+        }
+        options.signal.addEventListener('abort', () => xhr.abort())
+      }
+
+      xhr.send(formData)
+    })
+  }
+
+  return {
+    upload,
+    download,
+    view,
+    viewUrl,
+    downloadUrl,
+    formatSize,
+    iconFor,
+  }
+}
+
+function safeJsonParse(text) {
+  try { return JSON.parse(text) } catch { return text }
+}

package/composables/useModal.js

@@ -0,0 +1,71 @@
+// composables/useModal.js
+import { useModalStore } from '../stores/modal'
+
+/**
+ * useModal() — API promise-based para modales programáticos.
+ *
+ * Requiere <ModalHost /> montado una vez en el layout root.
+ *
+ * ```js
+ * const { confirm, alert, prompt, open } = useModal()
+ *
+ * if (await confirm({ severity: 'danger', message: '¿Eliminar?' })) {
+ *   // user confirmed
+ * }
+ *
+ * await alert({ severity: 'success', message: 'Listo' })
+ *
+ * const name = await prompt({ title: 'Nombre', placeholder: 'Tu nombre' })
+ *
+ * const result = await open(MyCustomModal, { foo: 'bar' })
+ * ```
+ */
+export function useModal() {
+  const store = useModalStore()
+
+  /** Confirmación. Resuelve true/false. */
+  const confirm = (opts = {}) => store.open({
+    kind: 'confirm',
+    props: {
+      severity:    opts.severity    ?? 'question',
+      title:       opts.title       ?? '',
+      message:     opts.message     ?? '',
+      confirmText: opts.confirmText ?? 'Confirmar',
+      cancelText:  opts.cancelText  ?? 'Cancelar',
+    },
+  })
+
+  /** Alert simple — solo botón OK. Resuelve undefined. */
+  const alert = (opts = {}) => store.open({
+    kind: 'alert',
+    props: {
+      severity:    opts.severity    ?? 'info',
+      title:       opts.title       ?? '',
+      message:     opts.message     ?? '',
+      confirmText: opts.confirmText ?? 'Entendido',
+    },
+  })
+
+  /** Prompt — pide un string. Resuelve string|null (null si cancela). */
+  const prompt = (opts = {}) => store.open({
+    kind: 'prompt',
+    props: {
+      title:       opts.title       ?? 'Ingresar valor',
+      message:     opts.message     ?? '',
+      placeholder: opts.placeholder ?? '',
+      defaultValue: opts.defaultValue ?? '',
+      confirmText: opts.confirmText ?? 'Aceptar',
+      cancelText:  opts.cancelText  ?? 'Cancelar',
+      required:    opts.required    ?? false,
+    },
+  })
+
+  /** Modal custom — montá tu propio componente. Resuelve con lo que pase a $close(value). */
+  const open = (component, props = {}) => store.open({
+    kind: 'component',
+    component,
+    props,
+  })
+
+  return { confirm, alert, prompt, open }
+}

package/composables/useToast.js

@@ -1,69 +1,42 @@
-// app/composables/useToast.js
+// composables/useToast.js
 import { useToastStore } from '../stores/toast'
 
+/**
+ * useToast() — API limpia para mostrar toasts.
+ *
+ * ```js
+ * const toast = useToast()
+ *
+ * toast.success('Guardado')
+ * toast.error('Algo falló', { title: 'Error', duration: 8000 })
+ * toast.warning('Atención')
+ * toast.info('Tip')
+ *
+ * toast.notify({ title: 'Nueva mención', message: 'Te etiquetaron', action: { label: 'Ver', onClick: () => {} } })
+ *
+ * const id = toast.process('Subiendo archivo…', { position: 'bottom-right' })
+ * toast.updateProgress(id, 40, '40%')
+ * toast.completeProcess(id, 'Listo')
+ *
+ * toast.dismiss(id)
+ * toast.clear() // todos
+ * ```
+ */
 export function useToast() {
-    const toast = useToastStore()
-
-    return {
-        // Métodos originales
-        success: toast.success,
-        info: toast.info,
-        error: toast.error,
-        show: toast.show,
-        remove: toast.remove,
-        update: toast.update,
-        updateProgress: toast.updateProgress,
-        completeProcess: toast.completeProcess,
-
-        // Métodos rápidos para diferentes tipos de toast
-        alert: {
-            success: (message, config = {}) => toast.success({
-                type: 'alert',
-                message,
-                duration: 3000,
-                ...config
-            }),
-
-            error: (message, config = {}) => toast.error({
-                type: 'alert',
-                message,
-                duration: 5000,
-                ...config
-            }),
-
-            warning: (message, config = {}) => toast.show({
-                type: 'alert',
-                severity: 'warning',
-                icon: 'ti ti-alert-triangle',
-                title: 'Warning',
-                message,
-                duration: 4000,
-                ...config
-            }),
-
-            info: (message, config = {}) => toast.info({
-                type: 'alert',
-                message,
-                duration: 3000,
-                ...config
-            })
-        },
-
-        notification: (title, message, config = {}) => toast.show({
-            type: 'notification',
-            title,
-            message,
-            duration: 0, // Las notificaciones no se auto-dismiss por defecto
-            ...config
-        }),
-
-        process: (title, config = {}) => toast.show({
-            type: 'process',
-            title,
-            progress: 0,
-            progressLabel: 'Iniciando...',
-            duration: 0, // Los procesos no se auto-dismiss
-            ...config
-        })
-    }
+  const store = useToastStore()
+  return {
+    show:            store.show.bind(store),
+    success:         store.success.bind(store),
+    error:           store.error.bind(store),
+    warning:         store.warning.bind(store),
+    info:            store.info.bind(store),
+    notify:          store.notify.bind(store),
+    process:         store.process.bind(store),
+    update:          store.update.bind(store),
+    updateProgress:  store.updateProgress.bind(store),
+    completeProcess: store.completeProcess.bind(store),
+    failProcess:     store.failProcess.bind(store),
+    dismiss:         store.dismiss.bind(store),
+    clear:           store.clear.bind(store),
+  }
 }

package/composables/useWorkflow/form.js

@@ -0,0 +1,162 @@
+import { ref, computed, watch } from 'vue'
+
+/**
+ * useWorkflowForm — gestiona el estado de edición de una WorkflowDefinition.
+ *
+ * Responsabilidad: CRUD de steps y transitions sobre el JSON de configuración.
+ * No sabe nada de instancias, vistas ni API calls de runtime.
+ *
+ * @param {Object|null} initial — definición inicial { steps:[], transitions:[] }
+ */
+export function useWorkflowForm(initial = null) {
+  const definition = ref(
+    initial
+      ? JSON.parse(JSON.stringify(initial))
+      : { steps: [], transitions: [] }
+  )
+
+  const isDirty  = ref(false)
+  const saving   = ref(false)
+
+  // Track changes — se activa después del primer tick para no marcar dirty en la carga
+  let _trackChanges = false
+  watch(definition, () => { if (_trackChanges) isDirty.value = true }, { deep: true })
+  setTimeout(() => { _trackChanges = true }, 0)
+
+  // ── Steps ──────────────────────────────────────────────────────────────────
+
+  const addStep = (step) => {
+    if (!step.key || !step.label || !step.type) throw new Error('Step requiere key, label y type')
+    if (definition.value.steps.some(s => s.key === step.key)) throw new Error(`Step '${step.key}' ya existe`)
+    definition.value.steps.push({ ...step })
+  }
+
+  const updateStep = (key, patch) => {
+    const idx = definition.value.steps.findIndex(s => s.key === key)
+    if (idx === -1) return
+    const newKey = patch.key ?? key
+    definition.value.steps[idx] = { ...definition.value.steps[idx], ...patch }
+    // Si cambió el key, actualizar todas las transiciones que lo referencian
+    if (newKey !== key) {
+      definition.value.transitions = definition.value.transitions.map(t => ({
+        ...t,
+        from: t.from === key ? newKey : t.from,
+        to:   t.to   === key ? newKey : t.to,
+      }))
+    }
+  }
+
+  const deleteStep = (key) => {
+    definition.value.steps       = definition.value.steps.filter(s => s.key !== key)
+    definition.value.transitions = definition.value.transitions.filter(t => t.from !== key && t.to !== key)
+  }
+
+  const reorderSteps = (fromIdx, toIdx) => {
+    const steps = [...definition.value.steps]
+    const [moved] = steps.splice(fromIdx, 1)
+    steps.splice(toIdx, 0, moved)
+    definition.value.steps = steps
+  }
+
+  // ── Transitions ────────────────────────────────────────────────────────────
+
+  const addTransition = (transition) => {
+    if (!transition.from || !transition.to) throw new Error('Transition requiere from y to')
+    const exists = definition.value.transitions.some(
+      t => t.from === transition.from && t.to === transition.to
+    )
+    if (exists) throw new Error(`Transición ${transition.from} → ${transition.to} ya existe`)
+    definition.value.transitions.push({
+      from:         transition.from,
+      to:           transition.to,
+      label:        transition.label ?? '',
+      description:  transition.description ?? '',
+      restrictions: transition.restrictions ?? [],
+    })
+  }
+
+  const updateTransition = (from, to, patch) => {
+    const idx = definition.value.transitions.findIndex(t => t.from === from && t.to === to)
+    if (idx === -1) return
+    definition.value.transitions[idx] = { ...definition.value.transitions[idx], ...patch }
+  }
+
+  const deleteTransition = (from, to) => {
+    definition.value.transitions = definition.value.transitions.filter(
+      t => !(t.from === from && t.to === to)
+    )
+  }
+
+  // ── Restrictions helpers ───────────────────────────────────────────────────
+
+  const addRestriction = (from, to, restriction) => {
+    const t = definition.value.transitions.find(t => t.from === from && t.to === to)
+    if (!t) return
+    t.restrictions = [...(t.restrictions ?? []), { type: 'role', message: '', ...restriction }]
+  }
+
+  const removeRestriction = (from, to, idx) => {
+    const t = definition.value.transitions.find(t => t.from === from && t.to === to)
+    if (!t) return
+    t.restrictions = t.restrictions.filter((_, i) => i !== idx)
+  }
+
+  // ── Computed helpers ───────────────────────────────────────────────────────
+
+  const stepByKey = computed(() =>
+    Object.fromEntries((definition.value.steps ?? []).map(s => [s.key, s]))
+  )
+
+  const transitionsFrom = (key) =>
+    (definition.value.transitions ?? []).filter(t => t.from === key)
+
+  const transitionsTo = (key) =>
+    (definition.value.transitions ?? []).filter(t => t.to === key)
+
+  const isValid = computed(() => {
+    const steps = definition.value.steps ?? []
+    return (
+      steps.length >= 2 &&
+      steps.some(s => s.type === 'start') &&
+      steps.some(s => ['finished', 'cancelled'].includes(s.type))
+    )
+  })
+
+  // ── Reset / load ───────────────────────────────────────────────────────────
+
+  const reset = (newDefinition = null) => {
+    definition.value = newDefinition
+      ? JSON.parse(JSON.stringify(newDefinition))
+      : { steps: [], transitions: [] }
+    isDirty.value = false
+  }
+
+  const markSaved = () => { isDirty.value = false }
+
+  return {
+    // State
+    definition,
+    isDirty,
+    saving,
+    isValid,
+    // Step CRUD
+    addStep,
+    updateStep,
+    deleteStep,
+    reorderSteps,
+    // Transition CRUD
+    addTransition,
+    updateTransition,
+    deleteTransition,
+    // Restriction helpers
+    addRestriction,
+    removeRestriction,
+    // Computed
+    stepByKey,
+    transitionsFrom,
+    transitionsTo,
+    // Utils
+    reset,
+    markSaved,
+  }
+}

package/composables/useWorkflow/index.js

@@ -0,0 +1,18 @@
+/**
+ * useWorkflow — punto de entrada único del sistema de workflows.
+ *
+ * Estructura:
+ *   useWorkflowForm  → edición de definiciones (steps, transitions, restrictions)
+ *   useWorkflowView  → estado operacional (items, columnas, onMove, viewMode)
+ *
+ * Uso independiente:
+ *   import { useWorkflowForm } from '~/composables/useWorkflow'
+ *   import { useWorkflowView } from '~/composables/useWorkflow'
+ *
+ * Con auto-import de Nuxt también funcionan directamente:
+ *   const form = useWorkflowForm(initialDefinition)
+ *   const view = useWorkflowView(form.definition, { endpoint: 'tasks' })
+ */
+
+export { useWorkflowForm } from './form.js'
+export { useWorkflowView } from './view.js'