feat: Implement drag-and-drop reordering, collapsible forms, and UI refinements

Introduces drag-and-drop functionality for Experience and Education entries in the admin dashboard
using SortableJS, along with collapsible forms powered by Alpine.js. Ensures live updates via HTMX.

Refines both public site and admin dashboard UI:
- Public site: Role/Degree are more prominent, Company/Institution highlight on hover.
- Admin dashboard: Headers display Role/Degree as primary and include date ranges.

Addresses backend needs by re-introducing 'display_order' to the database schema and
updating queries and mutations for proper reordering.

Fixes:
- Resolved 'invalid_grant' Keycloak error by correcting PKCE code verifier generation.
- Corrected database query parameter passing to fix text field clearing on form save.
- Fixed JSX parsing errors with Alpine.js attributes by using full syntax and spread operator.
- Resolved DOMTokenList whitespace error in SortableJS ghostClass.
- Fixed SortableJS initialization and drag events to ensure visual reordering.
This commit is contained in:
Tuan-Dat Tran
2025-11-22 00:45:40 +01:00
parent 3c990e5ab6
commit be0be3bd00
8 changed files with 251 additions and 122 deletions

View File

@@ -9,10 +9,12 @@
"@elysiajs/cookie": "^0.8.0",
"@elysiajs/html": "^1.4.0",
"@kitajs/ts-html-plugin": "^4.1.3",
"alpinejs": "^3.15.2",
"arctic": "^3.7.0",
"autoprefixer": "^10.4.22",
"elysia": "^1.4.16",
"postcss": "^8.5.6",
"sortablejs": "^1.15.6",
"tailwindcss": "^4.1.17",
"typed-html": "^3.0.1"
},