-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #25 from plone/develop
Develop
- Loading branch information
Showing
29 changed files
with
846 additions
and
188 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
frontend/src/addons/volto-conf2023-theme/src/components/Blocks/SearchBlock/FiltersModal.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import React from 'react'; | ||
| import { Modal, TransitionablePortal } from 'semantic-ui-react'; | ||
| import { Button, Icon } from 'semantic-ui-react'; | ||
| import { isEmpty } from 'lodash'; | ||
|
|
||
| function FiltersModal(props) { | ||
| let { children, size = 'fullscreen', data, facets = {} } = props; | ||
| const [open, setOpen] = React.useState(false); | ||
| const definedFacets = data.facets || []; | ||
|
|
||
| function openModal() { | ||
| setOpen(true); | ||
| } | ||
| function closeModal() { | ||
| setOpen(false); | ||
| } | ||
| const totalFilters = definedFacets.filter( | ||
| ({ field }) => | ||
| field && | ||
| Object.keys(facets).includes(field.value) && | ||
| !isEmpty(facets[field.value]), | ||
| ).length; | ||
| const totalfiltertext = totalFilters ? ' ' + totalFilters : ''; | ||
| return ( | ||
| <> | ||
| <Button className="ui button secondary" onClick={openModal}> | ||
| <Icon name="filter"></Icon> | ||
| {data.facetsTitle + totalfiltertext} | ||
| </Button> | ||
| <TransitionablePortal | ||
| open={open} | ||
| transition={{ animation: 'fade left', duration: 1000 }} | ||
| > | ||
| <Modal | ||
| open={true} | ||
| size={size} | ||
| id="fullscreen-filter-modal" | ||
| onClose={() => closeModal()} | ||
| > | ||
| <div className="modal modal-filters" id="filters_modal"> | ||
| <div className="modal-filters-background"> | ||
| <div className="modal-filters-container"> | ||
| <div className="modal-filters-header"> | ||
| <div className="modal-filters-title"> | ||
| <h3 className="modal-title">{data.facetsTitle}</h3> | ||
| </div> | ||
| <div className="modal-filters-right"> | ||
| <div className="modal-close modal-filters-close"> | ||
| <span | ||
| className="icon-close" | ||
| aria-label="Close" | ||
| onClick={() => closeModal()} | ||
| onKeyDown={() => closeModal()} | ||
| tabIndex="0" | ||
| role="button" | ||
| ></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="modal-filters-body"> | ||
| <div className="modal-filters-dropdown"> | ||
| <div className="modal-filters-dropdown-container"> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| <div className="apply-filters-button"> | ||
| <button | ||
| className="ui button" | ||
| id="" | ||
| onClick={() => closeModal()} | ||
| onKeyDown={() => closeModal()} | ||
| > | ||
| Apply filters | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Modal> | ||
| </TransitionablePortal> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default FiltersModal; |
128 changes: 128 additions & 0 deletions
128
...end/src/addons/volto-conf2023-theme/src/components/Blocks/SearchBlock/PloneConfFacets.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import { Button, Grid, Segment } from 'semantic-ui-react'; | ||
| import { Facets } from '@plone/volto/components/manage/Blocks/Search/components'; | ||
| import { defineMessages, useIntl } from 'react-intl'; | ||
| import FiltersModal from './FiltersModal'; | ||
| import SearchInput from '@plone/volto/components/manage/Blocks/Search/components/SearchInput'; | ||
| import React from 'react'; | ||
| import { flushSync } from 'react-dom'; | ||
|
|
||
| const messages = defineMessages({ | ||
| searchButtonText: { | ||
| id: 'Search', | ||
| defaultMessage: 'Search', | ||
| }, | ||
| }); | ||
|
|
||
| const FacetWrapper = ({ children }) => ( | ||
| <Segment basic className="facet"> | ||
| {children} | ||
| </Segment> | ||
| ); | ||
|
|
||
| function setFacetsHandler(setFacets, onTriggerSearch, searchedText) { | ||
| return (f) => { | ||
| flushSync(() => { | ||
| setFacets(f); | ||
| onTriggerSearch(searchedText || '', f); | ||
| }); | ||
| }; | ||
| } | ||
|
|
||
| const PloneConfFacets = (props) => { | ||
| const { | ||
| children, | ||
| data, | ||
| facets, | ||
| setFacets, | ||
| onTriggerSearch, | ||
| searchedText, // search text for previous search | ||
| searchText, // search text currently being entered (controlled input) | ||
| isEditMode, | ||
| querystring = {}, | ||
| // searchData, | ||
| // mode = 'view', | ||
| // variation, | ||
| } = props; | ||
| const { showSearchButton } = data; | ||
| const isLive = !showSearchButton; | ||
| const intl = useIntl(); | ||
| if (querystring?.sortable_indexes?.effective?.title) { | ||
| querystring.sortable_indexes.effective.title = 'Publication date'; | ||
| } | ||
| if (querystring?.sortable_indexes?.sortable_title?.title) { | ||
| querystring.sortable_indexes.sortable_title.title = 'Sort by title'; | ||
| } | ||
| if (querystring?.sortable_indexes?.modified?.title) { | ||
| querystring.sortable_indexes.modified.title = 'Last edited'; | ||
| } | ||
| return ( | ||
| <Grid className="searchBlock-facets right-column-facets" stackable> | ||
| {data?.headline && ( | ||
| <Grid.Row> | ||
| <Grid.Column> | ||
| {data.headline && <h2 className="headline">{data.headline}</h2>} | ||
| </Grid.Column> | ||
| </Grid.Row> | ||
| )} | ||
|
|
||
| <div className="filter-search-wrapper"> | ||
| {(Object.keys(data).includes('showSearchInput') | ||
| ? data.showSearchInput | ||
| : true) && ( | ||
| <div className="search-wrapper"> | ||
| <SearchInput {...props} isLive={isLive} /> | ||
| {data.showSearchButton && ( | ||
| <Button | ||
| primary | ||
| onClick={() => onTriggerSearch(searchText)} | ||
| aria-label={ | ||
| data.searchButtonLabel || | ||
| intl.formatMessage(messages.searchButtonText) | ||
| } | ||
| > | ||
| <span className="icon-zoom"></span> | ||
| </Button> | ||
| )} | ||
| </div> | ||
| )} | ||
| <div className="filters"> | ||
| <div className="search-results-count-sort search-filters"> | ||
| {data.facets?.length && ( | ||
| <FiltersModal | ||
| data={data} | ||
| facets={facets} | ||
| setFacets={setFacetsHandler( | ||
| setFacets, | ||
| onTriggerSearch, | ||
| searchedText, | ||
| )} | ||
| > | ||
| <div id="right-modal-facets" className="facets"> | ||
| <Facets | ||
| querystring={querystring} | ||
| data={data} | ||
| facets={facets} | ||
| isEditMode={isEditMode} | ||
| setFacets={setFacetsHandler( | ||
| setFacets, | ||
| onTriggerSearch, | ||
| searchedText, | ||
| )} | ||
| facetWrapper={FacetWrapper} | ||
| /> | ||
| </div> | ||
| </FiltersModal> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Grid.Row> | ||
| <Grid.Column mobile={12} tablet={12} computer={12}> | ||
| {children} | ||
| </Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| ); | ||
| }; | ||
|
|
||
| export default PloneConfFacets; |
Oops, something went wrong.