Merge pull request #104 from intive/feature/P2022-1396-drag-and-drop

[P2022-1396] added drag and drop for issues
intive · Mar 29, 2022 · 38b0d91 · 38b0d91
2 parents ffa19ec + 9f6bd55
commit 38b0d91
Show file tree

Hide file tree

Showing 11 changed files with 2,198 additions and 2,056 deletions.
diff --git a/package.json b/package.json
@@ -16,12 +16,14 @@
     "@types/jest": "^24.9.1",
     "@types/node": "^12.20.41",
     "@types/react": "^16.14.21",
+    "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^16.9.14",
     "@types/react-redux": "^7.1.22",
     "i18next": "^21.6.6",
     "react": "^17.0.2",
     "react-app-rewire-alias": "^1.1.7",
     "react-app-rewired": "^2.2.1",
+    "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.15.3",
     "react-redux": "^7.2.6",

diff --git a/src/api/contsans.tsx b/src/api/contsans.tsx
@@ -15,4 +15,6 @@ export const API_ADD_NEW_STATUS =
   "https://patronageapi.herokuapp.com/api/status?code=";
 export const API_GET_STATUSES_LIST =
   "https://patronageapi.herokuapp.com/api/status";
+export const API_UPDATE_TICKET =
+  "https://patronageapi.herokuapp.com/api/issue/";
 export const API_ISSUE = "https://patronageapi.herokuapp.com/api/issue/";
diff --git a/src/api/makeFetchRequest.ts b/src/api/makeFetchRequest.ts
@@ -1,6 +1,6 @@
 import { TOKEN_KEY } from "src/contexts/authentication";
 
-type METHOD = "GET" | "POST" | "PUT" | "PATH" | "DELETE" | "PATCH";
+type METHOD = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
 
 async function makeRequest(url: string, method: METHOD, body?: any) {
   const jsonBody = body ? JSON.stringify(body) : undefined;

diff --git a/src/api/requestsApi.ts b/src/api/requestsApi.ts
@@ -11,6 +11,7 @@ const FetchDataAPI = {
     const fetchedData = await response.json();
     return fetchedData;
   },
+
   addData: async function (url: string, dataToAdd?: any) {
     const response = await makeRequest(url, "POST", dataToAdd);
     const addedData = await response.json();
@@ -60,6 +61,7 @@ const FetchDataAPI = {
       return [boardStatusFilteredByIdWithStatus, status.data];
     }
   },
+
   getIssuesByBoardStatusId: async function (id: number) {
     const data = await FetchDataAPI.getData(
       `https://patronageapi.herokuapp.com/api/issue?BoardId=${id}&PageNumber=1&PageSize=15`
@@ -70,6 +72,10 @@ const FetchDataAPI = {
     const data = await FetchDataAPI.deleteData(`${API_ISSUE}${id}`);
     return data;
   },
+
+  updateTicket: async function (url: string, additionalData: any) {
+    await makeRequest(url, "PATCH", additionalData);
+  },
 };
 
 export default FetchDataAPI;
diff --git a/src/modules/TasksCard/TasksCard.stories.tsx b/src/modules/TasksCard/TasksCard.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import TasksCard from "./index";
+import TasksCard from "./TasksCard";
 import Ticket from "@modules/Ticket/Ticket";
 
 export default {
@@ -21,55 +21,63 @@ const TicketList = [
     title={"Unassigned task"}
     key={"task1"}
     handleDeleteTicket={() => console.log("deleted")}
+    index={0}
   />,
   <Ticket
     handleDeleteTicket={() => console.log("deleted")}
     issueId='999'
     title={"Example task"}
     assignedTo={"John Doe"}
     key={"task2"}
+    index={1}
   />,
   <Ticket
     handleDeleteTicket={() => console.log("deleted")}
     issueId='999'
     title={"Very long title Very long title Very long title Very long title"}
     assignedTo={"Very long name Very long name Very long name Very long name"}
     key={"task3"}
+    index={2}
   />,
   <Ticket
     handleDeleteTicket={() => console.log("deleted")}
     issueId='999'
     title={"Task 4"}
     assignedTo={"John Doe"}
     key={"task4"}
+    index={3}
   />,
   <Ticket
     handleDeleteTicket={() => console.log("deleted")}
     issueId='999'
     title={"Task 5"}
     assignedTo={"John Doe"}
     key={"task4"}
+    index={4}
   />,
   <Ticket
     handleDeleteTicket={() => console.log("deleted")}
     issueId='999'
     title={"Task 6"}
     assignedTo={"John Doe"}
     key={"task4"}
+    index={5}
   />,
   <Ticket
     handleDeleteTicket={() => console.log("deleted")}
     issueId='999'
     title={"Task 7"}
     assignedTo={"John Doe"}
     key={"task4"}
+    index={6}
   />,
   <Ticket
     handleDeleteTicket={() => console.log("deleted")}
     issueId='999'
     title={"Task 8"}
     assignedTo={"John Doe"}
     key={"task4"}
+    index={6}
   />,
 ];
 

diff --git a/src/modules/TasksCard/styled.tsx → src/modules/TasksCard/TasksCard.style.tsx b/src/modules/TasksCard/styled.tsx → src/modules/TasksCard/TasksCard.style.tsx
@@ -3,6 +3,8 @@ import Card from "@mui/material/Card";
 import Typography from "@mui/material/Typography";
 
 export const StyledTasksCard = styled(Card)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
   minWidth: 300,
   width: "100vw",
   height: "67vh",

diff --git a/src/modules/TasksCard/TasksCard.tsx b/src/modules/TasksCard/TasksCard.tsx
@@ -0,0 +1,33 @@
+import { StyledTasksCard, Title } from "./TasksCard.style";
+import { Droppable } from "react-beautiful-dnd";
+import List from "@mui/material/List";
+
+interface IssuesCardProps {
+  title: string;
+  children?: React.ReactNode;
+  id: string;
+}
+
+const TasksCard = ({ title, children, id }: IssuesCardProps) => {
+  return (
+    <StyledTasksCard>
+      <Title variant='capitalHeader' component='h3'>
+        {title}
+      </Title>
+      <Droppable droppableId={`${id}`}>
+        {(provided) => (
+          <List
+            style={{ flex: 1 }}
+            ref={provided.innerRef}
+            {...provided.droppableProps}
+          >
+            {children}
+            {provided.placeholder}
+          </List>
+        )}
+      </Droppable>
+    </StyledTasksCard>
+  );
+};
+
+export default TasksCard;
diff --git a/src/modules/TasksCard/index.tsx b/src/modules/TasksCard/index.tsx
diff --git a/src/modules/Ticket/Ticket.tsx b/src/modules/Ticket/Ticket.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+import { Draggable } from "react-beautiful-dnd";
+
 import {
   AssignedTo,
   Assignee,
@@ -17,6 +19,7 @@ interface TicketProps {
   title: string;
   assignedTo?: string;
   issueId: string;
+  index: number;
   handleDeleteTicket: (issueId: string) => void;
 }
 
@@ -27,7 +30,6 @@ const Ticket = (props: TicketProps) => {
   const [isAssigned, setIsAssigned] = React.useState(
     props.assignedTo ? true : false
   );
-
   const defaultProps = {
     assignedTo: t("unassigned"),
   };
@@ -47,20 +49,29 @@ const Ticket = (props: TicketProps) => {
   ];
 
   return (
-    <StyledTicket onClick={handleClickTicket}>
-      <CardContentNoPadding>
-        <StyledTicketHeader>
-          <Title>{props.title}</Title>
-        </StyledTicketHeader>
-        <StyledTicketContent>
-          <StyledTicketContentText>
-            {isAssigned && <AssignedTo>{t("assignedTo")}&nbsp;</AssignedTo>}
-            <Assignee>{props.assignedTo}</Assignee>
-          </StyledTicketContentText>
-          <ThreeDotsMenu menuItems={ticketMenu} />
-        </StyledTicketContent>
-      </CardContentNoPadding>
-    </StyledTicket>
+    <Draggable draggableId={`${props.issueId}`} index={props.index}>
+      {(provided) => (
+        <StyledTicket
+          onClick={handleClickTicket}
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+        >
+          <CardContentNoPadding>
+            <StyledTicketHeader>
+              <Title>{props.title}</Title>
+            </StyledTicketHeader>
+            <StyledTicketContent>
+              <StyledTicketContentText>
+                {isAssigned && <AssignedTo>{t("assignedTo")}&nbsp;</AssignedTo>}
+                <Assignee>{props.assignedTo}</Assignee>
+              </StyledTicketContentText>
+              <ThreeDotsMenu menuItems={ticketMenu} />
+            </StyledTicketContent>
+          </CardContentNoPadding>
+        </StyledTicket>
+      )}
+    </Draggable>
   );
 };