feat: project page

minskylab · Mar 28, 2023 · fba6153 · fba6153
1 parent f007429
commit fba6153
Show file tree

Hide file tree

Showing 15 changed files with 414 additions and 170 deletions.
diff --git a/src/components/ui/NavBarWithSearch/index.tsx b/src/components/ui/NavBarWithSearch/index.tsx
@@ -14,6 +14,7 @@ import {
   Tooltip,
 } from "@mantine/core";
 import { IconBulb, IconCheckbox, IconSearch, IconSelector } from "@tabler/icons";
+import router from "next/router";
 import { useState } from "react";
 import { Affiliate, Edit, LayoutGrid, Plus } from "tabler-icons-react";
 import NewProject from "../Project/newProject";
@@ -120,7 +121,7 @@ const useStyles = createStyles(theme => ({
 
 const links = [
   { icon: IconBulb, label: "Activity", notifications: 3 },
-  { icon: IconCheckbox, label: "Tasks" },
+  { icon: IconCheckbox, label: "Tasks", link: "/tasks" },
   //   { icon: IconUser, label: "Contacts" },
 ];
 
@@ -137,7 +138,11 @@ export function NavbarSearch({ onNewTask, openedNav, setOpenedNav }: NavBarWithS
   const [newTeamOpened, setNewTeamOpened] = useState(false);
 
   const mainLinks = links.map(link => (
-    <UnstyledButton key={link.label} className={classes.mainLink}>
+    <UnstyledButton
+      key={link.label}
+      className={classes.mainLink}
+      onClick={() => link.link && router.push(link.link)}
+    >
       <div className={classes.mainLinkInner}>
         <link.icon size={20} className={classes.mainLinkIcon} stroke={1.5} />
         <Text size="sm">{link.label}</Text>

diff --git a/src/components/ui/NavBarWithSearch/projects.tsx b/src/components/ui/NavBarWithSearch/projects.tsx
@@ -1,5 +1,6 @@
 import { Navbar, NavLink, useMantineTheme } from "@mantine/core";
 import { Rocket } from "tabler-icons-react";
+import router from "next/router";
 
 import { useData } from "lib/useData";
 
@@ -13,6 +14,7 @@ const ProjectsList = () => {
         key={index}
         label={p.name}
         icon={<Rocket size={16} color={theme.colors.blue[4]} />}
+        onClick={() => router.push(`/projects/${p.id}`)}
       ></NavLink>
     );
   });

diff --git a/src/components/ui/Project/lead.tsx b/src/components/ui/Project/lead.tsx
@@ -1,37 +1,37 @@
 import { Button, Menu, Text, TextInput, Avatar, Skeleton, Tooltip, Kbd } from "@mantine/core";
-import { useState } from "react";
+import { showNotification } from "@mantine/notifications";
+import { Check, X } from "tabler-icons-react";
 
-import { useData } from "lib/useData";
 import { Member, Project } from "modules/app/datatypes";
+import { useData } from "lib/useData";
 import { useActions } from "lib/useActions";
-import { showNotification } from "@mantine/notifications";
-import { Check, X } from "tabler-icons-react";
+import { ProjectById } from "../../../modules/app/datatypes/index";
 
-export const LeadProjectPhoto = (member: Member | null) => {
+export const LeadPhoto = (member: Member | null) => {
   return member?.photoUrl ? (
     <Avatar src={member.photoUrl} size="sm" radius="xl" />
   ) : (
     <Avatar size="sm" radius="xl" />
   );
 };
 
-export const LeadProjectName = (member: Member | null) => {
-  return member ? member?.name : "Lead";
+export const LeadName = (name: string | undefined) => {
+  return name ? name : "Lead";
 };
 
-type GenericLeadsMenuProps = {
+type GenericLeadMenuProps = {
   children: React.ReactNode;
   onSelect?: (member: Member | null) => void;
-  project?: Project;
+  project?: Project | ProjectById;
   selectedLead?: Member | null;
 };
 
-export const GenericLeadMenu = ({
+export const GenericLeadProjectMenu = ({
   children,
   onSelect,
   project,
   selectedLead,
-}: GenericLeadsMenuProps) => {
+}: GenericLeadMenuProps) => {
   const { membersData, isLoadingMembers, memberData } = useData({ memberId: project?.leadId });
   const { fetchUpdateProject } = useActions();
   const memberName = memberData?.memberById.name ? memberData?.memberById.name : selectedLead?.name;
@@ -121,16 +121,16 @@ type LeadProjectSelectorProps = {
 
 export const LeadProjectSelector = ({ lead, setLead }: LeadProjectSelectorProps) => {
   return (
-    <GenericLeadMenu onSelect={member => setLead(member)} selectedLead={lead}>
+    <GenericLeadProjectMenu onSelect={member => setLead(member)} selectedLead={lead}>
       {typeof lead === "undefined" ? (
         <Button compact variant="light" color={"gray"}>
-          {LeadProjectPhoto(lead)}
+          {LeadPhoto(lead)}
         </Button>
       ) : (
-        <Button compact variant="light" color={"gray"} leftIcon={LeadProjectPhoto(lead)}>
-          <Text size={"xs"}>{LeadProjectName(lead)}</Text>
+        <Button compact variant="light" color={"gray"} leftIcon={LeadPhoto(lead)}>
+          <Text size={"xs"}>{LeadName(lead?.name)}</Text>
         </Button>
       )}
-    </GenericLeadMenu>
+    </GenericLeadProjectMenu>
   );
 };
diff --git a/src/components/ui/Project/members.tsx b/src/components/ui/Project/members.tsx
@@ -12,7 +12,7 @@ import {
 import { Users } from "tabler-icons-react";
 
 import { useData } from "lib/useData";
-import { Member } from "modules/app/datatypes";
+import { Member, ProjectById } from "modules/app/datatypes";
 
 export const MembersIcon = (member: Member | undefined) => {
   return member?.photoUrl ? (
@@ -43,12 +43,14 @@ type GenericMembersMenuProps = {
   children: React.ReactNode;
   selectedMembers?: string[];
   setSelectedMembers?: (selectedMembers: string[]) => void;
+  project?: ProjectById;
 };
 
 export const GenericMemberMenu = ({
   children,
   selectedMembers,
   setSelectedMembers,
+  project,
 }: GenericMembersMenuProps) => {
   const { membersData, isLoadingMembers } = useData({});
 

diff --git a/src/components/ui/Project/team.tsx b/src/components/ui/Project/team.tsx
@@ -103,15 +103,6 @@ type GenericTeamsMenuProps = {
 export const GenericTeamMenu = ({ children, teams, setTeams }: GenericTeamsMenuProps) => {
   const { teamsData, isLoadingTeams } = useData({});
   const [searchValue, setSearchValue] = useState("");
-  const [teamOptions, setTeamOptions] = useState<Team[]>([]);
-
-  useEffect(() => {
-    if (teamsData?.teams) {
-      setTeamOptions(
-        teamsData?.teams.filter(item => item.name.toLowerCase().includes(searchValue.toLowerCase()))
-      );
-    }
-  }, [searchValue]);
 
   return (
     <Menu shadow="md" closeOnItemClick={false} position="bottom-start">
@@ -134,7 +125,7 @@ export const GenericTeamMenu = ({ children, teams, setTeams }: GenericTeamsMenuP
           <Skeleton height={36} radius="sm" sx={{ "&::after": { background: "#e8ebed" } }} />
         ) : (
           <Checkbox.Group spacing={0} value={teams} onChange={setTeams} orientation="vertical">
-            {teamOptions.map(t => {
+            {teamsData?.teams.map(t => {
               return (
                 <Menu.Item key={t.id}>
                   <Checkbox

diff --git a/src/components/ui/Task/assignee.tsx b/src/components/ui/Task/assignee.tsx
diff --git a/src/components/ui/Task/assignees.tsx b/src/components/ui/Task/assignees.tsx
@@ -1,15 +1,4 @@
-import {
-  Button,
-  Menu,
-  Text,
-  TextInput,
-  Avatar,
-  Skeleton,
-  Checkbox,
-  Group,
-  Tooltip,
-  Divider,
-} from "@mantine/core";
+import { Button, Menu, Text, TextInput, Skeleton, Checkbox, Tooltip, Divider } from "@mantine/core";
 import { Users } from "tabler-icons-react";
 import { useEffect, useState } from "react";
 
@@ -19,32 +8,7 @@ import { useActions } from "lib/useActions";
 import { priorityName } from "./priority";
 import { statusName } from "./status";
 import { ErrorNotification, SuccessNotification } from "lib/notifications";
-import { usePlexoContext } from "context/PlexoContext";
-
-export const AssigneesIcon = (member: Member | undefined) => {
-  return member?.photoUrl ? (
-    <Avatar src={member.photoUrl} size="sm" radius="xl" />
-  ) : (
-    <Users size={16} />
-  );
-};
-
-export const AssigneesPhoto = (member: Member | undefined) => {
-  return (
-    <Group spacing={5}>
-      {member?.photoUrl ? (
-        <Avatar src={member.photoUrl} size="sm" radius="xl" />
-      ) : (
-        <Avatar size="sm" radius="xl" />
-      )}
-      {member?.name}
-    </Group>
-  );
-};
-
-export const AssigneesName = (member: Member | undefined) => {
-  return member ? member?.name : "Member";
-};
+import { MemberPhoto } from "components/ui/Project/members";
 
 export const assigneesId = (task: TaskById | undefined) => {
   return task?.assignees.map(a => a.id);
@@ -97,7 +61,7 @@ export const MembersCheckboxGroup = ({
               size="xs"
               pb={10}
               value={m.id}
-              label={AssigneesPhoto(m)}
+              label={MemberPhoto(m)}
               styles={{
                 body: {
                   alignItems: "center",
@@ -209,7 +173,7 @@ export const GenericAssigneesMenu = ({
                   <Checkbox
                     size="xs"
                     value={m.id}
-                    label={AssigneesPhoto(m)}
+                    label={MemberPhoto(m)}
                     styles={{
                       body: {
                         alignItems: "center",

diff --git a/src/components/ui/Task/lead.tsx b/src/components/ui/Task/lead.tsx
@@ -1,4 +1,5 @@
 import { Button, Kbd, Menu, Text, TextInput, Avatar, Skeleton, Tooltip } from "@mantine/core";
+import { useEffect, useState } from "react";
 
 import { Member, Task, TaskById } from "modules/app/datatypes";
 import { useData } from "lib/useData";
@@ -7,19 +8,7 @@ import { priorityName } from "./priority";
 import { statusName } from "./status";
 import { assigneesId } from "components/ui/Task/assignees";
 import { ErrorNotification, SuccessNotification } from "lib/notifications";
-import { useEffect, useState } from "react";
-
-export const LeadTaskPhoto = (member: Member | null) => {
-  return member?.photoUrl ? (
-    <Avatar src={member.photoUrl} size="sm" radius="xl" />
-  ) : (
-    <Avatar size="sm" radius="xl" />
-  );
-};
-
-export const LeadTaskName = (name: string | undefined) => {
-  return name ? name : "Lead";
-};
+import { LeadName, LeadPhoto } from "../Project/lead";
 
 type GenericLeadMenuProps = {
   children: React.ReactNode;
@@ -135,11 +124,11 @@ export const LeadTaskSelector = ({ lead, setLead }: LeadTaskSelectorProps) => {
     <GenericLeadTaskMenu onSelect={member => setLead(member)} selectedLead={lead}>
       {typeof lead === "undefined" ? (
         <Button compact variant="light" color={"gray"}>
-          {LeadTaskPhoto(lead)}
+          {LeadPhoto(lead)}
         </Button>
       ) : (
-        <Button compact variant="light" color={"gray"} leftIcon={LeadTaskPhoto(lead)}>
-          <Text size={"xs"}>{LeadTaskName(lead?.name)}</Text>
+        <Button compact variant="light" color={"gray"} leftIcon={LeadPhoto(lead)}>
+          <Text size={"xs"}>{LeadName(lead?.name)}</Text>
         </Button>
       )}
     </GenericLeadTaskMenu>

diff --git a/src/graphql/projects.graphql b/src/graphql/projects.graphql
@@ -40,6 +40,38 @@ subscription ProjectsSubscription {
   }
 }
 
+query ProjectById($projectId: UUID!) {
+  projectById(id: $projectId) {
+    id
+    name
+    prefix
+    description
+    leadId
+    startDate
+    dueDate
+    owner {
+      id
+      name
+    }
+    leader {
+      id
+      name
+    }
+    members {
+      id
+      name
+    }
+    tasks {
+      id
+      title
+    }
+    teams {
+      id
+      name
+    }
+  }
+}
+
 mutation NewProject(
   $name: String!
   $prefix: String