Skip to content

Commit

Permalink
simplify templates for specific usecase
Browse files Browse the repository at this point in the history
  • Loading branch information
@lenadax
lenadax committed Oct 18, 2024
1 parent c104408 commit 9ead083
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 124 deletions.
10 changes: 0 additions & 10 deletions src/components/Searchkit/Results.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,25 +46,15 @@ class Results extends Component {
const { total } = this.props.currentResultsState.data;
return total ? (
<div className="fnresults">
<Grid>
<Grid.Column width={4}>
<Count />
</Grid.Column>
<Grid.Column width={6}>
<Sort
className="sortdropdown"
values={this.props.sortValues}
label={(cmp) => <> {cmp}</>}
overridableId="volto"
/>
</Grid.Column>
</Grid>
<Grid style={{ padding: '2em 0' }}>
<ResultsMultiLayout overridableId="elasticsearch" />
</Grid>
<Grid verticalAlign="middle" textAlign="center">
<Pagination options={{ size: 'small' }} />
</Grid>
</div>
) : null;
}
Expand Down
13 changes: 0 additions & 13 deletions src/components/Searchkit/SearchBarSection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@ const _SearchBarSection = (props) => {
},
};

const onResetHandler = (event) => {
onQueryChanged(payloadOfReset);
};

return (
<div className="searchbar-wrapper">
<SearchBar
Expand All @@ -35,15 +31,6 @@ const _SearchBarSection = (props) => {
content: intl.formatMessage(messages.search),
}}
/>
<IconSemantic
basic="true"
icon="true"
name="delete"
className={
props.currentQueryState.queryString.length ? 'selected' : 'unselected'
}
onClick={(event) => onResetHandler(event)}
/>
</div>
);
};
Expand Down
195 changes: 94 additions & 101 deletions src/components/Views/FacetedSearch.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,20 @@ import { FormattedMessage, useIntl } from 'react-intl';
import { Portal } from 'react-portal';
import { OverridableContext } from 'react-overridable';

import svgRight from '@plone/volto/icons/right-key.svg';
import svgLeft from '@plone/volto/icons/left-key.svg';
// import { Icon } from '@plone/volto/components';

import {
Button,
Container,
Dropdown,
Grid,
// Grid,
Header,
Icon as IconSemantic,
Item,
Label,
Pagination as Paginator,
Pagination,
Segment,
} from 'semantic-ui-react';
import {
Expand Down Expand Up @@ -492,7 +496,6 @@ const CustomBucketAggregationValuesElement = (props) => {
className={isSelected ? 'isSelected right floated' : 'right floated'}
key={`${bucket.key}-description`}
>
<Icon name={clearSVG} size="15px" />
</Item>
) : null}
<Item
Expand Down Expand Up @@ -583,54 +586,59 @@ const customPaginationElement = (props) => {
};

return pages > 1 ? (
<Paginator
activePage={currentPage}
totalPages={pages}
onPageChange={_onPageChange}
boundaryRange={boundaryRangeCount}
siblingRange={siblingRangeCount}
ellipsisItem={
showEllipsis
? {
content: <IconSemantic name="ellipsis horizontal" />,
icon: true,
}
: null
}
firstItem={
showFirst
? {
content: <Icon name={firstAngle} size="20px" />,
icon: true,
}
: null
}
lastItem={
showLast
? {
content: <Icon name={lastAngle} size="20px" />,
icon: true,
}
: null
}
prevItem={
showPrev
? {
content: <Icon name={leftAngle} size="20px" />,
icon: true,
}
: null
}
nextItem={
showNext
? {
content: <Icon name={rightAngle} size="20px" />,
icon: true,
}
: null
}
size={size}
/>
<div className="pagination-wrapper-bottom">
<Pagination
className="desktop-pagination"
activePage={currentPage}
totalPages={pages}
onPageChange={_onPageChange}
boundaryRange={boundaryRangeCount}
siblingRange={siblingRangeCount}
firstItem={null}
lastItem={null}
prevItem={{
content: (
<Icon name={svgLeft} size="16px" />
),
icon: false,
'aria-disabled': !showPrev,
className: !showPrev ? 'disabled' : null,
}}
nextItem={{
content: (
<Icon name={svgRight} size="16px" />
),
icon: false,
'aria-disabled': !showNext,
className: !showNext ? 'disabled' : null,
}} />
<Pagination
className="mobile-pagination"
activePage={currentPage}
totalPages={pages}
onPageChange={_onPageChange}
boundaryRange={boundaryRangeCount}
siblingRange={siblingRangeCount}
firstItem={null}
lastItem={null}
prevItem={{
content: (
<Icon name={svgLeft} size="16px" />
),
icon: false,
'aria-disabled': !showPrev,
className: !showPrev ? 'disabled' : null,
}}
nextItem={{
content: (
<Icon name={svgRight} size="16px" />
),
icon: false,
'aria-disabled': !showNext,
className: !showNext ? 'disabled' : null,
}}
/>
</div>
) : null;
};

Expand Down Expand Up @@ -738,59 +746,44 @@ const FacetedSearch = ({ data, overriddenComponents }) => {
document.querySelectorAll(relocation)[0]
}
>
<SearchBarSection />
<div className="kitsearch-header-wrapper">
<SearchBarSection />
<div className="bucketaggregations">
{Object.keys(facet_fields_object)?.map((facet) => (
<BucketAggregation
key={facet}
title={facet_fields_object[facet]}
agg={{
field: facet,
aggName: `${facet}_agg`,
}}
/>
))}
</div>
</div>
</Portal>
) : (
<Grid relaxed style={{ padding: '1em 0' }}>
<Grid.Row>
<Grid.Column width={12}>
<SearchBarSection />
</Grid.Column>
</Grid.Row>
</Grid>
<div className="kitsearch-header-wrapper">
<SearchBarSection />
<div className="bucketaggregations">
{Object.keys(facet_fields_object)?.map((facet) => (
<BucketAggregation
key={facet}
title={facet_fields_object[facet]}
agg={{
field: facet,
aggName: `${facet}_agg`,
}}
/>
))}
</div>
</div>
)}

<Grid relaxed style={{ padding: '1em 0' }}>
<Grid.Row className={'facetedsearch_sections ' + filterLayout}>
<Grid.Column width={12}>
<SectionsSearch
search_sections={search_sections}
allow_search_excluded_sections={
allow_search_excluded_sections
}
show_filter_for_excluded_sections={
show_filter_for_excluded_sections
}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row className={'facetedsearch_filter ' + filterLayout}>
<Grid.Column width={12}>
<div className="bucketaggregations">
{Object.keys(facet_fields_object)?.map((facet) => (
<BucketAggregation
key={facet}
title={facet_fields_object[facet]}
agg={{
field: facet,
aggName: `${facet}_agg`,
}}
/>
))}
</div>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={12}>
<ResultsLoader>
<ErrorCp />
<EmptyResults />
<OnResults sortValues={sortValues} />
</ResultsLoader>
{/* <StateLogger /> */}
</Grid.Column>
</Grid.Row>
</Grid>
<ResultsLoader>
<ErrorCp />
<EmptyResults />
<OnResults sortValues={sortValues} />
</ResultsLoader>
</Container>
</ReactSearchKit>
</OverridableContext.Provider>
Expand Down

0 comments on commit 9ead083

Please sign in to comment.