thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: new avatar and avatar group components (#2584)

Browse Source 
* style: new avatar components

* chore: bug fixes

* chore: add pixel to size

* chore: add comments to helper functions

* fix: build errors
This commit is contained in:
Aaryan Khandelwal 2023-11-01 15:24:11 +05:30 committed by GitHub
parent 1a24f9ec25
commit 490e032ac6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 554 additions and 1824 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/package.json
View File

@ -10,8 +10,8 @@
"dist/**"
],
"scripts": {
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
"dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
"build": "tsup src/index.ts --format esm,cjs --dts --external react",
"dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
"lint": "eslint src/",
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
},

85
packages/ui/src/avatar/avatar-group.tsx Normal file
View File

@ -0,0 +1,85 @@
import React from "react";
// ui
import { Tooltip } from "../tooltip";
// types
import { TAvatarSize, getSizeInfo, isAValidNumber } from "./avatar";
type Props = {
/**
* The children of the avatar group.
* These should ideally should be `Avatar` components
*/
children: React.ReactNode;
/**
* The maximum number of avatars to display.
* If the number of children exceeds this value, the additional avatars will be replaced by a count of the remaining avatars.
* @default 2
*/
max?: number;
/**
* Whether to show the tooltip or not
* @default true
*/
showTooltip?: boolean;
/**
* The size of the avatars
* Possible values: "sm", "md", "base", "lg"
* @default "md"
*/
size?: TAvatarSize;
};
export const AvatarGroup: React.FC<Props> = (props) => {
const { children, max = 2, showTooltip = true, size = "md" } = props;
// calculate total length of avatars inside the group
const totalAvatars = React.Children.toArray(children).length;
// slice the children to the maximum number of avatars
const avatars = React.Children.toArray(children).slice(0, max);
// assign the necessary props from the AvatarGroup component to the Avatar components
const avatarsWithUpdatedProps = avatars.map((avatar) => {
const updatedProps: Partial<Props> = {
showTooltip,
size,
};
return React.cloneElement(avatar as React.ReactElement, updatedProps);
});
// get size details based on the size prop
const sizeInfo = getSizeInfo(size);
return (
<div className={`flex ${sizeInfo.spacing}`}>
{avatarsWithUpdatedProps.map((avatar, index) => (
<div key={index} className="ring-1 ring-custom-border-200 rounded-full">
{avatar}
</div>
))}
{max < totalAvatars && (
<Tooltip
tooltipContent={`${totalAvatars} total`}
disabled={!showTooltip}
>
<div
className={`${
!isAValidNumber(size) ? sizeInfo.avatarSize : ""
} ring-1 ring-custom-border-200 bg-custom-primary-500 text-white rounded-full grid place-items-center text-[9px]`}
style={
isAValidNumber(size)
? {
width: `${size}px`,
height: `${size}px`,
}
: {}
}
>
+{totalAvatars - max}
</div>
</Tooltip>
)}
</div>
);
};

168
packages/ui/src/avatar/avatar.tsx Normal file
View File

@ -0,0 +1,168 @@
import React from "react";
// ui
import { Tooltip } from "../tooltip";
export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
type Props = {
/**
* The name of the avatar which will be displayed on the tooltip
*/
name?: string;
/**
* The background color if the avatar image fails to load
*/
fallbackBackgroundColor?: string;
/**
* The text to display if the avatar image fails to load
*/
fallbackText?: string;
/**
* The text color if the avatar image fails to load
*/
fallbackTextColor?: string;
/**
* Whether to show the tooltip or not
* @default true
*/
showTooltip?: boolean;
/**
* The size of the avatars
* Possible values: "sm", "md", "base", "lg"
* @default "md"
*/
size?: TAvatarSize;
/**
* The shape of the avatar
* Possible values: "circle", "square"
* @default "circle"
*/
shape?: "circle" | "square";
/**
* The source of the avatar image
*/
src?: string;
};
/**
* Get the size details based on the size prop
* @param size The size of the avatar
* @returns The size details
*/
export const getSizeInfo = (size: TAvatarSize) => {
switch (size) {
case "sm":
return {
avatarSize: "h-4 w-4",
fontSize: "text-xs",
spacing: "-space-x-1",
};
case "md":
return {
avatarSize: "h-5 w-5",
fontSize: "text-xs",
spacing: "-space-x-1",
};
case "base":
return {
avatarSize: "h-6 w-6",
fontSize: "text-sm",
spacing: "-space-x-1.5",
};
case "lg":
return {
avatarSize: "h-7 w-7",
fontSize: "text-sm",
spacing: "-space-x-1.5",
};
default:
return {
avatarSize: "h-5 w-5",
fontSize: "text-xs",
spacing: "-space-x-1",
};
}
};
/**
* Get the border radius based on the shape prop
* @param shape The shape of the avatar
* @returns The border radius
*/
export const getBorderRadius = (shape: "circle" | "square") => {
switch (shape) {
case "circle":
return "rounded-full";
case "square":
return "rounded-md";
default:
return "rounded-full";
}
};
/**
* Check if the value is a valid number
* @param value The value to check
* @returns Whether the value is a valid number or not
*/
export const isAValidNumber = (value: any) => {
return typeof value === "number" && !isNaN(value);
};
export const Avatar: React.FC<Props> = (props) => {
const {
name,
fallbackBackgroundColor,
fallbackText,
fallbackTextColor,
showTooltip = true,
size = "md",
shape = "circle",
src,
} = props;
// get size details based on the size prop
const sizeInfo = getSizeInfo(size);
return (
<Tooltip
tooltipContent={fallbackText ?? name ?? "?"}
disabled={!showTooltip}
>
<div
className={`${
!isAValidNumber(size) ? sizeInfo.avatarSize : ""
} overflow-hidden grid place-items-center ${getBorderRadius(shape)}`}
style={
isAValidNumber(size)
? {
height: `${size}px`,
width: `${size}px`,
}
: {}
}
>
{src ? (
<img
src={src}
className={`h-full w-full ${getBorderRadius(shape)}`}
alt={name}
/>
) : (
<div
className={`${
sizeInfo.fontSize
} grid place-items-center h-full w-full ${getBorderRadius(shape)}`}
style={{
backgroundColor:
fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
color: fallbackTextColor ?? "#ffffff",
}}
>
{name ? name[0].toUpperCase() : fallbackText ?? "?"}
</div>
)}
</div>
</Tooltip>
);
};

2
packages/ui/src/avatar/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./avatar-group";
export * from "./avatar";

0
packages/ui/src/button/index.tsx → packages/ui/src/button/index.ts
View File

9
packages/ui/src/index.tsx → packages/ui/src/index.ts
View File

@ -1,9 +1,10 @@
export * from "./avatar";
export * from "./breadcrumbs";
export * from "./button";
export * from "./dropdowns";
export * from "./form-fields";
export * from "./icons";
export * from "./progress";
export * from "./spinners";
export * from "./loader";
export * from "./tooltip";
export * from "./icons";
export * from "./breadcrumbs";
export * from "./dropdowns";
export * from "./loader";

6
web/components/command-palette/issue/change-issue-assignee.tsx
View File

