thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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>
);
const endDate = new Date(cycleDetails.end_date ?? "");
const startDate = new Date(cycleDetails.start_date ?? "");
const endDate = new Date(watch("end_date") ?? cycleDetails.end_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);
@ -355,7 +356,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<Popover className="flex h-full items-center justify-center rounded-lg">
<Popover.Button
className={`text-sm font-medium text-custom-text-300 ${
isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`}
disabled={isCompleted || !isEditingAllowed}
>
@ -380,10 +381,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
handleStartDateChange(val);
}
}}
startDate={watch("start_date") ? `${watch("start_date")}` : null}
endDate={watch("end_date") ? `${watch("end_date")}` : null}
startDate={watch("start_date") ?? watch("end_date") ?? null}
endDate={watch("end_date") ?? watch("start_date") ?? null}
maxDate={new Date(`${watch("end_date")}`)}
selectsStart
selectsStart={watch("end_date") ? true : false}
/>
</Popover.Panel>
</Transition>
@ -393,9 +394,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<>
<Popover.Button
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, "_ _")}
</Popover.Button>
@ -418,10 +419,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
handleEndDateChange(val);
}
}}
startDate={watch("start_date") ? `${watch("start_date")}` : null}
endDate={watch("end_date") ? `${watch("end_date")}` : null}
startDate={watch("start_date") ?? watch("end_date") ?? null}
endDate={watch("end_date") ?? watch("start_date") ?? null}
minDate={new Date(`${watch("start_date")}`)}
selectsEnd
selectsEnd={watch("start_date") ? true : false}
/>
</Popover.Panel>
</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 = {
value: string | null | undefined;
onChange: (val: string) => void;
disabled?: boolean;
};
const projectMemberService = new ProjectMemberService();
export const SidebarLeadSelect: FC<Props> = (props) => {
const { value, onChange } = props;
const { value, onChange, disabled = false } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -51,6 +52,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
</div>
<div className="flex w-1/2 items-center rounded-sm">
<CustomSearchSelect
disabled={disabled}
className="w-full rounded-sm"
value={value}
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">
<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>
)
}

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

@ -13,12 +13,13 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = {
value: string[] | undefined;
onChange: (val: string[]) => void;
disabled?: boolean;
};
// services
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 { workspaceSlug, projectId } = router.query;
@ -48,6 +49,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
</div>
<div className="flex w-1/2 items-center rounded-sm ">
<CustomSearchSelect
disabled={disabled}
className="w-full rounded-sm"
value={value ?? []}
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">
<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>
)
}

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

@ -245,10 +245,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</Loader>
);
const startDate = new Date(moduleDetails.start_date ?? "");
const endDate = new Date(moduleDetails.target_date ?? "");
const startDate = new Date(watch("start_date") ?? moduleDetails.start_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);
@ -316,7 +317,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
customButton={
<span
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={{
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.Button
className={`text-sm font-medium text-custom-text-300 ${
isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`}
disabled={!isEditingAllowed}
>
@ -372,10 +373,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
handleStartDateChange(val);
}
}}
startDate={watch("start_date") ? `${watch("start_date")}` : null}
endDate={watch("target_date") ? `${watch("target_date")}` : null}
startDate={watch("start_date") ?? watch("target_date") ?? null}
endDate={watch("target_date") ?? watch("start_date") ?? null}
maxDate={new Date(`${watch("target_date")}`)}
selectsStart
selectsStart={watch("target_date") ? true : false}
/>
</Popover.Panel>
</Transition>
@ -385,7 +386,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<>
<Popover.Button
className={`text-sm font-medium text-custom-text-300 ${
isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`}
disabled={!isEditingAllowed}
>
@ -409,10 +410,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
handleEndDateChange(val);
}
}}
startDate={watch("start_date") ? `${watch("start_date")}` : null}
endDate={watch("target_date") ? `${watch("target_date")}` : null}
startDate={watch("start_date") ?? watch("target_date") ?? null}
endDate={watch("target_date") ?? watch("start_date") ?? null}
minDate={new Date(`${watch("start_date")}`)}
selectsEnd
selectsEnd={watch("start_date") ? true : false}
/>
</Popover.Panel>
</Transition>
@ -434,6 +435,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
name="lead"
render={({ field: { value } }) => (
<SidebarLeadSelect
disabled={!isEditingAllowed}
value={value}
onChange={(val: string) => {
submitChanges({ lead: val });
@ -446,6 +448,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
name="members"
render={({ field: { value } }) => (
<SidebarMembersSelect
disabled={!isEditingAllowed}
value={value}
onChange={(val: string[]) => {
submitChanges({ members: val });