From 42ca88f62741be44223ba3f0b984e5ea47e16c69 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Mon, 11 Nov 2024 20:42:58 +1000
Subject: [PATCH] add grip element to draggable post item

---
 front/src/components/DraggablePostsList.module.scss | 6 ++++++
 front/src/components/DraggablePostsList.tsx         | 7 ++++---
 front/src/components/display/GripVertical.tsx       | 9 +++++++++
 3 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 front/src/components/display/GripVertical.tsx

diff --git a/front/src/components/DraggablePostsList.module.scss b/front/src/components/DraggablePostsList.module.scss
index 012efb0..33e960c 100644
--- a/front/src/components/DraggablePostsList.module.scss
+++ b/front/src/components/DraggablePostsList.module.scss
@@ -7,6 +7,12 @@
     span {
         display: flex;
         align-items: center;
+        svg {
+            height: 100%;
+            width: 1rem;
+            padding-right: 1rem;
+            cursor: grab;
+        }
     }
 
     .posts {
diff --git a/front/src/components/DraggablePostsList.tsx b/front/src/components/DraggablePostsList.tsx
index babaabf..07bc456 100644
--- a/front/src/components/DraggablePostsList.tsx
+++ b/front/src/components/DraggablePostsList.tsx
@@ -3,6 +3,7 @@ import { DataRow } from '../api/DataRow';
 import { Post } from './display/Post';
 
 import style from './DraggablePostsList.module.scss';
+import { GripVertical } from './display/GripVertical';
 
 type SetRowsFunction = (data: DataRow[]) => void;
 
@@ -10,7 +11,7 @@ function PostDraggableListItem({ item, dragHandleProps, rows, setRows }: { item:
 
     function onChange() {
         rows.splice(rows.indexOf(item), 1);
-        setRows(rows);
+        setRows([ ...rows ]);
     }
 
     return (
@@ -18,8 +19,9 @@ function PostDraggableListItem({ item, dragHandleProps, rows, setRows }: { item:
             <span>
                 <label for={`row-list-${item.id}`} style={{ display: 'none' }}>Select</label>
                 <input type='checkbox' id={`row-list-${item.id}`} onChange={onChange}/>
+                <GripVertical {...dragHandleProps} />
             </span>
-            <Post className={style.posts} row={item} {...dragHandleProps} />
+            <Post className={style.posts} row={item} />
         </div>
     )
 }
@@ -36,7 +38,6 @@ export function DraggablePostsList(props: DraggablePostsList) {
             template={p => PostDraggableListItem({ ...p, setRows: props.setRows, rows: props.rows })}
             list={props.rows}
             onMoveEnd={rows => props.setRows([ ...rows ])}
-
         />
     );
 }
\ No newline at end of file
diff --git a/front/src/components/display/GripVertical.tsx b/front/src/components/display/GripVertical.tsx
new file mode 100644
index 0000000..7d7debe
--- /dev/null
+++ b/front/src/components/display/GripVertical.tsx
@@ -0,0 +1,9 @@
+import type React from "preact/compat";
+
+export function GripVertical(props: React.JSX.SVGAttributes<SVGSVGElement>) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16" {...props}>
+            <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+        </svg>
+    )
+}
\ No newline at end of file