@ -9,7 +9,7 @@ import useProjectMembers from "hooks/use-project-members";
// constants
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
// ui
import { Avatar } from "components/ui";
import { Avatar } from "@plane/ui";
// icons
import { Check } from "lucide-react";
// types
@ -31,13 +31,13 @@ export const ChangeIssueAssignee: FC<Props> = ({ setIsPaletteOpen, issue, user }
const { members } = useProjectMembers(workspaceSlug as string, projectId as string);
const options =
members?.map(({ member }: any) => ({
members?.map(({ member }) => ({
value: member.id,
query: member.display_name,
content: (
<>
<div className="flex items-center gap-2">
<Avatar user={member} />
<Avatar name={member.display_name} src={member.avatar} showTooltip={false} />
{member.display_name}
</div>
{issue.assignees.includes(member.id) && (

12
web/components/core/filters/filters-list.tsx
View File

@ -1,18 +1,14 @@
import React from "react";
// icons
import { PriorityIcon, StateGroupIcon } from "@plane/ui";
import { X } from "lucide-react";
// ui
import { Avatar } from "components/ui";
import { Avatar, PriorityIcon, StateGroupIcon } from "@plane/ui";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
// types
import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
// constants
import { STATE_GROUP_COLORS } from "constants/state";
import { X } from "lucide-react";
type Props = {
filters: Partial<IIssueFilterOptions>;
@ -149,7 +145,7 @@ export const FiltersList: React.FC<Props> = ({ filters, setFilters, clearAllFilt
key={memberId}
className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
>
<Avatar user={member} />
<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} />
<span>{member?.display_name}</span>
<span
className="cursor-pointer"
@ -173,7 +169,7 @@ export const FiltersList: React.FC<Props> = ({ filters, setFilters, clearAllFilt
key={`${memberId}-${key}`}
className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
>
<Avatar user={member} />
<Avatar name={member?.display_name} src={member?.avatar} />
<span>{member?.display_name}</span>
<span
className="cursor-pointer"

1
web/components/core/filters/index.ts
View File

@ -1,4 +1,3 @@
export * from "./date-filter-modal";
export * from "./date-filter-select";
export * from "./filters-list";
export * from "./workspace-filters-list";

347
web/components/core/filters/workspace-filters-list.tsx
View File

@ -1,347 +0,0 @@
import { FC } from "react";
// icons
import { X } from "lucide-react";
import { PriorityIcon, StateGroupIcon } from "@plane/ui";
// ui
import { Avatar } from "components/ui";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
// types
import { IIssueLabels, IProject, IUserLite, IWorkspaceIssueFilterOptions, TStateGroups } from "types";
// constants
import { STATE_GROUP_COLORS } from "constants/state";
type Props = {
filters: Partial<IWorkspaceIssueFilterOptions>;
setFilters: (updatedFilter: Partial<IWorkspaceIssueFilterOptions>) => void;
clearAllFilters: (...args: any) => void;
labels: IIssueLabels[] | undefined;
members: IUserLite[] | undefined;
stateGroup: string[] | undefined;
project?: IProject[] | undefined;
};
export const WorkspaceFiltersList: FC<Props> = (props) => {
const { filters, setFilters, clearAllFilters, labels, members, project } = props;
if (!filters) return <></>;
const nullFilters = Object.keys(filters).filter((key) => filters[key as keyof IWorkspaceIssueFilterOptions] === null);
return (
<div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
{Object.keys(filters).map((filterKey) => {
const key = filterKey as keyof typeof filters;
if (filters[key] === null || (filters[key]?.length ?? 0) <= 0) return null;
return (
<div
key={key}
className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
>
<span className="capitalize text-custom-text-200">
{key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
</span>
{filters[key] === null || (filters[key]?.length ?? 0) <= 0 ? (
<span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
) : Array.isArray(filters[key]) ? (
<div className="space-x-2">
<div className="flex flex-wrap items-center gap-1">
{key === "state_group"
? filters.state_group?.map((stateGroup) => {
const group = stateGroup as TStateGroups;
return (
<p
key={group}
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
style={{
color: STATE_GROUP_COLORS[group],
backgroundColor: `${STATE_GROUP_COLORS[group]}20`,
}}
>
<span>
<StateGroupIcon stateGroup={group} color={undefined} />
</span>
<span>{group}</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters({
state_group: filters.state_group?.filter((g) => g !== group),
})
}
>
<X className="h-3 w-3" />
</span>
</p>
);
})
: key === "priority"
? filters.priority?.map((priority: any) => (
<p
key={priority}
className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
priority === "urgent"
? "bg-red-500/20 text-red-500"
: priority === "high"
? "bg-orange-500/20 text-orange-500"
: priority === "medium"
? "bg-yellow-500/20 text-yellow-500"
: priority === "low"
? "bg-green-500/20 text-green-500"
: "bg-custom-background-90 text-custom-text-200"
}`}
>
<span>
<PriorityIcon priority={priority} />
</span>
<span>{priority === "null" ? "None" : priority}</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters({
priority: filters.priority?.filter((p: any) => p !== priority),
})
}
>
<X className="h-3 w-3" />
</span>
</p>
))
: key === "assignees"
? filters.assignees?.map((memberId: string) => {
const member = members?.find((m) => m.id === memberId);
return (
<div
key={memberId}
className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
>
<Avatar user={member} />
<span>{member?.display_name}</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters({
assignees: filters.assignees?.filter((p: any) => p !== memberId),
})
}
>
<X className="h-3 w-3" />
</span>
</div>
);
})
: key === "subscriber"
? filters.subscriber?.map((memberId: string) => {
const member = members?.find((m) => m.id === memberId);
return (
<div
key={memberId}
className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
>
<Avatar user={member} />
<span>{member?.display_name}</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters({
assignees: filters.assignees?.filter((p: any) => p !== memberId),
})
}
>
<X className="h-3 w-3" />
</span>
</div>
);
})
: key === "created_by"
? filters.created_by?.map((memberId: string) => {
const member = members?.find((m) => m.id === memberId);
return (
<div
key={`${memberId}-${key}`}
className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
>
<Avatar user={member} />
<span>{member?.display_name}</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters({
created_by: filters.created_by?.filter((p: any) => p !== memberId),
})
}
>
<X className="h-3 w-3" />
</span>
</div>
);
})
: key === "labels"
? filters.labels?.map((labelId: string) => {
const label = labels?.find((l) => l.id === labelId);
if (!label) return null;
const color = label.color !== "" ? label.color : "#0f172a";
return (
<div
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5"
style={{
color: color,
backgroundColor: `${color}20`, // add 20% opacity
}}
key={labelId}
>
<div
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: color,
}}
/>
<span>{label.name}</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters({
labels: filters.labels?.filter((l: any) => l !== labelId),
})
}
>
<X
className="h-3 w-3"
style={{
color: color,
}}
/>
</span>
</div>
);
})
: key === "start_date"
? filters.start_date?.map((date: string) => {
if (filters.start_date && filters.start_date.length <= 0) return null;
const splitDate = date.split(";");
return (
<div
key={date}
className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
>
<div className="h-1.5 w-1.5 rounded-full" />
<span className="capitalize">
{splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters({
start_date: filters.start_date?.filter((d: any) => d !== date),
})
}
>
<X className="h-3 w-3" />
</span>
</div>
);
})
: key === "target_date"
? filters.target_date?.map((date: string) => {
if (filters.target_date && filters.target_date.length <= 0) return null;
const splitDate = date.split(";");
return (
<div
key={date}
className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
>
<div className="h-1.5 w-1.5 rounded-full" />
<span className="capitalize">
{splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters({
target_date: filters.target_date?.filter((d: any) => d !== date),
})
}
>
<X className="h-3 w-3" />
</span>
</div>
);
})
: key === "project"
? filters.project?.map((projectId) => {
const currentProject = project?.find((p) => p.id === projectId);
return (
<p
key={currentProject?.id}
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
>
<span>{currentProject?.name}</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters({
project: filters.project?.filter((p) => p !== projectId),
})
}
>
<X className="h-3 w-3" />
</span>
</p>
);
})
: (filters[key] as any)?.join(", ")}
<button
type="button"
onClick={() =>
setFilters({
[key]: null,
})
}
>
<X className="h-3 w-3" />
</button>
</div>
</div>
) : (
<div className="flex items-center gap-x-1 capitalize">
{filters[key as keyof typeof filters]}
<button
type="button"
onClick={() =>
setFilters({
[key]: null,
})
}
>
<X className="h-3 w-3" />
</button>
</div>
)}
</div>
);
})}
{Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
<button
type="button"
onClick={clearAllFilters}
className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
>
<span>Clear all filters</span>
<X className="h-3 w-3" />
</button>
)}
</div>
);
};

15
web/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -10,10 +10,9 @@ import useIssuesView from "hooks/use-issues-view";
import emptyLabel from "public/empty-state/empty_label.svg";
import emptyMembers from "public/empty-state/empty_members.svg";
// components
import { StateGroupIcon } from "@plane/ui";
import { SingleProgressStats } from "components/core";
// ui
import { Avatar } from "components/ui";
import { Avatar, StateGroupIcon } from "@plane/ui";
// types
import {
IModule,
@ -138,17 +137,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
key={assignee.assignee_id}
title={
<div className="flex items-center gap-2">
<Avatar
user={{
id: assignee.assignee_id,
avatar: assignee.avatar ?? "",
first_name: assignee.first_name ?? "",
last_name: assignee.last_name ?? "",
display_name: assignee.display_name ?? "",
}}
height="18px"
width="18px"
/>
<Avatar name={assignee.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
<span>{assignee.display_name}</span>
</div>
}

26
web/components/cycles/active-cycle-details.tsx
View File

@ -1,16 +1,14 @@
import { MouseEvent } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// services
import { CycleService } from "services/cycle.service";
import useSWR from "swr";
// hooks
import useToast from "hooks/use-toast";
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { AssigneesList } from "components/ui/avatar";
import { SingleProgressStats } from "components/core";
import {
AvatarGroup,
Loader,
Tooltip,
LinearProgressIndicator,
@ -19,6 +17,7 @@ import {
LayersIcon,
StateGroupIcon,
PriorityIcon,
Avatar,
} from "@plane/ui";
// components
import ProgressChart from "components/core/sidebar/progress-chart";
@ -31,9 +30,7 @@ import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } fro
import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { truncateText } from "helpers/string.helper";
// types
import { ICycle, IIssue } from "types";
// fetch-keys
import { CURRENT_CYCLE_LIST, CYCLES_LIST, CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
import { ICycle } from "types";
const stateGroups = [
{
@ -69,9 +66,6 @@ interface IActiveCycleDetails {
}
export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
// services
const cycleService = new CycleService();
const router = useRouter();
const { workspaceSlug, projectId } = props;
@ -306,7 +300,11 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
{cycle.assignees.length > 0 && (
<div className="flex items-center gap-1 text-custom-text-200">
<AssigneesList users={cycle.assignees} length={4} />
<AvatarGroup>
{cycle.assignees.map((assignee) => (
<Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
))}
</AvatarGroup>
</div>
)}
</div>
@ -406,7 +404,11 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
<div className={`flex items-center gap-2 text-custom-text-200`}>
{issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
<div className="-my-0.5 flex items-center justify-center gap-2">
<AssigneesList users={issue.assignee_details} length={3} showLength={false} />
<AvatarGroup showTooltip={false}>
{issue.assignee_details.map((assignee: any) => (
<Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
))}
</AvatarGroup>
</div>
) : (
""

35
web/components/cycles/active-cycle-stats.tsx
View File

@ -1,16 +1,14 @@
import React, { Fragment } from "react";
// headless ui
import { Tab } from "@headlessui/react";
// hooks
import useLocalStorage from "hooks/use-local-storage";
// components
import { SingleProgressStats } from "components/core";
// ui
import { Avatar } from "components/ui";
import { Avatar } from "@plane/ui";
// types
import { ICycle } from "types";
// types
type Props = {
cycle: ICycle;
};
@ -71,10 +69,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
</Tab.List>
{cycle.total_issues > 0 ? (
<Tab.Panels as={Fragment}>
<Tab.Panel
as="div"
className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
>
<Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
{cycle.distribution.assignees.map((assignee, index) => {
if (assignee.assignee_id)
return (
@ -82,15 +77,8 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
key={assignee.assignee_id}
title={
<div className="flex items-center gap-2">
<Avatar
user={{
id: assignee.assignee_id,
avatar: assignee.avatar ?? "",
first_name: assignee.first_name ?? "",
last_name: assignee.last_name ?? "",
display_name: assignee.display_name ?? "",
}}
/>
<Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
<span>{assignee.display_name}</span>
</div>
}
@ -105,13 +93,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
title={
<div className="flex items-center gap-2">
<div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
<img
src="/user.png"
height="100%"
width="100%"
className="rounded-full"
alt="User"
/>
<img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
</div>
<span>No assignee</span>
</div>
@ -122,10 +104,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
);
})}
</Tab.Panel>
<Tab.Panel
as="div"
className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
>
<Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
{cycle.distribution.labels.map((label, index) => (
<SingleProgressStats
key={label.label_id ?? `no-label-${index}`}

12
web/components/cycles/cycles-board-card.tsx
View File

@ -1,16 +1,12 @@
import { FC, MouseEvent, useState } from "react";
import { useRouter } from "next/router";
// next imports
import Link from "next/link";
// hooks
import useToast from "hooks/use-toast";
// components
import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
// ui
import { AssigneesList } from "components/ui/avatar";
import { CustomMenu, Tooltip, LayersIcon, CycleGroupIcon } from "@plane/ui";
import { Avatar, AvatarGroup, CustomMenu, Tooltip, LayersIcon, CycleGroupIcon } from "@plane/ui";
// icons
import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
// helpers
@ -197,7 +193,11 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
{cycle.assignees.length > 0 && (
<Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
<div className="flex items-center gap-1 cursor-default">
<AssigneesList users={cycle.assignees} length={3} />
<AvatarGroup showTooltip={false}>
{cycle.assignees.map((assignee) => (
<Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
))}
</AvatarGroup>
</div>
</Tooltip>
)}

9
web/components/cycles/cycles-list-item.tsx
View File

@ -8,9 +8,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
import useToast from "hooks/use-toast";
// components
import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
import { AssigneesList } from "components/ui";
// ui
import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon } from "@plane/ui";
import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar } from "@plane/ui";
// icons
import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
// helpers
@ -207,7 +206,11 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
<Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
<div className="flex items-center justify-center gap-1 cursor-default w-16">
{cycle.assignees.length > 0 ? (
<AssigneesList users={cycle.assignees} length={2} />
<AvatarGroup showTooltip={false}>
{cycle.assignees.map((assignee) => (
<Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
))}
</AvatarGroup>
) : (
<span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
<User2 className="h-4 w-4 text-custom-text-400" />

12
web/components/cycles/cycles-view.tsx
View File

@ -25,7 +25,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
const { cycle: cycleStore } = useMobxStore();
// api call to fetch cycles list
const { isLoading } = useSWR(
useSWR(
workspaceSlug && projectId && filter ? `CYCLES_LIST_${projectId}_${filter}` : null,
workspaceSlug && projectId && filter ? () => cycleStore.fetchCycles(workspaceSlug, projectId, filter) : null
);
@ -36,10 +36,10 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
<>
{layout === "list" && (
<>
{!isLoading ? (
{cyclesList ? (
<CyclesList cycles={cyclesList} filter={filter} workspaceSlug={workspaceSlug} projectId={projectId} />
) : (
<Loader className="space-y-4">
<Loader className="space-y-4 p-8">
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
@ -50,7 +50,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
{layout === "board" && (
<>
{!isLoading ? (
{cyclesList ? (
<CyclesBoard
cycles={cyclesList}
filter={filter}
@ -59,7 +59,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
peekCycle={peekCycle}
/>
) : (
<Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
<Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3 p-8">
<Loader.Item height="200px" />
<Loader.Item height="200px" />
<Loader.Item height="200px" />
@ -70,7 +70,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
{layout === "gantt" && (
<>
{!isLoading ? (
{cyclesList ? (
<CyclesListGanttChartView cycles={cyclesList} workspaceSlug={workspaceSlug} />
) : (
<Loader className="space-y-4">

2
web/components/cycles/index.ts
View File

@ -7,8 +7,6 @@ export * from "./form";
export * from "./modal";
export * from "./select";
export * from "./sidebar";
export * from "./single-cycle-card";
export * from "./single-cycle-list";
export * from "./transfer-issues-modal";
export * from "./transfer-issues";
export * from "./cycles-list";

14
web/components/cycles/sidebar.tsx
View File

@ -15,8 +15,8 @@ import { SidebarProgressStats } from "components/core";
import ProgressChart from "components/core/sidebar/progress-chart";
import { CycleDeleteModal } from "components/cycles/delete-modal";
// ui
import { Avatar, CustomRangeDatePicker } from "components/ui";
import { CustomMenu, Loader, LayersIcon } from "@plane/ui";
import { CustomRangeDatePicker } from "components/ui";
import { Avatar, CustomMenu, Loader, LayersIcon } from "@plane/ui";
// icons
import { ChevronDown, LinkIcon, Trash2, UserCircle2, AlertCircle, ChevronRight, MoveRight } from "lucide-react";
// helpers
@ -137,7 +137,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
});
if (isDateValidForExistingCycle) {
await submitChanges({
submitChanges({
start_date: renderDateFormat(`${watch("start_date")}`),
end_date: renderDateFormat(`${watch("end_date")}`),
});
@ -211,7 +211,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
});
if (isDateValidForExistingCycle) {
await submitChanges({
submitChanges({
start_date: renderDateFormat(`${watch("start_date")}`),
end_date: renderDateFormat(`${watch("end_date")}`),
});
@ -349,8 +349,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
)}
<div className="relative flex h-full w-52 items-center gap-2.5">
<Popover className="flex h-full items-center justify-center rounded-lg">
{({}) => (
<>
<Popover.Button
disabled={isCompleted ?? false}
className="text-sm text-custom-text-300 font-medium cursor-default"
@ -382,8 +380,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<MoveRight className="h-4 w-4 text-custom-text-300" />
<Popover className="flex h-full items-center justify-center rounded-lg">
@ -441,7 +437,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
</div>
<div className="flex items-center w-1/2 rounded-sm">
<div className="flex items-center gap-2.5">
<Avatar user={cycleDetails.owned_by} />
<Avatar name={cycleDetails.owned_by.display_name} src={cycleDetails.owned_by.avatar} />
<span className="text-sm text-custom-text-200">{cycleDetails.owned_by.display_name}</span>
</div>
</div>

389
web/components/cycles/single-cycle-card.tsx
View File

@ -1,389 +0,0 @@
import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
// headless ui
import { Disclosure, Transition } from "@headlessui/react";
// hooks
import useToast from "hooks/use-toast";
// components
import { SingleProgressStats } from "components/core";
// ui
import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
import { AssigneesList } from "components/ui/avatar";
// icons
import {
AlarmClock,
AlertTriangle,
ArrowRight,
CalendarDays,
ChevronDown,
LinkIcon,
Pencil,
Star,
Target,
Trash2,
} from "lucide-react";
// helpers
import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
// types
import { ICycle } from "types";
type TSingleStatProps = {
cycle: ICycle;
handleEditCycle: () => void;
handleDeleteCycle: () => void;
handleAddToFavorites: () => void;
handleRemoveFromFavorites: () => void;
};
const stateGroups = [
{
key: "backlog_issues",
title: "Backlog",
color: "#dee2e6",
},
{
key: "unstarted_issues",
title: "Unstarted",
color: "#26b5ce",
},
{
key: "started_issues",
title: "Started",
color: "#f7ae59",
},
{
key: "cancelled_issues",
title: "Cancelled",
color: "#d687ff",
},
{
key: "completed_issues",
title: "Completed",
color: "#09a953",
},
];
export const SingleCycleCard: React.FC<TSingleStatProps> = ({
cycle,
handleEditCycle,
handleDeleteCycle,
handleAddToFavorites,
handleRemoveFromFavorites,
}) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { setToastAlert } = useToast();
const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
const isCompleted = cycleStatus === "completed";
const endDate = new Date(cycle.end_date ?? "");
const startDate = new Date(cycle.start_date ?? "");
const handleCopyText = () => {
const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
setToastAlert({
type: "success",
title: "Link Copied!",
message: "Cycle link copied to clipboard.",
});
});
};
const progressIndicatorData = stateGroups.map((group, index) => ({
id: index,
name: group.title,
value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
color: group.color,
}));
const groupedIssues: any = {
backlog: cycle.backlog_issues,
unstarted: cycle.unstarted_issues,
started: cycle.started_issues,
completed: cycle.completed_issues,
cancelled: cycle.cancelled_issues,
};
return (
<div>
<div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-200 text-xs shadow">
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<a className="w-full">
<div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
<div className="flex items-center justify-between gap-1">
<span className="flex items-center gap-1">
<span className="h-5 w-5">
<ContrastIcon
className="h-5 w-5"
color={`${
cycleStatus === "current"
? "#09A953"
: cycleStatus === "upcoming"
? "#F7AE59"
: cycleStatus === "completed"
? "#3F76FF"
: cycleStatus === "draft"
? "rgb(var(--color-text-200))"
: ""
}`}
/>
</span>
<Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
<h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 15)}</h3>
</Tooltip>
</span>
<span className="flex items-center gap-1 capitalize">
<span
className={`rounded-full px-1.5 py-0.5
${
cycleStatus === "current"
? "bg-green-600/5 text-green-600"
: cycleStatus === "upcoming"
? "bg-orange-300/5 text-orange-300"
: cycleStatus === "completed"
? "bg-blue-500/5 text-blue-500"
: cycleStatus === "draft"
? "bg-neutral-400/5 text-neutral-400"
: ""
}`}
>
{cycleStatus === "current" ? (
<span className="flex gap-1 whitespace-nowrap">
<RunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
</span>
) : cycleStatus === "upcoming" ? (
<span className="flex gap-1 whitespace-nowrap">
<AlarmClock className="h-4 w-4" />
{findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
</span>
) : cycleStatus === "completed" ? (
<span className="flex gap-1 whitespace-nowrap">
{cycle.total_issues - cycle.completed_issues > 0 && (
<Tooltip
tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
}`}
>
<span>
<AlertTriangle className="h-3.5 w-3.5" />
</span>
</Tooltip>
)}{" "}
Completed
</span>
) : (
cycleStatus
)}
</span>
{cycle.is_favorite ? (
<button
onClick={(e) => {
e.preventDefault();
handleRemoveFromFavorites();
}}
>
<Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</button>
) : (
<button
onClick={(e) => {
e.preventDefault();
handleAddToFavorites();
}}
>
<Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
</button>
)}
</span>
</div>
<div className="flex h-4 items-center justify-start gap-5 text-custom-text-200">
{cycleStatus !== "draft" && (
<>
<div className="flex items-start gap-1">
<CalendarDays className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span>
</div>
<ArrowRight className="h-4 w-4" />
<div className="flex items-start gap-1">
<Target className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span>
</div>
</>
)}
</div>
<div className="flex justify-between items-end">
<div className="flex flex-col gap-2 text-xs text-custom-text-200">
<div className="flex items-center gap-2">
<div className="w-16">Creator:</div>
<div className="flex items-center gap-2.5 text-custom-text-200">
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
<img
src={cycle.owned_by.avatar}
height={16}
width={16}
className="rounded-full"
alt={cycle.owned_by.display_name}
/>
) : (
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
{cycle.owned_by.display_name.charAt(0)}
</span>
)}
<span className="text-custom-text-200">{cycle.owned_by.display_name}</span>
</div>
</div>
<div className="flex h-5 items-center gap-2">
<div className="w-16">Members:</div>
{cycle.assignees.length > 0 ? (
<div className="flex items-center gap-1 text-custom-text-200">
<AssigneesList users={cycle.assignees} length={4} />
</div>
) : (
"No members"
)}
</div>
</div>
<div className="flex items-center">
{!isCompleted && (
<button
onClick={(e) => {
e.preventDefault();
handleEditCycle();
}}
className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
>
<Pencil className="h-4 w-4" />
</button>
)}
<CustomMenu width="auto" verticalEllipsis>
{!isCompleted && (
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
handleDeleteCycle();
}}
>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-4 w-4" />
<span>Delete cycle</span>
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
handleCopyText();
}}
>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy cycle link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
</div>
</a>
</Link>
<div className="flex h-full flex-col rounded-b-[10px]">
<Disclosure>
{({ open }) => (
<div
className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-200 bg-custom-background-80 text-custom-text-200 ${
open ? "" : "flex-row"
}`}
>
<div className="flex w-full items-center gap-2 px-4 py-1">
<span>Progress</span>
<Tooltip
tooltipContent={
<div className="flex w-56 flex-col">
{Object.keys(groupedIssues).map((group, index) => (
<SingleProgressStats
key={index}
title={
<div className="flex items-center gap-2">
<span
className="block h-3 w-3 rounded-full "
style={{
backgroundColor: stateGroups[index].color,
}}
/>
<span className="text-xs capitalize">{group}</span>
</div>
}
completed={groupedIssues[group]}
total={cycle.total_issues}
/>
))}
</div>
}
position="bottom"
>
<div className="flex w-full items-center">
<LinearProgressIndicator data={progressIndicatorData} noTooltip />
</div>
</Tooltip>
<Disclosure.Button>
<span className="p-1">
<ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
</span>
</Disclosure.Button>
</div>
<Transition show={open}>
<Disclosure.Panel>
<div className="overflow-hidden rounded-b-md bg-custom-background-80 py-3 shadow">
<div className="col-span-2 space-y-3 px-4">
<div className="space-y-3 text-xs">
{stateGroups.map((group) => (
<div key={group.key} className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<span
className="block h-2 w-2 rounded-full"
style={{
backgroundColor: group.color,
}}
/>
<h6 className="text-xs">{group.title}</h6>
</div>
<div>
<span>
{cycle[group.key as keyof ICycle] as number}{" "}
<span className="text-custom-text-200">
-{" "}
{cycle.total_issues > 0
? `${Math.round(
((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
)}%`
: "0%"}
</span>
</span>
</div>
</div>
))}
</div>
</div>
</div>
</Disclosure.Panel>
</Transition>
</div>
)}
</Disclosure>
</div>
</div>
</div>
);
};

369
web/components/cycles/single-cycle-list.tsx
View File

@ -1,369 +0,0 @@
import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
// hooks
import useToast from "hooks/use-toast";
// ui
import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
// icons
import {
AlarmClock,
AlertTriangle,
ArrowRight,
CalendarDays,
LinkIcon,
Pencil,
Star,
Target,
Trash2,
} from "lucide-react";
// helpers
import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
// types
import { ICycle } from "types";
type TSingleStatProps = {
cycle: ICycle;
handleEditCycle: () => void;
handleDeleteCycle: () => void;
handleAddToFavorites: () => void;
handleRemoveFromFavorites: () => void;
};
const stateGroups = [
{
key: "backlog_issues",
title: "Backlog",
color: "#dee2e6",
},
{
key: "unstarted_issues",
title: "Unstarted",
color: "#26b5ce",
},
{
key: "started_issues",
title: "Started",
color: "#f7ae59",
},
{
key: "cancelled_issues",
title: "Cancelled",
color: "#d687ff",
},
{
key: "completed_issues",
title: "Completed",
color: "#09a953",
},
];
type progress = {
progress: number;
};
function RadialProgressBar({ progress }: progress) {
const [circumference, setCircumference] = useState(0);
useEffect(() => {
const radius = 40;
const circumference = 2 * Math.PI * radius;
setCircumference(circumference);
}, []);
const progressOffset = ((100 - progress) / 100) * circumference;
return (
<div className="relative h-4 w-4">
<svg className="absolute top-0 left-0" viewBox="0 0 100 100">
<circle
className={"stroke-current opacity-10"}
cx="50"
cy="50"
r="40"
strokeWidth="12"
fill="none"
strokeDasharray={`${circumference} ${circumference}`}
/>
<circle
className={`stroke-current`}
cx="50"
cy="50"
r="40"
strokeWidth="12"
fill="none"
strokeDasharray={`${circumference} ${circumference}`}
strokeDashoffset={progressOffset}
transform="rotate(-90 50 50)"
/>
</svg>
</div>
);
}
export const SingleCycleList: React.FC<TSingleStatProps> = ({
cycle,
handleEditCycle,
handleDeleteCycle,
handleAddToFavorites,
handleRemoveFromFavorites,
}) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { setToastAlert } = useToast();
const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
const isCompleted = cycleStatus === "completed";
const endDate = new Date(cycle.end_date ?? "");
const startDate = new Date(cycle.start_date ?? "");
const handleCopyText = () => {
const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
setToastAlert({
type: "success",
title: "Link Copied!",
message: "Cycle link copied to clipboard.",
});
});
};
const progressIndicatorData = stateGroups.map((group, index) => ({
id: index,
name: group.title,
value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
color: group.color,
}));
const completedIssues = cycle.completed_issues + cycle.cancelled_issues;
const percentage = cycle.total_issues > 0 ? (completedIssues / cycle.total_issues) * 100 : 0;
return (
<div>
<div className="flex flex-col text-xs hover:bg-custom-background-80">
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<a className="w-full">
<div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
<div className="flex items-center justify-between gap-1">
<div className="flex items-start gap-2">
<ContrastIcon
className="mt-1 h-5 w-5"
color={`${
cycleStatus === "current"
? "#09A953"
: cycleStatus === "upcoming"
? "#F7AE59"
: cycleStatus === "completed"
? "#3F76FF"
: cycleStatus === "draft"
? "rgb(var(--color-text-200))"
: ""
}`}
/>
<div className="max-w-2xl">
<Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
<h3 className="break-words w-full text-base font-semibold">{truncateText(cycle.name, 60)}</h3>
</Tooltip>
<p className="mt-2 text-custom-text-200 break-words w-full">{cycle.description}</p>
</div>
</div>
<div className="flex-shrink-0 flex items-center gap-4">
<span
className={`rounded-full px-1.5 py-0.5
${
cycleStatus === "current"
? "bg-green-600/5 text-green-600"
: cycleStatus === "upcoming"
? "bg-orange-300/5 text-orange-300"
: cycleStatus === "completed"
? "bg-blue-500/5 text-blue-500"
: cycleStatus === "draft"
? "bg-neutral-400/5 text-neutral-400"
: ""
}`}
>
{cycleStatus === "current" ? (
<span className="flex gap-1 whitespace-nowrap">
<RunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
</span>
) : cycleStatus === "upcoming" ? (
<span className="flex gap-1">
<AlarmClock className="h-4 w-4" />
{findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
</span>
) : cycleStatus === "completed" ? (
<span className="flex items-center gap-1">
{cycle.total_issues - cycle.completed_issues > 0 && (
<Tooltip
tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
}`}
>
<span>
<AlertTriangle className="h-3.5 w-3.5" />
</span>
</Tooltip>
)}{" "}
Completed
</span>
) : (
cycleStatus
)}
</span>
{cycleStatus !== "draft" && (
<div className="flex items-center justify-start gap-2 text-custom-text-200">
<div className="flex items-start gap-1 whitespace-nowrap">
<CalendarDays className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span>
</div>
<ArrowRight className="h-4 w-4" />
<div className="flex items-start gap-1 whitespace-nowrap">
<Target className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span>
</div>
</div>
)}
<div className="flex items-center gap-2.5 text-custom-text-200">
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
<img
src={cycle.owned_by.avatar}
height={16}
width={16}
className="rounded-full"
alt={cycle.owned_by.display_name}
/>
) : (
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
{cycle.owned_by.display_name.charAt(0)}
</span>
)}
</div>
<Tooltip
position="top-right"
tooltipContent={
<div className="flex w-80 items-center gap-2 px-4 py-1">
<span>Progress</span>
<LinearProgressIndicator data={progressIndicatorData} />
</div>
}
>
<span
className={`rounded-md px-1.5 py-1
${
cycleStatus === "current"
? "border border-green-600 bg-green-600/5 text-green-600"
: cycleStatus === "upcoming"
? "border border-orange-300 bg-orange-300/5 text-orange-300"
: cycleStatus === "completed"
? "border border-blue-500 bg-blue-500/5 text-blue-500"
: cycleStatus === "draft"
? "border border-neutral-400 bg-neutral-400/5 text-neutral-400"
: ""
}`}
>
{cycleStatus === "current" ? (
<span className="flex gap-1 whitespace-nowrap">
{cycle.total_issues > 0 ? (
<>
<RadialProgressBar progress={(cycle.completed_issues / cycle.total_issues) * 100} />
<span>{Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} %</span>
</>
) : (
<span className="normal-case">No issues present</span>
)}
</span>
) : cycleStatus === "upcoming" ? (
<span className="flex gap-1">
<RadialProgressBar progress={100} /> Yet to start
</span>
) : cycleStatus === "completed" ? (
<span className="flex gap-1">
<RadialProgressBar progress={100} />
<span>{Math.round(percentage)} %</span>
</span>
) : (
<span className="flex gap-1">
<RadialProgressBar progress={(cycle.total_issues / cycle.completed_issues) * 100} />
{cycleStatus}
</span>
)}
</span>
</Tooltip>
{cycle.is_favorite ? (
<button
onClick={(e) => {
e.preventDefault();
handleRemoveFromFavorites();
}}
>
<Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</button>
) : (
<button
onClick={(e) => {
e.preventDefault();
handleAddToFavorites();
}}
>
<Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
</button>
)}
<div className="flex items-center">
<CustomMenu width="auto" verticalEllipsis>
{!isCompleted && (
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
handleEditCycle();
}}
>
<span className="flex items-center justify-start gap-2">
<Pencil className="h-4 w-4" />
<span>Edit Cycle</span>
</span>
</CustomMenu.MenuItem>
)}
{!isCompleted && (
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
handleDeleteCycle();
}}
>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-4 w-4" />
<span>Delete cycle</span>
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
handleCopyText();
}}
>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy cycle link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
</div>
</div>
</a>
</Link>
</div>
</div>
);
};

7
web/components/integration/github/single-user-select.tsx
View File

@ -1,12 +1,9 @@
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { WorkspaceService } from "services/workspace.service";
// ui
import { Avatar } from "components/ui";
import { CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
import { Avatar, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
// types
import { IGithubRepoCollaborator } from "types";
import { IUserDetails } from "./root";
@ -52,7 +49,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
query: member.member.display_name ?? "",
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
{member.member.display_name}
</div>
),

11
web/components/integration/jira/import-users.tsx
View File

@ -2,15 +2,14 @@ import { FC } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { useFormContext, useFieldArray, Controller } from "react-hook-form";
// fetch keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
// services
import { WorkspaceService } from "services/workspace.service";
// components
import { Avatar } from "components/ui";
import { CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
// ui
import { Avatar, CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
// types
import { IJiraImporterForm } from "types";
// fetch keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
const workspaceService = new WorkspaceService();
@ -39,7 +38,7 @@ export const JiraImportUsers: FC = () => {
query: member.member.display_name ?? "",
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
{member.member.display_name}
</div>
),

8
web/components/issues/issue-layouts/filters/applied-filters/members.tsx
View File

@ -1,9 +1,7 @@
import { observer } from "mobx-react-lite";
// ui
import { Avatar } from "components/ui";
// icons
import { X } from "lucide-react";
// ui
import { Avatar } from "@plane/ui";
// types
import { IUserLite } from "types";
@ -25,7 +23,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
return (
<div key={memberId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<Avatar user={memberDetails} height="16px" width="16px" />
<Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
<span className="normal-case">{memberDetails.display_name}</span>
<button
type="button"

6
web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
View File

@ -1,10 +1,8 @@
import React, { useState } from "react";
// components
import { FilterHeader, FilterOption } from "components/issues";
// ui
import { Avatar } from "components/ui";
import { Loader } from "@plane/ui";
import { Avatar, Loader } from "@plane/ui";
// types
import { IUserLite } from "types";
@ -45,7 +43,7 @@ export const FilterAssignees: React.FC<Props> = (props) => {
key={`assignees-${member.id}`}
isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)}
icon={<Avatar user={member} height="18px" width="18px" />}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="sm" />}
title={member.display_name}
/>
))}

6
web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
View File

@ -1,10 +1,8 @@
import React, { useState } from "react";
// components
import { FilterHeader, FilterOption } from "components/issues";
// ui
import { Avatar } from "components/ui";
import { Loader } from "@plane/ui";
import { Avatar, Loader } from "@plane/ui";
// types
import { IUserLite } from "types";
@ -45,7 +43,7 @@ export const FilterCreatedBy: React.FC<Props> = (props) => {
key={`created-by-${member.id}`}
isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)}
icon={<Avatar user={member} height="18px" width="18px" />}
icon={<Avatar name={member.display_name} src={member.avatar} size="sm" />}
title={member.display_name}
/>
))}

5
web/components/issues/issue-layouts/kanban/headers/assignee.tsx
View File

@ -3,7 +3,8 @@ import { observer } from "mobx-react-lite";
// components
import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
import { Avatar } from "components/ui";
// ui
import { Avatar } from "@plane/ui";
export interface IAssigneesHeader {
column_id: string;
@ -16,7 +17,7 @@ export interface IAssigneesHeader {
handleKanBanToggle: any;
}
export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="base" />;
export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
const {

23
web/components/issues/issue-layouts/kanban/properties.tsx
View File

@ -114,17 +114,6 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
/>
)}
{/* assignee */}
{displayProperties && displayProperties?.assignee && (
<IssuePropertyAssignee
projectId={issue?.project_detail?.id || null}
value={issue?.assignees || null}
hideDropdownArrow
onChange={handleAssignee}
disabled={false}
/>
)}
{/* start date */}
{displayProperties && displayProperties?.start_date && (
<IssuePropertyDate
@ -186,6 +175,18 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
</div>
</Tooltip>
)}
{/* assignee */}
{displayProperties && displayProperties?.assignee && (
<IssuePropertyAssignee
projectId={issue?.project_detail?.id || null}
value={issue?.assignees || null}
hideDropdownArrow
onChange={handleAssignee}
disabled={false}
multiple
/>
)}
</div>
);
});

