pronounsfu/frontend/components/Editable.tsx

165 lines
5.4 KiB
TypeScript
Raw Normal View History

2022-11-17 08:34:20 -08:00
import {
EmojiLaughing,
HandThumbsDown,
HandThumbsUp,
Heart,
People,
Plus,
ThreeDotsVertical,
Trash3,
2022-11-17 08:34:20 -08:00
} from "react-bootstrap-icons";
import Card from "./Card";
import TextInput from "./TextInput";
import Button, { ButtonStyle } from "./Button";
import { useState } from "react";
2023-03-04 14:03:30 -08:00
import { WordStatus } from "../lib/api-fetch";
import { ReactSortable } from "react-sortablejs";
2022-11-17 08:34:20 -08:00
export interface EditField {
id: number;
name: string;
values: EditFieldValue[];
}
export interface EditFieldValue {
id: number;
value: string;
status: WordStatus;
2022-11-17 08:34:20 -08:00
}
type EditableCardProps = {
field: EditField;
onChangeName: React.ChangeEventHandler<HTMLInputElement>;
onChangePronoun: React.ChangeEventHandler<HTMLInputElement>;
onAddPronoun(pronoun: string): void;
2023-03-04 14:03:30 -08:00
onDeletePronoun(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
onChangeFavourite(
e: React.MouseEvent<HTMLButtonElement>,
2023-03-04 14:03:30 -08:00
index: number
): void;
2023-03-04 14:03:30 -08:00
onChangeOkay(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
onChangeJokingly(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
onChangeFriends(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
onChangeAvoid(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
onClickDelete: React.MouseEventHandler<HTMLButtonElement>;
onChangeOrder(newState: EditFieldValue[]): void;
2022-11-17 08:34:20 -08:00
};
export function EditableCard(props: EditableCardProps) {
const [input, setInput] = useState("");
const footer = (
<div className="flex flex-col justify-between space-y-2">
<div className="flex justify-between items-center px-2 pt-2">
<TextInput value={input} onChange={(e) => setInput(e.target.value)} />
<Button
disabled={!input || input === ""}
style={ButtonStyle.success}
onClick={() => {
if (!input || input === "") return;
props.onAddPronoun(input);
setInput("");
}}
>
<Plus aria-hidden className="inline" /> Add entry
</Button>
</div>
<div className="flex justify-between p-2 border-t border-zinc-200 dark:border-slate-800">
<TextInput value={props.field.name} onChange={props.onChangeName} />
<Button style={ButtonStyle.danger} onClick={props.onClickDelete}>
<Trash3 aria-hidden className="inline" /> Delete field
</Button>
</div>
</div>
);
2022-11-17 08:34:20 -08:00
return (
<Card title={props.field.name} draggable footer={footer}>
<ReactSortable
handle=".entry-handle"
list={props.field.values}
setList={props.onChangeOrder}
>
2023-03-04 14:03:30 -08:00
{props.field.values.map((value, index) => {
return (
<li className="flex justify-between my-1 items-center" key={index}>
<ThreeDotsVertical className="entry-handle hover:cursor-grab" />
<TextInput
2023-03-04 14:03:30 -08:00
value={value.value}
prevValue={value.value}
onChange={props.onChangePronoun}
/>
<div>
<button
type="button"
2023-03-04 14:03:30 -08:00
onClick={(e) => props.onChangeFavourite(e, index)}
className={`${
2023-03-04 14:03:30 -08:00
value.status == WordStatus.Favourite
? "bg-slate-500"
: "bg-slate-600"
} text-white hover:bg-slate-400 p-2`}
>
<Heart />
</button>
<button
type="button"
2023-03-04 14:03:30 -08:00
onClick={(e) => props.onChangeOkay(e, index)}
className={`${
2023-03-04 14:03:30 -08:00
value.status == WordStatus.Okay
? "bg-slate-500"
: "bg-slate-600"
} text-white hover:bg-slate-400 p-2`}
>
<HandThumbsUp />
</button>
<button
type="button"
2023-03-04 14:03:30 -08:00
onClick={(e) => props.onChangeJokingly(e, index)}
className={`${
2023-03-04 14:03:30 -08:00
value.status == WordStatus.Jokingly
? "bg-slate-500"
: "bg-slate-600"
} text-white hover:bg-slate-400 p-2`}
>
<EmojiLaughing />
</button>
<button
type="button"
2023-03-04 14:03:30 -08:00
onClick={(e) => props.onChangeFriends(e, index)}
className={`${
2023-03-04 14:03:30 -08:00
value.status == WordStatus.FriendsOnly
? "bg-slate-500"
: "bg-slate-600"
} text-white hover:bg-slate-400 p-2`}
>
<People />
</button>
<button
type="button"
2023-03-04 14:03:30 -08:00
onClick={(e) => props.onChangeAvoid(e, index)}
className={`${
2023-03-04 14:03:30 -08:00
value.status == WordStatus.Avoid
? "bg-slate-500"
: "bg-slate-600"
} text-white hover:bg-slate-400 p-2`}
>
<HandThumbsDown />
</button>
<button
type="button"
2023-03-04 14:03:30 -08:00
onClick={(e) => props.onDeletePronoun(e, index)}
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2"
>
<Trash3 />
</button>
</div>
</li>
);
})}
</ReactSortable>
</Card>
);
2022-11-17 08:34:20 -08:00
}