Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/wethmiranasinghe/e20-co225-…
Browse files Browse the repository at this point in the history 
…Erasmus-plus-Project-Web-and-MIS
  • Loading branch information
@wethmiranasinghe
wethmiranasinghe committed Oct 16, 2024
2 parents bd27aeb + e80e06d commit ebdaf9f
Show file tree
Hide file tree
Showing 8 changed files with 195 additions and 72 deletions.
4 changes: 3 additions & 1 deletion back-end/src/main/java/com/example/demo/Deliverables/Deliverable.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@

public class Deliverable {
@Id
private String deliverableRelatedNo;
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int deliverableId;

private String deliverableRelatedNo;
private String workPackageNo;
private String deliverableNo;
private String deliverableName;
Expand Down
5 changes: 3 additions & 2 deletions back-end/src/main/java/com/example/demo/Deliverables/DeliverableService.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,18 @@ public List<Deliverable> getAllDeliverables() {
}

//Get deliverable by id
public Deliverable getDeliverableById( String id) {
public Deliverable getDeliverableById(String id) {
return deliverableRepo.findById(id)
.orElseThrow(()->new DeliverableNotFoundException(id));
}
};

//Update a deliverable with a known id
public Deliverable updateDeliverable( String id, Deliverable deliverable) {
Optional<Deliverable> existingDeliverable = deliverableRepo.findById(id);
if (existingDeliverable.isPresent()) {
Deliverable updatedDeliverable = existingDeliverable.get();

updatedDeliverable.setDeliverableRelatedNo(deliverable.getDeliverableRelatedNo());
updatedDeliverable.setWorkPackageNo(deliverable.getWorkPackageNo());
updatedDeliverable.setDeliverableNo(deliverable.getDeliverableNo());
updatedDeliverable.setDeliverableName(deliverable.getDeliverableName());
Expand Down
7 changes: 4 additions & 3 deletions back-end/src/main/java/com/example/demo/Workplan/WorkplanActivity.java
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
//Workplan Activity Model - Create/Update a table 'Worklplan' in MySQL 'cycle' DB
package com.example.demo.Workplan;

import jakarta.persistence.Entity;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import jakarta.persistence.*;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
Expand All @@ -17,6 +15,9 @@
@Table(name="workplan")
public class WorkplanActivity {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int activityId;

private String activityNo;
private String activityName;
private boolean y1_q1=false;
Expand Down
39 changes: 21 additions & 18 deletions front-end/src/Pages/Deliverables.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,3 @@
//TODO: Set the last modified date and User
//TODO: Automatically scroll to the specific points (interfcae, table etc)
//TODO: Sort the table - PK
//TODO: add error message when an invalid date is entered into the form
//TODO: Validate form inputs
//TODO: Edit media queries for form and table
//TODO: Adjust CSS for date input
//Scroll into view
//Auto focus the for input

import { useEffect, useState } from 'react';
import style from '../components/Deliverables.module.css'
import axios from "axios"
Expand All @@ -22,7 +12,8 @@ function Deliverables() {
/******************** Load information whenever the page loads ********************************* */

const [deliverables, setDeliverables] =useState([]);

const [sortOrder, setSortOrder] = useState('asc');

useEffect(()=>{
loadData();
},[])
Expand All @@ -36,6 +27,18 @@ function Deliverables() {
}
}

// Function to sort activities based on Activity No
const sortDeliverables = () => {
const sortedDeliverables = [...deliverables].sort((a, b) => {
if (sortOrder === 'asc') {
return a.deliverableRelatedNo.localeCompare(b.deliverableRelatedNo);
} else {
return b.deliverableRelatedNo.localeCompare(a.deliverableRelatedNo);
}
});
setDeliverables(sortedDeliverables);
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc'); // Toggle sort order
};
/******************** Add a new data entry and edit the exsisting entry ********************************* */

// Show the interface: Either for 'Add New' or 'Edit'
Expand Down Expand Up @@ -114,7 +117,7 @@ const onInputChange=(e)=>{
const onUpdateSubmit = async (e) => {
e.preventDefault(); // Prevent default form submission
try {
await axios.put(`http://localhost:8080/deliverable/update/${deliverable.deliverableRelatedNo}`, deliverable);
await axios.put(`http://localhost:8080/deliverable/update/${deliverable.deliverableId}`, deliverable);
// Optionally, reload the data after successful submission
loadData();
setEditRow(false);
Expand All @@ -137,11 +140,11 @@ const onInputChange=(e)=>{

/************************** Delete a specific entry *************************************/

const onDeleteClick = async (deliverableRelatedNo) => {
const onDeleteClick = async (deliverableId) => {
console.log("Delete button clicked");
console.log(deliverableRelatedNo);
console.log(deliverableId);
try {
await axios.delete(`http://localhost:8080/deliverable/delete/${deliverableRelatedNo}`);
await axios.delete(`http://localhost:8080/deliverable/delete/${deliverableId}`);
loadData();
alert("Deliverable Deleted!");
} catch (error) {
Expand Down Expand Up @@ -200,7 +203,7 @@ const onViewClick = (deliverable) => {
<thead>
<tr>
<th scope="col">Work Package No</th>
<th scope="col">Deliverable Related No</th>
<th scope="col" onClick={sortDeliverables} style={{ cursor:'pointer'}} width="60px">Deliverable Related No {sortOrder === 'asc' ? '▲' : '▼'}</th>
<th scope="col">Deliverable No</th>
<th scope="col">Deliverable Name</th>
{/* <th scope="col">Description</th> */}
Expand All @@ -213,7 +216,7 @@ const onViewClick = (deliverable) => {
</thead>
<tbody>
{deliverables.map((deliverable,index)=>(
<tr key={deliverable.deliverableRelatedNo}>
<tr key={deliverable.deliverableId}>
<td>{deliverable.workPackageNo}</td>
<td>{deliverable.deliverableRelatedNo}</td>
<td>{deliverable.deliverableNo}</td>
Expand All @@ -226,7 +229,7 @@ const onViewClick = (deliverable) => {
<div className='actionButtonsBloack'>
<button className='actionButton' onClick={() => onEditClick(deliverable)}><FontAwesomeIcon icon={faPen}/></button>
<button className='actionButton' onClick={() => onViewClick(deliverable)}><FontAwesomeIcon icon={faEye}/></button>
<button className='actionButton' onClick={() => onDeleteClick(deliverable.deliverableRelatedNo)}><FontAwesomeIcon icon={faTrash} /></button>
<button className='actionButton' onClick={() => onDeleteClick(deliverable.deliverableId)}><FontAwesomeIcon icon={faTrash} /></button>
</div>
</td>}
</tr>
Expand Down
45 changes: 21 additions & 24 deletions front-end/src/Pages/Workplan.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,17 @@
//TODO: CSS for checkbox and table
//Media queries
//Pop as a window kinda thing , not an dialog
//Use a seperate id as PK in back end
//Validate form inputs
//Scroll into view
//Auto focus the for input
//Sort the table
//TODO: Set the last modified date and User

import { useEffect , useState} from 'react';
import style from '../components/Workplan.module.css'
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 { faPen, faTrash } from '@fortawesome/free-solid-svg-icons';
import { Dialog, DialogContent } from "@mui/material";

function Workplan() {

/******************** Load information whenever the page loads ********************************* */

const[workplanActivities, setWorkplanActivities]=useState([])
const [sortOrder, setSortOrder] = useState('asc');

useEffect (()=>{
loadData();
Expand All @@ -34,17 +25,25 @@ function Workplan() {
console.error("Error loading workplan activities:", error);
}
}

// Function to sort activities based on Activity No
const sortActivities = () => {
const sortedActivities = [...workplanActivities].sort((a, b) => {
if (sortOrder === 'asc') {
return a.activityNo.localeCompare(b.activityNo);
} else {
return b.activityNo.localeCompare(a.activityNo);
}
});
setWorkplanActivities(sortedActivities);
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc'); // Toggle sort order
};
/******************** Add a new data entry and edit the exsisting entry ********************************* */

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

//State Variable - to save the original PK before updating the entry
const [originalActivityNo, setOriginalActivityNo] = useState(null);

//Initialize the object
const [activity, setActivity] = useState({
activityNo:"",
Expand Down Expand Up @@ -73,7 +72,6 @@ function Workplan() {
//Function saves the information taken from the form
//Event 'e' is passed to the function
const onInputChange = (e) => {
console.log(e.target.value)
//Deconstruct from event target
const { name, value, type, checked } = e.target;
setActivity({
Expand Down Expand Up @@ -128,7 +126,6 @@ function Workplan() {

//When 'Edit' icon button is clicked : Only For Edit
const onEditClick = (activity) => {
setOriginalActivityNo(activity.activityNo); // Preserve the original primary key
setActivity(activity); //Set the activity for editing
setshowDiologBox(true);
setAddRow(false);
Expand All @@ -140,7 +137,7 @@ function Workplan() {
const onUpdateSubmit = async (e) => {
e.preventDefault(); // Prevent default form submission
try {
await axios.put(`http://localhost:8080/workplan/update/${originalActivityNo}`, activity);
await axios.put(`http://localhost:8080/workplan/update/${activity.activityId}`, activity);
// Optionally, reload the data after successful submission
loadData();
setEditRow(false);
Expand All @@ -161,11 +158,11 @@ function Workplan() {

/************************** Delete a specific entry *************************************/

const onDeleteClick = async (activityNo) => {
const onDeleteClick = async (activityId) => {
console.log("Delete button clicked");
console.log(activityNo);
console.log(activityId);
try {
await axios.delete(`http://localhost:8080/workplan/delete/${activityNo}`);
await axios.delete(`http://localhost:8080/workplan/delete/${activityId}`);
loadData();
} catch (error) {
console.error("Error deleting workplan activity:", error);
Expand Down Expand Up @@ -200,7 +197,7 @@ function Workplan() {
<table className={style["table"]}>
<thead>
<tr>
<th scope="col" rowspan={2}>Activity No</th>
<th scope="col" rowspan={2} onClick={sortActivities} style={{ cursor: 'pointer' }}>Activity No {sortOrder === 'asc' ? '▲' : '▼'}</th>
<th scope="col"rowspan={2}>Activity Name</th>
<th scope="col" colSpan={4}>Year 1</th>
<th scope="col" colSpan={4}>Year 2</th>
Expand Down Expand Up @@ -229,7 +226,7 @@ function Workplan() {
</thead>
<tbody>
{workplanActivities.map((workplanActivity,index)=>(
<tr key={workplanActivity.activityNo}>
<tr key={workplanActivity.activityId}>
<td>{workplanActivity.activityNo}</td>
<td>{workplanActivity.activityName}</td>
<td style={{ backgroundColor: workplanActivity.y1_q1 ? '#72a1e685' : 'white',border:"solid #72a1e685 2px" }}></td>
Expand All @@ -252,7 +249,7 @@ function Workplan() {
{loggedInUser.isLoggedIn && <td>
<div className='actionButtonsBlock'>
<button className='actionButton' onClick={() => onEditClick(workplanActivity)}><FontAwesomeIcon icon={faPen}/></button>
<button className='actionButton' onClick={() => onDeleteClick(workplanActivity.activityNo)}><FontAwesomeIcon icon={faTrash} /></button>
<button className='actionButton' onClick={() => onDeleteClick(workplanActivity.activityId)}><FontAwesomeIcon icon={faTrash} /></button>
</div>
</td>}
</tr>
Expand Down
Loading

0 comments on commit ebdaf9f

Please sign in to comment.