github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: updated sidebar selects

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-03-05 23:24:50 +05:30
parent 6d99557de5
commit 4f4f3ebbde
19 changed files with 389 additions and 717 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/core/board-view/single-issue.tsx
View File

@ -294,7 +294,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {properties.sub_issue_count && (
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"> <div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"} {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}

2
apps/app/components/core/list-view/single-issue.tsx
View File

@ -236,7 +236,7 @@ export const SingleListIssue: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {properties.sub_issue_count && (
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm"> <div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"} {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}

4
apps/app/components/issues/my-issues-list-item.tsx
View File

@ -105,7 +105,7 @@ export const MyIssuesListItem: React.FC<Props> = ({
</Tooltip> </Tooltip>
)} )}
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}> <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
<span className="w-auto max-w-lg text-ellipsis overflow-hidden whitespace-nowrap"> <span className="w-auto max-w-lg overflow-hidden text-ellipsis whitespace-nowrap">
{issue.name} {issue.name}
</span> </span>
</Tooltip> </Tooltip>
@ -135,7 +135,7 @@ export const MyIssuesListItem: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {properties.sub_issue_count && (
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"> <div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
{issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"} {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}

157
apps/app/components/issues/sidebar-select/assignee.tsx
View File

@ -1,41 +1,57 @@
import React from "react"; import React from "react";
import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// services // services
import { UserGroupIcon } from "@heroicons/react/24/outline"; import projectService from "services/project.service";
import workspaceService from "services/workspace.service";
// hooks
// ui // ui
import { AssigneesList } from "components/ui/avatar"; import { CustomSearchSelect } from "components/ui";
import { Spinner } from "components/ui"; import { AssigneesList, Avatar } from "components/ui/avatar";
// icons
import { UserGroupIcon } from "@heroicons/react/24/outline";
// types // types
import { IIssue, UserAuth } from "types"; import { UserAuth } from "types";
// constants // fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<IIssue, any>; value: string[];
submitChanges: (formData: Partial<IIssue>) => void; onChange: (val: string[]) => void;
userAuth: UserAuth; userAuth: UserAuth;
}; };
export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => { export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug, projectId } = router.query;
const { data: people } = useSWR( const { data: members } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null workspaceSlug && projectId
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
: null
); );
const options =
members?.map((member) => ({
value: member.member.id,
query:
(member.member.first_name && member.member.first_name !== ""
? member.member.first_name
: member.member.email) +
" " +
member.member.last_name ?? "",
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
{member.member.first_name && member.member.first_name !== ""
? member.member.first_name
: member.member.email}
</div>
),
})) ?? [];
const isNotAllowed = userAuth.isGuest || userAuth.isViewer; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
@ -45,93 +61,24 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges,
<p>Assignees</p> <p>Assignees</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<Controller <CustomSearchSelect
control={control} value={value}
name="assignees_list" label={
render={({ field: { value } }) => ( <div className="flex items-center gap-2 text-gray-500">
<Listbox {value && value.length > 0 && Array.isArray(value) ? (
as="div" <div className="flex items-center justify-center gap-2">
value={value} <AssigneesList userIds={value} length={3} showLength={false} />
multiple={true} <span className="text-gray-500">{value.length} Assignees</span>
onChange={(value: any) => {
submitChanges({ assignees_list: value });
}}
className="flex-shrink-0"
disabled={isNotAllowed}
>
{({ open }) => (
<div className="relative">
<Listbox.Button
className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center gap-1 text-xs`}
>
<div className="flex items-center gap-1 text-xs">
{value && Array.isArray(value) ? (
<AssigneesList userIds={value} length={10} />
) : null}
</div>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
{people ? (
people.length > 0 ? (
people.map((option) => (
<Listbox.Option
key={option.member.id}
className={({ active, selected }) =>
`${active || selected ? "bg-indigo-50" : ""} ${
selected ? "font-medium" : ""
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
}
value={option.member.id}
>
{option.member.avatar && option.member.avatar !== "" ? (
<div className="relative h-4 w-4">
<Image
src={option.member.avatar}
alt="avatar"
className="rounded-full"
layout="fill"
objectFit="cover"
/>
</div>
) : (
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name.charAt(0)
: option.member.email.charAt(0)}
</div>
)}
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name
: option.member.email}
</Listbox.Option>
))
) : (
<div className="text-center">No assignees found</div>
)
) : (
<Spinner />
)}
</div>
</Listbox.Options>
</Transition>
</div> </div>
) : (
"No assignees"
)} )}
</Listbox> </div>
)} }
options={options}
onChange={onChange}
multiple
disabled={isNotAllowed}
/> />
</div> </div>
</div> </div>

27
apps/app/components/issues/sidebar-select/cycle.tsx
View File

@ -65,26 +65,21 @@ export const SidebarCycleSelect: React.FC<Props> = ({
<div className="space-y-1 sm:basis-1/2"> <div className="space-y-1 sm:basis-1/2">
<CustomSelect <CustomSelect
label={ label={
<Tooltip <span
position="top-right" className={`w-full max-w-[125px] truncate text-left sm:block ${
tooltipHeading="Cycle" issueCycle ? "" : "text-gray-900"
tooltipContent={issueCycle ? issueCycle.cycle_detail.name : "None"} }`}
> >
<span {issueCycle ? issueCycle.cycle_detail.name : "None"}
className={` w-full max-w-[125px] truncate text-left sm:block ${ </span>
issueCycle ? "" : "text-gray-900"
}`}
>
{issueCycle ? issueCycle.cycle_detail.name : "None"}
</span>
</Tooltip>
} }
value={issueCycle?.cycle_detail.id} value={issueCycle?.cycle_detail.id}
onChange={(value: any) => { onChange={(value: any) => {
value === null !value
? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "") ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
: handleCycleChange(cycles?.find((c) => c.id === value) as ICycle); : handleCycleChange(cycles?.find((c) => c.id === value) as ICycle);
}} }}
width="w-full"
disabled={isNotAllowed} disabled={isNotAllowed}
> >
{cycles ? ( {cycles ? (
@ -97,11 +92,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
</Tooltip> </Tooltip>
</CustomSelect.Option> </CustomSelect.Option>
))} ))}
<CustomSelect.Option value={null} className="capitalize"> <CustomSelect.Option value={null}>None</CustomSelect.Option>
<Tooltip position="left-bottom" tooltipContent="None">
<span className="w-full max-w-[125px] truncate">None</span>
</Tooltip>
</CustomSelect.Option>
</> </>
) : ( ) : (
<div className="text-center">No cycles found</div> <div className="text-center">No cycles found</div>

27
apps/app/components/issues/sidebar-select/module.tsx
View File

@ -64,26 +64,21 @@ export const SidebarModuleSelect: React.FC<Props> = ({
<div className="space-y-1 sm:basis-1/2"> <div className="space-y-1 sm:basis-1/2">
<CustomSelect <CustomSelect
label={ label={
<Tooltip <span
position="top-right" className={`w-full max-w-[125px] truncate text-left sm:block ${
tooltipHeading="Module" issueModule ? "" : "text-gray-900"
tooltipContent={modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"} }`}
> >
<span {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
className={`w-full max-w-[125px] truncate text-left sm:block ${ </span>
issueModule ? "" : "text-gray-900"
}`}
>
{modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
</span>
</Tooltip>
} }
value={issueModule?.module_detail?.id} value={issueModule?.module_detail?.id}
onChange={(value: any) => { onChange={(value: any) => {
value === null !value
? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "") ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
: handleModuleChange(modules?.find((m) => m.id === value) as IModule); : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
}} }}
width="w-full"
disabled={isNotAllowed} disabled={isNotAllowed}
> >
{modules ? ( {modules ? (
@ -96,11 +91,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
</Tooltip> </Tooltip>
</CustomSelect.Option> </CustomSelect.Option>
))} ))}
<CustomSelect.Option value={null} className="capitalize"> <CustomSelect.Option value={null}>None</CustomSelect.Option>
<Tooltip position="left-bottom" tooltipContent="None">
<span className="w-full max-w-[125px] truncate"> None </span>
</Tooltip>
</CustomSelect.Option>
</> </>
) : ( ) : (
<div className="text-center">No modules found</div> <div className="text-center">No modules found</div>

65
apps/app/components/issues/sidebar-select/priority.tsx
View File

@ -1,24 +1,22 @@
import React from "react"; import React from "react";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect } from "components/ui";
// icons // icons
import { ChartBarIcon } from "@heroicons/react/24/outline"; import { ChartBarIcon } from "@heroicons/react/24/outline";
import { getPriorityIcon } from "components/icons/priority-icon"; import { getPriorityIcon } from "components/icons/priority-icon";
// types // types
import { IIssue, UserAuth } from "types"; import { UserAuth } from "types";
// constants // constants
import { PRIORITIES } from "constants/project"; import { PRIORITIES } from "constants/project";
type Props = { type Props = {
control: Control<IIssue, any>; value: string | null;
submitChanges: (formData: Partial<IIssue>) => void; onChange: (val: string) => void;
userAuth: UserAuth; userAuth: UserAuth;
}; };
export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => { export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
const isNotAllowed = userAuth.isGuest || userAuth.isViewer; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
@ -28,38 +26,31 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges,
<p>Priority</p> <p>Priority</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<Controller <CustomSelect
control={control} label={
name="priority" <span
render={({ field: { value } }) => ( className={`flex items-center gap-2 text-left capitalize ${
<CustomSelect value ? "" : "text-gray-900"
label={ }`}
<span
className={`flex items-center gap-2 text-left capitalize ${
value ? "" : "text-gray-900"
}`}
>
{getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
{value && value !== "" ? value : "None"}
</span>
}
value={value}
onChange={(value: any) => {
submitChanges({ priority: value });
}}
disabled={isNotAllowed}
> >
{PRIORITIES.map((option) => ( {getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
<CustomSelect.Option key={option} value={option} className="capitalize"> {value && value !== "" ? value : "None"}
<> </span>
{getPriorityIcon(option, "text-sm")} }
{option ?? "None"} value={value}
</> onChange={onChange}
</CustomSelect.Option> width="w-full"
))} disabled={isNotAllowed}
</CustomSelect> >
)} {PRIORITIES.map((option) => (
/> <CustomSelect.Option key={option} value={option} className="capitalize">
<>
{getPriorityIcon(option, "text-sm")}
{option ?? "None"}
</>
</CustomSelect.Option>
))}
</CustomSelect>
</div> </div>
</div> </div>
); );

98
apps/app/components/issues/sidebar-select/state.tsx
View File

@ -4,28 +4,28 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// services // services
import stateService from "services/state.service"; import stateService from "services/state.service";
// ui // ui
import { Spinner, CustomSelect } from "components/ui"; import { Spinner, CustomSelect } from "components/ui";
// icons // icons
import { Squares2X2Icon } from "@heroicons/react/24/outline"; import { Squares2X2Icon } from "@heroicons/react/24/outline";
import { getStateGroupIcon } from "components/icons";
// helpers // helpers
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
import { addSpaceIfCamelCase } from "helpers/string.helper";
// types // types
import { IIssue, UserAuth } from "types"; import { UserAuth } from "types";
// constants // constants
import { STATE_LIST } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<IIssue, any>; value: string;
submitChanges: (formData: Partial<IIssue>) => void; onChange: (val: string) => void;
userAuth: UserAuth; userAuth: UserAuth;
}; };
export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => { export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -37,6 +37,8 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
); );
const states = getStatesList(stateGroups ?? {}); const states = getStatesList(stateGroups ?? {});
const selectedState = states?.find((s) => s.id === value);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
@ -46,60 +48,40 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
<p>State</p> <p>State</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<Controller <CustomSelect
control={control} label={
name="state" <div className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`}>
render={({ field: { value } }) => ( {getStateGroupIcon(
<CustomSelect selectedState?.group ?? "backlog",
label={ "16",
<span "16",
className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`} selectedState?.color ?? ""
>
{value ? (
<>
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: states?.find((option) => option.id === value)?.color,
}}
/>
{states?.find((option) => option.id === value)?.name}
</>
) : (
"None"
)}
</span>
}
value={value}
onChange={(value: any) => {
submitChanges({ state: value });
}}
disabled={isNotAllowed}
>
{states ? (
states.length > 0 ? (
states.map((option) => (
<CustomSelect.Option key={option.id} value={option.id}>
<>
{option.color && (
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{ backgroundColor: option.color }}
/>
)}
{option.name}
</>
</CustomSelect.Option>
))
) : (
<div className="text-center">No states found</div>
)
) : (
<Spinner />
)} )}
</CustomSelect> {addSpaceIfCamelCase(selectedState?.name ?? "")}
</div>
}
value={value}
onChange={onChange}
width="w-full"
disabled={isNotAllowed}
>
{states ? (
states.length > 0 ? (
states.map((state) => (
<CustomSelect.Option key={state.id} value={state.id}>
<>
{getStateGroupIcon(state.group, "16", "16", state.color)}
{state.name}
</>
</CustomSelect.Option>
))
) : (
<div className="text-center">No states found</div>
)
) : (
<Spinner />
)} )}
/> </CustomSelect>
</div> </div>
</div> </div>
); );

36
apps/app/components/issues/sidebar.tsx
View File

@ -243,20 +243,38 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
</div> </div>
<div className="divide-y-2 divide-gray-100"> <div className="divide-y-2 divide-gray-100">
<div className="py-1"> <div className="py-1">
<SidebarStateSelect <Controller
control={control} control={control}
submitChanges={submitChanges} name="state"
userAuth={userAuth} render={({ field: { value } }) => (
<SidebarStateSelect
value={value}
onChange={(val: string) => submitChanges({ state: val })}
userAuth={userAuth}
/>
)}
/> />
<SidebarAssigneeSelect <Controller
control={control} control={control}
submitChanges={submitChanges} name="assignees_list"
userAuth={userAuth} render={({ field: { value } }) => (
<SidebarAssigneeSelect
value={value}
onChange={(val: string[]) => submitChanges({ assignees_list: val })}
userAuth={userAuth}
/>
)}
/> />
<SidebarPrioritySelect <Controller
control={control} control={control}
submitChanges={submitChanges} name="priority"
userAuth={userAuth} render={({ field: { value } }) => (
<SidebarPrioritySelect
value={value}
onChange={(val: string) => submitChanges({ priority: val })}
userAuth={userAuth}
/>
)}
/> />
</div> </div>
<div className="py-1"> <div className="py-1">

78
apps/app/components/issues/view-select/assignee.tsx
View File

@ -4,17 +4,16 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// services // services
import projectService from "services/project.service"; import projectService from "services/project.service";
// ui // ui
import { AssigneesList, Avatar, CustomSearchSelect, Tooltip } from "components/ui"; import { AssigneesList, Avatar, CustomSearchSelect, Tooltip } from "components/ui";
// icons
import { UserGroupIcon } from "@heroicons/react/24/outline";
// types // types
import { IIssue } from "types"; import { IIssue } from "types";
// fetch-keys // fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
import { UserGroupIcon } from "@heroicons/react/24/outline";
type Props = { type Props = {
issue: IIssue; issue: IIssue;
@ -112,78 +111,5 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
position={position} position={position}
disabled={isNotAllowed} disabled={isNotAllowed}
/> />
// <Listbox
// as="div"
// value={issue.assignees}
// onChange={(data: any) => {
// const newData = issue.assignees ?? [];
// if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
// else newData.push(data);
// partialUpdateIssue({ assignees_list: newData });
// }}
// className={`group ${!selfPositioned ? "relative" : ""} flex-shrink-0`}
// disabled={isNotAllowed}
// >
// {({ open }) => (
// <div>
// <Listbox.Button>
// <Tooltip
// position={`top-${tooltipPosition}`}
// tooltipHeading="Assignees"
// tooltipContent={
// issue.assignee_details.length > 0
// ? issue.assignee_details
// .map((assignee) =>
// assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
// )
// .join(", ")
// : "No Assignee"
// }
// >
// <div
// className={`flex ${
// isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
// } items-center gap-1 text-xs`}
// >
// <AssigneesList userIds={issue.assignees ?? []} />
// </div>
// </Tooltip>
// </Listbox.Button>
// <Transition
// show={open}
// as={React.Fragment}
// leave="transition ease-in duration-100"
// leaveFrom="opacity-100"
// leaveTo="opacity-0"
// >
// <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 min-w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
// {members?.map((member) => (
// <Listbox.Option
// key={member.member.id}
// className={({ active, selected }) =>
// `flex cursor-pointer select-none items-center gap-x-1 whitespace-nowrap p-2 ${
// active ? "bg-indigo-50" : ""
// } ${
// selected || issue.assignees?.includes(member.member.id)
// ? "bg-indigo-50 font-medium"
// : "font-normal"
// }`
// }
// value={member.member.id}
// >
// <Avatar user={member.member} />
// {member.member.first_name && member.member.first_name !== ""
// ? member.member.first_name
// : member.member.email}
// </Listbox.Option>
// ))}
// </Listbox.Options>
// </Transition>
// </div>
// )}
// </Listbox>
); );
}; };

66
apps/app/components/issues/view-select/state.tsx
View File

