chore: peek overview for issue view and my issue view (#2172)
* chore: peak overview for issue view and my issue view * fix: profile issue peak overview mutation fix * chore: code refactor * fix: image prefix url fix
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
1b1ed37405
commit
32d08570e7
21 changed files with 417 additions and 217 deletions
|
|
@ -12,6 +12,7 @@ import issuesService from "services/issues.service";
|
|||
import useCalendarIssuesView from "hooks/use-calendar-issues-view";
|
||||
// components
|
||||
import { SingleCalendarDate, CalendarHeader } from "components/core";
|
||||
import { IssuePeekOverview } from "components/issues";
|
||||
// ui
|
||||
import { Spinner } from "components/ui";
|
||||
// helpers
|
||||
|
|
@ -60,7 +61,8 @@ export const CalendarView: React.FC<Props> = ({
|
|||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
|
||||
|
||||
const { calendarIssues, params, displayFilters, setDisplayFilters } = useCalendarIssuesView();
|
||||
const { calendarIssues, mutateIssues, params, displayFilters, setDisplayFilters } =
|
||||
useCalendarIssuesView();
|
||||
|
||||
const totalDate = eachDayOfInterval({
|
||||
start: calendarDates.startDate,
|
||||
|
|
@ -170,75 +172,85 @@ export const CalendarView: React.FC<Props> = ({
|
|||
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
|
||||
|
||||
return calendarIssues ? (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<div className="h-full rounded-lg p-8 text-custom-text-200">
|
||||
<CalendarHeader
|
||||
isMonthlyView={isMonthlyView}
|
||||
setIsMonthlyView={setIsMonthlyView}
|
||||
showWeekEnds={showWeekEnds}
|
||||
setShowWeekEnds={setShowWeekEnds}
|
||||
currentDate={currentDate}
|
||||
setCurrentDate={setCurrentDate}
|
||||
changeDateRange={changeDateRange}
|
||||
/>
|
||||
return (
|
||||
<>
|
||||
<IssuePeekOverview
|
||||
handleMutation={() => mutateIssues()}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
readOnly={disableUserActions}
|
||||
/>
|
||||
{calendarIssues ? (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<div className="h-full rounded-lg p-8 text-custom-text-200">
|
||||
<CalendarHeader
|
||||
isMonthlyView={isMonthlyView}
|
||||
setIsMonthlyView={setIsMonthlyView}
|
||||
showWeekEnds={showWeekEnds}
|
||||
setShowWeekEnds={setShowWeekEnds}
|
||||
currentDate={currentDate}
|
||||
setCurrentDate={setCurrentDate}
|
||||
changeDateRange={changeDateRange}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`grid auto-rows-[minmax(36px,1fr)] rounded-lg ${
|
||||
showWeekEnds ? "grid-cols-7" : "grid-cols-5"
|
||||
}`}
|
||||
>
|
||||
{weeks.map((date, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center justify-start gap-2 border-custom-border-200 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
|
||||
!isMonthlyView
|
||||
? showWeekEnds
|
||||
? (index + 1) % 7 === 0
|
||||
? ""
|
||||
: "border-r"
|
||||
: (index + 1) % 5 === 0
|
||||
? ""
|
||||
: "border-r"
|
||||
: ""
|
||||
className={`grid auto-rows-[minmax(36px,1fr)] rounded-lg ${
|
||||
showWeekEnds ? "grid-cols-7" : "grid-cols-5"
|
||||
}`}
|
||||
>
|
||||
<span>
|
||||
{isMonthlyView
|
||||
? formatDate(date, "eee").substring(0, 3)
|
||||
: formatDate(date, "eee")}
|
||||
</span>
|
||||
{!isMonthlyView && <span>{formatDate(date, "d")}</span>}
|
||||
{weeks.map((date, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center justify-start gap-2 border-custom-border-200 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
|
||||
!isMonthlyView
|
||||
? showWeekEnds
|
||||
? (index + 1) % 7 === 0
|
||||
? ""
|
||||
: "border-r"
|
||||
: (index + 1) % 5 === 0
|
||||
? ""
|
||||
: "border-r"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<span>
|
||||
{isMonthlyView
|
||||
? formatDate(date, "eee").substring(0, 3)
|
||||
: formatDate(date, "eee")}
|
||||
</span>
|
||||
{!isMonthlyView && <span>{formatDate(date, "d")}</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`grid h-full ${isMonthlyView ? "auto-rows-min" : ""} ${
|
||||
showWeekEnds ? "grid-cols-7" : "grid-cols-5"
|
||||
} `}
|
||||
>
|
||||
{currentViewDaysData.map((date, index) => (
|
||||
<SingleCalendarDate
|
||||
key={`${date}-${index}`}
|
||||
index={index}
|
||||
date={date}
|
||||
handleIssueAction={handleIssueAction}
|
||||
addIssueToDate={addIssueToDate}
|
||||
isMonthlyView={isMonthlyView}
|
||||
showWeekEnds={showWeekEnds}
|
||||
user={user}
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className={`grid h-full ${isMonthlyView ? "auto-rows-min" : ""} ${
|
||||
showWeekEnds ? "grid-cols-7" : "grid-cols-5"
|
||||
} `}
|
||||
>
|
||||
{currentViewDaysData.map((date, index) => (
|
||||
<SingleCalendarDate
|
||||
key={`${date}-${index}`}
|
||||
index={index}
|
||||
date={date}
|
||||
handleIssueAction={handleIssueAction}
|
||||
addIssueToDate={addIssueToDate}
|
||||
isMonthlyView={isMonthlyView}
|
||||
showWeekEnds={showWeekEnds}
|
||||
user={user}
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useCallback } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { mutate } from "swr";
|
||||
|
|
@ -158,6 +157,15 @@ export const SingleCalendarIssue: React.FC<Props> = ({
|
|||
? Object.values(properties).some((value) => value === true)
|
||||
: false;
|
||||
|
||||
const openPeekOverview = () => {
|
||||
const { query } = router;
|
||||
|
||||
router.push({
|
||||
pathname: router.pathname,
|
||||
query: { ...query, peekIssue: issue.id },
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
|
|
@ -193,23 +201,27 @@ export const SingleCalendarIssue: React.FC<Props> = ({
|
|||
</CustomMenu>
|
||||
</div>
|
||||
)}
|
||||
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
|
||||
<a className="flex w-full cursor-pointer flex-col items-start justify-center gap-1.5">
|
||||
{properties.key && (
|
||||
<Tooltip
|
||||
tooltipHeading="Issue ID"
|
||||
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
|
||||
>
|
||||
<span className="flex-shrink-0 text-xs text-custom-text-200">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<span className="text-xs text-custom-text-100">{truncateText(issue.name, 25)}</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full cursor-pointer flex-col items-start justify-center gap-1.5"
|
||||
onClick={openPeekOverview}
|
||||
>
|
||||
{properties.key && (
|
||||
<Tooltip
|
||||
tooltipHeading="Issue ID"
|
||||
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
|
||||
>
|
||||
<span className="flex-shrink-0 text-xs text-custom-text-200">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<span className="text-xs text-custom-text-100">{truncateText(issue.name, 25)}</span>
|
||||
</Tooltip>
|
||||
</button>
|
||||
|
||||
{displayProperties && (
|
||||
<div className="relative mt-1.5 w-full flex flex-wrap items-center gap-2 text-xs">
|
||||
{properties.priority && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue