Skip to content

Commit 92766cc

Browse files
chriswhongchriswhong
committed
feat(dataset-view): add dataset-list component
1 parent 9a4baa2 commit 92766cc

File tree

6 files changed

+153
-60
lines changed

6 files changed

+153
-60
lines changed

‎app/components/DatasetList.tsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import * as React from 'react'
2+
3+
const datasets = [
4+
{
5+
id: 1,
6+
title: 'USGS Earthquakes',
7+
name: 'chriswhong/usgs_earthquakes'
8+
},
9+
{
10+
id: 2,
11+
title: 'World Bank Population',
12+
name: 'b5/world_bank_population'
13+
},
14+
{
15+
id: 3,
16+
title: 'Baltimore Bus Timeliness (June 2019)',
17+
name: 'chriswhong/baltimore_bus_timeliness'
18+
},
19+
{
20+
id: 4,
21+
title: 'PLUTO Modified Parcels',
22+
name: 'chriswhong/nyc_pluto_modified_parcels'
23+
}
24+
]
25+
26+
export default class DatasetList extends React.Component<{}, { activeTab: string, filterString: string }> {
27+
constructor (p: {}) {
28+
super(p)
29+
this.state = {
30+
activeTab: 'history',
31+
filterString: ''
32+
}
33+
}
34+
35+
handleTabClick (activeTab: string) {
36+
this.setState({ activeTab })
37+
}
38+
39+
handleFilterKeyUp (e: any) {
40+
this.setState({ filterString: e.target.value })
41+
}
42+
43+
render () {
44+
let filteredDatasets = datasets
45+
const { filterString } = this.state
46+
47+
if (filterString !== '') {
48+
filteredDatasets = datasets.filter((dataset) => {
49+
const lowercasedFilterString = filterString.toLowerCase()
50+
if (dataset.name.toLowerCase().includes(lowercasedFilterString)) return true
51+
if (dataset.title.toLowerCase().includes(lowercasedFilterString)) return true
52+
53+
return false
54+
})
55+
}
56+
57+
const listContent = filteredDatasets.length > 0
58+
? filteredDatasets.map(({ id, title, name }) => (
59+
<div key={id} className='sidebar-list-item sidebar-list-item-text '>
60+
<div className='text'>{title}</div>
61+
<div className='subtext'>{name}</div>
62+
</div>
63+
))
64+
: <div className='sidebar-list-item-text'>Oops, no matches found for <strong>&apos;{filterString}&apos;</strong></div>
65+
66+
return (
67+
<div className='dataset-sidebar'>
68+
<div className='sidebar-list-item sidebar-list-item-text'>
69+
<div id='controls'>
70+
<input
71+
type='text'
72+
name='filter'
73+
placeholder='Filter'
74+
onKeyUp={(e) => this.handleFilterKeyUp(e)}
75+
/>
76+
<div id='add-button'>Add</div>
77+
</div>
78+
<div className='strong-message'>You have {datasets.length} local datasets</div>
79+
</div>
80+
<div id='list'>
81+
{listContent}
82+
</div>
83+
</div>
84+
)
85+
}
86+
}

‎app/components/DatasetSidebar.tsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import * as React from 'react'
22

33
interface FileRowProps {
44
name: string
5+
filename: string
56
}
67

78
const FileRow: React.SFC<FileRowProps> = (props) => {
89
return (
9-
<div className='file-row sidebar-row'>
10-
<div className='label'>{props.name}</div>
10+
<div className='sidebar-list-item sidebar-list-item-text '>
11+
<div className='text'>{props.name}</div>
12+
<div className='subtext'>{props.filename}</div>
1113
</div>
1214
)
1315
}
@@ -20,9 +22,9 @@ interface HistoryListItemProps {
2022

2123
const HistoryListItem: React.SFC<HistoryListItemProps> = (props) => {
2224
return (
23-
<div className='file-row sidebar-row history-list-item'>
24-
<div className='title'>{props.commitTitle}</div>
25-
<div className='userTimeInfo'>
25+
<div className='sidebar-list-item sidebar-list-item-text'>
26+
<div className='text'>{props.commitTitle}</div>
27+
<div className='subtext'>
2628
<img className= 'user-image' src = {props.avatarUrl} />
2729
<div className='time-message'>
2830
{props.userTimeMessage}
@@ -68,21 +70,21 @@ export default class DatasetSidebar extends React.Component<{}, { activeTab: str
6870
render () {
6971
const { activeTab } = this.state
7072
return (
71-
<div id='dataset-sidebar'>
72-
<div id='tabs' className='sidebar-row'>
73+
<div className='dataset-sidebar'>
74+
<div id='tabs' className='sidebar-list-item'>
7375
<div className={'tab ' + (activeTab === 'status' ? 'active' : '')} onClick={() => this.handleTabClick('status')}>Status</div>
7476
<div className={'tab ' + (activeTab === 'status' ? '' : 'active')} onClick={() => this.handleTabClick('history')}>History</div>
7577
</div>
7678
<div id='content'>
7779
<div id='status-content' className='sidebar-content' hidden = {activeTab !== 'status'}>
78-
<div className='sidebar-row'>
80+
<div className='sidebar-list-item'>
7981
<div className='changes'>
8082
Changes
8183
</div>
8284
</div>
83-
<FileRow name='Meta' />
84-
<FileRow name='Body' />
85-
<FileRow name='Schema' />
85+
<FileRow name='Meta' filename='meta.json' />
86+
<FileRow name='Body' filename='body.csv' />
87+
<FileRow name='Schema' filename='schema.json' />
8688
</div>
8789
<div id='history-content' className='sidebar-content' hidden = {activeTab === 'status'}>
8890
{

‎app/containers/DatasetContainer.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react'
22
import { Resizable } from '../components/resizable'
33
import DatasetSidebar from '../components/DatasetSidebar'
4+
import DatasetList from '../components/DatasetList'
45

56
const defaultSidebarWidth = 250
67
const logo = require('../assets/qri-blob-logo-tiny.png') //eslint-disable-line
@@ -73,7 +74,7 @@ export default class DatasetContainer extends React.Component<{}, { showDatasetL
7374
className='dataset-list'
7475
style={{ width: sidebarWidth }}
7576
>
76-
Dataset List
77+
<DatasetList />
7778
</div>
7879
)
7980
}

‎app/scss/_dataset-container.scss

Lines changed: 35 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
.content {
5959
background-color: #d8d8d8;
6060
flex: 1;
61+
position: relative;
6162

6263
.overlay {
6364
position: absolute;
@@ -130,32 +131,21 @@
130131
// Dataset Sidebar //
131132
////////////////////////////
132133

133-
#dataset-sidebar {
134+
.dataset-sidebar {
134135
height: 100%;
135-
width: 100%;
136-
137-
.sidebar-row {
138-
width: 100%;
139-
font-size: .9rem;
140-
border-bottom: 1px solid #979797;
141-
cursor: default;
142-
&:last-child {
143-
border-right: 0;
144-
}
145-
}
136+
font-size: .9rem;
137+
cursor: default;
146138

147139
#tabs {
148-
width: 100%;
149140
height: 30px;
150-
background-color: #FFF;
151-
cursor: default;
141+
display: flex;
152142

153143
.tab {
154144
width: 50%;
155-
display: inline-block;
156145
height: 100%;
157-
padding: 6px;
146+
flex: 1;
158147
text-align: center;
148+
line-height: 1.9rem;
159149
border-right: 1px solid #979797;
160150

161151
&:last-child {
@@ -178,50 +168,47 @@
178168
background-color: #F6F8FA;
179169
}
180170

181-
.file-row {
182-
height: 60px;
183-
padding: 8px;
171+
$list-item-bottom-border: 1px solid #979797;
172+
$sidebar-item-padding: 8px;
184173

185-
.label {
186-
font-weight: 600;
187-
font-size: 1.2rem;
188-
}
189-
190-
&:hover {
191-
background-color: #efefef;
192-
}
174+
// sidebar list items
175+
.sidebar-list-item {
176+
border-bottom: $list-item-bottom-border;
177+
display: flex;
193178
}
194-
}
195179

196-
////////////////////////////
197-
// History List Item //
198-
////////////////////////////
180+
.sidebar-list-item-text {
181+
padding: $sidebar-item-padding;
182+
flex-direction: column;
199183

200-
.history-list-item {
201-
.title {
202-
white-space: nowrap;
203-
text-overflow: ellipsis;
204-
overflow: hidden;
205-
line-height: 1.6rem;
206-
}
184+
.text {
185+
white-space: nowrap;
186+
text-overflow: ellipsis;
187+
overflow: hidden;
188+
line-height: 1.6rem;
189+
}
207190

208-
.userTimeInfo {
209-
display: flex;
191+
.subtext {
192+
display: flex;
210193

211-
.user-image {
212-
height: 16px;
213-
width: 16px;
214-
margin-right: 4px;
215-
border-radius: 2px;
216-
}
194+
.user-image {
195+
height: 16px;
196+
width: 16px;
197+
margin-right: 4px;
198+
border-radius: 2px;
199+
}
217200

218-
.time-message {
219201
flex: 1;
220202
font-size: .65rem;
221203
line-height: 1.2rem;
222204
white-space: nowrap;
223205
text-overflow: ellipsis;
224206
overflow: hidden;
225207
}
208+
209+
.strong-message {
210+
font-weight: 500;
211+
font-size: 0.8rem;
212+
}
226213
}
227214
}

‎app/scss/_dataset-list.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.dataset-list {
2+
#controls {
3+
display: flex;
4+
flex-direction: row;
5+
padding-bottom: 6px;
6+
7+
input {
8+
margin-right: 10px;
9+
flex: 1;
10+
}
11+
12+
#add-button {
13+
align-self: flex-end;
14+
}
15+
}
16+
}

‎app/scss/style.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
@import "stylesheet";
2525

2626
@import "dataset-container";
27+
@import "dataset-list";
2728

2829
#app, #app-container {
2930
height: 100%;

0 commit comments

Comments
 (0)