();
+
+ onDragStart((e) => {
+ e.dataTransfer?.setData(DragTypes.Note, props.note.id.toString());
+ });
+
+ const isBeingDragged = createSubject(
+ false,
+ onDrag(() => true),
+ onDragEnd(() => false)
+ );
+
+ onDrop((e) => {
+ if (!e.dataTransfer?.types.includes(DragTypes.Note)) return;
+
+ const noteId = e.dataTransfer?.getData(DragTypes.Note) as
+ | NoteId
+ | undefined;
+
+ if (!noteId || noteId === props.note.id) return;
- const [acceptDrop, setAcceptDrop] = createSignal<"top" | "bottom" | false>(
- false
+ if (acceptDrop() === "top" && props.previous?.id !== noteId) {
+ return moveNoteAction(
+ noteId,
+ props.note.column,
+ getIndexBetween(props.previous?.order, props.note.order),
+ new Date().getTime()
+ );
+ }
+
+ if (acceptDrop() === "bottom" && props.next?.id !== noteId) {
+ return moveNoteAction(
+ noteId,
+ props.note.column,
+ getIndexBetween(props.note.order, props.next?.order),
+ new Date().getTime()
+ );
+ }
+ });
+
+ onBlur((e) =>
+ updateAction(props.note.id, e.target.value, new Date().getTime())
+ );
+
+ const acceptDrop = createSubject<"top" | "bottom" | false>(
+ false,
+ onDragExit(() => false),
+ onDragLeave(() => false),
+ onDrop(() => false),
+ onDragOver((e) => {
+ if (!e.dataTransfer?.types.includes(DragTypes.Note)) {
+ return false;
+ }
+
+ const rect = e.currentTarget.getBoundingClientRect();
+ const midpoint = (rect.top + rect.bottom) / 2;
+ const isTop = e.clientY < midpoint;
+
+ return isTop ? "top" : "bottom";
+ })
);
return (
@@ -143,77 +216,18 @@ export function Note(props: { note: Note; previous?: Note; next?: Note }) {
}}
draggable="true"
class="card card-side px-1 py-2 w-full bg-slate-200 text-lg flex justify-between items-center space-x-1"
- onDragStart={(e) => {
- e.dataTransfer?.setData(DragTypes.Note, props.note.id.toString());
- }}
- onDrag={(e) => {
- setIsBeingDragged(true);
- }}
- onDragEnd={(e) => {
- setIsBeingDragged(false);
- }}
- onDragEnter={(e) => {
- e.preventDefault();
- e.stopPropagation();
- }}
- onDragOver={(e) => {
- e.preventDefault();
- e.stopPropagation();
-
- if (!e.dataTransfer?.types.includes(DragTypes.Note)) {
- setAcceptDrop(false);
- return;
- }
-
- const rect = e.currentTarget.getBoundingClientRect();
- const midpoint = (rect.top + rect.bottom) / 2;
- const isTop = e.clientY < midpoint;
-
- setAcceptDrop(isTop ? "top" : "bottom");
- }}
- onDragExit={(e) => {
- setAcceptDrop(false);
- }}
- onDragLeave={(e) => {
- setAcceptDrop(false);
- }}
- onDrop={(e) => {
- e.preventDefault();
- e.stopPropagation();
- if (e.dataTransfer?.types.includes(DragTypes.Note)) {
- const noteId = e.dataTransfer?.getData(DragTypes.Note) as
- | NoteId
- | undefined;
-
- action: if (noteId && noteId !== props.note.id) {
- if (acceptDrop() === "top") {
- if (props.previous && props.previous?.id === noteId) {
- break action;
- }
- moveNoteAction(
- noteId,
- props.note.column,
- getIndexBetween(props.previous?.order, props.note.order),
- new Date().getTime()
- );
- }
-
- if (acceptDrop() === "bottom") {
- if (props.previous && props.next?.id === noteId) {
- break action;
- }
- moveNoteAction(
- noteId,
- props.note.column,
- getIndexBetween(props.note.order, props.next?.order),
- new Date().getTime()
- );
- }
- }
- }
-
- setAcceptDrop(false);
- }}
+ onDragStart={emitDragStart}
+ onDrag={emitDrag}
+ onDragEnd={emitDragEnd}
+ onDragEnter={(e) => (
+ e.preventDefault(), e.stopPropagation(), emitDragEnter(e)
+ )}
+ onDragOver={(e) => (
+ e.preventDefault(), e.stopPropagation(), emitDragOver(e)
+ )}
+ onDragExit={emitDragExit}
+ onDragLeave={emitDragLeave}
+ onDrop={(e) => (e.preventDefault(), e.stopPropagation(), emitDrop(e))}
>
@@ -224,13 +238,7 @@ export function Note(props: { note: Note; previous?: Note; next?: Note }) {
style={{
resize: "none",
}}
- onBlur={(e) =>
- updateAction(
- props.note.id,
- (e.target as HTMLTextAreaElement).value,
- new Date().getTime()
- )
- }
+ onBlur={emitBlur}
>
{`${props.note.body}`}
@@ -244,15 +252,51 @@ export function Note(props: { note: Note; previous?: Note; next?: Note }) {
);
}
+type FocusOut = FocusEvent & {
+ currentTarget: HTMLFormElement;
+};
+
export function AddNote(props: {
column: ColumnId;
length: number;
onAdd: () => void;
board: BoardId;
}) {
- const [active, setActive] = createSignal(false);
const addNote = useAction(createNote);
+ const [onSubmit, emitSubmit] = createEvent();
+ const [onCancel, emitCancel] = createEvent();
+ const [onClickAdd, emitClickAdd] = createEvent();
+ const [onFocusOut, emitFocusOut] = createEvent();
+
+ const active = createSubject(
+ false,
+ onClickAdd(() => true),
+ onCancel(() => false),
+ onFocusOut((e) =>
+ e.currentTarget.contains(e.relatedTarget as any) ? halt() : false
+ )
+ );
+
+ onSubmit(() => {
+ const body = inputRef?.value.trim() ?? "Note";
+ if (body === "") {
+ inputRef?.setCustomValidity("Please fill out this field.");
+ inputRef?.reportValidity();
+ return;
+ }
+ addNote({
+ id: crypto.randomUUID() as NoteId,
+ board: props.board,
+ column: props.column,
+ body,
+ order: props.length + 1,
+ timestamp: new Date().getTime(),
+ });
+ inputRef && (inputRef.value = "");
+ props.onAdd();
+ });
+
let inputRef: HTMLInputElement | undefined;
return (
@@ -261,30 +305,8 @@ export function AddNote(props: {