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

fix: module sidebar status select (#2614)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-11-02 18:48:57 +05:30 committed by GitHub
parent 02d4d32f7a
commit b0397dfd74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/components/modules/sidebar.tsx
View File

@ -15,7 +15,7 @@ import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules"; import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
import ProgressChart from "components/core/sidebar/progress-chart"; import ProgressChart from "components/core/sidebar/progress-chart";
// ui // ui
import { CustomMenu, Loader, LayersIcon } from "@plane/ui"; import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon } from "@plane/ui";
// icon // icon
import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, Plus, Trash2 } from "lucide-react"; import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, Plus, Trash2 } from "lucide-react";
// helpers // helpers
@ -260,13 +260,35 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{moduleDetails.name}</h4> <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{moduleDetails.name}</h4>
<div className="flex items-center gap-5"> <div className="flex items-center gap-5">
{moduleStatus && ( <Controller
control={control}
name="status"
render={({ field: { value } }) => (
<CustomSelect
customButton={
<span <span
className={`flex items-center cursor-default justify-center text-sm h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`} className={`flex items-center cursor-default justify-center text-sm h-6 w-20 rounded-sm ${moduleStatus?.textColor} ${moduleStatus?.bgColor}`}
> >
{moduleStatus.label} {moduleStatus?.label ?? "Backlog"}
</span> </span>
}
value={value}
onChange={(value: any) => {
submitChanges({ status: value });
}}
>
{MODULE_STATUS.map((status) => (
<CustomSelect.Option key={status.value} value={status.value}>
<div className="flex items-center gap-2">
<ModuleStatusIcon status={status.value} />
{status.label}
</div>
</CustomSelect.Option>
))}
</CustomSelect>
)} )}
/>
<span className="text-sm text-custom-text-300 font-mediu cursor-default"> <span className="text-sm text-custom-text-300 font-mediu cursor-default">
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "} {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}