haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-10 11:21:29 +00:00
Code Issues Releases Wiki Activity

Change search result text (#5871)

Browse Source 
* fix warnings

* change search result text
This commit is contained in:
Michael An
2023-12-29 12:20:07 +08:00
committed by GitHub
parent 628e06f7b8
commit 2ab7ca1e90
4 changed files with 76 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/dirent-grid-view/dirent-grid-view.js
View File

@@ -50,6 +50,7 @@ const propTypes = {
onItemRename: PropTypes.func.isRequired, onItemRename: PropTypes.func.isRequired,
posX: PropTypes.number, posX: PropTypes.number,
posY: PropTypes.number, posY: PropTypes.number,
dirent: PropTypes.object,
}; };
class DirentGridView extends React.Component { class DirentGridView extends React.Component {

35
frontend/src/components/search/ai-search.js
View File

@@ -49,7 +49,7 @@ export default class AISearch extends Component {
isLoading: false, isLoading: false,
hasMore: true, hasMore: true,
isMaskShow: false, isMaskShow: false,
isResultShow: false, showRecent: true,
isResultGetted: false, isResultGetted: false,
isCloseShow: false, isCloseShow: false,
isSearchInputShow: false, // for mobile isSearchInputShow: false, // for mobile
@@ -228,6 +228,9 @@ export default class AISearch extends Component {
}; };
onChangeHandler = (event) => { onChangeHandler = (event) => {
if (this.state.showRecent) {
this.setState({ showRecent: false });
}
const newValue = event.target.value; const newValue = event.target.value;
this.setState({ value: newValue }, () => { this.setState({ value: newValue }, () => {
if (this.inputValue === newValue.trim()) return; if (this.inputValue === newValue.trim()) return;
@@ -254,7 +257,6 @@ export default class AISearch extends Component {
this.setState({ this.setState({
highlightIndex: 0, highlightIndex: 0,
resultItems: [], resultItems: [],
isResultShow: false,
isResultGetted: false isResultGetted: false
}); });
return; return;
@@ -272,7 +274,6 @@ export default class AISearch extends Component {
this.source.cancel('prev request is cancelled'); this.source.cancel('prev request is cancelled');
} }
this.setState({ this.setState({
isResultShow: true,
isResultGetted: false, isResultGetted: false,
resultItems: [], resultItems: [],
highlightIndex: 0, highlightIndex: 0,
@@ -350,11 +351,11 @@ export default class AISearch extends Component {
value: '', value: '',
isMaskShow: false, isMaskShow: false,
isCloseShow: false, isCloseShow: false,
isResultShow: false,
isResultGetted: false, isResultGetted: false,
resultItems: [], resultItems: [],
highlightIndex: 0, highlightIndex: 0,
isSearchInputShow: false, isSearchInputShow: false,
showRecent: true,
}); });
} }
@@ -403,25 +404,33 @@ export default class AISearch extends Component {
} }
renderSearchResult() { renderSearchResult() {
const { resultItems, highlightIndex, width, searchMode, answeringResult } = this.state; const { resultItems, highlightIndex, width, isResultGetted } = this.state;
if (!width || width === 'default') return null; if (!width || width === 'default') return null;
if (!this.state.isResultShow) { if (this.state.showRecent) {
const { repoID } = this.props; const { repoID } = this.props;
let storeKey = 'sfVisitedAISearchItems'; let storeKey = 'sfVisitedAISearchItems';
if (repoID) { if (repoID) {
storeKey += repoID; storeKey += repoID;
} }
const visitedItems = JSON.parse(localStorage.getItem(storeKey)) || []; const visitedItems = JSON.parse(localStorage.getItem(storeKey)) || [];
return visitedItems.length ? this.renderVisitedItems(visitedItems) : null; if (visitedItems.length) {
return this.renderVisitedItems(visitedItems);
}
} }
if (!this.state.isResultGetted || getValueLength(this.inputValue) < 3) { const searchStrLength = getValueLength(this.inputValue);
return (
<span className="loading-icon loading-tip"></span> if (searchStrLength === 0) {
); return <div className="search-result-none">{gettext('Type characters to start search')}</div>;
} }
if (!resultItems.length) { else if (searchStrLength < 3) {
return <div className="search-result-none">{gettext('Type more characters to start search')}</div>;
}
else if (!isResultGetted) {
return <span className="loading-icon loading-tip"></span>;
}
else if (!resultItems.length) {
return ( return (
<> <>
<li className='search-result-item align-items-center' onClick={this.openAsk}> <li className='search-result-item align-items-center' onClick={this.openAsk}>
@@ -546,7 +555,7 @@ export default class AISearch extends Component {
render() { render() {
let width = this.state.width !== 'default' ? this.state.width : ''; let width = this.state.width !== 'default' ? this.state.width : '';
let style = {'width': width}; let style = {'width': width};
const { isMaskShow, isCloseShow, searchMode, answeringResult, resultItems } = this.state; const { isMaskShow, isCloseShow, searchMode } = this.state;
const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + f )`}`; const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + f )`}`;
if (searchMode === SEARCH_MODE.QA) { if (searchMode === SEARCH_MODE.QA) {

84
frontend/src/components/search/search.js
View File

@@ -34,7 +34,7 @@ class Search extends Component {
isLoading: false, isLoading: false,
hasMore: true, hasMore: true,
isMaskShow: false, isMaskShow: false,
isResultShow: false, showRecent: true,
isResultGetted: false, isResultGetted: false,
isCloseShow: false, isCloseShow: false,
isSearchInputShow: false, // for mobile isSearchInputShow: false, // for mobile
@@ -194,6 +194,9 @@ class Search extends Component {
}; };
onChangeHandler = (event) => { onChangeHandler = (event) => {
if (this.state.showRecent) {
this.setState({ showRecent: false });
}
const newValue = event.target.value; const newValue = event.target.value;
this.setState({ value: newValue }, () => { this.setState({ value: newValue }, () => {
if (this.inputValue === newValue.trim()) return; if (this.inputValue === newValue.trim()) return;
@@ -223,7 +226,6 @@ class Search extends Component {
this.setState({ this.setState({
highlightIndex: 0, highlightIndex: 0,
resultItems: [], resultItems: [],
isResultShow: false,
isResultGetted: false isResultGetted: false
}); });
return; return;
@@ -241,7 +243,6 @@ class Search extends Component {
this.source.cancel('prev request is cancelled'); this.source.cancel('prev request is cancelled');
} }
this.setState({ this.setState({
isResultShow: true,
isResultGetted: false, isResultGetted: false,
resultItems: [], resultItems: [],
highlightIndex: 0, highlightIndex: 0,
@@ -281,9 +282,9 @@ class Search extends Component {
}); });
} else { } else {
if (enableSeafileAI) { if (enableSeafileAI) {
this.onAiSearch(queryData, cancelToken) this.onAiSearch(queryData, cancelToken);
} else { } else {
this.onNormalSearch(queryData, cancelToken, page) this.onNormalSearch(queryData, cancelToken, page);
} }
} }
}; };
@@ -293,29 +294,29 @@ class Search extends Component {
queryData['per_page'] = PER_PAGE; queryData['per_page'] = PER_PAGE;
queryData['page'] = page; queryData['page'] = page;
seafileAPI.searchFiles(queryData, cancelToken).then(res => { seafileAPI.searchFiles(queryData, cancelToken).then(res => {
this.source = null; this.source = null;
if (res.data.total > 0) { if (res.data.total > 0) {
this.setState({
resultItems: [...this.state.resultItems, ...this.formatResultItems(res.data.results)],
isResultGetted: true,
isLoading: false,
page: page + 1,
hasMore: res.data.has_more,
});
return;
}
this.setState({ this.setState({
highlightIndex: 0, resultItems: [...this.state.resultItems, ...this.formatResultItems(res.data.results)],
resultItems: [],
isLoading: false,
isResultGetted: true, isResultGetted: true,
isLoading: false,
page: page + 1,
hasMore: res.data.has_more, hasMore: res.data.has_more,
}); });
}).catch(error => { return;
/* eslint-disable */ }
console.log(error); this.setState({
this.setState({ isLoading: false }); highlightIndex: 0,
resultItems: [],
isLoading: false,
isResultGetted: true,
hasMore: res.data.has_more,
}); });
}).catch(error => {
/* eslint-disable */
console.log(error);
this.setState({ isLoading: false });
});
} }
onAiSearch = (params, cancelToken) => { onAiSearch = (params, cancelToken) => {
@@ -381,40 +382,47 @@ class Search extends Component {
value: '', value: '',
isMaskShow: false, isMaskShow: false,
isCloseShow: false, isCloseShow: false,
isResultShow: false,
isResultGetted: false, isResultGetted: false,
resultItems: [], resultItems: [],
highlightIndex: 0, highlightIndex: 0,
isSearchInputShow: false, isSearchInputShow: false,
showRecent: true,
}); });
} }
renderSearchResult() { renderSearchResult() {
const { resultItems, highlightIndex, width } = this.state; const { resultItems, width, showRecent, isResultGetted } = this.state;
if (!width || width === 'default') return null; if (!width || width === 'default') return null;
if (!this.state.isResultShow) { if (showRecent) {
const { repoID } = this.props; const { repoID } = this.props;
let storeKey = 'sfVisitedSearchItems'; let storeKey = 'sfVisitedSearchItems';
if (repoID) { if (repoID) {
storeKey += repoID; storeKey += repoID;
} }
const visitedItems = JSON.parse(localStorage.getItem(storeKey)) || []; const visitedItems = JSON.parse(localStorage.getItem(storeKey)) || [];
return visitedItems.length ? this.renderResults(visitedItems, true) : null; if (visitedItems.length > 0) {
return this.renderResults(visitedItems, true);
}
} }
if (!this.state.isResultGetted || getValueLength(this.inputValue) < 3) { const searchStrLength = getValueLength(this.inputValue);
return (
<span className="loading-icon loading-tip"></span>
);
}
if (!resultItems.length) {
return (
<div className="search-result-none">{gettext('No results matching.')}</div>
);
}
return this.renderResults(resultItems); if (searchStrLength === 0) {
return <div className="search-result-none">{gettext('Type characters to start search')}</div>;
}
else if (searchStrLength < 3) {
return <div className="search-result-none">{gettext('Type more characters to start search')}</div>;
}
else if (!isResultGetted) {
return <span className="loading-icon loading-tip"></span>;
}
else if (resultItems.length > 0) {
return this.renderResults(resultItems);
}
else {
return <div className="search-result-none">{gettext('No results matching.')}</div>;
}
} }
renderResults = (resultItems, isVisited) => { renderResults = (resultItems, isVisited) => {

14
frontend/src/pages/search/main-panel.js
View File

@@ -51,7 +51,7 @@ class SearchViewPanel extends React.Component {
}); });
if (enableSeafileAI) { if (enableSeafileAI) {
this.onAiSearch(params) this.onAiSearch(params);
} else { } else {
this.onNormalSearch(params); this.onNormalSearch(params);
} }
@@ -82,18 +82,18 @@ class SearchViewPanel extends React.Component {
toaster.danger(gettext('Please check the network.'), {duration: 3}); toaster.danger(gettext('Please check the network.'), {duration: 3});
} }
}); });
} };
onAiSearch = (params) => { onAiSearch = (params) => {
let results = []; let results = [];
seafileAPI.aiSearchFiles(params, null).then(res => { seafileAPI.aiSearchFiles(params, null).then(res => {
results = [...results, ...this.formatResultItems(res.data.results)]; results = [...results, ...this.formatResultItems(res.data.results)];
this.setState({ this.setState({
resultItems: results, resultItems: results,
isResultGetted: true, isResultGetted: true,
isLoading: false, isLoading: false,
hasMore: false, hasMore: false,
}); });
}).catch(error => { }).catch(error => {
/* eslint-disable */ /* eslint-disable */
console.log(error); console.log(error);