diff --git a/lib/RoadizRozierBundle/templates/custom-form-fields/list.html.twig b/lib/RoadizRozierBundle/templates/custom-form-fields/list.html.twig index 13a5d6a4c..9d1cc00a0 100644 --- a/lib/RoadizRozierBundle/templates/custom-form-fields/list.html.twig +++ b/lib/RoadizRozierBundle/templates/custom-form-fields/list.html.twig @@ -20,6 +20,10 @@
{% embed '@RoadizRozier/includes/rz_table.html.twig' with { + sortable: { + enabled: true, + url: path('customFormFieldPositionAjax'), + }, actions_available: true, }%} {% block thead_cells %} @@ -33,9 +37,9 @@ {% for field in fields %} - + {% import '@RoadizRozier/macros/rz_link.html.twig' as rz_link %} {{ rz_link.root({ label: field.label, diff --git a/lib/Rozier/app/Lazyload.ts b/lib/Rozier/app/Lazyload.ts index 66966ebe9..b55896b35 100644 --- a/lib/Rozier/app/Lazyload.ts +++ b/lib/Rozier/app/Lazyload.ts @@ -1,4 +1,3 @@ -import CustomFormFieldsPosition from '~/components/custom-form-fields/CustomFormFieldsPosition' import StackNodeTree from '~/widgets/StackNodeTree' import SettingsSaveButtons from '~/widgets/SettingsSaveButtons' import NodeStatuses from '~/widgets/NodeStatuses' @@ -22,7 +21,6 @@ export default class Lazyload { linksSelector: HTMLAnchorElement[] currentRequest: AbortController | null currentTimeout: number | null - customFormFieldsPosition: Unbindable settingsSaveButtons: Unbindable jsonEditors: JsonEditor[] cssEditors: CssEditor[] @@ -34,7 +32,6 @@ export default class Lazyload { this.linksSelector = [] this.currentRequest = null this.currentTimeout = null - this.customFormFieldsPosition = null this.settingsSaveButtons = null this.jsonEditors = [] this.cssEditors = [] @@ -275,11 +272,7 @@ export default class Lazyload { * General bind on page load */ generalBind() { - this.generalUnbind([ - this.stackNodeTrees, - this.customFormFieldsPosition, - this.settingsSaveButtons, - ]) + this.generalUnbind([this.stackNodeTrees, this.settingsSaveButtons]) this.bindAjaxLink() this.jsonEditors = [] this.cssEditors = [] @@ -287,7 +280,6 @@ export default class Lazyload { this.stackNodeTrees = new StackNodeTree() - this.customFormFieldsPosition = new CustomFormFieldsPosition() this.settingsSaveButtons = new SettingsSaveButtons() this.initJsonEditors() diff --git a/lib/Rozier/app/components/custom-form-fields/CustomFormFieldsPosition.js b/lib/Rozier/app/components/custom-form-fields/CustomFormFieldsPosition.js deleted file mode 100644 index 2a6e5788f..000000000 --- a/lib/Rozier/app/components/custom-form-fields/CustomFormFieldsPosition.js +++ /dev/null @@ -1,74 +0,0 @@ -// HERE WE NEED JQUERY BECAUSE UI-KIT V2 REQUIRE JQUERY -/** - * Custom form fields position - */ -export default class CustomFormFieldsPosition { - constructor() { - this.$list = $('.custom-form-fields > .uk-sortable') - this.onSortableChange = this.onSortableChange.bind(this) - this.init() - } - - init() { - if (this.$list.length && this.$list.children().length > 1) { - this.$list.on('change.uk.sortable', this.onSortableChange) - } - } - - unbind() { - if (this.$list.length && this.$list.children().length > 1) { - this.$list.off('change.uk.sortable', this.onSortableChange) - } - } - - async onSortableChange(event, list, element) { - const $element = $(element) - const id = parseInt($element.data('field-id')) - let $sibling = $element.prev() - const postData = { - csrfToken: window.RozierConfig.ajaxToken, - id, - } - - if ($sibling.length === 0) { - $sibling = $element.next() - postData.nextId = parseInt($sibling.data('field-id')) - } else { - postData.prevId = parseInt($sibling.data('field-id')) - } - - const response = await fetch( - window.RozierConfig.routes.customFormFieldPositionAjax, - { - method: 'POST', - headers: { - Accept: 'application/json', - // Required to prevent using this route as referer when login again - 'X-Requested-With': 'XMLHttpRequest', - }, - body: new URLSearchParams(postData), - }, - ) - if (!response.ok) { - const data = await response.json() - window.dispatchEvent( - new CustomEvent('pushToast', { - detail: { - message: data.title, - status: 'danger', - }, - }), - ) - } else { - const data = await response.json() - window.dispatchEvent( - new CustomEvent('pushToast', { - detail: { - message: data.responseText, - status: data.status, - }, - }), - ) - } - } -} diff --git a/lib/Rozier/docs/ui-redesign-todo.md b/lib/Rozier/docs/ui-redesign-todo.md index b6b10f13d..2efae9ab5 100644 --- a/lib/Rozier/docs/ui-redesign-todo.md +++ b/lib/Rozier/docs/ui-redesign-todo.md @@ -32,7 +32,7 @@ build momentum; the heavily legacy zones need a real effort, not just touch-ups. | 4 | Cross-cutting dialogs / overlays | 7/13 | Used by every other zone — the legacy duplicates (`RzButton.vue`/`RzTextarea.vue`) were removed as dead code in #534 | | 5 | Explorer / Drawer | 6/9 | `NodeTypesDrawerContainer.vue`, the heaviest UIkit user, was dead and removed in #534; the remaining legacy files still need migrating | | 6 | Tags / Folders | 1/6 | The biggest gap — probably not just catch-up work, needs a real design pass before coding | -| 7 | Custom forms | 0/1 | Small footprint but never started | +| 7 | Custom forms | 1/1 | Small footprint but never started; its only legacy script (`CustomFormFieldsPosition.js`) was replaced by the `RzTable` sortable in #537 | | 8 | User management | 0 dedicated component | No existing foundation, the biggest remaining effort — to be scoped separately with a dedicated Figma mockup | ## Phase order @@ -133,7 +133,7 @@ The dismissible alert is the one exception: it has no native equivalent and need ## Phase 6 — Remaining heavy zones - [ ] Scope Tags/Folders with a real Figma design pass (not just code catch-up) -- [ ] Scope Custom forms (the v2.8 regression [#537](https://github.com/roadiz/core-bundle-dev-app/issues/537), lost drag-and-drop reordering of fields, is fixed beforehand as a regression) +- [ ] Scope Custom forms (the v2.8 regression [#537](https://github.com/roadiz/core-bundle-dev-app/issues/537), lost drag-and-drop reordering of fields, is fixed: the fields list uses the `rz_table` sortable option and `CustomFormFieldsPosition.js` is removed) - [ ] Scope User management (no existing dedicated component — the biggest remaining effort) ## Phase 7 — New features @@ -167,7 +167,7 @@ that would skew `git log -1`. | Explorer/Drawer (related-entity picker) | 9 | 6 | 3 (incl. `NodeTypesDrawerContainer.vue`, still heavily UIkit despite being touched by the squash commit; removed as dead code in #534) | 2/9 | | Tags/Folders | 6 | 1 | 5 | 0/6 | | Login/search | 2 | 1 | 1 | 2/2 | -| Custom forms | 1 | 0 | 1 | 0/1 | +| Custom forms (fields reordering, via `RzTable`) | 1 | 1 | 0 | 0/1 | | User management | 0 dedicated component (Symfony/Twig + legacy `assets/less/users/`) | — | — | — | **Quantified technical debt** (scope of [ADR 0001](adr/0001-custom-elements-over-vue-uikit-jquery.md)):