fix: cycle layout not getting initialized (#3961)

This commit is contained in:
Aaryan Khandelwal 2024-03-15 17:31:28 +05:30 committed by GitHub
parent c17748eec2
commit 0789238282
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 21 deletions

View File

@ -22,12 +22,14 @@ export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
<div className="h-full w-full"> <div className="h-full w-full">
<div className="flex h-full w-full justify-between"> <div className="flex h-full w-full justify-between">
<div className="h-full w-full flex flex-col p-8 space-y-8 vertical-scrollbar scrollbar-lg"> <div className="h-full w-full flex flex-col p-8 space-y-8 vertical-scrollbar scrollbar-lg">
<CyclesBoardMap {cycleIds.length > 0 && (
cycleIds={cycleIds} <CyclesBoardMap
peekCycle={peekCycle} cycleIds={cycleIds}
projectId={projectId} peekCycle={peekCycle}
workspaceSlug={workspaceSlug} projectId={projectId}
/> workspaceSlug={workspaceSlug}
/>
)}
{completedCycleIds.length !== 0 && ( {completedCycleIds.length !== 0 && (
<Disclosure as="div" className="space-y-4"> <Disclosure as="div" className="space-y-4">
<Disclosure.Button className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded flex items-center gap-1"> <Disclosure.Button className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded flex items-center gap-1">

View File

@ -42,6 +42,8 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
useOutsideClickDetector(inputRef, () => { useOutsideClickDetector(inputRef, () => {
if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false); if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
}); });
// derived values
const activeLayout = currentProjectDisplayFilters?.layout ?? "list";
const handleFilters = useCallback( const handleFilters = useCallback(
(key: keyof TCycleFilters, value: string | string[]) => { (key: keyof TCycleFilters, value: string | string[]) => {
@ -140,9 +142,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
<button <button
type="button" type="button"
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${ className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
currentProjectDisplayFilters?.layout == layout.key activeLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
? "bg-custom-background-100 shadow-custom-shadow-2xs"
: ""
}`} }`}
onClick={() => onClick={() =>
updateDisplayFilters(projectId, { updateDisplayFilters(projectId, {
@ -153,9 +153,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
<layout.icon <layout.icon
strokeWidth={2} strokeWidth={2}
className={`h-3.5 w-3.5 ${ className={`h-3.5 w-3.5 ${
currentProjectDisplayFilters?.layout == layout.key activeLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
? "text-custom-text-100"
: "text-custom-text-200"
}`} }`}
/> />
</button> </button>

View File

@ -47,7 +47,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
const pageTitle = project?.name ? `${project?.name} - Cycles` : undefined; const pageTitle = project?.name ? `${project?.name} - Cycles` : undefined;
// selected display filters // selected display filters
const cycleTab = currentProjectDisplayFilters?.active_tab; const cycleTab = currentProjectDisplayFilters?.active_tab;
const cycleLayout = currentProjectDisplayFilters?.layout; const cycleLayout = currentProjectDisplayFilters?.layout ?? "list";
const handleRemoveFilter = (key: keyof TCycleFilters, value: string | null) => { const handleRemoveFilter = (key: keyof TCycleFilters, value: string | null) => {
if (!projectId) return; if (!projectId) return;
@ -120,14 +120,12 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
<ActiveCycleRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} /> <ActiveCycleRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
</Tab.Panel> </Tab.Panel>
<Tab.Panel as="div" className="h-full overflow-y-auto"> <Tab.Panel as="div" className="h-full overflow-y-auto">
{cycleTab && cycleLayout && ( <CyclesView
<CyclesView layout={cycleLayout}
layout={cycleLayout} workspaceSlug={workspaceSlug.toString()}
workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()}
projectId={projectId.toString()} peekCycle={peekCycle?.toString()}
peekCycle={peekCycle?.toString()} />
/>
)}
</Tab.Panel> </Tab.Panel>
</Tab.Panels> </Tab.Panels>
</Tab.Group> </Tab.Group>