placement ui and 2 bugs fixed

Author: exploring-solver

backend/placement/models.py

@@ -28,4 +28,3 @@ class Announcement(models.Model):
 
     def __str__(self) -> str:
         return self.title
-

backend/placement/views.py

@@ -12,7 +12,7 @@
 # Create your views here.
 
 class AllPlacementRecords(ModelViewSet):
-    authentication_classes =[SessionAuthentication]
+    # authentication_classes =[SessionAuthentication]
     permission_classes =[ WriteByPlacement ]
     # authentication_classes =[BasicAuthentication]
     # permission_classes =[IsAuthenticated, WriteByPlacement ]
@@ -21,7 +21,7 @@ class AllPlacementRecords(ModelViewSet):
 
 class ViewAnnouncement(ModelViewSet):
     # authentication_classes = [BasicAuthentication]
-    authentication_classes =[SessionAuthentication]
+    # authentication_classes =[SessionAuthentication]
     permission_classes = [WriteByPlacement]
     # permission_classes = [IsAuthenticated, WriteByPlacement]
     serializer_class = AnnouncementSerializer
@@ -36,7 +36,7 @@ class ViewAnnouncement(ModelViewSet):
 
 class PastPlacementRecords(ModelViewSet):
     # authentication_classes = [BasicAuthentication]
-    authentication_classes =[SessionAuthentication]
+    # authentication_classes =[SessionAuthentication]
     permission_classes = [ WriteByPlacement]
     # permission_classes = [IsAuthenticated, WriteByPlacement]
     serializer_class = PlacementSerializer
@@ -47,7 +47,7 @@ class PastPlacementRecords(ModelViewSet):
 class ActivePlacementRecords(ModelViewSet):
     # authentication_classes = [BasicAuthentication]
     permission_classes = [ WriteByPlacement]
-    authentication_classes =[SessionAuthentication]
+    # authentication_classes =[SessionAuthentication]
     # permission_classes = [IsAuthenticated, WriteByPlacement]
     serializer_class = PlacementSerializer
-    queryset = Placements.objects.filter(date__gt=timezone.now()) 
+    queryset = Placements.objects.filter(date__gt=timezone.now())

frontend/src/components/Placement/PlacementActive.jsx

@@ -26,7 +26,7 @@ function PlacementActive() {
   return (
     <div className="container mx-auto px-4 py-8">
       <h2 className="text-4xl font-semibold mb-4">Active Placements</h2>
-      <div className="grid grid-cols-2 gap-4">
+      <div className="flex flex-wrap gap-5">
         {activePlacements.map(placement => (
           <div key={placement.id} className="bg-white p-4 rounded shadow-md">
             <h3 className="text-lg font-semibold">Company: {placement.company_name}</h3>

frontend/src/components/Placement/PlacementAll.jsx

@@ -25,9 +25,9 @@ function PlacementAll() {
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <h2 className="text-4xl font-semibold mb-4">All Placements</h2>
-      <div className="grid grid-cols-2 gap-4">
-        {placements.map(placement => (
+      <h2 className="text-4xl font-semibold mb-4">All openings</h2>
+      <div className="flex flex-wrap gap-10">
+        {placements.filter(placement => !placement.archive).map(placement => (
           <div key={placement.id} className="bg-white p-4 rounded shadow-md">
             <h3 className="text-lg font-semibold">Company: {placement.company_name}</h3>
             <p>Package Offered: ${placement.pkg_offered}</p>
@@ -48,10 +48,11 @@ function PlacementAll() {
                 Not Available
               </>
             )}</p>
-            {placement.archive && <p className="text-red-500">Archived</p>}
+            {/* {placement.archive && <p className="text-red-500">Archived</p>} */}
           </div>
         ))}
       </div>
+
     </div>
   );
 }

frontend/src/components/Placement/PlacementPast.jsx

@@ -26,7 +26,7 @@ function PlacementPast() {
   return (
     <div className="container mx-auto px-4 py-8">
       <h2 className="text-4xl font-semibold mb-4">Past Placements</h2>
-      <div className="grid grid-cols-2 gap-4">
+      <div className="flex flex-wrap gap-4">
         {pastPlacements.map(placement => (
           <div key={placement.id} className="bg-white p-4 rounded shadow-md">
             <h3 className="text-lg font-semibold">Company: {placement.company_name}</h3>
@@ -48,7 +48,7 @@ function PlacementPast() {
                 Not Available
               </>
             )}</p>
-            {placement.archive && <p className="text-red-500">Archived</p>}
+            {/* {placement.archive && <p className="text-red-500">Archived</p>} */}
           </div>
         ))}
       </div>

frontend/src/components/Placement/PlacementStudent.jsx

@@ -27,7 +27,10 @@ const PlacementStudent = () => {
         localStorage.removeItem('token');
         navigate('/placement-login');
     };
-
+    const getFileNameFromPath = path => {
+        const parts = path.split('/');
+        return parts[parts.length - 1];
+    };
     useEffect(() => {
         const fetchAnnouncements = async () => {
             try {
@@ -43,6 +46,35 @@ const PlacementStudent = () => {
         fetchAnnouncements();
     }, []);
 
+    const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const AnnouncementModal = ({ announcement, onClose }) => (
+        <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50">
+            <div className="bg-white p-8 max-w-md rounded-lg">
+                <h2 className="text-xl font-semibold mb-4">{announcement.title}</h2>
+                <p className="mb-4">{announcement.desc}</p>
+                <p>Document Attached: </p>
+                <>
+                    {announcement.docs ? (
+                        <a
+                            href={announcement.docs}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-blue-500 underline hover:text-blue-700"
+                        >
+                            {getFileNameFromPath(announcement.docs)}
+                        </a>
+                    ) : (
+                        <span>Not Available</span>
+                    )}
+                </>
+                <br />
+                <button className="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600" onClick={onClose}>Close</button>
+            </div>
+        </div>
+    );
+
     useEffect(() => {
         const timer = setTimeout(() => {
             setIsLoading(false);
@@ -67,8 +99,8 @@ const PlacementStudent = () => {
             <div className='bg-slate-300 h-[100%]'>
                 <div className="p-5 w-[90%] m-auto">
                     <div className="mb-8 inline-block">
-                        <Link to={'/placement-student'} onClick={() => setSelectedComponent(null)}>
-                            <h1 className="text-xl hover:bg-gray-100 text-blue-900 w-fit p-2 rounded font-semibold bg-gray-200">Placements Dashboard</h1>
+                        <Link to={'/dashboard'} onClick={() => setSelectedComponent(null)}>
+                            <h1 className="text-xl hover:bg-gray-100 text-blue-900 w-fit p-2 rounded font-semibold bg-gray-200">Dashboard</h1>
                         </Link>
                     </div>
                     {isLoading ? (
@@ -78,17 +110,18 @@ const PlacementStudent = () => {
                             <div>
                                 <div className="bg-gray-200 p-4">
                                     <ul>
+                                        <li className='mb-2 '></li>
                                         <li className="mb-2">
-                                            <button className="block py-2 px-4 text-blue-900 font-semibold rounded hover:bg-gray-100" onClick={() => setSelectedComponent('AllPlacements')}>All Placements</button>
+                                            <button className="block py-2 px-4 text-blue-900 font-semibold rounded hover:bg-gray-100 mx-auto" onClick={() => setSelectedComponent('AllPlacements')}>Explore</button>
                                         </li>
                                         <li className="mb-2">
-                                            <button className="block py-2 px-4 text-blue-900 font-semibold rounded hover:bg-gray-100" onClick={() => setSelectedComponent('ActivePlacements')}>Active Placements</button>
+                                            <button className="block py-2 px-4 text-blue-900 font-semibold rounded hover:bg-gray-100" onClick={() => setSelectedComponent('ActivePlacements')}>Active Opportunities</button>
                                         </li>
                                         <li className="mb-2">
-                                            <button className="block py-2 px-4 text-blue-900 font-semibold rounded hover:bg-gray-100" onClick={() => setSelectedComponent('PastPlacements')}>Past Placements</button>
+                                            <button className="block py-2 px-4 text-blue-900 font-semibold rounded hover:bg-gray-100" onClick={() => setSelectedComponent('PastPlacements')}>Past openings</button>
                                         </li>
                                         <li className="mb-2">
-                                            <button className="block py-2 px-4 text-blue-900 font-semibold rounded hover:bg-gray-100" onClick={() => setSelectedComponent('AnnouncementsPlacements')}>View All Announcements</button>
+                                            <button className="block py-2 px-4 text-blue-900 font-semibold rounded hover:bg-gray-100" onClick={() => setSelectedComponent('AnnouncementsPlacements')}>Announcements</button>
                                         </li>
                                     </ul>
                                 </div>
@@ -102,17 +135,25 @@ const PlacementStudent = () => {
                             </div>
                             {selectedComponent !== 'AnnouncementsPlacements' && (
                                 <div className="w-96 bg-gray-200 p-4 relative">
-                                    <h2 className="text-2xl font-bold mb-6">Announcements</h2>
+                                    <h2 className="text-2xl font-semibold mb-6">Announcements</h2>
                                     {announcements && announcements.length > 0 ? (
                                         announcements.map((announcement) => (
-                                            <div key={announcement.id}>
-                                                <h3 className="text-lg font-semibold">{announcement.title}</h3>
+                                            <div key={announcement.id} onClick={() => {
+                                                setSelectedAnnouncement(announcement);
+                                                setIsModalOpen(true);
+                                            }}>
+                                                <h3 className="text-lg font-semibold cursor-pointer hover:underline">{announcement.title}</h3>
                                                 <hr className="my-2 border-gray-400" />
                                             </div>
                                         ))
+
                                     ) : (
                                         <p>No announcements available.</p>
                                     )}
+                                    {isModalOpen && selectedAnnouncement && (
+                                        <AnnouncementModal announcement={selectedAnnouncement} onClose={() => setIsModalOpen(false)} />
+                                    )}
+
                                     <div className="absolute inset-x-0 bottom-0 flex justify-end mb-1">
                                         <button className="py-2 px-4 text-blue-900 hover:underline font-semibold" onClick={() => setSelectedComponent('AnnouncementsPlacements')}>View All...</button>
                                     </div>

frontend/src/components/PlacementAdmin/AddAnnouncement.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AddAnnouncement = () => {
+  return (
+    <div>AddAnnouncement</div>
+  )
+}
+
+export default AddAnnouncement