feat: basic item detail

assets/datagrid/assets/datagrid.css

@@ -5,7 +5,7 @@
 	overflow: hidden;
 }
 
-.datagrid--slide-toggle:not(.active) {
+.datagrid--slide-toggle:not(.is-active) {
 	display: none;
 }
 
@@ -235,22 +235,23 @@
 .datagrid table tbody tr.ui-sortable-helper {
 	display: table
 }
-
+/*
 .datagrid table tbody tr.row-item-detail {
 	display: none
 }
-
-.datagrid table tbody tr.row-item-detail.toggled {
+*/
+.datagrid table tbody tr.row-item-detail.toggled,
+.datagrid table tbody tr.row-item-detail.is-active {
 	display: table-row
 }
-
+/*
 .datagrid table tbody tr.row-item-detail .item-detail-content {
 	display: none
 }
 
 .datagrid table tbody tr.row-item-detail-helper {
 	display: none
-}
+}*/
 
 .datagrid table tbody tr .datagrid-inline-edit .form-control {
 	margin: -3px;

assets/datagrid/datagrids.ts

@@ -72,7 +72,7 @@ export const createFullDatagrids = (ajax: Ajax, _options: Partial<DatagridsOptio
 				new CheckboxPlugin(),
 				new ConfirmPlugin(),
 				new InlinePlugin(),
-				new UrlPlugin(),
+			//	new UrlPlugin(),
 				new NetteFormsPlugin(),
 				new HappyPlugin(new Happy()),
 				new SortablePlugin(new SortableJS()),

assets/datagrid/plugins/features/item-detail.ts

@@ -4,17 +4,19 @@ import {attachSlideToggle} from "@datagrid/utils";
 
 export class ItemDetailPlugin implements DatagridPlugin {
 	onDatagridInit(datagrid: Datagrid): boolean {
-		datagrid.el.querySelectorAll("[data-toggle-detail]")
+		datagrid.el.querySelectorAll<HTMLElement>("[data-toggle-detail-grid]")
 			.forEach((el) => {
-				const toggleName = el.getAttribute("data-toggle-detail")!;
-				const fullName = el.getAttribute("data-toggle-detail-grid-fullname");
-				const row = datagrid.el.querySelector<HTMLElement>(
-			`.item-detail-${fullName}-id-${toggleName}`
-				);
+				if (el.getAttribute("data-toggle-detail-grid") !== datagrid.name) return;
+				const toggleId = el.getAttribute("data-toggle-detail")!;
 
-				if (row && row.querySelector<HTMLElement>(".item-detail-content")) {
-					attachSlideToggle(row);
-				}
+				el.addEventListener("click", (e) => {
+					const contentRow = datagrid.el.querySelector<HTMLElement>(
+						`.item-detail-${datagrid.name}-id-${toggleId}`
+					);
+					if (contentRow) {
+						attachSlideToggle(contentRow, el);
+					}
+				})
 			});
 
 		return true;

assets/datagrid/types/ajax.d.ts

@@ -25,7 +25,15 @@ export interface DatagridPayload {
 	non_empty_filters?: string[];
 }
 
-export type Payload<P = DatagridPayload, S = {}> = P & {
+export interface DatagridState {
+	"grid-page": number | null,
+	"grid-perPage": number,
+	// TODO
+	"grid-sort": any | null,
+	"grid-filter": any | null
+}
+
+export type Payload<P = DatagridPayload, S = DatagridState> = P & {
 	snippets?: Record<string, string>;
 	redirect?: string;
 	state: S;

assets/datagrid/utils.ts

@@ -26,7 +26,7 @@ export function window(): ExtendedWindow {
   return (window ?? {}) as unknown as ExtendedWindow;
 }
 
-export function slideDown(element: HTMLElement, cb?: () => unknown) {
+export function slideDown(element: HTMLElement, cb?: (nextStateShown: boolean) => unknown) {
 	element.classList.add('is-active');
 	element.style.height = 'auto';
 
@@ -36,35 +36,41 @@ export function slideDown(element: HTMLElement, cb?: () => unknown) {
 
 	setTimeout(function () {
 		element.style.height = height;
-		cb?.();
+		cb?.(true);
 	}, 0);
 }
 
-export function slideUp(element: HTMLElement, cb?: () => unknown) {
+export function slideUp(element: HTMLElement, cb?: (nextStateShown: boolean) => unknown) {
 	element.style.height = '0px';
 
-	element.addEventListener('transitionend', () => {
-		element.classList.remove('is-active');
-		cb?.();
-	}, { once: true });
+	setTimeout( () => {
+		if (element.classList.contains('is-active')) {
+			element.classList.remove('is-active');
+			cb?.(false);
+		}
+	}, 250); // TODO
 }
 
-export function slideToggle(element: HTMLElement, cb?: () => unknown) {
+export function slideToggle(element: HTMLElement, cb?: (nextStateShown: boolean) => unknown) {
+	console.log("element", element);
 	if (!element.classList.contains('is-active')) {
 		slideDown(element, cb);
 	} else {
 		slideUp(element, cb);
 	}
 }
 
-export function attachSlideToggle(element: HTMLElement, cb?: () => unknown) {
+export function attachSlideToggle(element: HTMLElement, control: HTMLElement, cb?: (nextStateShown: boolean) => unknown) {
 		if (!element.classList.contains("datagrid--slide-toggle")) {
+			let sliding = false;
 			element.classList.add("datagrid--slide-toggle");
 
-			slideToggle(element, cb);
+			slideUp(element, cb);
 
-			element.addEventListener('click', () => {
-				slideToggle(element, cb);
+			control.addEventListener('click', () => {
+				if (sliding) return;
+				sliding = true;
+				slideToggle(element, () => (sliding = false));
 			});
 		}
 }

assets/js/main.js

@@ -37,9 +37,7 @@ document.addEventListener("DOMContentLoaded", () => {
 	naja.initialize();
 
 	Array.from(document.querySelectorAll('.dropdown'))
-		.forEach(el => {
-			console.log(new Dropdown(el))
-		})
+		.forEach(el => new Dropdown(el))
 
 	createDatagrids(new NajaAjax(naja), {
 		datagrid: {