Issue 02 - Criar Quadro Drag'n'drop

.eslintrc.json

@@ -24,6 +24,7 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/prop-types": "off",
+    "react/jsx-props-no-spreading": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
     "import/prefer-default-export": "off",
     "import/extensions": [

package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@types/react-beautiful-dnd": "^13.0.0",
     "@types/recharts": "^1.8.18",
+    "faker": "^5.1.0",
     "node-sass": "^4.14.1",
     "react": "^17.0.1",
+    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^17.0.1",
     "react-icons": "^3.11.0",
     "react-router-dom": "^5.2.0",
@@ -35,6 +38,7 @@
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.1",
     "@testing-library/user-event": "^12.2.0",
+    "@types/faker": "^5.1.5",
     "@types/jest": "^26.0.15",
     "@types/node": "^14.14.6",
     "@types/node-sass": "^4.11.1",

src/assets/scss/_variables.scss

@@ -0,0 +1,9 @@
+/* Responsive breakpoints */
+$width-mobile-s: 320px;
+$width-mobile-m: 375px;
+$width-mobile-l: 425px;
+$width-tablet: 768px;
+$width-laptop: 1024px;
+
+/* Main colors*/
+$main-text-color: #6d6d6d;

src/components/Header/Header.module.scss

@@ -1,4 +1,4 @@
-$main-text-color: #6d6d6d;
+@import '../../assets/scss/variables';
 
 @mixin defaultHover {
   &:hover {
@@ -106,7 +106,7 @@ $main-text-color: #6d6d6d;
   @include defaultHover();
 }
 
-@media(max-width: 690px) {
+@media(max-width: $width-tablet) {
   .sidebar_icon{
     display: inline;
   }

src/components/MainLayout/MainLayout.module.scss

@@ -1,9 +1,4 @@
-@mixin sideBarProperties {
-  background-color: #fefefe;
-  height: 100vh;
-  width: 100%;
-  max-width: 260px;
-}
+@import '../../assets/scss/variables';
 
 .container {
   display: flex;
@@ -13,25 +8,32 @@
 }
 
 .sidebar {
-  @include sideBarProperties();
+  background-color: #fefefe;
+  min-height: 100%;
+  width: 260px;
 }
 
 main {
   flex: 1;
 }
 
-@media (max-width: 690px) {
+@media (max-width: $width-tablet) {
   .sidebar {
     position: fixed;
+    visibility: hidden;
     top: 0;
     left: -100%;
+    opacity: 0;
     transition: 500ms;
+    z-index: 99;
   }
 
   .sidebar.active {
     position: fixed;
+    visibility: visible;
     top: 0;
     left: 0;
+    opacity: 1;
     transition: 500ms;
     z-index: 99;
   }

src/components/ProjectBoard/ProjectBoard.module.scss

@@ -0,0 +1,23 @@
+.container {
+  background-color: #e2e2e2;
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+}
+
+.boxTask {
+  margin: 10px;
+  padding: 10px;
+  .boxContainer {
+    height: 100%;
+    overflow-y: auto;
+  }
+}
+
+.border {
+  border: 1px solid #c2c2c2;
+  height: 18em;
+  align-self: center;
+}

src/components/ProjectBoard/index.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+  DraggableLocation,
+} from 'react-beautiful-dnd';
+import faker, { fake } from 'faker';
+
+import { TaskModel } from 'models/Task';
+import TaskCard from 'components/TaskCard';
+
+import styles from './ProjectBoard.module.scss';
+
+const reorder = (list: any[], startIndex: number, endIndex: number) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+const move = (
+  sourceList: any[],
+  destinationList: any[],
+  source: DraggableLocation,
+  destination: DraggableLocation,
+) => {
+  const sourceClone = Array.from(sourceList);
+  const destClone = Array.from(destinationList);
+  const [removed] = sourceClone.splice(source.index, 1);
+
+  destClone.splice(destination.index, 0, removed);
+
+  const result: any = {};
+  result[source.droppableId] = sourceClone;
+  result[destination.droppableId] = destClone;
+
+  return result;
+};
+
+const generateTask = (): TaskModel => {
+  return {
+    id: faker.random.alphaNumeric(5),
+    name: faker.lorem.words(2),
+    description: faker.lorem.paragraph(1),
+    clientId: faker.random.number(),
+    startDate: faker.date.recent(),
+    endDate: faker.date.future(),
+    projectName: `Projeto ${faker.name.firstName()}`,
+    responsible: faker.name.findName(),
+  };
+};
+
+const ProjectBoard: React.FC = () => {
+  const [tasksTodo, setTasksTodo] = useState<TaskModel[]>([
+    generateTask(),
+    generateTask(),
+  ]);
+  const [tasksDoing, setTasksDoing] = useState([
+    generateTask(),
+    generateTask(),
+  ]);
+  const [tasksDone, setTasksDone] = useState([generateTask(), generateTask()]);
+
+  const boxSetList: any = {
+    todo: { tasks: tasksTodo, setTasks: setTasksTodo },
+    doing: { tasks: tasksDoing, setTasks: setTasksDoing },
+    done: { tasks: tasksDone, setTasks: setTasksDone },
+  };
+
+  const onDragEnd = (result: DropResult) => {
+    const { source, destination } = result;
+    if (!destination) {
+      return;
+    }
+
+    if (source.droppableId === destination.droppableId) {
+      const { tasks, setTasks } = boxSetList[destination.droppableId];
+
+      const newItems = reorder(tasks, source.index, destination.index);
+
+      setTasks(newItems);
+    } else {
+      const { tasks: tasksSource, setTasks: setTasksSource } = boxSetList[
+        source.droppableId
+      ];
+      const {
+        tasks: tasksDestination,
+        setTasks: setTasksDestination,
+      } = boxSetList[destination.droppableId];
+
+      const resultObject = move(
+        tasksSource,
+        tasksDestination,
+        source,
+        destination,
+      );
+
+      setTasksSource(resultObject[source.droppableId]);
+      setTasksDestination(resultObject[destination.droppableId]);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId="todo">
+          {(provided, snapshot) => (
+            <div
+              className={styles.boxTask}
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+            >
+              <span className={styles.title}>A fazer</span>
+              <div className={styles.boxContainer}>
+                {tasksTodo.map((task, index) => (
+                  <TaskCard task={task} index={index} />
+                ))}
+              </div>
+            </div>
+          )}
+        </Droppable>
+        <hr className={styles.border} />
+        <Droppable droppableId="doing">
+          {(provided, snapshot) => (
+            <div
+              className={styles.boxTask}
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+            >
+              <span className={styles.title}>Em execução</span>
+              <div className={styles.boxContainer}>
+                {tasksDoing.map((task, index) => (
+                  <TaskCard task={task} index={index} />
+                ))}
+              </div>
+            </div>
+          )}
+        </Droppable>
+        <hr className={styles.border} />
+        <Droppable droppableId="done">
+          {(provided, snapshot) => (
+            <div
+              className={styles.boxTask}
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+            >
+              <span className={styles.title}>Feito</span>
+              <div className={styles.boxContainer}>
+                {tasksDone.map((task, index) => (
+                  <TaskCard task={task} index={index} />
+                ))}
+              </div>
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
+  );
+};
+
+export default ProjectBoard;

src/components/Sidebar/SideBar.module.scss

@@ -1,5 +1,7 @@
+@import '../../assets/scss/variables';
+
 .container {
-  height: 100vh;
+  height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -14,8 +16,9 @@
 
 .logo {
   width: 90%;
-  margin-top: 30px;
-  margin-bottom: 80px;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 30px 10px 80px 10px;
   align-self: center;
 }
 
@@ -45,7 +48,7 @@
   color: black;
 }
 
-@media (max-width: 690px) {
+@media (max-width: $width-tablet) {
   .closeSidebar {
     display: inline;
     align-self: flex-end;

src/components/TaskCard/TaskCard.module.scss

@@ -0,0 +1,49 @@
+@mixin boxWithIcon {
+  display: flex;
+  align-items: center;
+  margin: 7px 0;
+}
+
+.container {
+  background-color: #ffffff;
+  border-radius: 15px;
+  height: 140px;
+  width: 225px;
+  margin: 10px 0;
+  padding: 15px;
+  font-size: 14px;
+  font-weight: 300;
+
+  .title {
+    font-size: 16px;
+    font-weight: 500;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #dddddd;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .details {
+    padding: 3px 0;
+    border-bottom: 1px solid #dddddd;
+    .clientName {
+      @include boxWithIcon();
+    }
+    .date {
+      @include boxWithIcon();
+    }
+  }
+
+  .footer {
+    .people {
+      @include boxWithIcon();
+    }
+  }
+}
+
+.icon {
+  color: #6d6d6d;
+  font-size: 16px;
+  margin-right: 5px;
+}