Commit 5255aa72 authored by Nitin Jadhav's avatar Nitin Jadhav
Browse files

Merge branch 'ebi-iframe-filter' into 'master'

added job filter for EBI iframe

See merge request !39
parents 9f25a186 9e129c13
Pipeline #156006 canceled with stages
in 9 minutes and 37 seconds
......@@ -25,6 +25,7 @@
"no-unused-vars": "warn",
"react/react-in-jsx-scope": "off",
"react/prop-types": "off",
"react/no-unescaped-entities":"off"
"react/no-unescaped-entities":"off",
"no-debugger":"warn"
}
}
\ No newline at end of file
......@@ -17,8 +17,8 @@
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex: 1;
flex: 1;
height: 2rem;
text-decoration: none;
}
......
import React from "react";
import { emblBreadcrumbs } from "@visual-framework/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup";
import { emblBreadcrumbs } from "@visual-framework/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup";
export class EmblBreadcrumbs extends React.Component {
componentDidMount() {
// window.setTimeout(function() {
emblBreadcrumbs();
emblBreadcrumbs();
// }, 700);
}
render() {
return (
<nav className="vf-breadcrumbs embl-breadcrumbs-lookup" aria-label="Breadcrumb" data-embl-js-breadcrumbs-lookup>
<nav
className="vf-breadcrumbs embl-breadcrumbs-lookup"
aria-label="Breadcrumb"
data-embl-js-breadcrumbs-lookup
>
<div className="vf-list vf-list--inline | vf-breadcrumbs__list | embl-breadcrumbs-lookup--ghosting"></div>
</nav>
);
......
import React from "react";
import { emblContentHub } from "@visual-framework/embl-content-hub-loader/embl-content-hub-loader";
import { emblContentHub } from "@visual-framework/embl-content-hub-loader/embl-content-hub-loader";
export class EmblFooter extends React.Component {
componentDidMount() {
// window.setTimeout(function() {
emblContentHub();
emblContentHub();
// }, 700);
}
render() {
......
......@@ -6,11 +6,9 @@ export function EBIHome() {
<>
<Helmet>
{/* Supports iframe resizing on ebi.ac.uk/careers/jobs */}
<script
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
</Helmet>
<Home showLocations={false} />
</>
<Home showLocations={false} jobLocation="EMBL-EBI Hinxton" />
</>
);
}
}
......@@ -4,11 +4,11 @@ import {
JobListFilters,
} from "components/job-list-filters/JobListFilters";
import { JobList } from "components/job-list/JobList";
import React, { useState } from "react";
import React, { useCallback, useState } from "react";
import { useFetchJobsList } from "services/useFetchJobsList";
import "./Home.scss";
export function Home({ showLocations = true }) {
export function Home({ showLocations = true, jobLocation }) {
const [filters, setFilters] = useState(getInitialFilters());
const {
......@@ -17,13 +17,13 @@ export function Home({ showLocations = true }) {
positionJobsCount,
loading,
error,
} = useFetchJobsList(filters);
} = useFetchJobsList(filters, jobLocation);
const handleSearch = (searchTerm) => {
setFilters({
setFilters((filters) => ({
...filters,
searchTerm,
});
}));
};
return (
......
......@@ -22,10 +22,10 @@ export function JobListFilters({
// toggle this element in array
let selectedLocations = toggleInArray(filters.selectedLocations, location);
onFiltersChange({
onFiltersChange((filters) => ({
...filters,
selectedLocations,
});
}));
};
const handleJobTypeFilterChange = (targetJobTypeKey) => {
......@@ -35,17 +35,17 @@ export function JobListFilters({
targetJobTypeKey
);
onFiltersChange({
onFiltersChange((filters) => ({
...filters,
selectedJobTypes,
});
}));
};
const handleClosingDateSortDirectionChange = (selectedClosingDateSortDir) => {
onFiltersChange({
onFiltersChange((filters) => ({
...filters,
selectedClosingDateSortDir,
});
}));
};
const handleResetFilters = (event) => {
......@@ -79,7 +79,8 @@ export function JobListFilters({
htmlFor={`location-checkbox-${index}`}
className="vf-form__label"
>
{locationTitle}{` `}({jobCount})
{locationTitle}
{` `}({jobCount})
</label>
</div>
)
......@@ -105,7 +106,7 @@ export function JobListFilters({
htmlFor={`jobtype-checkbox-${index}`}
className="vf-form__label"
>
{positionTitle}({jobCount})
{positionTitle} ({jobCount})
</label>
</div>
)
......
......@@ -4,7 +4,8 @@ import { stripHtml } from "helpers/helpers";
import { useFetch } from "helpers/useFetch";
import { locations, positionTypes } from "data/jobs-data.json";
export function useFetchJobsList(filters) {
/* Custom hook for jobs fetching and filtering. If jobLocation is not provided, assume all job locations */
export function useFetchJobsList(filters, jobLocation) {
const { data, loading, error } = useFetch(
"jobs?_format=json&source=contenthub",
[]
......@@ -18,7 +19,12 @@ export function useFetchJobsList(filters) {
useEffect(() => {
/* Extend job object with metadata necessary for display and search */
if (data && data.length) {
let extendedJobs = extendJobsObjects(data); //remove nulls due to potential error while extending
const dataAtLocation = jobLocation
? data.filter((datum) =>
datum.field_jobs_duty_station.includes(jobLocation)
)
: data;
let extendedJobs = extendJobsObjects(dataAtLocation); //remove nulls due to potential error while extending
setExtendedJobs(extendedJobs);
//LOCATIONS WITH JOB COUNT: count jobs at each location
......
@import 'package.variables.scss';
@import "package.variables.scss";
/*
*
* styles.css
......@@ -13,14 +13,14 @@
* Build time: #{map-get($componentInfo, 'buildTimeStamp')}
*/
@import 'node_modules/@visual-framework/vf-sass-config/index.scss';
@import 'node_modules/@visual-framework/vf-sass-config/mixins/vf-utility-mixins.scss';
@import "node_modules/@visual-framework/vf-sass-config/index.scss";
@import "node_modules/@visual-framework/vf-sass-config/mixins/vf-utility-mixins.scss";
// Note, you can also do relative imports
// @import '../vf-sass-config/index.scss';
/* All Visual Framework Font components */
$vf-font-plex-mono-prefix: '../../../../assets';
@import 'node_modules/@visual-framework/vf-font-plex-mono/vf-font-plex-mono.scss';
$vf-font-plex-mono-prefix: "../../../../assets";
@import "node_modules/@visual-framework/vf-font-plex-mono/vf-font-plex-mono.scss";
// @import 'node_modules/@visual-framework/vf-font-plex-sans/vf-font-plex-sans.scss';
// @import 'node_modules/@visual-framework/vf-font-plex-sans/vf-font-plex-sans.scss';
......@@ -28,25 +28,25 @@ $vf-font-plex-mono-prefix: '../../../../assets';
// Here we're not making use of vf-core's Sass include paths, and there's an issue around
// Plex's nesting of assets, so we manually import each font weight.
// This is also an annoyance present in IBM Plex's distro https://www.npmjs.com/package/@ibm/plex
$vf-font-plex-sans-prefix: '../../../../assets';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/bold/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/extralight/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/light/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/regular/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/medium/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/semibold/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/text/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/thin/_index.scss';
$vf-font-plex-sans-prefix: '../../../../../assets';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/bold/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/extralight/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/light/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/medium/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/semibold/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/text/italic/_index.scss';
@import 'node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/thin/italic/_index.scss';
$vf-font-plex-sans-prefix: "../../../../assets";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/bold/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/extralight/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/italic/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/light/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/regular/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/medium/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/semibold/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/text/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/thin/_index.scss";
$vf-font-plex-sans-prefix: "../../../../../assets";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/bold/italic/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/extralight/italic/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/light/italic/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/medium/italic/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/semibold/italic/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/text/italic/_index.scss";
@import "node_modules/@visual-framework/vf-font-plex-sans/assets/scss/sans/thin/italic/_index.scss";
html,
button {
......@@ -58,70 +58,70 @@ button {
/* Visual Framework content compatibility
* We put this first so it will have the least specificity
*/
@import 'node_modules/@visual-framework/vf-content/vf-content.scss';
@import "node_modules/@visual-framework/vf-content/vf-content.scss";
/* All Visual Framework grids */
// vf-grid-page is deprecated, use vf-body instead
// @import 'vf-grid-page/vf-grid-page.scss';
@import 'node_modules/@visual-framework/vf-body/vf-body.scss';
@import 'node_modules/@visual-framework/vf-grid/vf-grid.scss';
@import 'node_modules/@visual-framework/vf-cluster/vf-cluster.scss';
@import 'node_modules/@visual-framework/vf-stack/vf-stack.scss';
@import 'node_modules/@visual-framework/vf-flag/vf-flag.scss';
@import 'node_modules/@visual-framework/vf-sidebar/vf-sidebar.scss';
@import "node_modules/@visual-framework/vf-body/vf-body.scss";
@import "node_modules/@visual-framework/vf-grid/vf-grid.scss";
@import "node_modules/@visual-framework/vf-cluster/vf-cluster.scss";
@import "node_modules/@visual-framework/vf-stack/vf-stack.scss";
@import "node_modules/@visual-framework/vf-flag/vf-flag.scss";
@import "node_modules/@visual-framework/vf-sidebar/vf-sidebar.scss";
@import 'node_modules/@visual-framework/embl-grid/embl-grid.scss';
@import "node_modules/@visual-framework/embl-grid/embl-grid.scss";
/* All Visual Framework Elements */
@import 'node_modules/@visual-framework/vf-badge/vf-badge.scss';
@import 'node_modules/@visual-framework/vf-collapse/vf-collapse.scss';
@import 'node_modules/@visual-framework/vf-link/vf-link.scss';
@import "node_modules/@visual-framework/vf-badge/vf-badge.scss";
@import "node_modules/@visual-framework/vf-collapse/vf-collapse.scss";
@import "node_modules/@visual-framework/vf-link/vf-link.scss";
// @import 'node_modules/@visual-framework/vf-logo/vf-logo.scss';
// @import 'node_modules/@visual-framework/vf-embed/vf-embed.scss';
// @import 'node_modules/@visual-framework/embl-logo/embl-logo.scss';
// @import 'node_modules/@visual-framework/vf-explainer/vf-explainer.scss';
// @import 'node_modules/@visual-framework/vf-form/vf-form.scss';
@import 'node_modules/@visual-framework/vf-button/vf-button.scss';
@import 'node_modules/@visual-framework/vf-figure/vf-figure.scss';
@import 'node_modules/@visual-framework/vf-list/vf-list.scss';
@import 'node_modules/@visual-framework/vf-blockquote/vf-blockquote.scss';
@import 'node_modules/@visual-framework/vf-divider/vf-divider.scss';
@import 'node_modules/@visual-framework/embl-conditional-edit/embl-conditional-edit.scss';
@import "node_modules/@visual-framework/vf-button/vf-button.scss";
@import "node_modules/@visual-framework/vf-figure/vf-figure.scss";
@import "node_modules/@visual-framework/vf-list/vf-list.scss";
@import "node_modules/@visual-framework/vf-blockquote/vf-blockquote.scss";
@import "node_modules/@visual-framework/vf-divider/vf-divider.scss";
@import "node_modules/@visual-framework/embl-conditional-edit/embl-conditional-edit.scss";
// /* All Visual Framework Blocks */
@import 'node_modules/@visual-framework/vf-box/vf-box.scss';
@import "node_modules/@visual-framework/vf-box/vf-box.scss";
@import 'node_modules/@visual-framework/vf-breadcrumbs/vf-breadcrumbs.scss';
@import 'node_modules/@visual-framework/vf-breadcrumbs/vf-breadcrumbs--with-related.scss';
@import "node_modules/@visual-framework/vf-breadcrumbs/vf-breadcrumbs.scss";
@import "node_modules/@visual-framework/vf-breadcrumbs/vf-breadcrumbs--with-related.scss";
@import 'node_modules/@visual-framework/vf-card/vf-card.scss';
@import 'node_modules/@visual-framework/vf-card-container/vf-card-container.scss';
@import "node_modules/@visual-framework/vf-card/vf-card.scss";
@import "node_modules/@visual-framework/vf-card-container/vf-card-container.scss";
// @import 'node_modules/@visual-framework/vf-discussion/vf-discussion.scss';
@import 'node_modules/@visual-framework/vf-code-example/vf-code-example.scss';
@import 'node_modules/@visual-framework/vf-page-header/vf-page-header.scss';
@import 'node_modules/@visual-framework/vf-link-list/vf-link-list.scss';
@import 'node_modules/@visual-framework/vf-header/vf-header.scss';
@import 'node_modules/@visual-framework/vf-hero/vf-hero.scss';
@import "node_modules/@visual-framework/vf-code-example/vf-code-example.scss";
@import "node_modules/@visual-framework/vf-page-header/vf-page-header.scss";
@import "node_modules/@visual-framework/vf-link-list/vf-link-list.scss";
@import "node_modules/@visual-framework/vf-header/vf-header.scss";
@import "node_modules/@visual-framework/vf-hero/vf-hero.scss";
@import 'node_modules/@visual-framework/vf-lede/vf-lede.scss';
@import "node_modules/@visual-framework/vf-lede/vf-lede.scss";
// @import 'node_modules/@visual-framework/vf-masthead/vf-masthead.scss';
@import 'node_modules/@visual-framework/vf-navigation/vf-navigation.scss';
@import 'node_modules/@visual-framework/vf-navigation/vf-navigation--additional.scss';
@import "node_modules/@visual-framework/vf-navigation/vf-navigation.scss";
@import "node_modules/@visual-framework/vf-navigation/vf-navigation--additional.scss";
@import 'node_modules/@visual-framework/vf-section-header/vf-section-header.scss';
@import "node_modules/@visual-framework/vf-section-header/vf-section-header.scss";
// @import 'node_modules/@visual-framework/vf-activity-list/vf-activity-list.scss';
// @import 'node_modules/@visual-framework/vf-article-meta-information/vf-article-meta-information.scss';
// @import 'node_modules/@visual-framework/vf-profile/vf-profile.scss';
@import 'node_modules/@visual-framework/vf-search/vf-search.scss';
@import "node_modules/@visual-framework/vf-search/vf-search.scss";
// @import 'node_modules/@visual-framework/vf-social-links/vf-social-links.scss';
......@@ -136,9 +136,9 @@ button {
// @import 'node_modules/@visual-framework/vf-video/vf-video.scss';
// @import 'node_modules/@visual-framework/vf-video-teaser/vf-video-teaser.scss';
@import 'node_modules/@visual-framework/vf-global-header/vf-global-header.scss';
@import 'node_modules/@visual-framework/vf-tabs/vf-tabs.scss';
@import 'node_modules/@visual-framework/vf-table/vf-table.scss';
@import "node_modules/@visual-framework/vf-global-header/vf-global-header.scss";
@import "node_modules/@visual-framework/vf-tabs/vf-tabs.scss";
@import "node_modules/@visual-framework/vf-table/vf-table.scss";
// @import 'node_modules/@visual-framework/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.scss';
// @import 'node_modules/@visual-framework/vf-pagination/vf-pagination.scss';
// @import 'node_modules/@visual-framework/vf-pagination/vf-pagination--full.scss';
......@@ -146,20 +146,20 @@ button {
/* All Visual Framework Containers */
// @import 'node_modules/@visual-framework/vf-activity-group/vf-activity-group.scss';
@import 'node_modules/@visual-framework/vf-intro/vf-intro.scss';
@import 'node_modules/@visual-framework/embl-content-hub-loader/embl-content-hub-loader.scss';
@import "node_modules/@visual-framework/vf-intro/vf-intro.scss";
@import "node_modules/@visual-framework/embl-content-hub-loader/embl-content-hub-loader.scss";
@import 'node_modules/@visual-framework/vf-banner/vf-banner.scss';
@import "node_modules/@visual-framework/vf-banner/vf-banner.scss";
// @import 'node_modules/@visual-framework/vf-banner/vf-banner--phase.scss';
@import 'node_modules/@visual-framework/vf-banner/vf-banner--alerts.scss';
@import 'node_modules/@visual-framework/vf-banner/vf-banner--fixed.scss';
@import 'node_modules/@visual-framework/vf-banner/vf-banner--gdpr.scss';
@import "node_modules/@visual-framework/vf-banner/vf-banner--alerts.scss";
@import "node_modules/@visual-framework/vf-banner/vf-banner--fixed.scss";
@import "node_modules/@visual-framework/vf-banner/vf-banner--gdpr.scss";
// @import 'node_modules/@visual-framework/vf-details/vf-details.scss';
// @import 'node_modules/@visual-framework/vf-news-container/vf-news-container.scss';
// @import 'node_modules/@visual-framework/vf-video-container/vf-video-container.scss';
@import 'node_modules/@visual-framework/vf-footer/vf-footer.scss';
@import "node_modules/@visual-framework/vf-footer/vf-footer.scss";
// @import 'node_modules/@visual-framework/vf-show-more/vf-show-more.scss';
......@@ -181,22 +181,21 @@ button {
/* All Visual Framework Utility and high-specificity components */
@import 'node_modules/@visual-framework/vf-heading/vf-heading.scss';
@import 'node_modules/@visual-framework/vf-text/vf-text.scss';
@import 'node_modules/@visual-framework/vf-u-fullbleed/vf-u-fullbleed.scss';
@import '@visual-framework/vf-utility-classes/vf-utility-classes.scss';
@import '@visual-framework/vf-form__helper/vf-form__helper.scss';
@import '@visual-framework/vf-form__input/vf-form__input.scss';
@import '@visual-framework/vf-form__legend/vf-form__legend.scss';
@import '@visual-framework/vf-form__fieldset/vf-form__fieldset.scss';
@import '@visual-framework/vf-form__select/vf-form__select.scss';
@import '@visual-framework/vf-form__checkbox/vf-form__checkbox.scss';
@import '@visual-framework/vf-form__radio/vf-form__radio.scss';
@import '@visual-framework/vf-form__textarea/vf-form__textarea.scss';
@import '@visual-framework/vf-form__item/vf-form__item.scss';
@import '@visual-framework/vf-form__label/vf-form__label.scss';
@import "node_modules/@visual-framework/vf-heading/vf-heading.scss";
@import "node_modules/@visual-framework/vf-text/vf-text.scss";
@import "node_modules/@visual-framework/vf-u-fullbleed/vf-u-fullbleed.scss";
@import "@visual-framework/vf-utility-classes/vf-utility-classes.scss";
@import "@visual-framework/vf-form__helper/vf-form__helper.scss";
@import "@visual-framework/vf-form__input/vf-form__input.scss";
@import "@visual-framework/vf-form__legend/vf-form__legend.scss";
@import "@visual-framework/vf-form__fieldset/vf-form__fieldset.scss";
@import "@visual-framework/vf-form__select/vf-form__select.scss";
@import "@visual-framework/vf-form__checkbox/vf-form__checkbox.scss";
@import "@visual-framework/vf-form__radio/vf-form__radio.scss";
@import "@visual-framework/vf-form__textarea/vf-form__textarea.scss";
@import "@visual-framework/vf-form__item/vf-form__item.scss";
@import "@visual-framework/vf-form__label/vf-form__label.scss";
// This is a demonstration of vf-core's ability to warn and proceed on missing
// sass imports
......@@ -204,4 +203,4 @@ button {
// If you have any local overrides, put them in:
// @import '../vf-sample/vf-sample.scss';
@import '../vf-local-overrides/vf-local-overrides.scss';
@import "../vf-local-overrides/vf-local-overrides.scss";
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment