Skip to content
GitLab
Menu
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
c8310d25
Commit
c8310d25
authored
Apr 26, 2018
by
Maxym Borodenko
Browse files
UX/UI for Descriptors and Descriptor Lists
parent
b74376e0
Changes
24
Hide whitespace changes
Inline
Side-by-side
package-lock.json
View file @
c8310d25
...
...
@@ -12365,9 +12365,9 @@
}
},
"react": {
"version": "16.
2.0
",
"resolved": "https://registry.npmjs.org/react/-/react-16.
2.0
.tgz",
"integrity": "sha512-
ZmIomM7EE1DvPEnSFAHZn9Vs9zJl5A9H7el0EGTE6ZbW9FKe/14IYAlPbC8iH25YarEQxZL+E8VW7Mi7kfQrDQ
==",
"version": "16.
3.2
",
"resolved": "https://registry.npmjs.org/react/-/react-16.
3.2
.tgz",
"integrity": "sha512-
o5GPdkhciQ3cEph6qgvYB7LTOHw/GB0qRI6ZFNugj49qJCFfgHwVNjZ5u+b7nif4vOeMIOuYj3CeYe2IBD74lg
==",
"requires": {
"fbjs": "0.8.16",
"loose-envify": "1.3.1",
...
...
src/actions/descriptorList.ts
View file @
c8310d25
...
...
@@ -116,8 +116,6 @@ export const saveDescriptorList = (descriptorList: DescriptorList) => (dispatch,
.
then
((
descriptorList
)
=>
{
// receive the updated descriptor list
dispatch
(
receiveDescriptorList
(
descriptorList
));
// and redirect to proper edit page
return
dispatch
(
push
(
`/descriptorlists/
${
descriptorList
.
uuid
}
/edit`
));
}).
catch
((
error
)
=>
{
log
(
`Error saving descriptor list`
,
error
,
descriptorList
);
});
...
...
@@ -129,8 +127,6 @@ export const deleteDescriptorList = (descriptorList: DescriptorList) => (dispatc
.
then
((
descriptorList
)
=>
{
// receive updates
dispatch
(
receiveDescriptorList
(
descriptorList
));
// go to the published descriptor list page
dispatch
(
push
(
`/descriptorlist`
));
});
};
...
...
src/ui/catalog/descriptor/DescriptorPicker.tsx
View file @
c8310d25
...
...
@@ -14,7 +14,8 @@ import {log} from 'utilities/debug';
interface
IDescriptorPickerProps
extends
React
.
ClassAttributes
<
any
>
{
classes
:
any
;
router
:
any
;
history
:
any
;
location
:
any
;
loadDescriptors
:
(
page
?:
number
,
results
?:
number
,
sortBy
?:
string
,
filter
?:
IDescriptorFilter
,
order
?:
string
)
=>
void
;
matchingDescriptors
:
Page
<
Descriptor
>
;
// results from loadDescriptors
onAddDescriptor
:
(
descriptor
:
Descriptor
)
=>
void
;
// event handler
...
...
@@ -74,14 +75,17 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
}
protected
onPaginationChange
=
(
page
,
results
,
sortBy
,
dir
)
=>
{
log
(
'
onPaginationChange
'
,
page
,
results
,
sortBy
);
const
{
router
,
router
:
{
location
}}
=
this
.
props
;
location
.
query
.
p
=
page
;
location
.
query
.
l
=
results
;
location
.
query
.
s
=
sortBy
;
location
.
query
.
d
=
dir
;
router
.
push
(
location
);
const
{
history
,
location
}
=
this
.
props
;
const
params
=
new
URLSearchParams
();
params
.
append
(
'
p
'
,
page
);
params
.
append
(
'
l
'
,
results
);
params
.
append
(
'
s
'
,
sortBy
);
if
(
dir
)
{
params
.
append
(
'
d
'
,
dir
);
}
location
.
search
=
params
.
toString
();
history
.
push
(
location
);
}
protected
applyFilters
=
(
newFilters
)
=>
{
...
...
src/ui/catalog/descriptor/DescriptorUpload.tsx
View file @
c8310d25
import
*
as
React
from
'
react
'
;
// import {connect} from 'react-redux';
// import {bindActionCreators} from 'redux';
import
{
log
}
from
'
utilities/debug
'
;
...
...
@@ -8,13 +6,10 @@ import { CSV, ICsvConfiguration } from 'utilities/CSV';
import
{
Descriptor
}
from
'
model/descriptor.model
'
;
import
{
VocabularyTerm
}
from
'
model/vocabulary.model
'
;
import
ContentHeaderWithButton
from
'
ui/common/heading/ContentHeaderWithButton
'
;
import
CSVConfiguration
from
'
ui/common/csv-configuration/CSVConfiguration
'
;
import
DescriptorCard
from
'
ui/catalog/descriptor/DescriptorCard
'
;
import
Grid
from
'
material-ui/Grid
'
;
import
Paper
from
'
material-ui/Paper
'
;
import
Button
from
'
material-ui/Button
'
;
import
FormControl
from
'
material-ui/Form/FormControl
'
;
import
Input
from
'
material-ui/Input
'
;
import
InputLabel
from
'
material-ui/Input/InputLabel
'
;
...
...
@@ -22,7 +17,7 @@ import InputLabel from 'material-ui/Input/InputLabel';
interface
IDescriptorUpload
extends
React
.
ClassAttributes
<
any
>
{
className
?:
any
;
onImport
:
(
d
escriptors
:
Descriptor
[])
=>
any
;
onImport
D
escriptors
:
any
;
}
// Page to edit a descriptor list
...
...
@@ -133,73 +128,48 @@ class DescriptorUpload extends React.Component<IDescriptorUpload, any> {
}).
on
(
'
end
'
,
()
=>
{
log
(
'
All CSV parsed
'
);
this
.
setState
({
...
this
.
state
,
uploader
:
true
,
uploadedDescriptors
:
newDescriptors
});
//
this.props.on
AccessionsUpdated(newIdentifie
rs);
this
.
props
.
on
ImportDescriptors
(
newDescripto
rs
);
});
}
public
clickImport
=
(
e
)
=>
{
// log('Sending', this.state.uploadedDescriptors);
if
(
this
.
state
.
uploadedDescriptors
&&
this
.
state
.
uploadedDescriptors
.
length
>
0
)
{
this
.
props
.
onImport
(
this
.
state
.
uploadedDescriptors
);
}
else
{
log
(
'
Nothing to import
'
);
}
}
public
render
()
{
return
(
<
div
>
<
Paper
className
=
{
`
${
this
.
props
.
className
}
p-20 mb-20`
}
>
<
div
className
=
"p-20 even-row"
>
<
h4
>
INSTRUCTIONS FOR USE
</
h4
>
<
ul
>
<
li
>
Use "Descriptors" sheet from template:
<
a
href
=
"/templates/genesys-catalog-template.xlsx"
target
=
"_blank"
>
Genesys Catalog template
</
a
>
.
</
li
>
<
li
>
Do not change header names in the template!
</
li
>
<
li
>
Fill the template with the descriptor information, save it.
</
li
>
<
li
>
Copy and paste the table from Excel into the text field below.
</
li
>
</
ul
>
</
div
>
<
CSVConfiguration
onChange
=
{
this
.
onUpdateCsvConfig
}
config
=
{
this
.
state
.
csvConfig
}
/>
<
FormControl
fullWidth
>
<
InputLabel
>
Descriptor definitions
</
InputLabel
>
<
Input
onPaste
=
{
this
.
dataPasted
}
placeholder
=
"Paste descriptor data here (tab separated)"
onBlur
=
{
this
.
textBlurred
}
/>
</
FormControl
>
</
Paper
>
{
this
.
state
.
uploadedDescriptors
?
(
<
div
>
<
ContentHeaderWithButton
title
=
{
`Uploaded
${
this
.
state
.
uploadedDescriptors
.
length
}
descriptor definitions`
}
buttons
=
{
<
Button
raised
onClick
=
{
this
.
clickImport
}
>
Import descriptors
</
Button
>
}
/>
<
Grid
container
spacing
=
{
24
}
>
{
this
.
state
.
uploadedDescriptors
.
map
((
d
,
index
)
=>
(
<
Grid
item
key
=
{
index
}
xs
=
{
12
}
md
=
{
6
}
xl
=
{
4
}
>
<
DescriptorCard
descriptor
=
{
d
}
/>
</
Grid
>
))
}
</
Grid
>
</
div
>
)
:
(
<
ContentHeaderWithButton
title
=
"No descriptors uploaded"
/>
)
}
</
div
>
<
div
className
=
{
`
${
this
.
props
.
className
}
m-20 p-20 even-row`
}
>
<
div
>
<
h4
>
INSTRUCTIONS FOR USE
</
h4
>
<
ul
>
<
li
>
Use "Descriptors" sheet from template:
<
a
href
=
"/templates/genesys-catalog-template.xlsx"
target
=
"_blank"
>
Genesys Catalog template
</
a
>
.
</
li
>
<
li
>
Do not change header names in the template!
</
li
>
<
li
>
Fill the template with the descriptor information, save it.
</
li
>
<
li
>
Copy and paste the table from Excel into the text field below.
</
li
>
</
ul
>
</
div
>
<
CSVConfiguration
onChange
=
{
this
.
onUpdateCsvConfig
}
config
=
{
this
.
state
.
csvConfig
}
/>
<
FormControl
fullWidth
>
<
InputLabel
>
Descriptor definitions
</
InputLabel
>
<
Input
onPaste
=
{
this
.
dataPasted
}
placeholder
=
"Paste descriptor data here (tab separated)"
onBlur
=
{
this
.
textBlurred
}
/>
</
FormControl
>
{
this
.
state
.
uploadedDescriptors
?
(
<
div
style
=
{
{
'
margin-top
'
:
'
23px
'
}
}
>
<
h3
>
{
`Uploaded
${
this
.
state
.
uploadedDescriptors
.
length
}
descriptor definitions`
}
</
h3
>
<
Grid
container
spacing
=
{
24
}
>
{
this
.
state
.
uploadedDescriptors
.
map
((
d
,
index
)
=>
(
<
Grid
item
key
=
{
index
}
xs
=
{
12
}
md
=
{
6
}
xl
=
{
4
}
>
<
DescriptorCard
descriptor
=
{
d
}
/>
</
Grid
>
))
}
</
Grid
>
</
div
>
)
:
(
<
h3
>
No descriptors uploaded
</
h3
>
)
}
</
div
>
);
}
}
//
// const mapStateToProps = (state, ownProps) => ({
// descriptorList: ownProps.descriptorList,
// });
//
// const mapDispatchToProps = (dispatch) => bindActionCreators({
// addDescriptorToDescriptorList,
// removeDescriptorFromDescriptorList,
// }, dispatch);
//
// export default connect(mapStateToProps, mapDispatchToProps)(DescriptorListEditPage);
export
default
DescriptorUpload
;
src/ui/common/reorderable/DescriptorOrder.tsx
View file @
c8310d25
import
*
as
React
from
'
react
'
;
import
Paper
from
'
material-ui/Paper
'
;
import
Button
from
'
material-ui/Button
'
;
import
List
from
'
material-ui/List
'
;
import
{
DragDropContext
}
from
'
react-dnd
'
;
import
HTML5Backend
from
'
react-dnd-html5-backend
'
;
...
...
@@ -11,8 +9,7 @@ import Card from './Card';
interface
IDescriptorOrderProps
extends
React
.
ClassAttributes
<
any
>
{
descriptors
:
Descriptor
[];
onDone
:
(
descriptors
:
Descriptor
[])
=>
void
;
onCancel
?:
()
=>
void
;
onRef
?:
any
;
}
class
DescriptorOrder
extends
React
.
PureComponent
<
IDescriptorOrderProps
,
any
>
{
...
...
@@ -27,16 +24,17 @@ class DescriptorOrder extends React.PureComponent<IDescriptorOrderProps, any> {
};
}
public
componentDidMount
()
{
const
{
onRef
}
=
this
.
props
;
onRef
(
this
);
}
public
componentWillReceiveProps
(
nextProps
)
{
const
{
descriptors
=
[]
}
=
nextProps
;
this
.
setState
(()
=>
({
descriptors
:
[
...
descriptors
]
}));
}
protected
saveOrder
=
()
=>
{
this
.
props
.
onDone
(
this
.
state
.
descriptors
);
}
public
moveCard
=
(
dragIndex
:
number
,
hoverIndex
:
number
)
=>
{
const
{
descriptors
}
=
this
.
state
;
const
dragCard
=
descriptors
[
dragIndex
];
...
...
@@ -51,10 +49,9 @@ class DescriptorOrder extends React.PureComponent<IDescriptorOrderProps, any> {
}
public
render
()
{
const
{
onCancel
}
=
this
.
props
;
const
{
descriptors
}
=
this
.
state
;
return
(
<
Paper
className
=
"p-20"
>
<
div
className
=
"p-20"
>
<
List
>
{
descriptors
.
map
((
descriptor
,
i
)
=>
(
<
Card
...
...
@@ -66,9 +63,7 @@ class DescriptorOrder extends React.PureComponent<IDescriptorOrderProps, any> {
/>
))
}
</
List
>
<
Button
raised
onClick
=
{
this
.
saveOrder
}
>
Save order
</
Button
>
<
Button
onClick
=
{
onCancel
}
>
Cancel
</
Button
>
</
Paper
>
</
div
>
);
}
}
...
...
src/ui/
pages/dataset/dataset-
stepper/BottomSection.tsx
→
src/ui/
common/
stepper/BottomSection.tsx
View file @
c8310d25
File moved
src/ui/
pages/dataset/dataset-
stepper/StepNavigation.tsx
→
src/ui/
common/
stepper/StepNavigation.tsx
View file @
c8310d25
...
...
@@ -86,8 +86,8 @@ class StepNavigation extends React.Component<IStepNavigationProps, any> {
</
h3
>
<
div
className
=
{
classes
.
flexGrow
}
/>
{
this
.
state
.
id
===
1
&&
(
<
Button
onClick
=
{
onDelete
}
className
=
{
classes
.
btnDelete
}
>
Delete data
set
<
Button
disabled
=
{
disabled
}
onClick
=
{
onDelete
}
className
=
{
classes
.
btnDelete
}
>
Delete data
</
Button
>
)
}
...
...
src/ui/
pages/dataset/dataset-
stepper/TopSection.tsx
→
src/ui/
common/
stepper/TopSection.tsx
View file @
c8310d25
...
...
@@ -39,7 +39,7 @@ const styles = (theme) => ({
},
});
const
TopSection
=
({
classes
,
pageTitle
})
=>
(
const
TopSection
=
({
classes
,
pageTitle
,
subTitle
})
=>
(
<
Grid
container
spacing
=
{
0
}
className
=
{
classes
.
root
}
>
<
Grid
item
xs
=
{
12
}
className
=
{
classes
.
header
}
>
<
h1
className
=
"white mb-5 font-bold"
style
=
{
{
marginBottom
:
0
,
fontSize
:
'
1.714rem
'
}
}
>
...
...
@@ -47,13 +47,13 @@ const TopSection = ({classes, pageTitle}) => (
</
h1
>
<
Hidden
implementation
=
"css"
smDown
>
<
h3
className
=
"font-medium white m-0"
style
=
{
{
marginTop
:
'
.5rem
'
,
fontSize
:
'
0.8571rem
'
}
}
>
Publish your datasets
{
subTitle
}
</
h3
>
</
Hidden
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
className
=
{
classes
.
subHeader
}
>
<
h4
className
=
"font-bold m-0 lh-35"
>
Data
set
publication
Data publication
</
h4
>
<
div
className
=
{
classes
.
flexGrow
}
/>
<
div
className
=
{
classes
.
guide
}
>
...
...
src/ui/
pages/dataset/dataset-
stepper/progress-menu/StepProgress.tsx
→
src/ui/
common/
stepper/progress-menu/StepProgress.tsx
View file @
c8310d25
File moved
src/ui/
pages/dataset/dataset-
stepper/progress-menu/StepsListItem.tsx
→
src/ui/
common/
stepper/progress-menu/StepsListItem.tsx
View file @
c8310d25
File moved
src/ui/
pages/dataset/dataset-
stepper/progress-menu/index.tsx
→
src/ui/
common/
stepper/progress-menu/index.tsx
View file @
c8310d25
File moved
src/ui/pages/dataset/dataset-stepper/index.tsx
View file @
c8310d25
...
...
@@ -6,14 +6,14 @@ import Grid from 'material-ui/Grid';
import
{
log
}
from
'
utilities/debug
'
;
import
confirm
from
'
utilities/confirmAlert
'
;
import
ProgressMenu
from
'
./progress-menu
'
;
import
TopSection
from
'
./TopSection
'
;
import
BottomSection
from
'
./BottomSection
'
;
import
ProgressMenu
from
'
ui/common/stepper/progress-menu
'
;
import
TopSection
from
'
ui/common/stepper/TopSection
'
;
import
BottomSection
from
'
ui/common/stepper/BottomSection
'
;
import
StepNavigation
from
'
ui/common/stepper/StepNavigation
'
;
import
{
navigateTo
}
from
'
actions/navigation
'
;
import
{
setPageTitle
}
from
'
actions/pageTitle
'
;
import
{
loadDataset
,
publishDataset
,
deleteDataset
}
from
'
actions/dataset
'
;
import
{
Dataset
}
from
'
model/dataset.model
'
;
import
StepNavigation
from
'
./StepNavigation
'
;
import
Loading
from
'
ui/common/Loading
'
;
import
renderRoutes
from
'
ui/renderRoutes
'
;
...
...
@@ -148,7 +148,7 @@ class DatasetStepper extends React.Component<IDatasetProps, any> {
return
(
<
Grid
container
spacing
=
{
0
}
>
<
TopSection
pageTitle
=
{
pageTitle
}
/>
<
TopSection
pageTitle
=
{
pageTitle
}
subTitle
=
"Publish your datasets"
/>
<
Grid
item
xs
=
{
12
}
md
=
{
9
}
xl
=
{
10
}
className
=
"back-gray p-20"
>
<
Grid
container
spacing
=
{
0
}
className
=
"back-white"
>
<
StepNavigation
disabled
=
{
!
(
dataset
&&
dataset
.
uuid
)
}
onGotoStep
=
{
this
.
gotoStep
}
onDelete
=
{
this
.
onDelete
}
steps
=
{
steps
}
location
=
{
location
}
showStepName
bottomDivider
onPublish
=
{
this
.
onPublish
}
/>
...
...
src/ui/pages/dataset/dataset-stepper/steps/traits/index.tsx
View file @
c8310d25
...
...
@@ -42,7 +42,7 @@ class Traits extends React.Component<any, any> {
}
public
render
()
{
const
{
matchingDescriptors
,
loadDescriptors
,
dataset
,
router
,
listCrops
,
pagination
}
=
this
.
props
;
const
{
matchingDescriptors
,
loadDescriptors
,
dataset
,
history
,
location
,
listCrops
,
pagination
}
=
this
.
props
;
return
(
<
DescriptorPicker
...
...
@@ -51,7 +51,8 @@ class Traits extends React.Component<any, any> {
currentDescriptors
=
{
dataset
.
descriptors
}
onAddDescriptor
=
{
this
.
addDescriptor
}
onRemoveDescriptor
=
{
this
.
removeDescriptor
}
router
=
{
router
}
history
=
{
history
}
location
=
{
location
}
pagination
=
{
pagination
}
listCrops
=
{
listCrops
}
classes
=
{
{}
}
...
...
src/ui/pages/descriptorlist/DisplayPage.tsx
View file @
c8310d25
import
*
as
React
from
'
react
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
bindActionCreators
}
from
'
redux
'
;
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
{
log
}
from
'
utilities/debug
'
;
import
{
loadDescriptorList
,
publishDescriptorList
,
...
...
@@ -13,25 +11,12 @@ import {
setDescriptorsToDescriptorList
,
}
from
'
actions/descriptorList
'
;
import
{
copyDescriptor
}
from
'
actions/descriptors
'
;
import
{
DescriptorList
,
Descriptor
}
from
'
model/descriptor.model
'
;
import
confirm
from
'
utilities/confirmAlert
'
;
import
Authorize
from
'
ui/common/authorized/Authorize
'
;
import
{
DescriptorList
}
from
'
model/descriptor.model
'
;
import
Loading
from
'
ui/common/Loading
'
;
import
Markdown
from
'
ui/catalog/markdown
'
;
import
DescriptorCard
from
'
ui/catalog/descriptor/DescriptorCard
'
;
import
ContentHeaderWithButton
from
'
ui/common/heading/ContentHeaderWithButton
'
;
import
{
PartnerLink
,
DescriptorListLink
,
CropLink
,
DescriptorLink
,
ExternalLink
}
from
'
ui/catalog/Links
'
;
import
{
Properties
,
PropertiesItem
}
from
'
ui/catalog/Properties
'
;
import
BackButton
from
'
ui/common/buttons/BackButton
'
;
import
{
ScrollToTopOnMount
}
from
'
ui/common/page/scrollers
'
;
import
Permissions
from
'
ui/common/permission/Permissions
'
;
import
Grid
from
'
material-ui/Grid
'
;
import
Card
,
{
CardHeader
,
CardContent
,
CardActions
}
from
'
ui/common/Card
'
;
import
Section
from
'
ui/common/layout/Section
'
;
import
Divider
from
'
material-ui/Divider
'
;
import
Button
from
'
material-ui/Button
'
;
import
DescriptorListDisplay
from
'
./c/DescriptorListDisplay
'
;
interface
IDescriptorListPageProps
extends
React
.
ClassAttributes
<
any
>
{
classes
:
any
;
...
...
@@ -46,225 +31,49 @@ interface IDescriptorListPageProps extends React.ClassAttributes<any> {
}
const
styles
=
(
theme
)
=>
({
filterSection
:
theme
.
leftPanel
.
root
,
contentContainer
:
{
backgroundColor
:
'
#E8E5E0
'
,
padding
:
'
1.5rem
'
,
},
card
:
{
marginBottom
:
'
1.5rem
'
,
},
propertiesContainer
:
{
marginTop
:
'
20px
'
,
marginBottom
:
'
20px
'
,
},
propertiesRow
:
{
/* tslint:disable */
'
marginTop
'
:
'
1px
'
,
'
marginBottom
'
:
'
1px
'
,
'
& > *:first-child
'
:
{
borderRight
:
'
solid 1px white
'
,
},
'
&:nth-child(even)
'
:
{
backgroundColor
:
'
#f8f7f5
'
,
},
'
&:nth-child(odd)
'
:
{
backgroundColor
:
'
#f3f2ee
'
,
},
/* tslint:enable */
},
contentContainer
:
{
backgroundColor
:
'
#E8E5E0
'
,
padding
:
'
1.5rem
'
,
},
});
// Page to edit a descriptor list
class
DescriptorListPage
extends
React
.
Component
<
IDescriptorListPageProps
,
any
>
{
protected
static
needs
=
[
({
params
:
{
uuid
}
})
=>
loadDescriptorList
(
uuid
),
];
public
componentWillMount
()
{
const
{
uuid
,
loading
,
loadDescriptorList
}
=
this
.
props
;
if
(
uuid
&&
(
!
loading
||
loading
.
uuid
!==
uuid
))
{
loadDescriptorList
(
uuid
);
}
}
private
onPublish
=
(
e
)
=>
{
const
{
descriptorList
,
publishDescriptorList
}
=
this
.
props
;
confirm
(<
span
>
Publish
<
b
>
{
descriptorList
.
title
}
</
b
>
?
</
span
>,
{
description
:
`After publishing the descriptor list no changes are permitted, a new version must be created.`
,
confirmLabel
:
'
Publish
'
,
abortLabel
:
'
Cancel
'
,
}).
then
(()
=>
{
log
(
'
Publishing descriptor list
'
,
descriptorList
);
publishDescriptorList
(
descriptorList
);
}).
catch
(()
=>
{
// don't
});
}
private
onUnpublish
=
(
e
)
=>
{
const
{
descriptorList
,
publishDescriptorList
}
=
this
.
props
;
confirm
(<
span
>
Unpublish
<
b
>
{
descriptorList
.
title
}
</
b
>
?
</
span
>,
{
// description: `Deleting the descriptor is only possible when there is no associated data.`,
confirmLabel
:
'
Unpublish
'
,
abortLabel
:
'
Cancel
'
,
}).
then
(()
=>
{
log
(
'
Publishing descriptor list
'
,
descriptorList
);
publishDescriptorList
(
descriptorList
,
false
);
}).
catch
(()
=>
{
// don't
});
}
private
onDelete
=
(
e
)
=>
{
const
{
descriptorList
,
deleteDescriptorList
}
=
this
.
props
;
confirm
(<
span
>
Delete
<
b
>
{
descriptorList
.
title
}
</
b
>
?
</
span
>,
{
description
:
`Deleting the descriptor is only possible when there is no associated data.`
,
confirmLabel
:
'
Delete
'
,
abortLabel
:
'
Cancel
'
,
}).
then
(()
=>
{
deleteDescriptorList
(
descriptorList
);
}).
catch
(()
=>
{
// don't
});
}
private
createNewDescriptorVersion
=
(
descriptor
:
Descriptor
)
=>
async
()
=>
{
const
{
descriptorList
,
copyDescriptor
,
setDescriptorsToDescriptorList
}
=
this
.
props
;
try
{
await
confirm
(<
span
>
Create a new version of the descriptor
<
b
>
{
descriptor
.
title
}
</
b
>
?
</
span
>,
{
description
:
`Creating the new descriptor version will replace current descriptor from the descriptor list.`
,
confirmLabel
:
'
Create new version
'
,
abortLabel
:
'
Cancel
'
,
});
protected
static
needs
=
[
({
params
:
{
uuid
}
})
=>
loadDescriptorList
(
uuid
),
];
const
copy
=
new
Descriptor
({
...
descriptor
,
owner
:
descriptorList
.
owner
,
});
public
componentWillMount
()
{
const
{
uuid
,
loading
,
loadDescriptorList
}
=
this
.
props
;
const
newDescriptor
=
await
copyDescriptor
(
copy
);
const
descriptorsUuid
=
descriptorList
.
descriptors
.
map
((
d
)
=>
d
.
uuid
===
descriptor
.
uuid
?
newDescriptor
.
uuid
:
d
.
uuid
);
await
setDescriptorsToDescriptorList
(
descriptorList
,
descriptorsUuid
);
}
catch
(
e
)
{
// Cancel
}
if
(
uuid
&&
(
!
loading
||
loading
.
uuid
!==
uuid
))
{
loadDescriptorList
(
uuid
);
}
private
getDescriptorActionButton
=
(
descriptor
:
Descriptor
)
=>
{
const
{
descriptorList
}
=
this
.
props
;
if
(
!
descriptorList
.
published
&&
descriptorList
.
_permissions
.
write
)
{
if
(
descriptor
.
published
)
{
return
<
Button
onClick
=
{
this
.
createNewDescriptorVersion
(
descriptor
)
}
type
=
"button"
>
Create new version
</
Button
>;
}
public
render
()
{
const
{
classes
,
uuid
,
descriptorList
,
publishDescriptorList
,
deleteDescriptorList
,
setDescriptorsToDescriptorList
,
copyDescriptor
}
=
this
.
props
;
const
stillLoading
:
boolean
=
(
!
descriptorList
||
(
uuid
&&
(
descriptorList
.
uuid
!==
uuid
)));
return
(
<
div
>
<
ScrollToTopOnMount
/>
<
ContentHeaderWithButton
title
=
"Descriptor list details"
buttons
=
{
<
BackButton
defaultTarget
=
"/descriptorlists"
/>
}
/>
{
stillLoading
?
<
Loading
className
=
{
classes
.
contentContainer
}
/>
:
<
span
>
<
DescriptorListDisplay
descriptorList
=
{
descriptorList
}
publishDescriptorList
=
{
publishDescriptorList
}
deleteDescriptorList
=
{
deleteDescriptorList
}
setDescriptorsToDescriptorList
=
{
setDescriptorsToDescriptorList
}
copyDescriptor
=
{
copyDescriptor
}
/>
</
span
>
}
return
(
<
DescriptorLink
to
=
{
descriptor
}
edit
>
<
Button
>
Edit
</
Button
>
</
DescriptorLink
>
);
}
return
null
;
}
public
render
()
{
const
{
classes
,
uuid
,
descriptorList
}
=
this
.
props
;
const
stillLoading
:
boolean
=
(
!
descriptorList
||
(
uuid
&&
(
descriptorList
.
uuid
!==
uuid
)));
return
(
<
div
>
<
ScrollToTopOnMount
/>
<
ContentHeaderWithButton
title
=
"Descriptor list details"
buttons
=
{
<
BackButton
defaultTarget
=
"/descriptorlists"
/>
}
/>
{
stillLoading
?
<
Loading
className
=
{
classes
.
contentContainer
}
/>
:
<
span
>
<
Grid
container
className
=
{
classes
.
contentContainer
}
>
<
Grid
item
xs
=
{
12
}
>
<
Card
className
=
{
classes
.
card
}
square
>
<
CardHeader
className
=
{
classes
.
cardHeader
}
title
=
{
(
<
span
><
Markdown
basic
source
=
{
descriptorList
.
title
}
/>
<
small
>
{
descriptorList
.
versionTag
}
</
small
></
span
>
)
}
/>
<
Divider
/>