frontend: improve 'New task' page
This commit is contained in:
parent
024728c2eb
commit
4ea61b2c89
3 changed files with 87 additions and 69 deletions
|
@ -30,10 +30,19 @@ export function Group({ groupName, getItems }: Props) {
|
|||
const classes = {};
|
||||
const editHref = `/tasks/edit#id=${task.id}`;
|
||||
return (
|
||||
<li className={classnames("flex flex-row p-3 secondary-hover w-full", classes)} key={key}>
|
||||
<li
|
||||
className={classnames(
|
||||
"flex flex-row p-3 secondary-hover w-full",
|
||||
classes,
|
||||
)}
|
||||
key={key}
|
||||
>
|
||||
<div className="flex flex-wrap w-3/4">
|
||||
<div className="w-full">
|
||||
<a className="no-underline text-accent block h-14" href={editHref}>
|
||||
<a
|
||||
className="no-underline text-accent block h-14"
|
||||
href={editHref}
|
||||
>
|
||||
<span className="block w-full">{task.title}</span>
|
||||
<span className="block w-full text-smaller text-secondary">
|
||||
{datetime.toFormat("dd LLL, yyyy")} at{" "}
|
||||
|
@ -63,7 +72,8 @@ export function Group({ groupName, getItems }: Props) {
|
|||
<br />
|
||||
<a className="w-100" href="/tasks/new">
|
||||
Add a task
|
||||
</a> .
|
||||
</a>{" "}
|
||||
.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
@ -9,7 +9,11 @@ const ACTIVE_CLASSNAMES = [
|
|||
"bg-secondary",
|
||||
"text-primary",
|
||||
].join(" ");
|
||||
const INACTIVE_CLASSNAMES = [...BASE_CLASSNAMES, "text-accent", "secondary-hover"].join(" ");
|
||||
const INACTIVE_CLASSNAMES = [
|
||||
...BASE_CLASSNAMES,
|
||||
"text-accent",
|
||||
"secondary-hover",
|
||||
].join(" ");
|
||||
|
||||
type Item = { text: string; href: string };
|
||||
type Bar = Record<string, Array<Item>>;
|
||||
|
@ -42,13 +46,17 @@ export function NavBar() {
|
|||
const items = bar[key];
|
||||
return (
|
||||
<>
|
||||
<h1>{key}</h1>
|
||||
<h3>{key}</h3>
|
||||
<ul>
|
||||
{...items.flatMap(item => {
|
||||
return (
|
||||
<li>
|
||||
<a
|
||||
className={activeItem == item ? ACTIVE_CLASSNAMES : INACTIVE_CLASSNAMES}
|
||||
className={
|
||||
activeItem == item
|
||||
? ACTIVE_CLASSNAMES
|
||||
: INACTIVE_CLASSNAMES
|
||||
}
|
||||
href={item.href}
|
||||
>
|
||||
{item.text}
|
||||
|
|
|
@ -72,26 +72,30 @@ export function Task({ taskId }: { taskId?: number }) {
|
|||
</div>
|
||||
<div className="w-3/4">
|
||||
<h1>{task ? "Edit task" : "New task"}</h1>
|
||||
<form className="group h-100" onSubmit={handleSubmit(onSave)}>
|
||||
<div className="group-name">
|
||||
<ul className="tabs">
|
||||
<form onSubmit={handleSubmit(onSave)}>
|
||||
<ul className="flex w-3/4 mb-3">
|
||||
<li className={classnames("tab", { active: isEditable })}>
|
||||
<a href="#" onClick={() => setIsEditable(true)}>
|
||||
<a
|
||||
className="no-underline"
|
||||
href="#"
|
||||
onClick={() => setIsEditable(true)}
|
||||
>
|
||||
Editor
|
||||
</a>
|
||||
</li>
|
||||
<li className={classnames("tab", { active: !isEditable })}>
|
||||
<a href="#" onClick={() => setIsEditable(false)}>
|
||||
<a
|
||||
className="no-underline"
|
||||
href="#"
|
||||
onClick={() => setIsEditable(false)}
|
||||
>
|
||||
Preview
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="group-items h-80">
|
||||
<div>
|
||||
<select
|
||||
{...register("projectId")}
|
||||
className="form"
|
||||
className="p-3 w-3/4 mb-3"
|
||||
value={projectId}
|
||||
onChange={event => {
|
||||
const v: string = event.target.value;
|
||||
|
@ -106,28 +110,25 @@ export function Task({ taskId }: { taskId?: number }) {
|
|||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
className="form"
|
||||
className="p-3 flex w-3/4 mb-3"
|
||||
type="text"
|
||||
placeholder="Title"
|
||||
defaultValue={task?.title}
|
||||
{...register("title", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
{isEditable ? (
|
||||
<>
|
||||
<div className="h-96 w-3/4">
|
||||
<textarea
|
||||
className="w-full h-full"
|
||||
className="p-3 h-72 flex w-3/4 mb-3"
|
||||
defaultValue={task?.content || DEFAULT_TASK_CONTENT}
|
||||
{...register("content", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="row">
|
||||
<input className="form" type="submit" value="Save" />
|
||||
</div>
|
||||
<input
|
||||
className="cursor-pointer bg-secondary text-primary p-3 rounded font-bold"
|
||||
type="submit"
|
||||
value="Save"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
|
@ -137,7 +138,6 @@ export function Task({ taskId }: { taskId?: number }) {
|
|||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue