Support double clicking to move draggable

fyysikkokilta · Dec 7, 2024 · 3d77183 · 3d77183
1 parent a8f7c8c
commit 3d77183
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/src/frontend/components/vote/Vote.tsx b/src/frontend/components/vote/Vote.tsx
@@ -99,6 +99,18 @@ export const Vote = () => {
     setDisableVote(false)
   }
 
+  const handleDoubleClickAdd = (event: React.MouseEvent<HTMLElement>) => {
+    const candidateId = event.currentTarget.id
+    setSelectedCandidates((prev) => [...prev, candidateId])
+    setAvailableCandidates((prev) => prev.filter((c) => c !== candidateId))
+  }
+
+  const handleDoubleClickRemove = (event: React.MouseEvent<HTMLElement>) => {
+    const candidateId = event.currentTarget.id
+    setAvailableCandidates((prev) => [...prev, candidateId])
+    setSelectedCandidates((prev) => prev.filter((c) => c !== candidateId))
+  }
+
   useEffect(() => {
     void (async () => {
       if (!voterId) {
@@ -239,9 +251,11 @@ export const Vote = () => {
                                 {(provided) => (
                                   <ListGroup.Item
                                     ref={provided.innerRef}
+                                    id={candidateId}
                                     {...provided.draggableProps}
                                     {...provided.dragHandleProps}
                                     className="d-flex align-items-center mb-2"
+                                    onDoubleClick={handleDoubleClickRemove}
                                   >
                                     {index + 1}. &nbsp;{' '}
                                     {getCandidateName(candidateId)}
@@ -279,9 +293,11 @@ export const Vote = () => {
                                 {(provided) => (
                                   <ListGroup.Item
                                     ref={provided.innerRef}
+                                    id={candidateId}
                                     {...provided.draggableProps}
                                     {...provided.dragHandleProps}
                                     className="d-flex align-items-center mb-2"
+                                    onDoubleClick={handleDoubleClickAdd}
                                   >
                                     {getCandidateName(candidateId)}
                                   </ListGroup.Item>