@blaze-cms/plugin-search-ui 0.127.0 → 0.128.0-admin-updates.0
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 +24 -0
- package/lib/components/SearchAdmin/RecentSearches/RecentSearches.js.map +1 -1
- package/lib/components/SearchAdmin/SearchAdmin.js +57 -12
- package/lib/components/SearchAdmin/SearchAdmin.js.map +1 -1
- package/lib/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js +113 -0
- package/lib/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js.map +1 -0
- package/lib/components/SearchAdmin/SearchAdminSideBar/index.js +12 -0
- package/lib/components/SearchAdmin/SearchAdminSideBar/index.js.map +1 -0
- package/lib/components/SearchAdmin/SearchBar/SearchBar.js.map +1 -1
- package/lib/components/SearchAdmin/SearchResults/SearchResults.js +34 -24
- package/lib/components/SearchAdmin/SearchResults/SearchResults.js.map +1 -1
- package/lib/components/SearchAdmin/TriggerModal/TriggerModal.js.map +1 -1
- package/lib/components/SearchPublishedContent/SearchPublishedContent.js +4 -4
- package/lib/components/SearchPublishedContent/SearchPublishedContent.js.map +1 -1
- package/lib/components/useSearch/useSearch.js +23 -17
- package/lib/components/useSearch/useSearch.js.map +1 -1
- package/lib/components/useSearchResults/useSearchResults.js +1 -19
- package/lib/components/useSearchResults/useSearchResults.js.map +1 -1
- package/lib-es/components/SearchAdmin/RecentSearches/RecentSearches.js.map +1 -1
- package/lib-es/components/SearchAdmin/SearchAdmin.js +31 -3
- package/lib-es/components/SearchAdmin/SearchAdmin.js.map +1 -1
- package/lib-es/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js +76 -0
- package/lib-es/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js.map +1 -0
- package/lib-es/components/SearchAdmin/SearchAdminSideBar/index.js +3 -0
- package/lib-es/components/SearchAdmin/SearchAdminSideBar/index.js.map +1 -0
- package/lib-es/components/SearchAdmin/SearchBar/SearchBar.js.map +1 -1
- package/lib-es/components/SearchAdmin/SearchResults/SearchResults.js +18 -6
- package/lib-es/components/SearchAdmin/SearchResults/SearchResults.js.map +1 -1
- package/lib-es/components/SearchAdmin/TriggerModal/TriggerModal.js.map +1 -1
- package/lib-es/components/useSearch/useSearch.js +5 -2
- package/lib-es/components/useSearch/useSearch.js.map +1 -1
- package/lib-es/components/useSearchResults/useSearchResults.js +1 -11
- package/lib-es/components/useSearchResults/useSearchResults.js.map +1 -1
- package/package.json +6 -6
- package/src/components/SearchAdmin/SearchAdmin.js +70 -40
- package/src/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js +88 -0
- package/src/components/SearchAdmin/SearchAdminSideBar/index.js +3 -0
- package/src/components/SearchAdmin/SearchResults/SearchResults.js +42 -6
- package/src/components/useSearch/useSearch.js +8 -2
- package/src/components/useSearchResults/useSearchResults.js +1 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TriggerModal.js","names":["React","PropTypes","TriggerModal","toggleSearchModal","propTypes","func","isRequired"],"sources":["../../../../src/components/SearchAdmin/TriggerModal/TriggerModal.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst TriggerModal = ({ toggleSearchModal }) => (\n <span\n role=\"button\"\n className=\"material-icons searchModal-search-icon\"\n onClick={toggleSearchModal}>\n search\n </span>\n);\n\nTriggerModal.propTypes = {\n toggleSearchModal: PropTypes.func.isRequired\n};\n\nexport default TriggerModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,MAAMC,YAAY,GAAG,CAAC;EAAEC;AAAkB,CAAC,kBACzC;EACE,IAAI,EAAC,QAAQ;EACb,SAAS,EAAC,wCAAwC;EAClD,OAAO,EAAEA;AAAkB,
|
|
1
|
+
{"version":3,"file":"TriggerModal.js","names":["React","PropTypes","TriggerModal","toggleSearchModal","propTypes","func","isRequired"],"sources":["../../../../src/components/SearchAdmin/TriggerModal/TriggerModal.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst TriggerModal = ({ toggleSearchModal }) => (\n <span\n role=\"button\"\n className=\"material-icons searchModal-search-icon\"\n onClick={toggleSearchModal}>\n search\n </span>\n);\n\nTriggerModal.propTypes = {\n toggleSearchModal: PropTypes.func.isRequired\n};\n\nexport default TriggerModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,MAAMC,YAAY,GAAG,CAAC;EAAEC;AAAkB,CAAC,kBACzC;EACE,IAAI,EAAC,QAAQ;EACb,SAAS,EAAC,wCAAwC;EAClD,OAAO,EAAEA;AAAkB,GAAC,QAE9B,CACD;AAEDD,YAAY,CAACE,SAAS,GAAG;EACvBD,iBAAiB,EAAEF,SAAS,CAACI,IAAI,CAACC;AACpC,CAAC;AAED,eAAeJ,YAAY"}
|
|
@@ -16,6 +16,7 @@ function useSearch({
|
|
|
16
16
|
value: ''
|
|
17
17
|
});
|
|
18
18
|
const [searchedValue, setSearchedValue] = useState(null);
|
|
19
|
+
const [en, setEn] = useState([]);
|
|
19
20
|
const [previousOffset, setPreviousOffset] = useState(null);
|
|
20
21
|
const buildSearchQuery = searchQueries[queryKey];
|
|
21
22
|
const [getSearchResults, {
|
|
@@ -51,12 +52,13 @@ function useSearch({
|
|
|
51
52
|
} = queryParams;
|
|
52
53
|
const isNewValueSet = value && value !== searchedValue;
|
|
53
54
|
const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;
|
|
55
|
+
const notSameLength = en.length !== entities.length;
|
|
54
56
|
const parsedEntities = entities.length ? entities.map(entity => ({
|
|
55
57
|
match: {
|
|
56
58
|
docType: entity
|
|
57
59
|
}
|
|
58
60
|
})) : [];
|
|
59
|
-
if (isNewValueSet || isNewOffsetSet) {
|
|
61
|
+
if (isNewValueSet || isNewOffsetSet || notSameLength) {
|
|
60
62
|
getSearchResults({
|
|
61
63
|
variables: {
|
|
62
64
|
limit,
|
|
@@ -83,8 +85,9 @@ function useSearch({
|
|
|
83
85
|
});
|
|
84
86
|
setSearchedValue(value);
|
|
85
87
|
setPreviousOffset(offset);
|
|
88
|
+
setEn(entities);
|
|
86
89
|
}
|
|
87
|
-
}, [queryParams, queryParams.limit, queryParams.value, queryParams.offset, searchedValue, previousOffset, getSearchResults, entities, fields]);
|
|
90
|
+
}, [queryParams, queryParams.limit, queryParams.value, queryParams.offset, searchedValue, previousOffset, getSearchResults, entities, fields, entities.length, en.length]);
|
|
88
91
|
return [{
|
|
89
92
|
searchedValue: queryParams.value,
|
|
90
93
|
loading,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSearch.js","names":["useState","useEffect","useLazyQuery","searchQueries","useSearch","queryKey","resultKeys","entities","fields","queryParams","setParams","limit","offset","value","searchedValue","setSearchedValue","previousOffset","setPreviousOffset","buildSearchQuery","getSearchResults","loading","data","search","results","jsonResults","total","ssr","handleQueryParams","newQueryParams","isNewValueSet","isNewOffsetSet","
|
|
1
|
+
{"version":3,"file":"useSearch.js","names":["useState","useEffect","useLazyQuery","searchQueries","useSearch","queryKey","resultKeys","entities","fields","queryParams","setParams","limit","offset","value","searchedValue","setSearchedValue","en","setEn","previousOffset","setPreviousOffset","buildSearchQuery","getSearchResults","loading","data","search","results","jsonResults","total","ssr","handleQueryParams","newQueryParams","isNewValueSet","isNewOffsetSet","notSameLength","length","parsedEntities","map","entity","match","docType","variables","rawQuery","query","bool","must","query_string","type","default_operator","should"],"sources":["../../../src/components/useSearch/useSearch.js"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { useLazyQuery } from '@apollo/client';\nimport searchQueries from '../../application/query';\n\nfunction useSearch({ queryKey, resultKeys, entities = [], fields }) {\n const [queryParams, setParams] = useState({ limit: 20, offset: 0, value: '' });\n const [searchedValue, setSearchedValue] = useState(null);\n const [en, setEn] = useState([]);\n const [previousOffset, setPreviousOffset] = useState(null);\n\n const buildSearchQuery = searchQueries[queryKey];\n const [\n getSearchResults,\n {\n loading,\n data: { search: { results, jsonResults, total } } = {\n search: { results: [], total: 0 }\n }\n }\n ] = useLazyQuery(buildSearchQuery({ resultKeys }), { ssr: false });\n // todo: remove ssr: false once this bug is resolved https://github.com/apollographql/apollo-client/issues/9108\n // without ssr: false clients can hang in ssr.\n\n const handleQueryParams = newQueryParams => {\n setParams({ ...queryParams, ...newQueryParams });\n };\n\n useEffect(\n () => {\n const { limit, offset, value } = queryParams;\n const isNewValueSet = value && value !== searchedValue;\n const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;\n const notSameLength = en.length !== entities.length;\n const parsedEntities = entities.length\n ? entities.map(entity => ({\n match: { docType: entity }\n }))\n : [];\n\n if (isNewValueSet || isNewOffsetSet || notSameLength) {\n getSearchResults({\n variables: {\n limit,\n offset,\n rawQuery: {\n query: {\n bool: {\n must: [\n {\n query_string: {\n query: value,\n fields,\n type: 'most_fields',\n default_operator: 'AND'\n }\n },\n {\n bool: {\n should: parsedEntities\n }\n }\n ]\n }\n }\n }\n }\n });\n setSearchedValue(value);\n setPreviousOffset(offset);\n setEn(entities);\n }\n },\n [\n queryParams,\n queryParams.limit,\n queryParams.value,\n queryParams.offset,\n searchedValue,\n previousOffset,\n getSearchResults,\n entities,\n fields,\n entities.length,\n en.length\n ]\n );\n\n return [\n { searchedValue: queryParams.value, loading, data: { results: results || jsonResults, total } },\n handleQueryParams\n ];\n}\n\nexport default useSearch;\n"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
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
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
|
-
import { useState, useEffect } from 'react';
|
|
5
4
|
import useSearch from '../useSearch';
|
|
6
5
|
function useSearchResults({
|
|
7
6
|
queryKey,
|
|
@@ -22,16 +21,7 @@ function useSearchResults({
|
|
|
22
21
|
entities,
|
|
23
22
|
fields
|
|
24
23
|
});
|
|
25
|
-
const [currentResults, setCurrentResults] = useState([]);
|
|
26
|
-
const [allResults, setAllResults] = useState([]);
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
if (currentResults.length !== results.length) {
|
|
29
|
-
setAllResults([...allResults, ...results]);
|
|
30
|
-
setCurrentResults(results);
|
|
31
|
-
}
|
|
32
|
-
}, [allResults, currentResults, currentResults.length, results]);
|
|
33
24
|
const clearList = params => {
|
|
34
|
-
setAllResults([]);
|
|
35
25
|
setParams(_objectSpread(_objectSpread({}, params), {}, {
|
|
36
26
|
offset: 0
|
|
37
27
|
}));
|
|
@@ -41,7 +31,7 @@ function useSearchResults({
|
|
|
41
31
|
};
|
|
42
32
|
return [{
|
|
43
33
|
loading,
|
|
44
|
-
results
|
|
34
|
+
results,
|
|
45
35
|
total
|
|
46
36
|
}, setQueryParams];
|
|
47
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSearchResults.js","names":["
|
|
1
|
+
{"version":3,"file":"useSearchResults.js","names":["useSearch","useSearchResults","queryKey","resultKeys","entities","fields","searchedValue","loading","data","results","total","setParams","clearList","params","offset","setQueryParams","value"],"sources":["../../../src/components/useSearchResults/useSearchResults.js"],"sourcesContent":["import 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\n const clearList = params => {\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, total }, setQueryParams];\n}\n\nexport default useSearchResults;\n"],"mappings":";;;AAAA,OAAOA,SAAS,MAAM,cAAc;AAEpC,SAASC,gBAAgB,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;EAEzD,MAAMO,SAAS,GAAGC,MAAM,IAAI;IAC1BF,SAAS,iCAAME,MAAM;MAAEC,MAAM,EAAE;IAAC,GAAG;EACrC,CAAC;EAED,MAAMC,cAAc,GAAGF,MAAM,IAAI;IAC/BA,MAAM,CAACG,KAAK,KAAKV,aAAa,GAAGM,SAAS,CAACC,MAAM,CAAC,GAAGF,SAAS,CAACE,MAAM,CAAC;EACxE,CAAC;EAED,OAAO,CAAC;IAAEN,OAAO;IAAEE,OAAO;IAAEC;EAAM,CAAC,EAAEK,cAAc,CAAC;AACtD;AAEA,eAAed,gBAAgB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/plugin-search-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.128.0-admin-updates.0",
|
|
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": "
|
|
31
|
-
"@blaze-cms/core-errors": "
|
|
32
|
-
"@blaze-cms/setup-ui": "
|
|
30
|
+
"@blaze-cms/admin-ui-utils": "0.128.0-admin-updates.0",
|
|
31
|
+
"@blaze-cms/core-errors": "0.128.0-admin-updates.0",
|
|
32
|
+
"@blaze-cms/setup-ui": "0.128.0-admin-updates.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": "
|
|
43
|
+
"@blaze-cms/core-ui": "0.128.0-admin-updates.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": "ad3389e954fe463366655311efb1198191dbb625"
|
|
56
56
|
}
|
|
@@ -1,21 +1,28 @@
|
|
|
1
1
|
import React, { useState, useRef, useEffect } from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
|
+
import { useDebounce } from '@blaze-react/utils/lib/customHooks';
|
|
3
4
|
import useLocalStorage from '../useLocalStorage';
|
|
4
5
|
import SearchBar from './SearchBar';
|
|
5
6
|
import RecentSearches from './RecentSearches';
|
|
6
7
|
import SearchResults from './SearchResults';
|
|
7
8
|
import TriggerModal from './TriggerModal';
|
|
9
|
+
import SearchAdminSideBar from './SearchAdminSideBar';
|
|
8
10
|
import useSearchResults from '../useSearchResults';
|
|
9
11
|
import { SEARCH_ADMIN } from '../../constants';
|
|
10
12
|
|
|
11
13
|
const SearchAdmin = () => {
|
|
12
14
|
const [searchTerm, setSearchTerm] = useState('');
|
|
15
|
+
const [openSearchSideBar, setOpenSearchSideBar] = useState(true);
|
|
16
|
+
const [entityValues, setEntityValues] = useState([]);
|
|
17
|
+
|
|
13
18
|
const [recentSearches, setRecentSearches] = useLocalStorage('recentSearches', []);
|
|
14
19
|
const [displaySearchModalFrame, setDisplaySearchModalFrame] = useState(false);
|
|
15
20
|
const [enableResults, setEnableResults] = useState(true);
|
|
16
21
|
const searchInputRef = useRef(null);
|
|
22
|
+
const debouncedEntityValues = useDebounce(entityValues, 500);
|
|
17
23
|
const [{ loading, results, total }, setQueryParams] = useSearchResults({
|
|
18
|
-
queryKey: SEARCH_ADMIN
|
|
24
|
+
queryKey: SEARCH_ADMIN,
|
|
25
|
+
entities: debouncedEntityValues.map(e => e.id)
|
|
19
26
|
});
|
|
20
27
|
|
|
21
28
|
useEffect(
|
|
@@ -68,6 +75,10 @@ const SearchAdmin = () => {
|
|
|
68
75
|
'modal--show': displaySearchModalFrame
|
|
69
76
|
});
|
|
70
77
|
|
|
78
|
+
const searchModalSideBarClassName = classnames('modal__search__sidebar', {
|
|
79
|
+
'modal__search__sidebar--close': !openSearchSideBar
|
|
80
|
+
});
|
|
81
|
+
|
|
71
82
|
const isEmptySearchTermAndData = !searchTerm && !results.length;
|
|
72
83
|
const isEmptySearchTermnAndDisabledResults = !searchTerm && !enableResults;
|
|
73
84
|
const shouldDisplayRecentSearches =
|
|
@@ -75,51 +86,70 @@ const SearchAdmin = () => {
|
|
|
75
86
|
|
|
76
87
|
const showResults = enableResults && results.length;
|
|
77
88
|
|
|
89
|
+
const handleSetEntityValues = newEntity => {
|
|
90
|
+
const entityExists = entityValues.some(entity => entity.id === newEntity.id);
|
|
91
|
+
if (entityExists) {
|
|
92
|
+
setEntityValues(entityValues.filter(entity => entity.id !== newEntity.id));
|
|
93
|
+
} else {
|
|
94
|
+
setEntityValues([...entityValues, newEntity]);
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
|
|
78
98
|
return (
|
|
79
99
|
<div className="search search--header">
|
|
80
100
|
<TriggerModal toggleSearchModal={toggleSearchModal} />
|
|
81
101
|
<div className={searchModalResultsClassName}>
|
|
82
102
|
{displaySearchModalFrame && (
|
|
83
|
-
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
103
|
+
<div className="modal__search">
|
|
104
|
+
<SearchAdminSideBar
|
|
105
|
+
searchModalSideBarClassName={searchModalSideBarClassName}
|
|
106
|
+
openSearchSideBar={openSearchSideBar}
|
|
107
|
+
setOpenSearchSideBar={setOpenSearchSideBar}
|
|
108
|
+
handleSetEntityValues={handleSetEntityValues}
|
|
109
|
+
entityValues={entityValues}
|
|
110
|
+
setEntityValues={setEntityValues}
|
|
111
|
+
/>
|
|
112
|
+
<div className="modal__search__content">
|
|
113
|
+
<div className="modal__header modal__header--search">
|
|
114
|
+
<SearchBar
|
|
115
|
+
toggleSearchModal={toggleSearchModal}
|
|
116
|
+
handleKeyDown={handleKeyDown}
|
|
117
|
+
searchInputRef={searchInputRef}
|
|
118
|
+
handleSearchTerm={handleSearchTerm}
|
|
119
|
+
searchTerm={searchTerm}
|
|
120
|
+
search={() => search({ value: searchTerm })}
|
|
121
|
+
/>
|
|
122
|
+
</div>
|
|
123
|
+
{shouldDisplayRecentSearches ? (
|
|
124
|
+
<RecentSearches
|
|
125
|
+
recentSearches={recentSearches}
|
|
126
|
+
handleSearchTerm={handleSearchTerm}
|
|
127
|
+
search={search}
|
|
128
|
+
/>
|
|
129
|
+
) : (
|
|
130
|
+
<>
|
|
131
|
+
{!showResults && (
|
|
132
|
+
<div className="list list--search">
|
|
133
|
+
<div className="header header--list">
|
|
134
|
+
<h2>No Results</h2>
|
|
135
|
+
</div>
|
|
106
136
|
</div>
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
137
|
+
)}
|
|
138
|
+
</>
|
|
139
|
+
)}
|
|
140
|
+
{showResults && (
|
|
141
|
+
<SearchResults
|
|
142
|
+
currentValue={searchTerm}
|
|
143
|
+
searchTerm={searchTerm}
|
|
144
|
+
loading={loading}
|
|
145
|
+
results={results}
|
|
146
|
+
total={total}
|
|
147
|
+
setQueryParams={setQueryParams}
|
|
148
|
+
closeModal={toggleSearchModal}
|
|
149
|
+
/>
|
|
150
|
+
)}
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
123
153
|
)}
|
|
124
154
|
</div>
|
|
125
155
|
</div>
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { useQuery } from '@apollo/client';
|
|
3
|
+
import { getQuery } from '@blaze-cms/admin-ui-utils';
|
|
4
|
+
import { Checkbox } from '@blaze-react/checkboxes';
|
|
5
|
+
|
|
6
|
+
const MENU_PERMISSIONS = ['update:any', 'update:own', 'create:any', 'create:own'];
|
|
7
|
+
|
|
8
|
+
const SearchAdminSideBar = ({
|
|
9
|
+
searchModalSideBarClassName,
|
|
10
|
+
openSearchSideBar,
|
|
11
|
+
setOpenSearchSideBar,
|
|
12
|
+
handleSetEntityValues,
|
|
13
|
+
entityValues,
|
|
14
|
+
setEntityValues
|
|
15
|
+
}) => {
|
|
16
|
+
const [loadMore, setLoadMore] = useState(false);
|
|
17
|
+
const { data: { getEntitySchemas = [] } = {}, loading } = useQuery(
|
|
18
|
+
getQuery('GET_USER_EDITABLE_ENTITIES'),
|
|
19
|
+
{
|
|
20
|
+
variables: {
|
|
21
|
+
canDoActions: MENU_PERMISSIONS
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
if (loading) return null;
|
|
27
|
+
|
|
28
|
+
const filteredEntitiesSchemas = getEntitySchemas.filter(entity => {
|
|
29
|
+
if (Object.keys(entity.extras).length) {
|
|
30
|
+
return entity.extras.searchIndexes.includes('admin');
|
|
31
|
+
}
|
|
32
|
+
return false;
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
const entitiesToShow = filteredEntitiesSchemas.slice(
|
|
36
|
+
0,
|
|
37
|
+
loadMore ? filteredEntitiesSchemas.length : 5
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<div className={searchModalSideBarClassName}>
|
|
42
|
+
<div
|
|
43
|
+
className="modal__search__sidebar__button"
|
|
44
|
+
role="button"
|
|
45
|
+
onClick={() => setOpenSearchSideBar(!openSearchSideBar)}>
|
|
46
|
+
<i className="material-icons">
|
|
47
|
+
{openSearchSideBar ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
|
|
48
|
+
</i>
|
|
49
|
+
</div>
|
|
50
|
+
<div className="modal__search__sidebar__container">
|
|
51
|
+
<div className="modal__search__sidebar__wrapper">
|
|
52
|
+
<div className="modal__search__sidebar__filters">
|
|
53
|
+
<i className="material-icons modal__search__sidebar__icon">tune</i>
|
|
54
|
+
<span>Filters</span>
|
|
55
|
+
</div>
|
|
56
|
+
<div
|
|
57
|
+
className="modal__search__sidebar__clear"
|
|
58
|
+
role="button"
|
|
59
|
+
onClick={() => setEntityValues([])}>
|
|
60
|
+
<span>Clear all</span>
|
|
61
|
+
<i className="material-icons modal__search__sidebar__icon--clear">replay</i>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
<div className="modal__search__sidebar__entity-list">
|
|
65
|
+
<h1>Entity list</h1>
|
|
66
|
+
{entitiesToShow.map(entity => (
|
|
67
|
+
<Checkbox
|
|
68
|
+
checked={entityValues.some(_entity => _entity.id === entity.id)}
|
|
69
|
+
label={entity.displayName}
|
|
70
|
+
id={entity.id}
|
|
71
|
+
name={entity.id}
|
|
72
|
+
onChange={({ value: { checked } }) => handleSetEntityValues(entity)}
|
|
73
|
+
/>
|
|
74
|
+
))}
|
|
75
|
+
<div
|
|
76
|
+
className="modal__search__sidebar__more"
|
|
77
|
+
role="button"
|
|
78
|
+
onClick={() => setLoadMore(!loadMore)}>
|
|
79
|
+
<i className="material-icons">{!loadMore ? 'navigate_next' : 'expand_less'}</i>
|
|
80
|
+
<span>{loadMore ? 'Less' : 'More'}</span>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
export default SearchAdminSideBar;
|
|
@@ -54,7 +54,9 @@ const SearchResults = ({
|
|
|
54
54
|
{loading && <span>Loading...</span>}
|
|
55
55
|
<div className="modal__content modal__content--search">
|
|
56
56
|
<div className="header header--list">
|
|
57
|
-
<h2
|
|
57
|
+
<h2 className="header--list--results">
|
|
58
|
+
About <b>{total}</b> search keywords results
|
|
59
|
+
</h2>
|
|
58
60
|
</div>
|
|
59
61
|
<VirtualList
|
|
60
62
|
width="100%"
|
|
@@ -65,15 +67,24 @@ const SearchResults = ({
|
|
|
65
67
|
scrollToIndex={currentIndex}
|
|
66
68
|
onItemsRendered={handleRenderedItems}
|
|
67
69
|
renderItem={({ index, style }) => {
|
|
68
|
-
const {
|
|
70
|
+
const {
|
|
71
|
+
id,
|
|
72
|
+
docType,
|
|
73
|
+
updated,
|
|
74
|
+
name,
|
|
75
|
+
entityIdentifier,
|
|
76
|
+
published,
|
|
77
|
+
created,
|
|
78
|
+
status
|
|
79
|
+
} = results[index];
|
|
69
80
|
const updatedDate = updated ? getDateFormat(updated) : null;
|
|
81
|
+
const createdDate = created ? getDateFormat(created) : null;
|
|
82
|
+
const publishedDate = published ? getDateFormat(published) : null;
|
|
70
83
|
return (
|
|
71
84
|
<div key={index} style={style} className="list__item--resultWrapper">
|
|
72
85
|
<div className="list__item list__item--result">
|
|
73
86
|
<div className="list__item-row list__item-row--result">
|
|
74
|
-
<span className="
|
|
75
|
-
{docType} {updatedDate}
|
|
76
|
-
</span>
|
|
87
|
+
<span className="list__item-identifier">{entityIdentifier}</span>
|
|
77
88
|
<a
|
|
78
89
|
href={getNavigationRoute({
|
|
79
90
|
id,
|
|
@@ -85,9 +96,34 @@ const SearchResults = ({
|
|
|
85
96
|
docType
|
|
86
97
|
})
|
|
87
98
|
}
|
|
88
|
-
className="list__item-
|
|
99
|
+
className="list__item-link">
|
|
89
100
|
{name}
|
|
90
101
|
</a>
|
|
102
|
+
|
|
103
|
+
<div className="list__item-dates">
|
|
104
|
+
{publishedDate && (
|
|
105
|
+
<span>
|
|
106
|
+
<b>Published: </b>
|
|
107
|
+
{publishedDate}
|
|
108
|
+
</span>
|
|
109
|
+
)}
|
|
110
|
+
<span>
|
|
111
|
+
<b>Created: </b>
|
|
112
|
+
{createdDate}
|
|
113
|
+
</span>
|
|
114
|
+
<span>
|
|
115
|
+
<b>Updated: </b>
|
|
116
|
+
{updatedDate}
|
|
117
|
+
</span>
|
|
118
|
+
</div>
|
|
119
|
+
<div className="list__item-status">
|
|
120
|
+
{status && (
|
|
121
|
+
<span>
|
|
122
|
+
<b>Status: </b>
|
|
123
|
+
{status}
|
|
124
|
+
</span>
|
|
125
|
+
)}
|
|
126
|
+
</div>
|
|
91
127
|
</div>
|
|
92
128
|
</div>
|
|
93
129
|
</div>
|
|
@@ -5,7 +5,9 @@ import searchQueries from '../../application/query';
|
|
|
5
5
|
function useSearch({ queryKey, resultKeys, entities = [], fields }) {
|
|
6
6
|
const [queryParams, setParams] = useState({ limit: 20, offset: 0, value: '' });
|
|
7
7
|
const [searchedValue, setSearchedValue] = useState(null);
|
|
8
|
+
const [en, setEn] = useState([]);
|
|
8
9
|
const [previousOffset, setPreviousOffset] = useState(null);
|
|
10
|
+
|
|
9
11
|
const buildSearchQuery = searchQueries[queryKey];
|
|
10
12
|
const [
|
|
11
13
|
getSearchResults,
|
|
@@ -28,13 +30,14 @@ function useSearch({ queryKey, resultKeys, entities = [], fields }) {
|
|
|
28
30
|
const { limit, offset, value } = queryParams;
|
|
29
31
|
const isNewValueSet = value && value !== searchedValue;
|
|
30
32
|
const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;
|
|
33
|
+
const notSameLength = en.length !== entities.length;
|
|
31
34
|
const parsedEntities = entities.length
|
|
32
35
|
? entities.map(entity => ({
|
|
33
36
|
match: { docType: entity }
|
|
34
37
|
}))
|
|
35
38
|
: [];
|
|
36
39
|
|
|
37
|
-
if (isNewValueSet || isNewOffsetSet) {
|
|
40
|
+
if (isNewValueSet || isNewOffsetSet || notSameLength) {
|
|
38
41
|
getSearchResults({
|
|
39
42
|
variables: {
|
|
40
43
|
limit,
|
|
@@ -64,6 +67,7 @@ function useSearch({ queryKey, resultKeys, entities = [], fields }) {
|
|
|
64
67
|
});
|
|
65
68
|
setSearchedValue(value);
|
|
66
69
|
setPreviousOffset(offset);
|
|
70
|
+
setEn(entities);
|
|
67
71
|
}
|
|
68
72
|
},
|
|
69
73
|
[
|
|
@@ -75,7 +79,9 @@ function useSearch({ queryKey, resultKeys, entities = [], fields }) {
|
|
|
75
79
|
previousOffset,
|
|
76
80
|
getSearchResults,
|
|
77
81
|
entities,
|
|
78
|
-
fields
|
|
82
|
+
fields,
|
|
83
|
+
entities.length,
|
|
84
|
+
en.length
|
|
79
85
|
]
|
|
80
86
|
);
|
|
81
87
|
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
1
|
import useSearch from '../useSearch';
|
|
3
2
|
|
|
4
3
|
function useSearchResults({ queryKey, resultKeys, entities, fields }) {
|
|
@@ -10,21 +9,8 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
|
|
|
10
9
|
},
|
|
11
10
|
setParams
|
|
12
11
|
] = useSearch({ queryKey, resultKeys, entities, fields });
|
|
13
|
-
const [currentResults, setCurrentResults] = useState([]);
|
|
14
|
-
const [allResults, setAllResults] = useState([]);
|
|
15
|
-
|
|
16
|
-
useEffect(
|
|
17
|
-
() => {
|
|
18
|
-
if (currentResults.length !== results.length) {
|
|
19
|
-
setAllResults([...allResults, ...results]);
|
|
20
|
-
setCurrentResults(results);
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
[allResults, currentResults, currentResults.length, results]
|
|
24
|
-
);
|
|
25
12
|
|
|
26
13
|
const clearList = params => {
|
|
27
|
-
setAllResults([]);
|
|
28
14
|
setParams({ ...params, offset: 0 });
|
|
29
15
|
};
|
|
30
16
|
|
|
@@ -32,7 +18,7 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
|
|
|
32
18
|
params.value !== searchedValue ? clearList(params) : setParams(params);
|
|
33
19
|
};
|
|
34
20
|
|
|
35
|
-
return [{ loading, results
|
|
21
|
+
return [{ loading, results, total }, setQueryParams];
|
|
36
22
|
}
|
|
37
23
|
|
|
38
24
|
export default useSearchResults;
|