Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
embl.org
html-sites
embl-jobs-pages
Commits
42e1dafc
Commit
42e1dafc
authored
Sep 15, 2021
by
Nitin Jadhav
Browse files
added search term highlight
parent
12044537
Pipeline
#193924
passed with stages
in 4 minutes and 30 seconds
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
28 additions
and
0 deletions
+28
-0
src/app/App.scss
src/app/App.scss
+4
-0
src/services/useFetchJobsList.js
src/services/useFetchJobsList.js
+24
-0
No files found.
src/app/App.scss
View file @
42e1dafc
...
...
@@ -27,3 +27,7 @@
height
:
3rem
;
}
}
.highlight
{
background-color
:
rgb
(
255
,
255
,
195
);
}
src/services/useFetchJobsList.js
View file @
42e1dafc
...
...
@@ -3,6 +3,7 @@ import { parseDateFromTimeHtml } from "helpers/date-helpers";
import
{
stripHtml
}
from
"
helpers/helpers
"
;
import
{
useFetch
}
from
"
helpers/useFetch
"
;
import
{
locations
,
positionTypes
}
from
"
data/jobs-data.json
"
;
import
{
cloneDeep
}
from
"
lodash-es
"
;
/* Custom hook for jobs fetching and filtering. If jobLocation is not provided, assume all job locations */
export
function
useFetchJobsList
(
filters
,
jobLocation
)
{
...
...
@@ -76,6 +77,9 @@ export function useFetchJobsList(filters, jobLocation) {
newFilteredJobs
=
newFilteredJobs
.
filter
((
job
)
=>
jobContainsSearchTerm
(
job
,
searchTerm
.
toLowerCase
())
);
newFilteredJobs
=
cloneDeep
(
newFilteredJobs
);
newFilteredJobs
=
highlightTerm
(
newFilteredJobs
,
searchTerm
);
}
if
(
selectedLocations
.
length
)
{
...
...
@@ -179,3 +183,23 @@ function jobContainsSearchTerm(job, searchTerm) {
job
.
$lowercase_field_jobs_duty_station
.
includes
(
searchTerm
)
);
}
function
highlightTerm
(
jobs
,
searchTerm
)
{
debugger
;
const
termRegEx
=
new
RegExp
(
searchTerm
,
"
ig
"
);
jobs
.
forEach
((
job
)
=>
{
job
.
title
=
job
.
title
.
replaceAll
(
termRegEx
,
(
instance
)
=>
`<span class='highlight'>
${
instance
}
</span>`
);
job
.
field_jobs_description
=
job
.
field_jobs_description
.
replaceAll
(
termRegEx
,
(
instance
)
=>
`<span class='highlight'>
${
instance
}
</span>`
);
job
.
field_jobs_duty_station
=
job
.
field_jobs_duty_station
.
replaceAll
(
termRegEx
,
(
instance
)
=>
`<span class='highlight'>
${
instance
}
</span>`
);
});
return
jobs
;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment