Changeset 28b3398 for jobvista-frontend/src/views/dashboard

Timestamp:

06/09/24 14:24:03 (5 months ago)

Author:

223021 <daniel.ilievski.2@…>

Branches:

main

Children:

b248810

Parents:

19398ad

Message:

Implemented job application functionality, added job advertisement filtering and replaced text areas with editors

Location:

jobvista-frontend/src/views/dashboard

Files:

• Dashboard.css (modified) (4 diffs)
• Dashboard.js (modified) (7 diffs)

jobvista-frontend/src/views/dashboard/Dashboard.css

@@ -11 +11 @@
 }
 
-
-.head-dashboard-box .head-component {
-    display: inline;
+.head-dashboard-box .filter-container {
+    display: inline-flex;
+    justify-content: center;
+    gap: 10px;
 }
 
@@ -19 +20 @@
 .head-dashboard-box .search-container {
     position: relative;
-    float: left;
+    /*float: left;*/
+    display: inline-block;
 }
 .head-dashboard-box .search-container .search-input {
@@ -26 +28 @@
     padding: 5px 30px;
     border-radius: 10px;
-    margin-right: 15px;
+    /*margin-right: 15px;*/
 }
 
-.search-container .search-input:focus {
+.head-dashboard-box .search-container .search-input:focus {
     outline-color: #6367ef;
 }
 
-.search-container i {
+.head-dashboard-box .search-container i {
     left: 10px;
     position: absolute;
@@ -39 +41 @@
 }
 
-.item {
-    width: 35%;
+.head-dashboard-box .item {
+    width: 20%;
     display: inline-block;
-    margin-left: 10px;
-    float: right;
+    /*margin-left: 10px;*/
+    /*float: left !important;*/
 }

jobvista-frontend/src/views/dashboard/Dashboard.js

@@ -20 +20 @@
 
     const [role, setRole] = useState("");
-    const [sortOrder, setSortOrder] = useState("newest");
-    const [selectedDateRange, setSelectedDateRange] = useState("all");
+    const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
+    const [selectedIndustry, setSelectedIndustry] = useState("all");
     const [searchTerm, setSearchTerm] = useState("");
     const [dispatched, setDispatched] = useState(false)
@@ -32 +32 @@
 
     useEffect(() => {
-        if(!dispatched && jobAdvertisementsState.length == 0) {
+        if (!dispatched && jobAdvertisementsState.length == 0) {
             dispatch(JobAdvertisementActions.fetchJobAdvertisements((success, response) => {
                 if (success && response.data.length > 0) {
@@ -39 +39 @@
                 setDispatched(true)
                 console.log("Fetch all job advertisements GET")
-                console.log(response.data)
             }))
 
@@ -46 +45 @@
             console.log("Fetch all job advertisements STATE")
         }
-    }, [])
+    }, [jobAdvertisementsState])
 
+    let filterJobAdvertisements = () => {
+        JobAdvertisementActions.filterJobAdvertisements(
+            {
+                searchTerm: searchTerm,
+                industry: selectedIndustry,
+                sortOrder: selectedSortOrder
+            }, (success, response) => {
+                if (success) {
+                    setJobAdvertisements(response.data);
+                }
+            }
+        )
+    }
 
     return (
@@ -53 +65 @@
             <div className="head-dashboard-box">
                 <div className="row">
-                    <div className="col-md-3">
-                        <div className="search-container head-component">
-                            <i className="fa-solid fa-magnifying-glass blue-colored"></i>
+                    <div className="col-md-12 filter-container">
+                        <div className="search-container">
+                            <i className="fa-solid fa-magnifying-glass search-icon"></i>
                             <input
                                 className="search-input"
                                 type="text"
                                 placeholder="Search job advertisement by title..."
-                                //value={searchTerm}
-                                //onChange={event => setSearchTerm(event.target.value)}
+                                value={searchTerm}
+                                onChange={event => setSearchTerm(event.target.value)}
                             />
                         </div>
-                    </div>
-                    <div className="col-md-9">
                         <div className="sort-section item">
                             <Select
                                 defaultValue={{value: "all", label: "All industries"}}
-                                //value={sortOrder.value}
-                                //onChange ={option => setSortOrder(option.value)}
+                                value={selectedIndustry.value}
+                                onChange={option => setSelectedIndustry(option.value)}
                                 options={industryOptionsFilter}
                                 className="sort-range sort"
@@ -78 +88 @@
                             <Select
                                 defaultValue={{value: "newest", label: "Date (Newest First)"}}
-                                //value={sortOrder.value}
-                                //onChange ={option => setSortOrder(option.value)}
-                                options = {sortOptions}
+                                value={selectedSortOrder.value}
+                                onChange={option => setSelectedSortOrder(option.value)}
+                                options={sortOptions}
                                 className="sort-range sort"
                             />
                         </div>
-                        <div className="date-range-section item">
-                            <Select
-                                defaultValue={{value: "all", label: "Lifetime"}}
-                                //value={selectedDateRange.value}
-                                //onChange={option => setSelectedDateRange(option.value)}
-                                options={dataRangeOptions}
-                                className="date-range sort"
-                            />
-                        </div>
+                        <button onClick={filterJobAdvertisements} className="btn-open-modal">Find jobs</button>
                     </div>
+                    {/*<div className="col-md-3">*/}
+
+                    {/*<div className="date-range-section item">*/}
+                    {/*    <Select*/}
+                    {/*        defaultValue={{value: "all", label: "Lifetime"}}*/}
+                    {/*        //value={selectedDateRange.value}*/}
+                    {/*        //onChange={option => setSelectedDateRange(option.value)}*/}
+                    {/*        options={dataRangeOptions}*/}
+                    {/*        className="date-range sort"*/}
+                    {/*    />*/}
+                    {/*</div>*/}
+                    {/*</div>*/}
                 </div>
             </div>
@@ -104 +118 @@
                                 <div className="card-head">
                                     <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
-                                    <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
+                                    <span
+                                        className="job-type"> {jobAd.jobType === JobType.JOB ? "Job" : "Internship"}</span>
                                     {!jobAd.active && <span className="expired">Expired</span>}
                                 </div>
                                 <div className="card-body">
                                     <h5 className="card-title">{jobAd.title}</h5>
-                                    <span>{jobAd.industry} • <span style={{color: "black", fontWeight: "bold"}}>{formatRelativeTime(jobAd.postedOn)}</span></span>
+                                    <span>{jobAd.industry} • <span style={{
+                                        color: "black",
+                                        fontWeight: "bold"
+                                    }}>{formatRelativeTime(jobAd.postedOn)}</span></span>
                                     <div className="card-info">
-                                        <span><i className="fa-solid fa-building" style={{color: "#000000"}}></i> Company: <span style={{color: "black", fontWeight: "bold"}}>{jobAd.recruiterName}</span></span> <br/>
+                                        <span><i className="fa-solid fa-building"
+                                                 style={{color: "#000000"}}></i> Company: <span style={{
+                                            color: "black",
+                                            fontWeight: "bold"
+                                        }}>{jobAd.recruiterName}</span></span> <br/>
                                     </div>
 
                                     <div className="aligned">
-                                        <Link to={`/job-advertisements/view/${jobAd.id}`} className="card-button">Read more</Link>
-                                        {role===Roles.JOBSEEKER &&
-                                            <>
-                                                {jobAd.active && <button className="card-button">Apply now</button> }
-                                                {!jobAd.active && <button className="card-button disabled">Apply now</button> }
-                                            </>
-                                        }
+                                        <Link to={`/job-advertisements/${jobAd.id}`} className="card-button">Read
+                                            more</Link>
                                     </div>