@blaze-cms/plugin-search-ui 0.133.0-admin-updates.8 → 0.133.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -28
- package/lib/components/SearchAdmin/SearchAdmin.js +21 -71
- package/lib/components/SearchAdmin/SearchAdmin.js.map +1 -1
- package/lib/components/SearchAdmin/SearchResults/SearchResults.js +29 -81
- package/lib/components/SearchAdmin/SearchResults/SearchResults.js.map +1 -1
- package/lib/components/useSearch/useSearch.js +7 -13
- package/lib/components/useSearch/useSearch.js.map +1 -1
- package/lib/components/useSearchResults/useSearchResults.js +11 -13
- package/lib/components/useSearchResults/useSearchResults.js.map +1 -1
- package/lib-es/components/SearchAdmin/SearchAdmin.js +12 -44
- package/lib-es/components/SearchAdmin/SearchAdmin.js.map +1 -1
- package/lib-es/components/SearchAdmin/SearchResults/SearchResults.js +14 -54
- package/lib-es/components/SearchAdmin/SearchResults/SearchResults.js.map +1 -1
- package/lib-es/components/useSearch/useSearch.js +4 -7
- package/lib-es/components/useSearch/useSearch.js.map +1 -1
- package/lib-es/components/useSearchResults/useSearchResults.js +5 -7
- package/lib-es/components/useSearchResults/useSearchResults.js.map +1 -1
- package/package.json +6 -6
- package/src/components/SearchAdmin/SearchAdmin.js +42 -64
- package/src/components/SearchAdmin/SearchResults/SearchResults.js +44 -122
- package/src/components/useSearch/useSearch.js +1 -6
- package/src/components/useSearchResults/useSearchResults.js +4 -13
- package/lib/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js +0 -112
- package/lib/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js.map +0 -1
- package/lib/components/SearchAdmin/SearchAdminSideBar/index.js +0 -12
- package/lib/components/SearchAdmin/SearchAdminSideBar/index.js.map +0 -1
- package/lib-es/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js +0 -76
- package/lib-es/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js.map +0 -1
- package/lib-es/components/SearchAdmin/SearchAdminSideBar/index.js +0 -3
- package/lib-es/components/SearchAdmin/SearchAdminSideBar/index.js.map +0 -1
- package/src/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js +0 -88
- package/src/components/SearchAdmin/SearchAdminSideBar/index.js +0 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
function ownKeys(
|
|
3
|
-
function _objectSpread(
|
|
2
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
4
|
import { useState, useEffect } from 'react';
|
|
5
5
|
import useSearch from '../useSearch';
|
|
6
6
|
function useSearchResults({
|
|
@@ -9,8 +9,6 @@ function useSearchResults({
|
|
|
9
9
|
entities,
|
|
10
10
|
fields
|
|
11
11
|
}) {
|
|
12
|
-
const [currentResults, setCurrentResults] = useState([]);
|
|
13
|
-
const [allResults, setAllResults] = useState([]);
|
|
14
12
|
const [{
|
|
15
13
|
searchedValue,
|
|
16
14
|
loading,
|
|
@@ -24,12 +22,14 @@ function useSearchResults({
|
|
|
24
22
|
entities,
|
|
25
23
|
fields
|
|
26
24
|
});
|
|
25
|
+
const [currentResults, setCurrentResults] = useState([]);
|
|
26
|
+
const [allResults, setAllResults] = useState([]);
|
|
27
27
|
useEffect(() => {
|
|
28
28
|
if (currentResults.length !== results.length) {
|
|
29
29
|
setAllResults([...allResults, ...results]);
|
|
30
30
|
setCurrentResults(results);
|
|
31
31
|
}
|
|
32
|
-
}, [allResults, currentResults, results]);
|
|
32
|
+
}, [allResults, currentResults, currentResults.length, results]);
|
|
33
33
|
const clearList = params => {
|
|
34
34
|
setAllResults([]);
|
|
35
35
|
setParams(_objectSpread(_objectSpread({}, params), {}, {
|
|
@@ -42,8 +42,6 @@ function useSearchResults({
|
|
|
42
42
|
return [{
|
|
43
43
|
loading,
|
|
44
44
|
results: allResults,
|
|
45
|
-
currentResults,
|
|
46
|
-
newResults: results,
|
|
47
45
|
total
|
|
48
46
|
}, setQueryParams];
|
|
49
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSearchResults.js","names":["useState","useEffect","useSearch","useSearchResults","queryKey","resultKeys","entities","fields","
|
|
1
|
+
{"version":3,"file":"useSearchResults.js","names":["useState","useEffect","useSearch","useSearchResults","queryKey","resultKeys","entities","fields","searchedValue","loading","data","results","total","setParams","currentResults","setCurrentResults","allResults","setAllResults","length","clearList","params","_objectSpread","offset","setQueryParams","value"],"sources":["../../../src/components/useSearchResults/useSearchResults.js"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport useSearch from '../useSearch';\n\nfunction useSearchResults({ queryKey, resultKeys, entities, fields }) {\n const [\n {\n searchedValue,\n loading,\n data: { results, total }\n },\n setParams\n ] = useSearch({ queryKey, resultKeys, entities, fields });\n const [currentResults, setCurrentResults] = useState([]);\n const [allResults, setAllResults] = useState([]);\n\n useEffect(\n () => {\n if (currentResults.length !== results.length) {\n setAllResults([...allResults, ...results]);\n setCurrentResults(results);\n }\n },\n [allResults, currentResults, currentResults.length, results]\n );\n\n const clearList = params => {\n setAllResults([]);\n setParams({ ...params, offset: 0 });\n };\n\n const setQueryParams = params => {\n params.value !== searchedValue ? clearList(params) : setParams(params);\n };\n\n return [{ loading, results: allResults, total }, setQueryParams];\n}\n\nexport default useSearchResults;\n"],"mappings":";;;AAAA,SAASA,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAC3C,OAAOC,SAAS,MAAM,cAAc;AAEpC,SAASC,gBAAgBA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC,QAAQ;EAAEC;AAAO,CAAC,EAAE;EACpE,MAAM,CACJ;IACEC,aAAa;IACbC,OAAO;IACPC,IAAI,EAAE;MAAEC,OAAO;MAAEC;IAAM;EACzB,CAAC,EACDC,SAAS,CACV,GAAGX,SAAS,CAAC;IAAEE,QAAQ;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;EAAO,CAAC,CAAC;EACzD,MAAM,CAACO,cAAc,EAAEC,iBAAiB,CAAC,GAAGf,QAAQ,CAAC,EAAE,CAAC;EACxD,MAAM,CAACgB,UAAU,EAAEC,aAAa,CAAC,GAAGjB,QAAQ,CAAC,EAAE,CAAC;EAEhDC,SAAS,CACP,MAAM;IACJ,IAAIa,cAAc,CAACI,MAAM,KAAKP,OAAO,CAACO,MAAM,EAAE;MAC5CD,aAAa,CAAC,CAAC,GAAGD,UAAU,EAAE,GAAGL,OAAO,CAAC,CAAC;MAC1CI,iBAAiB,CAACJ,OAAO,CAAC;IAC5B;EACF,CAAC,EACD,CAACK,UAAU,EAAEF,cAAc,EAAEA,cAAc,CAACI,MAAM,EAAEP,OAAO,CAC7D,CAAC;EAED,MAAMQ,SAAS,GAAGC,MAAM,IAAI;IAC1BH,aAAa,CAAC,EAAE,CAAC;IACjBJ,SAAS,CAAAQ,aAAA,CAAAA,aAAA,KAAMD,MAAM;MAAEE,MAAM,EAAE;IAAC,EAAE,CAAC;EACrC,CAAC;EAED,MAAMC,cAAc,GAAGH,MAAM,IAAI;IAC/BA,MAAM,CAACI,KAAK,KAAKhB,aAAa,GAAGW,SAAS,CAACC,MAAM,CAAC,GAAGP,SAAS,CAACO,MAAM,CAAC;EACxE,CAAC;EAED,OAAO,CAAC;IAAEX,OAAO;IAAEE,OAAO,EAAEK,UAAU;IAAEJ;EAAM,CAAC,EAAEW,cAAc,CAAC;AAClE;AAEA,eAAepB,gBAAgB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/plugin-search-ui",
|
|
3
|
-
"version": "0.133.0-
|
|
3
|
+
"version": "0.133.0-alpha.4",
|
|
4
4
|
"description": "Blaze plugin search ui",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
},
|
|
28
28
|
"license": "GPL-3.0",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@blaze-cms/admin-ui-utils": "0.
|
|
31
|
-
"@blaze-cms/core-errors": "0.
|
|
32
|
-
"@blaze-cms/setup-ui": "0.
|
|
30
|
+
"@blaze-cms/admin-ui-utils": "^0.132.0",
|
|
31
|
+
"@blaze-cms/core-errors": "^0.131.0",
|
|
32
|
+
"@blaze-cms/setup-ui": "^0.131.0",
|
|
33
33
|
"@blaze-react/button": "0.5.19",
|
|
34
34
|
"@blaze-react/input": "0.5.30",
|
|
35
35
|
"@blaze-react/utils": "0.5.15",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"react-tiny-virtual-list": "2.2.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@blaze-cms/core-ui": "0.
|
|
43
|
+
"@blaze-cms/core-ui": "^0.131.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"@apollo/client": "3.x",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"lib/*",
|
|
53
53
|
"lib-es/*"
|
|
54
54
|
],
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "9b00075ee8315f7b787ef9ac0077c496cce5983b"
|
|
56
56
|
}
|
|
@@ -1,28 +1,21 @@
|
|
|
1
1
|
import React, { useState, useRef, useEffect } from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
|
-
import { useDebounce } from '@blaze-react/utils/lib/customHooks';
|
|
4
3
|
import useLocalStorage from '../useLocalStorage';
|
|
5
4
|
import SearchBar from './SearchBar';
|
|
6
5
|
import RecentSearches from './RecentSearches';
|
|
7
6
|
import SearchResults from './SearchResults';
|
|
8
7
|
import TriggerModal from './TriggerModal';
|
|
9
|
-
import SearchAdminSideBar from './SearchAdminSideBar';
|
|
10
8
|
import useSearchResults from '../useSearchResults';
|
|
11
9
|
import { SEARCH_ADMIN } from '../../constants';
|
|
12
10
|
|
|
13
11
|
const SearchAdmin = () => {
|
|
14
12
|
const [searchTerm, setSearchTerm] = useState('');
|
|
15
|
-
const [openSearchSideBar, setOpenSearchSideBar] = useState(true);
|
|
16
|
-
const [entityValues, setEntityValues] = useState([]);
|
|
17
13
|
const [recentSearches, setRecentSearches] = useLocalStorage('recentSearches', []);
|
|
18
14
|
const [displaySearchModalFrame, setDisplaySearchModalFrame] = useState(false);
|
|
19
15
|
const [enableResults, setEnableResults] = useState(true);
|
|
20
16
|
const searchInputRef = useRef(null);
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
const [{ loading, newResults: results = [], total }, setQueryParams] = useSearchResults({
|
|
24
|
-
queryKey: SEARCH_ADMIN,
|
|
25
|
-
entities
|
|
17
|
+
const [{ loading, results, total }, setQueryParams] = useSearchResults({
|
|
18
|
+
queryKey: SEARCH_ADMIN
|
|
26
19
|
});
|
|
27
20
|
|
|
28
21
|
useEffect(
|
|
@@ -37,13 +30,11 @@ const SearchAdmin = () => {
|
|
|
37
30
|
const handleSearchTerm = ({ target: { value } }) => {
|
|
38
31
|
setSearchTerm(value);
|
|
39
32
|
};
|
|
40
|
-
|
|
41
33
|
const toggleSearchModal = () => {
|
|
42
34
|
setSearchTerm(null);
|
|
43
35
|
setEnableResults(false);
|
|
44
36
|
setDisplaySearchModalFrame(!displaySearchModalFrame);
|
|
45
37
|
};
|
|
46
|
-
|
|
47
38
|
const search = ({ value }) => {
|
|
48
39
|
if (!value) return;
|
|
49
40
|
!enableResults && setEnableResults(true);
|
|
@@ -77,71 +68,58 @@ const SearchAdmin = () => {
|
|
|
77
68
|
'modal--show': displaySearchModalFrame
|
|
78
69
|
});
|
|
79
70
|
|
|
80
|
-
const searchModalSideBarClassName = classnames('modal__search__sidebar', {
|
|
81
|
-
'modal__search__sidebar--close': !openSearchSideBar
|
|
82
|
-
});
|
|
83
|
-
|
|
84
71
|
const isEmptySearchTermAndData = !searchTerm && !results.length;
|
|
85
72
|
const isEmptySearchTermnAndDisabledResults = !searchTerm && !enableResults;
|
|
86
73
|
const shouldDisplayRecentSearches =
|
|
87
74
|
isEmptySearchTermAndData || isEmptySearchTermnAndDisabledResults;
|
|
88
75
|
|
|
89
|
-
const
|
|
90
|
-
const entityExists = entityValues.some(entity => entity.id === newEntity.id);
|
|
91
|
-
if (entityExists) {
|
|
92
|
-
setQueryParams({ value: searchTerm, offset: 0 });
|
|
93
|
-
setEntityValues(entityValues.filter(entity => entity.id !== newEntity.id));
|
|
94
|
-
} else {
|
|
95
|
-
setQueryParams({ value: searchTerm, offset: 0 });
|
|
96
|
-
setEntityValues([...entityValues, newEntity]);
|
|
97
|
-
}
|
|
98
|
-
};
|
|
76
|
+
const showResults = enableResults && results.length;
|
|
99
77
|
|
|
100
78
|
return (
|
|
101
79
|
<div className="search search--header">
|
|
102
80
|
<TriggerModal toggleSearchModal={toggleSearchModal} />
|
|
103
81
|
<div className={searchModalResultsClassName}>
|
|
104
82
|
{displaySearchModalFrame && (
|
|
105
|
-
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
<div className="modal__header modal__header--search">
|
|
116
|
-
<SearchBar
|
|
117
|
-
toggleSearchModal={toggleSearchModal}
|
|
118
|
-
handleKeyDown={handleKeyDown}
|
|
119
|
-
searchInputRef={searchInputRef}
|
|
120
|
-
handleSearchTerm={handleSearchTerm}
|
|
121
|
-
searchTerm={searchTerm}
|
|
122
|
-
search={() => search({ value: searchTerm })}
|
|
123
|
-
/>
|
|
124
|
-
</div>
|
|
125
|
-
{shouldDisplayRecentSearches && (
|
|
126
|
-
<RecentSearches
|
|
127
|
-
recentSearches={recentSearches}
|
|
128
|
-
handleSearchTerm={handleSearchTerm}
|
|
129
|
-
search={search}
|
|
130
|
-
/>
|
|
131
|
-
)}
|
|
132
|
-
{enableResults && (
|
|
133
|
-
<SearchResults
|
|
134
|
-
currentValue={searchTerm}
|
|
135
|
-
entities={entities}
|
|
136
|
-
loading={loading}
|
|
137
|
-
results={results}
|
|
138
|
-
total={total}
|
|
139
|
-
setQueryParams={setQueryParams}
|
|
140
|
-
closeModal={toggleSearchModal}
|
|
141
|
-
/>
|
|
142
|
-
)}
|
|
83
|
+
<>
|
|
84
|
+
<div className="modal__header modal__header--search">
|
|
85
|
+
<SearchBar
|
|
86
|
+
toggleSearchModal={toggleSearchModal}
|
|
87
|
+
handleKeyDown={handleKeyDown}
|
|
88
|
+
searchInputRef={searchInputRef}
|
|
89
|
+
handleSearchTerm={handleSearchTerm}
|
|
90
|
+
searchTerm={searchTerm}
|
|
91
|
+
search={() => search({ value: searchTerm })}
|
|
92
|
+
/>
|
|
143
93
|
</div>
|
|
144
|
-
|
|
94
|
+
{shouldDisplayRecentSearches ? (
|
|
95
|
+
<RecentSearches
|
|
96
|
+
recentSearches={recentSearches}
|
|
97
|
+
handleSearchTerm={handleSearchTerm}
|
|
98
|
+
search={search}
|
|
99
|
+
/>
|
|
100
|
+
) : (
|
|
101
|
+
<>
|
|
102
|
+
{!showResults && (
|
|
103
|
+
<div className="list list--search">
|
|
104
|
+
<div className="header header--list">
|
|
105
|
+
<h2>No Results</h2>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
)}
|
|
109
|
+
</>
|
|
110
|
+
)}
|
|
111
|
+
{showResults && (
|
|
112
|
+
<SearchResults
|
|
113
|
+
currentValue={searchTerm}
|
|
114
|
+
searchTerm={searchTerm}
|
|
115
|
+
loading={loading}
|
|
116
|
+
results={results}
|
|
117
|
+
total={total}
|
|
118
|
+
setQueryParams={setQueryParams}
|
|
119
|
+
closeModal={toggleSearchModal}
|
|
120
|
+
/>
|
|
121
|
+
)}
|
|
122
|
+
</>
|
|
145
123
|
)}
|
|
146
124
|
</div>
|
|
147
125
|
</div>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
2
2
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
3
|
-
import React, { useState
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import VirtualList from 'react-tiny-virtual-list';
|
|
6
6
|
import { withRouter } from 'react-router-dom';
|
|
@@ -13,7 +13,6 @@ import {
|
|
|
13
13
|
|
|
14
14
|
const SearchResults = ({
|
|
15
15
|
currentValue,
|
|
16
|
-
entities,
|
|
17
16
|
loading,
|
|
18
17
|
results,
|
|
19
18
|
total,
|
|
@@ -23,45 +22,12 @@ const SearchResults = ({
|
|
|
23
22
|
}) => {
|
|
24
23
|
const [verifiedRanges, setVerifiedRanges] = useState([]);
|
|
25
24
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
26
|
-
const [currentResults, setCurrentResults] = useState('');
|
|
27
|
-
const [allResults, setAllResults] = useState([]);
|
|
28
|
-
const [currentParams, setCurrentParams] = useState('');
|
|
29
|
-
|
|
30
|
-
useEffect(
|
|
31
|
-
() => {
|
|
32
|
-
if (!loading) {
|
|
33
|
-
const newResults = results.map(({ id }) => id).join(',');
|
|
34
|
-
if (currentResults !== newResults) {
|
|
35
|
-
const newParams = `${currentValue},${entities.join(',')}`;
|
|
36
|
-
if (newParams !== currentParams) {
|
|
37
|
-
setAllResults(results);
|
|
38
|
-
setCurrentParams(newParams);
|
|
39
|
-
if (verifiedRanges.length) setVerifiedRanges([]);
|
|
40
|
-
} else {
|
|
41
|
-
setAllResults(allResults.concat(results));
|
|
42
|
-
}
|
|
43
|
-
setCurrentResults(newResults);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
[
|
|
48
|
-
allResults,
|
|
49
|
-
currentParams,
|
|
50
|
-
currentResults,
|
|
51
|
-
currentValue,
|
|
52
|
-
entities,
|
|
53
|
-
loading,
|
|
54
|
-
results,
|
|
55
|
-
total,
|
|
56
|
-
verifiedRanges.length
|
|
57
|
-
]
|
|
58
|
-
);
|
|
59
25
|
|
|
60
26
|
const handleRenderedItems = async ({ startIndex }) => {
|
|
61
|
-
const rowsLength =
|
|
27
|
+
const rowsLength = results.length;
|
|
62
28
|
const loadIndex = Math.floor(rowsLength / 2) - SEARCH_RESULTS_OVER_SCAN_BUFFER;
|
|
63
29
|
if (loadIndex > 0 && loadIndex < startIndex && !verifiedRanges.includes(loadIndex)) {
|
|
64
|
-
setQueryParams({ value: currentValue, offset:
|
|
30
|
+
setQueryParams({ value: currentValue, offset: results.length });
|
|
65
31
|
setVerifiedRanges([...verifiedRanges, loadIndex]);
|
|
66
32
|
setCurrentIndex(startIndex + SEARCH_RESULTS_OVER_SCAN_BUFFER);
|
|
67
33
|
}
|
|
@@ -83,96 +49,53 @@ const SearchResults = ({
|
|
|
83
49
|
return `${day}.${month}.${year}`;
|
|
84
50
|
};
|
|
85
51
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
52
|
+
return (
|
|
53
|
+
<>
|
|
54
|
+
{loading && <span>Loading...</span>}
|
|
55
|
+
<div className="modal__content modal__content--search">
|
|
89
56
|
<div className="header header--list">
|
|
90
|
-
<h2>
|
|
57
|
+
<h2>{total} results</h2>
|
|
91
58
|
</div>
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
id,
|
|
113
|
-
docType,
|
|
114
|
-
updated,
|
|
115
|
-
name,
|
|
116
|
-
entityIdentifier,
|
|
117
|
-
published,
|
|
118
|
-
created,
|
|
119
|
-
status
|
|
120
|
-
} = allResults[index];
|
|
121
|
-
const updatedDate = updated ? getDateFormat(updated) : null;
|
|
122
|
-
const createdDate = created ? getDateFormat(created) : null;
|
|
123
|
-
const publishedDate = published ? getDateFormat(published) : null;
|
|
124
|
-
return (
|
|
125
|
-
<div key={index} style={style} className="list__item--resultWrapper">
|
|
126
|
-
<div className="list__item list__item--result">
|
|
127
|
-
<div className="list__item-row list__item-row--result">
|
|
128
|
-
<span className="list__item-identifier">{entityIdentifier}</span>
|
|
129
|
-
<a
|
|
130
|
-
href={getNavigationRoute({
|
|
131
|
-
id,
|
|
132
|
-
docType
|
|
133
|
-
})}
|
|
134
|
-
onClick={() =>
|
|
135
|
-
navigate({
|
|
59
|
+
<VirtualList
|
|
60
|
+
width="100%"
|
|
61
|
+
height={window.innerHeight - SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST}
|
|
62
|
+
itemCount={results.length}
|
|
63
|
+
itemSize={SEARCH_RESULTS_ITEM_SIZE}
|
|
64
|
+
overscanCount={SEARCH_RESULTS_OVER_SCAN_BUFFER}
|
|
65
|
+
scrollToIndex={currentIndex}
|
|
66
|
+
onItemsRendered={handleRenderedItems}
|
|
67
|
+
renderItem={({ index, style }) => {
|
|
68
|
+
const { id, docType, updated, name } = results[index];
|
|
69
|
+
const updatedDate = updated ? getDateFormat(updated) : null;
|
|
70
|
+
return (
|
|
71
|
+
<div key={index} style={style} className="list__item--resultWrapper">
|
|
72
|
+
<div className="list__item list__item--result">
|
|
73
|
+
<div className="list__item-row list__item-row--result">
|
|
74
|
+
<span className="badge badge--primary">
|
|
75
|
+
{docType} {updatedDate}
|
|
76
|
+
</span>
|
|
77
|
+
<a
|
|
78
|
+
href={getNavigationRoute({
|
|
136
79
|
id,
|
|
137
80
|
docType
|
|
138
|
-
})
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
{publishedDate}
|
|
149
|
-
</span>
|
|
150
|
-
)}
|
|
151
|
-
<span>
|
|
152
|
-
<b>Created: </b>
|
|
153
|
-
{createdDate}
|
|
154
|
-
</span>
|
|
155
|
-
<span>
|
|
156
|
-
<b>Updated: </b>
|
|
157
|
-
{updatedDate}
|
|
158
|
-
</span>
|
|
159
|
-
</div>
|
|
160
|
-
<div className="list__item-status">
|
|
161
|
-
{status && (
|
|
162
|
-
<span>
|
|
163
|
-
<b>Status: </b>
|
|
164
|
-
{status}
|
|
165
|
-
</span>
|
|
166
|
-
)}
|
|
81
|
+
})}
|
|
82
|
+
onClick={() =>
|
|
83
|
+
navigate({
|
|
84
|
+
id,
|
|
85
|
+
docType
|
|
86
|
+
})
|
|
87
|
+
}
|
|
88
|
+
className="list__item-text list__item-text--result">
|
|
89
|
+
{name}
|
|
90
|
+
</a>
|
|
167
91
|
</div>
|
|
168
92
|
</div>
|
|
169
93
|
</div>
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
</div>
|
|
94
|
+
);
|
|
95
|
+
}}
|
|
96
|
+
/>
|
|
97
|
+
</div>
|
|
98
|
+
</>
|
|
176
99
|
);
|
|
177
100
|
};
|
|
178
101
|
|
|
@@ -183,8 +106,7 @@ SearchResults.propTypes = {
|
|
|
183
106
|
setQueryParams: PropTypes.func.isRequired,
|
|
184
107
|
closeModal: PropTypes.func.isRequired,
|
|
185
108
|
history: PropTypes.object.isRequired,
|
|
186
|
-
currentValue: PropTypes.string.isRequired
|
|
187
|
-
entities: PropTypes.array.isRequired
|
|
109
|
+
currentValue: PropTypes.string.isRequired
|
|
188
110
|
};
|
|
189
111
|
|
|
190
112
|
export default withRouter(SearchResults);
|
|
@@ -5,7 +5,6 @@ import searchQueries from '../../application/query';
|
|
|
5
5
|
function useSearch({ queryKey, resultKeys, entities = [], fields, extraFilters }) {
|
|
6
6
|
const [queryParams, setParams] = useState({ limit: 20, offset: 0, value: '' });
|
|
7
7
|
const [searchedValue, setSearchedValue] = useState(null);
|
|
8
|
-
const [previousEntities, setPreviousEntities] = useState([]);
|
|
9
8
|
const [previousOffset, setPreviousOffset] = useState(null);
|
|
10
9
|
const buildSearchQuery = searchQueries[queryKey];
|
|
11
10
|
|
|
@@ -36,14 +35,13 @@ function useSearch({ queryKey, resultKeys, entities = [], fields, extraFilters }
|
|
|
36
35
|
const { limit, offset, value } = queryParams;
|
|
37
36
|
const isNewValueSet = value && value !== searchedValue;
|
|
38
37
|
const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;
|
|
39
|
-
const notSameLength = previousEntities.length !== entities.length;
|
|
40
38
|
const parsedEntities = entities.length
|
|
41
39
|
? entities.map(entity => ({
|
|
42
40
|
match: { docType: entity }
|
|
43
41
|
}))
|
|
44
42
|
: [];
|
|
45
43
|
|
|
46
|
-
if (isNewValueSet || isNewOffsetSet
|
|
44
|
+
if (isNewValueSet || isNewOffsetSet) {
|
|
47
45
|
getSearchResults({
|
|
48
46
|
variables: {
|
|
49
47
|
limit,
|
|
@@ -74,7 +72,6 @@ function useSearch({ queryKey, resultKeys, entities = [], fields, extraFilters }
|
|
|
74
72
|
});
|
|
75
73
|
setSearchedValue(value);
|
|
76
74
|
setPreviousOffset(offset);
|
|
77
|
-
setPreviousEntities(entities);
|
|
78
75
|
}
|
|
79
76
|
},
|
|
80
77
|
[
|
|
@@ -87,8 +84,6 @@ function useSearch({ queryKey, resultKeys, entities = [], fields, extraFilters }
|
|
|
87
84
|
getSearchResults,
|
|
88
85
|
entities,
|
|
89
86
|
fields,
|
|
90
|
-
entities.length,
|
|
91
|
-
previousEntities.length,
|
|
92
87
|
extraFilters
|
|
93
88
|
]
|
|
94
89
|
);
|
|
@@ -2,8 +2,6 @@ import { useState, useEffect } from 'react';
|
|
|
2
2
|
import useSearch from '../useSearch';
|
|
3
3
|
|
|
4
4
|
function useSearchResults({ queryKey, resultKeys, entities, fields }) {
|
|
5
|
-
const [currentResults, setCurrentResults] = useState([]);
|
|
6
|
-
const [allResults, setAllResults] = useState([]);
|
|
7
5
|
const [
|
|
8
6
|
{
|
|
9
7
|
searchedValue,
|
|
@@ -12,6 +10,8 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
|
|
|
12
10
|
},
|
|
13
11
|
setParams
|
|
14
12
|
] = useSearch({ queryKey, resultKeys, entities, fields });
|
|
13
|
+
const [currentResults, setCurrentResults] = useState([]);
|
|
14
|
+
const [allResults, setAllResults] = useState([]);
|
|
15
15
|
|
|
16
16
|
useEffect(
|
|
17
17
|
() => {
|
|
@@ -20,7 +20,7 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
|
|
|
20
20
|
setCurrentResults(results);
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
|
-
[allResults, currentResults, results]
|
|
23
|
+
[allResults, currentResults, currentResults.length, results]
|
|
24
24
|
);
|
|
25
25
|
|
|
26
26
|
const clearList = params => {
|
|
@@ -32,16 +32,7 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
|
|
|
32
32
|
params.value !== searchedValue ? clearList(params) : setParams(params);
|
|
33
33
|
};
|
|
34
34
|
|
|
35
|
-
return [
|
|
36
|
-
{
|
|
37
|
-
loading,
|
|
38
|
-
results: allResults,
|
|
39
|
-
currentResults,
|
|
40
|
-
newResults: results,
|
|
41
|
-
total
|
|
42
|
-
},
|
|
43
|
-
setQueryParams
|
|
44
|
-
];
|
|
35
|
+
return [{ loading, results: allResults, total }, setQueryParams];
|
|
45
36
|
}
|
|
46
37
|
|
|
47
38
|
export default useSearchResults;
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
require("core-js/modules/es.array.iterator.js");
|
|
4
|
-
require("core-js/modules/es.string.iterator.js");
|
|
5
|
-
require("core-js/modules/es.weak-map.js");
|
|
6
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
|
7
|
-
require("core-js/modules/es.object.define-property.js");
|
|
8
|
-
require("core-js/modules/es.object.get-own-property-descriptor.js");
|
|
9
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
10
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
11
|
-
Object.defineProperty(exports, "__esModule", {
|
|
12
|
-
value: true
|
|
13
|
-
});
|
|
14
|
-
exports["default"] = void 0;
|
|
15
|
-
require("core-js/modules/es.array.filter.js");
|
|
16
|
-
require("core-js/modules/es.object.to-string.js");
|
|
17
|
-
require("core-js/modules/es.array.includes.js");
|
|
18
|
-
require("core-js/modules/es.string.includes.js");
|
|
19
|
-
require("core-js/modules/es.array.slice.js");
|
|
20
|
-
require("core-js/modules/es.array.map.js");
|
|
21
|
-
require("core-js/modules/es.array.some.js");
|
|
22
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
23
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
24
|
-
var _client = require("@apollo/client");
|
|
25
|
-
var _adminUiUtils = require("@blaze-cms/admin-ui-utils");
|
|
26
|
-
var _checkboxes = require("@blaze-react/checkboxes");
|
|
27
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
28
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
-
var MENU_PERMISSIONS = ['update:any', 'update:own', 'create:any', 'create:own'];
|
|
30
|
-
var SearchAdminSideBar = function SearchAdminSideBar(_ref) {
|
|
31
|
-
var searchModalSideBarClassName = _ref.searchModalSideBarClassName,
|
|
32
|
-
openSearchSideBar = _ref.openSearchSideBar,
|
|
33
|
-
setOpenSearchSideBar = _ref.setOpenSearchSideBar,
|
|
34
|
-
handleSetEntityValues = _ref.handleSetEntityValues,
|
|
35
|
-
entityValues = _ref.entityValues,
|
|
36
|
-
setEntityValues = _ref.setEntityValues;
|
|
37
|
-
var _useState = (0, _react.useState)(false),
|
|
38
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
39
|
-
loadMore = _useState2[0],
|
|
40
|
-
setLoadMore = _useState2[1];
|
|
41
|
-
var _useQuery = (0, _client.useQuery)((0, _adminUiUtils.getQuery)('GET_USER_EDITABLE_ENTITIES'), {
|
|
42
|
-
variables: {
|
|
43
|
-
canDoActions: MENU_PERMISSIONS
|
|
44
|
-
}
|
|
45
|
-
}),
|
|
46
|
-
_useQuery$data = _useQuery.data,
|
|
47
|
-
_useQuery$data2 = _useQuery$data === void 0 ? {} : _useQuery$data,
|
|
48
|
-
_useQuery$data2$getEn = _useQuery$data2.getEntitySchemas,
|
|
49
|
-
getEntitySchemas = _useQuery$data2$getEn === void 0 ? [] : _useQuery$data2$getEn,
|
|
50
|
-
loading = _useQuery.loading;
|
|
51
|
-
if (loading) return null;
|
|
52
|
-
var filteredEntitiesSchemas = getEntitySchemas.filter(function (entity) {
|
|
53
|
-
if (entity.extras && entity.extras.searchIndexes) {
|
|
54
|
-
return entity.extras.searchIndexes.includes('admin');
|
|
55
|
-
}
|
|
56
|
-
return false;
|
|
57
|
-
});
|
|
58
|
-
var entitiesToShow = filteredEntitiesSchemas.slice(0, loadMore ? filteredEntitiesSchemas.length : 5);
|
|
59
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
60
|
-
className: searchModalSideBarClassName
|
|
61
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
62
|
-
className: "modal__search__sidebar__button",
|
|
63
|
-
role: "button",
|
|
64
|
-
onClick: function onClick() {
|
|
65
|
-
return setOpenSearchSideBar(!openSearchSideBar);
|
|
66
|
-
}
|
|
67
|
-
}, /*#__PURE__*/_react["default"].createElement("i", {
|
|
68
|
-
className: "material-icons"
|
|
69
|
-
}, openSearchSideBar ? 'keyboard_arrow_left' : 'keyboard_arrow_right')), /*#__PURE__*/_react["default"].createElement("div", {
|
|
70
|
-
className: "modal__search__sidebar__container"
|
|
71
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
72
|
-
className: "modal__search__sidebar__wrapper"
|
|
73
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
74
|
-
className: "modal__search__sidebar__filters"
|
|
75
|
-
}, /*#__PURE__*/_react["default"].createElement("i", {
|
|
76
|
-
className: "material-icons modal__search__sidebar__icon"
|
|
77
|
-
}, "tune"), /*#__PURE__*/_react["default"].createElement("span", null, "Filters")), /*#__PURE__*/_react["default"].createElement("div", {
|
|
78
|
-
className: "modal__search__sidebar__clear",
|
|
79
|
-
role: "button",
|
|
80
|
-
onClick: function onClick() {
|
|
81
|
-
return setEntityValues([]);
|
|
82
|
-
}
|
|
83
|
-
}, /*#__PURE__*/_react["default"].createElement("span", null, "Clear all"), /*#__PURE__*/_react["default"].createElement("i", {
|
|
84
|
-
className: "material-icons modal__search__sidebar__icon--clear"
|
|
85
|
-
}, "replay"))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
86
|
-
className: "modal__search__sidebar__entity-list"
|
|
87
|
-
}, /*#__PURE__*/_react["default"].createElement("h1", null, "Entity list"), entitiesToShow.map(function (entity) {
|
|
88
|
-
return /*#__PURE__*/_react["default"].createElement(_checkboxes.Checkbox, {
|
|
89
|
-
checked: entityValues.some(function (_entity) {
|
|
90
|
-
return _entity.id === entity.id;
|
|
91
|
-
}),
|
|
92
|
-
label: entity.displayName,
|
|
93
|
-
id: entity.id,
|
|
94
|
-
name: entity.id,
|
|
95
|
-
onChange: function onChange(_ref2) {
|
|
96
|
-
var checked = _ref2.value.checked;
|
|
97
|
-
return handleSetEntityValues(entity);
|
|
98
|
-
}
|
|
99
|
-
});
|
|
100
|
-
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
101
|
-
className: "modal__search__sidebar__more",
|
|
102
|
-
role: "button",
|
|
103
|
-
onClick: function onClick() {
|
|
104
|
-
return setLoadMore(!loadMore);
|
|
105
|
-
}
|
|
106
|
-
}, /*#__PURE__*/_react["default"].createElement("i", {
|
|
107
|
-
className: "material-icons"
|
|
108
|
-
}, !loadMore ? 'navigate_next' : 'expand_less'), /*#__PURE__*/_react["default"].createElement("span", null, loadMore ? 'Less' : 'More')))));
|
|
109
|
-
};
|
|
110
|
-
var _default = SearchAdminSideBar;
|
|
111
|
-
exports["default"] = _default;
|
|
112
|
-
//# sourceMappingURL=SearchAdminSideBar.js.map
|