+
{original.localized_description ?? original.description}
);
}
- return (
-
- );
+ return
;
},
minSize: 200,
size: 400,
@@ -118,11 +117,7 @@ export const QuoteDetailsCardEditor = ({
),
cell: ({ row: { index } }) => {
return (
-
+
);
},
size: 75,
@@ -205,13 +200,13 @@ export const QuoteDetailsCardEditor = ({
},
size: 150,
},
- ], [currency, language, t]);
- const columns = useDetailColumns(detailColumns,
- {
- enableDragHandleColumn: true,
- enableSelectionColumn: true,
- }
+ ],
+ [currency, language, t]
);
+ const columns = useDetailColumns(detailColumns, {
+ enableDragHandleColumn: true,
+ enableSelectionColumn: true,
+ });
const handleAppendCatalogArticle = useCallback(
(article: any, quantity: number = 1) => {
@@ -266,29 +261,67 @@ export const QuoteDetailsCardEditor = ({
const defaultLayout = [265, 440, 655];
const navCollapsedSize = 4;
- const pickCatalogArticle = (chapterId?: string) => { chapterEditor.capturePickerTarget(chapterId); setArticlePickerDialogOpen(true); };
- const pickBlock = (chapterId?: string) => { chapterEditor.capturePickerTarget(chapterId); setBlockPickerDialogOpen(true); };
- const onShowLineDiscountColumnChange = (value: boolean) => setValue("show_line_discount_column", value, { shouldDirty: true });
+ const pickCatalogArticle = (chapterId?: string) => {
+ chapterEditor.capturePickerTarget(chapterId);
+ setArticlePickerDialogOpen(true);
+ };
+ const pickBlock = (chapterId?: string) => {
+ chapterEditor.capturePickerTarget(chapterId);
+ setBlockPickerDialogOpen(true);
+ };
+ const onShowLineDiscountColumnChange = (value: boolean) =>
+ setValue("show_line_discount_column", value, { shouldDirty: true });
const table = chapterEditor.chapters.length ? (
-
setCreateChapterOpen(true)} pickCatalogArticle={pickCatalogArticle} pickBlock={pickBlock} />
+ onAddChapter={() => setCreateChapterOpen(true)}
+ pickCatalogArticle={pickCatalogArticle}
+ pickBlock={pickBlock}
+ />
) : (
- getValues(`items.${rowIndex}`), pickCatalogArticle, pickBlock }}
- columns={columns} data={fields} defaultValues={defaultValues}
- extraControls={}
- showLineDiscountColumn={showLineDiscountColumn} hasLineDiscounts={hasLineDiscounts}
- onShowLineDiscountColumnChange={onShowLineDiscountColumnChange} />
+ getValues(`items.${rowIndex}`),
+ pickCatalogArticle,
+ pickBlock,
+ }}
+ columns={columns}
+ data={fields}
+ defaultValues={defaultValues}
+ extraControls={
+
+ }
+ showLineDiscountColumn={showLineDiscountColumn}
+ hasLineDiscounts={hasLineDiscounts}
+ onShowLineDiscountColumnChange={onShowLineDiscountColumnChange}
+ />
+ );
+ const createChapterDialog = (
+ {
+ const before = chapterEditor.read();
+ const next = addChapter(before, description, chapterEditor.activeId);
+ chapterEditor.apply(next);
+ chapterEditor.focusTitle(
+ next.chapters.find(
+ (chapter) => !before.chapters.some((entry) => entry.id === chapter.id)
+ )!.id
+ );
+ }}
+ />
);
- const createChapterDialog = {
- const before = chapterEditor.read();
- const next = addChapter(before, description, chapterEditor.activeId);
- chapterEditor.apply(next);
- chapterEditor.focusTitle(next.chapters.find((chapter) => !before.chapters.some((entry) => entry.id === chapter.id))!.id);
- }} />;
if (pickerMode === "dialog") {
return (
diff --git a/client/src/app/quotes/hooks/useChapterCollapse.ts b/client/src/app/quotes/hooks/useChapterCollapse.ts
index 2338407..f5a4c34 100644
--- a/client/src/app/quotes/hooks/useChapterCollapse.ts
+++ b/client/src/app/quotes/hooks/useChapterCollapse.ts
@@ -18,7 +18,9 @@ export function useChapterCollapse() {
return;
}
const currentRevision = ++revision.current;
- const contents = Array.from(ref.current?.querySelectorAll("[data-chapter-content]") ?? []);
+ const contents = Array.from(
+ ref.current?.querySelectorAll("[data-chapter-content]") ?? []
+ );
const rows = Array.from(new Set(contents.map((content) => content.closest("tr")!)));
for (const row of rows) {
row.toggleAttribute("inert", collapsed);
@@ -44,8 +46,11 @@ export function useChapterCollapse() {
animations.current.forEach((animation) => animation.cancel());
animations.current = [];
- if (!contents.length || typeof contents[0].animate !== "function" ||
- window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+ if (
+ !contents.length ||
+ typeof contents[0].animate !== "function" ||
+ window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+ ) {
setHidden(collapsed);
return;
}
@@ -62,8 +67,16 @@ export function useChapterCollapse() {
const options: KeyframeAnimationOptions = { duration, easing: "ease-in-out", fill: "both" };
animations.current = [
...contents.map((content, index) => content.animate([
- { height: `${contentStarts[index].height}px`, opacity: contentStarts[index].opacity, overflow: "hidden" },
- { height: `${collapsed ? 0 : contentEnds[index]}px`, opacity: collapsed ? 0 : 1, overflow: "hidden" },
+ {
+ height: `${contentStarts[index].height}px`,
+ opacity: contentStarts[index].opacity,
+ overflow: "hidden",
+ },
+ {
+ height: `${collapsed ? 0 : contentEnds[index]}px`,
+ opacity: collapsed ? 0 : 1,
+ overflow: "hidden",
+ },
], options)),
...cells.map((cell, index) => cell.animate([cellStarts[index], cellEnds[index]], options)),
];
diff --git a/client/src/app/quotes/hooks/useDetailColumns.tsx b/client/src/app/quotes/hooks/useDetailColumns.tsx
index 18aa7cd..9097058 100644
--- a/client/src/app/quotes/hooks/useDetailColumns.tsx
+++ b/client/src/app/quotes/hooks/useDetailColumns.tsx
@@ -54,7 +54,7 @@ export function useDetailColumns(
disabled={!row.getCanSelect()}
onCheckedChange={(value) => row.toggleSelected(Boolean(value))}
aria-label={t("common.select_row")}
- className='mt-2'
+ className='mt-2 opacity-0 data-[state=checked]:opacity-100 transition-opacity group-hover/detail:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none [@media(hover:none)]:opacity-100'
/>
),
enableSorting: false,
diff --git a/doc/capitulos-cotizaciones.md b/doc/capitulos-cotizaciones.md
index 376dfaf..e36f825 100644
--- a/doc/capitulos-cotizaciones.md
+++ b/doc/capitulos-cotizaciones.md
@@ -364,3 +364,47 @@ Inconsistencias observadas, sin cambios fuera del alcance:
- Validación: 28 pruebas de editor/barra y cinco de traducciones; TypeScript sin emisión; ESLint acotado sin errores (tres advertencias `any` previas del editor); Tailwind compilado en `/tmp`; `git diff --check`. Persisten los avisos previos de paginación fuera de `act` y de Browserslist desactualizado.
- Revisión local con Chromium a 1440 y 375 px sobre HTML del harness: badge sobre carpeta, una cabecera para el capítulo con contenido y tres acciones en el vacío. En móvil la tabla mantiene su desplazamiento horizontal. Artefactos temporales `/tmp/uecko-chapter-empty-*`; el fixture temporal se retiró. No es una prueba E2E con API autenticada.
- No se ejecutan base de datos, PDF ni builds de distribución: esta ampliación afecta a la presentación e inserción de detalles del editor, sin cambios en persistencia o informes.
+
+### Ajuste: alineación del arrastre y plegado animado
+
+- `QuoteChaptersDataTable.tsx`: el botón de arrastre del título usa el mismo ancho de 16 px que el de las líneas. Ambos iconos comparten eje horizontal, conservando el orden de columnas y el badge de la carpeta.
+- `useChapterCollapse.ts`: transición de altura y opacidad de 200 ms mediante Web Animations API. Se animan el contenido y el espaciado de las celdas antes de ocultar sus filas; incluye cabeceras, detalles, acciones y estado vacío. Los campos permanecen montados; título y subtotal siguen visibles. Se respeta `prefers-reduced-motion` y se pliega inmediatamente cuando no hay soporte para animación.
+- Durante el cierre, las filas dejan de ser interactivas mediante `inert` y `aria-hidden`; el arrastre de detalles/destinos vacíos se desactiva desde el inicio. Al invertir el sentido, se cancela la transición anterior y se parte de la posición actual. Al desmontar, se cancelan las animaciones pendientes.
+- Dos pruebas nuevas del editor verifican ocultación tras finalizar, reversión sin ocultaciones obsoletas, conservación de valores y movimiento reducido. Validación: 26 pruebas del editor, TypeScript sin emisión, ESLint acotado sin errores y `git diff --check`. Persiste el aviso previo de paginación React/TanStack fuera de `act` en la suite completa; las nuevas pruebas aisladas pasan sin ese aviso.
+- Chromium local verifica geometría sobre el HTML actual del harness y ejecuta el hook real: centros de ambos iconos en 117,53125 px; altura del grupo de 222 a 117 px con estados intermedios de 170 y 184,6875 px; recuperación de altura/valores originales y ausencia de animación con movimiento reducido. Artefactos en `/tmp/uecko-chapter-animation-*`; fixture temporal retirado. Esta comprobación no es un E2E con la API autenticada.
+- No se ejecutan builds de distribución, PDF ni base de datos: son cambios de presentación del editor, sin cambios de persistencia o informes. La compilación Tailwind se dirige a `/tmp` y conserva el aviso previo de Browserslist desactualizado.
+
+### Corrección: resaltado conjunto de detalle activo y acciones
+
+- `QuoteItemsSortableTableRow.tsx` identifica la fila activa mediante `data-active-item`. `QuoteChaptersDataTable.tsx` aplica el contorno a sus celdas, porque los bordes de las filas no se dibujan en la tabla con `border-separate`.
+- Detalle y acciones comparten fondo rojo claro, borde izquierdo rojo de 4 px y contorno exterior fino; se retira el separador intermedio. Las acciones ocupan todo el ancho de la tabla y empiezan junto al borde izquierdo, como en la presentación original. El estilo de selección no se aplica a los capítulos ni a otras líneas.
+- Validación: 26 pruebas existentes del editor, TypeScript sin emisión, ESLint acotado sin errores (dos advertencias previas en el componente de fila) y `git diff --check`. Chromium local verifica igualdad de fondos, continuidad del contorno y ausencia de espacio o borde entre detalle y acciones. Muestra en `/tmp/uecko-active-row.png`, generada desde el harness del editor; fixture temporal retirado.
+- No se ejecutan base de datos, PDF, builds de distribución ni E2E autenticados: es una corrección de estilos. Persisten los avisos previos de paginación fuera de `act` y Browserslist desactualizado.
+
+### Ajuste: selección exclusiva de líneas de detalle
+
+- Se elimina el checkbox de los títulos de capítulo, manteniendo su celda vacía para alinear las columnas. La selección se limita a los detalles; el checkbox de cabecera de columnas conserva la selección conjunta de los detalles de ese capítulo.
+- Se retira del editor el estado de selección múltiple de capítulos y su bloqueo por selección mixta. Los capítulos se mueven individualmente con todo su contenido y conservan sus botones propios de duplicar/eliminar. La barra actúa sobre los detalles seleccionados.
+- Se adaptan las pruebas existentes de duplicación, selección y alineación: 26 pruebas del editor correctas, TypeScript sin emisión, ESLint acotado sin errores y `git diff --check`. Persiste el aviso previo de paginación fuera de `act`. No se ejecutan PDF, base de datos ni E2E: el cambio se limita a la selección en el editor.
+
+### Ajuste: controles visibles al pasar el cursor
+
+- Las filas de detalle muestran arrastre y selección al pasar el cursor por su propia fila, con y sin capítulos. El checkbox marcado permanece visible aunque el cursor salga; al desmarcarlo vuelve a ocultarse. El asa también permanece visible durante el arrastre.
+- En el título de capítulo se muestran arrastre, duplicar y eliminar únicamente al pasar por ese título; el hover de los detalles no activa esos botones. Carpeta y badge siguen visibles. Se usan grupos Tailwind con nombre por tipo de fila y opacidad para mantener la alineación.
+- Cada control se revela también al recibir foco de teclado. En dispositivos sin hover permanecen visibles para permitir su uso táctil. La transición de opacidad respeta movimiento reducido.
+- Cambios en `QuoteChaptersDataTable.tsx`, `QuoteItemsSortableTableRow.tsx`, `QuoteItemsSortableDragHandleCell.tsx` y `useDetailColumns.tsx`. Validación: 27 pruebas existentes de editor/arrastre; ESLint acotado sin errores (dos advertencias previas de la fila); Tailwind compilado en `/tmp`; `git diff --check`. La última excepción de checkbox marcado se comprueba además con CSS real en Chromium.
+- Chromium local verifica ocultación, hover por fila, checkbox marcado/desmarcado, foco de teclado y controles táctiles, con y sin capítulos. Para comprobar selectores de escritorio se desactiva solo la regla táctil en el fixture, ya que Chromium sin interfaz informa `hover:none`; la prueba táctil usa la hoja original. Artefactos `/tmp/uecko-row-controls-*`; fixture temporal retirado. No es un E2E autenticado.
+- No se ejecutan TypeScript, builds de distribución, PDF ni base de datos: el cambio solo añade clases y no altera tipos, datos o informes. Persisten los avisos previos de paginación fuera de `act` y Browserslist desactualizado.
+
+### Ajuste: márgenes simétricos de carpeta y eliminar capítulo
+
+- `QuoteChaptersDataTable.tsx`: aumenta el espacio izquierdo de la carpeta y amplía la columna de despliegue de 44 a 56 px para alojarlo sin invadir la columna de arrastre. Conserva tamaños de iconos y botones, badge y alineación de detalles.
+- Chromium local mide 20 px tanto entre el borde izquierdo y la carpeta como entre la papelera y el borde derecho, en ambos capítulos a 1440 y 1024 px. El eje de las asas de título/detalle sigue coincidiendo (diferencia 0 px). HTML exportado del harness en `/tmp/uecko-chapter-spacing.html`; fixture temporal retirado.
+- Validación acotada: cuatro casos existentes de alineación/orden de columnas, ESLint del componente, compilación Tailwind hacia `/tmp` y `git diff --check`. No se ejecutan TypeScript, PDF, base de datos, builds de distribución ni E2E autenticados por ser un ajuste de espaciado. Persiste el aviso previo de Browserslist desactualizado.
+
+### Ajuste: título alineado con el arrastre de sus conceptos
+
+- El título de capítulo ocupa las columnas posteriores a la carpeta y empieza en el mismo eje vertical que el icono de arrastre de sus detalles. El asa del capítulo se sitúa a la derecha del título, junto a duplicar y eliminar; conserva eventos de arrastre, foco y visibilidad al pasar el cursor.
+- `QuoteChaptersDataTable.tsx` ajusta el colspan y espaciado del título. `QuoteChapterEditor.test.tsx` adapta las comprobaciones de estructura y badge a las dos celdas del título. Se mantienen orden de columnas de los detalles y márgenes exteriores de 20 px.
+- Validación: cinco casos existentes de alineación, orden y numeración (ejecutados también en el fixture temporal), ESLint sin errores, compilación Tailwind en `/tmp` y `git diff --check`. Chromium local mide diferencia de 0 px entre inicio del texto del título y lado izquierdo del icono de concepto, a 1440 y 1024 px, manteniendo márgenes de carpeta/papelera de 20 px. Fixture temporal retirado; muestra `/tmp/uecko-chapter-title.png`.
+- No se ejecutan TypeScript, PDF, base de datos, build de distribución ni E2E autenticado: es un cambio local de disposición, sin cambios de tipos o datos. Persiste el aviso previo de Browserslist desactualizado.