From 1f2c5685dbb5543101c59c05d44c90c8279084e9 Mon Sep 17 00:00:00 2001 From: Ygor Oliveira Do Carmo Date: Tue, 16 Aug 2022 12:57:31 +1000 Subject: [PATCH 1/5] add created at date querying functionality --- src/api/Search.js | 3 + src/elements/common/header/Header.js | 69 +++++++++++++++++-- .../content-explorer/ContentExplorer.js | 45 +++++++++--- 3 files changed, 104 insertions(+), 13 deletions(-) diff --git a/src/api/Search.js b/src/api/Search.js index 2d22552295..54b1758971 100644 --- a/src/api/Search.js +++ b/src/api/Search.js @@ -211,6 +211,7 @@ class Search extends Base { params: { offset: this.offset, query: this.query, + created_at_range: this.createdAtRange, ancestor_folder_ids: this.id, limit: this.limit, fields: requestFields.toString(), @@ -240,6 +241,7 @@ class Search extends Base { search( id: string, query: string, + createdAtRange: string[], limit: number, offset: number, successCallback: Function, @@ -254,6 +256,7 @@ class Search extends Base { this.limit = limit; this.offset = offset; this.query = query; + this.createdAtRange = createdAtRange; this.id = id; this.key = this.getCacheKey(id, this.getEncodedQuery(this.query)); this.successCallback = successCallback; diff --git a/src/elements/common/header/Header.js b/src/elements/common/header/Header.js index 419820a8b3..f53251843f 100644 --- a/src/elements/common/header/Header.js +++ b/src/elements/common/header/Header.js @@ -10,24 +10,36 @@ import Logo from './Logo'; import messages from '../messages'; import { VIEW_FOLDER, VIEW_SEARCH } from '../../../constants'; import type { View } from '../../../common/types/core'; +import { Flyout, Overlay } from '../../../components/flyout'; +import { DatePicker } from '../../../components'; +import Button from '../../../components/button'; import './Header.scss'; type Props = { + fromDateQuery?: string, intl: any, isHeaderLogoVisible?: boolean, isSmall: boolean, logoUrl?: string, onSearch: Function, searchQuery: string, + toDateQuery?: string, view: View, }; // eslint-disable-next-line react/prop-types -const Header = ({ isHeaderLogoVisible = true, view, isSmall, searchQuery, onSearch, logoUrl, intl }: Props) => { - const search = ({ currentTarget }: { currentTarget: HTMLInputElement }) => onSearch(currentTarget.value); +const Header = ({ isHeaderLogoVisible = true, view, isSmall, onSearch, logoUrl, intl }: Props) => { const isFolder = view === VIEW_FOLDER; const isSearch = view === VIEW_SEARCH; + + const [values, setValues] = React.useState({ query: '', fromDate: null, toDate: null }); + const search = (query, fromDate, toDate) => onSearch(query, fromDate, toDate); + + const MAX_TIME = new Date('3000-01-01T00:00:00.000Z'); + const MIN_TIME = new Date(0); + const TODAY = new Date(); + return (
{isHeaderLogoVisible && } @@ -35,12 +47,61 @@ const Header = ({ isHeaderLogoVisible = true, view, isSmall, searchQuery, onSear { + setValues({ ...values, query: e.currentTarget.value }); + search(e.currentTarget.value, values.fromDate, values.toDate); + }} placeholder={intl.formatMessage(messages.searchPlaceholder)} type="search" - value={searchQuery} + value={values.query} />
+ + + +
+
+ { + setValues({ ...values, fromDate: data }); + search(values.query, data, values.toDate); + }} + placeholder="Choose a Date" + value={values.fromDate} + /> + { + setValues({ ...values, toDate: data }); + search(values.query, values.fromDate, data); + }} + placeholder="Choose a Date" + value={values.toDate} + /> +
+
+ + ); }; diff --git a/src/elements/content-explorer/ContentExplorer.js b/src/elements/content-explorer/ContentExplorer.js index e4a025029c..7fb74b8408 100644 --- a/src/elements/content-explorer/ContentExplorer.js +++ b/src/elements/content-explorer/ContentExplorer.js @@ -147,6 +147,7 @@ type State = { currentPageSize: number, errorCode: string, focusedRow: number, + fromDateQuery: string, gridColumnCount: number, isCreateFolderModalOpen: boolean, isDeleteModalOpen: boolean, @@ -161,6 +162,7 @@ type State = { selected?: BoxItem, sortBy: SortBy, sortDirection: SortDirection, + toDateQuery: string, view: View, }; @@ -285,6 +287,8 @@ class ContentExplorer extends Component { sortBy, sortDirection, view: VIEW_FOLDER, + fromDateQuery: '', + toDateQuery: '', }; } @@ -410,6 +414,8 @@ class ContentExplorer extends Component { searchQuery: '', currentCollection: this.currentUnloadedCollection(), view: VIEW_METADATA, + fromDateQuery: '', + toDateQuery: '', }); this.metadataQueryAPIHelper = new MetadataQueryAPIHelper(this.api); this.metadataQueryAPIHelper.fetchMetadataQueryResults( @@ -487,13 +493,15 @@ class ContentExplorer extends Component { currentCollection: { id }, view, searchQuery, + fromDateQuery, + toDateQuery, }: State = this.state; if (view === VIEW_FOLDER && id) { this.fetchFolder(id, false); } else if (view === VIEW_RECENTS) { this.showRecents(false); } else if (view === VIEW_SEARCH && searchQuery) { - this.search(searchQuery); + this.search(searchQuery, fromDateQuery, toDateQuery); } else if (view === VIEW_METADATA) { this.showMetadataQueryResults(); } else { @@ -568,6 +576,8 @@ class ContentExplorer extends Component { view: VIEW_FOLDER, currentCollection: this.currentUnloadedCollection(), currentOffset: offset, + fromDateQuery: '', + toDateQuery: '', }); // Fetch the folder using folder API @@ -638,15 +648,26 @@ class ContentExplorer extends Component { * @param {string} query search string * @return {void} */ - debouncedSearch = debounce((id: string, query: string) => { + debouncedSearch = debounce((id: string, query: string, fromDate: string, toDate: string) => { const { currentOffset, currentPageSize }: State = this.state; - + const searchFromDate = fromDate ? `${fromDate.toISOString().slice(0, 10)}T00:00:00+00:00` : ''; + const searchToDate = toDate ? `${toDate.toISOString().slice(0, 10)}T14:00:00+00:00` : ''; + const createdAtRange = [searchFromDate, searchToDate]; this.api .getSearchAPI() - .search(id, query, currentPageSize, currentOffset, this.searchSuccessCallback, this.errorCallback, { - fields: CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH, - forceFetch: true, - }); + .search( + id, + query, + createdAtRange.toString(), + currentPageSize, + currentOffset, + this.searchSuccessCallback, + this.errorCallback, + { + fields: CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH, + forceFetch: true, + }, + ); }, DEFAULT_SEARCH_DEBOUNCE); /** @@ -656,7 +677,7 @@ class ContentExplorer extends Component { * @param {string} query search string * @return {void} */ - search = (query: string) => { + search = (query: string, fromDate: String, toDate: string) => { const { rootFolderId }: Props = this.props; const { currentCollection: { id }, @@ -684,6 +705,8 @@ class ContentExplorer extends Component { // do nothing and but update prior state this.setState({ searchQuery: query, + fromDateQuery: fromDate, + toDateQuery: toDate, }); return; } @@ -694,9 +717,11 @@ class ContentExplorer extends Component { searchQuery: query, selected: undefined, view: VIEW_SEARCH, + fromDateQuery: fromDate, + toDateQuery: toDate, }); - this.debouncedSearch(folderId, query); + this.debouncedSearch(folderId, query, fromDate, toDate); }; /** @@ -731,6 +756,8 @@ class ContentExplorer extends Component { view: VIEW_RECENTS, currentCollection: this.currentUnloadedCollection(), currentOffset: 0, + fromDateQuery: '', + toDateQuery: '', }); // Fetch the folder using folder API From 06071790c8c65038805949460337c8b999d201bd Mon Sep 17 00:00:00 2001 From: Ygor Oliveira Do Carmo Date: Tue, 16 Aug 2022 12:57:31 +1000 Subject: [PATCH 2/5] feat(content explorer): Content Explorer Search By Created At Date --- src/api/Search.js | 3 + src/elements/common/header/Header.js | 69 +++++++++++++++++-- .../content-explorer/ContentExplorer.js | 45 +++++++++--- 3 files changed, 104 insertions(+), 13 deletions(-) diff --git a/src/api/Search.js b/src/api/Search.js index 2d22552295..54b1758971 100644 --- a/src/api/Search.js +++ b/src/api/Search.js @@ -211,6 +211,7 @@ class Search extends Base { params: { offset: this.offset, query: this.query, + created_at_range: this.createdAtRange, ancestor_folder_ids: this.id, limit: this.limit, fields: requestFields.toString(), @@ -240,6 +241,7 @@ class Search extends Base { search( id: string, query: string, + createdAtRange: string[], limit: number, offset: number, successCallback: Function, @@ -254,6 +256,7 @@ class Search extends Base { this.limit = limit; this.offset = offset; this.query = query; + this.createdAtRange = createdAtRange; this.id = id; this.key = this.getCacheKey(id, this.getEncodedQuery(this.query)); this.successCallback = successCallback; diff --git a/src/elements/common/header/Header.js b/src/elements/common/header/Header.js index 419820a8b3..f53251843f 100644 --- a/src/elements/common/header/Header.js +++ b/src/elements/common/header/Header.js @@ -10,24 +10,36 @@ import Logo from './Logo'; import messages from '../messages'; import { VIEW_FOLDER, VIEW_SEARCH } from '../../../constants'; import type { View } from '../../../common/types/core'; +import { Flyout, Overlay } from '../../../components/flyout'; +import { DatePicker } from '../../../components'; +import Button from '../../../components/button'; import './Header.scss'; type Props = { + fromDateQuery?: string, intl: any, isHeaderLogoVisible?: boolean, isSmall: boolean, logoUrl?: string, onSearch: Function, searchQuery: string, + toDateQuery?: string, view: View, }; // eslint-disable-next-line react/prop-types -const Header = ({ isHeaderLogoVisible = true, view, isSmall, searchQuery, onSearch, logoUrl, intl }: Props) => { - const search = ({ currentTarget }: { currentTarget: HTMLInputElement }) => onSearch(currentTarget.value); +const Header = ({ isHeaderLogoVisible = true, view, isSmall, onSearch, logoUrl, intl }: Props) => { const isFolder = view === VIEW_FOLDER; const isSearch = view === VIEW_SEARCH; + + const [values, setValues] = React.useState({ query: '', fromDate: null, toDate: null }); + const search = (query, fromDate, toDate) => onSearch(query, fromDate, toDate); + + const MAX_TIME = new Date('3000-01-01T00:00:00.000Z'); + const MIN_TIME = new Date(0); + const TODAY = new Date(); + return (
{isHeaderLogoVisible && } @@ -35,12 +47,61 @@ const Header = ({ isHeaderLogoVisible = true, view, isSmall, searchQuery, onSear { + setValues({ ...values, query: e.currentTarget.value }); + search(e.currentTarget.value, values.fromDate, values.toDate); + }} placeholder={intl.formatMessage(messages.searchPlaceholder)} type="search" - value={searchQuery} + value={values.query} />
+ + + +
+
+ { + setValues({ ...values, fromDate: data }); + search(values.query, data, values.toDate); + }} + placeholder="Choose a Date" + value={values.fromDate} + /> + { + setValues({ ...values, toDate: data }); + search(values.query, values.fromDate, data); + }} + placeholder="Choose a Date" + value={values.toDate} + /> +
+
+ + ); }; diff --git a/src/elements/content-explorer/ContentExplorer.js b/src/elements/content-explorer/ContentExplorer.js index e4a025029c..7fb74b8408 100644 --- a/src/elements/content-explorer/ContentExplorer.js +++ b/src/elements/content-explorer/ContentExplorer.js @@ -147,6 +147,7 @@ type State = { currentPageSize: number, errorCode: string, focusedRow: number, + fromDateQuery: string, gridColumnCount: number, isCreateFolderModalOpen: boolean, isDeleteModalOpen: boolean, @@ -161,6 +162,7 @@ type State = { selected?: BoxItem, sortBy: SortBy, sortDirection: SortDirection, + toDateQuery: string, view: View, }; @@ -285,6 +287,8 @@ class ContentExplorer extends Component { sortBy, sortDirection, view: VIEW_FOLDER, + fromDateQuery: '', + toDateQuery: '', }; } @@ -410,6 +414,8 @@ class ContentExplorer extends Component { searchQuery: '', currentCollection: this.currentUnloadedCollection(), view: VIEW_METADATA, + fromDateQuery: '', + toDateQuery: '', }); this.metadataQueryAPIHelper = new MetadataQueryAPIHelper(this.api); this.metadataQueryAPIHelper.fetchMetadataQueryResults( @@ -487,13 +493,15 @@ class ContentExplorer extends Component { currentCollection: { id }, view, searchQuery, + fromDateQuery, + toDateQuery, }: State = this.state; if (view === VIEW_FOLDER && id) { this.fetchFolder(id, false); } else if (view === VIEW_RECENTS) { this.showRecents(false); } else if (view === VIEW_SEARCH && searchQuery) { - this.search(searchQuery); + this.search(searchQuery, fromDateQuery, toDateQuery); } else if (view === VIEW_METADATA) { this.showMetadataQueryResults(); } else { @@ -568,6 +576,8 @@ class ContentExplorer extends Component { view: VIEW_FOLDER, currentCollection: this.currentUnloadedCollection(), currentOffset: offset, + fromDateQuery: '', + toDateQuery: '', }); // Fetch the folder using folder API @@ -638,15 +648,26 @@ class ContentExplorer extends Component { * @param {string} query search string * @return {void} */ - debouncedSearch = debounce((id: string, query: string) => { + debouncedSearch = debounce((id: string, query: string, fromDate: string, toDate: string) => { const { currentOffset, currentPageSize }: State = this.state; - + const searchFromDate = fromDate ? `${fromDate.toISOString().slice(0, 10)}T00:00:00+00:00` : ''; + const searchToDate = toDate ? `${toDate.toISOString().slice(0, 10)}T14:00:00+00:00` : ''; + const createdAtRange = [searchFromDate, searchToDate]; this.api .getSearchAPI() - .search(id, query, currentPageSize, currentOffset, this.searchSuccessCallback, this.errorCallback, { - fields: CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH, - forceFetch: true, - }); + .search( + id, + query, + createdAtRange.toString(), + currentPageSize, + currentOffset, + this.searchSuccessCallback, + this.errorCallback, + { + fields: CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH, + forceFetch: true, + }, + ); }, DEFAULT_SEARCH_DEBOUNCE); /** @@ -656,7 +677,7 @@ class ContentExplorer extends Component { * @param {string} query search string * @return {void} */ - search = (query: string) => { + search = (query: string, fromDate: String, toDate: string) => { const { rootFolderId }: Props = this.props; const { currentCollection: { id }, @@ -684,6 +705,8 @@ class ContentExplorer extends Component { // do nothing and but update prior state this.setState({ searchQuery: query, + fromDateQuery: fromDate, + toDateQuery: toDate, }); return; } @@ -694,9 +717,11 @@ class ContentExplorer extends Component { searchQuery: query, selected: undefined, view: VIEW_SEARCH, + fromDateQuery: fromDate, + toDateQuery: toDate, }); - this.debouncedSearch(folderId, query); + this.debouncedSearch(folderId, query, fromDate, toDate); }; /** @@ -731,6 +756,8 @@ class ContentExplorer extends Component { view: VIEW_RECENTS, currentCollection: this.currentUnloadedCollection(), currentOffset: 0, + fromDateQuery: '', + toDateQuery: '', }); // Fetch the folder using folder API From 30b5258b86d72b92b4e3c267569d0375f3f44d4d Mon Sep 17 00:00:00 2001 From: Ygor Oliveira Do Carmo Date: Thu, 18 Aug 2022 09:03:22 +1000 Subject: [PATCH 3/5] edit button content to an icon and changed date query time --- src/elements/common/header/Header.js | 12 +++++++++--- src/elements/content-explorer/ContentExplorer.js | 2 +- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/elements/common/header/Header.js b/src/elements/common/header/Header.js index f53251843f..bcdca521c8 100644 --- a/src/elements/common/header/Header.js +++ b/src/elements/common/header/Header.js @@ -14,6 +14,8 @@ import { Flyout, Overlay } from '../../../components/flyout'; import { DatePicker } from '../../../components'; import Button from '../../../components/button'; +import IconAdvancedFilters from '../../../icons/general/IconAdvancedFilters'; + import './Header.scss'; type Props = { @@ -49,15 +51,19 @@ const Header = ({ isHeaderLogoVisible = true, view, isSmall, onSearch, logoUrl, disabled={!isFolder && !isSearch} onChange={e => { setValues({ ...values, query: e.currentTarget.value }); - search(e.currentTarget.value, values.fromDate, values.toDate); + if (e.currentTarget.value !== '') { + search(e.currentTarget.value, values.fromDate, values.toDate); + } else search(e.currentTarget.value, '', ''); }} placeholder={intl.formatMessage(messages.searchPlaceholder)} type="search" value={values.query} /> - - + +
diff --git a/src/elements/content-explorer/ContentExplorer.js b/src/elements/content-explorer/ContentExplorer.js index 7fb74b8408..addbef1c25 100644 --- a/src/elements/content-explorer/ContentExplorer.js +++ b/src/elements/content-explorer/ContentExplorer.js @@ -651,7 +651,7 @@ class ContentExplorer extends Component { debouncedSearch = debounce((id: string, query: string, fromDate: string, toDate: string) => { const { currentOffset, currentPageSize }: State = this.state; const searchFromDate = fromDate ? `${fromDate.toISOString().slice(0, 10)}T00:00:00+00:00` : ''; - const searchToDate = toDate ? `${toDate.toISOString().slice(0, 10)}T14:00:00+00:00` : ''; + const searchToDate = toDate ? `${toDate.toISOString().slice(0, 10)}T23:00:00+00:00` : ''; const createdAtRange = [searchFromDate, searchToDate]; this.api .getSearchAPI() From fa09396b7e1d91bc5a518a87cae222cb5a679e11 Mon Sep 17 00:00:00 2001 From: Ygor Oliveira Do Carmo Date: Thu, 15 Sep 2022 14:48:46 +1000 Subject: [PATCH 4/5] edit default view mode to grid biew --- src/elements/content-explorer/ContentExplorer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/elements/content-explorer/ContentExplorer.js b/src/elements/content-explorer/ContentExplorer.js index addbef1c25..48be2160bc 100644 --- a/src/elements/content-explorer/ContentExplorer.js +++ b/src/elements/content-explorer/ContentExplorer.js @@ -49,7 +49,7 @@ import { VIEW_ERROR, VIEW_RECENTS, VIEW_METADATA, - VIEW_MODE_LIST, + VIEW_MODE_GRID, TYPE_FILE, TYPE_WEBLINK, TYPE_FOLDER, @@ -1471,7 +1471,7 @@ class ContentExplorer extends Component { * * @return {ViewMode} */ - getViewMode = (): ViewMode => this.store.getItem(localStoreViewMode) || VIEW_MODE_LIST; + getViewMode = (): ViewMode => this.store.getItem(localStoreViewMode) || VIEW_MODE_GRID; /** * Get the maximum number of grid view columns based on the current width of the From 1fc24e2add7533f0070ab1dc9ee87482376f94ef Mon Sep 17 00:00:00 2001 From: Ygor Oliveira Do Carmo Date: Thu, 29 Sep 2022 14:54:00 +1000 Subject: [PATCH 5/5] fix(content-explorer): typo --- src/elements/content-explorer/ContentExplorer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/content-explorer/ContentExplorer.js b/src/elements/content-explorer/ContentExplorer.js index 48be2160bc..23503b4a3a 100644 --- a/src/elements/content-explorer/ContentExplorer.js +++ b/src/elements/content-explorer/ContentExplorer.js @@ -677,7 +677,7 @@ class ContentExplorer extends Component { * @param {string} query search string * @return {void} */ - search = (query: string, fromDate: String, toDate: string) => { + search = (query: string, fromDate: string, toDate: string) => { const { rootFolderId }: Props = this.props; const { currentCollection: { id },