Skip to content

Commit f964dab

Browse files
libargutxilibargutxi
committed
reordering featured elements
1 parent b3447b9 commit f964dab

File tree

2 files changed

+84
-37
lines changed

2 files changed

+84
-37
lines changed

‎src/cs_dynamicpages/browser/static/reorder-rows.js‎

Lines changed: 72 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -36,44 +36,80 @@
3636

3737
// Add event listeners to move up buttons
3838
moveUpButtons.forEach((button) => {
39-
button.addEventListener("click", function (e) {
40-
e.preventDefault();
41-
console.log("Move up button clicked");
42-
const row = this.closest(".dynamic-row");
43-
console.log(`Moving row with ID: ${row.dataset.rowid} up`);
44-
moveRow(row, -1);
45-
});
39+
button.addEventListener(
40+
"click",
41+
function (e) {
42+
e.preventDefault();
43+
e.stopPropagation(); // Detener la propagación del evento
44+
45+
// Deshabilitar el botón temporalmente
46+
if (this.disabled) return;
47+
this.disabled = true;
48+
49+
console.log("Move up button clicked");
50+
const element = this.closest('[data-move-target="true"]');
51+
console.log(
52+
`Moving element with ID: ${element.dataset.elementid} up`
53+
);
54+
55+
// Re-habilitar el botón después de un tiempo
56+
setTimeout(() => {
57+
this.disabled = false;
58+
}, 2000);
59+
60+
moveElement(element, -1);
61+
},
62+
{ once: true }
63+
); // Usar { once: true } para que el listener se ejecute solo una vez
4664
});
4765

4866
// Add event listeners to move down buttons
4967
moveDownButtons.forEach((button) => {
50-
button.addEventListener("click", function (e) {
51-
e.preventDefault();
52-
console.log("Move down button clicked");
53-
const row = this.closest(".dynamic-row");
54-
console.log(`Moving row with ID: ${row.dataset.rowid} down`);
55-
moveRow(row, 1);
56-
});
68+
button.addEventListener(
69+
"click",
70+
function (e) {
71+
e.preventDefault();
72+
e.stopPropagation(); // Detener la propagación del evento
73+
74+
// Deshabilitar el botón temporalmente
75+
if (this.disabled) return;
76+
this.disabled = true;
77+
78+
console.log("Move down button clicked");
79+
const element = this.closest('[data-move-target="true"]');
80+
console.log(
81+
`Moving element with ID: ${element.dataset.elementid} down`
82+
);
83+
84+
// Re-habilitar el botón después de un tiempo
85+
setTimeout(() => {
86+
this.disabled = false;
87+
}, 2000);
88+
89+
moveElement(element, 1);
90+
},
91+
{ once: true }
92+
); // Usar { once: true } para que el listener se ejecute solo una vez
5793
});
5894
}
5995

60-
function moveRow(row, delta) {
61-
const rowId = row.dataset.rowid;
62-
if (!rowId) {
63-
const errorMsg = "No data-row-id attribute found on row";
96+
function moveElement(element, delta) {
97+
const elementId = element.dataset.elementid;
98+
if (!elementId) {
99+
const errorMsg = "No data-element-id attribute found on element";
64100
console.error(errorMsg);
65101
alert(errorMsg);
66102
return;
67103
}
68104

69-
console.log(`Preparing to move row ${rowId} with delta ${delta}`);
105+
console.log(`Preparing to move element ${elementId} with delta ${delta}`);
70106

71-
const baseUrl = row.dataset.rowsurl || "";
107+
const baseUrl = element.dataset.parenturl || "";
72108
console.log(`Sending request to: ${baseUrl}`);
73109

74110
const requestBody = {
75111
ordering: {
76-
obj_id: rowId,
112+
obj_id: elementId,
77113
delta: delta,
78114
},
79115
};
@@ -89,17 +125,20 @@
89125
},
90126
body: JSON.stringify(requestBody),
91127
credentials: "same-origin",
92-
}).then((response) => {
93-
console.log(`Received response with status: ${response.status}`);
94-
console.log("Response headers:", response.headers);
95-
console.log("Response ok:", response.ok);
96-
if (!response.ok) {
97-
const error = new Error(`HTTP error! status: ${response.status}`);
98-
console.error("Response not OK:", error);
99-
throw error;
100-
}
101-
// Refresh the page after successful update
102-
window.location.reload();
103-
});
128+
})
129+
.then((response) => {
130+
console.log(`Received response with status: ${response.status}`);
131+
console.log("Response headers:", response.headers);
132+
console.log("Response ok:", response.ok);
133+
if (!response.ok) {
134+
const error = new Error(`HTTP error! status: ${response.status}`);
135+
console.error("Response not OK:", error);
136+
throw error;
137+
}
138+
})
139+
.finally(() => {
140+
// Refresh the page after successful update
141+
window.location.reload();
142+
});
104143
}
105144
})();

‎src/cs_dynamicpages/views/dynamic_view.pt‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<tal:featured repeat="brain rows">
1313
<div tal:define="row brain/getObject;">
1414
<section class="dynamic-row state-${row/review_state}" data-elementid="${row/id}"
15-
data-elementurl="${row/absolute_url}" data-rowsurl="${row/aq_parent/absolute_url}"
16-
data-delete-target="true">
15+
data-elementurl="${row/absolute_url}" data-parenturl="${row/aq_parent/absolute_url}"
16+
data-delete-target="true" data-move-target="true">
1717
<div class="edit-buttons d-flex gap-2" tal:condition="row/can_edit">
1818
<small
1919
class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2 position-relative">
@@ -55,8 +55,9 @@
5555
tal:define="features_list row/featured_list" tal:condition="features_list">
5656
<tal:featured repeat="featured_brain features_list">
5757
<div tal:define="featured_obj featured_brain/getObject;">
58-
<div class="btn-group" data-elementid="${featured_obj/id}"
59-
data-elementurl="${featured_obj/absolute_url}" data-delete-target="true">
58+
<div class="btn-group" data-elementid="${featured_obj/id}" data-parenturl="${row/absolute_url}"
59+
data-elementurl="${featured_obj/absolute_url}" data-delete-target="true"
60+
data-move-target="true">
6061
<a tal:attributes="class python:featured_obj.review_state() == 'published' and
6162
'position-relative btn btn-outline-success btn-sm bg-success-subtle dropdown-toggle' or
6263
'position-relative btn btn-outline-danger btn-sm bg-danger-subtle dropdown-toggle'"
@@ -75,6 +76,13 @@
7576
</li>
7677
<li><a class="dropdown-item" href="#">Published</a></li>
7778
<li><a class="dropdown-item" href="#">Draft</a></li>
79+
<li>
80+
<h5 class="dropdown-header">Move actions</h5>
81+
</li>
82+
<li><a class="dropdown-item" href="#" data-action="move-up"
83+
tal:condition="python:not(repeat['featured_brain'].start)">Move up</a></li>
84+
<li><a class="dropdown-item" href="#" data-action="move-down"
85+
tal:condition="python:not(repeat['featured_brain'].end)">Move down</a></li>
7886
<li>
7987
<hr class="dropdown-divider">
8088
</li>

0 commit comments

Comments
 (0)