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 { ProjectSelect } from "/components/ProjectSelect";
|
||||
const BASE_CLASSNAMES = ["block", "w-3/4", "no-underline", "p-3", "mt-2"];
|
||||
const ACTIVE_CLASSNAMES = [
|
||||
...BASE_CLASSNAMES,
|
||||
|
@ -30,6 +31,7 @@ const find = (path: string, bar: Bar): Maybe<Item> => {
|
|||
};
|
||||
|
||||
export function NavBar() {
|
||||
const params = useContext(ParamContext);
|
||||
const bar: Bar = {
|
||||
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