-
Notifications
You must be signed in to change notification settings - Fork 0
/
Search.jsx
123 lines (108 loc) · 3.71 KB
/
Search.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
const host = "http://localhost:9200/products/product";
const sk = new Searchkit.SearchkitManager(host, {
});
const SearchkitProvider = Searchkit.SearchkitProvider;
const Layout = Searchkit.Layout;
const TopBar = Searchkit.TopBar;
const LayoutBody = Searchkit.LayoutBody;
const SearchBox = Searchkit.SearchBox;
const SideBar = Searchkit.SideBar;
const HierarchicalMenuFilter = Searchkit.HierarchicalMenuFilter;
const RefinementListFilter = Searchkit.RefinementListFilter;
const LayoutResults = Searchkit.LayoutResults;
const MenuFilter = Searchkit.MenuFilter;
const ActionBar = Searchkit.ActionBar;
const ActionBarRow = Searchkit.ActionBarRow;
const HitsStats = Searchkit.HitsStats;
const SelectedFilters = Searchkit.SelectedFilters;
const ResetFilters = Searchkit.ResetFilters;
const Hits = Searchkit.Hits;
const NoHits = Searchkit.NoHits;
function RowItem(props) {
return (
<tr>
<td>{props.row._source.ean}</td>
<td>{props.row._source.article_status}</td>
<td>{props.row._source.fulldesc}</td>
<td>{props.row._source.ukvatcat}</td>
<td>{props.row._source.uom}</td>
<td>{props.row._source.articlenumber}</td>
</tr>);
};
function TableBody(props) {
return (
<tbody>
<RowItem row={props.hits[0]}/>
{props.hits.map(function(row, i){
return(
<RowItem row={row}/>
)
})}
</tbody>
);
}
const HitItem = (props)=>(
<div>
<table className="table table-striped">
<TableBody hits={props.hits}/>
</table>
</div>
);
const App = ()=> (
<SearchkitProvider searchkit={sk}>
<Layout>
<TopBar>
<SearchBox
autofocus={true}
searchOnChange={false}
/>
</TopBar>
<LayoutBody>
<SideBar>
<RefinementListFilter
field="article_status"
title="Article Status"
id="STATUS"/>
<RefinementListFilter
field="articletype"
title="Article Type"
id="ARTTYPE"/>
<RefinementListFilter
field="uom"
title="UOM"
id="UOM"/>
<RefinementListFilter
field="agerestriction"
title="Age Restriction"
id="AGE"/>
<RefinementListFilter
field="wmflag"
title="W&M Flag"
id="WMFlag"/>
<RefinementListFilter
field="priceprompt"
title="Price Prompt Indicator"
id="PRICEPROMPT"/>
<RefinementListFilter
field="ukvatcat"
title="Vat Category UK"
id="VATCAT"/>
</SideBar>
<LayoutResults>
<ActionBar>
<ActionBarRow>
<HitsStats/>
</ActionBarRow>
<ActionBarRow>
<SelectedFilters/>
<ResetFilters/>
</ActionBarRow>
</ActionBar>
<Hits hitsPerPage={10} listComponent={HitItem}/>
<NoHits/>
</LayoutResults>
</LayoutBody>
</Layout>
</SearchkitProvider>
);
ReactDOM.render(<App/>, document.getElementById('app'));