@ -5,7 +5,9 @@ import useSWR from "swr";
// services // services
import stateService from "services/state.service"; import stateService from "services/state.service";
// ui // ui
import { CustomSelect, Tooltip } from "components/ui"; import { CustomSearchSelect, Tooltip } from "components/ui";
// icons
import { getStateGroupIcon } from "components/icons";
// helpers // helpers
import { addSpaceIfCamelCase } from "helpers/string.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper";
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
@ -13,7 +15,6 @@ import { getStatesList } from "helpers/state.helper";
import { IIssue } from "types"; import { IIssue } from "types";
// fetch-keys // fetch-keys
import { STATE_LIST } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
import { getStateGroupIcon } from "components/icons";
type Props = { type Props = {
issue: IIssue; issue: IIssue;
@ -41,42 +42,39 @@ export const ViewStateSelect: React.FC<Props> = ({
); );
const states = getStatesList(stateGroups ?? {}); const states = getStatesList(stateGroups ?? {});
const currentState = states?.find((s) => s.id === issue.state); const options = states?.map((state) => ({
value: state.id,
query: state.name,
content: (
<div className="flex items-center gap-2">
{getStateGroupIcon(state.group, "16", "16", state.color)}
{state.name}
</div>
),
}));
const selectedOption = states?.find((s) => s.id === issue.state);
return ( return (
<CustomSelect <CustomSearchSelect
label={
<>
{getStateGroupIcon(
currentState?.group ?? "backlog",
"16",
"16",
currentState?.color ?? ""
)}
<Tooltip
tooltipHeading="State"
tooltipContent={addSpaceIfCamelCase(currentState?.name ?? "")}
>
<span>{addSpaceIfCamelCase(currentState?.name ?? "")}</span>
</Tooltip>
</>
}
value={issue.state} value={issue.state}
onChange={(data: string) => partialUpdateIssue({ state: data })} onChange={(data: string) => partialUpdateIssue({ state: data })}
maxHeight="md" options={options}
noChevron label={
disabled={isNotAllowed} <Tooltip
tooltipHeading="State"
tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
>
<div className="flex items-center gap-2 text-gray-500">
{selectedOption &&
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
{selectedOption?.name ?? "State"}
</div>
</Tooltip>
}
position={position} position={position}
selfPositioned={selfPositioned} disabled={isNotAllowed}
> noChevron
{states?.map((state) => ( />
<CustomSelect.Option key={state.id} value={state.id}>
<>
{getStateGroupIcon(state.group, "16", "16", state.color)}
{addSpaceIfCamelCase(state.name)}
</>
</CustomSelect.Option>
))}
</CustomSelect>
); );
}; };

190
apps/app/components/modules/sidebar-select/select-lead.tsx
View File

@ -5,35 +5,53 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// services // services
import workspaceService from "services/workspace.service"; import projectService from "services/project.service";
// ui
import { Avatar, CustomSearchSelect } from "components/ui";
// icons // icons
import { UserIcon } from "@heroicons/react/24/outline"; import { UserIcon } from "@heroicons/react/24/outline";
import User from "public/user.png"; import User from "public/user.png";
// types
import { IModule, IUserLite } from "types";
// fetch-keys // fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<Partial<IModule>, any>; value: string | null | undefined;
submitChanges: (formData: Partial<IModule>) => void; onChange: (val: string) => void;
lead: IUserLite | null;
}; };
export const SidebarLeadSelect: React.FC<Props> = ({ control, submitChanges, lead }) => { export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug, projectId } = router.query;
const { data: people } = useSWR( const { data: members } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null workspaceSlug && projectId
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
: null
); );
const options =
members?.map((member) => ({
value: member.member.id,
query:
(member.member.first_name && member.member.first_name !== ""
? member.member.first_name
: member.member.email) +
" " +
member.member.last_name ?? "",
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
{member.member.first_name && member.member.first_name !== ""
? member.member.first_name
: member.member.email}
</div>
),
})) ?? [];
const selectedOption = members?.find((m) => m.member.id === value)?.member;
return ( return (
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -41,124 +59,32 @@ export const SidebarLeadSelect: React.FC<Props> = ({ control, submitChanges, lea
<p>Lead</p> <p>Lead</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<Controller <CustomSearchSelect
control={control} value={value}
name="lead" label={
render={({ field: { value } }) => ( <div className="flex items-center gap-2 text-gray-500">
<Listbox {selectedOption ? (
as="div" <Avatar user={selectedOption} />
value={value} ) : (
onChange={(value: any) => { <div className="h-5 w-5 rounded-full border-2 border-transparent bg-white">
submitChanges({ lead: value }); <Image
}} src={User}
className="flex-shrink-0" height="100%"
> width="100%"
{({ open }) => ( className="rounded-full"
<div className="relative"> alt="No user"
<Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs"> />
<span
className={`hidden truncate text-left sm:block ${
value ? "" : "text-gray-900"
}`}
>
<div className="flex items-center gap-1 text-xs">
{lead ? (
lead.avatar && lead.avatar !== "" ? (
<div className="h-5 w-5 rounded-full border-2 border-transparent">
<Image
src={lead.avatar}
height="100%"
width="100%"
className="rounded-full"
alt={lead?.first_name}
/>
</div>
) : (
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
{lead?.first_name && lead.first_name !== ""
? lead.first_name.charAt(0)
: lead?.email.charAt(0)}
</div>
)
) : (
<div className="h-5 w-5 rounded-full border-2 border-white bg-white">
<Image
src={User}
height="100%"
width="100%"
className="rounded-full"
alt="No user"
/>
</div>
)}
{lead
? lead?.first_name && lead.first_name !== ""
? lead?.first_name
: lead?.email
: "N/A"}
</div>
</span>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
{people ? (
people.length > 0 ? (
people.map((option) => (
<Listbox.Option
key={option.member.id}
className={({ active, selected }) =>
`${
active || selected ? "bg-indigo-50" : ""
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
}
value={option.member.id}
>
{option.member.avatar && option.member.avatar !== "" ? (
<div className="relative h-4 w-4">
<Image
src={option.member.avatar}
alt="avatar"
className="rounded-full"
layout="fill"
objectFit="cover"
/>
</div>
) : (
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name.charAt(0)
: option.member.email.charAt(0)}
</div>
)}
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name
: option.member.email}
</Listbox.Option>
))
) : (
<div className="text-center">No members found</div>
)
) : (
<p className="text-xs text-gray-500 px-2">Loading...</p>
)}
</div>
</Listbox.Options>
</Transition>
</div> </div>
)} )}
</Listbox> {selectedOption
)} ? selectedOption?.first_name && selectedOption.first_name !== ""
? selectedOption?.first_name
: selectedOption?.email
: "N/A"}
</div>
}
options={options}
onChange={onChange}
/> />
</div> </div>
</div> </div>

153
apps/app/components/modules/sidebar-select/select-members.tsx
View File

@ -1,37 +1,53 @@
import React from "react"; import React from "react";
import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
import { Control, Controller } from "react-hook-form";
// services // services
import { Listbox, Transition } from "@headlessui/react"; import projectService from "services/project.service";
import { UserGroupIcon } from "@heroicons/react/24/outline";
import workspaceService from "services/workspace.service";
// headless ui
// ui // ui
import { AssigneesList } from "components/ui"; import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
// types // icons
import { IModule } from "types"; import { UserGroupIcon } from "@heroicons/react/24/outline";
// constants // fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<Partial<IModule>, any>; value: string[] | undefined;
submitChanges: (formData: Partial<IModule>) => void; onChange: (val: string[]) => void;
}; };
export const SidebarMembersSelect: React.FC<Props> = ({ control, submitChanges }) => { export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug, projectId } = router.query;
const { data: people } = useSWR( const { data: members } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null workspaceSlug && projectId
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
: null
); );
const options =
members?.map((member) => ({
value: member.member.id,
query:
(member.member.first_name && member.member.first_name !== ""
? member.member.first_name
: member.member.email) +
" " +
member.member.last_name ?? "",
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
{member.member.first_name && member.member.first_name !== ""
? member.member.first_name
: member.member.email}
</div>
),
})) ?? [];
return ( return (
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -39,94 +55,23 @@ export const SidebarMembersSelect: React.FC<Props> = ({ control, submitChanges }
<p>Members</p> <p>Members</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<Controller <CustomSearchSelect
control={control} value={value}
name="members_list" label={
render={({ field: { value } }) => ( <div className="flex items-center gap-2 text-gray-500">
<Listbox {value && value.length > 0 && Array.isArray(value) ? (
as="div" <div className="flex items-center justify-center gap-2">
value={value} <AssigneesList userIds={value} length={3} showLength={false} />
multiple={true} <span className="text-gray-500">{value.length} Assignees</span>
onChange={(value: any) => {
submitChanges({ members_list: value });
}}
className="flex-shrink-0"
>
{({ open }) => (
<div className="relative">
<Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
<span
className={`hidden truncate text-left sm:block ${
value ? "" : "text-gray-900"
}`}
>
<div className="flex cursor-pointer items-center gap-1 text-xs">
{value && Array.isArray(value) ? (
<AssigneesList userIds={value} length={10} />
) : null}
</div>
</span>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-full">
<div className="py-1">
{people ? (
people.length > 0 ? (
people.map((option) => (
<Listbox.Option
key={option.member.id}
className={({ active, selected }) =>
`${
active || selected ? "bg-indigo-50" : ""
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
}
value={option.member.id}
>
{option.member.avatar && option.member.avatar !== "" ? (
<div className="relative h-4 w-4">
<Image
src={option.member.avatar}
alt="avatar"
className="rounded-full"
layout="fill"
objectFit="cover"
/>
</div>
) : (
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name.charAt(0)
: option.member.email.charAt(0)}
</div>
)}
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name
: option.member.email}
</Listbox.Option>
))
) : (
<div className="text-center">No members found</div>
)
) : (
<p className="text-xs text-gray-500 px-2">Loading...</p>
)}
</div>
</Listbox.Options>
</Transition>
</div> </div>
) : (
"No members"
)} )}
</Listbox> </div>
)} }
options={options}
onChange={onChange}
multiple
/> />
</div> </div>
</div> </div>

42
apps/app/components/modules/sidebar.tsx
View File

@ -1,6 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { mutate } from "swr"; import { mutate } from "swr";
@ -19,7 +18,6 @@ import {
import { Popover, Transition } from "@headlessui/react"; import { Popover, Transition } from "@headlessui/react";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
// services // services
import modulesService from "services/modules.service"; import modulesService from "services/modules.service";
// hooks // hooks
@ -184,7 +182,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
> >
{module ? ( {module ? (
<> <>
<div className="flex gap-1 text-sm my-2"> <div className="my-2 flex gap-1 text-sm">
<div className="flex items-center "> <div className="flex items-center ">
<Controller <Controller
control={control} control={control}
@ -193,7 +191,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<CustomSelect <CustomSelect
label={ label={
<span <span
className={`flex items-center gap-1 text-left capitalize p-1 text-xs h-full w-full text-gray-900`} className={`flex h-full w-full items-center gap-1 p-1 text-left text-xs capitalize text-gray-900`}
> >
<Squares2X2Icon className="h-4 w-4 flex-shrink-0" /> <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
{watch("status")} {watch("status")}
@ -213,14 +211,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
)} )}
/> />
</div> </div>
<div className="flex justify-center items-center gap-2 rounded-md border bg-transparent h-full p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none"> <div className="flex h-full items-center justify-center gap-2 rounded-md border bg-transparent p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
<Popover className="flex justify-center items-center relative rounded-lg"> <Popover className="relative flex items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button
className={`group flex items-center ${open ? "bg-gray-100" : ""}`} className={`group flex items-center ${open ? "bg-gray-100" : ""}`}
> >
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0 mr-2" /> <CalendarDaysIcon className="mr-2 h-4 w-4 flex-shrink-0" />
<span> <span>
{renderShortNumericDateFormat(`${module?.start_date}`) {renderShortNumericDateFormat(`${module?.start_date}`)
? renderShortNumericDateFormat(`${module?.start_date}`) ? renderShortNumericDateFormat(`${module?.start_date}`)
@ -256,7 +254,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</> </>
)} )}
</Popover> </Popover>
<Popover className="flex justify-center items-center relative rounded-lg"> <Popover className="relative flex items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button
@ -338,12 +336,30 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div> </div>
<div className="divide-y-2 divide-gray-100 text-xs"> <div className="divide-y-2 divide-gray-100 text-xs">
<div className="py-1"> <div className="py-1">
<SidebarLeadSelect <Controller
control={control} control={control}
submitChanges={submitChanges} name="lead"
lead={module.lead_detail} render={({ field: { value } }) => (
<SidebarLeadSelect
value={value}
onChange={(val: string) => {
submitChanges({ lead: val });
}}
/>
)}
/>
<Controller
control={control}
name="members_list"
render={({ field: { value } }) => (
<SidebarMembersSelect
value={value}
onChange={(val: string[]) => {
submitChanges({ members_list: val });
}}
/>
)}
/> />
<SidebarMembersSelect control={control} submitChanges={submitChanges} />
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<ChartPieIcon className="h-4 w-4 flex-shrink-0" /> <ChartPieIcon className="h-4 w-4 flex-shrink-0" />
@ -363,7 +379,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-center w-full gap-2"> <div className="flex w-full flex-col items-center justify-center gap-2">
{isStartValid && isEndValid ? ( {isStartValid && isEndValid ? (
<ProgressChart <ProgressChart
issues={issues} issues={issues}

105
apps/app/components/project/send-project-invitation-modal.tsx
View File

@ -6,9 +6,8 @@ import useSWR, { mutate } from "swr";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { Dialog, Transition, Listbox } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// ui // ui
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { Button, CustomSelect, TextArea } from "components/ui"; import { Button, CustomSelect, TextArea } from "components/ui";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
@ -17,7 +16,7 @@ import projectService from "services/project.service";
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
// types // types
import { IProjectMemberInvitation } from "types"; import { IProjectMemberInvitation } from "types";
// fetch - keys // fetch-keys
import { PROJECT_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { PROJECT_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
// constants // constants
import { ROLE } from "constants/workspace"; import { ROLE } from "constants/workspace";
@ -130,7 +129,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-5"> <div className="space-y-5">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900"> <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
@ -148,77 +147,36 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
name="user_id" name="user_id"
rules={{ required: "Please select a member" }} rules={{ required: "Please select a member" }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<Listbox <CustomSelect
value={value} value={value}
onChange={(data: any) => { label={
onChange(data.id); <div
setValue("member_id", data.id); className={`${errors.user_id ? "border-red-500 bg-red-50" : ""}`}
setValue("email", data.email); >
}} {value && value !== ""
> ? people?.find((p) => p.member.id === value)?.member.email
{({ open }) => ( : "Select email"}
<> </div>
<Listbox.Label className="mb-2 text-gray-500"> }
Email onChange={(val: string) => {
</Listbox.Label> onChange(val);
<div className="relative"> const person = uninvitedPeople?.find((p) => p.member.id === val);
<Listbox.Button
className={`relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm ${
errors.user_id ? "border-red-500 bg-red-50" : ""
}`}
>
<span className="block truncate">
{value && value !== ""
? people?.find((p) => p.member.id === value)?.member.email
: "Select email"}
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDownIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition setValue("member_id", val);
show={open} setValue("email", person?.member.email ?? "");
as={React.Fragment} }}
leave="transition ease-in duration-100" input
leaveFrom="opacity-100" width="w-full"
leaveTo="opacity-0" >
> {uninvitedPeople?.map((person) => (
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"> <CustomSelect.Option
{uninvitedPeople?.length === 0 ? ( key={person.member.id}
<div className="relative cursor-default select-none py-2 pl-3 pr-9 text-left text-gray-600"> value={person.member.id}
Invite to workspace to add members >
</div> {person.member.email}
) : ( </CustomSelect.Option>
uninvitedPeople?.map((person) => ( ))}
<Listbox.Option </CustomSelect>
key={person.member.id}
className={({ active, selected }) =>
`${active ? "bg-indigo-50" : ""} ${
selected ? "bg-indigo-50 font-medium" : ""
} cursor-default select-none p-2 text-gray-900`
}
value={{
id: person.member.id,
email: person.member.email,
}}
>
{person.member.email}
</Listbox.Option>
))
)}
</Listbox.Options>
</Transition>
</div>
<p className="text-sm text-red-400">
{errors.user_id && errors.user_id.message}
</p>
</>
)}
</Listbox>
)} )}
/> />
</div> </div>
@ -236,6 +194,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
</span> </span>
} }
input input
width="w-full"
> >
{Object.entries(ROLE).map(([key, label]) => ( {Object.entries(ROLE).map(([key, label]) => (
<CustomSelect.Option key={key} value={key}> <CustomSelect.Option key={key} value={key}>

2
apps/app/components/ui/avatar.tsx
View File

@ -34,7 +34,7 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
/> />
</div> </div>
) : ( ) : (
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 text-white capitalize"> <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white">
{user?.first_name && user.first_name !== "" {user?.first_name && user.first_name !== ""
? user.first_name.charAt(0) ? user.first_name.charAt(0)
: user?.email?.charAt(0)} : user?.email?.charAt(0)}

14
apps/app/components/ui/context-menu.tsx
View File

@ -20,20 +20,12 @@ const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) =>
}; };
window.addEventListener("click", hideContextMenu); window.addEventListener("click", hideContextMenu);
window.addEventListener("keydown", (e: KeyboardEvent) => {
if (e.key === "Escape") hideContextMenu();
});
return () => { return () => {
window.removeEventListener("click", hideContextMenu); window.removeEventListener("click", hideContextMenu);
};
}, [isOpen, setIsOpen]);
useEffect(() => {
const hideContextMenu = (e: KeyboardEvent) => {
if (e.key === "Escape" && isOpen) setIsOpen(false);
};
window.addEventListener("keydown", hideContextMenu);
return () => {
window.removeEventListener("keydown", hideContextMenu); window.removeEventListener("keydown", hideContextMenu);
}; };
}, [isOpen, setIsOpen]); }, [isOpen, setIsOpen]);

30
apps/app/components/ui/custom-search-select.tsx
View File

@ -16,7 +16,6 @@ type CustomSearchSelectProps = {
label?: string | JSX.Element; label?: string | JSX.Element;
textAlignment?: "left" | "center" | "right"; textAlignment?: "left" | "center" | "right";
position?: "right" | "left"; position?: "right" | "left";
input?: boolean;
noChevron?: boolean; noChevron?: boolean;
customButton?: JSX.Element; customButton?: JSX.Element;
optionsClassName?: string; optionsClassName?: string;
@ -33,7 +32,6 @@ export const CustomSearchSelect = ({
onChange, onChange,
options, options,
position = "left", position = "left",
input = false,
noChevron = false, noChevron = false,
customButton, customButton,
optionsClassName = "", optionsClassName = "",
@ -69,9 +67,7 @@ export const CustomSearchSelect = ({
<Combobox.Button <Combobox.Button
className={`flex w-full ${ className={`flex w-full ${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100" disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${ } items-center justify-between gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
input ? "border-gray-300 px-3 py-2 text-sm" : "px-3 py-1.5 text-xs"
} ${
textAlignment === "right" textAlignment === "right"
? "text-right" ? "text-right"
: textAlignment === "center" : textAlignment === "center"
@ -99,9 +95,7 @@ export const CustomSearchSelect = ({
<Combobox.Options <Combobox.Options
className={`${optionsClassName} absolute min-w-[10rem] p-2 ${ className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
position === "right" ? "right-0" : "left-0" position === "right" ? "right-0" : "left-0"
} z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${ } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
input ? "max-h-48" : ""
}`}
> >
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2"> <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" /> <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
@ -142,10 +136,10 @@ export const CustomSearchSelect = ({
</Combobox.Option> </Combobox.Option>
)) ))
) : ( ) : (
<p className="text-xs text-gray-500">No matching results</p> <p className="text-center text-gray-500">No matching results</p>
) )
) : ( ) : (
<p className="text-xs text-gray-500">Loading...</p> <p className="text-center text-gray-500">Loading...</p>
)} )}
</div> </div>
{footerOption} {footerOption}
@ -170,9 +164,7 @@ export const CustomSearchSelect = ({
<Combobox.Button <Combobox.Button
className={`flex w-full ${ className={`flex w-full ${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100" disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${ } items-center justify-between gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
input ? "border-gray-300 px-3 py-2 text-sm" : "px-3 py-1.5 text-xs"
} ${
textAlignment === "right" textAlignment === "right"
? "text-right" ? "text-right"
: textAlignment === "center" : textAlignment === "center"
@ -200,20 +192,18 @@ export const CustomSearchSelect = ({
<Combobox.Options <Combobox.Options
className={`${optionsClassName} absolute min-w-[10rem] p-2 ${ className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
position === "right" ? "right-0" : "left-0" position === "right" ? "right-0" : "left-0"
} z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${ } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
input ? "max-h-48" : ""
}`}
> >
<div className="flex w-full items-center justify-start rounded-sm border bg-gray-100 px-2 text-gray-500"> <div className="flex w-full items-center justify-start rounded-sm border bg-gray-100 px-2 text-gray-500">
<MagnifyingGlassIcon className="h-3 w-3" /> <MagnifyingGlassIcon className="h-3 w-3" />
<Combobox.Input <Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs focus:outline-none" className="w-full bg-transparent py-1 px-2 text-xs focus:outline-none"
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
placeholder="Type to search..." placeholder="Type to search..."
displayValue={(assigned: any) => assigned?.name} displayValue={(assigned: any) => assigned?.name}
/> />
</div> </div>
<div className="mt-2"> <div className="mt-2 space-y-1">
{filteredOptions ? ( {filteredOptions ? (
filteredOptions.length > 0 ? ( filteredOptions.length > 0 ? (
filteredOptions.map((option) => ( filteredOptions.map((option) => (
@ -235,10 +225,10 @@ export const CustomSearchSelect = ({
</Combobox.Option> </Combobox.Option>
)) ))
) : ( ) : (
<p className="text-gray-500">No matching results</p> <p className="text-center text-gray-500">No matching results</p>
) )
) : ( ) : (
<p className="text-gray-500">Loading...</p> <p className="text-center text-gray-500">Loading...</p>
)} )}
</div> </div>
{footerOption} {footerOption}

8
apps/app/components/ui/datepicker.tsx
View File

@ -36,15 +36,15 @@ export const CustomDatePicker: React.FC<Props> = ({
}} }}
className={`${className} ${ className={`${className} ${
renderAs === "input" renderAs === "input"
? "block bg-transparent text-sm focus:outline-none border-gray-300 px-3 py-2" ? "block border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none"
: renderAs === "button" : renderAs === "button"
? `px-2 py-1 text-xs shadow-sm ${ ? `px-3 py-1.5 text-xs shadow-sm ${
disabled ? "" : "hover:bg-gray-100" disabled ? "" : "hover:bg-gray-100"
} focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 duration-300` } duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`
: "" : ""
} ${error ? "border-red-500 bg-red-100" : ""} ${ } ${error ? "border-red-500 bg-red-100" : ""} ${
disabled ? "cursor-not-allowed" : "cursor-pointer" disabled ? "cursor-not-allowed" : "cursor-pointer"
} w-full rounded-md bg-transparent border caret-transparent`} } w-full rounded-md border bg-transparent caret-transparent`}
dateFormat="dd-MM-yyyy" dateFormat="dd-MM-yyyy"
isClearable={isClearable} isClearable={isClearable}
disabled={disabled} disabled={disabled}