From 48788e643dab3385659b248c670312db70da29cf Mon Sep 17 00:00:00 2001 From: James McKenzie Date: Wed, 28 Apr 2021 14:26:23 +1200 Subject: [PATCH] Managed to get dynamic column creation --- ReactLearning/kanban-board/src/App.css | 34 ++++- ReactLearning/kanban-board/src/App.tsx | 31 ++--- .../kanban-board/src/components/Header.tsx | 151 ++++++++++++++++----- .../kanban-board/src/components/KBColumn.tsx | 37 ++--- .../kanban-board/src/types/ColumnPassback.ts | 6 + 5 files changed, 189 insertions(+), 70 deletions(-) create mode 100644 ReactLearning/kanban-board/src/types/ColumnPassback.ts diff --git a/ReactLearning/kanban-board/src/App.css b/ReactLearning/kanban-board/src/App.css index 36938ff..59e6c11 100644 --- a/ReactLearning/kanban-board/src/App.css +++ b/ReactLearning/kanban-board/src/App.css @@ -22,16 +22,48 @@ html { /* For some reason, the CSS i need to use to get this to work isn't coming to me >:( */ .KBColumn { + display: flex; text-align: center; - display: block; + flex-direction: column; + justify-content:flex-start; float: left; width: initial; + height: auto; flex-grow: inherit; border-color: #ddd; border-width: 2px; + min-width: 200px; + min-height: 800px; border-style: solid; color: "orange"; + margin: 5px; + padding: 5px; } + +.taskWrapper{ + display: flex; + +} +.prioBlock{ + order: 1; + flex: 1; + display: block; + height:100vh; + overflow: auto; + background-color: aqua; + width: inherit; +} +.taskText{ + order: 5; + width: 80%; + height: 100%; +} + .panel { width: 100%; } +.prioBlock:after +{ + content: '.'; + visibility: hidden; +} \ No newline at end of file diff --git a/ReactLearning/kanban-board/src/App.tsx b/ReactLearning/kanban-board/src/App.tsx index 9faeb61..6e5fd7e 100644 --- a/ReactLearning/kanban-board/src/App.tsx +++ b/ReactLearning/kanban-board/src/App.tsx @@ -4,6 +4,7 @@ import "./App.css"; import Header from "./components/Header"; import Column from "./types/Column"; import TaskPassback from "./types/TaskPassback"; +import ColumnPassback from "./types/ColumnPassback" type State = { columns: Column[]; @@ -19,21 +20,8 @@ class App extends React.Component<{}, State> { this.addTask = this.addTask.bind(this); this.state = { taskIterator: 1, - columnIterator: 3, - columns: [ - { - id: 1, - name: "Harry", - color: "green", - tasks: [], - }, - { - id: 2, - name: "Potter", - color: "red", - tasks: [], - }, - ], + columnIterator: 1, + columns: [], }; } @@ -44,16 +32,21 @@ class App extends React.Component<{}, State> { console.log(this.state.columns); } - addColumn() { + addColumn(columnInstance?: ColumnPassback) { let columnId = this.state.columnIterator; this.setState({ columnIterator: columnId + 1 }); + if (columnInstance !== undefined){ this.state.columns.push({ id: columnId, - name: "tempName" + columnId, - color: "#404552", + name: columnInstance?.title, + color: columnInstance?.color, tasks: [], - }); + } + + + ); + } } addTask(taskInstance?: TaskPassback) { diff --git a/ReactLearning/kanban-board/src/components/Header.tsx b/ReactLearning/kanban-board/src/components/Header.tsx index e99078e..1698530 100644 --- a/ReactLearning/kanban-board/src/components/Header.tsx +++ b/ReactLearning/kanban-board/src/components/Header.tsx @@ -3,69 +3,98 @@ import Modal from "./Modal"; import Column from "../types/Column"; import TaskPassback from "../types/TaskPassback"; import Priority from "../types/Priority"; +import ColumnPassback from "../types/ColumnPassback" type HeaderProps = { - addColumn: () => void; + addColumn: (columnInstance?: ColumnPassback) => void; addTask: (taskInstance?: TaskPassback) => void; columns: Column[]; }; type State = { - show: boolean; - titleVar: string; - descVar: string; - prioVar: Priority; - columnNumber: number; + showTask: boolean; + taskTitle: string; + taskDesc: string; + taskPrio: Priority; + taskColumnNumber: number; + showColumn: boolean; + columnTitle: string; + columnColor: string; }; class Header extends React.Component { constructor(props: HeaderProps) { super(props); - this.showModal = this.showModal.bind(this); + this.showTaskModal = this.showTaskModal.bind(this); this.hideModal = this.hideModal.bind(this); this.handleInputChange = this.handleInputChange.bind(this); this.handleSelectChange = this.handleSelectChange.bind(this); + this.showColumnModal = this.showColumnModal.bind(true); + this.hideColumnModal = this.hideColumnModal.bind(this); this.state = { - show: false, - titleVar: "", - descVar: "", - prioVar: "normal", - columnNumber: props.columns[0].id, + showTask: false, + showColumn: false, + taskTitle: "", + taskDesc: "", + taskPrio: "normal", + taskColumnNumber: -1, + columnTitle: "", + columnColor: "#00CC00", + }; } - showModal = () => { - let {show, columnNumber} = {...this.state} - show = true; - columnNumber = this.props.columns[0].id - this.setState({ show, columnNumber}); + showTaskModal = () => { + if (this.props.columns.length > 0){ + let {showTask, taskColumnNumber} = {...this.state} + showTask = true; + taskColumnNumber = this.props.columns[0].id + this.setState({ showTask, taskColumnNumber}); + } + else{ + alert("Add a column please!") + } }; + showColumnModal = () => { + let {showColumn} = {...this.state} + showColumn = true; + this.setState({showColumn}) + } hideModal = () => { - this.setState({ show: false }); + this.setState({ showTask: false }); }; + hideColumnModal = () => { + this.setState({showColumn: false}) + } handleInputChange(event: React.ChangeEvent) { const target = event.target.id; if (target === "titleInput") { - this.setState({ titleVar: event.target.value }); + this.setState({ taskTitle: event.target.value }); } if (target === "descInput") { - this.setState({ descVar: event.target.value }); + this.setState({ taskDesc: event.target.value }); + } + if (target === "columnTitle"){ + this.setState({columnTitle: event.target.value}) + } + if (target === "columnColor"){ + this.setState({columnColor: event.target.value}) } } handleSelectChange(event: React.ChangeEvent) { if (event.target.id === "prioritySelect") { const selectedValue = event.target.value as Priority; - this.setState({ prioVar: selectedValue }); + this.setState({ taskPrio: selectedValue }); } if (event.target.id === "columnSelect") { const selectedValue = parseInt(event.target.value); - this.setState({ columnNumber: selectedValue }); + this.setState({ taskColumnNumber: selectedValue }); } } @@ -83,11 +112,11 @@ class Header extends React.Component { > Kango Bango - +

Add Task

{this.props.columns[0] && this.props.columns[0].id}

@@ -113,7 +142,7 @@ class Header extends React.Component { @@ -123,7 +152,7 @@ class Header extends React.Component { {" "} Priority: + +
+ + +
+ + + + + + + + + + ); } diff --git a/ReactLearning/kanban-board/src/components/KBColumn.tsx b/ReactLearning/kanban-board/src/components/KBColumn.tsx index 677be90..e37f58f 100644 --- a/ReactLearning/kanban-board/src/components/KBColumn.tsx +++ b/ReactLearning/kanban-board/src/components/KBColumn.tsx @@ -16,28 +16,33 @@ const defaultProps: KBColumnProps = { let bgc = "#666"; const KBColumn = (props: KBColumnProps) => { const { color, title, tasks, onDelete, id } = { ...defaultProps, ...props }; - return ( -
-

{title}

- - {tasks.map((task) => (/*{ - if (task.priority === 'urgent'){ - bgc = "red" - }else if(task.priority ==="important"){ - bgc = "yellow" - }else if (task.priority === "normal"){ - bgc = "blue" - } + + let colTasks = tasks.map((task) => { + if (task.priority === "urgent") { + bgc = "red"; + } else if (task.priority === "important") { + bgc = "yellow"; + } else if (task.priority === "normal") { + bgc = "blue"; } - */ -
+ + return ( +
+
+

{task.title}

{task.description}

- ))} - +
+ ); + }); + + return ( +
+

{title}

+ {colTasks}