WIP: TS rewrite

app/UI/AbstractPresenter.php

@@ -15,7 +15,7 @@ abstract class AbstractPresenter extends NellaPresenter
 
 	abstract public function createComponentGrid(): DataGrid;
 
-	public function changeStatus(int $id, string $newStatus): void
+	public function changeStatus($id, string $newStatus): void
 	{
 		if (in_array($newStatus, ['active', 'inactive', 'deleted'], true)) {
 			$data = ['status' => $newStatus];

assets/css/main.css

@@ -2,7 +2,8 @@
 @import 'bootstrap/dist/css/bootstrap.css';
 @import 'prismjs/themes/prism-okaidia.css';
 
-@import './../datagrid/datagrid.css';
+@import './../datagrid/assets/datagrid.css';
+@import 'vanillajs-datepicker/css/datepicker-bs5.css';
 
 /* App styles */
 @import './styles.css';

assets/datagrid/ajax/index.ts

@@ -0,0 +1 @@
+export * from "./naja";

assets/datagrid/ajax/naja.ts

@@ -0,0 +1,135 @@
+import type {Naja} from "naja";
+import type {
+	Ajax,
+	RequestParams,
+	Payload,
+	DatagridPayload,
+	EventDetail,
+	EventListener,
+	Response as AjaxResponse,
+	BaseRequestParams as AjaxBaseRequestParams,
+	BeforeEventDetail as BaseBeforeEventDetail,
+	ErrorEventDetail as BaseErrorEventDetail,
+	InteractEventDetail as BaseInteractEventDetail,
+	SuccessEventDetail as BaseSuccessEventDetail,
+	AjaxEventMap as BaseAjaxEventMap,
+} from "@datagrid/types";
+import {Datagrid} from "@datagrid/datagrid";
+import {BeforeEvent, SuccessEvent, ErrorEvent, Payload as NajaPayload} from "naja/dist/Naja";
+import {InteractionEvent} from "naja/dist/core/UIHandler";
+
+export interface BaseRequestParams extends AjaxBaseRequestParams, Request {
+	url: string;
+	method: string;
+}
+
+export interface BeforeEventDetail<D = {}> extends BaseBeforeEventDetail<D> {
+	params: EventDetail<BeforeEvent> & RequestParams<D>;
+}
+
+export interface InteractEventDetail<
+	E extends HTMLElement = HTMLElement
+> extends BaseInteractEventDetail<E>, EventDetail<InteractionEvent> {
+	element: E;
+}
+
+export interface SuccessEventDetail<
+	P = DatagridPayload
+> extends BaseSuccessEventDetail<P, Response>, EventDetail<SuccessEvent> {
+	params: BaseRequestParams;
+	payload: Payload<P> & NajaPayload;
+	response: AjaxResponse & Response;
+}
+
+export interface ErrorEventDetail<
+	E extends Error = Error,
+> extends BaseErrorEventDetail<E, Response>, EventDetail<ErrorEvent> {
+	params: BaseRequestParams;
+	response: (AjaxResponse & Response) | undefined;
+	error: E;
+}
+
+export interface AjaxEventMap extends BaseAjaxEventMap {
+	before: CustomEvent<BeforeEventDetail>;
+	interact: CustomEvent<InteractEventDetail>;
+	snippetUpdate: CustomEvent<InteractEventDetail>;
+	success: CustomEvent<SuccessEventDetail>;
+	error: CustomEvent<ErrorEventDetail>;
+}
+
+export class NajaAjax<C extends Naja = Naja, G extends Datagrid = Datagrid> extends EventTarget implements Ajax<C, G> {
+	constructor(public client: C) {
+		if (!client.VERSION || client.VERSION < 2) {
+			throw new Error("NajaAjax supports Naja 2 and higher" + (client.VERSION ? `(version ${client.VERSION} provided)` : ''))
+		}
+		super();
+	}
+
+	onInit() {
+		this.client.addEventListener('before', (e) => {
+			return this.dispatch('before', {
+				params: e.detail
+			});
+		})
+
+		this.client.uiHandler.addEventListener('interaction', (e) => {
+			if (!(e.detail.element instanceof HTMLElement)) {
+				throw new Error("Element is not an instanceof HTMLElement");
+			}
+
+			return this.dispatch('interact', {
+				...e.detail,
+				element: e.detail.element as HTMLElement // Naja's event has a type of HTMLElement
+			})
+		})
+
+
+		this.client.addEventListener('success', (e) => {
+			return this.dispatch('success', {
+				...e.detail,
+				params: e.detail.request,
+				payload: e.detail.payload as Payload
+			});
+		})
+
+		this.client.addEventListener('error', (e) => {
+			return this.dispatch('error', {
+				...e.detail,
+				params: e.detail.request,
+				response: e.detail.response,
+			});
+		})
+
+		return this;
+	}
+
+	async request<D = {}, P = DatagridPayload>(args: RequestParams<D>): Promise<P> {
+		return await this.client.makeRequest(args.method, args.url, args.data) as P;
+	}
+
+	async submitForm<E extends HTMLFormElement = HTMLFormElement, P = Payload>(element: E): Promise<P> {
+		return await this.client.uiHandler.submitForm(element) as P;
+	}
+
+	dispatch<
+		K extends string, M extends BaseAjaxEventMap = AjaxEventMap
+	>(type: K, detail: K extends keyof M ? EventDetail<M[K]> : any, options?: boolean): boolean {
+		return this.dispatchEvent(new CustomEvent(type, {detail}));
+	}
+
+	declare addEventListener: <K extends keyof M, M extends BaseAjaxEventMap = AjaxEventMap>(
+		type: K,
+		listener: EventListener<this, M[K]>,
+		options?: boolean | AddEventListenerOptions
+	) => void;
+
+	declare removeEventListener: <K extends keyof M, M extends BaseAjaxEventMap = AjaxEventMap>(
+		type: K,
+		listener: EventListener<this, M[K]>,
+		options?: boolean | AddEventListenerOptions
+	) => void;
+
+	declare dispatchEvent: <K extends string, M extends BaseAjaxEventMap = AjaxEventMap>(
+		event: K extends keyof M ? M[K] : CustomEvent
+	) => boolean;
+}

assets/datagrid/datagrid.css → assets/datagrid/assets/datagrid.css

@@ -1,3 +1,14 @@
+/* .datagrid--slide-toggle > td > div {
+	-webkit-transition: height .25s ease;
+	-o-transition: height .25s ease;
+	transition: height .25s ease;
+	overflow: hidden;
+} */
+
+.datagrid--content-row:not(.is-active) > td /*> div*/ {
+	display: none;
+}
+
 @keyframes edited {
 	0% {
 		background-color: #A6E2A9
@@ -225,22 +236,6 @@
 	display: table
 }
 
-.datagrid table tbody tr.row-item-detail {
-	display: none
-}
-
-.datagrid table tbody tr.row-item-detail.toggled {
-	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;
 	padding-bottom: 4px;