Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WEB-544] fix: dashboard issues widget tab rendering bug #3795

Merged
merged 1 commit into from
Feb 26, 2024
Merged

[WEB-544] fix: dashboard issues widget tab rendering bug #3795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 26 additions & 27 deletions web/components/dashboard/widgets/assigned-issues.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading