Skip to content

Commit 779bc3b

Browse files
IshaanMinochaIshaanMinocha
committed
only few things left
1 parent 7ac0bc3 commit 779bc3b

File tree

6 files changed

+254
-46
lines changed

6 files changed

+254
-46
lines changed

‎frontend/src/components/Placement/PlacementActive.jsx‎

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,59 @@
1-
import React from 'react'
1+
import React, { useState, useEffect } from 'react';
2+
import axios from 'axios';
23

34
function PlacementActive() {
5+
const [activePlacements, setActivePlacements] = useState([]);
6+
const host = process.env.REACT_APP_BACKEND_URL;
7+
8+
useEffect(() => {
9+
const fetchData = async () => {
10+
try {
11+
const response = await axios.get(`${host}/placements/active-placements/`);
12+
setActivePlacements(response.data);
13+
} catch (error) {
14+
console.error('Error fetching data:', error);
15+
}
16+
};
17+
18+
fetchData();
19+
}, [host]);
20+
21+
const getFileNameFromPath = path => {
22+
const parts = path.split('/');
23+
return parts[parts.length - 1];
24+
};
25+
426
return (
5-
<div>PlacementActive</div>
6-
)
27+
<div className="container mx-auto px-4 py-8">
28+
<h2 className="text-4xl font-semibold mb-4">Active Placements</h2>
29+
<div className="grid grid-cols-2 gap-4">
30+
{activePlacements.map(placement => (
31+
<div key={placement.id} className="bg-white p-4 rounded shadow-md">
32+
<h3 className="text-lg font-semibold">Company: {placement.company_name}</h3>
33+
<p>Package Offered: ${placement.pkg_offered}</p>
34+
<p>Role: {placement.role}</p>
35+
<p>Date: {new Date(placement.date).toLocaleDateString()}</p>
36+
<p>Description: {placement.description}</p>
37+
<p>Document: {placement.docs ? (
38+
<a
39+
href={placement.docs}
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
className="text-blue-500 underline hover:text-blue-700"
43+
>
44+
{getFileNameFromPath(placement.docs)}
45+
</a>
46+
) : (
47+
<>
48+
Not Available
49+
</>
50+
)}</p>
51+
{placement.archive && <p className="text-red-500">Archived</p>}
52+
</div>
53+
))}
54+
</div>
55+
</div>
56+
);
757
}
858

9-
export default PlacementActive
59+
export default PlacementActive;

‎frontend/src/components/Placement/PlacementAll.jsx‎

Lines changed: 53 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,59 @@
1-
import React from 'react'
1+
import React, { useState, useEffect } from 'react';
2+
import axios from 'axios';
23

34
function PlacementAll() {
5+
const [placements, setPlacements] = useState([]);
6+
const host = process.env.REACT_APP_BACKEND_URL;
7+
8+
useEffect(() => {
9+
const fetchData = async () => {
10+
try {
11+
const response = await axios.get(`${host}/placements/all-placements/`);
12+
setPlacements(response.data);
13+
} catch (error) {
14+
console.error('Error fetching data:', error);
15+
}
16+
};
17+
18+
fetchData();
19+
}, [host]);
20+
21+
const getFileNameFromPath = path => {
22+
const parts = path.split('/');
23+
return parts[parts.length - 1];
24+
};
25+
426
return (
5-
<>
6-
<div className="text-center">
7-
<h2 className="text-4xl font-semibold mb-4">All Placements</h2>
8-
<p className="text-lg m-5">Select an option from menu to get started.</p>
27+
<div className="container mx-auto px-4 py-8">
28+
<h2 className="text-4xl font-semibold mb-4">All Placements</h2>
29+
<div className="grid grid-cols-2 gap-4">
30+
{placements.map(placement => (
31+
<div key={placement.id} className="bg-white p-4 rounded shadow-md">
32+
<h3 className="text-lg font-semibold">Company: {placement.company_name}</h3>
33+
<p>Package Offered: ${placement.pkg_offered}</p>
34+
<p>Role: {placement.role}</p>
35+
<p>Date: {new Date(placement.date).toLocaleDateString()}</p>
36+
<p>Description: {placement.description}</p>
37+
<p>Document: {placement.docs ? (
38+
<a
39+
href={placement.docs}
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
className="text-blue-500 underline hover:text-blue-700"
43+
>
44+
{getFileNameFromPath(placement.docs)}
45+
</a>
46+
) : (
47+
<>
48+
Not Available
49+
</>
50+
)}</p>
51+
{placement.archive && <p className="text-red-500">Archived</p>}
52+
</div>
53+
))}
954
</div>
10-
</>
11-
)
55+
</div>
56+
);
1257
}
1358

14-
export default PlacementAll
59+
export default PlacementAll;

‎frontend/src/components/Placement/PlacementAnnouncement.jsx‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,13 @@ import axios from 'axios';
33

44
function PlacementAnnouncement() {
55
const [announcements, setAnnouncements] = useState([]);
6-
const [loggedInUserRole, setLoggedInUserRole] = useState('');
76
const host = process.env.REACT_APP_BACKEND_URL;
87

98
useEffect(() => {
109
const fetchData = async () => {
1110
try {
1211
const accessToken = localStorage.getItem('accessToken');
1312
const headers = { Authorization: `Bearer ${accessToken}` };
14-
15-
const userRoleResponse = await axios.get(`${host}/user-details/`, { headers });
16-
setLoggedInUserRole(userRoleResponse.data.role);
1713

1814
const announcementsResponse = await axios.get(`${host}/placements/announcement/`, { headers });
1915
setAnnouncements(announcementsResponse.data);
@@ -25,15 +21,9 @@ function PlacementAnnouncement() {
2521
fetchData();
2622
}, [host]);
2723

28-
const handleDeleteAnnouncement = async (id) => {
29-
try {
30-
const accessToken = localStorage.getItem('accessToken');
31-
const headers = { Authorization: `Bearer ${accessToken}` };
32-
await axios.delete(`${host}/placements/announcement/${id}/`, { headers });
33-
setAnnouncements(announcements.filter((announcement) => announcement.id !== id));
34-
} catch (error) {
35-
console.error('Error deleting announcement:', error);
36-
}
24+
const getFileNameFromPath = path => {
25+
const parts = path.split('/');
26+
return parts[parts.length - 1];
3727
};
3828

3929
return (
@@ -47,7 +37,6 @@ function PlacementAnnouncement() {
4737
<th className="border border-gray-800 px-4 py-2">Description</th>
4838
<th className="border border-gray-800 px-4 py-2">Date</th>
4939
<th className="border border-gray-800 px-4 py-2">Documents</th>
50-
<th className="border border-gray-800 px-4 py-2">Actions</th>
5140
</tr>
5241
</thead>
5342
<tbody>
@@ -57,16 +46,20 @@ function PlacementAnnouncement() {
5746
<td className="border border-gray-800 px-4 py-2">{announcement.desc}</td>
5847
<td className="border border-gray-800 px-4 py-2">{new Date(announcement.date).toLocaleString()}</td>
5948
<td className="border border-gray-800 px-4 py-2">
60-
<a href={announcement.docs} target="_blank" rel="noopener noreferrer">View Documents</a>
61-
</td>
62-
<td className="border border-gray-800 px-4 py-2">
63-
<button
64-
onClick={() => handleDeleteAnnouncement(announcement.id)}
65-
className="bg-red-500 hover:bg-red-600 text-white font-bold py-1 px-2 rounded"
66-
>
67-
Delete
68-
</button>
49+
{announcement.docs ? (
50+
<a
51+
href={announcement.docs}
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
className="text-blue-500 underline hover:text-blue-700"
55+
>
56+
{getFileNameFromPath(announcement.docs)}
57+
</a>
58+
) : (
59+
<span>Not Available</span>
60+
)}
6961
</td>
62+
7063
</tr>
7164
))}
7265
</tbody>

‎frontend/src/components/Placement/PlacementPast.jsx‎

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,59 @@
1-
import React from 'react'
1+
import React, { useState, useEffect } from 'react';
2+
import axios from 'axios';
23

34
function PlacementPast() {
5+
const [pastPlacements, setPastPlacements] = useState([]);
6+
const host = process.env.REACT_APP_BACKEND_URL;
7+
8+
useEffect(() => {
9+
const fetchData = async () => {
10+
try {
11+
const response = await axios.get(`${host}/placements/past-placements/`);
12+
setPastPlacements(response.data);
13+
} catch (error) {
14+
console.error('Error fetching data:', error);
15+
}
16+
};
17+
18+
fetchData();
19+
}, [host]);
20+
21+
const getFileNameFromPath = path => {
22+
const parts = path.split('/');
23+
return parts[parts.length - 1];
24+
};
25+
426
return (
5-
<div>PlacementPast</div>
6-
)
27+
<div className="container mx-auto px-4 py-8">
28+
<h2 className="text-4xl font-semibold mb-4">Past Placements</h2>
29+
<div className="grid grid-cols-2 gap-4">
30+
{pastPlacements.map(placement => (
31+
<div key={placement.id} className="bg-white p-4 rounded shadow-md">
32+
<h3 className="text-lg font-semibold">Company: {placement.company_name}</h3>
33+
<p>Package Offered: ${placement.pkg_offered}</p>
34+
<p>Role: {placement.role}</p>
35+
<p>Date: {new Date(placement.date).toLocaleDateString()}</p>
36+
<p>Description: {placement.description}</p>
37+
<p>Document: {placement.docs ? (
38+
<a
39+
href={placement.docs}
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
className="text-blue-500 underline hover:text-blue-700"
43+
>
44+
{getFileNameFromPath(placement.docs)}
45+
</a>
46+
) : (
47+
<>
48+
Not Available
49+
</>
50+
)}</p>
51+
{placement.archive && <p className="text-red-500">Archived</p>}
52+
</div>
53+
))}
54+
</div>
55+
</div>
56+
);
757
}
858

9-
export default PlacementPast
59+
export default PlacementPast;

‎frontend/src/components/PlacementAdmin/AnnouncementsPlacement.jsx‎

Lines changed: 75 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,79 @@
1-
import React from 'react'
1+
import React, { useState, useEffect } from 'react';
2+
import axios from 'axios';
3+
4+
function AnnouncementsPlacement() {
5+
const [announcements, setAnnouncements] = useState([]);
6+
const [loggedInUserRole, setLoggedInUserRole] = useState('');
7+
const host = process.env.REACT_APP_BACKEND_URL;
8+
9+
useEffect(() => {
10+
const fetchData = async () => {
11+
try {
12+
const accessToken = localStorage.getItem('accessToken');
13+
const headers = { Authorization: `Bearer ${accessToken}` };
14+
15+
const userRoleResponse = await axios.get(`${host}/user-details/`, { headers });
16+
setLoggedInUserRole(userRoleResponse.data.role);
17+
18+
const announcementsResponse = await axios.get(`${host}/placements/announcement/`, { headers });
19+
setAnnouncements(announcementsResponse.data);
20+
} catch (error) {
21+
console.error('Error fetching data:', error);
22+
}
23+
};
24+
25+
fetchData();
26+
}, [host]);
27+
28+
const handleDeleteAnnouncement = async (id) => {
29+
try {
30+
const accessToken = localStorage.getItem('accessToken');
31+
const headers = { Authorization: `Bearer ${accessToken}` };
32+
await axios.delete(`${host}/placements/announcement/${id}/`, { headers });
33+
setAnnouncements(announcements.filter((announcement) => announcement.id !== id));
34+
} catch (error) {
35+
console.error('Error deleting announcement:', error);
36+
}
37+
};
238

3-
function AnnouncementPlacement() {
439
return (
5-
<div>AnnouncementPlacement</div>
6-
)
40+
<div className="container mx-auto px-4 py-8">
41+
<h2 className="text-4xl font-semibold mb-4">Announcements</h2>
42+
<div className="my-4">
43+
<table className="table-auto w-full border-collapse border border-gray-800">
44+
<thead>
45+
<tr className="bg-gray-200">
46+
<th className="border border-gray-800 px-4 py-2">Title</th>
47+
<th className="border border-gray-800 px-4 py-2">Description</th>
48+
<th className="border border-gray-800 px-4 py-2">Date</th>
49+
<th className="border border-gray-800 px-4 py-2">Documents</th>
50+
<th className="border border-gray-800 px-4 py-2">Actions</th>
51+
</tr>
52+
</thead>
53+
<tbody>
54+
{announcements.map((announcement) => (
55+
<tr key={announcement.id}>
56+
<td className="border border-gray-800 px-4 py-2">{announcement.title}</td>
57+
<td className="border border-gray-800 px-4 py-2">{announcement.desc}</td>
58+
<td className="border border-gray-800 px-4 py-2">{new Date(announcement.date).toLocaleString()}</td>
59+
<td className="border border-gray-800 px-4 py-2">
60+
<a href={announcement.docs} target="_blank" rel="noopener noreferrer">View Documents</a>
61+
</td>
62+
<td className="border border-gray-800 px-4 py-2">
63+
<button
64+
onClick={() => handleDeleteAnnouncement(announcement.id)}
65+
className="bg-red-500 hover:bg-red-600 text-white font-bold py-1 px-2 rounded"
66+
>
67+
Delete
68+
</button>
69+
</td>
70+
</tr>
71+
))}
72+
</tbody>
73+
</table>
74+
</div>
75+
</div>
76+
);
777
}
878

9-
export default AnnouncementPlacement
79+
export default AnnouncementsPlacement;

‎frontend/src/components/PlacementAdmin/PlacementDashboard.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,11 @@ const PlacementDashboard = () => {
5050
<div className='grid grid-cols-2 gap-4 m-10'>
5151
<div onClick={() => setSelectedComponent('AllPlacements')} className="bg-gray-200 p-4 hover:bg-gray-100 cursor-pointer rounded-lg hover:scale-105">
5252
<h3 className="text-lg font-semibold mb-2">All Placements →</h3>
53-
<p className="text-sm">View all placements.</p>
53+
<p className="text-sm">Add, edit & delete placement details.</p>
5454
</div>
5555
<div onClick={() => setSelectedComponent('ArchivedPlacements')} className="bg-gray-200 p-4 hover:bg-gray-100 cursor-pointer rounded-lg hover:scale-105">
5656
<h3 className="text-lg font-semibold mb-2">Archived Placements →</h3>
57-
<p className="text-sm">View only archived placements.</p>
57+
<p className="text-sm">Archive already added placements.</p>
5858
</div>
5959
<div onClick={() => setSelectedComponent('AnnouncementsPlacement')} className="bg-gray-200 p-4 hover:bg-gray-100 cursor-pointer rounded-lg hover:scale-105">
6060
<h3 className="text-lg font-semibold mb-2">Annoucements →</h3>

0 commit comments

Comments
 (0)