mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
c16a5b9b71
* restructure the logic to avoid throwing error if any dat is not found * updated files for previous commit * fix build errors * remove throwing error if userId is undefined * optionally chain display_name property to fix sentry issues * add ooptional check * change issue action logic to increase code maintainability and make sure to send only the updated date while updating the issue * fix issue updation bugs * fix module issues build error * fix runtime errors
191 lines
6.8 KiB
TypeScript
191 lines
6.8 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
import router from "next/router";
|
|
//components
|
|
// icons
|
|
import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
|
|
import { CustomMenu } from "@plane/ui";
|
|
// hooks
|
|
// constants
|
|
import { ProjectAnalyticsModal } from "components/analytics";
|
|
import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
|
|
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "constants/issue";
|
|
import { useIssues, useCycle, useProjectState, useLabel, useMember } from "hooks/store";
|
|
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
|
|
|
|
export const CycleMobileHeader = () => {
|
|
const [analyticsModal, setAnalyticsModal] = useState(false);
|
|
const { getCycleById } = useCycle();
|
|
const layouts = [
|
|
{ key: "list", title: "List", icon: List },
|
|
{ key: "kanban", title: "Kanban", icon: Kanban },
|
|
{ key: "calendar", title: "Calendar", icon: Calendar },
|
|
];
|
|
|
|
const { workspaceSlug, projectId, cycleId } = router.query;
|
|
const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
|
|
// store hooks
|
|
const {
|
|
issuesFilter: { issueFilters, updateFilters },
|
|
} = useIssues(EIssuesStoreType.CYCLE);
|
|
const activeLayout = issueFilters?.displayFilters?.layout;
|
|
|
|
const handleLayoutChange = useCallback(
|
|
(layout: TIssueLayouts) => {
|
|
if (!workspaceSlug || !projectId || !cycleId) return;
|
|
updateFilters(
|
|
workspaceSlug.toString(),
|
|
projectId.toString(),
|
|
EIssueFilterType.DISPLAY_FILTERS,
|
|
{ layout: layout },
|
|
cycleId.toString()
|
|
);
|
|
},
|
|
[workspaceSlug, projectId, cycleId, updateFilters]
|
|
);
|
|
|
|
const { projectStates } = useProjectState();
|
|
const { projectLabels } = useLabel();
|
|
const {
|
|
project: { projectMemberIds },
|
|
} = useMember();
|
|
|
|
const handleFiltersUpdate = useCallback(
|
|
(key: keyof IIssueFilterOptions, value: string | string[]) => {
|
|
if (!workspaceSlug || !projectId || !cycleId) return;
|
|
const newValues = issueFilters?.filters?.[key] ?? [];
|
|
|
|
if (Array.isArray(value)) {
|
|
value.forEach((val) => {
|
|
if (!newValues.includes(val)) newValues.push(val);
|
|
});
|
|
} else {
|
|
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
|
|
else newValues.push(value);
|
|
}
|
|
|
|
updateFilters(
|
|
workspaceSlug.toString(),
|
|
projectId.toString(),
|
|
EIssueFilterType.FILTERS,
|
|
{ [key]: newValues },
|
|
cycleId.toString()
|
|
);
|
|
},
|
|
[workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
|
|
);
|
|
|
|
const handleDisplayFilters = useCallback(
|
|
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
|
|
if (!workspaceSlug || !projectId || !cycleId) return;
|
|
updateFilters(
|
|
workspaceSlug.toString(),
|
|
projectId.toString(),
|
|
EIssueFilterType.DISPLAY_FILTERS,
|
|
updatedDisplayFilter,
|
|
cycleId.toString()
|
|
);
|
|
},
|
|
[workspaceSlug, projectId, cycleId, updateFilters]
|
|
);
|
|
|
|
const handleDisplayProperties = useCallback(
|
|
(property: Partial<IIssueDisplayProperties>) => {
|
|
if (!workspaceSlug || !projectId || !cycleId) return;
|
|
updateFilters(
|
|
workspaceSlug.toString(),
|
|
projectId.toString(),
|
|
EIssueFilterType.DISPLAY_PROPERTIES,
|
|
property,
|
|
cycleId.toString()
|
|
);
|
|
},
|
|
[workspaceSlug, projectId, cycleId, updateFilters]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<ProjectAnalyticsModal
|
|
isOpen={analyticsModal}
|
|
onClose={() => setAnalyticsModal(false)}
|
|
cycleDetails={cycleDetails ?? undefined}
|
|
/>
|
|
<div className="flex justify-evenly py-2 border-b border-custom-border-200">
|
|
<CustomMenu
|
|
maxHeight={"md"}
|
|
className="flex flex-grow justify-center text-custom-text-200 text-sm"
|
|
placement="bottom-start"
|
|
customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
|
|
customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
|
|
closeOnSelect
|
|
>
|
|
{layouts.map((layout, index) => (
|
|
<CustomMenu.MenuItem
|
|
key={ISSUE_LAYOUTS[index].key}
|
|
onClick={() => {
|
|
handleLayoutChange(ISSUE_LAYOUTS[index].key);
|
|
}}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<layout.icon className="w-3 h-3" />
|
|
<div className="text-custom-text-300">{layout.title}</div>
|
|
</CustomMenu.MenuItem>
|
|
))}
|
|
</CustomMenu>
|
|
<div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
|
|
<FiltersDropdown
|
|
title="Filters"
|
|
placement="bottom-end"
|
|
menuButton={
|
|
<span className="flex items-center text-custom-text-200 text-sm">
|
|
Filters
|
|
<ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
|
|
</span>
|
|
}
|
|
>
|
|
<FilterSelection
|
|
filters={issueFilters?.filters ?? {}}
|
|
handleFiltersUpdate={handleFiltersUpdate}
|
|
layoutDisplayFiltersOptions={
|
|
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
|
|
}
|
|
labels={projectLabels}
|
|
memberIds={projectMemberIds ?? undefined}
|
|
states={projectStates}
|
|
/>
|
|
</FiltersDropdown>
|
|
</div>
|
|
<div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
|
|
<FiltersDropdown
|
|
title="Display"
|
|
placement="bottom-end"
|
|
menuButton={
|
|
<span className="flex items-center text-custom-text-200 text-sm">
|
|
Display
|
|
<ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
|
|
</span>
|
|
}
|
|
>
|
|
<DisplayFiltersSelection
|
|
layoutDisplayFiltersOptions={
|
|
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
|
|
}
|
|
displayFilters={issueFilters?.displayFilters ?? {}}
|
|
handleDisplayFiltersUpdate={handleDisplayFilters}
|
|
displayProperties={issueFilters?.displayProperties ?? {}}
|
|
handleDisplayPropertiesUpdate={handleDisplayProperties}
|
|
ignoreGroupedFilters={["cycle"]}
|
|
/>
|
|
</FiltersDropdown>
|
|
</div>
|
|
|
|
<span
|
|
onClick={() => setAnalyticsModal(true)}
|
|
className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
|
|
>
|
|
Analytics
|
|
</span>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|