@xaypay/tui 0.0.80 → 0.0.82

package/src/components/table/table.stories.js

@@ -1,205 +1,424 @@
-import React from 'react';
-import Table from './index';
+import React, { useState, useEffect } from 'react';
+import Table from '.';
 
-import { ReactComponent as ReactSVG }  from './../../assets/table-settings-icon.svg';
+import { ReactComponent as ReactSVGPlus } from './../../assets/plus.svg';
+import { ReactComponent as ReactSVGMinus } from './../../assets/minus.svg';
+import { ReactComponent as ReactSVGDelete } from './../../assets/delete.svg';
+import { ReactComponent as ReactSVGAttach } from './../../assets/attach.svg';
+import { ReactComponent as ReactSVGArrowUp } from './../../assets/up-arrow.svg';
+import { ReactComponent as ReactSVGArrowDown } from './../../assets/down-arrow.svg';
+import { ReactComponent as ReactSVG } from './../../assets/table-settings-icon.svg';
 
 export default {
     component: Table,
     title: 'Components/Table'
 };
 
-const Template = (args) => {
-    const tableDataInfo = {
-        header: [
-            {
-                type: 'show',
-                content: 'Հ/Հ'
-            },
-            {
-                type: 'show',
-                content: 'ՀՎՀՀ'
-            },
+const headerData = [
+    {
+        type: 'show',
+        content: 'Հ/Հ',
+        checkBox: {
+            checked: false,
+            checkedColor: 'orange',
+            unCheckedColor: 'orange'
+        },
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'ՀՎՀՀ',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Վարչ․շրջան',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Վճար',
+        checkBox: {
+            checked: false,
+            checkedColor: 'orange',
+            unCheckedColor: 'orange'
+        },
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Ամսաթիվ',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Մուտքի ամս․',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Հավելյալ ինֆորմացիա',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Ստեղծված',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Գործողություն',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: <ReactSVG />,
+        sortingArrows: false,
+    }
+];
+
+const bodyData = [
+    {
+        hh: {
+            id: 19854,
+            content: 19854,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        hvhh: {
+            content: 10195524
+        },
+        shrjan: {
+            content: 'Շենգավիթ'
+        },
+        pay: {
+            id: 19854,
+            content: 7000,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        startDate: {
+            content: '27.05.2022'
+        },
+        enterDate: {
+            content: '27.05.2022'
+        },
+        info: {
+            openArrow: <ReactSVGArrowUp />,
+            closeArrow: <ReactSVGArrowDown />,
+            content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
+            contentList: [
+                'Ակտիվ է => Այո',
+                'Lorem just => ipsum',
+                'Dolor sit => amet',
+                'text for => test',
+            ]
+        },
+        create: {
+            content: '27.05.2022'
+        },
+        actions: [
             {
-                type: 'show',
-                content: 'Վարչ․շրջան'
+                id: 19854,
+                type: 'attach',
+                content: <ReactSVGAttach />
             },
             {
-                type: 'show',
-                content: 'Վճար'
-            },
+                id: 19854,
+                type: 'plus',
+                content: <ReactSVGPlus />
+            }
+        ]
+    },
+    {
+        hh: {
+            id: 19954,
+            content: 19954,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        hvhh: {
+            content: 14595524
+        },
+        shrjan: {
+            content: 'Կենտրոն'
+        },
+        pay: {
+            id: 19954,
+            content: 7840,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        startDate: {
+            content: '27.05.2022'
+        },
+        enterDate: {
+            content: '27.05.2022'
+        },
+        info: {
+            openArrow: <ReactSVGArrowUp />,
+            closeArrow: <ReactSVGArrowDown />,
+            content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
+            contentList: [
+                'Ակտիվ է => Այո',
+                'Lorem just => ipsum',
+                'Dolor sit => amet',
+                'text for => test',
+            ]
+        },
+        create: {
+            content: '27.05.2022'
+        },
+        actions: [
             {
-                type: 'show',
-                content: 'Ամսաթիվ'
+                id: 19954,
+                type: 'minus',
+                content: <ReactSVGMinus />
             },
             {
-                type: 'show',
-                content: 'Մուտքի ամս․'
-            },
+                id: 19954,
+                type: 'delete',
+                content: <ReactSVGDelete />
+            }
+        ]
+    },
+    {
+        hh: {
+            id: 20037,
+            content: 20037,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        hvhh: {
+            content: 14595524
+        },
+        shrjan: {
+            content: 'Շենգավիթ'
+        },
+        pay: {
+            id: 20037,
+            content: 6541,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        startDate: {
+            content: '27.05.2022'
+        },
+        enterDate: {
+            content: '27.05.2022'
+        },
+        info: {
+            openArrow: <ReactSVGArrowUp />,
+            closeArrow: <ReactSVGArrowDown />,
+            content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
+            contentList: [
+                'Ակտիվ է => Այո',
+                'Lorem just => ipsum',
+                'Dolor sit => amet',
+                'text for => test',
+            ]
+        },
+        create: {
+            content: '27.05.2022'
+        },
+        actions: [
             {
-                type: 'show',
-                content: 'Հավելյալ ինֆորմացիա'
+                id: 20037,
+                type: 'attach',
+                content: <ReactSVGAttach />
             },
             {
-                type: 'show',
-                content: 'Ստեղծված'
-            },
+                id: 20037,
+                type: 'plus',
+                content: <ReactSVGPlus />
+            }
+        ]
+    },
+    {
+        hh: {
+            id: 21031,
+            content: 21031,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        hvhh: {
+            content: 14595524
+        },
+        shrjan: {
+            content: 'Կենտրոն'
+        },
+        pay: {
+            id: 21031,
+            content: 9845,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        startDate: {
+            content: '27.05.2022'
+        },
+        enterDate: {
+            content: '27.05.2022'
+        },
+        info: {
+            openArrow: <ReactSVGArrowUp />,
+            closeArrow: <ReactSVGArrowDown />,
+            content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
+            contentList: [
+                'Ակտիվ է => Այո',
+                'Lorem just => ipsum',
+                'Dolor sit => amet',
+                'text for => test',
+            ]
+        },
+        create: {
+            content: '27.05.2022'
+        },
+        actions: [
             {
-                type: 'show',
-                content: 'Գործողություն'
+                id: 21031,
+                type: 'minus',
+                content: <ReactSVGMinus />
             },
             {
-                type: 'show',
-                content: <ReactSVG />
+                id: 21031,
+                type: 'delete',
+                content: <ReactSVGDelete />
             }
-        ],
-        body: [
-    
         ]
-    };
+    }
+];
 
-    const tableBodyItems = [
-        { id: 1, hh: 19854, hvhh: 10195524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: ['item', 'just'] },
-        { id: 3, hh: 22641, hvhh: 12095524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: 'text' },
-        { id: 4, hh: 25005, hvhh: 15495524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
-        { id: 7, hh: 31576, hvhh: 16895524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
-        { id: 45, hh: 32586, hvhh: 17495524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
-        { id: 78, hh: 32754, hvhh: 20095524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
-        { id: 99, hh: 41411, hvhh: 20595524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
-        { id: 541, hh: 44547, hvhh: 26595524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
-    ];
-
-    return <Table tableHeadItems={tableDataInfo.header} tableBodyItems={tableBodyItems} {...args} />;
-};
-
-export const Default = Template.bind({});
-Default.args = {};
+const Template = (args) => {
+    const [tableDataHeader, setTableDataHeader] = useState(headerData);
+    const [tableDataBody, setTableDataBody] = useState(bodyData);
 
+    const [checkedFirstCount, setCheckedFirstCount] = useState(0);
+    const [checkedSecondCount, setCheckedSecondCount] = useState(0);
 
+    const handleHeaderItemClick = (e) => {
+        e.stopPropagation();
+        console.log(e.target.innerText);
+    };
+    
+    const handleBodyActionClick = (e) => {
+        console.log(e.target.id, 'e.target.id - - - - id');
+        console.log(e.target.getAttribute('type'), 'e.target.type - - - - type');
+    };
 
+    const handleCheckedHeader = (e, content) => {
+        e.stopPropagation();
+        let checkableItemIndex;
+        let checkableItemBool;
+        const updatedHeader = tableDataHeader.slice();
+        const updatedBody = tableDataBody.slice().map(item => Object.values(item));
+        const newData = updatedHeader.map((item, index) => {
+            if (item.content === content) {
+                checkableItemIndex = index;
+                checkableItemBool = !item.checkBox.checked;
+                item.checkBox.checked = !item.checkBox.checked;
+            }
+            return item;
+        });
+        
+        const newUpdatedBody = updatedBody.map(item => {
+            return item.map((innerItem, innerIndex) => {
+                if (checkableItemIndex === innerIndex) {
+                    innerItem.checkBox.checked = checkableItemBool;
+                }
+                return innerItem;
+            });
+        });
+        setTableDataHeader(newData);
+        setTableDataBody(newUpdatedBody);
+    };
 
+    const handleCheckedBody = (e, content, id) => {
+        e.stopPropagation();
 
+        const updatedBody = tableDataBody.slice().map(item => Object.values(item));
+        const newData = updatedBody.map(item => {
+            return item.map((innerItem, innerIndex) => {
+                if (innerItem.id === id && innerItem.content === content) {
+                    if (innerIndex === 0) {
+                        if (innerItem.checkBox.checked === false) {
+                            setCheckedFirstCount(prev => prev + 1);
+                        } else {
+                            setCheckedFirstCount(prev => prev - 1);
+                        }
+                    } else if (innerIndex === 3) {
+                        if (innerItem.checkBox.checked === false) {
+                            setCheckedSecondCount(prev => prev + 1);
+                        } else {
+                            setCheckedSecondCount(prev => prev - 1);
+                        }
+                    }
+                    innerItem.checkBox.checked = !innerItem.checkBox.checked;
+                }
+                return innerItem;
+            });
+        });
+        setTableDataBody(newData);
+    };
 
+    const handleHeaderCheckedUpdate = () => {
+        const updatedHeader = tableDataHeader.slice();
 
+        const newData = updatedHeader.map((item, index) => {
+            if (checkedFirstCount === tableDataBody.length && index === 0) {
+                item.checkBox.checked = true;
+            } else if (checkedFirstCount !== tableDataBody.length && index === 0) {
+                item.checkBox.checked = false;
+            }
 
+            if (checkedSecondCount === tableDataBody.length && index === 3) {
+                item.checkBox.checked = true;
+            } else if (checkedSecondCount !== tableDataBody.length && index === 3) {
+                item.checkBox.checked = false;
+            }
+            return item;
+        });
+        setTableDataHeader(newData);
+    };
 
+    useEffect(() => {
+        handleHeaderCheckedUpdate();
+    }, [checkedFirstCount, checkedSecondCount]);
+    
 
-// {
-//     header: [
-//         "Hello" | <component></component>,
-//         "Title 2",
-//         {
-//             type: 'hide',
-//             icon: svg
-//         }
-//     ]
-
-//     body: [
-//         {
-//             color: 'red',
-//             colorStatus: 'left' | "row" | "right",
-//             data: [
-//                 "jkashdkjha",
-//                 "jkashdkjha 1",
-//                 "jkashdkjha 2",
-//                 {
-//                     type: "image",
-//                     svg: <SVG></SVG>,
-//                     click: onclick()
-//                 },
-//                 {
-//                     type: "action",
-//                     data: [
-//                         {
-//                             icon: svg,
-//                             title?: 'sadas',
-//                             click: onclick()
-//                         },
-//                         {
-//                             icon: svg,
-//                             group: [
-//                                 {
-//                                     icon: svg,
-//                                     title?: 'sadas',
-//                                     click: onclick()
-//                                 },
-//                                 {
-//                                     icon: svg,
-//                                     title?: 'sadas',
-//                                     click: onclick()
-//                                 }
-//                             ]
-//                         }
-//                     ]
-//                 },
-//                 {
-//                     type: "action",
-//                     data: [
-//                         [
-//                             {
-//                                 icon: svg,
-//                                 title?: 'sadas',
-//                                 click: onclick()
-//                             },
-//                             {
-//                                 icon: svg,
-//                                 group: [
-//                                     {
-//                                         icon: svg,
-//                                         title?: 'sadas',
-//                                         click: onclick()
-//                                     },
-//                                     {
-//                                         icon: svg,
-//                                         title?: 'sadas',
-//                                         click: onclick()
-//                                     }
-//                                 ]
-//                             }
-//                         ],
-//                         [
-//                             {
-//                                 icon: svg,
-//                                 title?: 'sadas',
-//                                 click: onclick()
-//                             },
-//                             {
-//                                 icon: svg,
-//                                 group: [
-//                                     {
-//                                         icon: svg,
-//                                         title?: 'sadas',
-//                                         click: onclick()
-//                                     },
-//                                     {
-//                                         icon: svg,
-//                                         title?: 'sadas',
-//                                         click: onclick()
-//                                     }
-//                                 ]
-//                             }
-//                         ]
-//                     ]
-//                 },
-//                 {
-//                     type: "accordion",
-//                     title: 'asdasdsa',
-//                     openKeys: [
-//                         't1',
-//                         't2',
-//                         't3'
-//                     ]
-//                 },
-//                 {
-//                     type: "text",
-//                     accourdionData: [
-//                         'asdasd',
-//                         <Component></Component>,
-//                         'asdasd',
-//                         'asdasd'
-//                     ]
-//                 }
-//             ]
-//         }
-//     ]
-// }
+    return <Table
+        {...args}
+        dataBody={tableDataBody}
+        dataHeader={tableDataHeader}
+        handleCheckedBody={handleCheckedBody}
+        handleCheckedHeader={handleCheckedHeader}
+        handleBodyActionClick={handleBodyActionClick}
+        handleHeaderItemClick={handleHeaderItemClick}
+    />;
+};
 
+export const Default = Template.bind({});
+Default.args = {};