Skip to content

Commit 760e579

Browse files
MohamedRizwan399MohamedRizwan399
committed
#TRAPWLS-19 Crud related code optimized and bug fixed
1 parent 385446e commit 760e579

File tree

4 files changed

+161
-115
lines changed

4 files changed

+161
-115
lines changed

‎src/App.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,22 @@ nav ul li a:not(.active):hover{
194194
cursor: pointer;
195195
}
196196

197+
/* Styling for dashboard */
198+
.title-dashboard{
199+
margin-left: 10px;
200+
margin-top: 25px;
201+
font-weight: bold;
202+
font-size: 20px;
203+
color: teal;
204+
text-decoration: underline;
205+
}
206+
207+
.issue-btn{
208+
margin-left: 10px;
209+
margin-top: 20px;
210+
display: block;
211+
}
212+
197213
/* Styling for IssueCreation page(CRUD) */
198214
.form-container{
199215
margin-left: 10px;
@@ -220,6 +236,7 @@ nav ul li a:not(.active):hover{
220236
}
221237

222238
/* Styling for Tablecreation */
239+
223240
.table-responsive {
224241
margin-top: 20px;
225242
}
@@ -244,9 +261,11 @@ nav ul li a:not(.active):hover{
244261
}
245262

246263
.delete-btn{
264+
margin-left: 20px;
247265
color: red;
248266
}
249267
.edit-btn{
268+
margin-right: 20px;
250269
color: teal;
251270
}
252271

‎src/IssueManagement/Dashboardview/Dashboard.jsx‎

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,65 @@
1-
import React from "react";
1+
import React, { useEffect, useState } from "react";
22
import { useNavigate } from "react-router-dom";
3+
import { TableView } from "../IssueCrud/TableView";
34

45

56
function Dashboard() {
67
//for navigate
78
let navigateToIssueCreationPage = useNavigate();
9+
const [getIssues, setCreatedIssues] = useState([]);
810

911
function createIssue() {
1012
navigateToIssueCreationPage('/issuecreate')
1113
}
1214

15+
useEffect(() => {
16+
let getCreatedIssues = JSON.parse(localStorage.getItem("issueData"));
17+
setCreatedIssues(getCreatedIssues);
18+
}, [])
19+
20+
//deletedata
21+
const deleteIssue=(id) => {
22+
let alert = window.confirm(`Are you sure to delete this '${id}' issue?`)
23+
console.log("From delete",id)
24+
if (alert) {
25+
const filteredIssues = getIssues.filter((element, index)=> {
26+
return element.id !== id;
27+
})
28+
setCreatedIssues(filteredIssues);
29+
localStorage.setItem('issueData', JSON.stringify(filteredIssues));
30+
}
31+
}
1332

1433
return(
1534

1635
<div className="issues-table">
17-
<table id="issueList" >
18-
<thead>
19-
<tr><th>DASHBOARD LIST</th></tr>
20-
<tr>
21-
<th scope="col">Issue Name</th> &emsp; &emsp; &emsp; &emsp; &emsp;
22-
<th scope="col">Assignee&emsp;&emsp;</th> &emsp; &emsp; &emsp; &emsp; &emsp;
23-
<th scope="col">Created On&emsp;&emsp;</th> &emsp; &emsp; &emsp; &emsp; &emsp;
24-
<th scope="col">Status&emsp;&emsp;</th> &emsp; &emsp; &emsp; &emsp; &emsp;
25-
<th scope="col">Actions</th>&emsp;&emsp; &emsp; &emsp; &emsp;
26-
</tr>
27-
</thead>
28-
<tbody id="tablebody">
29-
</tbody>
30-
</table>
31-
<button className="issue-btn" onClick={createIssue}>+ CREATE ISSUE</button>
36+
<>
37+
{getIssues?.length > 0 && <div className="title-dashboard">Created Issues List here:</div>}
38+
39+
{getIssues?.length > 0 &&
40+
<div className="table-responsive">
41+
<table>
42+
<thead>
43+
<tr>
44+
<th scope="col">ISSUE ID</th>
45+
<th scope="col">TASK NAME</th>
46+
<th scope="col">DUE ON</th>
47+
<th scope="col">PRIORITY</th>
48+
<th scope="col">ASSIGNEE</th>
49+
<th scope="col">STATUS</th>
50+
<th scope="col">DELETE</th>
51+
</tr>
52+
</thead>
53+
<tbody id="tablebody">
54+
<TableView issues={getIssues} deleteIssue={deleteIssue}/>
55+
</tbody>
56+
</table>
57+
</div>
58+
}
59+
60+
{getIssues?.length < 1 && <div className="no-issues">No Issues are Created yet</div>}
61+
<button className="issue-btn" onClick={createIssue}>+ CREATE NEW ISSUE</button>
62+
</>
3263
</div>
3364

3465
)

‎src/IssueManagement/IssueCrud/IssueCreationPage.jsx‎

Lines changed: 86 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import React,{useState,useEffect} from "react";
1+
import React,{ useState, useEffect } from "react";
22
import { TableView } from "./TableView";
3-
import uuid from 'react-uuid';
4-
5-
var insertbool=true;
63

4+
let insertbool = true;
75
//get data from storage
86
const getDatafromStorage = () => {
97
const data = localStorage.getItem('issueData');
@@ -15,126 +13,121 @@ const getDatafromStorage = () => {
1513
}
1614

1715
export const IssueCreationPage = () => {
18-
const [issues, setissues]=useState(getDatafromStorage());
16+
const [issues, setissues] = useState(getDatafromStorage());
17+
const [isDisabled, setIsDisabled] = useState(false);
1918

2019
//button
21-
const [buttonname, setButtonName]=useState("Verify and submit");
20+
const [buttonname, setButtonName] = useState("Verify and submit");
2221

2322
//for error
24-
const [errorid, seterrorID]=useState(false);
25-
const [errortask, seterrorTask]=useState(false);
26-
const [errorenddate, seterrorEndDate]=useState(false);
27-
const [errorpriority, seterrorpriority]=useState(false);
28-
const [errorassignee, seterrorAssignee]=useState(false);
29-
const [errorstatus, seterrorStatus]=useState(false);
23+
const [errorid, seterrorID] = useState(false);
24+
const [errortask, seterrorTask] = useState(false);
25+
const [errorenddate, seterrorEndDate] = useState(false);
26+
const [errorpriority, seterrorpriority] = useState(false);
27+
const [errorassignee, seterrorAssignee] = useState(false);
28+
const [errorstatus, seterrorStatus] = useState(false);
3029

3130
// input field states
32-
const [id, setID]=useState('');
33-
const [task, setTask]=useState('');
34-
const [enddate, setEndDate]=useState('');
35-
const [priority, setPriority]=useState('');
36-
const [assignee, setAssignee]=useState('');
37-
const [status, setStatus]=useState('');
31+
const [id, setID] = useState('');
32+
const [task, setTask] = useState('');
33+
const [enddate, setEndDate] = useState('');
34+
const [priority, setPriority] = useState('');
35+
const [assignee, setAssignee] = useState('');
36+
const [status, setStatus] = useState('');
37+
38+
// save data
39+
useEffect(() => {
40+
localStorage.setItem('issueData',JSON.stringify(issues));
41+
},[issues])
42+
43+
let getData;
44+
45+
// Original data has to shown in the input field when Edit
46+
const editIssue = (id) => {
47+
setIsDisabled(!isDisabled); // unique Idfield is disabled..
48+
console.log("From edit",id)
49+
setButtonName("Edit here and verify");
50+
const editable = JSON.parse(localStorage.getItem("issueData"));
51+
getData = editable.find((total)=>total?.id === id);
52+
setID(getData?.id);
53+
setTask(getData?.task);
54+
setEndDate(getData?.enddate);
55+
setPriority(getData?.priority);
56+
setAssignee(getData?.assignee);
57+
setStatus(getData?.status);
58+
insertbool = false;
59+
}
60+
61+
//deletedata
62+
const deleteIssue = (id) => {
63+
let alert = window.confirm("Are you want to delete?");
64+
console.log("From delete",id)
65+
if (alert) {
66+
const filteredIssues = issues.filter((element, index)=> {
67+
return element?.id !== id;
68+
})
69+
setissues(filteredIssues);
70+
}
71+
}
3872

3973
//submit issue
4074
const submitIssue = (e) => {
4175
e.preventDefault();
42-
if (id.length==0) {
43-
console.log("id empty")
44-
seterrorID(true)
45-
} else {
46-
seterrorID(false)
76+
if (id?.length === 0) {
77+
seterrorID(true);
78+
return;
4779
}
48-
if(task.length==0){seterrorTask(true)}else{seterrorTask(false)}
49-
if(enddate==""){seterrorEndDate(true)}else{seterrorEndDate(false)}
50-
if(priority==""){seterrorpriority(true)}else{seterrorpriority(false)}
51-
if(assignee==""){seterrorAssignee(true)}else{seterrorAssignee(false)}
52-
if(status==""){seterrorStatus(true)}else{seterrorStatus(false)}
53-
54-
if(id!=="" && task!=="" && enddate!=="" && priority!=="" && assignee!="" && status!="") {
55-
let issue={
80+
seterrorID(false);
81+
82+
if (task.length === 0) { seterrorTask(true) } else { seterrorTask(false) }
83+
if (enddate === "") { seterrorEndDate(true) } else { seterrorEndDate(false) }
84+
if (priority === "") { seterrorpriority(true) } else { seterrorpriority(false) }
85+
if (assignee === "") { seterrorAssignee(true) } else { seterrorAssignee(false) }
86+
if (status === "") { seterrorStatus(true) } else { seterrorStatus(false) }
87+
88+
if (id !== "" && task !== "" && enddate !== "" && priority !== "" && assignee !== "" && status !== "") {
89+
if (isDisabled) { // revert to normal IdField
90+
setIsDisabled(!isDisabled);
91+
setButtonName("Verify and submit");
92+
}
93+
let issue = {
5694
id,
5795
task,
5896
enddate,
5997
priority,
6098
assignee,
6199
status
62100
}
63-
if(insertbool) {
64-
setissues([...issues,issue]);
101+
102+
if (insertbool) {
103+
setissues([...issues, issue]);
104+
} else {
105+
const editable = JSON.parse(localStorage.getItem("issueData"));
106+
getData = editable.find((total) => total?.id === id);
107+
getData.id = id;
108+
getData.task = task;
109+
getData.enddate = enddate;
110+
getData.priority = priority;
111+
getData.assignee = assignee;
112+
getData.status = status;
113+
setissues(editable);
114+
}
65115
setID('');
66116
setTask('');
67117
setEndDate('');
68118
setPriority('');
69119
setAssignee('');
70120
setStatus('');
71-
console.log("YOu are from true");
72-
} else {
73-
let editable=JSON.parse(localStorage.getItem("issueData"));
74-
getData=editable.find((total)=>total.id==id);
75-
getData.id=id;
76-
getData.task=task;
77-
getData.enddate=enddate;
78-
getData.priority=priority;
79-
getData.assignee=assignee;
80-
getData.status=status;
81-
console.log("Editable data:",getData.task)
82-
setissues(editable);
83-
}
84-
} else {
85-
let editable=JSON.parse(localStorage.getItem("issueData"));
86-
getData=editable.find((total)=>total.id==id);
87-
getData.id=id;
88-
getData.task=task;
89-
getData.enddate=enddate;
90-
getData.priority=priority;
91-
getData.assignee=assignee;
92-
getData.status=status;
93-
console.log("Editable data:",getData.task)
94-
setissues(editable);
95-
}
96-
}
97-
98-
// save data
99-
useEffect(() => {
100-
localStorage.setItem('issueData',JSON.stringify(issues));
101-
},[issues])
102-
103-
// Edit data
104-
var getData;
105-
const editIssue=(id)=>{
106-
console.log("From edit",id)
107-
let editable=JSON.parse(localStorage.getItem("issueData"));
108-
getData=editable.find((total)=>total.id==id);
109-
setID(getData.id);
110-
setTask(getData.task);
111-
setEndDate(getData.enddate);
112-
setPriority(getData.priority);
113-
setAssignee(getData.assignee);
114-
setStatus(getData.status);
115-
insertbool=false;
116-
console.log("EDIT BOOL",insertbool)
117-
}
118-
119-
//deletedata
120-
const deleteIssue=(id) => {
121-
var alert=window.confirm("Are you want to delete?")
122-
console.log("From delete",id)
123-
if(alert){
124-
const filteredIssues=issues.filter((element,index)=> {
125-
return element.id !== id
126-
})
127-
setissues(filteredIssues);
128121
}
129122
}
130123

131124
return(
132125
<div>
133126
<h2 className="title-create" >Issue Creation using CRUD</h2>
134127
<div className="form-container">
135-
<form autoComplete="off" className='form-group'onSubmit={submitIssue}>
128+
<form autoComplete="off" className='form-group' onSubmit={submitIssue}>
136129

137-
Your ID&emsp;&emsp;&emsp;&emsp;<input type="number" className='form-control'
130+
Your ID&emsp;&emsp;&emsp;&emsp;<input type="number" disabled={isDisabled} className='form-control'
138131
onChange={(e)=>setID(e.target.value)} value={id} ></input>
139132
{errorid ?
140133
<label>Your Id is required*</label>:""
@@ -174,7 +167,7 @@ export const IssueCreationPage = () => {
174167

175168
Assignee:&emsp;&emsp;&emsp;
176169
<select id="selectassign" onChange={(e)=>setAssignee(e.target.value)} value={assignee}>
177-
<option>XXXXX</option>
170+
<option></option>
178171
<option>Name1</option>
179172
<option>Name2</option>
180173
<option>Name3</option>

‎src/IssueManagement/IssueCrud/TableView.jsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,22 @@ import {trash} from 'react-icons-kit/feather/trash'
44
import {edit} from 'react-icons-kit/feather/edit'
55

66

7-
export const TableView = ({issues, deleteIssue, editIssue}) => {
8-
return issues.map(issue=>(
7+
export const TableView = (props) => {
8+
const {issues, deleteIssue, editIssue} = props;
9+
return issues.map(issue => (
910
<tr key={issue.id}>
1011
<td> {issue.id} </td>
1112
<td> {issue.task} </td>
1213
<td> {issue.enddate} </td>
1314
<td> {issue.priority} </td>
1415
<td> {issue.assignee} </td>
1516
<td> {issue.status} </td>
16-
<td className='edit-btn' onClick={()=>editIssue(issue.id)}>
17-
<Icon icon={edit}/>&emsp;&emsp;
18-
<span className='delete-btn' onClick={()=>deleteIssue(issue.id)}>
19-
<Icon icon={trash}/>
17+
<td className='edit-delete-action'>
18+
{editIssue && editIssue !== null && <span className='edit-btn' onClick={() => editIssue(issue.id)}>
19+
<Icon icon={edit}/>
20+
</span>}
21+
<span className='delete-btn' onClick={() => deleteIssue(issue.id)}>
22+
<Icon icon={trash}/>
2023
</span>
2124
</td>
2225

0 commit comments

Comments
 (0)