Skip to content
Snippets Groups Projects
Commit 081e7dfc authored by cns82's avatar cns82
Browse files

add icons and dynamic paging

parent f6c7cac5
Branches
No related tags found
No related merge requests found
File added
File added
File added
import React, { useState } from 'react';
import DataGrid, { Scrolling, Sorting, LoadPanel, Column } from 'devextreme-react/data-grid';
import DataGrid, { Scrolling, Sorting, LoadPanel, Column, MasterDetail, Paging } from 'devextreme-react/data-grid';
import TextBox from 'devextreme-react/text-box';
import "./search.css"
import axios from "axios";
import { LoadIndicator } from 'devextreme-react/load-indicator';
import TextArea from 'devextreme-react/text-area';
function search(query) {
const PAGE_SIZE = 25
function search(query, startIdx=0, endIdx=PAGE_SIZE+1) {
const config = {
method: 'get',
url: '/api/search?q=' + query
url: '/api/search?q=' + query + "&startIdx=" + startIdx + "&endIdx=" + endIdx
};
return axios(config);
}
let TextView = function (e) {
let result = e.data.data
return (
<div>
<TextArea
height={350}
value={JSON.stringify(result, null, 4)}
/>
<Scrolling mode="virtual" rowRenderingMode="virtual" />
</div>
)
}
let SearchEngine = function () {
const [queryResult, setQueryResult] = useState([]);
const [query, setQuery] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [prevPage, setPrevPage] = useState(0);
const [maxPage, setMaxPage] = useState(0);
const parseESData = (data) => {
......@@ -31,6 +52,11 @@ let SearchEngine = function () {
newObj["title"] = row["_source"]["title"]
newObj["authors"] = row["_source"]["authors"]
newObj["score"] = row["_score"]
newObj["country"] = row["_source"]["country"]
newObj["doi"] = row["_source"]["doi"]
newObj["journal"] = row["_source"]["journal"]
newObj["pmid"] = row["_source"]["pmid"]
newObj["published_at"] = row["_source"]["published_at"]
parsedData.push(newObj)
}
return parsedData
......@@ -39,15 +65,37 @@ let SearchEngine = function () {
const handleSubmit = (e) => {
e.preventDefault();
setIsLoading(true)
search(e.target[0].value).then((res) => {
let query = e.target[0].value
search(query).then((res) => {
let parsedRes = parseESData(res.data)
setQuery(query)
setQueryResult(parsedRes)
setIsLoading(false)
}).catch((error) => {
console.log(error)
setIsLoading(false)
})
}
const handlePageChange = (e) => {
let curPage = e.component.pageIndex()
if (curPage < prevPage){
setPrevPage(curPage)
return
} else if (curPage > prevPage && curPage > maxPage){
setIsLoading(true)
search(query, curPage*PAGE_SIZE+1, ((curPage+1)*PAGE_SIZE)+1).then((res) => {
let parsedRes = parseESData(res.data)
setQueryResult(queryResult.concat(parsedRes))
setIsLoading(false)
setMaxPage(curPage)
}).catch((error) => {
console.log(error)
setIsLoading(false)
})
setPrevPage(curPage)
}
}
return (
......@@ -78,13 +126,18 @@ let SearchEngine = function () {
keyExpr="id"
showBorders={false}
allowColumnResizing={true}
onContentReady={handlePageChange}
>
<MasterDetail
enabled={true}
component={TextView}
/>
<Column dataField="id" width={75}/>
<Column dataField="title" caption={"Title"} dataType="string" />
<Column dataField="authors" caption={"Authors"} dataType="string" />
<Column dataField="score" caption={"Score"} width={75} dataType="string" />
<Sorting mode="none" />
<Scrolling mode="virtual" />
<Paging pageSize={PAGE_SIZE} visible={true}/>
<LoadPanel enabled={true} />
</DataGrid>
</div>
......
......@@ -30,8 +30,10 @@ def search():
keywords = request.args.get('q', default = "", type = str)
start_idx = request.args.get('startIdx', default = 0, type = int)
end_idx = request.args.get('endIdx', default = 25, type = int)
query = {
"from" : 0, "size" : 25,
"from" : start_idx, "size" : end_idx,
"query": {
"multi_match" : {
"query": keywords,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment