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

fix: cycle & module sidebar date range picker (#3127)

Browse Source 
* fix: cycle sidebar date range picker

* chore: cycle sidebar hover pointer

* fix: module sidebar date range picker

* fix: module sidebar state select popover pointer
This commit is contained in:
Lakhan Baheti 2023-12-14 16:31:39 +05:30 committed by GitHub
parent 5c7382d894
commit 1c546e3cc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -273,10 +273,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
</Loader> </Loader>
); );
const endDate = new Date(cycleDetails.end_date ?? ""); const endDate = new Date(watch("end_date") ?? cycleDetails.end_date ?? "");
const startDate = new Date(cycleDetails.start_date ?? ""); const startDate = new Date(watch("start_date") ?? cycleDetails.start_date ?? "");
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); const areYearsEqual =
startDate.getFullYear() === endDate.getFullYear() || isNaN(startDate.getFullYear()) || isNaN(endDate.getFullYear());
const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus); const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
@ -355,7 +356,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<Popover className="flex h-full items-center justify-center rounded-lg"> <Popover className="flex h-full items-center justify-center rounded-lg">
<Popover.Button <Popover.Button
className={`text-sm font-medium text-custom-text-300 ${ className={`text-sm font-medium text-custom-text-300 ${
isEditingAllowed ? "cursor-default" : "cursor-not-allowed" isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`} }`}
disabled={isCompleted || !isEditingAllowed} disabled={isCompleted || !isEditingAllowed}
> >
@ -380,10 +381,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
handleStartDateChange(val); handleStartDateChange(val);
} }
}} }}
startDate={watch("start_date") ? `${watch("start_date")}` : null} startDate={watch("start_date") ?? watch("end_date") ?? null}
endDate={watch("end_date") ? `${watch("end_date")}` : null} endDate={watch("end_date") ?? watch("start_date") ?? null}
maxDate={new Date(`${watch("end_date")}`)} maxDate={new Date(`${watch("end_date")}`)}
selectsStart selectsStart={watch("end_date") ? true : false}
/> />
</Popover.Panel> </Popover.Panel>
</Transition> </Transition>
@ -393,9 +394,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<> <>
<Popover.Button <Popover.Button
className={`text-sm font-medium text-custom-text-300 ${ className={`text-sm font-medium text-custom-text-300 ${
isEditingAllowed ? "cursor-default" : "cursor-not-allowed" isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`} }`}
disabled={isCompleted ?? !isEditingAllowed} disabled={isCompleted || !isEditingAllowed}
> >
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
</Popover.Button> </Popover.Button>
@ -418,10 +419,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
handleEndDateChange(val); handleEndDateChange(val);
} }
}} }}
startDate={watch("start_date") ? `${watch("start_date")}` : null} startDate={watch("start_date") ?? watch("end_date") ?? null}
endDate={watch("end_date") ? `${watch("end_date")}` : null} endDate={watch("end_date") ?? watch("start_date") ?? null}
minDate={new Date(`${watch("start_date")}`)} minDate={new Date(`${watch("start_date")}`)}
selectsEnd selectsEnd={watch("start_date") ? true : false}
/> />
</Popover.Panel> </Popover.Panel>
</Transition> </Transition>

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

@ -13,12 +13,13 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
value: string | null | undefined; value: string | null | undefined;
onChange: (val: string) => void; onChange: (val: string) => void;
disabled?: boolean;
}; };
const projectMemberService = new ProjectMemberService(); const projectMemberService = new ProjectMemberService();
export const SidebarLeadSelect: FC<Props> = (props) => { export const SidebarLeadSelect: FC<Props> = (props) => {
const { value, onChange } = props; const { value, onChange, disabled = false } = props;
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -51,6 +52,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
</div> </div>
<div className="flex w-1/2 items-center rounded-sm"> <div className="flex w-1/2 items-center rounded-sm">
<CustomSearchSelect <CustomSearchSelect
disabled={disabled}
className="w-full rounded-sm" className="w-full rounded-sm"
value={value} value={value}
customButtonClassName="rounded-sm" customButtonClassName="rounded-sm"
@ -63,7 +65,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
) : ( ) : (
<div className="group flex w-full items-center justify-between gap-2 p-1 text-sm text-custom-text-400"> <div className="group flex w-full items-center justify-between gap-2 p-1 text-sm text-custom-text-400">
<span>No lead</span> <span>No lead</span>
<ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" /> {!disabled && <ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" />}
</div> </div>
) )
} }

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

@ -13,12 +13,13 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
value: string[] | undefined; value: string[] | undefined;
onChange: (val: string[]) => void; onChange: (val: string[]) => void;
disabled?: boolean;
}; };
// services // services
const projectMemberService = new ProjectMemberService(); const projectMemberService = new ProjectMemberService();
export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => { export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -48,6 +49,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
</div> </div>
<div className="flex w-1/2 items-center rounded-sm "> <div className="flex w-1/2 items-center rounded-sm ">
<CustomSearchSelect <CustomSearchSelect
disabled={disabled}
className="w-full rounded-sm" className="w-full rounded-sm"
value={value ?? []} value={value ?? []}
customButtonClassName="rounded-sm" customButtonClassName="rounded-sm"
@ -67,7 +69,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
) : ( ) : (
<div className="group flex w-full items-center justify-between gap-2 p-1 text-sm text-custom-text-400"> <div className="group flex w-full items-center justify-between gap-2 p-1 text-sm text-custom-text-400">
<span>No members</span> <span>No members</span>
<ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" /> {!disabled && <ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" />}
</div> </div>
) )
} }

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

@ -245,10 +245,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</Loader> </Loader>
); );
const startDate = new Date(moduleDetails.start_date ?? ""); const startDate = new Date(watch("start_date") ?? moduleDetails.start_date ?? "");
const endDate = new Date(moduleDetails.target_date ?? ""); const endDate = new Date(watch("target_date") ?? moduleDetails.target_date ?? "");
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); const areYearsEqual =
startDate.getFullYear() === endDate.getFullYear() || isNaN(startDate.getFullYear()) || isNaN(endDate.getFullYear());
const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status); const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
@ -316,7 +317,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
customButton={ customButton={
<span <span
className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${ className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
isEditingAllowed ? "cursor-default" : "cursor-not-allowed" isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`} }`}
style={{ style={{
color: moduleStatus ? moduleStatus.color : "#a3a3a2", color: moduleStatus ? moduleStatus.color : "#a3a3a2",
@ -348,7 +349,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<Popover className="flex h-full items-center justify-center rounded-lg"> <Popover className="flex h-full items-center justify-center rounded-lg">
<Popover.Button <Popover.Button
className={`text-sm font-medium text-custom-text-300 ${ className={`text-sm font-medium text-custom-text-300 ${
isEditingAllowed ? "cursor-default" : "cursor-not-allowed" isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`} }`}
disabled={!isEditingAllowed} disabled={!isEditingAllowed}
> >
@ -372,10 +373,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
handleStartDateChange(val); handleStartDateChange(val);
} }
}} }}
startDate={watch("start_date") ? `${watch("start_date")}` : null} startDate={watch("start_date") ?? watch("target_date") ?? null}
endDate={watch("target_date") ? `${watch("target_date")}` : null} endDate={watch("target_date") ?? watch("start_date") ?? null}
maxDate={new Date(`${watch("target_date")}`)} maxDate={new Date(`${watch("target_date")}`)}
selectsStart selectsStart={watch("target_date") ? true : false}
/> />
</Popover.Panel> </Popover.Panel>
</Transition> </Transition>
@ -385,7 +386,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<> <>
<Popover.Button <Popover.Button
className={`text-sm font-medium text-custom-text-300 ${ className={`text-sm font-medium text-custom-text-300 ${
isEditingAllowed ? "cursor-default" : "cursor-not-allowed" isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`} }`}
disabled={!isEditingAllowed} disabled={!isEditingAllowed}
> >
@ -409,10 +410,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
handleEndDateChange(val); handleEndDateChange(val);
} }
}} }}
startDate={watch("start_date") ? `${watch("start_date")}` : null} startDate={watch("start_date") ?? watch("target_date") ?? null}
endDate={watch("target_date") ? `${watch("target_date")}` : null} endDate={watch("target_date") ?? watch("start_date") ?? null}
minDate={new Date(`${watch("start_date")}`)} minDate={new Date(`${watch("start_date")}`)}
selectsEnd selectsEnd={watch("start_date") ? true : false}
/> />
</Popover.Panel> </Popover.Panel>
</Transition> </Transition>
@ -434,6 +435,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
name="lead" name="lead"
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<SidebarLeadSelect <SidebarLeadSelect
disabled={!isEditingAllowed}
value={value} value={value}
onChange={(val: string) => { onChange={(val: string) => {
submitChanges({ lead: val }); submitChanges({ lead: val });
@ -446,6 +448,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
name="members" name="members"
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<SidebarMembersSelect <SidebarMembersSelect
disabled={!isEditingAllowed}
value={value} value={value}
onChange={(val: string[]) => { onChange={(val: string[]) => {
submitChanges({ members: val }); submitChanges({ members: val });