Merge pull request #15 from knowankit/feat/add-card

Adds card to columns

src/components/board/columns/buttons/add-column-button.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { Box, Button } from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+type Props = {
+  addColumn: () => void;
+};
+
+const AddColumnButton: FC<Props> = ({ addColumn }) => {
+  return (
+    <Box
+      rounded="lg"
+      height="auto"
+      width="300px"
+      display="flex"
+      flexDirection="column"
+      mt="10px"
+      mx="10px">
+      <Button size="xs" my="10px" mx="5px" colorScheme="blue" color="white" onClick={addColumn}>
+        Add a Column
+      </Button>
+    </Box>
+  );
+};
+
+AddColumnButton.propTypes = {
+  addColumn: PropTypes.func
+};
+
+export default AddColumnButton;

src/components/board/columns/index.tsx

@@ -1,67 +1,85 @@
 import React, { useState } from 'react';
 import { Box, Button, Heading } from '@chakra-ui/react';
+import AddColumnButton from '@/src/components/board/columns/buttons/add-column-button';
 
 const BoardColumns = () => {
   const tempData = [
-    { columnName: 'To-Do' },
-    { columnName: 'In Progress' },
-    { columnName: 'PR Raised' },
-    { columnName: 'Done' }
+    { columnName: 'To-Do', cards: [] },
+    { columnName: 'In Progress', cards: [] },
+    { columnName: 'PR Raised', cards: [] },
+    { columnName: 'Done', cards: [] }
   ];
 
   const [columns, setColumns] = useState(tempData);
 
   const loadColumns = (column, index) => {
-    if (columns.length - 1 !== index) {
-      return (
-        <React.Fragment key={index}>
-          <Heading as="h6" size="sm" mt="5px" textAlign="center">
-            {column.columnName}
-          </Heading>
-          <Button size="xs" my="10px" mx="5px" bg="brand" color="white">
-            Add a card
-          </Button>
-        </React.Fragment>
-      );
-    }
-
     return (
-      <Button
-        key={index}
-        size="xs"
-        my="10px"
-        mx="5px"
-        colorScheme="blue"
-        color="white"
-        onClick={addColumn}>
-        Add a Column
-      </Button>
+      <React.Fragment key={index}>
+        <Heading as="h6" size="sm" mt="5px" textAlign="center">
+          {column.columnName}
+        </Heading>
+        {column.cards.map((card, index) => (
+          <Box key={index}>{card.title}</Box>
+        ))}
+        <Button
+          size="xs"
+          my="10px"
+          mx="5px"
+          bg="brand"
+          color="white"
+          onClick={() => addCard(index)}>
+          Add a card
+        </Button>
+      </React.Fragment>
     );
   };
 
   const addColumn = () => {
-    setColumns([...columns, { columnName: 'Test' }]);
+    setColumns([...columns, { columnName: 'Test', cards: [] }]);
 
-    console.log('test', columns);
+    // Scroll to the right when column is added
+    // const parentOfColumns = document.getElementById('parent-of-columns')
+    // parentOfColumns.scrollLeft = 300
   };
 
-  // const addCard = () => {};
+  const addCard = (index: number) => {
+    // Fetch particular column
+    const column = columns[index];
+
+    // Push the card details
+    column.cards.push({ title: 'Card title' });
+
+    // Fetch all the columns
+    const temp = columns;
+
+    // Delete the old list and add the new list
+    temp.splice(index, 1, column);
+    setColumns([...temp]);
+  };
 
   return (
-    <Box display="flex" overflowX="scroll">
-      {columns.map((column, index) => (
-        <Box
-          key={index}
-          rounded="lg"
-          width="20vw"
-          display="flex"
-          flexDirection="column"
-          mt="10px"
-          mx="10px"
-          bg={column.columnName === 'addColumn' ? '' : '#F0F0F0'}>
-          {loadColumns(column, index)}
-        </Box>
-      ))}
+    <Box
+      display="block"
+      position="relative"
+      height="calc(100vh - 122px)"
+      overflowX="auto"
+      id="parent-of-columns">
+      <Box display="flex" position="absolute">
+        {columns.map((column, index) => (
+          <Box
+            key={index}
+            rounded="lg"
+            width="300px"
+            display="flex"
+            flexDirection="column"
+            mt="10px"
+            mx="10px"
+            bg={column.columnName === 'addColumn' ? '' : '#F0F0F0'}>
+            {loadColumns(column, index)}
+          </Box>
+        ))}
+        <AddColumnButton addColumn={addColumn} />
+      </Box>
     </Box>
   );
 };