6
web/components/issues/issue-layouts/list/default.tsx
View File

@ -39,7 +39,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
list.length > 0 &&
list.map((_list: any) => (
<div key={getValueFromObject(_list, listKey) as string} className={`flex-shrink-0 flex flex-col`}>
<div className="flex-shrink-0 w-full py-1 sticky top-0 z-[2] px-3">
<div className="flex-shrink-0 w-full py-1 sticky top-0 z-[2] px-3 bg-custom-background-90">
<ListGroupByHeaderRoot
column_id={getValueFromObject(_list, listKey) as string}
column_value={_list}
@ -193,7 +193,7 @@ export const List: React.FC<IList> = observer((props) => {
issues={issues}
group_by={group_by}
list={members}
listKey={`member.id`}
listKey={`id`}
handleIssues={handleIssues}
quickActions={quickActions}
display_properties={display_properties}
@ -206,7 +206,7 @@ export const List: React.FC<IList> = observer((props) => {
issues={issues}
group_by={group_by}
list={members}
listKey={`member.id`}
listKey={`id`}
handleIssues={handleIssues}
quickActions={quickActions}
display_properties={display_properties}

11
web/components/issues/issue-layouts/list/headers/assignee.tsx
View File

@ -2,7 +2,8 @@ import { FC } from "react";
import { observer } from "mobx-react-lite";
// components
import { HeaderGroupByCard } from "./group-by-card";
import { Avatar } from "components/ui";
// ui
import { Avatar } from "@plane/ui";
export interface IAssigneesHeader {
column_id: string;
@ -10,7 +11,7 @@ export interface IAssigneesHeader {
issues_count: number;
}
export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="md" />;
export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
const { column_id, column_value, issues_count } = props;
@ -20,11 +21,7 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
return (
<>
{assignee && (
<HeaderGroupByCard
icon={<Icon user={assignee?.member} />}
title={assignee?.member?.display_name || ""}
count={issues_count}
/>
<HeaderGroupByCard icon={<Icon user={assignee} />} title={assignee?.display_name || ""} count={issues_count} />
)}
</>
);

4
web/components/issues/issue-layouts/list/headers/created-by.tsx
View File

@ -19,8 +19,8 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
<>
{createdBy && (
<HeaderGroupByCard
icon={<Icon user={createdBy?.member} />}
title={createdBy?.member?.display_name || ""}
icon={<Icon user={createdBy} />}
title={createdBy?.display_name || ""}
count={issues_count}
/>
)}

1
web/components/issues/issue-layouts/list/properties.tsx
View File

@ -94,6 +94,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
hideDropdownArrow
onChange={handleAssignee}
disabled={false}
multiple
/>
)}

25
web/components/issues/issue-layouts/properties/assignee.tsx
View File

@ -1,16 +1,13 @@
import { Fragment, useState } from "react";
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
import { usePopper } from "react-popper";
// ui
import { AssigneesList, Avatar } from "components/ui";
import { Combobox } from "@headlessui/react";
import { Tooltip } from "@plane/ui";
import { Check, ChevronDown, Search, User2 } from "lucide-react";
// ui
import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
// types
import { Placement } from "@popperjs/core";
import { RootStore } from "store/root";
export interface IIssuePropertyAssignee {
view?: "profile" | "workspace" | "project";
@ -41,7 +38,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
multiple = false,
} = props;
const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
const { workspace: workspaceStore, project: projectStore } = useMobxStore();
const workspaceSlug = workspaceStore?.workspaceSlug;
const [query, setQuery] = useState("");
@ -49,17 +46,17 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const projectMembers = projectId && projectStore?.members?.[projectId];
const projectMembers = projectId ? projectStore?.members?.[projectId] : undefined;
const fetchProjectMembers = () =>
workspaceSlug && projectId && projectStore.fetchProjectMembers(workspaceSlug, projectId);
const options = (projectMembers ? projectMembers : [])?.map((member) => ({
const options = (projectMembers ?? [])?.map((member) => ({
value: member.member.id,
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar name={member.member.display_name} src={member.member.avatar} showTooltip={false} />
{member.member.display_name}
</div>
),
@ -83,7 +80,15 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
>
<div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
{value && value.length > 0 && Array.isArray(value) ? (
<AssigneesList userIds={value} length={3} showLength={true} />
<AvatarGroup showTooltip={false}>
{value.map((assigneeId) => {
const member = projectMembers?.find((m) => m.member.id === assigneeId)?.member;
if (!member) return null;
return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
})}
</AvatarGroup>
) : (
<span
className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none

2
web/components/issues/issue-layouts/roots/project-layout-root.tsx
View File

@ -33,8 +33,6 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
const issueCount = issueStore.getIssuesCount;
console.log("issueCount", issueCount);
return (
<div className="relative w-full h-full flex flex-col overflow-hidden">
<ProjectAppliedFiltersRoot />

17
web/components/issues/select/assignee.tsx
View File

@ -1,12 +1,9 @@
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// ui
import { AssigneesList, Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
import { Avatar, AvatarGroup, CustomSearchSelect } from "@plane/ui";
import { User2 } from "lucide-react";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
@ -35,7 +32,7 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
query: member.member.display_name ?? "",
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
{member.member.is_bot ? member.member.first_name : member.member.display_name}
</div>
),
@ -50,7 +47,15 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
<div className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
{value && value.length > 0 && Array.isArray(value) ? (
<div className="-my-0.5 flex items-center justify-center gap-2">
<AssigneesList userIds={value} length={3} showLength />
<AvatarGroup showTooltip={false}>
{value.map((assigneeId) => {
const member = members?.find((m) => m.member.id === assigneeId)?.member;
if (!member) return null;
return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
})}
</AvatarGroup>
</div>
) : (
<div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">

18
web/components/issues/sidebar-select/assignee.tsx
View File

@ -1,14 +1,10 @@
import React from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// ui
import { CustomSearchSelect } from "@plane/ui";
import { AssigneesList, Avatar } from "components/ui/avatar";
import { Avatar, AvatarGroup, CustomSearchSelect } from "@plane/ui";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
@ -37,7 +33,7 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
{member.member.display_name}
</div>
),
@ -50,7 +46,15 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
<>
{value && value.length > 0 && Array.isArray(value) ? (
<div className="-my-0.5 flex items-center gap-2">
<AssigneesList userIds={value} length={3} showLength={false} />
<AvatarGroup>
{value.map((assigneeId) => {
const member = members?.find((m) => m.member.id === assigneeId)?.member;
if (!member) return null;
return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
})}
</AvatarGroup>
<span className="text-custom-text-100 text-xs">{value.length} Assignees</span>
</div>
) : (

9
web/components/modules/module-card-item.tsx
View File

@ -9,8 +9,7 @@ import useToast from "hooks/use-toast";
// components
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
// ui
import { AssigneesList } from "components/ui";
import { CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
import { Avatar, AvatarGroup, CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
// icons
import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
// helpers
@ -164,7 +163,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
{module.members_detail.length > 0 && (
<Tooltip tooltipContent={`${module.members_detail.length} Members`}>
<div className="flex items-center gap-1 cursor-default">
<AssigneesList users={module.members_detail} length={3} />
<AvatarGroup showTooltip={false}>
{module.members_detail.map((member) => (
<Avatar key={member.id} name={member.display_name} src={member.avatar} />
))}
</AvatarGroup>
</div>
</Tooltip>
)}

9
web/components/modules/module-list-item.tsx
View File

@ -9,8 +9,7 @@ import useToast from "hooks/use-toast";
// components
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
// ui
import { AssigneesList } from "components/ui";
import { CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
import { Avatar, AvatarGroup, CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
// icons
import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
// helpers
@ -174,7 +173,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
<Tooltip tooltipContent={`${module.members_detail.length} Members`}>
<div className="flex items-center justify-center gap-1 cursor-default w-16">
{module.members_detail.length > 0 ? (
<AssigneesList users={module.members_detail} length={2} />
<AvatarGroup showTooltip={false}>
{module.members_detail.map((member) => (
<Avatar key={member.id} name={member.display_name} src={member.avatar} />
))}
</AvatarGroup>
) : (
<span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
<User2 className="h-4 w-4 text-custom-text-400" />

11
web/components/modules/select/lead.tsx
View File

@ -4,8 +4,7 @@ import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// ui
import { Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
import { Avatar, CustomSearchSelect } from "@plane/ui";
// icons
import { UserCircle } from "lucide-react";
// fetch-keys
@ -34,7 +33,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
{member.member.display_name}
</div>
),
@ -48,7 +47,11 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
value={value}
label={
<div className="flex items-center gap-2">
{selectedOption ? <Avatar user={selectedOption} /> : <UserCircle className="h-4 w-4 text-custom-text-200" />}
{selectedOption ? (
<Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
) : (
<UserCircle className="h-4 w-4 text-custom-text-200" />
)}
{selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">Lead</span>}
</div>
}

16
web/components/modules/select/members.tsx
View File

@ -4,9 +4,7 @@ import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// ui
import { AssigneesList, Avatar } from "components/ui";
// icons
import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
@ -32,7 +30,7 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
{member.member.display_name}
</div>
),
@ -45,7 +43,15 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
<div className="flex items-center gap-2 text-custom-text-200">
{value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center justify-center gap-2">
<AssigneesList userIds={value} length={3} showLength={false} />
<AvatarGroup>
{value.map((assigneeId) => {
const member = members?.find((m) => m.member.id === assigneeId)?.member;
if (!member) return null;
return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
})}
</AvatarGroup>
<span className="text-custom-text-200">{value.length} Assignees</span>
</div>
) : (

7
web/components/modules/sidebar-select/select-lead.tsx
View File

@ -4,8 +4,7 @@ import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// ui
import { Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
import { Avatar, CustomSearchSelect } from "@plane/ui";
// icons
import { ChevronDown, UserCircle2 } from "lucide-react";
// fetch-keys
@ -36,7 +35,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} height="18px" width="18px" />
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
{member.member.display_name}
</div>
),
@ -58,7 +57,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
customButton={
selectedOption ? (
<div className="flex items-center justify-start gap-2 p-0.5 w-full">
<Avatar user={selectedOption} />
<Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
<span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
</div>
) : (

20
web/components/modules/sidebar-select/select-members.tsx
View File

@ -1,14 +1,10 @@
import React from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// ui
import { AssigneesList, Avatar } from "components/ui";
import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
// icons
import { ChevronDown } from "lucide-react";
// fetch-keys
@ -38,7 +34,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} height="18px" width="18px" />
<Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
{member.member.display_name}
</div>
),
@ -57,8 +53,16 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
customButtonClassName="rounded-sm"
customButton={
value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center gap-2 p-0.5 w-full">
<AssigneesList userIds={value} length={2} />
<div className="px-1">
<AvatarGroup showTooltip={false}>
{value.map((assigneeId) => {
const member = members?.find((m) => m.member.id === assigneeId)?.member;
if (!member) return null;
return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
})}
</AvatarGroup>
</div>
) : (
<div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">

19
web/components/project/card.tsx
View File

@ -8,16 +8,15 @@ import { RootStore } from "store/root";
import { LinkIcon, Lock, Pencil, Star } from "lucide-react";
// hooks
import useToast from "hooks/use-toast";
// components
import { DeleteProjectModal, JoinProjectModal } from "components/project";
// ui
import { Button, Tooltip } from "@plane/ui";
import { Avatar, AvatarGroup, Button, Tooltip } from "@plane/ui";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
// types
import type { IProject } from "types";
// components
import { DeleteProjectModal, JoinProjectModal } from "components/project";
import { AssigneesList } from "components/ui";
export type ProjectCardProps = {
project: IProject;
@ -177,7 +176,17 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
>
{projectMembersIds.length > 0 ? (
<div className="flex items-center cursor-pointer gap-2 text-custom-text-200">
<AssigneesList userIds={projectMembersIds} length={3} showLength />
<AvatarGroup showTooltip={false}>
{projectMembersIds.map((memberId) => {
const member = project.members?.find((m) => m.id === memberId);
if (!member) return null;
return (
<Avatar key={member.id} name={member.member__display_name} src={member.member__avatar} />
);
})}
</AvatarGroup>
</div>
) : (
<span className="text-sm italic text-custom-text-400">No Member Yet</span>

15
web/components/project/member-select.tsx
View File

@ -1,15 +1,12 @@
import React from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// store
import { observer } from "mobx-react-lite";
import useSWR from "swr";
import { Ban } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
// icon
import { Ban } from "lucide-react";
import { Avatar, CustomSearchSelect } from "@plane/ui";
type Props = {
value: any;
@ -41,7 +38,7 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
{member.member.display_name}
</div>
),
@ -54,7 +51,7 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
value={value}
label={
<div className="flex items-center gap-2">
{selectedOption && <Avatar user={selectedOption} />}
{selectedOption && <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />}
{selectedOption ? (
selectedOption?.display_name
) : (

18
web/components/project/members-select.tsx
View File

@ -4,7 +4,9 @@ import { Placement } from "@popperjs/core";
import { Combobox } from "@headlessui/react";
import { Check, ChevronDown, Search, User2 } from "lucide-react";
// components
import { AssigneesList, Avatar, Tooltip } from "components/ui";
import { Tooltip } from "components/ui";
// ui
import { Avatar, AvatarGroup } from "@plane/ui";
// types
import { IUserLite } from "types";
@ -63,7 +65,7 @@ export const MembersSelect: React.FC<Props> = ({
query: member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member} />
<Avatar name={member.display_name} src={member.avatar} />
{member.display_name}
</div>
),
@ -87,7 +89,15 @@ export const MembersSelect: React.FC<Props> = ({
>
<div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
{value && value.length > 0 && Array.isArray(value) ? (
<AssigneesList userIds={value} length={3} showLength />
<AvatarGroup showTooltip={false}>
{value.map((assigneeId) => {
const member = members?.find((m) => m.id === assigneeId);
if (!member) return null;
return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
})}
</AvatarGroup>
) : (
<span
className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none
@ -143,7 +153,7 @@ export const MembersSelect: React.FC<Props> = ({
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active && !selected ? "bg-custom-background-80" : ""
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>

20
web/components/project/send-project-invitation-modal.tsx
View File

@ -3,11 +3,9 @@ import { useRouter } from "next/router";
import useSWR from "swr";
import { useForm, Controller, useFieldArray } from "react-hook-form";
import { Dialog, Transition } from "@headlessui/react";
// ui
import { Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
import { Avatar } from "components/ui";
//icons
import { ChevronDown, Plus, X } from "lucide-react";
// ui
import { Avatar, Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
// services
import { ProjectService } from "services/project";
import { WorkspaceService } from "services/workspace.service";
@ -139,7 +137,7 @@ export const SendProjectInvitationModal: React.FC<Props> = (props) => {
query: person.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={person.member} />
<Avatar name={person.member?.display_name} src={person.member?.avatar} />
{person.member.display_name} ({person.member.first_name + " " + person.member.last_name})
</div>
),
@ -189,15 +187,18 @@ export const SendProjectInvitationModal: React.FC<Props> = (props) => {
control={control}
name={`members.${index}.member_id`}
rules={{ required: "Please select a member" }}
render={({ field: { value, onChange } }) => (
render={({ field: { value, onChange } }) => {
const selectedMember = people?.find((p) => p.member.id === value)?.member;
return (
<CustomSearchSelect
value={value}
customButton={
<button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 shadow-sm duration-300 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 focus:outline-none px-3 py-2 text-sm text-left">
{value && value !== "" ? (
<div className="flex items-center gap-2">
<Avatar user={people?.find((p) => p.member.id === value)?.member} />
{people?.find((p) => p.member.id === value)?.member.display_name}
<Avatar name={selectedMember?.display_name} src={selectedMember?.avatar} />
{selectedMember?.display_name}
</div>
) : (
<div className="flex items-center gap-2 py-0.5">Select co-worker</div>
@ -211,7 +212,8 @@ export const SendProjectInvitationModal: React.FC<Props> = (props) => {
options={options}
width="w-full min-w-[12rem]"
/>
)}
);
}}
/>
{errors.members && errors.members[index]?.member_id && (
<span className="text-sm px-1 text-red-500">

148
web/components/ui/avatar.tsx
View File

@ -1,148 +0,0 @@
import Image from "next/image";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { WorkspaceService } from "services/workspace.service";
// icons
import User from "public/user.png";
import { Plus } from "lucide-react";
// types
import { IUser, IUserLite } from "types";
// fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
type AvatarProps = {
user?: Partial<IUser> | Partial<IUserLite> | null;
index?: number;
height?: string;
width?: string;
fontSize?: string;
showName?: boolean;
};
// services
const workspaceService = new WorkspaceService();
export const Avatar: React.FC<AvatarProps> = ({
user,
index,
height = "24px",
width = "24px",
fontSize = "12px",
showName,
}) => (
<div
className={`relative rounded border-[0.5px] ${
index && index !== 0 ? "-ml-3.5 border-custom-border-200" : "border-transparent"
}`}
style={{
height: height,
width: width,
}}
>
{user && user.avatar && user.avatar !== "" ? (
<div
className={`rounded border-[0.5px] ${
index ? "border-custom-border-200 bg-custom-background-100" : "border-transparent"
}`}
style={{
height: height,
width: width,
}}
>
<img
src={user.avatar}
className="absolute top-0 left-0 h-full w-full object-cover rounded"
alt={user.display_name}
/>
</div>
) : (
<div
className="grid place-items-center text-xs capitalize text-white rounded bg-gray-700 border-[0.5px] border-custom-border-200"
style={{
height: height,
width: width,
fontSize: fontSize,
}}
>
{user?.display_name?.charAt(0)}
</div>
)}
{showName && <span>{user?.display_name ? user?.display_name : user?.first_name}</span>}
</div>
);
type AsigneesListProps = {
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
userIds?: string[];
height?: string;
width?: string;
length?: number;
showLength?: boolean;
};
export const AssigneesList: React.FC<AsigneesListProps> = ({
users,
userIds,
height = "24px",
width = "24px",
length = 3,
showLength = true,
}) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: people } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug as string) : null
);
if ((users && users.length === 0) || (userIds && userIds.length === 0))
return (
<div className="h-5 w-5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-80">
<Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
</div>
);
return (
<>
{users && (
<>
{users.slice(0, length).map((user, index) => (
<Avatar key={user?.id} user={user} index={index} height={height} width={width} />
))}
{users.length > length ? (
<div className="-ml-3.5 relative h-6 w-6 rounded">
<div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
<Plus className="h-3 w-3 -mr-0.5" />
{users.length - length}
</div>
</div>
) : null}
</>
)}
{userIds && (
<>
{userIds.slice(0, length).map((userId, index) => {
const user = people?.find((p) => p.member.id === userId)?.member;
return <Avatar key={userId} user={user} index={index} height={height} width={width} />;
})}
{showLength ? (
userIds.length > length ? (
<div className="-ml-3.5 relative h-6 w-6 rounded">
<div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
<Plus className="h-3 w-3 -mr-0.5" />
{userIds.length - length}
</div>
</div>
) : null
) : (
""
)}
</>
)}
</>
);
};

1
web/components/ui/index.ts
View File

@ -3,7 +3,6 @@ export * from "./dropdowns";
export * from "./graphs";
export * from "./input";
export * from "./text-area";
export * from "./avatar";
export * from "./date";
export * from "./datepicker";
export * from "./empty-space";

1
web/components/views/index.ts
View File

@ -1,7 +1,6 @@
export * from "./delete-view-modal";
export * from "./form";
export * from "./modal";
export * from "./select-filters";
export * from "./view-list-item";
export * from "./views-list";
export * from "./workspace-dashboard";

258
web/components/views/select-filters.tsx
View File

@ -1,258 +0,0 @@
import { useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { ProjectStateService, ProjectService } from "services/project";
import { IssueLabelService } from "services/issue";
// ui
import { Avatar, MultiLevelDropdown } from "components/ui";
// icons
import { PriorityIcon, StateGroupIcon } from "@plane/ui";
// helpers
import { getStatesList } from "helpers/state.helper";
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
// types
import { IIssueFilterOptions } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
// constants
import { PRIORITIES } from "constants/project";
import { DATE_FILTER_OPTIONS } from "constants/filters";
type Props = {
filters: Partial<IIssueFilterOptions>;
onSelect: (option: any) => void;
direction?: "left" | "right";
height?: "sm" | "md" | "rg" | "lg";
};
const projectService = new ProjectService();
const projectStateService = new ProjectStateService();
const issueLabelService = new IssueLabelService();
export const SelectFilters: React.FC<Props> = ({ filters, onSelect, direction = "right", height = "md" }) => {
const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
const [dateFilterType, setDateFilterType] = useState<{
title: string;
type: "start_date" | "target_date";
}>({
title: "",
type: "start_date",
});
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: states } = useSWR(
workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const statesList = getStatesList(states);
const { data: members } = useSWR(
projectId ? PROJECT_MEMBERS(projectId as string) : null,
workspaceSlug && projectId
? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
: null
);
const { data: issueLabels } = useSWR(
projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
workspaceSlug && projectId
? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId.toString())
: null
);
const projectFilterOption = [
{
id: "priority",
label: "Priority",
value: PRIORITIES,
hasChildren: true,
children: PRIORITIES.map((priority) => ({
id: priority === null ? "null" : priority,
label: (
<div className="flex items-center gap-2 capitalize">
<PriorityIcon priority={priority} />
{priority ?? "None"}
</div>
),
value: {
key: "priority",
value: priority === null ? "null" : priority,
},
selected: filters?.priority?.includes(priority === null ? "null" : priority),
})),
},
{
id: "state",
label: "State",
value: statesList,
hasChildren: true,
children: statesList?.map((state) => ({
id: state.id,
label: (
<div className="flex items-center gap-2">
<StateGroupIcon stateGroup={state.group} color={state.color} />
{state.name}
</div>
),
value: {
key: "state",
value: state.id,
},
selected: filters?.state?.includes(state.id),
})),
},
{
id: "assignees",
label: "Assignees",
value: members,
hasChildren: true,
children: members?.map((member) => ({
id: member.member.id,
label: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
{member.member.display_name}
</div>
),
value: {
key: "assignees",
value: member.member.id,
},
selected: filters?.assignees?.includes(member.member.id),
})),
},
{
id: "created_by",
label: "Created by",
value: members,
hasChildren: true,
children: members?.map((member) => ({
id: member.member.id,
label: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
{member.member.display_name}
</div>
),
value: {
key: "created_by",
value: member.member.id,
},
selected: filters?.created_by?.includes(member.member.id),
})),
},
{
id: "labels",
label: "Labels",
value: issueLabels,
hasChildren: true,
children: issueLabels?.map((label) => ({
id: label.id,
label: (
<div className="flex items-center gap-2">
<div
className="h-2 w-2 rounded-full"
style={{
backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
}}
/>
{label.name}
</div>
),
value: {
key: "labels",
value: label.id,
},
selected: filters?.labels?.includes(label.id),
})),
},
{
id: "start_date",
label: "Start date",
value: DATE_FILTER_OPTIONS,
hasChildren: true,
children: [
...DATE_FILTER_OPTIONS.map((option) => ({
id: option.name,
label: option.name,
value: {
key: "start_date",
value: option.value,
},
selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], [option.value]),
})),
{
id: "custom",
label: "Custom",
value: "custom",
element: (
<button
onClick={() => {
setIsDateFilterModalOpen(true);
setDateFilterType({
title: "Start date",
type: "start_date",
});
}}
className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
>
Custom
</button>
),
},
],
},
{
id: "target_date",
label: "Due date",
value: DATE_FILTER_OPTIONS,
hasChildren: true,
children: [
...DATE_FILTER_OPTIONS.map((option) => ({
id: option.name,
label: option.name,
value: {
key: "target_date",
value: option.value,
},
selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], [option.value]),
})),
{
id: "custom",
label: "Custom",
value: "custom",
element: (
<button
onClick={() => {
setIsDateFilterModalOpen(true);
setDateFilterType({
title: "Due date",
type: "target_date",
});
}}
className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
>
Custom
</button>
),
},
],
},
];
return (
<>
<MultiLevelDropdown
label="Filters"
onSelect={onSelect}
direction={direction}
height={height}
options={projectFilterOption}
/>
</>
);
};

17
web/components/workspace/member-select.tsx
View File

@ -2,9 +2,8 @@ import React, { FC, useState, Fragment } from "react";
// popper js
import { usePopper } from "react-popper";
// ui
import { Input, Tooltip } from "@plane/ui";
import { Avatar, Input } from "@plane/ui";
import { Listbox } from "@headlessui/react";
import { Avatar } from "components/ui";
// icons
import { Check, Search, User2 } from "lucide-react";
// types
@ -49,22 +48,13 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
: options?.filter((option) => option.member.display_name.toLowerCase().includes(query.toLowerCase()));
const label = (
<Tooltip
tooltipHeading="Assignee"
tooltipContent={
options && options.length > 0
? options.map((assignee) => assignee?.member.display_name).join(", ")
: "No Assignee"
}
position="top"
>
<div
className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded-md border border-custom-border-300 duration-300 focus:outline-none
"
>
{value ? (
<>
<Avatar height="18px" width="18px" user={value?.member} />
<Avatar name={value?.member.display_name} src={value?.member.avatar} />
<span className="text-xs leading-4"> {value?.member.display_name}</span>
</>
) : (
@ -74,7 +64,6 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
</>
)}
</div>
</Tooltip>
);
return (
@ -122,7 +111,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
{({ selected }) => (
<>
<div className="flex items-center gap-2">
<Avatar user={workspaceMember.member} />
<Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
{workspaceMember.member.display_name}
</div>
{selected && <Check className="h-3.5 w-3.5" />}

10
web/components/workspace/sidebar-dropdown.tsx
View File

@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
import Link from "next/link";
import { Menu, Transition } from "@headlessui/react";
import { useTheme } from "next-themes";
import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
@ -12,11 +13,8 @@ import useToast from "hooks/use-toast";
// services
import { UserService } from "services/user.service";
import { AuthService } from "services/auth.service";
// components
import { Avatar } from "components/ui";
import { Loader } from "@plane/ui";
// icons
import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
// ui
import { Avatar, Loader } from "@plane/ui";
// types
import { IWorkspace } from "types";
@ -240,7 +238,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
{!themeStore.sidebarCollapsed && (
<Menu as="div" className="relative flex-shrink-0">
<Menu.Button className="grid place-items-center outline-none">
<Avatar user={user} height="28px" width="28px" fontSize="14px" />
<Avatar name={user?.display_name} src={user?.avatar} size={32} shape="square" />
</Menu.Button>
<Transition

2
web/constants/issue.ts
View File

@ -394,7 +394,7 @@ export const getValueFromObject = (object: Object, key: string): string | number
let value: any = object;
if (!value || keys.length === 0) return null;
for (const _key of keys) value = value[_key];
for (const _key of keys) value = value?.[_key];
return value;
};