From 7268910c4dfa79944a9f00ad69720256c0207342 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Mon, 9 Oct 2023 20:02:24 +0300
Subject: [PATCH] Added statuses picker.

---
 app/src/sandbox/project/ProjectDemo.tsx |  5 ++
 app/src/sandbox/project/columns.tsx     | 90 +++++++++++++++++--------
 app/src/sandbox/project/demoData.ts     |  9 ++-
 app/src/sandbox/project/types.ts        |  9 ++-
 4 files changed, 82 insertions(+), 31 deletions(-)

diff --git a/app/src/sandbox/project/ProjectDemo.tsx b/app/src/sandbox/project/ProjectDemo.tsx
index d7b0aaba61..a2c43778b6 100644
--- a/app/src/sandbox/project/ProjectDemo.tsx
+++ b/app/src/sandbox/project/ProjectDemo.tsx
@@ -6,6 +6,8 @@ import { ReactComponent as redoIcon } from '@epam/assets/icons/common/content-ed
 import { ReactComponent as insertAfter } from '@epam/assets/icons/common/table-row_plus_after-24.svg';
 import { ReactComponent as insertBefore } from '@epam/assets/icons/common/table-row_plus_before-24.svg';
 import { ReactComponent as deleteLast } from '@epam/assets/icons/common/table-row_remove-24.svg';
+import { ReactComponent as add } from '@epam/assets/icons/common/action-add-12.svg';
+
 import { Task } from './types';
 import { getDemoTasks } from './demoData';
 import { getColumns } from './columns';
@@ -134,6 +136,9 @@ export function ProjectDemo() {
     return (
         <Panel style={ { width: '100%' } }>
             <FlexRow spacing="12" margin="12">
+                <FlexCell width="auto">
+                    <Button size="30" icon={ add } caption="Add Task" onClick={ () => insertTask('bottom') } />
+                </FlexCell>
                 <FlexCell width="auto">
                     <IconButton icon={ insertAfter } onClick={ () => insertTask('bottom') } />
                 </FlexCell>
diff --git a/app/src/sandbox/project/columns.tsx b/app/src/sandbox/project/columns.tsx
index 4b8415fac8..2127dddddb 100644
--- a/app/src/sandbox/project/columns.tsx
+++ b/app/src/sandbox/project/columns.tsx
@@ -1,14 +1,15 @@
 import { Task, ColumnsProps } from './types';
-import { resources } from './demoData';
+import { resources, statuses } from './demoData';
 import React from 'react';
-import {
-    DataTableCell, TextInput, NumericInput, PickerInput, DatePicker, Checkbox, DataPickerRow, PickerItem,
-} from '@epam/uui';
-import { TextArea } from '@epam/promo';
+import { TextArea, PickerToggler, TextInput, DataTableCell, NumericInput, PickerInput,
+    DatePicker, DataPickerRow, PickerItem, IconContainer } from '@epam/promo';
 import { ArrayDataSource, DataColumnProps, DataQueryFilter } from '@epam/uui-core';
+import { ReactComponent as statusIcon } from '@epam/assets/icons/common/radio-point-10.svg';
+
 import { RowKebabButton } from './RowKebabButton';
 
 const resourceDataSource = new ArrayDataSource({ items: resources });
+const statusDataSource = new ArrayDataSource({ items: statuses });
 
 export function getColumns(columnsProps: ColumnsProps) {
     const columns: DataColumnProps<Task, number, DataQueryFilter<Task>>[] = [
@@ -25,7 +26,8 @@ export function getColumns(columnsProps: ColumnsProps) {
                     { ...props }
                 />
             ),
-        }, {
+        },
+        {
             key: 'estimate',
             textAlign: 'right',
             caption: 'Estimate',
@@ -39,7 +41,54 @@ export function getColumns(columnsProps: ColumnsProps) {
                     { ...props }
                 />
             ),
-        }, {
+        },
+        {
+            key: 'status',
+            caption: 'Status',
+            width: 150,
+            renderCell: (props) => (
+                <DataTableCell
+                    { ...props.rowLens.prop('status').toProps() }
+                    renderEditor={ (props) => (
+                        <PickerInput
+                            valueType="id"
+                            selectionMode="single"
+                            dataSource={ statusDataSource }
+                            renderRow={ (props) => (
+                                <DataPickerRow
+                                    { ...props }
+                                    renderItem={ (item) => (
+                                        <PickerItem
+                                            title={ item.name }
+                                            icon={ () => <IconContainer icon={ statusIcon } style={ { fill: item.color } } /> }
+                                            { ...props }
+                                        />
+                                    ) }
+                                />
+                            ) }
+                            renderToggler={ (togglerProps) => {
+                                const row = togglerProps.selection[0];
+                                return (
+                                    <PickerToggler
+                                        { ...props }
+                                        { ...togglerProps }
+                                        icon={
+                                            row?.value 
+                                                ? () => <IconContainer icon={ statusIcon } style={ { fill: row?.value?.color } } /> 
+                                                : undefined
+                                        }
+                                        iconPosition="left"
+                                    />
+                                );
+                            } }
+                            { ...props }
+                        />
+                    ) }
+                    { ...props }
+                />
+            ),
+        },
+        {
             key: 'resource',
             caption: 'Resources',
             width: 300,
@@ -62,7 +111,8 @@ export function getColumns(columnsProps: ColumnsProps) {
                     { ...props }
                 />
             ),
-        }, {
+        },
+        {
             key: 'startDate',
             caption: 'Start date',
             width: 150,
@@ -74,25 +124,8 @@ export function getColumns(columnsProps: ColumnsProps) {
                     { ...props }
                 />
             ),
-        }, {
-            key: 'isDone',
-            caption: 'Done',
-            width: 100,
-            isSortable: true,
-            justifyContent: 'center',
-            renderCell: (props) => <DataTableCell { ...props.rowLens.prop('isDone').toProps() } renderEditor={ (props) => <Checkbox { ...props } /> } { ...props } />,
-        }, {
-            key: 'complete',
-            caption: '% Complete',
-            width: 130,
-            renderCell: (props) => (
-                <DataTableCell
-                    { ...props.rowLens.prop('complete').toProps() }
-                    renderEditor={ (props) => <NumericInput max={ 100 } { ...props } formatOptions={ { maximumFractionDigits: 0 } } /> }
-                    { ...props }
-                />
-            ),
-        }, {
+        },
+        {
             key: 'description',
             caption: 'Description',
             width: 200,
@@ -100,7 +133,8 @@ export function getColumns(columnsProps: ColumnsProps) {
             renderCell: (props) => (
                 <DataTableCell { ...props.rowLens.prop('description').toProps() } renderEditor={ (props) => <TextArea { ...props } autoSize={ true } /> } { ...props } />
             ),
-        }, {
+        },
+        {
             key: 'actions',
             render: (item, row) => <RowKebabButton row={ row } { ...columnsProps } />,
             width: 54,
diff --git a/app/src/sandbox/project/demoData.ts b/app/src/sandbox/project/demoData.ts
index faf2814164..9552492e09 100644
--- a/app/src/sandbox/project/demoData.ts
+++ b/app/src/sandbox/project/demoData.ts
@@ -1,5 +1,5 @@
 import { getOrderBetween } from '@epam/uui-core';
-import { Task, Resource } from './types';
+import { Task, Resource, Status } from './types';
 
 const tasks: Partial<Task>[] = [
     { id: 1, name: 'Infrastructure' }, { id: 101, name: 'Devops' }, { id: 10101, name: 'GIT Repository init' }, { id: 10102, name: 'CI - build code, publish artifacts' }, { id: 10103, name: 'Test instances - Dev, QA, UAT' }, { id: 10104, name: 'API connection & secrets management' }, { id: 10105, name: 'Production instance' }, { id: 102, name: 'Frontend' }, { id: 10201, name: 'Init CRA project' }, { id: 10202, name: 'Decide and document coding practices and processes' }, { id: 2, name: 'Shared services' }, { id: 201, name: 'Authentication' }, { id: 202, name: 'Integration with API' }, { id: 203, name: 'Routing' }, { id: 204, name: 'Localization' }, { id: 3, name: 'UUI Customization' }, { id: 301, name: 'Color palette' }, { id: 302, name: 'Core color tokens' }, { id: 303, name: 'Components tuning' }, { id: 304, name: 'Custom components modifiers' }, { id: 4, name: 'Shared Components' }, { id: 401, name: 'Accordion (foldable panel/section)' }, { id: 402, name: 'Alert' }, { id: 403, name: 'Attribute/Value section' }, { id: 404, name: 'Breadcrumbs' }, { id: 405, name: 'Dashboard Cards Elements' }, { id: 406, name: 'Forms headers/sub-headers' }, { id: 407, name: 'Icons' }, { id: 408, name: 'Masked input' }, { id: 409, name: 'Master-detail screen' }, { id: 410, name: 'Common Modal windows (e.g. confirmation)' }, { id: 411, name: 'Stepper' }, { id: 412, name: 'In-form Tables' }, { id: 413, name: 'User card' }, { id: 414, name: 'Top-level navigation' }, { id: 5, name: 'Pages Template Components' }, { id: 501, name: 'Page layout components' }, { id: 502, name: 'Master-detail' }, { id: 503, name: 'Full-screen table' }, { id: 504, name: 'Full-screen form' }, { id: 505, name: 'Dashboard' }, { id: 506, name: 'Catalog' }, { id: 6, name: 'Pages' }, { id: 601, name: 'Home' }, { id: 602, name: 'Catalog' }, { id: 603, name: 'Product Details' }, { id: 604, name: 'Favorites' }, { id: 605, name: 'Comparison' }, { id: 606, name: 'Check-out form' }, { id: 607, name: 'Admin area' }, { id: 60701, name: 'Products List' }, { id: 60702, name: 'Product Form' }, { id: 60703, name: 'Sales report' }, { id: 60704, name: 'Marketing dashboard' }, { id: 60705, name: 'Categories list editor' },
@@ -30,3 +30,10 @@ export const getDemoTasks = () => {
 export const resources: Resource[] = [
     { id: 1, name: 'FED', fullName: 'Front-end developer' }, { id: 2, name: 'BED', fullName: 'Back-end developer' }, { id: 3, name: 'QA', fullName: 'Quality assurance engineer' }, { id: 4, name: 'UXD', fullName: 'UX designer' }, { id: 5, name: 'BA', fullName: 'Business analyst' },
 ];
+
+export const statuses: Status[] = [
+    { id: 1, name: 'In Progress', color: '#009ECC' },
+    { id: 2, name: 'Blocked', color: '#FCAA00' },
+    { id: 3, name: 'At Risk', color: '#FA4B4B' },
+    { id: 4, name: 'Complete', color: '#67A300' },
+];
diff --git a/app/src/sandbox/project/types.ts b/app/src/sandbox/project/types.ts
index a00e43804c..14ecd7bed2 100644
--- a/app/src/sandbox/project/types.ts
+++ b/app/src/sandbox/project/types.ts
@@ -7,8 +7,7 @@ export interface Task {
     estimate?: number;
     resources?: number[];
     startDate?: string;
-    isDone?: boolean;
-    complete?: number;
+    status?: string;
     description?: string;
     order?: string;
 }
@@ -19,6 +18,12 @@ export interface Resource {
     fullName: string;
 }
 
+export interface Status {
+    id: number;
+    name: string;
+    color?: string;
+}
+
 export type InsertTaskCallback = (position: DropPosition, relativeTask?: Task | null, existingTask?: Task | null) => void;
 export type DeleteTaskCallback = (task: Task) => void;