innoboxrr-vue-datatable 3.0.0 → 3.1.1

package/README.md

@@ -63,7 +63,7 @@ import 'innoboxrr-form-core/styles'
 | Prop | Por defecto | |
 |---|---|---|
 | `dataUrl`, `policyUrl` | — | Obligatorias. |
-| `dataMethod`, `policyMethod` | `'post'` | `get` manda `params`; `post`, `data`. |
+| `dataMethod`, `policyMethod` | `'post'` | `get` manda `params`, sin el token CSRF; `post`, `data`, con `_token`. |
 | `model` | — | El contrato del modelo (abajo). |
 | `formFilters` | `{}` | Un cambio vuelve a la primera página. |
 | `externalFilters` | `{}` | Un cambio recarga sin cambiar de página. |
@@ -101,9 +101,11 @@ export const setFilters = (filters) => filters
 // Opcionales
 export const dataTableComponents = () => ({ CopyLink })
 export const bulkActions = () => [
-    { id: 'delete', name: 'Borrar', icon: 'delete', callback: 'bulkDelete', danger: true },
+    { id: 'delete', name: 'Borrar', icon: 'delete', callback: 'bulkDelete', danger: true, success: 'Borrados' },
+    { id: 'publish', name: 'Publicar', callback: 'bulkUpdate', params: { status: 'published' } },
 ]
 export const bulkDelete = (ids, rows) => { /* … */ }
+export const bulkUpdate = (ids, rows, data) => { /* … */ }
 ```
 
 - **Acciones.** `route: true` navega a `params.to` con vue-router;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-vue-datatable",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "Datatable para vue3",
   "main": "index.js",
   "scripts": {

package/src/table.js

@@ -130,9 +130,13 @@ export const sortIcon = (column, orderBy, sort = {}) => {
 /**
  * Lo que espera el backend. Con orden interno, el del usuario gana a lo que
  * traigan los filtros externos; sin él, es al revés.
+ *
+ * El token CSRF no va aquí: no es un filtro, y lo que sale de aquí también lo
+ * recibe el modelo con `setFilters()`. Lo pone `requestConfig()`, que sabe por
+ * dónde viaja la petición.
  */
 export const requestFilters = ({ formFilters = {}, externalFilters = {}, orderBy, sort = {}, page, internalSort }) => {
-    const params = { _token: csrfToken(), managed: true, except_view_any: true }
+    const params = { managed: true, except_view_any: true }
     const order = { orderBy, orderMode: sort[orderBy] }
 
     return internalSort
@@ -140,12 +144,35 @@ export const requestFilters = ({ formFilters = {}, externalFilters = {}, orderBy
         : { ...params, ...formFilters, ...order, ...externalFilters, page }
 }
 
-export const requestConfig = (method, url, payload) => ({
-    method,
-    url,
-    data: method === 'post' ? payload : null,
-    params: method === 'get' ? payload : null,
-})
+/**
+ * Los métodos cuyo payload viaja en la query. En el piloto de la aplicación
+ * base la tabla pedía GET /api/app/product/index?_token=...: el token CSRF
+ * acababa en los registros de acceso, en los proxies y en el historial del
+ * navegador. Laravel no comprueba CSRF en ellos y axios ya manda X-XSRF-TOKEN
+ * desde la cookie, así que no hace falta.
+ */
+const QUERY_METHODS = ['get', 'head']
+
+const withCsrfToken = (method, payload) => {
+    if (QUERY_METHODS.includes(String(method ?? '').toLowerCase())) {
+        const { _token: omitted, ...rest } = payload ?? {}
+
+        return rest
+    }
+
+    return { _token: csrfToken(), ...payload }
+}
+
+export const requestConfig = (method, url, payload) => {
+    const body = withCsrfToken(method, payload)
+
+    return {
+        method,
+        url,
+        data: method === 'post' ? body : null,
+        params: method === 'get' ? body : null,
+    }
+}
 
 /** El usuario canceló una confirmación: no es un error que haya que contar. */
 export const isCancelled = (error) => ['RequestCancelledError', 'CanceledError'].includes(error?.name)

package/src/useDataTable.js

@@ -205,10 +205,8 @@ export default function useDataTable(props, { navigate = null, labels = core.DEF
         }
 
         try {
-            const response = await axios(core.requestConfig(props.policyMethod, props.policyUrl, {
-                _token: core.csrfToken(),
-                id,
-            }))
+            // El token CSRF lo pone requestConfig, solo si no viaja en la query.
+            const response = await axios(core.requestConfig(props.policyMethod, props.policyUrl, { id }))
 
             allowed.value = { ...allowed.value, [key]: response.data ?? {} }
         } catch {
@@ -271,7 +269,9 @@ export default function useDataTable(props, { navigate = null, labels = core.DEF
 
     /**
      * Una acción masiva recibe los ids seleccionados —también los de otras
-     * páginas— y las filas cargadas que están entre ellos.
+     * páginas—, las filas cargadas que están entre ellos y sus `params`. Con
+     * los params, una misma función sirve para varias acciones: marcar como
+     * publicado y marcar como borrador son la misma llamada con otro valor.
      */
     const runBulk = async (action) => {
         if (typeof props.model[action.callback] !== 'function') {
@@ -284,7 +284,7 @@ export default function useDataTable(props, { navigate = null, labels = core.DEF
         const loaded = table.getSelectedRowModel().rows.map((row) => row.original)
 
         try {
-            await props.model[action.callback](ids, loaded)
+            await props.model[action.callback](ids, loaded, action.params ?? {})
         } catch (failure) {
             if (! core.isCancelled(failure)) {
                 notifyError(core.describeError(failure, text(), text().actionFailed).message)