Skip to content

Commit

Permalink
fix: dashboard issues widget tab rendering bug (#3795)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaryan610
aaryan610 authored Feb 26, 2024
1 parent e1ef830 commit 8b6206f
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 62 deletions.
53 changes: 26 additions & 27 deletions web/components/dashboard/widgets/assigned-issues.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {

const filterParams = getRedirectionFilters(selectedTab);
const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
const selectedTabIndex = tabsList.findIndex((tab) => tab.key === selectedTab);

if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;

Expand All @@ -84,49 +85,47 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
onChange={(val) => {
if (val === selectedDurationFilter) return;

let newTab = selectedTab;
// switch to pending tab if target date is changed to none
if (val === "none" && selectedTab !== "completed") {
handleUpdateFilters({ duration: val, tab: "pending" });
return;
}
if (val === "none" && selectedTab !== "completed") newTab = "pending";
// switch to upcoming tab if target date is changed to other than none
if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
handleUpdateFilters({
duration: val,
tab: "upcoming",
});
return;
}
if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") newTab = "upcoming";

handleUpdateFilters({ duration: val });
handleUpdateFilters({
duration: val,
tab: newTab,
});
}}
/>
</div>
<Tab.Group
as="div"
selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
selectedIndex={selectedTabIndex}
onChange={(i) => {
const selectedTab = tabsList[i];
handleUpdateFilters({ tab: selectedTab?.key ?? "pending" });
const newSelectedTab = tabsList[i];
handleUpdateFilters({ tab: newSelectedTab?.key ?? "completed" });
}}
className="h-full flex flex-col"
>
<div className="px-6">
<TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
</div>
<Tab.Panels as="div" className="h-full">
{tabsList.map((tab) => (
<Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
<WidgetIssuesList
issues={widgetStats.issues}
tab={tab.key}
totalIssues={widgetStats.count}
type="assigned"
workspaceSlug={workspaceSlug}
isLoading={fetching}
/>
</Tab.Panel>
))}
{tabsList.map((tab) => {
if (tab.key !== selectedTab) return null;

return (
<Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
<WidgetIssuesList
tab={tab.key}
type="assigned"
workspaceSlug={workspaceSlug}
widgetStats={widgetStats}
isLoading={fetching}
/>
</Tab.Panel>
);
})}
</Tab.Panels>
</Tab.Group>
</div>
Expand Down
53 changes: 26 additions & 27 deletions web/components/dashboard/widgets/created-issues.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {

const filterParams = getRedirectionFilters(selectedTab);
const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
const selectedTabIndex = tabsList.findIndex((tab) => tab.key === selectedTab);

if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;

Expand All @@ -81,49 +82,47 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
onChange={(val) => {
if (val === selectedDurationFilter) return;

let newTab = selectedTab;
// switch to pending tab if target date is changed to none
if (val === "none" && selectedTab !== "completed") {
handleUpdateFilters({ duration: val, tab: "pending" });
return;
}
if (val === "none" && selectedTab !== "completed") newTab = "pending";
// switch to upcoming tab if target date is changed to other than none
if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
handleUpdateFilters({
duration: val,
tab: "upcoming",
});
return;
}
if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") newTab = "upcoming";

handleUpdateFilters({ duration: val });
handleUpdateFilters({
duration: val,
tab: newTab,
});
}}
/>
</div>
<Tab.Group
as="div"
selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
selectedIndex={selectedTabIndex}
onChange={(i) => {
const selectedTab = tabsList[i];
handleUpdateFilters({ tab: selectedTab.key ?? "pending" });
const newSelectedTab = tabsList[i];
handleUpdateFilters({ tab: newSelectedTab.key ?? "completed" });
}}
className="h-full flex flex-col"
>
<div className="px-6">
<TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
</div>
<Tab.Panels as="div" className="h-full">
{tabsList.map((tab) => (
<Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
<WidgetIssuesList
issues={widgetStats.issues}
tab={tab.key}
totalIssues={widgetStats.count}
type="created"
workspaceSlug={workspaceSlug}
isLoading={fetching}
/>
</Tab.Panel>
))}
{tabsList.map((tab) => {
if (tab.key !== selectedTab) return null;

return (
<Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
<WidgetIssuesList
tab={tab.key}
type="created"
workspaceSlug={workspaceSlug}
widgetStats={widgetStats}
isLoading={fetching}
/>
</Tab.Panel>
);
})}
</Tab.Panels>
</Tab.Group>
</div>
Expand Down
17 changes: 9 additions & 8 deletions web/components/dashboard/widgets/issue-panels/issues-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,18 @@ import { Loader, getButtonStyling } from "@plane/ui";
import { cn } from "helpers/common.helper";
import { getRedirectionFilters } from "helpers/dashboard.helper";
// types
import { TIssue, TIssuesListTypes } from "@plane/types";
import { TAssignedIssuesWidgetResponse, TCreatedIssuesWidgetResponse, TIssue, TIssuesListTypes } from "@plane/types";

export type WidgetIssuesListProps = {
isLoading: boolean;
issues: TIssue[];
tab: TIssuesListTypes;
totalIssues: number;
type: "assigned" | "created";
widgetStats: TAssignedIssuesWidgetResponse | TCreatedIssuesWidgetResponse;
workspaceSlug: string;
};

export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
const { isLoading, issues, tab, totalIssues, type, workspaceSlug } = props;
const { isLoading, tab, type, widgetStats, workspaceSlug } = props;
// store hooks
const { setPeekIssue } = useIssueDetail();

Expand Down Expand Up @@ -59,6 +58,8 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
},
};

const issuesList = widgetStats.issues;

return (
<>
<div className="h-full">
Expand All @@ -69,7 +70,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
<Loader.Item height="25px" />
<Loader.Item height="25px" />
</Loader>
) : issues.length > 0 ? (
) : issuesList.length > 0 ? (
<>
<div className="mt-7 mx-6 border-b-[0.5px] border-custom-border-200 grid grid-cols-6 gap-1 text-xs text-custom-text-300 pb-1">
<h6
Expand All @@ -80,7 +81,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
>
Issues
<span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
{totalIssues}
{widgetStats.count}
</span>
</h6>
{["upcoming", "pending"].includes(tab) && <h6 className="text-center">Due date</h6>}
Expand All @@ -89,7 +90,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
{type === "created" && <h6 className="text-center">Assigned to</h6>}
</div>
<div className="px-4 pb-3 mt-2">
{issues.map((issue) => {
{issuesList.map((issue) => {
const IssueListItem = ISSUE_LIST_ITEM[type][tab];

if (!IssueListItem) return null;
Expand All @@ -112,7 +113,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
</div>
)}
</div>
{issues.length > 0 && (
{!isLoading && issuesList.length > 0 && (
<Link
href={`/${workspaceSlug}/workspace-views/${type}/${filterParams}`}
className={cn(
Expand Down

0 comments on commit 8b6206f

Please sign in to comment.