Skip to content

Commit

Permalink
Merge pull request #105 from kasundie30/main
Browse files Browse the repository at this point in the history
Updated Deliverable, workplane pages
kasundie30 authored Sep 17, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 340f5eb + d9e3842 commit 7a126fe
Showing 4 changed files with 225 additions and 228 deletions.
357 changes: 191 additions & 166 deletions front-end/src/Pages/Deliverables.jsx
Original file line number Diff line number Diff line change
@@ -14,6 +14,7 @@ import axios from "axios"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPen, faEye, faTrash } from '@fortawesome/free-solid-svg-icons';
import { loggedInUser } from '../components/Header';
import { Dialog, DialogContent } from "@mui/material";

/*Deliverables Page */
function Deliverables() {
@@ -38,7 +39,7 @@ function Deliverables() {
/******************** Add a new data entry and edit the exsisting entry ********************************* */

// Show the interface: Either for 'Add New' or 'Edit'
const [showInterface, setShowInterface] = useState(false);
const [showDiologBox, setshowDiologBox] = useState(false);
const [editRow, setEditRow] = useState(false);
const [addRow, setAddRow] = useState(false);

@@ -66,7 +67,7 @@ const onInputChange=(e)=>{

//When 'Add New' button is clicked : Only For Add New
const onAddNewClicked=()=>{
setShowInterface(true);
setshowDiologBox(true);
setAddRow(true);
setEditRow(false);
setViewRow(false);
@@ -91,7 +92,7 @@ const onInputChange=(e)=>{
// Reload the data after successful submission
loadData();
// Clear the form fields after successful submission if needed
setShowInterface(false);
setshowDiologBox(false);
setAddRow(false);
alert("Deliverable added successfully!");
} catch (error) {
@@ -103,7 +104,7 @@ const onInputChange=(e)=>{
//When 'Edit' icon button is clicked : Only For Edit
const onEditClick = (deliverable) => {
setDeliverable(deliverable);
setShowInterface(true);
setshowDiologBox(true);
setAddRow(false);
setEditRow(true);
setViewRow(false);
@@ -117,7 +118,7 @@ const onInputChange=(e)=>{
// Optionally, reload the data after successful submission
loadData();
setEditRow(false);
setShowInterface(false);
setshowDiologBox(false);
alert("Deliverable updated successfully!");
} catch (error) {
console.error("Error editing deliverable:", error);
@@ -127,7 +128,7 @@ const onInputChange=(e)=>{

// When 'Discard' button is clicked: for Edit, and Add New
const discardButtonClicked = () => {
setShowInterface(false);
setshowDiologBox(false);
setAddRow(false);
setEditRow(false);
}
@@ -142,6 +143,7 @@ const onDeleteClick = async (deliverableRelatedNo) => {
try {
await axios.delete(`http://localhost:8080/deliverable/delete/${deliverableRelatedNo}`);
loadData();
alert("Deliverable Deleted!");
} catch (error) {
console.error("Error deleting deliverable:", error);
}
@@ -154,9 +156,20 @@ const [viewRow, setViewRow] = useState(false);
const onViewClick = (deliverable) => {
setSelectedDeliverable(deliverable);
setViewRow(true);
setShowInterface(false);
setEditRow(false);
setAddRow(false);
setshowDiologBox(true);
}

// When 'Close' button is clicked: for view
const closeButtonClicked = () => {
setshowDiologBox(false);
setSelectedDeliverable(null);
setAddRow(false);
setEditRow(false);
setViewRow(false);
}

return(
<>
<div className={style["deliverableTitle"]}>
@@ -226,166 +239,178 @@ const onViewClick = (deliverable) => {
{!addRow && loggedInUser.isLoggedIn && <div>
<button className={style["addNewButton"]} onClick={onAddNewClicked}>Add New</button>
</div>}
{/* Interface- Add New/Edit */}
<div className= {showInterface? style['Interface-Open']:style['Interface-Close']}>
<div className = "dataForm">
<form onSubmit={editRow ? (e)=>onUpdateSubmit(e) : (e)=>onAddSubmit(e)}>
<div className = {style["formTitle"]}>
<h3>{editRow ? "Edit Entry" : "Add a New Entry"}</h3>
</div>
<div className = {style["inputbox"]}>
<label>Work Package No</label>
<input
type = "text"
className = {style["field"]}
placeholder = "Enter Work Package No"
name = "workPackageNo"
value={workPackageNo}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Deliverable Related No</label>
<input
type = "text"
className = {style["field"]}
placeholder = "Enter Deliverable Related No"
name = "deliverableRelatedNo"
value={deliverableRelatedNo}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Deliverable No</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Deliverable No"
name = "deliverableNo"
value={deliverableNo}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Deliverable Name</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Deliverable Name"
name = "deliverableName"
value={deliverableName}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Description</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Description"
name = "description"
value={description}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Lead Beneficiary</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Lead Beneficiary"
name = "leadBeneficiary" value={leadBeneficiary}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Type</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Type"
name = "type"
value={type}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Dissemination Level</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Dissemination Level"
name = "disseminationLevel"
value={disseminationLevel}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Due Date</label>
<input
type = "date"
className = {style["field"]}
name = "dueDate"
value={dueDate}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["buttonsBlock"]}>
{addRow? <button type = "submit">Add</button> : <button type = "submit">Update</button> }
<button type="button" onClick={discardButtonClicked}>Discard</button>
</div>
</form>
</div>
</div>
{/* Interface- View*/}
{selectedDeliverable && (
<div className={viewRow ? style['Interface-Open'] : style['Interface-Close']}>
<table className={style["viewDetails"]}>
<tbody>
<tr>
<th>Work Package No</th>
<td>{selectedDeliverable.workPackageNo}</td>
</tr>
<tr>
<th>Deliverable Related No</th>
<td>{selectedDeliverable.deliverableRelatedNo}</td>
</tr>
<tr>
<th>Deliverable No</th>
<td>{selectedDeliverable.deliverableNo}</td>
</tr>
<tr>
<th>Deliverable Name</th>
<td>{selectedDeliverable.deliverableName}</td>
</tr>
<tr>
<th>Description</th>
<td>{selectedDeliverable.description}</td>
</tr>
<tr>
<th>Lead Beneficiary</th>
<td>{selectedDeliverable.leadBeneficiary}</td>
</tr>
<tr>
<th>Type</th>
<td>{selectedDeliverable.type}</td>
</tr>
<tr>
<th>Dissemination Level</th>
<td>{selectedDeliverable.disseminationLevel}</td>
</tr>
<tr>
<th>Due Date</th>
<td>{selectedDeliverable.dueDate}</td>
</tr>
</tbody>
</table>
<button onClick={() => setSelectedDeliverable(null)}>Close</button>
</div>
)}


</div>
{ (addRow || editRow) && <Dialog
open={showDiologBox}
onClose={discardButtonClicked}
fullWidth
maxWidth="md"
>
{/* Dialog- Add New/Edit/View */}
<DialogContent>
<div className = {style["dataForm"]}>
<form onSubmit={editRow ? (e)=>onUpdateSubmit(e) : (e)=>onAddSubmit(e)}>
<div className = {style["formTitle"]}>
<h3>{editRow ? "Edit Deliverable" : "Add a New Deliverable"}</h3>
</div>
<div className = {style["inputbox"]}>
<label>Work Package No</label>
<input
type = "text"
className = {style["field"]}
placeholder = "Enter Work Package No"
name = "workPackageNo"
value={workPackageNo}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Deliverable Related No</label>
<input
type = "text"
className = {style["field"]}
placeholder = "Enter Deliverable Related No"
name = "deliverableRelatedNo"
value={deliverableRelatedNo}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Deliverable No</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Deliverable No"
name = "deliverableNo"
value={deliverableNo}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Deliverable Name</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Deliverable Name"
name = "deliverableName"
value={deliverableName}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Description</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Description"
name = "description"
value={description}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Lead Beneficiary</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Lead Beneficiary"
name = "leadBeneficiary" value={leadBeneficiary}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Type</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Type"
name = "type"
value={type}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Dissemination Level</label>
<input
type = "text"
className = {style["field"]}
placeholder = " Enter Dissemination Level"
name = "disseminationLevel"
value={disseminationLevel}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["inputbox"]}>
<label>Due Date</label>
<input
type = "date"
className = {style["field"]}
name = "dueDate"
value={dueDate}
onChange={(e)=>onInputChange(e)}
required/>
</div>
<div className = {style["buttonsBlock"]}>
{addRow? <button type = "submit">Add</button> : <button type = "submit">Update</button> }
<button type="button" onClick={discardButtonClicked}>Discard</button>
</div>
</form>
</div>
</DialogContent>
</Dialog>}
{/* Dialog- View*/}
{viewRow && <Dialog
open={showDiologBox}
onClose={closeButtonClicked}
fullWidth
maxWidth="md"
>
<DialogContent>
<div>
<table className={style["viewDetails"]}>
<tbody>
<tr>
<th>Work Package No</th>
<td>{selectedDeliverable.workPackageNo}</td>
</tr>
<tr>
<th>Deliverable Related No</th>
<td>{selectedDeliverable.deliverableRelatedNo}</td>
</tr>
<tr>
<th>Deliverable No</th>
<td>{selectedDeliverable.deliverableNo}</td>
</tr>
<tr>
<th>Deliverable Name</th>
<td>{selectedDeliverable.deliverableName}</td>
</tr>
<tr>
<th>Description</th>
<td>{selectedDeliverable.description}</td>
</tr>
<tr>
<th>Lead Beneficiary</th>
<td>{selectedDeliverable.leadBeneficiary}</td>
</tr>
<tr>
<th>Type</th>
<td>{selectedDeliverable.type}</td>
</tr>
<tr>
<th>Dissemination Level</th>
<td>{selectedDeliverable.disseminationLevel}</td>
</tr>
<tr>
<th>Due Date</th>
<td>{selectedDeliverable.dueDate}</td>
</tr>
</tbody>
</table>
<div className = {style["buttonsBlock"]}><button onClick={closeButtonClicked}>Close</button></div>
</div>
</DialogContent>
</Dialog>}
</>
);
}
39 changes: 22 additions & 17 deletions front-end/src/Pages/Workplan.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
//TODO: CSS for checkbox and table
//Media queries
//Pop as a window kinda thing , not an interface
//Pop as a window kinda thing , not an dialog
//Use a seperate id as PK in back end
//Validate form inputs
//Scroll into view
@@ -14,7 +14,7 @@ import axios from 'axios';
import { loggedInUser } from '../components/Header';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPen, faEye, faTrash } from '@fortawesome/free-solid-svg-icons';

import { Dialog, DialogContent } from "@mui/material";

function Workplan() {

@@ -37,8 +37,8 @@ function Workplan() {

/******************** Add a new data entry and edit the exsisting entry ********************************* */

// Show the interface: Either for 'Add New' or 'Edit'
const [showInterface, setShowInterface] = useState(false);
// Show the dialog: Either for 'Add New' or 'Edit'
const [showDiologBox, setshowDiologBox] = useState(false);
const [editRow, setEditRow] = useState(false);
const [addRow, setAddRow] = useState(false);

@@ -84,7 +84,7 @@ function Workplan() {

//When 'Add New' button is clicked : Only For Add New
const onAddNewClicked=()=>{
setShowInterface(true);
setshowDiologBox(true);
setAddRow(true);
setEditRow(false);
setActivity({
@@ -109,15 +109,15 @@ function Workplan() {
});
}

//When 'Add' button is clicked in the interface : Only For Add New
//When 'Add' button is clicked in the dialog : Only For Add New
const onAddSubmit = async (e) => {
e.preventDefault(); // Prevent default form submission
try {
await axios.post("http://localhost:8080/workplan/add", activity);
// Reload the data after successful submission
loadData();
// Clear the form fields after successful submission if needed
setShowInterface(false);
setshowDiologBox(false);
setAddRow(false);
alert("Activity added successfully!");
} catch (error) {
@@ -130,21 +130,21 @@ function Workplan() {
const onEditClick = (activity) => {
setOriginalActivityNo(activity.activityNo); // Preserve the original primary key
setActivity(activity); //Set the activity for editing
setShowInterface(true);
setshowDiologBox(true);
setAddRow(false);
setEditRow(true);
setViewRow(false);
}

//When 'Update' button is clicked in the interface : Only Edit
//When 'Update' button is clicked in the dialog : Only Edit
const onUpdateSubmit = async (e) => {
e.preventDefault(); // Prevent default form submission
try {
await axios.put(`http://localhost:8080/workplan/update/${originalActivityNo}`, activity);
// Optionally, reload the data after successful submission
loadData();
setEditRow(false);
setShowInterface(false);
setshowDiologBox(true);
alert("Activity updated successfully!");
} catch (error) {
console.error("Error editing workplan activity:", error);
@@ -154,7 +154,7 @@ function Workplan() {

// When 'Discard' button is clicked: for Edit, and Add New
const discardButtonClicked = () => {
setShowInterface(false);
setshowDiologBox(false);
setAddRow(false);
setEditRow(false);
}
@@ -251,9 +251,15 @@ function Workplan() {
{!addRow && loggedInUser.isLoggedIn && <div>
<button className={style["addNewButton"]} onClick={onAddNewClicked}>Add New</button>
</div>}
{/* Interface- Add New Row/Edit Row */}
<div className= {showInterface? style['Interface-Open']:style['Interface-Close']}>
<div className = "dataForm">
</div>
{/* Dialog- Add New Row/Edit Row */}
{ (addRow || editRow) && <Dialog
open={showDiologBox}
onClose={discardButtonClicked}
fullWidth
maxWidth="md"
> <DialogContent>
<div className = {style["dataForm"]}>
<form onSubmit={editRow ? (e)=>onUpdateSubmit(e) : (e)=>onAddSubmit(e)}>
<div className = {style["formTitle"]}>
<h3>{editRow ? "Edit Activity" : "Add a New Activity"}</h3>
@@ -326,9 +332,8 @@ function Workplan() {
</div>
</form>
</div>
</div>

</div>
</DialogContent>
</Dialog>}
</>
);
}
27 changes: 5 additions & 22 deletions front-end/src/components/Deliverables.module.css
Original file line number Diff line number Diff line change
@@ -119,22 +119,6 @@
background-color: #0056b3;
}

/* Interfaces */
.Interface-Open{
width: 90%;
border: 1px solid #ccc;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 10px;
border-radius: 4px;
}

.Interface-Close{
display: none;
}

/* New Entry Interface */
/* Form title */
.formTitle {
text-align: center;
@@ -163,23 +147,23 @@
/* Inside the data input boxes */
.inputbox .field {
width: 60%;
position: absolute;
/* position: absolute; */
right: 12%;
background: transparent;
border: 2px solid #c9e1ef;
outline: none;
padding: 15px;
font-size: 16px;
color: #333;

}

.buttonsBlock{
display:flex;
justify-content: center;
align-items: center;
}
/* Send Message button */
.Interface-Open button {
/* buttons */
.buttonsBlock button {
width: 100px;
height: 50px;
background: hsl(211, 44%, 66%);
@@ -193,8 +177,7 @@
margin:10px;
}

/* Send Message button when the mouse point to that*/
.Interface-Open button:hover{
.buttonsBlock button:hover{
background: hsl(211, 40%, 69%);
color: #2a2929;
}
30 changes: 7 additions & 23 deletions front-end/src/components/Workplan.module.css
Original file line number Diff line number Diff line change
@@ -120,22 +120,6 @@
background-color: #0056b3;
}

/* Interfaces */
.Interface-Open{
width: 90%;
border: 1px solid #ccc;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 10px;
border-radius: 4px;
}

.Interface-Close{
display: none;
}

/* New Entry Interface */
/* Form title */
.formTitle {
text-align: center;
@@ -180,7 +164,7 @@
align-items: center;
}
/* Send Message button */
.Interface-Open button {
.buttonsBlock button {
width: 100px;
height: 50px;
background: hsl(211, 44%, 66%);
@@ -195,14 +179,14 @@
}

/* Send Message button when the mouse point to that*/
.Interface-Open button:hover{
.buttonsBlock button:hover{
background: hsl(211, 40%, 69%);
color: #2a2929;
}

/********** Input type - Checkboxes**********/
/* Hide the default checkbox */
.Interface-Open Input[type="checkbox"] {
.dataForm Input[type="checkbox"] {
position: relative;
width: 20px;
height: 20px;
@@ -215,7 +199,7 @@
}

/* Add a checkmark using the ::after pseudo-element */
.Interface-Open Input[type="checkbox"]::after {
.dataForm Input[type="checkbox"]::after {
content: "";
position: absolute;
width: 6px;
@@ -230,17 +214,17 @@
}

/* Checked state */
.Interface-Open Input[type="checkbox"]:checked {
.dataForm Input[type="checkbox"]:checked {
background-color: hsl(211, 44%, 66%);
}

/* Show the checkmark when checked */
.Interface-Open Input[type="checkbox"]:checked::after {
.dataForm Input[type="checkbox"]:checked::after {
opacity: 1;
}

/* Optional: Add a hover effect */
.Interface-Open Input[type="checkbox"]:hover {
.dataForm Input[type="checkbox"]:hover {
border-color: #0056b3;
}

0 comments on commit 7a126fe

Please sign in to comment.