frontend: add 'ProjectSelect' to the navbar
This commit is contained in:
parent
76cb7718f1
commit
a017048b21
2 changed files with 53 additions and 2 deletions
|
@ -1,6 +1,7 @@
|
||||||
import React, { useState } from "react";
|
import React, { useContext } from "react";
|
||||||
|
import { ParamContext } from "/Context";
|
||||||
import { Maybe } from "/types/schema";
|
import { Maybe } from "/types/schema";
|
||||||
|
import { ProjectSelect } from "/components/ProjectSelect";
|
||||||
const BASE_CLASSNAMES = ["block", "w-3/4", "no-underline", "p-3", "mt-2"];
|
const BASE_CLASSNAMES = ["block", "w-3/4", "no-underline", "p-3", "mt-2"];
|
||||||
const ACTIVE_CLASSNAMES = [
|
const ACTIVE_CLASSNAMES = [
|
||||||
...BASE_CLASSNAMES,
|
...BASE_CLASSNAMES,
|
||||||
|
@ -30,6 +31,7 @@ const find = (path: string, bar: Bar): Maybe<Item> => {
|
||||||
};
|
};
|
||||||
|
|
||||||
export function NavBar() {
|
export function NavBar() {
|
||||||
|
const params = useContext(ParamContext);
|
||||||
const bar: Bar = {
|
const bar: Bar = {
|
||||||
Tasks: [
|
Tasks: [
|
||||||
{ text: "All tasks", href: "/tasks/" },
|
{ text: "All tasks", href: "/tasks/" },
|
||||||
|
@ -67,6 +69,18 @@ export function NavBar() {
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
<h3>Filters</h3>
|
||||||
|
<ProjectSelect
|
||||||
|
selected={params.projectId}
|
||||||
|
onChange={project => {
|
||||||
|
if (project) {
|
||||||
|
location.hash = `projectId=${project.id}`;
|
||||||
|
} else {
|
||||||
|
location.hash = "";
|
||||||
|
}
|
||||||
|
location.reload();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
37
twenty-frontend/src/js/components/ProjectSelect.tsx
Normal file
37
twenty-frontend/src/js/components/ProjectSelect.tsx
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useProjects } from "/hooks/queries/useProjects";
|
||||||
|
import { Project, Maybe } from "/types/schema";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
selected: Maybe<string>;
|
||||||
|
onChange: (project: Maybe<Project>) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ProjectSelect({ onChange, selected }: Props) {
|
||||||
|
const { data, loading } = useProjects();
|
||||||
|
const projects: Project[] = data?.projects || [];
|
||||||
|
const options = [
|
||||||
|
<option>Any project</option>,
|
||||||
|
...projects.map(project => {
|
||||||
|
return <option value={project.id}>{project.name}</option>;
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<select
|
||||||
|
className="flex p-3 w-3/4"
|
||||||
|
defaultValue={selected}
|
||||||
|
onChange={event => {
|
||||||
|
const { target } = event;
|
||||||
|
const project = projects.find(p => p.id === Number(target.value));
|
||||||
|
onChange(project);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{...options}
|
||||||
|
</select>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in a new issue