thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

refactor: view props structure (#2159)

Browse Source 
* chore: update view_props types

* refactor: view props structure
This commit is contained in:
Aaryan Khandelwal 2023-09-12 22:27:15 +05:30 committed by GitHub
parent cdb888c23e
commit 8e9a4dca78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 765 additions and 1146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
web/components/core/filters/issues-view-filter.tsx
View File

@ -58,16 +58,8 @@ export const IssuesFilterView: React.FC = () => {
const isArchivedIssues = router.pathname.includes("archived-issues");
const {
issueView,
setIssueView,
groupByProperty,
setGroupByProperty,
orderBy,
setOrderBy,
showEmptyGroups,
showSubIssues,
setShowSubIssues,
setShowEmptyGroups,
displayFilters,
setDisplayFilters,
filters,
setFilters,
resetFilterToDefault,
@ -96,11 +88,11 @@ export const IssuesFilterView: React.FC = () => {
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
issueView === option.type
displayFilters.layout === option.type
? "bg-custom-sidebar-background-80"
: "text-custom-sidebar-text-200"
}`}
onClick={() => setIssueView(option.type)}
onClick={() => setDisplayFilters({ layout: option.type })}
>
<option.Icon
sx={{
@ -174,28 +166,30 @@ export const IssuesFilterView: React.FC = () => {
<Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
<div className="relative divide-y-2 divide-custom-border-200">
<div className="space-y-4 pb-3 text-xs">
{issueView !== "calendar" &&
issueView !== "spreadsheet" &&
issueView !== "gantt_chart" && (
{displayFilters.layout !== "calendar" &&
displayFilters.layout !== "spreadsheet" &&
displayFilters.layout !== "gantt_chart" && (
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Group by</h4>
<div className="w-28">
<CustomMenu
label={
GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)
?.name ?? "Select"
GROUP_BY_OPTIONS.find(
(option) => option.key === displayFilters.group_by
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
>
{GROUP_BY_OPTIONS.map((option) => {
if (issueView === "kanban" && option.key === null) return null;
if (displayFilters.layout === "kanban" && option.key === null)
return null;
if (option.key === "project") return null;
return (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setGroupByProperty(option.key)}
onClick={() => setDisplayFilters({ group_by: option.key })}
>
{option.name}
</CustomMenu.MenuItem>
@ -205,41 +199,45 @@ export const IssuesFilterView: React.FC = () => {
</div>
</div>
)}
{issueView !== "calendar" && issueView !== "spreadsheet" && (
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Order by</h4>
<div className="w-28">
<CustomMenu
label={
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
"Select"
}
className="!w-full"
buttonClassName="w-full"
>
{ORDER_BY_OPTIONS.map((option) =>
groupByProperty === "priority" && option.key === "priority" ? null : (
<CustomMenu.MenuItem
key={option.key}
onClick={() => {
setOrderBy(option.key);
}}
>
{option.name}
</CustomMenu.MenuItem>
)
)}
</CustomMenu>
{displayFilters.layout !== "calendar" &&
displayFilters.layout !== "spreadsheet" && (
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Order by</h4>
<div className="w-28">
<CustomMenu
label={
ORDER_BY_OPTIONS.find(
(option) => option.key === displayFilters.order_by
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
>
{ORDER_BY_OPTIONS.map((option) =>
displayFilters.group_by === "priority" &&
option.key === "priority" ? null : (
<CustomMenu.MenuItem
key={option.key}
onClick={() => {
setDisplayFilters({ order_by: option.key });
}}
>
{option.name}
</CustomMenu.MenuItem>
)
)}
</CustomMenu>
</div>
</div>
</div>
)}
)}
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Issue type</h4>
<div className="w-28">
<CustomMenu
label={
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type)
?.name ?? "Select"
FILTER_ISSUE_OPTIONS.find(
(option) => option.key === displayFilters.type
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
@ -248,7 +246,7 @@ export const IssuesFilterView: React.FC = () => {
<CustomMenu.MenuItem
key={option.key}
onClick={() =>
setFilters({
setDisplayFilters({
type: option.key,
})
}
@ -260,33 +258,40 @@ export const IssuesFilterView: React.FC = () => {
</div>
</div>
{issueView !== "calendar" && issueView !== "spreadsheet" && (
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Show sub-issues</h4>
<div className="w-28">
<ToggleSwitch
value={showSubIssues}
onChange={() => setShowSubIssues(!showSubIssues)}
/>
</div>
</div>
)}
{issueView !== "calendar" &&
issueView !== "spreadsheet" &&
issueView !== "gantt_chart" && (
{displayFilters.layout !== "calendar" &&
displayFilters.layout !== "spreadsheet" && (
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Show empty states</h4>
<h4 className="text-custom-text-200">Show sub-issues</h4>
<div className="w-28">
<ToggleSwitch
value={showEmptyGroups}
onChange={() => setShowEmptyGroups(!showEmptyGroups)}
value={displayFilters.sub_issue ?? true}
onChange={() =>
setDisplayFilters({ sub_issue: !displayFilters.sub_issue })
}
/>
</div>
</div>
)}
{issueView !== "calendar" &&
issueView !== "spreadsheet" &&
issueView !== "gantt_chart" && (
{displayFilters.layout !== "calendar" &&
displayFilters.layout !== "spreadsheet" &&
displayFilters.layout !== "gantt_chart" && (
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Show empty states</h4>
<div className="w-28">
<ToggleSwitch
value={displayFilters.show_empty_groups ?? true}
onChange={() =>
setDisplayFilters({
show_empty_groups: !displayFilters.show_empty_groups,
})
}
/>
</div>
</div>
)}
{displayFilters.layout !== "calendar" &&
displayFilters.layout !== "spreadsheet" &&
displayFilters.layout !== "gantt_chart" && (
<div className="relative flex justify-end gap-x-3">
<button type="button" onClick={() => resetFilterToDefault()}>
Reset to default
@ -302,7 +307,7 @@ export const IssuesFilterView: React.FC = () => {
)}
</div>
{issueView !== "gantt_chart" && (
{displayFilters.layout !== "gantt_chart" && (
<div className="space-y-2 py-3">
<h4 className="text-sm text-custom-text-200">Display Properties</h4>
<div className="flex flex-wrap items-center gap-2 text-custom-text-200">
@ -310,7 +315,7 @@ export const IssuesFilterView: React.FC = () => {
if (key === "estimate" && !isEstimateActive) return null;
if (
issueView === "spreadsheet" &&
displayFilters.layout === "spreadsheet" &&
(key === "attachment_count" ||
key === "link" ||
key === "sub_issue_count")
@ -318,7 +323,7 @@ export const IssuesFilterView: React.FC = () => {
return null;
if (
issueView !== "spreadsheet" &&
displayFilters.layout !== "spreadsheet" &&
(key === "created_on" || key === "updated_on")
)
return null;

6
web/components/core/modals/bulk-delete-issues-modal.tsx
View File

@ -58,7 +58,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
);
const { setToastAlert } = useToast();
const { issueView, params } = useIssuesView();
const { displayFilters, params } = useIssuesView();
const { params: calendarParams } = useCalendarIssuesView();
const { order_by, group_by, ...viewGanttParams } = params;
@ -126,8 +126,8 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
message: "Issues deleted successfully!",
});
if (issueView === "calendar") mutate(calendarFetchKey);
else if (issueView === "gantt_chart") mutate(ganttFetchKey);
if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
else if (displayFilters.layout === "gantt_chart") mutate(ganttFetchKey);
else {
if (cycleId) {
mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params));

18
web/components/core/views/all-views.tsx
View File

@ -80,7 +80,7 @@ export const AllViews: React.FC<Props> = ({
const { user } = useUser();
const { memberRole } = useProjectMyMembership();
const { groupedIssues, isEmpty, issueView } = viewProps;
const { groupedIssues, isEmpty, displayFilters } = viewProps;
const { data: stateGroups } = useSWR(
workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
@ -117,11 +117,11 @@ export const AllViews: React.FC<Props> = ({
</StrictModeDroppable>
{groupedIssues ? (
!isEmpty ||
issueView === "kanban" ||
issueView === "calendar" ||
issueView === "gantt_chart" ? (
displayFilters?.layout === "kanban" ||
displayFilters?.layout === "calendar" ||
displayFilters?.layout === "gantt_chart" ? (
<>
{issueView === "list" ? (
{displayFilters?.layout === "list" ? (
<AllLists
states={states}
addIssueToGroup={addIssueToGroup}
@ -134,7 +134,7 @@ export const AllViews: React.FC<Props> = ({
userAuth={memberRole}
viewProps={viewProps}
/>
) : issueView === "kanban" ? (
) : displayFilters?.layout === "kanban" ? (
<AllBoards
addIssueToGroup={addIssueToGroup}
disableUserActions={disableUserActions}
@ -149,7 +149,7 @@ export const AllViews: React.FC<Props> = ({
userAuth={memberRole}
viewProps={viewProps}
/>
) : issueView === "calendar" ? (
) : displayFilters?.layout === "calendar" ? (
<CalendarView
handleIssueAction={handleIssueAction}
addIssueToDate={addIssueToDate}
@ -157,7 +157,7 @@ export const AllViews: React.FC<Props> = ({
user={user}
userAuth={memberRole}
/>
) : issueView === "spreadsheet" ? (
) : displayFilters?.layout === "spreadsheet" ? (
<SpreadsheetView
handleIssueAction={handleIssueAction}
openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
@ -166,7 +166,7 @@ export const AllViews: React.FC<Props> = ({
userAuth={memberRole}
/>
) : (
issueView === "gantt_chart" && <GanttChartView />
displayFilters?.layout === "gantt_chart" && <GanttChartView />
)}
</>
) : router.pathname.includes("archived-issues") ? (

17
web/components/core/views/board-view/all-boards.tsx
View File

@ -36,7 +36,7 @@ export const AllBoards: React.FC<Props> = ({
userAuth,
viewProps,
}) => {
const { groupByProperty: selectedGroup, groupedIssues, showEmptyGroups } = viewProps;
const { displayFilters, groupedIssues } = viewProps;
return (
<>
@ -44,9 +44,12 @@ export const AllBoards: React.FC<Props> = ({
<div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
{Object.keys(groupedIssues).map((singleGroup, index) => {
const currentState =
selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
displayFilters?.group_by === "state"
? states?.find((s) => s.id === singleGroup)
: null;
if (!showEmptyGroups && groupedIssues[singleGroup].length === 0) return null;
if (!displayFilters?.show_empty_groups && groupedIssues[singleGroup].length === 0)
return null;
return (
<SingleBoard
@ -67,13 +70,15 @@ export const AllBoards: React.FC<Props> = ({
/>
);
})}
{!showEmptyGroups && (
{!displayFilters?.show_empty_groups && (
<div className="h-full w-96 flex-shrink-0 space-y-2 p-1">
<h2 className="text-lg font-semibold">Hidden groups</h2>
<div className="space-y-3">
{Object.keys(groupedIssues).map((singleGroup, index) => {
const currentState =
selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
displayFilters?.group_by === "state"
? states?.find((s) => s.id === singleGroup)
: null;
if (groupedIssues[singleGroup].length === 0)
return (
@ -91,7 +96,7 @@ export const AllBoards: React.FC<Props> = ({
/>
)}
<h4 className="text-sm capitalize">
{selectedGroup === "state"
{displayFilters?.group_by === "state"
? addSpaceIfCamelCase(currentState?.name ?? "")
: addSpaceIfCamelCase(singleGroup)}
</h4>

24
web/components/core/views/board-view/board-header.tsx
View File

@ -48,22 +48,28 @@ export const BoardHeader: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { groupedIssues, groupByProperty: selectedGroup } = viewProps;
const { displayFilters, groupedIssues } = viewProps;
console.log("dF", displayFilters);
const { data: issueLabels } = useSWR(
workspaceSlug && projectId && selectedGroup === "labels"
workspaceSlug && projectId && displayFilters?.group_by === "labels"
? PROJECT_ISSUE_LABELS(projectId.toString())
: null,
workspaceSlug && projectId && selectedGroup === "labels"
workspaceSlug && projectId && displayFilters?.group_by === "labels"
? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
: null
);
const { data: members } = useSWR(
workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
workspaceSlug &&
projectId &&
(displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
? PROJECT_MEMBERS(projectId.toString())
: null,
workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
workspaceSlug &&
projectId &&
(displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
: null
);
@ -73,7 +79,7 @@ export const BoardHeader: React.FC<Props> = ({
const getGroupTitle = () => {
let title = addSpaceIfCamelCase(groupTitle);
switch (selectedGroup) {
switch (displayFilters?.group_by) {
case "state":
title = addSpaceIfCamelCase(currentState?.name ?? "");
break;
@ -97,7 +103,7 @@ export const BoardHeader: React.FC<Props> = ({
const getGroupIcon = () => {
let icon;
switch (selectedGroup) {
switch (displayFilters?.group_by) {
case "state":
icon = currentState && (
<StateGroupIcon
@ -167,7 +173,7 @@ export const BoardHeader: React.FC<Props> = ({
<span className="flex items-center">{getGroupIcon()}</span>
<h2
className={`text-lg font-semibold truncate ${
selectedGroup === "created_by" ? "" : "capitalize"
displayFilters?.group_by === "created_by" ? "" : "capitalize"
}`}
style={{
writingMode: isCollapsed ? "horizontal-tb" : "vertical-rl",
@ -198,7 +204,7 @@ export const BoardHeader: React.FC<Props> = ({
<Icon iconName="open_in_full" className="text-base font-medium text-custom-text-900" />
)}
</button>
{!disableAddIssue && !disableUserActions && selectedGroup !== "created_by" && (
{!disableAddIssue && !disableUserActions && displayFilters?.group_by !== "created_by" && (
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"

16
web/components/core/views/board-view/single-board.tsx
View File

@ -50,7 +50,7 @@ export const SingleBoard: React.FC<Props> = ({
// collapse/expand
const [isCollapsed, setIsCollapsed] = useState(true);
const { groupedIssues, groupByProperty: selectedGroup, orderBy, properties } = viewProps;
const { displayFilters, groupedIssues, properties } = viewProps;
const router = useRouter();
const { cycleId, moduleId } = router.query;
@ -80,14 +80,14 @@ export const SingleBoard: React.FC<Props> = ({
{(provided, snapshot) => (
<div
className={`relative h-full ${
orderBy !== "sort_order" && snapshot.isDraggingOver
displayFilters?.order_by !== "sort_order" && snapshot.isDraggingOver
? "bg-custom-background-100/20"
: ""
} ${!isCollapsed ? "hidden" : "flex flex-col"}`}
ref={provided.innerRef}
{...provided.droppableProps}
>
{orderBy !== "sort_order" && (
{displayFilters?.order_by !== "sort_order" && (
<>
<div
className={`absolute ${
@ -101,7 +101,11 @@ export const SingleBoard: React.FC<Props> = ({
>
This board is ordered by{" "}
{replaceUnderscoreIfSnakeCase(
orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
displayFilters?.order_by
? displayFilters?.order_by[0] === "-"
? displayFilters?.order_by.slice(1)
: displayFilters?.order_by
: "created_at"
)}
</div>
</>
@ -145,13 +149,13 @@ export const SingleBoard: React.FC<Props> = ({
))}
<span
style={{
display: orderBy === "sort_order" ? "inline" : "none",
display: displayFilters?.order_by === "sort_order" ? "inline" : "none",
}}
>
{provided.placeholder}
</span>
</div>
{selectedGroup !== "created_by" && (
{displayFilters?.group_by !== "created_by" && (
<div>
{type === "issue"
? !disableAddIssueOption && (

20
web/components/core/views/board-view/single-issue.tsx
View File

@ -93,7 +93,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
const actionSectionRef = useRef<HTMLDivElement | null>(null);
const { groupByProperty: selectedGroup, orderBy, properties, mutateIssues } = viewProps;
const { displayFilters, properties, mutateIssues } = viewProps;
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
@ -131,9 +131,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
handleIssuesMutation(
formData,
groupTitle ?? "",
selectedGroup,
displayFilters?.group_by ?? null,
index,
orderBy,
displayFilters?.order_by ?? "-created_at",
prevData
),
false
@ -149,24 +149,14 @@ export const SingleBoardIssue: React.FC<Props> = ({
if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
});
},
[
workspaceSlug,
cycleId,
moduleId,
groupTitle,
index,
selectedGroup,
mutateIssues,
orderBy,
user,
]
[displayFilters, workspaceSlug, cycleId, moduleId, groupTitle, index, mutateIssues, user]
);
const getStyle = (
style: DraggingStyle | NotDraggingStyle | undefined,
snapshot: DraggableStateSnapshot
) => {
if (orderBy === "sort_order") return style;
if (displayFilters?.order_by === "sort_order") return style;
if (!snapshot.isDragging) return {};
if (!snapshot.isDropAnimating) return style;

20
web/components/core/views/calendar-view/calendar.tsx
View File

@ -60,7 +60,7 @@ export const CalendarView: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
const { calendarIssues, params, setCalendarDateRange } = useCalendarIssuesView();
const { calendarIssues, params, setDisplayFilters } = useCalendarIssuesView();
const totalDate = eachDayOfInterval({
start: calendarDates.startDate,
@ -152,18 +152,20 @@ export const CalendarView: React.FC<Props> = ({
endDate,
});
setCalendarDateRange(
`${renderDateFormat(startDate)};after,${renderDateFormat(endDate)};before`
);
setDisplayFilters({
calendar_date_range: `${renderDateFormat(startDate)};after,${renderDateFormat(
endDate
)};before`,
});
};
useEffect(() => {
setCalendarDateRange(
`${renderDateFormat(startOfWeek(currentDate))};after,${renderDateFormat(
setDisplayFilters({
calendar_date_range: `${renderDateFormat(startOfWeek(currentDate))};after,${renderDateFormat(
lastDayOfWeek(currentDate)
)};before`
);
}, [currentDate]);
)};before`,
});
}, [currentDate, setDisplayFilters]);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;

69
web/components/core/views/issues-view.tsx
View File

@ -77,18 +77,8 @@ export const IssuesView: React.FC<Props> = ({
const { setToastAlert } = useToast();
const {
groupedByIssues,
mutateIssues,
issueView,
groupByProperty: selectedGroup,
orderBy,
filters,
isEmpty,
setFilters,
params,
showEmptyGroups,
} = useIssuesView();
const { groupedByIssues, mutateIssues, displayFilters, filters, isEmpty, setFilters, params } =
useIssuesView();
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
const { data: stateGroups } = useSWR(
@ -129,7 +119,7 @@ export const IssuesView: React.FC<Props> = ({
if (destination.droppableId === "trashBox") {
handleDeleteIssue(draggedItem);
} else {
if (orderBy === "sort_order") {
if (displayFilters.order_by === "sort_order") {
let newSortOrder = draggedItem.sort_order;
const destinationGroupArray = groupedByIssues[destination.droppableId];
@ -177,16 +167,19 @@ export const IssuesView: React.FC<Props> = ({
const destinationGroup = destination.droppableId; // destination group id
if (orderBy === "sort_order" || source.droppableId !== destination.droppableId) {
if (
displayFilters.order_by === "sort_order" ||
source.droppableId !== destination.droppableId
) {
// different group/column;
// source.droppableId !== destination.droppableId -> even if order by is not sort_order,
// if the issue is moved to a different group, then we will change the group of the
// dragged item(or issue)
if (selectedGroup === "priority")
if (displayFilters.group_by === "priority")
draggedItem.priority = destinationGroup as TIssuePriorities;
else if (selectedGroup === "state") {
else if (displayFilters.group_by === "state") {
draggedItem.state = destinationGroup;
draggedItem.state_detail = states?.find((s) => s.id === destinationGroup) as IState;
}
@ -213,8 +206,14 @@ export const IssuesView: React.FC<Props> = ({
return {
...prevData,
[sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
[destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
[sourceGroup]: orderArrayBy(
sourceGroupArray,
displayFilters.order_by ?? "-created_at"
),
[destinationGroup]: orderArrayBy(
destinationGroupArray,
displayFilters.order_by ?? "-created_at"
),
};
},
false
@ -267,13 +266,13 @@ export const IssuesView: React.FC<Props> = ({
}
},
[
displayFilters.group_by,
displayFilters.order_by,
workspaceSlug,
cycleId,
moduleId,
groupedByIssues,
projectId,
selectedGroup,
orderBy,
handleDeleteIssue,
params,
states,
@ -287,19 +286,19 @@ export const IssuesView: React.FC<Props> = ({
let preloadedValue: string | string[] = groupTitle;
if (selectedGroup === "labels") {
if (displayFilters.group_by === "labels") {
if (groupTitle === "None") preloadedValue = [];
else preloadedValue = [groupTitle];
}
if (selectedGroup)
if (displayFilters.group_by)
setPreloadedData({
[selectedGroup]: preloadedValue,
[displayFilters.group_by]: preloadedValue,
actionType: "createIssue",
});
else setPreloadedData({ actionType: "createIssue" });
},
[setCreateIssueModal, setPreloadedData, selectedGroup]
[displayFilters.group_by, setCreateIssueModal, setPreloadedData]
);
const addIssueToDate = useCallback(
@ -352,7 +351,7 @@ export const IssuesView: React.FC<Props> = ({
CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
(prevData: any) => {
if (!prevData) return prevData;
if (selectedGroup) {
if (displayFilters.group_by) {
const filteredData: any = {};
for (const key in prevData) {
filteredData[key] = prevData[key].filter((item: any) => item.id !== issueId);
@ -384,7 +383,7 @@ export const IssuesView: React.FC<Props> = ({
console.log(e);
});
},
[workspaceSlug, projectId, cycleId, params, selectedGroup, setToastAlert]
[displayFilters.group_by, workspaceSlug, projectId, cycleId, params, setToastAlert]
);
const removeIssueFromModule = useCallback(
@ -395,7 +394,7 @@ export const IssuesView: React.FC<Props> = ({
MODULE_ISSUES_WITH_PARAMS(moduleId as string, params),
(prevData: any) => {
if (!prevData) return prevData;
if (selectedGroup) {
if (displayFilters.group_by) {
const filteredData: any = {};
for (const key in prevData) {
filteredData[key] = prevData[key].filter((item: any) => item.id !== issueId);
@ -427,7 +426,7 @@ export const IssuesView: React.FC<Props> = ({
console.log(e);
});
},
[workspaceSlug, projectId, moduleId, params, selectedGroup, setToastAlert]
[displayFilters.group_by, workspaceSlug, projectId, moduleId, params, setToastAlert]
);
const nullFilters = Object.keys(filters).filter(
@ -481,7 +480,6 @@ export const IssuesView: React.FC<Props> = ({
state: null,
start_date: null,
target_date: null,
type: null,
})
}
/>
@ -513,10 +511,10 @@ export const IssuesView: React.FC<Props> = ({
addIssueToGroup={addIssueToGroup}
disableUserActions={disableUserActions}
dragDisabled={
selectedGroup === "created_by" ||
selectedGroup === "labels" ||
selectedGroup === "state_detail.group" ||
selectedGroup === "assignees"
displayFilters.group_by === "created_by" ||
displayFilters.group_by === "labels" ||
displayFilters.group_by === "state_detail.group" ||
displayFilters.group_by === "assignees"
}
emptyState={{
title: cycleId
@ -554,15 +552,12 @@ export const IssuesView: React.FC<Props> = ({
trashBox={trashBox}
setTrashBox={setTrashBox}
viewProps={{
groupByProperty: selectedGroup,
groupedIssues: groupedByIssues,
displayFilters,
isEmpty,
issueView,
mutateIssues,
orderBy,
params,
properties,
showEmptyGroups,
}}
/>
</>

9
web/components/core/views/list-view/all-lists.tsx
View File

@ -29,7 +29,7 @@ export const AllLists: React.FC<Props> = ({
userAuth,
viewProps,
}) => {
const { groupByProperty: selectedGroup, groupedIssues, showEmptyGroups } = viewProps;
const { displayFilters, groupedIssues } = viewProps;
return (
<>
@ -37,9 +37,12 @@ export const AllLists: React.FC<Props> = ({
<div className="h-full overflow-y-auto">
{Object.keys(groupedIssues).map((singleGroup) => {
const currentState =
selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
displayFilters?.group_by === "state"
? states?.find((s) => s.id === singleGroup)
: null;
if (!showEmptyGroups && groupedIssues[singleGroup].length === 0) return null;
if (!displayFilters?.show_empty_groups && groupedIssues[singleGroup].length === 0)
return null;
return (
<SingleList

9
web/components/core/views/list-view/single-issue.tsx
View File

@ -91,7 +91,7 @@ export const SingleListIssue: React.FC<Props> = ({
const { setToastAlert } = useToast();
const { groupByProperty: selectedGroup, orderBy, properties, mutateIssues } = viewProps;
const { displayFilters, properties, mutateIssues } = viewProps;
const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>, issue: IIssue) => {
@ -124,9 +124,9 @@ export const SingleListIssue: React.FC<Props> = ({
handleIssuesMutation(
formData,
groupTitle ?? "",
selectedGroup,
displayFilters?.group_by ?? null,
index,
orderBy,
displayFilters?.order_by ?? "-created_at",
prevData
),
false
@ -148,15 +148,14 @@ export const SingleListIssue: React.FC<Props> = ({
});
},
[
displayFilters,
workspaceSlug,
cycleId,
moduleId,
userId,
groupTitle,
index,
selectedGroup,
mutateIssues,
orderBy,
user,
]
);

12
web/components/core/views/list-view/single-list.tsx
View File

@ -69,7 +69,7 @@ export const SingleList: React.FC<Props> = ({
const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
const { groupByProperty: selectedGroup, groupedIssues } = viewProps;
const { displayFilters, groupedIssues } = viewProps;
const { data: issueLabels } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
@ -90,7 +90,7 @@ export const SingleList: React.FC<Props> = ({
const getGroupTitle = () => {
let title = addSpaceIfCamelCase(groupTitle);
switch (selectedGroup) {
switch (displayFilters?.group_by) {
case "state":
title = addSpaceIfCamelCase(currentState?.name ?? "");
break;
@ -113,7 +113,7 @@ export const SingleList: React.FC<Props> = ({
const getGroupIcon = () => {
let icon;
switch (selectedGroup) {
switch (displayFilters?.group_by) {
case "state":
icon = currentState && (
<StateGroupIcon
@ -177,13 +177,13 @@ export const SingleList: React.FC<Props> = ({
<div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
<Disclosure.Button>
<div className="flex items-center gap-x-3">
{selectedGroup !== null && (
{displayFilters?.group_by !== null && (
<div className="flex items-center">{getGroupIcon()}</div>
)}
{selectedGroup !== null ? (
{displayFilters?.group_by !== null ? (
<h2
className={`text-sm font-semibold leading-6 text-custom-text-100 ${
selectedGroup === "created_by" ? "" : "capitalize"
displayFilters?.group_by === "created_by" ? "" : "capitalize"
}`}
>
{getGroupTitle()}

6
web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx
View File

@ -22,10 +22,10 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } =
useLocalStorage("spreadsheetViewActiveSortingProperty", "");
const { orderBy, setOrderBy } = useSpreadsheetIssuesView();
const { displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
setOrderBy(order);
setDisplayFilters({ order_by: order });
setSelectedMenuItem(`${order}_${itemKey}`);
setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
};
@ -239,7 +239,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
</CustomMenu.MenuItem>
{selectedMenuItem &&
selectedMenuItem !== "" &&
orderBy !== "-created_at" &&
displayFilters?.order_by !== "-created_at" &&
selectedMenuItem.includes(col.propertyName) && (
<CustomMenu.MenuItem
className={`mt-0.5${

4
web/components/cycles/gantt-chart/cycle-issues-layout.tsx
View File

@ -16,7 +16,7 @@ export const CycleIssuesGanttChartView = () => {
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query;
const { orderBy } = useIssuesView();
const { displayFilters } = useIssuesView();
const { user } = useUser();
const { projectDetails } = useProjectDetails();
@ -44,7 +44,7 @@ export const CycleIssuesGanttChartView = () => {
enableBlockLeftResize={isAllowed}
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={orderBy === "sort_order" && isAllowed}
enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
bottomSpacing
/>
</div>

6
web/components/issues/delete-issue-modal.tsx
View File

@ -50,7 +50,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
const { workspaceSlug, projectId, cycleId, moduleId, viewId, issueId } = router.query;
const isArchivedIssues = router.pathname.includes("archived-issues");
const { issueView, params } = useIssuesView();
const { displayFilters, params } = useIssuesView();
const { params: calendarParams } = useCalendarIssuesView();
const { params: spreadsheetParams } = useSpreadsheetIssuesView();
@ -73,7 +73,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
await issueServices
.deleteIssue(workspaceSlug as string, data.project, data.id, user)
.then(() => {
if (issueView === "calendar") {
if (displayFilters.layout === "calendar") {
const calendarFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
: moduleId
@ -87,7 +87,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
(prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
false
);
} else if (issueView === "spreadsheet") {
} else if (displayFilters.layout === "spreadsheet") {
const spreadsheetFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
: moduleId

4
web/components/issues/gantt-chart/layout.tsx
View File

@ -16,7 +16,7 @@ export const IssueGanttChartView = () => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { orderBy } = useIssuesView();
const { displayFilters } = useIssuesView();
const { user } = useUser();
const { projectDetails } = useProjectDetails();
@ -43,7 +43,7 @@ export const IssueGanttChartView = () => {
enableBlockLeftResize={isAllowed}
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={orderBy === "sort_order" && isAllowed}
enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
bottomSpacing
/>
</div>

12
web/components/issues/modal.tsx
View File

@ -78,7 +78,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
const { issueView, params } = useIssuesView();
const { displayFilters, params } = useIssuesView();
const { params: calendarParams } = useCalendarIssuesView();
const { order_by, group_by, ...viewGanttParams } = params;
const { params: inboxParams } = useInboxView();
@ -247,13 +247,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
if (payload.module && payload.module !== "")
await addIssueToModule(res.id, payload.module);
if (issueView === "calendar") mutate(calendarFetchKey);
if (issueView === "gantt_chart")
if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
if (displayFilters.layout === "gantt_chart")
mutate(ganttFetchKey, {
start_target_date: true,
order_by: "sort_order",
});
if (issueView === "spreadsheet") mutate(spreadsheetFetchKey);
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (groupedIssues) mutateMyIssues();
setToastAlert({
@ -285,8 +285,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
if (isUpdatingSingleIssue) {
mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
} else {
if (issueView === "calendar") mutate(calendarFetchKey);
if (issueView === "spreadsheet") mutate(spreadsheetFetchKey);
if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
}

192
web/components/issues/my-issues/my-issues-view-options.tsx
View File

@ -37,20 +37,8 @@ export const MyIssuesViewOptions: React.FC = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
const {
issueView,
setIssueView,
groupBy,
setGroupBy,
orderBy,
setOrderBy,
showEmptyGroups,
setShowEmptyGroups,
properties,
setProperty,
filters,
setFilters,
} = useMyIssuesFilters(workspaceSlug?.toString());
const { displayFilters, setDisplayFilters, properties, setProperty, filters, setFilters } =
useMyIssuesFilters(workspaceSlug?.toString());
const { isEstimateActive } = useEstimateOption();
@ -68,11 +56,11 @@ export const MyIssuesViewOptions: React.FC = () => {
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
issueView === option.type
displayFilters?.layout === option.type
? "bg-custom-sidebar-background-80"
: "text-custom-sidebar-text-200"
}`}
onClick={() => setIssueView(option.type)}
onClick={() => setDisplayFilters({ layout: option.type })}
>
<option.Icon
sx={{
@ -139,81 +127,89 @@ export const MyIssuesViewOptions: React.FC = () => {
<Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
<div className="relative divide-y-2 divide-custom-border-200">
<div className="space-y-4 pb-3 text-xs">
{issueView !== "calendar" && issueView !== "spreadsheet" && (
<>
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Group by</h4>
<div className="w-28">
<CustomMenu
label={
groupBy === "project"
? "Project"
: GROUP_BY_OPTIONS.find((option) => option.key === groupBy)
?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
>
{GROUP_BY_OPTIONS.map((option) => {
if (issueView === "kanban" && option.key === null) return null;
if (
option.key === "state" ||
option.key === "created_by" ||
option.key === "assignees"
)
return null;
{displayFilters?.layout !== "calendar" &&
displayFilters?.layout !== "spreadsheet" && (
<>
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Group by</h4>
<div className="w-28">
<CustomMenu
label={
displayFilters?.group_by === "project"
? "Project"
: GROUP_BY_OPTIONS.find(
(option) => option.key === displayFilters?.group_by
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
>
{GROUP_BY_OPTIONS.map((option) => {
if (displayFilters?.layout === "kanban" && option.key === null)
return null;
if (
option.key === "state" ||
option.key === "created_by" ||
option.key === "assignees"
)
return null;
return (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setGroupBy(option.key)}
>
{option.name}
</CustomMenu.MenuItem>
);
})}
</CustomMenu>
return (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setDisplayFilters({ group_by: option.key })}
>
{option.name}
</CustomMenu.MenuItem>
);
})}
</CustomMenu>
</div>
</div>
</div>
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Order by</h4>
<div className="w-28">
<CustomMenu
label={
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
"Select"
}
className="!w-full"
buttonClassName="w-full"
>
{ORDER_BY_OPTIONS.map((option) => {
if (groupBy === "priority" && option.key === "priority")
return null;
if (option.key === "sort_order") return null;
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Order by</h4>
<div className="w-28">
<CustomMenu
label={
ORDER_BY_OPTIONS.find(
(option) => option.key === displayFilters?.order_by
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
>
{ORDER_BY_OPTIONS.map((option) => {
if (
displayFilters?.group_by === "priority" &&
option.key === "priority"
)
return null;
if (option.key === "sort_order") return null;
return (
<CustomMenu.MenuItem
key={option.key}
onClick={() => {
setOrderBy(option.key);
}}
>
{option.name}
</CustomMenu.MenuItem>
);
})}
</CustomMenu>
return (
<CustomMenu.MenuItem
key={option.key}
onClick={() => {
setDisplayFilters({ order_by: option.key });
}}
>
{option.name}
</CustomMenu.MenuItem>
);
})}
</CustomMenu>
</div>
</div>
</div>
</>
)}
</>
)}
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Issue type</h4>
<div className="w-28">
<CustomMenu
label={
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
?.name ?? "Select"
FILTER_ISSUE_OPTIONS.find(
(option) => option.key === displayFilters?.type
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
@ -222,7 +218,7 @@ export const MyIssuesViewOptions: React.FC = () => {
<CustomMenu.MenuItem
key={option.key}
onClick={() =>
setFilters({
setDisplayFilters({
type: option.key,
})
}
@ -234,16 +230,24 @@ export const MyIssuesViewOptions: React.FC = () => {
</div>
</div>
{issueView !== "calendar" && issueView !== "spreadsheet" && (
<>
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Show empty states</h4>
<div className="w-28">
<ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
{displayFilters?.layout !== "calendar" &&
displayFilters?.layout !== "spreadsheet" && (
<>
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Show empty states</h4>
<div className="w-28">
<ToggleSwitch
value={displayFilters?.show_empty_groups ?? true}
onChange={() =>
setDisplayFilters({
show_empty_groups: !displayFilters?.show_empty_groups,
})
}
/>
</div>
</div>
</div>
</>
)}
</>
)}
</div>
<div className="space-y-2 py-3">
@ -253,7 +257,7 @@ export const MyIssuesViewOptions: React.FC = () => {
if (key === "estimate" && !isEstimateActive) return null;
if (
issueView === "spreadsheet" &&
displayFilters?.layout === "spreadsheet" &&
(key === "attachment_count" ||
key === "link" ||
key === "sub_issue_count")
@ -261,7 +265,7 @@ export const MyIssuesViewOptions: React.FC = () => {
return null;
if (
issueView !== "spreadsheet" &&
displayFilters?.layout !== "spreadsheet" &&
(key === "created_on" || key === "updated_on")
)
return null;

43
web/components/issues/my-issues/my-issues-view.tsx
View File

@ -57,8 +57,9 @@ export const MyIssuesView: React.FC<Props> = ({
const { user } = useUserAuth();
const { groupedIssues, mutateMyIssues, isEmpty, params } = useMyIssues(workspaceSlug?.toString());
const { filters, setFilters, issueView, groupBy, orderBy, properties, showEmptyGroups } =
useMyIssuesFilters(workspaceSlug?.toString());
const { filters, setFilters, displayFilters, setDisplayFilters, properties } = useMyIssuesFilters(
workspaceSlug?.toString()
);
const { data: labels } = useSWR(
workspaceSlug && (filters?.labels ?? []).length > 0
@ -81,7 +82,13 @@ export const MyIssuesView: React.FC<Props> = ({
async (result: DropResult) => {
setTrashBox(false);
if (!result.destination || !workspaceSlug || !groupedIssues || groupBy !== "priority") return;
if (
!result.destination ||
!workspaceSlug ||
!groupedIssues ||
displayFilters?.group_by !== "priority"
)
return;
const { source, destination } = result;
@ -96,7 +103,7 @@ export const MyIssuesView: React.FC<Props> = ({
const sourceGroup = source.droppableId;
const destinationGroup = destination.droppableId;
draggedItem[groupBy] = destinationGroup as TIssuePriorities;
draggedItem[displayFilters.group_by] = destinationGroup as TIssuePriorities;
mutate<{
[key: string]: IIssue[];
@ -113,8 +120,14 @@ export const MyIssuesView: React.FC<Props> = ({
return {
...prevData,
[sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
[destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
[sourceGroup]: orderArrayBy(
sourceGroupArray,
displayFilters.order_by ?? "-created_at"
),
[destinationGroup]: orderArrayBy(
destinationGroupArray,
displayFilters.order_by ?? "-created_at"
),
};
},
false
@ -134,7 +147,7 @@ export const MyIssuesView: React.FC<Props> = ({
.catch(() => mutate(USER_ISSUES(workspaceSlug.toString(), params)));
}
},
[groupBy, groupedIssues, handleDeleteIssue, orderBy, params, user, workspaceSlug]
[displayFilters, groupedIssues, handleDeleteIssue, params, user, workspaceSlug]
);
const addIssueToGroup = useCallback(
@ -143,19 +156,19 @@ export const MyIssuesView: React.FC<Props> = ({
let preloadedValue: string | string[] = groupTitle;
if (groupBy === "labels") {
if (displayFilters?.group_by === "labels") {
if (groupTitle === "None") preloadedValue = [];
else preloadedValue = [groupTitle];
}
if (groupBy)
if (displayFilters?.group_by)
setPreloadedData({
[groupBy]: preloadedValue,
[displayFilters?.group_by]: preloadedValue,
actionType: "createIssue",
});
else setPreloadedData({ actionType: "createIssue" });
},
[setCreateIssueModal, setPreloadedData, groupBy]
[setCreateIssueModal, setPreloadedData, displayFilters?.group_by]
);
const addIssueToDate = useCallback(
@ -263,7 +276,6 @@ export const MyIssuesView: React.FC<Props> = ({
state_group: null,
start_date: null,
target_date: null,
type: null,
})
}
/>
@ -275,7 +287,7 @@ export const MyIssuesView: React.FC<Props> = ({
addIssueToDate={addIssueToDate}
addIssueToGroup={addIssueToGroup}
disableUserActions={disableUserActions}
dragDisabled={groupBy !== "priority"}
dragDisabled={displayFilters?.group_by !== "priority"}
emptyState={{
title: filters.assignees
? "You don't have any issue assigned to you yet"
@ -304,15 +316,12 @@ export const MyIssuesView: React.FC<Props> = ({
trashBox={trashBox}
setTrashBox={setTrashBox}
viewProps={{
groupByProperty: groupBy,
displayFilters,
groupedIssues,
isEmpty,
issueView,
mutateIssues: mutateMyIssues,
orderBy,
params,
properties,
showEmptyGroups,
}}
/>
</>

6
web/components/issues/view-select/due-date.tsx
View File

@ -34,7 +34,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug } = router.query;
const { issueView } = useIssuesView();
const { displayFilters } = useIssuesView();
const minDate = issue.start_date ? new Date(issue.start_date) : null;
minDate?.setDate(minDate.getDate());
@ -80,7 +80,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({
);
}}
className={`${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
issueView === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
displayFilters.layout === "kanban"
? "bg-custom-background-90"
: "bg-custom-background-100"
}`}
minDate={minDate ?? undefined}
noBorder={noBorder}

6
web/components/issues/view-select/start-date.tsx
View File

@ -34,7 +34,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug } = router.query;
const { issueView } = useIssuesView();
const { displayFilters } = useIssuesView();
const maxDate = issue.target_date ? new Date(issue.target_date) : null;
maxDate?.setDate(maxDate.getDate());
@ -72,7 +72,9 @@ export const ViewStartDateSelect: React.FC<Props> = ({
);
}}
className={`${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
issueView === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
displayFilters.layout === "kanban"
? "bg-custom-background-90"
: "bg-custom-background-100"
}`}
maxDate={maxDate ?? undefined}
noBorder={noBorder}

4
web/components/modules/gantt-chart/module-issues-layout.tsx
View File

@ -20,7 +20,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
const { orderBy } = useIssuesView();
const { displayFilters } = useIssuesView();
const { user } = useUser();
const { projectDetails } = useProjectDetails();
@ -48,7 +48,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
enableBlockLeftResize={isAllowed}
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={orderBy === "sort_order" && isAllowed}
enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
bottomSpacing
/>
</div>

193
web/components/profile/profile-issues-view-options.tsx
View File

@ -41,16 +41,10 @@ export const ProfileIssuesViewOptions: React.FC = () => {
const { projects } = useProjects();
const {
issueView,
setIssueView,
groupByProperty,
setGroupByProperty,
orderBy,
setOrderBy,
showEmptyGroups,
setShowEmptyGroups,
displayFilters,
setDisplayFilters,
filters,
properties,
displayProperties,
setProperties,
setFilters,
} = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
@ -94,11 +88,11 @@ export const ProfileIssuesViewOptions: React.FC = () => {
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
issueView === option.type
displayFilters.layout === option.type
? "bg-custom-sidebar-background-80"
: "text-custom-sidebar-text-200"
}`}
onClick={() => setIssueView(option.type)}
onClick={() => setDisplayFilters({ layout: option.type })}
>
<option.Icon
sx={{
@ -165,82 +159,89 @@ export const ProfileIssuesViewOptions: React.FC = () => {
<Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
<div className="relative divide-y-2 divide-custom-border-200">
<div className="space-y-4 pb-3 text-xs">
{issueView !== "calendar" && issueView !== "spreadsheet" && (
<>
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Group by</h4>
<div className="w-28">
<CustomMenu
label={
groupByProperty === "project"
? "Project"
: GROUP_BY_OPTIONS.find(
(option) => option.key === groupByProperty
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
>
{GROUP_BY_OPTIONS.map((option) => {
if (issueView === "kanban" && option.key === null) return null;
if (
option.key === "state" ||
option.key === "created_by" ||
option.key === "assignees"
)
return null;
{displayFilters.layout !== "calendar" &&
displayFilters.layout !== "spreadsheet" && (
<>
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Group by</h4>
<div className="w-28">
<CustomMenu
label={
displayFilters.group_by === "project"
? "Project"
: GROUP_BY_OPTIONS.find(
(option) => option.key === displayFilters.group_by
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
>
{GROUP_BY_OPTIONS.map((option) => {
if (displayFilters.layout === "kanban" && option.key === null)
return null;
if (
option.key === "state" ||
option.key === "created_by" ||
option.key === "assignees"
)
return null;
return (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setGroupByProperty(option.key)}
>
{option.name}
</CustomMenu.MenuItem>
);
})}
</CustomMenu>
return (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setDisplayFilters({ group_by: option.key })}
>
{option.name}
</CustomMenu.MenuItem>
);
})}
</CustomMenu>
</div>
</div>
</div>
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Order by</h4>
<div className="w-28">
<CustomMenu
label={
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
"Select"
}
className="!w-full"
buttonClassName="w-full"
>
{ORDER_BY_OPTIONS.map((option) => {
if (groupByProperty === "priority" && option.key === "priority")
return null;
if (option.key === "sort_order") return null;
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Order by</h4>
<div className="w-28">
<CustomMenu
label={
ORDER_BY_OPTIONS.find(
(option) => option.key === displayFilters.order_by
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
>
{ORDER_BY_OPTIONS.map((option) => {
if (
displayFilters.group_by === "priority" &&
option.key === "priority"
)
return null;
if (option.key === "sort_order") return null;
return (
<CustomMenu.MenuItem
key={option.key}
onClick={() => {
setOrderBy(option.key);
}}
>
{option.name}
</CustomMenu.MenuItem>
);
})}
</CustomMenu>
return (
<CustomMenu.MenuItem
key={option.key}
onClick={() => {
setDisplayFilters({ order_by: option.key });
}}
>
{option.name}
</CustomMenu.MenuItem>
);
})}
</CustomMenu>
</div>
</div>
</div>
</>
)}
</>
)}
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Issue type</h4>
<div className="w-28">
<CustomMenu
label={
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
?.name ?? "Select"
FILTER_ISSUE_OPTIONS.find(
(option) => option.key === displayFilters?.type
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
@ -249,7 +250,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
<CustomMenu.MenuItem
key={option.key}
onClick={() =>
setFilters({
setDisplayFilters({
type: option.key,
})
}
@ -261,26 +262,34 @@ export const ProfileIssuesViewOptions: React.FC = () => {
</div>
</div>
{issueView !== "calendar" && issueView !== "spreadsheet" && (
<>
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Show empty states</h4>
<div className="w-28">
<ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
{displayFilters.layout !== "calendar" &&
displayFilters.layout !== "spreadsheet" && (
<>
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Show empty states</h4>
<div className="w-28">
<ToggleSwitch
value={displayFilters.show_empty_groups ?? true}
onChange={() =>
setDisplayFilters({
show_empty_groups: !displayFilters.show_empty_groups,
})
}
/>
</div>
</div>
</div>
</>
)}
</>
)}
</div>
<div className="space-y-2 py-3">
<h4 className="text-sm text-custom-text-200">Display Properties</h4>
<div className="flex flex-wrap items-center gap-2 text-custom-text-200">
{Object.keys(properties).map((key) => {
{Object.keys(displayProperties).map((key) => {
if (key === "estimate" && !isEstimateActive) return null;
if (
issueView === "spreadsheet" &&
displayFilters.layout === "spreadsheet" &&
(key === "attachment_count" ||
key === "link" ||
key === "sub_issue_count")
@ -288,7 +297,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
return null;
if (
issueView !== "spreadsheet" &&
displayFilters.layout !== "spreadsheet" &&
(key === "created_on" || key === "updated_on")
)
return null;
@ -298,7 +307,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
key={key}
type="button"
className={`rounded border px-2 py-1 text-xs capitalize ${
properties[key as keyof Properties]
displayProperties[key as keyof Properties]
? "border-custom-primary bg-custom-primary text-white"
: "border-custom-border-200"
}`}

52
web/components/profile/profile-issues-view.tsx
View File

@ -50,14 +50,12 @@ export const ProfileIssuesView = () => {
const {
groupedIssues,
mutateProfileIssues,
issueView,
groupByProperty,
orderBy,
displayFilters,
setDisplayFilters,
isEmpty,
showEmptyGroups,
filters,
setFilters,
properties,
displayProperties,
params,
} = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
@ -92,7 +90,12 @@ export const ProfileIssuesView = () => {
async (result: DropResult) => {
setTrashBox(false);
if (!result.destination || !workspaceSlug || !groupedIssues || groupByProperty !== "priority")
if (
!result.destination ||
!workspaceSlug ||
!groupedIssues ||
displayFilters.group_by !== "priority"
)
return;
const { source, destination } = result;
@ -108,7 +111,7 @@ export const ProfileIssuesView = () => {
const sourceGroup = source.droppableId;
const destinationGroup = destination.droppableId;
draggedItem[groupByProperty] = destinationGroup as TIssuePriorities;
draggedItem[displayFilters.group_by] = destinationGroup as TIssuePriorities;
mutateProfileIssues((prevData: any) => {
if (!prevData) return prevData;
@ -121,8 +124,11 @@ export const ProfileIssuesView = () => {
return {
...prevData,
[sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
[destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
[sourceGroup]: orderArrayBy(sourceGroupArray, displayFilters.order_by ?? "-created_at"),
[destinationGroup]: orderArrayBy(
destinationGroupArray,
displayFilters.order_by ?? "-created_at"
),
};
}, false);
@ -140,15 +146,7 @@ export const ProfileIssuesView = () => {
.catch(() => mutateProfileIssues());
}
},
[
groupByProperty,
groupedIssues,
handleDeleteIssue,
mutateProfileIssues,
orderBy,
user,
workspaceSlug,
]
[displayFilters, groupedIssues, handleDeleteIssue, mutateProfileIssues, user, workspaceSlug]
);
const addIssueToGroup = useCallback(
@ -157,19 +155,19 @@ export const ProfileIssuesView = () => {
let preloadedValue: string | string[] = groupTitle;
if (groupByProperty === "labels") {
if (displayFilters.group_by === "labels") {
if (groupTitle === "None") preloadedValue = [];
else preloadedValue = [groupTitle];
}
if (groupByProperty)
if (displayFilters.group_by)
setPreloadedData({
[groupByProperty]: preloadedValue,
[displayFilters.group_by]: preloadedValue,
actionType: "createIssue",
});
else setPreloadedData({ actionType: "createIssue" });
},
[setCreateIssueModal, setPreloadedData, groupByProperty]
[setCreateIssueModal, setPreloadedData, displayFilters.group_by]
);
const addIssueToDate = useCallback(
@ -277,7 +275,6 @@ export const ProfileIssuesView = () => {
state_group: null,
start_date: null,
target_date: null,
type: null,
})
}
/>
@ -289,7 +286,7 @@ export const ProfileIssuesView = () => {
addIssueToDate={addIssueToDate}
addIssueToGroup={addIssueToGroup}
disableUserActions={false}
dragDisabled={groupByProperty !== "priority"}
dragDisabled={displayFilters.group_by !== "priority"}
emptyState={{
title: router.pathname.includes("assigned")
? `Issues assigned to ${profileData?.user_data.display_name} will appear here`
@ -305,15 +302,12 @@ export const ProfileIssuesView = () => {
trashBox={trashBox}
setTrashBox={setTrashBox}
viewProps={{
groupByProperty,
groupedIssues,
displayFilters,
isEmpty,
issueView,
mutateIssues: mutateProfileIssues,
orderBy,
params,
properties,
showEmptyGroups,
properties: displayProperties,
}}
/>
</>

375
web/contexts/issue-view.context.tsx
View File

@ -11,14 +11,15 @@ import projectService from "services/project.service";
import cyclesService from "services/cycles.service";
import modulesService from "services/modules.service";
import viewsService from "services/views.service";
// hooks
import useUserAuth from "hooks/use-user-auth";
// types
import {
IIssueFilterOptions,
TIssueViewOptions,
IProjectMember,
TIssueGroupByOptions,
TIssueOrderByOptions,
ICurrentUserResponse,
IIssueDisplayFilterOptions,
IProjectViewProps,
} from "types";
// fetch-keys
import {
@ -27,66 +28,34 @@ import {
USER_PROJECT_VIEW,
VIEW_DETAILS,
} from "constants/fetch-keys";
import useUserAuth from "hooks/use-user-auth";
export const issueViewContext = createContext<ContextType>({} as ContextType);
type IssueViewProps = {
issueView: TIssueViewOptions;
groupByProperty: TIssueGroupByOptions;
orderBy: TIssueOrderByOptions;
showEmptyGroups: boolean;
showSubIssues: boolean;
calendarDateRange: string;
filters: IIssueFilterOptions;
};
type ReducerActionType = {
type:
| "REHYDRATE_THEME"
| "SET_ISSUE_VIEW"
| "SET_ORDER_BY_PROPERTY"
| "SET_SHOW_EMPTY_STATES"
| "SET_CALENDAR_DATE_RANGE"
| "SET_FILTERS"
| "SET_GROUP_BY_PROPERTY"
| "RESET_TO_DEFAULT"
| "SET_SHOW_SUB_ISSUES";
payload?: Partial<IssueViewProps>;
type: "REHYDRATE_THEME" | "SET_DISPLAY_FILTERS" | "SET_FILTERS" | "RESET_TO_DEFAULT";
payload?: Partial<IProjectViewProps>;
};
type ContextType = IssueViewProps & {
setGroupByProperty: (property: TIssueGroupByOptions) => void;
setOrderBy: (property: TIssueOrderByOptions) => void;
setShowEmptyGroups: (property: boolean) => void;
setShowSubIssues: (value: boolean) => void;
setCalendarDateRange: (property: string) => void;
type ContextType = IProjectViewProps & {
setDisplayFilters: (displayFilter: Partial<IIssueDisplayFilterOptions>) => void;
setFilters: (filters: Partial<IIssueFilterOptions>, saveToServer?: boolean) => void;
resetFilterToDefault: () => void;
setNewFilterDefaultView: () => void;
setIssueView: (property: TIssueViewOptions) => void;
};
type StateType = {
issueView: TIssueViewOptions;
groupByProperty: TIssueGroupByOptions;
orderBy: TIssueOrderByOptions;
showEmptyGroups: boolean;
showSubIssues: boolean;
calendarDateRange: string;
filters: IIssueFilterOptions;
};
type StateType = IProjectViewProps;
type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
export const initialState: StateType = {
issueView: "list",
groupByProperty: null,
orderBy: "-created_at",
showEmptyGroups: true,
showSubIssues: true,
calendarDateRange: "",
display_filters: {
calendar_date_range: "",
group_by: null,
layout: "list",
order_by: "-created_at",
show_empty_groups: true,
sub_issue: true,
},
filters: {
type: null,
priority: null,
assignees: null,
labels: null,
@ -110,70 +79,14 @@ export const reducer: ReducerFunctionType = (state, action) => {
return { ...initialState, ...payload, collapsed };
}
case "SET_ISSUE_VIEW": {
case "SET_DISPLAY_FILTERS": {
const newState = {
...state,
issueView: payload?.issueView || "list",
};
return {
...state,
...newState,
};
}
case "SET_GROUP_BY_PROPERTY": {
const newState = {
...state,
groupByProperty: payload?.groupByProperty || null,
};
return {
...state,
...newState,
};
}
case "SET_ORDER_BY_PROPERTY": {
const newState = {
...state,
orderBy: payload?.orderBy || "-created_at",
};
return {
...state,
...newState,
};
}
case "SET_SHOW_EMPTY_STATES": {
const newState = {
...state,
showEmptyGroups: payload?.showEmptyGroups || true,
};
return {
...state,
...newState,
};
}
case "SET_SHOW_SUB_ISSUES": {
const newState = {
...state,
showSubIssues: payload?.showSubIssues || true,
};
return {
...state,
...newState,
};
}
case "SET_CALENDAR_DATE_RANGE": {
const newState = {
...state,
calendarDateRange: payload?.calendarDateRange || "",
display_filters: {
...state.display_filters,
...payload,
},
issueView: payload?.display_filters?.layout || "list",
};
return {
@ -210,9 +123,13 @@ export const reducer: ReducerFunctionType = (state, action) => {
}
};
const saveDataToServer = async (workspaceSlug: string, projectID: string, state: any) => {
const saveDataToServer = async (
workspaceSlug: string,
projectId: string,
state: IProjectViewProps
) => {
mutate<IProjectMember>(
workspaceSlug && projectID ? USER_PROJECT_VIEW(projectID as string) : null,
workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
(prevData) => {
if (!prevData) return prevData;
@ -224,7 +141,7 @@ const saveDataToServer = async (workspaceSlug: string, projectID: string, state:
false
);
await projectService.setProjectView(workspaceSlug, projectID, {
await projectService.setProjectView(workspaceSlug, projectId, {
view_props: state,
});
};
@ -354,44 +271,57 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
: null
);
const setIssueView = useCallback(
(property: TIssueViewOptions) => {
const setDisplayFilters = useCallback(
(displayFilter: Partial<IIssueDisplayFilterOptions>) => {
dispatch({
type: "SET_ISSUE_VIEW",
type: "SET_DISPLAY_FILTERS",
payload: {
issueView: property,
display_filters: {
...state.display_filters,
...displayFilter,
},
},
});
const additionalProperties = {
groupByProperty: state.groupByProperty,
orderBy: state.orderBy,
const additionalProperties: Partial<IIssueDisplayFilterOptions> = {
group_by: displayFilter.group_by ?? state.display_filters?.group_by,
order_by: displayFilter.order_by ?? state.display_filters?.order_by,
};
if (property === "kanban" && state.groupByProperty === null) {
additionalProperties.groupByProperty = "state";
if (
displayFilter.layout &&
displayFilter.layout === "kanban" &&
state.display_filters?.group_by === null
) {
additionalProperties.group_by = "state";
dispatch({
type: "SET_GROUP_BY_PROPERTY",
type: "SET_DISPLAY_FILTERS",
payload: {
groupByProperty: "state",
display_filters: {
group_by: "state",
},
},
});
}
if (property === "calendar") {
additionalProperties.groupByProperty = null;
if (displayFilter.layout && displayFilter.layout === "calendar") {
additionalProperties.group_by = null;
dispatch({
type: "SET_GROUP_BY_PROPERTY",
type: "SET_DISPLAY_FILTERS",
payload: {
groupByProperty: null,
display_filters: {
group_by: null,
},
},
});
}
if (property === "gantt_chart") {
additionalProperties.orderBy = "sort_order";
if (displayFilter.layout && displayFilter.layout === "gantt_chart") {
additionalProperties.order_by = "sort_order";
dispatch({
type: "SET_ORDER_BY_PROPERTY",
type: "SET_DISPLAY_FILTERS",
payload: {
orderBy: "sort_order",
display_filters: {
order_by: "sort_order",
},
},
});
}
@ -400,168 +330,16 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
saveDataToServer(workspaceSlug as string, projectId as string, {
...state,
issueView: property,
...additionalProperties,
display_filters: {
...state.display_filters,
...displayFilter,
...additionalProperties,
},
});
},
[workspaceSlug, projectId, state]
);
const setGroupByProperty = useCallback(
(property: TIssueGroupByOptions) => {
dispatch({
type: "SET_GROUP_BY_PROPERTY",
payload: {
groupByProperty: property,
},
});
if (!workspaceSlug || !projectId) return;
mutateMyViewProps((prevData: any) => {
if (!prevData) return prevData;
return {
...prevData,
view_props: {
...state,
groupByProperty: property,
},
};
}, false);
saveDataToServer(workspaceSlug as string, projectId as string, {
...state,
groupByProperty: property,
});
},
[projectId, workspaceSlug, state, mutateMyViewProps]
);
const setOrderBy = useCallback(
(property: TIssueOrderByOptions) => {
dispatch({
type: "SET_ORDER_BY_PROPERTY",
payload: {
orderBy: property,
},
});
if (!workspaceSlug || !projectId) return;
mutateMyViewProps((prevData: any) => {
if (!prevData) return prevData;
return {
...prevData,
view_props: {
...state,
orderBy: property,
},
};
}, false);
saveDataToServer(workspaceSlug as string, projectId as string, {
...state,
orderBy: property,
});
},
[projectId, workspaceSlug, state, mutateMyViewProps]
);
const setShowEmptyGroups = useCallback(
(property: boolean) => {
dispatch({
type: "SET_SHOW_EMPTY_STATES",
payload: {
showEmptyGroups: property,
},
});
if (!workspaceSlug || !projectId) return;
mutateMyViewProps((prevData: any) => {
if (!prevData) return prevData;
return {
...prevData,
view_props: {
...state,
showEmptyGroups: property,
},
};
}, false);
saveDataToServer(workspaceSlug as string, projectId as string, {
...state,
showEmptyGroups: property,
});
},
[projectId, workspaceSlug, state, mutateMyViewProps]
);
const setShowSubIssues = useCallback(
(property: boolean) => {
dispatch({
type: "SET_SHOW_SUB_ISSUES",
payload: {
showSubIssues: property,
},
});
if (!workspaceSlug || !projectId) return;
mutateMyViewProps((prevData: any) => {
if (!prevData) return prevData;
return {
...prevData,
view_props: {
...state,
showSubIssues: property,
},
};
}, false);
saveDataToServer(workspaceSlug as string, projectId as string, {
...state,
showSubIssues: property,
});
},
[projectId, workspaceSlug, state, mutateMyViewProps]
);
const setCalendarDateRange = useCallback(
(value: string) => {
dispatch({
type: "SET_CALENDAR_DATE_RANGE",
payload: {
calendarDateRange: value,
},
});
if (!workspaceSlug || !projectId) return;
mutateMyViewProps((prevData: any) => {
if (!prevData) return prevData;
return {
...prevData,
view_props: {
...state,
calendarDateRange: value,
},
};
}, false);
saveDataToServer(workspaceSlug as string, projectId as string, {
...state,
calendarDateRange: value,
});
},
[projectId, workspaceSlug, state, mutateMyViewProps]
);
const setFilters = useCallback(
(property: Partial<IIssueFilterOptions>, saveToServer = true) => {
Object.keys(property).forEach((key) => {
@ -717,12 +495,13 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
payload: myViewProps?.default_props,
});
if (!workspaceSlug || !projectId) return;
if (!workspaceSlug || !projectId || !myViewProps) return;
saveDataToServer(workspaceSlug as string, projectId as string, myViewProps?.default_props);
saveDataToServer(workspaceSlug as string, projectId as string, myViewProps.default_props);
}, [projectId, workspaceSlug, myViewProps]);
useEffect(() => {
console.log("running");
dispatch({
type: "REHYDRATE_THEME",
payload: {
@ -743,22 +522,12 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
return (
<issueViewContext.Provider
value={{
issueView: state.issueView,
groupByProperty: state.groupByProperty,
setGroupByProperty,
orderBy: state.orderBy,
showEmptyGroups: state.showEmptyGroups,
showSubIssues: state.showSubIssues,
calendarDateRange: state.calendarDateRange,
setCalendarDateRange,
setOrderBy,
setShowEmptyGroups,
setShowSubIssues,
display_filters: state.display_filters,
setDisplayFilters,
filters: state.filters,
setFilters,
resetFilterToDefault: resetToDefault,
setNewFilterDefaultView: setNewDefaultView,
setIssueView,
}}
>
<ToastAlert />

199
web/contexts/profile-issues-context.tsx
View File

@ -5,66 +5,36 @@ import ToastAlert from "components/toast-alert";
// types
import {
IIssueFilterOptions,
TIssueViewOptions,
TIssueGroupByOptions,
TIssueOrderByOptions,
Properties,
IWorkspaceViewProps,
IIssueDisplayFilterOptions,
} from "types";
export const profileIssuesContext = createContext<ContextType>({} as ContextType);
type IssueViewProps = {
issueView: TIssueViewOptions;
groupByProperty: TIssueGroupByOptions;
orderBy: TIssueOrderByOptions;
showEmptyGroups: boolean;
showSubIssues: boolean;
filters: IIssueFilterOptions;
properties: Properties;
};
type ReducerActionType = {
type:
| "SET_ISSUE_VIEW"
| "SET_ORDER_BY_PROPERTY"
| "SET_SHOW_EMPTY_STATES"
| "SET_FILTERS"
| "SET_PROPERTIES"
| "SET_GROUP_BY_PROPERTY"
| "RESET_TO_DEFAULT"
| "SET_SHOW_SUB_ISSUES";
payload?: Partial<IssueViewProps>;
type: "SET_DISPLAY_FILTERS" | "SET_FILTERS" | "SET_PROPERTIES" | "RESET_TO_DEFAULT";
payload?: Partial<IWorkspaceViewProps>;
};
type ContextType = IssueViewProps & {
setGroupByProperty: (property: TIssueGroupByOptions) => void;
setOrderBy: (property: TIssueOrderByOptions) => void;
setShowEmptyGroups: (property: boolean) => void;
setShowSubIssues: (value: boolean) => void;
type ContextType = IWorkspaceViewProps & {
setDisplayFilters: (displayFilter: Partial<IIssueDisplayFilterOptions>) => void;
setFilters: (filters: Partial<IIssueFilterOptions>) => void;
setProperties: (key: keyof Properties) => void;
setIssueView: (property: TIssueViewOptions) => void;
};
type StateType = {
issueView: TIssueViewOptions;
groupByProperty: TIssueGroupByOptions;
orderBy: TIssueOrderByOptions;
showEmptyGroups: boolean;
showSubIssues: boolean;
filters: IIssueFilterOptions;
properties: Properties;
};
type StateType = IWorkspaceViewProps;
type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
export const initialState: StateType = {
issueView: "list",
groupByProperty: null,
orderBy: "-created_at",
showEmptyGroups: true,
showSubIssues: true,
display_filters: {
group_by: null,
layout: "list",
order_by: "-created_at",
show_empty_groups: true,
sub_issue: true,
},
filters: {
type: null,
priority: null,
assignees: null,
labels: null,
@ -75,7 +45,7 @@ export const initialState: StateType = {
start_date: null,
target_date: null,
},
properties: {
display_properties: {
assignee: true,
start_date: true,
due_date: true,
@ -96,58 +66,14 @@ export const reducer: ReducerFunctionType = (state, action) => {
const { type, payload } = action;
switch (type) {
case "SET_ISSUE_VIEW": {
case "SET_DISPLAY_FILTERS": {
const newState = {
...state,
issueView: payload?.issueView || "list",
};
return {
...state,
...newState,
};
}
case "SET_GROUP_BY_PROPERTY": {
const newState = {
...state,
groupByProperty: payload?.groupByProperty || null,
};
return {
...state,
...newState,
};
}
case "SET_ORDER_BY_PROPERTY": {
const newState = {
...state,
orderBy: payload?.orderBy || "-created_at",
};
return {
...state,
...newState,
};
}
case "SET_SHOW_EMPTY_STATES": {
const newState = {
...state,
showEmptyGroups: payload?.showEmptyGroups || true,
};
return {
...state,
...newState,
};
}
case "SET_SHOW_SUB_ISSUES": {
const newState = {
...state,
showSubIssues: payload?.showSubIssues || true,
display_filters: {
...state.display_filters,
...payload,
},
issueView: payload?.display_filters?.layout || "list",
};
return {
@ -175,8 +101,8 @@ export const reducer: ReducerFunctionType = (state, action) => {
const newState = {
...state,
properties: {
...state.properties,
...payload?.properties,
...state.display_properties,
...payload?.display_properties,
},
};
@ -197,20 +123,29 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
}) => {
const [state, dispatch] = useReducer(reducer, initialState);
const setIssueView = useCallback(
(property: TIssueViewOptions) => {
const setDisplayFilters = useCallback(
(displayFilter: Partial<IIssueDisplayFilterOptions>) => {
dispatch({
type: "SET_ISSUE_VIEW",
type: "SET_DISPLAY_FILTERS",
payload: {
issueView: property,
display_filters: {
...state.display_filters,
...displayFilter,
},
},
});
if (property === "kanban" && state.groupByProperty === null) {
if (
displayFilter.layout &&
displayFilter.layout === "kanban" &&
state.display_filters.group_by === null
) {
dispatch({
type: "SET_GROUP_BY_PROPERTY",
type: "SET_DISPLAY_FILTERS",
payload: {
groupByProperty: "state_detail.group",
display_filters: {
group_by: "state_detail.group",
},
},
});
}
@ -218,42 +153,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
[state]
);
const setGroupByProperty = useCallback((property: TIssueGroupByOptions) => {
dispatch({
type: "SET_GROUP_BY_PROPERTY",
payload: {
groupByProperty: property,
},
});
}, []);
const setOrderBy = useCallback((property: TIssueOrderByOptions) => {
dispatch({
type: "SET_ORDER_BY_PROPERTY",
payload: {
orderBy: property,
},
});
}, []);
const setShowEmptyGroups = useCallback((property: boolean) => {
dispatch({
type: "SET_SHOW_EMPTY_STATES",
payload: {
showEmptyGroups: property,
},
});
}, []);
const setShowSubIssues = useCallback((property: boolean) => {
dispatch({
type: "SET_SHOW_SUB_ISSUES",
payload: {
showSubIssues: property,
},
});
}, []);
const setFilters = useCallback(
(property: Partial<IIssueFilterOptions>) => {
Object.keys(property).forEach((key) => {
@ -279,9 +178,9 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
dispatch({
type: "SET_PROPERTIES",
payload: {
properties: {
...state.properties,
[key]: !state.properties[key],
display_properties: {
...state.display_properties,
[key]: !state.display_properties[key],
},
},
});
@ -292,19 +191,11 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
return (
<profileIssuesContext.Provider
value={{
issueView: state.issueView,
setIssueView,
groupByProperty: state.groupByProperty,
setGroupByProperty,
orderBy: state.orderBy,
setOrderBy,
showEmptyGroups: state.showEmptyGroups,
setShowEmptyGroups,
showSubIssues: state.showSubIssues,
setShowSubIssues,
display_filters: state.display_filters,
setDisplayFilters,
filters: state.filters,
setFilters,
properties: state.properties,
display_properties: state.display_properties,
setProperties,
}}
>

8
web/hooks/gantt-chart/cycle-issues-view.tsx
View File

@ -12,12 +12,12 @@ const useGanttChartCycleIssues = (
projectId: string | undefined,
cycleId: string | undefined
) => {
const { orderBy, filters, showSubIssues } = useIssuesView();
const { displayFilters, filters } = useIssuesView();
const params: any = {
order_by: orderBy,
type: filters?.type ? filters?.type : undefined,
sub_issue: showSubIssues,
order_by: displayFilters.order_by,
type: displayFilters?.type ? displayFilters?.type : undefined,
sub_issue: displayFilters.sub_issue,
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
state: filters?.state ? filters?.state.join(",") : undefined,
priority: filters?.priority ? filters?.priority.join(",") : undefined,

8
web/hooks/gantt-chart/issue-view.tsx
View File

@ -8,12 +8,12 @@ import useIssuesView from "hooks/use-issues-view";
import { PROJECT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: string | undefined) => {
const { orderBy, filters, showSubIssues } = useIssuesView();
const { displayFilters, filters } = useIssuesView();
const params: any = {
order_by: orderBy,
type: filters?.type ? filters?.type : undefined,
sub_issue: showSubIssues,
order_by: displayFilters.order_by,
type: displayFilters?.type ? displayFilters?.type : undefined,
sub_issue: displayFilters.sub_issue,
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
state: filters?.state ? filters?.state.join(",") : undefined,
priority: filters?.priority ? filters?.priority.join(",") : undefined,

8
web/hooks/gantt-chart/module-issues-view.tsx
View File

@ -12,12 +12,12 @@ const useGanttChartModuleIssues = (
projectId: string | undefined,
moduleId: string | undefined
) => {
const { orderBy, filters, showSubIssues } = useIssuesView();
const { displayFilters, filters } = useIssuesView();
const params: any = {
order_by: orderBy,
type: filters?.type ? filters?.type : undefined,
sub_issue: showSubIssues,
order_by: displayFilters.order_by,
type: displayFilters?.type ? displayFilters?.type : undefined,
sub_issue: displayFilters.sub_issue,
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
state: filters?.state ? filters?.state.join(",") : undefined,
priority: filters?.priority ? filters?.priority.join(",") : undefined,

127
web/hooks/my-issues/use-my-issues-filter.tsx
View File

@ -6,33 +6,25 @@ import useSWR, { mutate } from "swr";
import workspaceService from "services/workspace.service";
// types
import {
IIssueDisplayFilterOptions,
IIssueFilterOptions,
IWorkspaceMember,
IWorkspaceViewProps,
Properties,
TIssueGroupByOptions,
TIssueOrderByOptions,
TIssueViewOptions,
} from "types";
// fetch-keys
import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
const initialValues: IWorkspaceViewProps = {
issueView: "list",
filters: {
assignees: null,
created_by: null,
labels: null,
priority: null,
state_group: null,
subscriber: null,
start_date: null,
target_date: null,
display_filters: {
group_by: null,
layout: "list",
order_by: "-created_at",
show_empty_groups: true,
sub_issue: true,
type: null,
},
groupByProperty: null,
orderBy: "-created_at",
properties: {
display_properties: {
assignee: true,
start_date: true,
due_date: true,
@ -47,7 +39,16 @@ const initialValues: IWorkspaceViewProps = {
created_on: true,
updated_on: true,
},
showEmptyGroups: true,
filters: {
assignees: null,
created_by: null,
labels: null,
priority: null,
state_group: null,
subscriber: null,
start_date: null,
target_date: null,
},
};
const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
@ -90,59 +91,39 @@ const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
[myWorkspace, workspaceSlug]
);
const issueView = (myWorkspace?.view_props ?? initialValues).issueView;
const groupBy = (myWorkspace?.view_props ?? initialValues).groupByProperty;
const orderBy = (myWorkspace?.view_props ?? initialValues).orderBy;
const showEmptyGroups = (myWorkspace?.view_props ?? initialValues).showEmptyGroups;
const groupBy = (myWorkspace?.view_props ?? initialValues).display_filters.group_by;
const filters = (myWorkspace?.view_props ?? initialValues).filters;
const setIssueView = useCallback(
(newView: TIssueViewOptions) => {
const setDisplayFilters = useCallback(
(displayFilter: Partial<IIssueDisplayFilterOptions>) => {
const payload: Partial<IWorkspaceViewProps> = {
issueView: newView,
display_filters: {
...myWorkspace?.view_props?.display_filters,
...displayFilter,
},
};
if (newView === "kanban" && groupBy === null) payload.groupByProperty = "state_detail.group";
if (
displayFilter.layout &&
displayFilter.layout === "kanban" &&
groupBy === null &&
payload.display_filters
)
payload.display_filters.group_by = "state_detail.group";
saveData(payload);
},
[groupBy, saveData]
[groupBy, myWorkspace?.view_props.display_filters, saveData]
);
const setGroupBy = useCallback(
(newGroup: TIssueGroupByOptions) => {
saveData({
groupByProperty: newGroup,
});
},
[saveData]
);
const setOrderBy = useCallback(
(newOrderBy: TIssueOrderByOptions) => {
saveData({
orderBy: newOrderBy,
});
},
[saveData]
);
const setShowEmptyGroups = useCallback(() => {
if (!myWorkspace) return;
saveData({
showEmptyGroups: !myWorkspace?.view_props?.showEmptyGroups,
});
}, [myWorkspace, saveData]);
const setProperty = useCallback(
(key: keyof Properties) => {
if (!myWorkspace) return;
saveData({
properties: {
...myWorkspace.view_props?.properties,
[key]: !myWorkspace.view_props?.properties[key],
display_properties: {
...myWorkspace.view_props?.display_properties,
[key]: !myWorkspace.view_props?.display_properties[key],
},
});
},
@ -174,30 +155,24 @@ const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
}, [myWorkspace, workspaceSlug]);
const newProperties: Properties = {
assignee: myWorkspace?.view_props.properties.assignee ?? true,
start_date: myWorkspace?.view_props.properties.start_date ?? true,
due_date: myWorkspace?.view_props.properties.due_date ?? true,
key: myWorkspace?.view_props.properties.key ?? true,
labels: myWorkspace?.view_props.properties.labels ?? true,
priority: myWorkspace?.view_props.properties.priority ?? true,
state: myWorkspace?.view_props.properties.state ?? true,
sub_issue_count: myWorkspace?.view_props.properties.sub_issue_count ?? true,
attachment_count: myWorkspace?.view_props.properties.attachment_count ?? true,
link: myWorkspace?.view_props.properties.link ?? true,
estimate: myWorkspace?.view_props.properties.estimate ?? true,
created_on: myWorkspace?.view_props.properties.created_on ?? true,
updated_on: myWorkspace?.view_props.properties.updated_on ?? true,
assignee: myWorkspace?.view_props.display_properties.assignee ?? true,
start_date: myWorkspace?.view_props.display_properties.start_date ?? true,
due_date: myWorkspace?.view_props.display_properties.due_date ?? true,
key: myWorkspace?.view_props.display_properties.key ?? true,
labels: myWorkspace?.view_props.display_properties.labels ?? true,
priority: myWorkspace?.view_props.display_properties.priority ?? true,
state: myWorkspace?.view_props.display_properties.state ?? true,
sub_issue_count: myWorkspace?.view_props.display_properties.sub_issue_count ?? true,
attachment_count: myWorkspace?.view_props.display_properties.attachment_count ?? true,
link: myWorkspace?.view_props.display_properties.link ?? true,
estimate: myWorkspace?.view_props.display_properties.estimate ?? true,
created_on: myWorkspace?.view_props.display_properties.created_on ?? true,
updated_on: myWorkspace?.view_props.display_properties.updated_on ?? true,
};
return {
issueView,
setIssueView,
groupBy,
setGroupBy,
orderBy,
setOrderBy,
showEmptyGroups,
setShowEmptyGroups,
displayFilters: myWorkspace?.view_props?.display_filters,
setDisplayFilters,
properties: newProperties,
setProperty,
filters,

12
web/hooks/my-issues/use-my-issues.tsx
View File

@ -16,20 +16,20 @@ import { USER_ISSUES } from "constants/fetch-keys";
const useMyIssues = (workspaceSlug: string | undefined) => {
const router = useRouter();
const { filters, groupBy, orderBy } = useMyIssuesFilters(workspaceSlug);
const { filters, displayFilters } = useMyIssuesFilters(workspaceSlug);
const params: any = {
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
group_by: groupBy,
group_by: displayFilters?.group_by,
labels: filters?.labels ? filters?.labels.join(",") : undefined,
order_by: orderBy,
order_by: displayFilters?.order_by,
priority: filters?.priority ? filters?.priority.join(",") : undefined,
state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
type: filters?.type ? filters?.type : undefined,
type: displayFilters?.type,
};
const { data: myIssues, mutate: mutateMyIssues } = useSWR(
@ -53,7 +53,7 @@ const useMyIssues = (workspaceSlug: string | undefined) => {
allIssues: myIssues,
};
if (groupBy === "state_detail.group") {
if (displayFilters?.group_by === "state_detail.group") {
return myIssues
? Object.assign(
{
@ -69,7 +69,7 @@ const useMyIssues = (workspaceSlug: string | undefined) => {
}
return myIssues;
}, [groupBy, myIssues]);
}, [displayFilters, myIssues]);
const isEmpty =
Object.values(groupedIssues ?? {}).every((group) => group.length === 0) ||

16
web/hooks/use-calendar-issues-view.tsx
View File

@ -22,14 +22,12 @@ import {
const useCalendarIssuesView = () => {
const {
issueView,
calendarDateRange,
setCalendarDateRange,
display_filters: displayFilters,
setDisplayFilters,
filters,
setFilters,
resetFilterToDefault,
setNewFilterDefaultView,
setIssueView,
} = useContext(issueViewContext);
const router = useRouter();
@ -39,11 +37,11 @@ const useCalendarIssuesView = () => {
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
state: filters?.state ? filters?.state.join(",") : undefined,
priority: filters?.priority ? filters?.priority.join(",") : undefined,
type: filters?.type ? filters?.type : undefined,
type: displayFilters?.type ? displayFilters?.type : undefined,
labels: filters?.labels ? filters?.labels.join(",") : undefined,
created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
target_date: calendarDateRange,
target_date: displayFilters?.calendar_date_range,
};
const { data: projectCalendarIssues } = useSWR(
@ -103,16 +101,14 @@ const useCalendarIssuesView = () => {
: (projectCalendarIssues as IIssue[]);
return {
issueView,
displayFilters,
setDisplayFilters,
calendarIssues: calendarIssues ?? [],
calendarDateRange,
setCalendarDateRange,
filters,
setFilters,
params,
resetFilterToDefault,
setNewFilterDefaultView,
setIssueView,
} as const;
};

47
web/hooks/use-issues-view.tsx
View File

@ -27,22 +27,12 @@ import {
const useIssuesView = () => {
const {
issueView,
groupByProperty,
setGroupByProperty,
orderBy,
setOrderBy,
showEmptyGroups,
showSubIssues,
setShowEmptyGroups,
setShowSubIssues,
calendarDateRange,
setCalendarDateRange,
display_filters: displayFilters,
setDisplayFilters,
filters,
setFilters,
resetFilterToDefault,
setNewFilterDefaultView,
setIssueView,
} = useContext(issueViewContext);
const router = useRouter();
@ -50,17 +40,17 @@ const useIssuesView = () => {
const isArchivedIssues = router.pathname.includes("archived-issues");
const params: any = {
order_by: orderBy,
group_by: groupByProperty,
order_by: displayFilters?.order_by,
group_by: displayFilters?.group_by,
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
state: filters?.state ? filters?.state.join(",") : undefined,
priority: filters?.priority ? filters?.priority.join(",") : undefined,
type: filters?.type ? filters?.type : undefined,
type: displayFilters?.type ? displayFilters?.type : undefined,
labels: filters?.labels ? filters?.labels.join(",") : undefined,
created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
sub_issue: showSubIssues,
sub_issue: displayFilters?.sub_issue,
};
const { data: projectIssues, mutate: mutateProjectIssues } = useSWR(
@ -133,9 +123,9 @@ const useIssuesView = () => {
const backlogStatesList = statesList?.filter((state) => state.group === "backlog");
const stateIds =
filters && filters?.type === "active"
displayFilters && displayFilters?.type === "active"
? activeStatesList?.map((state) => state.id)
: filters?.type === "backlog"
: displayFilters?.type === "backlog"
? backlogStatesList?.map((state) => state.id)
: statesList?.map((state) => state.id);
@ -164,17 +154,17 @@ const useIssuesView = () => {
: projectIssues;
if (Array.isArray(issuesToGroup)) return { allIssues: issuesToGroup };
if (groupByProperty === "state")
if (displayFilters?.group_by === "state")
return issuesToGroup ? Object.assign(emptyStatesObject, issuesToGroup) : undefined;
return issuesToGroup;
}, [
displayFilters?.group_by,
projectIssues,
cycleIssues,
moduleIssues,
viewIssues,
projectArchivedIssues,
groupByProperty,
cycleId,
moduleId,
viewId,
@ -187,6 +177,11 @@ const useIssuesView = () => {
Object.keys(groupedByIssues ?? {}).length === 0;
return {
displayFilters: {
...displayFilters,
layout: isArchivedIssues ? "list" : displayFilters?.layout,
},
setDisplayFilters,
groupedByIssues,
mutateIssues: cycleId
? mutateCycleIssues
@ -197,24 +192,12 @@ const useIssuesView = () => {
: isArchivedIssues
? mutateProjectArchivedIssues
: mutateProjectIssues,
issueView: isArchivedIssues ? "list" : issueView,
groupByProperty,
setGroupByProperty,
orderBy,
setOrderBy,
showEmptyGroups: isArchivedIssues ? false : showEmptyGroups,
showSubIssues,
setShowEmptyGroups,
setShowSubIssues,
calendarDateRange,
setCalendarDateRange,
filters,
setFilters,
params,
isEmpty,
resetFilterToDefault,
setNewFilterDefaultView,
setIssueView,
} as const;
};

38
web/hooks/use-profile-issues.tsx
View File

@ -16,19 +16,11 @@ import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
const useProfileIssues = (workspaceSlug: string | undefined, userId: string | undefined) => {
const {
issueView,
setIssueView,
groupByProperty,
setGroupByProperty,
orderBy,
setOrderBy,
showEmptyGroups,
setShowEmptyGroups,
showSubIssues,
setShowSubIssues,
display_filters: displayFilters,
setDisplayFilters,
filters,
setFilters,
properties,
display_properties: displayProperties,
setProperties,
} = useContext(profileIssuesContext);
@ -39,14 +31,14 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
const params: any = {
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
group_by: groupByProperty,
group_by: displayFilters.group_by,
labels: filters?.labels ? filters?.labels.join(",") : undefined,
order_by: orderBy,
order_by: displayFilters.order_by,
priority: filters?.priority ? filters?.priority.join(",") : undefined,
state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
type: filters?.type ? filters?.type : undefined,
type: displayFilters?.type ? displayFilters?.type : undefined,
subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
};
@ -71,7 +63,7 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
allIssues: userProfileIssues,
};
if (groupByProperty === "state_detail.group") {
if (displayFilters.group_by === "state_detail.group") {
return userProfileIssues
? Object.assign(
{
@ -87,7 +79,7 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
}
return userProfileIssues;
}, [groupByProperty, userProfileIssues]);
}, [displayFilters.group_by, userProfileIssues]);
useEffect(() => {
if (!userId || !filters) return;
@ -120,19 +112,11 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
return {
groupedIssues,
issueView,
setIssueView,
groupByProperty,
setGroupByProperty,
orderBy,
setOrderBy,
showEmptyGroups,
setShowEmptyGroups,
showSubIssues,
setShowSubIssues,
displayFilters,
setDisplayFilters,
filters,
setFilters,
properties,
displayProperties,
setProperties,
isEmpty,
mutateProfileIssues,

16
web/hooks/use-spreadsheet-issues-view.tsx
View File

@ -22,25 +22,23 @@ import {
const useSpreadsheetIssuesView = () => {
const {
issueView,
orderBy,
setOrderBy,
display_filters: displayFilters,
setDisplayFilters,
filters,
setFilters,
resetFilterToDefault,
setNewFilterDefaultView,
setIssueView,
} = useContext(issueViewContext);
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
const params: any = {
order_by: orderBy,
order_by: displayFilters?.order_by,
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
state: filters?.state ? filters?.state.join(",") : undefined,
priority: filters?.priority ? filters?.priority.join(",") : undefined,
type: filters?.type ? filters?.type : undefined,
type: displayFilters?.type ? displayFilters?.type : undefined,
labels: filters?.labels ? filters?.labels.join(",") : undefined,
created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
@ -105,7 +103,8 @@ const useSpreadsheetIssuesView = () => {
: (projectSpreadsheetIssues as IIssue[]);
return {
issueView,
displayFilters,
setDisplayFilters,
mutateIssues: cycleId
? mutateCycleSpreadsheetIssues
: moduleId
@ -114,14 +113,11 @@ const useSpreadsheetIssuesView = () => {
? mutateViewSpreadsheetIssues
: mutateProjectSpreadsheetIssues,
spreadsheetIssues: spreadsheetIssues ?? [],
orderBy,
setOrderBy,
filters,
setFilters,
params,
resetFilterToDefault,
setNewFilterDefaultView,
setIssueView,
} as const;
};

1
web/pages/[workspaceSlug]/me/my-issues.tsx
View File

@ -7,7 +7,6 @@ import { PlusIcon } from "@heroicons/react/24/outline";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
// hooks
import useProjects from "hooks/use-projects";
import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
// components
import { MyIssuesView, MyIssuesViewOptions } from "components/issues";

4
web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
View File

@ -4,8 +4,6 @@ import useSWR from "swr";
// services
import projectService from "services/project.service";
// hooks
import useIssuesView from "hooks/use-issues-view";
// layouts
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
// contexts
@ -28,8 +26,6 @@ const ProjectArchivedIssues: NextPage = () => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { showEmptyGroups, setShowEmptyGroups } = useIssuesView();
const { data: projectDetails } = useSWR(
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
workspaceSlug && projectId

1
web/services/issues.service.ts
View File

@ -8,7 +8,6 @@ import type {
IIssueActivity,
IIssueComment,
IIssueLabels,
IIssueViewOptions,
ISubIssueResponse,
} from "types";

2
web/services/modules.service.ts
View File

@ -3,7 +3,7 @@ import APIService from "services/api.service";
import trackEventServices from "./track-event.service";
// types
import type { IIssueViewOptions, IModule, IIssue, ICurrentUserResponse } from "types";
import type { IModule, IIssue, ICurrentUserResponse } from "types";
const { NEXT_PUBLIC_API_BASE_URL } = process.env;

6
web/services/project.service.ts
View File

@ -12,7 +12,7 @@ import type {
IProjectMemberInvitation,
ISearchIssueResponse,
ProjectPreferences,
ProjectViewTheme,
IProjectViewProps,
TProjectIssuesSearchParams,
} from "types";
@ -297,8 +297,8 @@ export class ProjectServices extends APIService {
workspaceSlug: string,
projectId: string,
data: {
view_props?: ProjectViewTheme;
default_props?: ProjectViewTheme;
view_props?: IProjectViewProps;
default_props?: IProjectViewProps;
preferences?: ProjectPreferences;
sort_order?: number;
}

1
web/types/index.d.ts vendored
View File

@ -18,6 +18,7 @@ export * from "./calendar";
export * from "./notifications";
export * from "./waitlist";
export * from "./reaction";
export * from "./view-props";
export type NestedKeyOf<ObjectType extends object> = {
[Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object

59
web/types/issues.d.ts vendored
View File

@ -11,6 +11,11 @@ import type {
IStateLite,
TStateGroups,
Properties,
IIssueFilterOptions,
TIssueGroupByOptions,
TIssueViewOptions,
TIssueOrderByOptions,
IIssueDisplayFilterOptions,
} from "types";
export interface IIssueCycle {
@ -213,55 +218,6 @@ export interface IIssueLite {
workspace__slug: string;
}
export interface IIssueFilterOptions {
type: "active" | "backlog" | null;
assignees: string[] | null;
start_date: string[] | null;
target_date: string[] | null;
state: string[] | null;
state_group: TStateGroups[] | null;
subscriber: string[] | null;
labels: string[] | null;
priority: string[] | null;
created_by: string[] | null;
}
export type TIssueViewOptions = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
export type TIssueGroupByOptions =
| "state"
| "priority"
| "labels"
| "created_by"
| "state_detail.group"
| "project"
| "assignees"
| null;
export type TIssueOrderByOptions =
| "-created_at"
| "-updated_at"
| "priority"
| "sort_order"
| "state__name"
| "-state__name"
| "assignees__name"
| "-assignees__name"
| "labels__name"
| "-labels__name"
| "target_date"
| "-target_date"
| "estimate__point"
| "-estimate__point"
| "start_date"
| "-start_date";
export interface IIssueViewOptions {
group_by: TIssueGroupByOptions;
order_by: TIssueOrderByOptions;
filters: IIssueFilterOptions;
}
export interface IIssueAttachment {
asset: string;
attributes: {
@ -280,19 +236,16 @@ export interface IIssueAttachment {
export interface IIssueViewProps {
groupedIssues: { [key: string]: IIssue[] } | undefined;
groupByProperty: TIssueGroupByOptions;
displayFilters: IIssueDisplayFilterOptions | undefined;
isEmpty: boolean;
issueView: TIssueViewOptions;
mutateIssues: KeyedMutator<
| IIssue[]
| {
[key: string]: IIssue[];
}
>;
orderBy: TIssueOrderByOptions;
params: any;
properties: Properties;
showEmptyGroups: boolean;
}
export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | null;

13
web/types/projects.d.ts vendored
View File

@ -8,6 +8,7 @@ import type {
TIssueOrderByOptions,
TIssueViewOptions,
TStateGroups,
IProjectViewProps,
} from ".";
export interface IProject {
@ -66,14 +67,6 @@ export interface IProjectLite {
identifier: string;
}
type ProjectViewTheme = {
issueView: TIssueViewOptions;
groupByProperty: TIssueGroupByOptions;
orderBy: TIssueOrderByOptions;
calendarDateRange: string;
filters: IIssueFilterOptions;
};
type ProjectPreferences = {
pages: {
block_display: boolean;
@ -90,8 +83,8 @@ export interface IProjectMember {
preferences: ProjectPreferences;
view_props: ProjectViewTheme;
default_props: ProjectViewTheme;
view_props: IProjectViewProps;
default_props: IProjectViewProps;
created_at: Date;
updated_at: Date;

63
web/types/view-props.d.ts vendored Normal file
View File

@ -0,0 +1,63 @@
export type TIssueViewOptions = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
export type TIssueGroupByOptions =
| "state"
| "priority"
| "labels"
| "created_by"
| "state_detail.group"
| "project"
| "assignees"
| null;
export type TIssueOrderByOptions =
| "-created_at"
| "-updated_at"
| "priority"
| "sort_order"
| "state__name"
| "-state__name"
| "assignees__name"
| "-assignees__name"
| "labels__name"
| "-labels__name"
| "target_date"
| "-target_date"
| "estimate__point"
| "-estimate__point"
| "start_date"
| "-start_date";
export interface IIssueFilterOptions {
assignees?: string[] | null;
created_by?: string[] | null;
labels?: string[] | null;
priority?: string[] | null;
start_date?: string[] | null;
state?: string[] | null;
state_group?: TStateGroups[] | null;
subscriber?: string[] | null;
target_date?: string[] | null;
}
export interface IIssueDisplayFilterOptions {
calendar_date_range?: string;
group_by?: TIssueGroupByOptions;
layout?: TIssueViewOptions;
order_by?: TIssueOrderByOptions;
show_empty_groups?: boolean;
start_target_date?: boolean;
sub_issue?: boolean;
type?: "active" | "backlog" | null;
}
export interface IProjectViewProps {
display_filters: IIssueDisplayFilterOptions | undefined;
filters: IIssueFilterOptions;
}
export interface IWorkspaceViewProps {
display_filters: IIssueDisplayFilterOptions;
display_properties: Properties;
filters: IIssueFilterOptions;
}

10
web/types/workspace.d.ts vendored
View File

@ -3,6 +3,7 @@ import type {
IProjectMember,
IUser,
IUserMemberLite,
IWorkspaceViewProps,
TIssueGroupByOptions,
TIssueOrderByOptions,
TIssueViewOptions,
@ -63,15 +64,6 @@ export type Properties = {
updated_on: boolean;
};
export interface IWorkspaceViewProps {
properties: Properties;
issueView: TIssueViewOptions;
groupByProperty: TIssueGroupByOptions;
orderBy: TIssueOrderByOptions;
filters: Partial<IIssueFilterOptions>;
showEmptyGroups: boolean;
}
export interface IWorkspaceMember {
readonly id: string;
workspace: IWorkspace;