Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Catalog
catalog.genesys-pgr.org
Commits
200e45e4
Commit
200e45e4
authored
Jul 05, 2018
by
Matija Obreza
Browse files
Dashboard filters
parent
41240111
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/constants/dashboard.ts
0 → 100644
View file @
200e45e4
export
const
DASHBOARD_FILTERFORM
=
'
Form/DASHBOARD_FILTERFORM
'
;
src/ui/pages/dashboard/DashboardPage.tsx
View file @
200e45e4
...
...
@@ -4,6 +4,7 @@ import Grid from 'material-ui/Grid';
import
{
bindActionCreators
}
from
'
redux
'
;
import
{
parse
}
from
'
query-string
'
;
import
{
filterCodeToUrl
}
from
'
actions/filterCode
'
;
import
{
createPartner
}
from
'
actions/partner
'
;
import
{
createDataset
,
listMyDatasets
}
from
'
actions/dataset
'
;
import
{
createDescriptor
,
listMyDescriptors
}
from
'
actions/descriptors
'
;
...
...
@@ -56,29 +57,11 @@ class AdministrationDashboard extends BaseMyDataPage<IAdminDashProps> {
this
.
props
.
history
.
push
(
'
/dashboard/data-published
'
);
}
protected
onPaginationChange
=
(
page
,
results
,
sortBy
,
dir
)
=>
{
const
{
history
,
location
}
=
this
.
props
;
const
params
=
new
URLSearchParams
(
location
.
search
);
params
.
set
(
'
p
'
,
page
);
params
.
set
(
'
l
'
,
results
);
if
(
sortBy
)
{
params
.
set
(
'
s
'
,
sortBy
);
}
else
{
params
.
delete
(
'
s
'
);
}
if
(
dir
)
{
params
.
set
(
'
d
'
,
dir
);
}
else
{
params
.
delete
(
'
d
'
);
}
location
.
search
=
params
.
toString
();
history
.
push
(
location
);
}
public
render
()
{
const
{
tab
,
datasets
,
descriptors
,
descriptorLists
,
createPartner
,
createDescriptor
,
createDescriptorList
}
=
this
.
props
;
const
{
tab
,
datasets
,
descriptors
,
descriptorLists
,
createPartner
,
createDescriptor
,
createDescriptorList
,
filter
,
filterCode
}
=
this
.
props
;
// console.log('Dash', tab, filterCode, filter);
let
paged
:
Page
<
any
>
=
datasets
as
Page
<
Dataset
>
;
...
...
@@ -125,7 +108,7 @@ class AdministrationDashboard extends BaseMyDataPage<IAdminDashProps> {
</
Grid
>
</
div
>
<
MyDataTable
tab
=
{
tab
}
basePath
=
"/dashboard"
<
MyDataTable
tab
=
{
tab
}
basePath
=
"/dashboard"
filterCode
=
{
filterCode
}
filter
=
{
filter
}
onFilter
=
{
this
.
onFilter
}
paged
=
{
paged
}
onPaginationChange
=
{
this
.
onPaginationChange
}
/>
</
div
>
);
...
...
@@ -139,6 +122,8 @@ const mapStateToProps = (state, ownProps) => ({
pageSize
:
+
parse
(
ownProps
.
location
.
search
).
l
||
20
,
// page size
pageSort
:
parse
(
ownProps
.
location
.
search
).
s
||
'
lastModifiedDate
'
,
// page sort
pageDir
:
parse
(
ownProps
.
location
.
search
).
d
||
'
DESC
'
,
// page sort direction
filterCode
:
parse
(
ownProps
.
location
.
search
).
filter
,
// filter code
filter
:
state
.
filterCode
.
filters
&&
parse
(
ownProps
.
location
.
search
).
filter
&&
state
.
filterCode
.
filters
[
parse
(
ownProps
.
location
.
search
).
filter
]
||
null
,
datasets
:
state
.
datasets
.
paged
,
descriptors
:
state
.
descriptors
.
paged
,
descriptorLists
:
state
.
descriptorList
.
paged
,
...
...
@@ -153,6 +138,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
listDescriptors
:
listMyDescriptors
,
listDescriptorLists
:
listMyDescriptorLists
,
setPageTitle
,
filterCodeToUrl
,
},
dispatch
);
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
AdministrationDashboard
);
src/ui/pages/dashboard/MyDataPage.tsx
View file @
200e45e4
...
...
@@ -8,6 +8,7 @@ import {Descriptor, DescriptorList} from 'model/descriptor.model';
import
{
Page
}
from
'
model/common.model
'
;
import
{
parse
}
from
'
query-string
'
;
import
{
filterCodeToUrl
}
from
'
actions/filterCode
'
;
import
{
listMyDatasets
}
from
'
actions/dataset
'
;
import
{
listMyDescriptors
}
from
'
actions/descriptors
'
;
import
{
listMyDescriptorLists
}
from
'
actions/descriptorList
'
;
...
...
@@ -24,11 +25,14 @@ interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
pageSize
:
number
;
pageSort
?:
string
;
pageDir
?:
string
;
filterCode
?:
string
;
filter
:
any
;
datasets
:
Page
<
Dataset
>
;
descriptors
:
Page
<
Descriptor
>
;
descriptorLists
:
Page
<
DescriptorList
>
;
preFilter
?:
object
;
basePath
:
string
;
filterCodeToUrl
:
any
;
listDescriptorLists
:
any
;
listDescriptors
:
any
;
listDatasets
:
any
;
...
...
@@ -44,18 +48,19 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
const
pageSize
=
parse
(
search
).
l
;
const
pageSort
=
parse
(
search
).
s
;
const
pageDir
=
parse
(
search
).
d
;
const
filterCode
=
parse
(
search
).
filter
;
switch
(
tab
)
{
case
'
descriptors
'
:
return
listMyDescriptors
(
pageCurrent
,
pageSize
,
pageSort
,
{},
pageDir
);
case
'
descriptorlists
'
:
return
listMyDescriptorLists
(
pageCurrent
,
pageSize
,
pageSort
,
{},
pageDir
);
case
'
descriptors
'
:
return
listMyDescriptors
(
pageCurrent
,
pageSize
,
pageSort
,
filterCode
||
{},
pageDir
);
case
'
descriptorlists
'
:
return
listMyDescriptorLists
(
pageCurrent
,
pageSize
,
pageSort
,
filterCode
||
{},
pageDir
);
case
'
datasets
'
:
default
:
return
listMyDatasets
(
pageCurrent
,
pageSize
,
pageSort
,
{},
pageDir
);
default
:
return
listMyDatasets
(
pageCurrent
,
pageSize
,
pageSort
,
filterCode
||
{},
pageDir
);
}
},
];
constructor
(
props
)
{
super
(
props
);
this
.
state
=
{
tab
:
''
};
this
.
state
=
{
tab
:
''
,
filterCode
:
props
.
filterCode
};
}
public
componentDidMount
()
{
...
...
@@ -64,8 +69,9 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
public
componentWillMount
()
{
const
{
tab
,
pageCurrent
,
pageSize
,
pageSort
,
pageDir
}
=
this
.
props
;
// console.log(`willM ${filterCode}`, filters[filterCode]);
this
.
loadData
(
tab
,
pageCurrent
,
pageSize
,
pageSort
,
pageDir
);
this
.
loadData
(
null
,
tab
,
pageCurrent
,
pageSize
,
pageSort
,
pageDir
);
}
public
componentWillUnmount
()
{
...
...
@@ -73,9 +79,18 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
}
public
componentWillReceiveProps
(
nextProps
)
{
const
{
tab
,
pageCurrent
,
pageSize
,
pageSort
,
pageDir
}
=
nextProps
;
const
{
filterCodeToUrl
}
=
this
.
props
;
const
paged
=
this
.
getPaged
(
nextProps
);
this
.
loadData
(
tab
,
pageCurrent
,
pageSize
,
pageSort
,
pageDir
);
if
(
paged
)
{
filterCodeToUrl
(
paged
.
filterCode
);
}
const
{
tab
}
=
nextProps
;
if
(
tab
!==
this
.
state
.
tab
)
{
const
{
pageCurrent
,
pageSize
,
pageSort
,
pageDir
}
=
nextProps
;
this
.
loadData
(
null
,
tab
,
pageCurrent
,
pageSize
,
pageSort
,
pageDir
);
}
}
public
componentWillUpdate
(
nextProps
,
nextState
)
{
...
...
@@ -86,6 +101,15 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
// noop
}
protected
getPaged
(
props
)
{
switch
(
props
.
tab
)
{
case
'
descriptorlists
'
:
return
props
.
descriptorLists
;
case
'
descriptors
'
:
return
props
.
descriptors
;
case
'
datasets
'
:
default
:
return
props
.
datasets
;
}
}
protected
onPaginationChange
=
(
page
,
results
,
sortBy
,
dir
)
=>
{
const
{
history
,
location
}
=
this
.
props
;
const
params
=
new
URLSearchParams
(
location
.
search
);
...
...
@@ -104,28 +128,38 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
location
.
search
=
params
.
toString
();
history
.
push
(
location
);
const
{
tab
}
=
this
.
props
;
this
.
loadData
(
null
,
tab
,
page
,
results
,
sortBy
,
dir
);
}
protected
loadData
(
tab
,
page
,
size
,
sortBy
,
dir
)
{
const
{
listDatasets
,
listDescriptors
,
listDescriptorLists
,
preFilter
}
=
this
.
props
;
protected
onFilter
=
(
newFilters
)
=>
{
this
.
setState
({...
this
.
state
,
filter
:
newFilters
})
;
const
filters
=
preFilter
;
const
{
tab
,
pageCurrent
,
pageSize
,
pageSort
,
pageDir
}
=
this
.
props
;
this
.
loadData
(
newFilters
,
tab
,
pageCurrent
,
pageSize
,
pageSort
,
pageDir
);
}
if
(
this
.
state
.
tab
!==
tab
||
this
.
state
.
pageCurrent
!==
page
||
this
.
state
.
pageSize
!==
size
||
this
.
state
.
pageSort
!==
sortBy
||
this
.
state
.
pageDir
!==
dir
)
{
protected
loadData
(
filter
,
tab
,
page
,
size
,
sortBy
,
dir
)
{
const
{
listDatasets
,
listDescriptors
,
listDescriptorLists
,
preFilter
,
filterCode
}
=
this
.
props
;
const
newFilters
=
filter
&&
{
...
preFilter
,
...
filter
};
// console.log(`Filters code=${filterCode}`, newFilters, preFilter);
if
(
newFilters
||
this
.
state
.
tab
!==
tab
||
this
.
state
.
pageCurrent
!==
page
||
this
.
state
.
pageSize
!==
size
||
this
.
state
.
pageSort
!==
sortBy
||
this
.
state
.
pageDir
!==
dir
)
{
// console.log('Reloading');
this
.
setState
(
update
(
this
.
state
,
{
tab
:
{
$set
:
tab
},
pageCurrent
:
{
$set
:
page
},
pageSize
:
{
$set
:
size
},
pageSort
:
{
$set
:
sortBy
},
pageDir
:
{
$set
:
dir
},
filterCode
:
{
$set
:
filterCode
},
}));
switch
(
tab
)
{
case
'
descriptors
'
:
listDescriptors
(
page
,
size
,
sortBy
,
filter
s
,
dir
);
break
;
case
'
descriptorlists
'
:
listDescriptorLists
(
page
,
size
,
sortBy
,
filter
s
,
dir
);
break
;
case
'
descriptors
'
:
listDescriptors
(
page
,
size
,
sortBy
,
newFilters
||
filter
Code
,
dir
);
break
;
case
'
descriptorlists
'
:
listDescriptorLists
(
page
,
size
,
sortBy
,
newFilters
||
filter
Code
,
dir
);
break
;
case
'
datasets
'
:
default
:
listDatasets
(
page
,
size
,
sortBy
,
filter
s
,
dir
);
break
;
default
:
listDatasets
(
page
,
size
,
sortBy
,
newFilters
||
filter
Code
,
dir
);
break
;
}
}
else
{
// noop
...
...
@@ -142,21 +176,14 @@ class DP extends BaseMyDataPage<any> {
}
public
render
()
{
const
{
title
,
tab
,
basePath
,
datasets
,
descriptors
,
descriptorLists
}
=
this
.
props
;
const
{
title
,
tab
,
basePath
,
filterCode
,
filter
}
=
this
.
props
;
let
paged
:
Page
<
any
>
=
datasets
;
switch
(
tab
)
{
case
'
descriptorlists
'
:
paged
=
descriptorLists
;
break
;
case
'
descriptors
'
:
paged
=
descriptors
;
break
;
case
'
datasets
'
:
default
:
break
;
}
const
paged
=
this
.
getPaged
(
this
.
props
);
return
(
<
div
>
<
ContentHeaderWithButton
title
=
{
title
}
buttons
=
{
<
BackButton
defaultTarget
=
"/dashboard"
defaultBackText
=
"BACK TO DASHBOARD"
preferDefaultTarget
=
"true"
/>
}
/>
<
MyDataTable
tab
=
{
tab
}
basePath
=
{
basePath
}
<
MyDataTable
tab
=
{
tab
}
basePath
=
{
basePath
}
filterCode
=
{
filterCode
}
filter
=
{
filter
}
onFilter
=
{
this
.
onFilter
}
paged
=
{
paged
}
onPaginationChange
=
{
this
.
onPaginationChange
}
/>
</
div
>
);
...
...
@@ -172,6 +199,8 @@ const mapStateToProps = (state, ownProps) => ({
pageSize
:
+
parse
(
ownProps
.
location
.
search
).
l
||
20
,
// page size
pageSort
:
parse
(
ownProps
.
location
.
search
).
s
,
// page sort
pageDir
:
parse
(
ownProps
.
location
.
search
).
d
,
// page sort direction
filterCode
:
parse
(
ownProps
.
location
.
search
).
filter
,
// filter code
filter
:
state
.
filterCode
.
filters
&&
parse
(
ownProps
.
location
.
search
).
filter
&&
state
.
filterCode
.
filters
[
parse
(
ownProps
.
location
.
search
).
filter
]
||
null
,
datasets
:
state
.
datasets
.
paged
,
descriptors
:
state
.
descriptors
.
paged
,
descriptorLists
:
state
.
descriptorList
.
paged
,
...
...
@@ -182,6 +211,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
listDescriptors
:
listMyDescriptors
,
listDescriptorLists
:
listMyDescriptorLists
,
setPageTitle
,
filterCodeToUrl
,
},
dispatch
);
const
MyDataPage
=
connect
(
...
...
src/ui/pages/dashboard/c/Filters.tsx
0 → 100644
View file @
200e45e4
import
*
as
React
from
'
react
'
;
import
{
reduxForm
}
from
'
redux-form
'
;
import
{
DASHBOARD_FILTERFORM
}
from
'
constants/dashboard
'
;
import
FiltersBlock
from
'
ui/common/filter/FiltersBlock
'
;
import
CollapsibleComponentSearch
from
'
ui/common/filter/CollapsibleComponentSearch
'
;
import
CropFilter
from
'
ui/catalog/crop/CropFilter
'
;
import
TextFilter
from
'
ui/common/filter/TextFilter
'
;
import
Authorize
from
'
ui/common/authorized/Authorize
'
;
import
PartnerFilter
from
'
ui/catalog/partner/PartnerFilter
'
;
const
DashboardFilters
=
({
handleSubmit
,
initialize
,
...
other
})
=>
(
<
FiltersBlock
title
=
"Filters"
handleSubmit
=
{
handleSubmit
}
initialize
=
{
initialize
}
{
...
other
}
>
<
TextFilter
name
=
"_text"
label
=
"Keyword search"
placeholder
=
"mardi rice"
className
=
"p-20"
/>
<
Authorize
role
=
"ROLE_ADMINISTRATOR"
>
<
PartnerFilter
name
=
"owner"
label
=
"Select owner"
className
=
"p-20"
/>
</
Authorize
>
<
CollapsibleComponentSearch
title
=
"Crop"
>
<
CropFilter
/>
</
CollapsibleComponentSearch
>
</
FiltersBlock
>
);
export
default
reduxForm
({
enableReinitialize
:
true
,
form
:
DASHBOARD_FILTERFORM
,
})(
DashboardFilters
);
src/ui/pages/dashboard/c/MyDataTable.tsx
View file @
200e45e4
import
*
as
React
from
'
react
'
;
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
{
Page
}
from
'
model/common.model
'
;
...
...
@@ -10,17 +11,28 @@ import {DatasetLink, DescriptorLink, DescriptorListLink} from 'ui/catalog/Links'
import
PrettyDate
from
'
ui/common/time/PrettyDate
'
;
import
Markdown
from
'
ui/catalog/markdown
'
;
import
Permissions
from
'
ui/common/permission/Permissions
'
;
import
{
ScrollToTopOnMount
}
from
'
ui/common/page/scrollers
'
;
import
DashboardFilters
from
'
./Filters
'
;
import
Paper
from
'
material-ui/Paper
'
;
import
Button
from
'
material-ui/Button
'
;
import
Grid
from
'
material-ui/Grid
'
;
interface
IDatasetLinkProps
extends
React
.
Props
<
any
>
{
const
styles
=
(
theme
)
=>
({
filterSection
:
theme
.
leftPanel
.
root
,
});
interface
IMyDataTableProps
extends
React
.
Props
<
any
>
{
classes
?:
any
;
tab
:
string
;
basePath
:
string
;
paged
:
Page
<
any
>
;
onPaginationChange
:
(
page
:
number
,
results
:
number
,
sortBy
:
string
,
dir
?:
string
)
=>
void
;
pageSort
?:
string
;
onFilter
:
(
filter
)
=>
void
;
filter
:
any
;
filterCode
?:
string
;
}
const
defaultSortOptions
=
{
...
...
@@ -41,12 +53,16 @@ const descriptorListSortOptions = {
...
defaultSortOptions
,
};
export
default
function
MyDataTable
({
function
MyDataTable
({
classes
,
tab
,
basePath
,
paged
,
onPaginationChange
,
}:
IDatasetLinkProps
)
{
onFilter
,
filter
,
filterCode
,
}:
IMyDataTableProps
)
{
if
(
!
paged
)
{
return
null
;
...
...
@@ -74,55 +90,67 @@ export default function MyDataTable({
}
};
const
query
=
filterCode
?
`?filter=
${
filterCode
}
`
:
''
;
// console.log(`DF initialValues ${query}`, filter);
return
(
<
div
>
<
Tabs
tab
=
{
tab
}
>
<
Tab
name
=
"datasets"
to
=
{
basePath
}
>
Datasets
</
Tab
>
<
Tab
name
=
"descriptors"
to
=
{
`
${
basePath
}
/descriptors`
}
>
Descriptors
</
Tab
>
<
Tab
name
=
"descriptorlists"
to
=
{
`
${
basePath
}
/descriptorlists`
}
>
Descriptor lists
</
Tab
>
<
Tab
name
=
"datasets"
to
=
{
`
${
basePath
}${
query
}
`
}
>
Datasets
</
Tab
>
<
Tab
name
=
"descriptors"
to
=
{
`
${
basePath
}
/descriptors
${
query
}
`
}
>
Descriptors
</
Tab
>
<
Tab
name
=
"descriptorlists"
to
=
{
`
${
basePath
}
/descriptorlists
${
query
}
`
}
>
Descriptor lists
</
Tab
>
</
Tabs
>
<
PaginationComponent
displayName
=
"records"
pageObj
=
{
paged
}
onChange
=
{
onPaginationChange
}
sortOptions
=
{
sortOptions
}
/>
<
Grid
container
spacing
=
{
0
}
>
<
ContentContainer
>
<
Paper
>
<
Table
widths
=
{
[
'
10px
'
,
'
30%
'
,
null
,
null
,
null
,
null
,
'
210px
'
]
}
headers
=
{
(
<
TableRow
>
<
TableCell
style
=
{
{
maxWidth
:
'
10px
'
}
}
>
No.
</
TableCell
>
<
TableCell
>
Title
</
TableCell
>
<
TableCell
style
=
{
{
maxWidth
:
'
30px
'
}
}
>
Owner
</
TableCell
>
<
TableCell
>
Created
</
TableCell
>
<
TableCell
>
Modified
</
TableCell
>
<
TableCell
style
=
{
{
maxWidth
:
'
60px
'
}
}
>
Status
</
TableCell
>
<
TableCell
style
=
{
{
maxWidth
:
'
210px
'
}
}
/>
</
TableRow
>
)
}
>
{
paged
&&
paged
.
content
.
map
((
row
,
i
)
=>
(
<
TableRow
key
=
{
row
.
id
}
>
<
TableCell
className
=
"font-bold"
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
{
paged
.
size
*
paged
.
number
+
i
+
1
}
</
TableCell
>
<
TableCell
className
=
"font-bold"
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
<
ResolveLink
row
=
{
row
}
>
{
<
Markdown
basic
source
=
{
row
.
title
}
/>
||
(<
i
>
Untitled
</
i
>)
}
</
ResolveLink
>
</
TableCell
>
<
TableCell
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
{
row
.
owner
.
shortName
}
</
TableCell
>
<
TableCell
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
{
row
.
createdDate
&&
<
PrettyDate
value
=
{
row
.
createdDate
}
/>
}
</
TableCell
>
<
TableCell
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
{
row
.
lastModifiedDate
&&
<
PrettyDate
value
=
{
row
.
lastModifiedDate
}
/>
}
</
TableCell
>
<
TableCell
style
=
{
{
color
:
row
.
published
?
'
#88bb41
'
:
'
#ed9506
'
,
fontSize
:
'
1rem
'
}
}
>
{
row
.
published
?
'
Published
'
:
'
In progress
'
}
</
TableCell
>
<
TableCell
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
<
ResolveLink
row
=
{
row
}
>
<
Button
raised
>
{
row
.
published
&&
row
.
_permissions
.
write
?
'
VIEW
'
:
'
EDIT
'
}
</
Button
>
</
ResolveLink
>
{
row
.
_permissions
.
manage
&&
<
Permissions
clazz
=
{
row
.
clazz
}
id
=
{
row
.
id
}
/>
}
</
TableCell
>
</
TableRow
>
),
)
}
</
Table
>
</
Paper
>
</
ContentContainer
>
<
ScrollToTopOnMount
/>
<
Grid
container
spacing
=
{
0
}
>
<
Grid
item
xs
=
{
12
}
md
=
{
3
}
lg
=
{
2
}
className
=
{
classes
.
filterSection
}
>
<
DashboardFilters
initialValues
=
{
filter
}
onSubmit
=
{
onFilter
}
/>
</
Grid
>
<
PaginationComponent
displayName
=
"records"
pageObj
=
{
paged
}
onChange
=
{
onPaginationChange
}
sortOptions
=
{
sortOptions
}
/>
<
Grid
item
xs
=
{
12
}
md
=
{
9
}
lg
=
{
10
}
className
=
"back-gray"
>
<
PaginationComponent
displayName
=
"records"
pageObj
=
{
paged
}
onChange
=
{
onPaginationChange
}
sortOptions
=
{
sortOptions
}
/>
<
Grid
container
spacing
=
{
0
}
>
<
ContentContainer
>
<
Paper
>
<
Table
widths
=
{
[
'
10px
'
,
'
30%
'
,
null
,
null
,
null
,
null
,
'
210px
'
]
}
headers
=
{
(
<
TableRow
>
<
TableCell
style
=
{
{
maxWidth
:
'
10px
'
}
}
>
No.
</
TableCell
>
<
TableCell
>
Title
</
TableCell
>
<
TableCell
style
=
{
{
maxWidth
:
'
30px
'
}
}
>
Owner
</
TableCell
>
<
TableCell
>
Created
</
TableCell
>
<
TableCell
>
Modified
</
TableCell
>
<
TableCell
style
=
{
{
maxWidth
:
'
60px
'
}
}
>
Status
</
TableCell
>
<
TableCell
style
=
{
{
maxWidth
:
'
210px
'
}
}
/>
</
TableRow
>
)
}
>
{
paged
&&
paged
.
content
.
map
((
row
,
i
)
=>
(
<
TableRow
key
=
{
row
.
id
}
>
<
TableCell
className
=
"font-bold"
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
{
paged
.
size
*
paged
.
number
+
i
+
1
}
</
TableCell
>
<
TableCell
className
=
"font-bold"
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
<
ResolveLink
row
=
{
row
}
>
{
<
Markdown
basic
source
=
{
row
.
title
}
/>
||
(<
i
>
Untitled
</
i
>)
}
</
ResolveLink
>
</
TableCell
>
<
TableCell
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
{
row
.
owner
.
shortName
}
</
TableCell
>
<
TableCell
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
{
row
.
createdDate
&&
<
PrettyDate
value
=
{
row
.
createdDate
}
/>
}
</
TableCell
>
<
TableCell
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
{
row
.
lastModifiedDate
&&
<
PrettyDate
value
=
{
row
.
lastModifiedDate
}
/>
}
</
TableCell
>
<
TableCell
style
=
{
{
color
:
row
.
published
?
'
#88bb41
'
:
'
#ed9506
'
,
fontSize
:
'
1rem
'
}
}
>
{
row
.
published
?
'
Published
'
:
'
In progress
'
}
</
TableCell
>
<
TableCell
style
=
{
{
fontSize
:
'
1rem
'
}
}
>
<
ResolveLink
row
=
{
row
}
>
<
Button
raised
>
{
row
.
published
&&
row
.
_permissions
.
write
?
'
VIEW
'
:
'
EDIT
'
}
</
Button
>
</
ResolveLink
>
{
row
.
_permissions
.
manage
&&
<
Permissions
clazz
=
{
row
.
clazz
}
id
=
{
row
.
id
}
/>
}
</
TableCell
>
</
TableRow
>
),
)
}
</
Table
>
</
Paper
>
</
ContentContainer
>
</
Grid
>
<
PaginationComponent
displayName
=
"records"
pageObj
=
{
paged
}
onChange
=
{
onPaginationChange
}
sortOptions
=
{
sortOptions
}
/>
</
Grid
>
</
Grid
>
</
div
>
);
}
export
default
withStyles
(
styles
)(
MyDataTable
);
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment