Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IBX-7209: Clear results button in UDW Search #1188

Merged
merged 7 commits into from
Feb 27, 2024
Merged

IBX-7209: Clear results button in UDW Search #1188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2baa39d
IBX-7209: Clear results button in UDW Search
tischsoic Feb 22, 2024
1bc378c
adjust for no-results screen
tischsoic Feb 22, 2024
fcc4ba9
eslint fix
tischsoic Feb 22, 2024
2050a2c
use first tab from configuration as fallback
tischsoic Feb 22, 2024
6c54d70
remove empty className
tischsoic Feb 22, 2024
a336b0c
use initial active tab from props as fallback
tischsoic Feb 22, 2024
62c99e5
fix after QA
tischsoic Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions src/bundle/Resources/public/scss/ui/modules/universal-discovery/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@

&__content {
display: flex;
flex-direction: column;
overflow: auto;
width: 100%;
flex-shrink: 1;
Expand Down Expand Up @@ -69,16 +70,24 @@
}

&__table-header {
flex-direction: column;
align-items: flex-start;
display: grid;
grid-template: 'title clear-search-btn' 'subtitle subtitle';
justify-content: start;
margin-top: calculateRem(16px);
}

&__table-tile {
grid-area: title;
font-size: $ibexa-text-font-size-extra-large;
}

&__clear-results-btn {
grid-area: clear-search-btn;
margin-left: calculateRem(16px);
}

&__table-subtitle {
grid-area: subtitle;
display: inline-block;
margin-bottom: calculateRem(8px);
font-size: $ibexa-text-font-size-medium;
Expand Down
5 changes: 5 additions & 0 deletions src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,11 @@
<target state="new">Results for “%search_phrase%” (%total%)</target>
<note>key: search.search_results</note>
</trans-unit>
<trans-unit id="b358d77d29a6b9869920d03666b1ebf0c13e21d2" resname="search.search_results.clear_btn.label">
<source>Clear results</source>
<target state="new">Clear results</target>
<note>key: search.search_results.clear_btn.label</note>
</trans-unit>
<trans-unit id="3ae249fbdcae8da1215537a7407789511ff8fd3b" resname="search.search_results.in_language">
<source>in %search_language%</source>
<target state="new">in %search_language%</target>
Expand Down
56 changes: 39 additions & 17 deletions src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import ContentTable from '../content-table/content.table';
import Filters from '../filters/filters';
import SearchTags from './search.tags';
import { useSearchByQueryFetch } from '../../hooks/useSearchByQueryFetch';
import { AllowedContentTypesContext, MarkedLocationIdContext, SearchTextContext } from '../../universal.discovery.module';
import { ActiveTabContext, AllowedContentTypesContext, MarkedLocationIdContext, SearchTextContext } from '../../universal.discovery.module';
import { createCssClassNames } from '../../../common/helpers/css.class.names';
import { getAdminUiConfig, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';

Expand All @@ -34,7 +34,8 @@ const Search = ({ itemsPerPage }) => {
const adminUiConfig = getAdminUiConfig();
const allowedContentTypes = useContext(AllowedContentTypesContext);
const [, setMarkedLocationId] = useContext(MarkedLocationIdContext);
const [searchText] = useContext(SearchTextContext);
const [, setActiveTab, previousActiveTab, initialActiveTab] = useContext(ActiveTabContext);
const [searchText, setSearchText] = useContext(SearchTextContext);
const [offset, setOffset] = useState(0);
const [selectedContentTypes, dispatchSelectedContentTypesAction] = useReducer(selectedContentTypesReducer, []);
const [selectedSection, setSelectedSection] = useState('');
Expand Down Expand Up @@ -66,6 +67,12 @@ const Search = ({ itemsPerPage }) => {
searchByQuery(searchText, contentTypes, selectedSection, selectedSubtree, itemsPerPage, offset, selectedLanguage);
};
const changePage = (pageIndex) => setOffset(pageIndex * itemsPerPage);
const handleResultsClear = () => {
const activeTabNew = previousActiveTab ?? initialActiveTab;

setActiveTab(activeTabNew);
setSearchText('');
};
const renderCustomTableHeader = () => {
const selectedLanguageName = languages.mappings[selectedLanguage].name;
const searchResultsTitle = Translator.trans(
Expand All @@ -81,11 +88,23 @@ const Search = ({ itemsPerPage }) => {
{ search_language: selectedLanguageName },
'ibexa_universal_discovery_widget',
);
const searchResultsClearBtnLabel = Translator.trans(
/*@Desc("Clear results")*/ 'search.search_results.clear_btn.label',
{},
'ibexa_universal_discovery_widget',
);

return (
<>
<div className="ibexa-table-header c-search__table-header">
<div className="ibexa-table-header__headline c-search__table-title">{searchResultsTitle}</div>
<button
type="button"
className="btn ibexa-btn ibexa-btn--secondary ibexa-btn--small c-search__clear-results-btn"
onClick={handleResultsClear}
>
{searchResultsClearBtnLabel}
</button>
<div className="c-search__table-subtitle">{searchResultsSubtitle}</div>
<div className="c-search__search-tags">
<SearchTags />
Expand Down Expand Up @@ -136,23 +155,26 @@ const Search = ({ itemsPerPage }) => {
];

return (
<div className="c-search__no-results">
<img className="" src="/bundles/ibexaadminui/img/no-results.svg" />
<h2 className="c-search__no-results-title">{noResultsLabel}</h2>
<div className="c-search__no-results-subtitle">
{noResultsHints.map((hint, key) => (
<div
key={key} // eslint-disable-line react/no-array-index-key
className="c-search__no-results-hint"
>
<div className="c-search__no-results-hint-icon-wrapper">
<Icon name="approved" extraClasses="ibexa-icon--small-medium" />
<>
{renderCustomTableHeader()}
<div className="c-search__no-results">
<img src="/bundles/ibexaadminui/img/no-results.svg" />
<h2 className="c-search__no-results-title">{noResultsLabel}</h2>
<div className="c-search__no-results-subtitle">
{noResultsHints.map((hint, key) => (
<div
key={key} // eslint-disable-line react/no-array-index-key
className="c-search__no-results-hint"
>
<div className="c-search__no-results-hint-icon-wrapper">
<Icon name="approved" extraClasses="ibexa-icon--small-medium" />
</div>
<div className="c-search__no-results-hint-text">{hint}</div>
</div>
<div className="c-search__no-results-hint-text">{hint}</div>
</div>
))}
))}
</div>
</div>
</div>
</>
);
}
};
Expand Down
14 changes: 12 additions & 2 deletions src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,15 @@ const UniversalDiscoveryModule = (props) => {
const defaultMarkedLocationId = props.startingLocationId || props.rootLocationId;
const abortControllerRef = useRef();
const dropdownPortalRef = useRef();
const [activeTab, setActiveTab] = useState(props.activeTab);
const [{ activeTab, previousActiveTab }, setActiveTabsData] = useState({
activeTab: props.activeTab,
previousActiveTab: null,
});
const setActiveTab = (activeTabNew) =>
setActiveTabsData(({ activeTab: activeTabOld }) => ({
activeTab: activeTabNew,
previousActiveTab: activeTabOld,
}));
const [sorting, setSorting] = useState(props.activeSortClause);
const [sortOrder, setSortOrder] = useState(props.activeSortOrder);
const [currentView, setCurrentView] = useState(props.activeView);
Expand Down Expand Up @@ -442,7 +450,9 @@ const UniversalDiscoveryModule = (props) => {
<MultipleConfigContext.Provider value={[props.multiple, props.multipleItemsLimit]}>
<ContainersOnlyContext.Provider value={props.containersOnly}>
<AllowedContentTypesContext.Provider value={props.allowedContentTypes}>
<ActiveTabContext.Provider value={[activeTab, setActiveTab]}>
<ActiveTabContext.Provider
value={[activeTab, setActiveTab, previousActiveTab, props.activeTab]}
>
<TabsContext.Provider value={tabs}>
<TabsConfigContext.Provider value={props.tabsConfig}>
<TitleContext.Provider value={props.title}>
Expand Down
Loading