Ken branch

.gitignore

@@ -1,2 +1,3 @@
 .idea
-
+.vscode
+node_modules/

README.md

@@ -8,7 +8,3 @@ This repo contains the source code for a drag-and-drop task board.
 ### 2. Extend the project so that tasks can be edited and saved
 ### 3. Extend the project so that columns can be dragged into a different order.
 
-## How to submit your work.
-Create a new branch for your work.
-Commit you work into this new branch
-Submit a Pull Request for you changes.

package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^11.0.3",
     "react-dom": "^17.0.2",
+    "react-modal": "^3.14.3",
     "styled-components": "^4.2.0"
   },
   "devDependencies": {
@@ -14,6 +17,7 @@
     "@types/react": "^17.0.19",
     "@types/react-beautiful-dnd": "^11.0.2",
     "@types/react-dom": "16.8.4",
+    "@types/react-modal": "^3.12.1",
     "@types/styled-components": "^4.1.15",
     "react-scripts": "3.0.1",
     "typescript": "^4.4.2"

src/components/AddNewItem.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react"
+import { AddItemButton } from "../styles"
+import { NewItemForm } from "./NewItemForm"
+import AddIcon from '@material-ui/icons/Add'
+
+interface AddNewItemProps {
+  onAdd(text: string): void;
+  toggleButtonText: string;
+
+}
+
+export const AddNewItem = (props: AddNewItemProps) => {
+  const [showForm, setShowForm] = useState(false);
+  const { onAdd, toggleButtonText} = props;
+
+  if (showForm) {
+    return (
+      <NewItemForm
+        onAdd={(text) => {
+          onAdd(text);
+          setShowForm(false);
+        } } 
+        onCancelAdd={()=>setShowForm(false)} 
+        />
+    );
+  }
+  return (
+    <AddItemButton onClick={() => setShowForm(true)}>
+      <AddIcon fontSize='small'>add_icon</AddIcon>
+      {toggleButtonText}
+    </AddItemButton>
+  );
+};

src/components/EditItemForm.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { NewItemFormContainer, NewItemButton, NewItemInput, CancelButton } from "../styles";
+import { useFocus } from "../utils/useFocus"
+
+interface EditItemForm {
+  onAdd(text: string): void;
+  onModalCancel(): void;
+  oldContent: string;
+}
+
+export const EditItemForm = ({ onAdd, onModalCancel,oldContent}: EditItemForm) => {
+  let [text, setText] = useState("");
+  let [isEditted, setIsEditted] = useState(false);
+  const inputRef = useFocus()
+  // Function for the onKeyPress event handler 
+  const handleAddText = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter"){
+        onAdd(text)
+    }
+}
+ console.log("text")
+
+  if(!isEditted)
+  {
+    text = oldContent;
+  }
+ return (
+    <NewItemFormContainer>
+      <NewItemInput
+        ref={inputRef}
+        placeholder = "Edit the description of this card..."
+        value={text}
+        onChange={(e) => {setText(e.target.value);setIsEditted(true)}}
+        onKeyPress={handleAddText}
+
+      />
+      <table>
+        <th><NewItemButton onClick={() => onAdd(text)}>Confirm Edit</NewItemButton></th>
+        <th><CancelButton onClick={() => onModalCancel()}> Cancel </CancelButton></th>
+      </table>
+    </NewItemFormContainer>
+  );
+};

src/components/NewItemForm.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { NewItemFormContainer, NewItemButton, NewItemInput, CancelButton} from "../styles";
+import { useFocus } from "../utils/useFocus"
+
+
+interface NewItemFormProps {
+  onAdd(text: string): void;
+  onCancelAdd():void; 
+}
+
+export const NewItemForm = ({ onAdd,onCancelAdd }: NewItemFormProps) => {
+  const [text, setText] = useState("");
+  const inputRef = useFocus()
+
+  // Function for the onKeyPress event handler 
+  const handleAddText = (event: React.KeyboardEvent<HTMLInputElement>) => {
+
+    if (event.key === "Enter"){
+
+      if(text.length === 0){
+        onCancelAdd()
+      }else{
+        onAdd(text)
+      }
+
+    }
+  }
+
+ return (
+    <NewItemFormContainer>
+      <NewItemInput
+        ref={inputRef}
+        placeholder = "Enter a description for this card..."
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyPress={handleAddText}
+      />
+      <table>
+        <th><NewItemButton onClick={() => onAdd(text)}>Confirm Edit</NewItemButton></th>
+        <th><CancelButton onClick={()=>onCancelAdd()}>Cancel</CancelButton></th>
+      </table>
+    </NewItemFormContainer>
+  );
+};

src/components/board-column.tsx

@@ -1,6 +1,9 @@
+//import Column from 'rc-table/lib/sugar/Column'
 import * as React from 'react'
-import { Droppable } from 'react-beautiful-dnd'
+import { Draggable, Droppable } from 'react-beautiful-dnd'
 import styled from 'styled-components'
+// Import AddNewItem component 
+import { AddNewItem } from "./AddNewItem"
 
 // Import BoardItem component
 import { BoardItem } from './board-item'
@@ -10,6 +13,9 @@ type BoardColumnProps = {
   key: string,
   column: any,
   items: any,
+  onAddNewCard:(cardText: string,columnId: string) => void,
+  orderIndex: number;
+  onShowEditModal:(itemId: string,oldContent: string)=>void,
 }
 
 // Define types for board column content style properties
@@ -18,7 +24,12 @@ type BoardColumnContentStylesProps = {
   isDraggingOver: boolean
 }
 
-// Create styles for BoardColumnWrapper element
+
+type BoardColumnWrapperStylesProps = {
+  isDragging: boolean
+}
+
+// Create styles for BoardColumnWrapper element (Column Containers)
 const BoardColumnWrapper = styled.div`
   flex: 1;
   padding: 8px;
@@ -33,10 +44,12 @@ const BoardColumnWrapper = styled.div`
 // Create styles for BoardColumnTitle element
 const BoardColumnTitle = styled.h2`
   font: 14px sans-serif;
+  font-weight: bold;
   margin-bottom: 12px;
+
 `
 
-// Create styles for BoardColumnContent element
+// Create styles for BoardColumnContent element (Card List)
 const BoardColumnContent = styled.div<BoardColumnContentStylesProps>`
   min-height: 20px;
   background-color: ${props => props.isDraggingOver ? '#aecde0' : null};
@@ -45,25 +58,37 @@ const BoardColumnContent = styled.div<BoardColumnContentStylesProps>`
 
 // Create and export the BoardColumn component
 export const BoardColumn: React.FC<BoardColumnProps> = (props) => {
-  return(
-    <BoardColumnWrapper>
-      <BoardColumnTitle>
+  // console.log("props")
+  // console.log(props)
+  return  (
+    <Draggable draggableId={props.column.id} index={props.orderIndex}>
+      {provided => (
+      <BoardColumnWrapper
+      {...provided.draggableProps}
+      ref={provided.innerRef}
+      > 
+      <BoardColumnTitle {...provided.dragHandleProps}>
         {props.column.title}
       </BoardColumnTitle>
-
-      <Droppable droppableId={props.column.id}>
+    
+      <Droppable droppableId={props.column.id} type="items">
         {(provided, snapshot) => (
-
           <BoardColumnContent
             {...provided.droppableProps}
             ref={provided.innerRef}
             isDraggingOver={snapshot.isDraggingOver}
           >
-            {props.items.map((item: any, index: number) => <BoardItem key={item.id} item={item} index={index} />)}
+            {props.items.map((item: any, index: number) => <BoardItem key={item.id} item={item} index={index} onEditModalShow={()=>props.onShowEditModal(item.id,item.content)} />)}
             {provided.placeholder}
           </BoardColumnContent>
         )}
-      </Droppable>
+      </Droppable>  
+      <AddNewItem            
+              toggleButtonText ="Add another card"
+              onAdd={(e)=>props.onAddNewCard(e,props.column.id)}
+      />
     </BoardColumnWrapper>
-  )
-}
+     )}
+    </Draggable>
+    );
+   }

src/components/board-item.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components'
 type BoardItemProps = {
   index: number
   item: any
+  onEditModalShow: any
 }
 
 // Define types for board item element style properties
@@ -14,6 +15,7 @@ type BoardItemStylesProps = {
   isDragging: boolean
 }
 
+
 // Create style for board item element
 const BoardItemEl = styled.div<BoardItemStylesProps>`
   padding: 8px;
@@ -24,24 +26,29 @@ const BoardItemEl = styled.div<BoardItemStylesProps>`
   &:hover {
     background-color: #f7fafc;
   }
-
   & + & {
     margin-top: 4px;
   }
 `
 
 // Create and export the BoardItem component
 export const BoardItem = (props: BoardItemProps) => {
+  // console.log("props")
+  // console.log(props)
+
     return <Draggable draggableId={props.item.id} index={props.index}>
       {(provided, snapshot) => (
         <BoardItemEl
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           ref={provided.innerRef}
           isDragging={snapshot.isDragging}
-        >
+          onClick={(e)=>props.onEditModalShow()}
+          >
           {props.item.content}
         </BoardItemEl>
       )}
     </Draggable>
-  }
+  }
+
+