sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: start edit user page

Browse source
This commit is contained in:
Sam 2022-11-17 17:34:20 +01:00
parent a67ecbf51d
commit 77dea0c5ed
5 changed files with 326 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

128
frontend/components/Editable.tsx Normal file
View file

@ -0,0 +1,128 @@
import {
EmojiLaughing,
HandThumbsDown,
HandThumbsUp,
Heart,
People,
Trash3,
} from "react-bootstrap-icons";
import Card from "./Card";
import TextInput from "./TextInput";
export interface EditField {
id: number;
name: string;
pronouns: Record<string, PronounChoice>;
}
export enum PronounChoice {
favourite,
okay,
jokingly,
friendsOnly,
avoid,
}
type EditableCardProps = {
field: EditField;
onChangeName: React.ChangeEventHandler<HTMLInputElement>;
onChangeFavourite(
e: React.MouseEvent<HTMLButtonElement>,
entry: string
): void;
onChangeOkay(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onChangeJokingly(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onChangeFriends(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onChangeAvoid(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onClickDelete: React.MouseEventHandler<HTMLButtonElement>;
};
export function EditableCard(props: EditableCardProps) {
const footer = (
<div className="flex justify-between">
<TextInput value={props.field.name} onChange={props.onChangeName} />
<button
type="button"
onClick={props.onClickDelete}
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 rounded-md"
>
<Trash3 aria-hidden className="inline" />{" "}
<span className="font-bold">Delete</span>
</button>
</div>
);
return (
<Card title={props.field.name} draggable footer={footer}>
<ul>
{Object.keys(props.field.pronouns).map((pronoun, index) => {
const choice = props.field.pronouns[pronoun];
return (
<li className="flex justify-between my-1" key={index}>
<div>{pronoun}</div>
<div className="rounded-md">
<button
type="button"
onClick={(e) => props.onChangeFavourite(e, pronoun)}
className={`${choice == PronounChoice.favourite
? "bg-slate-500"
: "bg-slate-600"
} hover:bg-slate-400 p-2`}
>
<Heart />
</button>
<button
type="button"
onClick={(e) => props.onChangeOkay(e, pronoun)}
className={`${choice == PronounChoice.okay
? "bg-slate-500"
: "bg-slate-600"
} hover:bg-slate-400 p-2`}
>
<HandThumbsUp />
</button>
<button
type="button"
onClick={(e) => props.onChangeJokingly(e, pronoun)}
className={`${choice == PronounChoice.jokingly
? "bg-slate-500"
: "bg-slate-600"
} hover:bg-slate-400 p-2`}
>
<EmojiLaughing />
</button>
<button
type="button"
onClick={(e) => props.onChangeFriends(e, pronoun)}
className={`${choice == PronounChoice.friendsOnly
? "bg-slate-500"
: "bg-slate-600"
} hover:bg-slate-400 p-2`}
>
<People />
</button>
<button
type="button"
onClick={(e) => props.onChangeAvoid(e, pronoun)}
className={`${choice == PronounChoice.avoid
? "bg-slate-500"
: "bg-slate-600"
} hover:bg-slate-400 p-2`}
>
<HandThumbsDown />
</button>
<button
type="button"
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2"
>
<Trash3 />
</button>
</div>
</li>
);
})}
</ul>
</Card>
);
}