Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-10 04:22:27 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2202 from Pieczasz/feat/2169-project-tags-order

Browse Source 
feat(projects): allow reordering of project item tags
This commit is contained in:
Amruth Pillai
2025-02-02 16:39:47 +01:00
committed by GitHub
parent 9c6d9833d6 eb543cf32d
commit 1399d3c44b
1 changed files with 38 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx
View File

@ -28,6 +28,10 @@ const formSchema = projectSchema;
type FormValues = z.infer<typeof formSchema>;
const handleDragOver = (e: React.DragEvent) => {
e.preventDefault();
};
export const ProjectsDialog = () => {
const form = useForm<FormValues>({
defaultValues: defaultProject,
@ -35,6 +39,23 @@ export const ProjectsDialog = () => {
});
const [pendingKeyword, setPendingKeyword] = useState("");
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
const handleDrop = (
e: React.DragEvent,
dropIndex: number,
field: { value: string[]; onChange: (value: string[]) => void },
) => {
e.preventDefault();
if (draggedIndex === null) return;
const newKeywords = [...field.value];
const [draggedItem] = newKeywords.splice(draggedIndex, 1);
newKeywords.splice(dropIndex, 0, draggedItem);
field.onChange(newKeywords);
setDraggedIndex(null);
};
return (
<SectionDialog<FormValues>
@ -151,18 +172,28 @@ export const ProjectsDialog = () => {
<motion.div
key={item}
layout
draggable
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0, transition: { delay: index * 0.1 } }}
exit={{ opacity: 0, x: -50 }}
onDragStart={() => {
setDraggedIndex(index);
}}
onDragOver={handleDragOver}
onDrop={(e) => {
handleDrop(e, index, field);
}}
>
<Badge
className="cursor-pointer"
onClick={() => {
field.onChange(field.value.filter((v) => item !== v));
}}
>
<Badge className="cursor-move">
<span className="mr-1">{item}</span>
<X size={12} weight="bold" />
<X
className="cursor-pointer"
size={12}
weight="bold"
onClick={() => {
field.onChange(field.value.filter((v) => item !== v));
}}
/>
</Badge>
</motion.div>
))}