refactor: enhance components modularity and introduce new UI componenets (#6192)
* feat: add navigation dropdown component * chore: enhance title/ description loader and componenet modularity * chore: issue store filter update * chore: added few icons to ui package * chore: improvements for tabs componenet * chore: enhance sidebar modularity * chore: update issue and router store to add support for additional issue layouts * chore: enhanced cycle componenets modularity * feat: added project grouping header for cycles list * chore: enhanced project dropdown componenet by adding multiple selection functionality * chore: enhanced rich text editor modularity by taking members ids as props for mentions * chore: added functionality to filter disabled layouts in issue-layout dropdown * chore: added support to pass project ids as props in project card list * feat: multi select project modal * chore: seperate out project componenet for reusability * chore: command pallete store improvements * fix: build errors
This commit is contained in:
parent
9ad8b43408
commit
54f828cbfa
82 changed files with 1044 additions and 320 deletions
|
|
@ -9,12 +9,13 @@ import { useAppRouter } from "@/hooks/use-app-router";
|
|||
import { CycleDetailsSidebar } from "./";
|
||||
|
||||
type Props = {
|
||||
projectId: string;
|
||||
projectId?: string;
|
||||
workspaceSlug: string;
|
||||
isArchived?: boolean;
|
||||
};
|
||||
|
||||
export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
|
||||
export const CyclePeekOverview: React.FC<Props> = observer((props) => {
|
||||
const { projectId: propsProjectId, workspaceSlug, isArchived } = props;
|
||||
// router
|
||||
const router = useAppRouter();
|
||||
const pathname = usePathname();
|
||||
|
|
@ -23,22 +24,25 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
|
|||
// refs
|
||||
const ref = React.useRef(null);
|
||||
// store hooks
|
||||
const { fetchCycleDetails, fetchArchivedCycleDetails } = useCycle();
|
||||
const { getCycleById, fetchCycleDetails, fetchArchivedCycleDetails } = useCycle();
|
||||
// derived values
|
||||
const cycleDetails = peekCycle ? getCycleById(peekCycle.toString()) : undefined;
|
||||
const projectId = propsProjectId || cycleDetails?.project_id;
|
||||
|
||||
const handleClose = () => {
|
||||
const query = generateQueryParams(searchParams, ["peekCycle"]);
|
||||
router.push(`${pathname}?${query}`);
|
||||
router.push(`${pathname}?${query}`, {}, { showProgressBar: false });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!peekCycle) return;
|
||||
if (!peekCycle || !projectId) return;
|
||||
if (isArchived) fetchArchivedCycleDetails(workspaceSlug, projectId, peekCycle.toString());
|
||||
else fetchCycleDetails(workspaceSlug, projectId, peekCycle.toString());
|
||||
}, [fetchArchivedCycleDetails, fetchCycleDetails, isArchived, peekCycle, projectId, workspaceSlug]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{peekCycle && (
|
||||
{peekCycle && projectId && (
|
||||
<div
|
||||
ref={ref}
|
||||
className="flex h-full w-full max-w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 fixed md:relative right-0 z-[9]"
|
||||
|
|
@ -47,7 +51,13 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
|
|||
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
|
||||
}}
|
||||
>
|
||||
<CycleDetailsSidebar handleClose={handleClose} isArchived={isArchived} cycleId={peekCycle} />
|
||||
<CycleDetailsSidebar
|
||||
handleClose={handleClose}
|
||||
isArchived={isArchived}
|
||||
projectId={projectId}
|
||||
workspaceSlug={workspaceSlug}
|
||||
cycleId={peekCycle}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue