feat(GoalPreview): added sidebar like on GoalPage

taskany-inc · Oct 13, 2023 · 203bef5 · 203bef5
1 parent 49160d0
commit 203bef5
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 73 deletions.
diff --git a/src/components/GoalPage/GoalPage.tsx b/src/components/GoalPage/GoalPage.tsx
@@ -26,6 +26,7 @@ import { GoalContentHeader } from '../GoalContentHeader/GoalContentHeader';
 import { GoalActivityFeed } from '../GoalActivityFeed';
 import { IssueParent } from '../IssueParent';
 import { issuePage } from '../../utils/domObjects';
+import { TagObject } from '../../types/tag';
 
 import { tr } from './GoalPage.i18n';
 
@@ -35,12 +36,6 @@ const GoalContent = styled(PageContent)`
     gap: ${gapM};
 `;
 
-interface TagObject {
-    id: string;
-    title: string;
-    description?: string | null;
-}
-
 export const GoalPage = ({ user, ssrTime, params: { id } }: ExternalPageProps<{ id: string }>) => {
     const router = useRouter();
 

diff --git a/src/components/GoalPreview/GoalPreview.i18n/en.json b/src/components/GoalPreview/GoalPreview.i18n/en.json
@@ -1,4 +1,3 @@
 {
-    "Edit": "Edit",
-    "Delete": "Delete"
+    "Edit": "Edit"
 }
diff --git a/src/components/GoalPreview/GoalPreview.i18n/ru.json b/src/components/GoalPreview/GoalPreview.i18n/ru.json
@@ -1,4 +1,3 @@
 {
-    "Edit": "Изменить",
-    "Delete": "Удалить"
+    "Edit": "Редактировать"
 }
diff --git a/src/components/GoalPreview/GoalPreview.tsx b/src/components/GoalPreview/GoalPreview.tsx
@@ -1,8 +1,7 @@
-import React, { FC, useCallback, useMemo, useRef } from 'react';
+import React, { FC, useCallback, useRef } from 'react';
 import styled from 'styled-components';
-import { danger0 } from '@taskany/colors';
-import { Button, Dot, Dropdown, MenuItem, ModalContent, ModalHeader, ModalPreview, nullable } from '@taskany/bricks';
-import { IconMoreVerticalOutline, IconBinOutline, IconEditOutline } from '@taskany/icons';
+import { Button, Dot, ModalContent, ModalHeader, ModalPreview, nullable } from '@taskany/bricks';
+import { IconEditOutline } from '@taskany/icons';
 
 import { routes } from '../../hooks/router';
 import { dispatchModalEvent, ModalEvent } from '../../utils/dispatchModal';
@@ -12,6 +11,8 @@ import { GoalHeader } from '../GoalHeader';
 import { GoalContentHeader } from '../GoalContentHeader/GoalContentHeader';
 import { GoalActivityFeed } from '../GoalActivityFeed';
 import { IssueParent } from '../IssueParent';
+import { GoalSidebar } from '../GoalSidebar/GoalSidebar';
+import { TagObject } from '../../types/tag';
 
 import { useGoalPreview } from './GoalPreviewProvider';
 import { tr } from './GoalPreview.i18n';
@@ -24,6 +25,12 @@ interface GoalPreviewProps {
     onDelete?: () => void;
 }
 
+const StyledModalWrapper = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 250px;
+    overflow: auto;
+`;
+
 const StyledModalHeader = styled(ModalHeader)`
     top: 0;
     position: sticky;
@@ -32,40 +39,67 @@ const StyledModalHeader = styled(ModalHeader)`
 `;
 
 const StyledModalContent = styled(ModalContent)`
-    overflow: auto;
+    z-index: 2; // needed that dropdowns will be upper than sidebar
+`;
+
+const StyledStickyModalContent = styled(ModalContent)`
+    position: sticky;
+    top: 0;
+    height: fit-content;
 `;
 
 const StyledModalPreview = styled(ModalPreview)`
+    width: 850px;
     display: flex;
     flex-direction: column;
 `;
 
 const GoalPreviewModal: React.FC<GoalPreviewProps> = ({ shortId, goal, defaults, onClose, onDelete }) => {
+    const { setPreview } = useGoalPreview();
     const onPreviewClose = useCallback(() => {
         onClose?.();
     }, [onClose]);
 
-    const onEditMenuChange = useCallback((item: { onClick: () => void }) => {
-        item.onClick?.();
-    }, []);
+    const { goalProjectChange, onGoalStateChange, goalTagsUpdate, invalidate } = useGoalResource(
+        { id: goal?.id },
+        { invalidate: { getById: shortId } },
+    );
+
+    // FIXME https://github.com/taskany-inc/issues/issues/1853
+    const onGoalTagAdd = useCallback(
+        async (value: TagObject[]) => {
+            if (!goal) return;
+
+            await goalTagsUpdate([...goal.tags, ...value]);
 
-    const { onGoalStateChange } = useGoalResource({ id: goal?.id }, { invalidate: { getById: shortId } });
-
-    const goalEditMenuItems = useMemo(
-        () => [
-            {
-                label: tr('Edit'),
-                icon: <IconEditOutline size="xxs" />,
-                onClick: dispatchModalEvent(ModalEvent.GoalEditModal),
-            },
-            {
-                label: tr('Delete'),
-                color: danger0,
-                icon: <IconBinOutline size="xxs" />,
-                onClick: dispatchModalEvent(ModalEvent.GoalDeleteModal),
-            },
-        ],
-        [],
+            invalidate();
+        },
+        [goal, invalidate, goalTagsUpdate],
+    );
+
+    const onGoalTagRemove = useCallback(
+        (value: TagObject) => async () => {
+            if (!goal) return;
+
+            const tags = goal.tags.filter((tag) => tag.id !== value.id);
+            await goalTagsUpdate(tags);
+
+            invalidate();
+        },
+        [goal, invalidate, goalTagsUpdate],
+    );
+
+    const onGoalTransfer = useCallback(
+        async (project?: { id: string }) => {
+            if (!project) return;
+
+            const transferedGoal = await goalProjectChange(project.id);
+
+            if (transferedGoal) {
+                setPreview(transferedGoal._shortId, transferedGoal);
+            }
+        },
+        [goalProjectChange, setPreview],
     );
 
     const commentsRef = useRef<HTMLDivElement>(null);
@@ -86,29 +120,10 @@ const GoalPreviewModal: React.FC<GoalPreviewProps> = ({ shortId, goal, defaults,
                     actions={nullable(goal?._isEditable, () => (
                         <>
                             <div />
-                            <Dropdown
-                                onChange={onEditMenuChange}
-                                items={goalEditMenuItems}
-                                renderTrigger={({ ref, onClick }) => (
-                                    <Button
-                                        ref={ref}
-                                        ghost
-                                        iconLeft={<IconMoreVerticalOutline size="xs" />}
-                                        onClick={onClick}
-                                    />
-                                )}
-                                renderItem={({ item, cursor, index, onClick }) => (
-                                    <MenuItem
-                                        key={item.label}
-                                        ghost
-                                        color={item.color}
-                                        focused={cursor === index}
-                                        icon={item.icon}
-                                        onClick={onClick}
-                                    >
-                                        {item.label}
-                                    </MenuItem>
-                                )}
+                            <Button
+                                text={tr('Edit')}
+                                iconLeft={<IconEditOutline size="xs" />}
+                                onClick={dispatchModalEvent(ModalEvent.GoalEditModal)}
                             />
                         </>
                     ))}
@@ -126,15 +141,27 @@ const GoalPreviewModal: React.FC<GoalPreviewProps> = ({ shortId, goal, defaults,
                     ))}
                 </GoalHeader>
             </StyledModalHeader>
-            <StyledModalContent>
-                {nullable(goal, (g) => (
-                    <GoalContentHeader date={g.createdAt} description={g.description} />
-                ))}
-
-                {nullable(goal, (g) => (
-                    <GoalActivityFeed ref={commentsRef} goal={g} shortId={shortId} onGoalDeleteConfirm={onDelete} />
-                ))}
-            </StyledModalContent>
+            <StyledModalWrapper>
+                <StyledModalContent>
+                    {nullable(goal, (g) => (
+                        <GoalContentHeader date={g.createdAt} description={g.description} />
+                    ))}
+
+                    {nullable(goal, (g) => (
+                        <GoalActivityFeed ref={commentsRef} goal={g} shortId={shortId} onGoalDeleteConfirm={onDelete} />
+                    ))}
+                </StyledModalContent>
+                <StyledStickyModalContent>
+                    {nullable(goal, (g) => (
+                        <GoalSidebar
+                            goal={g}
+                            onGoalTagRemove={onGoalTagRemove}
+                            onGoalTagAdd={onGoalTagAdd}
+                            onGoalTransfer={onGoalTransfer}
+                        />
+                    ))}
+                </StyledStickyModalContent>
+            </StyledModalWrapper>
         </StyledModalPreview>
     );
 };

diff --git a/src/components/TagComboBox.tsx b/src/components/TagComboBox.tsx
@@ -7,15 +7,10 @@ import { IconTagOutline } from '@taskany/icons';
 import { trpc } from '../utils/trpcClient';
 import { notifyPromise } from '../utils/notifyPromise';
 import { tagsCombobox } from '../utils/domObjects';
+import { TagObject } from '../types/tag';
 
 import { CommonCombobox } from './CommonCombobox';
 
-interface TagObject {
-    id: string;
-    title: string;
-    description?: string | null;
-}
-
 interface TagComboBoxProps {
     text?: React.ComponentProps<typeof Button>['text'];
     query?: string;

diff --git a/src/types/tag.ts b/src/types/tag.ts
@@ -0,0 +1,5 @@
+export interface TagObject {
+    id: string;
+    title: string;
+    description?: string | null;
+}