[Timeline]: added task summary.

epam · Jul 9, 2024 · fc92846 · fc92846
1 parent 94bc1ae
commit fc92846
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 15 deletions.
diff --git a/app/src/demo/tables/editableTable/TaskBar.module.scss b/app/src/demo/tables/editableTable/TaskBar.module.scss
@@ -3,3 +3,27 @@
     overflow: hidden;
     white-space: nowrap;
 }
+
+.container {
+    padding: 6px 0 6px 3px;
+
+    .header {
+        padding-top: 0;
+        padding-bottom: 10px;
+    }
+
+    .content {
+        padding: 0;
+
+        a {
+            text-decoration: none;
+        }
+    }
+}
+
+.dot {
+    height: 8px;
+    width: 8px;
+    border-radius: 50%;
+}
+
diff --git a/app/src/demo/tables/editableTable/TaskBar.tsx b/app/src/demo/tables/editableTable/TaskBar.tsx
@@ -1,13 +1,19 @@
 import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { TimelineTransform, TimelineController } from '@epam/uui-timeline';
-import { Text } from '@epam/uui';
+import { Badge, FlexCell, FlexRow, Text, Tooltip } from '@epam/uui';
 import { Task } from './types';
 import { resources, statuses } from './demoData';
 import { uuiDayjs } from '../../../helpers';
 
 import css from './TaskBar.module.scss';
 
 const getTaskColor = (status: string) => statuses.find((s) => s.id === status)?.color ?? '#e1e3eb';
+const formatDate = (date: string) => {
+    if (!date?.length) {
+        return '';
+    }
+    return uuiDayjs.dayjs(date, 'YYYY-MM-DD').format('DD.MM.YYYY');
+};
 
 export function TaskBar({ task, timelineController }: { task: Task, timelineController: TimelineController }) {
     const [coords, setCoords] = useState<{ width?: number, left?: number }>({});
@@ -58,20 +64,118 @@ export function TaskBar({ task, timelineController }: { task: Task, timelineCont
         return;
     }
 
+    const status = statuses.find((s) => s.id === task.status);
+    const renderTaskStatus = () => {
+        return (
+            <div>
+                <Text cx={ css.header } fontSize="14" lineHeight="18" fontWeight="600">
+                    {task.name}
+                </Text>
+                <FlexRow columnGap="12" alignItems="top" size="24">
+                    <FlexCell width="auto">
+                        <Text cx={ css.content } fontSize="12" lineHeight="18" fontWeight="600">
+                            Status:
+                        </Text>
+                    </FlexCell>
+                    <FlexCell width="auto">
+                        <Badge
+                            size="18"
+                            color="neutral"
+                            icon={ () => <span className={ css.dot } style={ { backgroundColor: item.color } } /> }
+                            fill="outline"
+                            caption={ status.name }
+                        />
+                    </FlexCell>
+                </FlexRow>
+                { task.type === 'task'
+                && (
+                    <FlexRow columnGap="12" size="24" alignItems="top">
+                        <FlexCell width="auto">
+                            <Text cx={ css.content } fontSize="12" lineHeight="18" fontWeight="600">
+                                Assignee:
+                            </Text>
+                        </FlexCell>
+                        <FlexCell width="auto">
+                            <Text cx={ css.content } fontSize="12" lineHeight="18">
+                                { assignee?.fullName }
+                            </Text>
+                        </FlexCell>
+                    </FlexRow>
+                )}
+                <FlexRow columnGap="12" size="24" alignItems="top">
+                    <FlexCell width="auto">
+                        <Text cx={ css.content } fontSize="12" lineHeight="18" fontWeight="600">
+                            Start date:
+                        </Text>
+                    </FlexCell>
+                    <FlexCell width="auto">
+                        <Text cx={ css.content } fontSize="12" lineHeight="18">
+                            { formatDate(task.startDate) }
+                        </Text>
+                    </FlexCell>
+                </FlexRow>
+                { task.type === 'task'
+                && (
+                    <FlexRow columnGap="12" size="24" alignItems="top">
+                        <FlexCell width="auto">
+                            <Text cx={ css.content } fontSize="12" lineHeight="18" fontWeight="600">
+                                Planned start date:
+                            </Text>
+                        </FlexCell>
+                        <FlexCell width="auto">
+                            <Text cx={ css.content } fontSize="12" lineHeight="18">
+                                { formatDate(task.exactStartDate) }
+                            </Text>
+                        </FlexCell>
+                    </FlexRow>
+                )}
+                { task.type === 'task'
+                && (
+                    <FlexRow columnGap="12" size="24" alignItems="top">
+                        <FlexCell width="auto">
+                            <Text cx={ css.content } fontSize="12" lineHeight="18" fontWeight="600">
+                                Due date:
+                            </Text>
+                        </FlexCell>
+                        <FlexCell width="auto">
+                            <Text cx={ css.content } fontSize="12" lineHeight="18">
+                                { formatDate(task.dueDate) }
+                            </Text>
+                        </FlexCell>
+                    </FlexRow>
+                )}
+                <FlexRow columnGap="12" size="24" alignItems="top">
+                    <FlexCell width="auto">
+                        <Text cx={ css.content } fontSize="12" lineHeight="18" fontWeight="600">
+                            Planned end date:
+                        </Text>
+                    </FlexCell>
+                    <FlexCell width="auto">
+                        <Text cx={ css.content } fontSize="12" lineHeight="18">
+                            { task.type === 'story' ? formatDate(task.dueDate) : (to && uuiDayjs.dayjs(to).format('DD.MM.YYYY')) }
+                        </Text>
+                    </FlexCell>
+                </FlexRow>
+            </div>
+        );
+    };
+
     return (
-        <div
-            key={ item.id }
-            style={ {
-                position: 'absolute' as any,
-                height: (item.height ?? 18) * devicePixelRatio,
-                background: item.color,
-                width: `${coords.width}px`,
-                left: 0,
-                transform: `translateX(${coords.left}px)`,
-                translate: 'transform linear', 
-            } }
-        >
-            { coords.width > 50 && <Text color="white" cx={ css.assingeeText }>{assignee?.fullName}</Text> }
-        </div>
+        <Tooltip renderContent={ renderTaskStatus } openDelay={ 500 } cx={ css.container } color="neutral">
+            <div
+                key={ item.id }
+                style={ {
+                    position: 'absolute' as any,
+                    height: item.height ?? 18,
+                    background: item.color,
+                    width: `${coords.width}px`,
+                    left: 0,
+                    transform: `translateX(${coords.left}px)`,
+                    translate: 'transform linear', 
+                } }
+            >
+                { coords.width > 50 && <Text color="white" cx={ css.assingeeText }>{assignee?.fullName}</Text> }
+            </div>
+        </Tooltip>
     );
 }
diff --git a/app/src/demo/tables/editableTable/TaskRow.module.scss b/app/src/demo/tables/editableTable/TaskRow.module.scss
@@ -16,4 +16,7 @@
     left: 0;
     width: 100%;
     height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }