Skip to content

Commit a2e53cb

Browse files
tischsoictischsoic
committed
IBX-9599: empty table row and no search results component (#1458)
1 parent 2873a9d commit a2e53cb

File tree

7 files changed

+136
-48
lines changed

7 files changed

+136
-48
lines changed

‎src/bundle/Resources/public/scss/ui/modules/_universal.discovery.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
@import 'universal-discovery/selected.locations.item';
3030
@import 'universal-discovery/grid';
3131
@import 'universal-discovery/breadcrumbs';
32+
@import 'universal-discovery/search.no.results';
3233
@import 'universal-discovery/search';
3334
@import 'universal-discovery/search.tags';
3435
@import 'universal-discovery/content.table.item';

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_search.no.results.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.c-search-no-results {
2+
grid-area: results;
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
padding-top: calculateRem(50px);
7+
8+
@import '../../../mixins/search-form-no-results';
9+
}

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_search.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,4 @@
9999
.c-content-table {
100100
width: 100%;
101101
}
102-
103-
@import '../../../mixins/search-form-no-results';
104102
}

‎src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,11 @@
411411
<target state="new">Select Location to swap with</target>
412412
<note>key: swap.title</note>
413413
</trans-unit>
414+
<trans-unit id="03cbaa7ecd3e035072635bdac4fda304a14129ae" resname="table.empty_table_body_row.info_text.default">
415+
<source>Table is empty</source>
416+
<target state="new">Table is empty</target>
417+
<note>key: table.empty_table_body_row.info_text.default</note>
418+
</trans-unit>
414419
<trans-unit id="75247b44eb33fe5c35d9b5d8770bd76a15be7747" resname="view_switcher.view">
415420
<source>View</source>
416421
<target state="new">View</target>

‎src/bundle/ui-dev/src/modules/common/table/empty.table.body.row.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { getTranslator } from '../../../../../Resources/public/js/scripts/helpers/context.helper';
5+
6+
import TableBodyRow from './table.body.row';
7+
8+
const EmptyTableBodyRow = ({
9+
extraClasses,
10+
infoText: customInfoText,
11+
actionText,
12+
extraActions,
13+
emptyTableImageSrc: customEmptyTableImageSrc,
14+
colspan,
15+
}) => {
16+
const Translator = getTranslator();
17+
const defaultEmptyTableInfoText = Translator.trans(
18+
/*@Desc("Table is empty")*/ 'table.empty_table_body_row.info_text.default',
19+
{},
20+
'ibexa_universal_discovery_widget',
21+
);
22+
const infoText = customInfoText ?? defaultEmptyTableInfoText;
23+
const emptyTableImageSrc = customEmptyTableImageSrc ?? '/bundles/ibexaadminui/img/ibexa-empty-table.svg';
24+
25+
return (
26+
<TableBodyRow extraClasses={extraClasses}>
27+
<td className="ibexa-table__empty-table-cell" colSpan={colspan}>
28+
<img className="ibexa-table__empty-table-image" src={emptyTableImageSrc} alt={infoText} />
29+
<div className="ibexa-table__empty-table-text">
30+
<div className="ibexa-table__empty-table-info-text">{infoText}</div>
31+
{actionText && <div className="ibexa-table__empty-table-action-text">{actionText}</div>}
32+
{extraActions}
33+
</div>
34+
</td>
35+
</TableBodyRow>
36+
);
37+
};
38+
39+
EmptyTableBodyRow.propTypes = {
40+
extraClasses: PropTypes.string,
41+
infoText: PropTypes.string,
42+
actionText: PropTypes.string,
43+
extraActions: PropTypes.element,
44+
emptyTableImageSrc: PropTypes.string,
45+
colspan: PropTypes.number,
46+
};
47+
48+
EmptyTableBodyRow.defaultProps = {
49+
extraClasses: '',
50+
infoText: null,
51+
actionText: null,
52+
extraActions: null,
53+
emptyTableImageSrc: null,
54+
colspan: 9999,
55+
};
56+
57+
export default EmptyTableBodyRow;

‎src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.js‎

Lines changed: 2 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ export const SelectedSectionContext = createContext();
77
export const SelectedSubtreeContext = createContext();
88
export const SelectedSubtreeBreadcrumbsContext = createContext();
99

10-
import Icon from '../../../common/icon/icon';
1110
import Spinner from '../../../common/spinner/spinner';
1211
import ContentTable from '../content-table/content.table';
1312
import Filters from '../filters/filters';
@@ -17,6 +16,7 @@ import { useSearchByQueryFetch } from '../../hooks/useSearchByQueryFetch';
1716
import { ActiveTabContext, AllowedContentTypesContext, MarkedLocationIdContext, SearchTextContext } from '../../universal.discovery.module';
1817
import { createCssClassNames } from '../../../common/helpers/css.class.names';
1918
import { getAdminUiConfig, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
19+
import SearchNoResults from './search.no.results';
2020

2121
const selectedContentTypesReducer = (state, action) => {
2222
switch (action.type) {
@@ -127,54 +127,10 @@ const Search = ({ itemsPerPage }) => {
127127
/>
128128
);
129129
} else if (!!data.items) {
130-
const noResultsLabel = Translator.trans(
131-
/*@Desc("No results found for %query%")*/ 'search.no_results',
132-
{ query: searchText },
133-
'ibexa_universal_discovery_widget',
134-
);
135-
const noResultsHints = [
136-
Translator.trans(
137-
/*@Desc("Check the spelling of keywords.")*/ 'search.no_results.hint.check_spelling',
138-
{},
139-
'ibexa_universal_discovery_widget',
140-
),
141-
Translator.trans(
142-
/*@Desc("Try more general keywords.")*/ 'search.no_results.hint.more_general',
143-
{},
144-
'ibexa_universal_discovery_widget',
145-
),
146-
Translator.trans(
147-
/*@Desc("Try different keywords.")*/ 'search.no_results.hint.different_kewords',
148-
{},
149-
'ibexa_universal_discovery_widget',
150-
),
151-
Translator.trans(
152-
/*@Desc("Try fewer keywords. Reducing keywords results in more matches.")*/ 'search.no_results.hint.fewer_keywords',
153-
{},
154-
'ibexa_universal_discovery_widget',
155-
),
156-
];
157-
158130
return (
159131
<>
160132
{renderCustomTableHeader()}
161-
<div className="c-search__no-results">
162-
<img src="/bundles/ibexaadminui/img/no-results.svg" />
163-
<h2 className="c-search__no-results-title">{noResultsLabel}</h2>
164-
<div className="c-search__no-results-subtitle">
165-
{noResultsHints.map((hint, key) => (
166-
<div
167-
key={key} // eslint-disable-line react/no-array-index-key
168-
className="c-search__no-results-hint"
169-
>
170-
<div className="c-search__no-results-hint-icon-wrapper">
171-
<Icon name="approved" extraClasses="ibexa-icon--small-medium" />
172-
</div>
173-
<div className="c-search__no-results-hint-text">{hint}</div>
174-
</div>
175-
))}
176-
</div>
177-
</div>
133+
<SearchNoResults searchText={searchText} />
178134
</>
179135
);
180136
}

‎src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.no.results.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import Icon from '../../../common/icon/icon';
5+
import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
6+
7+
const SearchNoResults = ({ searchText }) => {
8+
const Translator = getTranslator();
9+
const noResultsLabel = Translator.trans(
10+
/*@Desc("No results found for %query%")*/ 'search.no_results',
11+
{ query: searchText },
12+
'ibexa_universal_discovery_widget',
13+
);
14+
const noResultsHints = [
15+
Translator.trans(
16+
/*@Desc("Check the spelling of keywords.")*/ 'search.no_results.hint.check_spelling',
17+
{},
18+
'ibexa_universal_discovery_widget',
19+
),
20+
Translator.trans(
21+
/*@Desc("Try more general keywords.")*/ 'search.no_results.hint.more_general',
22+
{},
23+
'ibexa_universal_discovery_widget',
24+
),
25+
Translator.trans(
26+
/*@Desc("Try different keywords.")*/ 'search.no_results.hint.different_kewords',
27+
{},
28+
'ibexa_universal_discovery_widget',
29+
),
30+
Translator.trans(
31+
/*@Desc("Try fewer keywords. Reducing keywords results in more matches.")*/ 'search.no_results.hint.fewer_keywords',
32+
{},
33+
'ibexa_universal_discovery_widget',
34+
),
35+
];
36+
37+
return (
38+
<div className="c-search-no-results">
39+
<img src="/bundles/ibexaadminui/img/no-results.svg" />
40+
<h2 className="c-search-no-results__no-results-title">{noResultsLabel}</h2>
41+
<div className="c-search-no-results__no-results-subtitle">
42+
{noResultsHints.map((hint, key) => (
43+
<div
44+
key={key} // eslint-disable-line react/no-array-index-key
45+
className="c-search-no-results__no-results-hint"
46+
>
47+
<div className="c-search-no-results__no-results-hint-icon-wrapper">
48+
<Icon name="approved" extraClasses="ibexa-icon--small-medium" />
49+
</div>
50+
<div className="c-search-no-results__no-results-hint-text">{hint}</div>
51+
</div>
52+
))}
53+
</div>
54+
</div>
55+
);
56+
};
57+
58+
SearchNoResults.propTypes = {
59+
searchText: PropTypes.string.isRequired,
60+
};
61+
62+
export default SearchNoResults;

0 commit comments

Comments
 (0)