oceanprotocol
/
commons
mirror of https://github.com/oceanprotocol/commons.git
1
0
Fork 0
Code Releases Activity

ask for date, populate dateCreated from it

This commit is contained in:
Matthias Kretschmann 2019-03-29 15:47:18 +01:00
parent 78873ac4bf
commit 9f77147d42
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 91 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
client/src/components/atoms/Form/Input.module.scss
View File

@ -1,4 +1,5 @@
@import '../../../styles/variables';
@import './InputDate.module.scss';
.inputWrap {
background: $brand-gradient;
@ -165,74 +166,6 @@
align-items: center;
}
//
// Date picker
//
:global .react-datepicker {
font-family: inherit;
color: inherit;
border-color: $brand-black;
}
:global .react-datepicker__header {
background: $brand-black;
border-radius: 0;
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name,
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
color: $brand-white;
}
}
:global .react-datepicker__current-month,
:global .react-datepicker-time__header,
:global .react-datepicker-year-header,
:global .react-datepicker__day-name {
font-weight: $font-weight-bold;
}
:global .react-datepicker__month-container {
float: none;
}
:global .react-datepicker-popper {
max-width: 16rem;
}
:global .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle:before,
:global .react-datepicker__year-read-view--down-arrow:before,
:global .react-datepicker__month-read-view--down-arrow:before,
:global .react-datepicker__month-year-read-view--down-arrow:before {
border-top-color: $brand-black;
}
:global .react-datepicker__day--selected,
:global .react-datepicker__day--in-selecting-range,
:global .react-datepicker__day--in-range,
:global .react-datepicker__month-text--selected,
:global .react-datepicker__month-text--in-selecting-range,
:global .react-datepicker__month-text--in-range {
background-color: $brand-black;
border-radius: 50%;
font-weight: $font-weight-bold;
}
:global .react-datepicker__day:hover,
:global .react-datepicker__month-text:hover {
background-color: $brand-pink;
border-radius: 50%;
font-weight: $font-weight-bold;
color: $brand-white;
}
:global .react-datepicker__day--outside-month {
color: $brand-grey-light;
}
// Size modifiers
.inputSmall {

69
client/src/components/atoms/Form/InputDate.module.scss Normal file
View File

@ -0,0 +1,69 @@
@import '../../../styles/variables';
//
// Date picker
//
:global .react-datepicker {
font-family: inherit;
color: inherit;
border-color: $brand-black;
}
:global .react-datepicker__header {
background: $brand-black;
border-radius: 0;
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name,
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
color: $brand-white;
}
}
:global .react-datepicker__current-month,
:global .react-datepicker-time__header,
:global .react-datepicker-year-header,
:global .react-datepicker__day-name {
font-weight: $font-weight-bold;
}
:global .react-datepicker__month-container {
float: none;
}
:global .react-datepicker-popper {
max-width: 16rem;
}
:global .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle:before,
:global .react-datepicker__year-read-view--down-arrow:before,
:global .react-datepicker__month-read-view--down-arrow:before,
:global .react-datepicker__month-year-read-view--down-arrow:before {
border-top-color: $brand-black;
}
:global .react-datepicker__day--selected,
:global .react-datepicker__day--in-selecting-range,
:global .react-datepicker__day--in-range,
:global .react-datepicker__month-text--selected,
:global .react-datepicker__month-text--in-selecting-range,
:global .react-datepicker__month-text--in-range {
background-color: $brand-black;
border-radius: 50%;
font-weight: $font-weight-bold;
}
:global .react-datepicker__day:hover,
:global .react-datepicker__month-text:hover {
background-color: $brand-pink;
border-radius: 50%;
font-weight: $font-weight-bold;
color: $brand-white;
}
:global .react-datepicker__day--outside-month {
color: $brand-grey-light;
}

6
client/src/data/form-publish.json
View File

@ -70,6 +70,12 @@
"Communication & Journalism",
"Other"
]
},
"dateCreated": {
"label": "Creation Date",
"description": "Select the date the asset was created, or was updated for the last time.",
"type": "date",
"required": true
}
}
},

21
client/src/routes/Publish/index.tsx
View File

@ -13,7 +13,7 @@ type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
interface PublishState {
name?: string
dateCreated?: Date
dateCreated?: string
description?: string
files?: string[]
price?: number
@ -35,7 +35,7 @@ class Publish extends Component<{}, PublishState> {
public state = {
currentStep: 1,
name: '',
dateCreated: new Date(),
dateCreated: '',
description: '',
files: [],
price: 0,
@ -50,7 +50,12 @@ class Publish extends Component<{}, PublishState> {
publishingError: '',
validationStatus: {
1: { name: false, files: false, allFieldsValid: false },
2: { description: false, categories: false, allFieldsValid: false },
2: {
description: false,
categories: false,
dateCreated: false,
allFieldsValid: false
},
3: {
author: false,
copyrightHolder: false,
@ -102,7 +107,7 @@ class Publish extends Component<{}, PublishState> {
private toStart = () => {
this.setState({
name: '',
dateCreated: new Date(),
dateCreated: '',
description: '',
files: [],
price: 0,
@ -184,7 +189,11 @@ class Publish extends Component<{}, PublishState> {
//
// Step 2
//
if (validationStatus[2].description && validationStatus[2].categories) {
if (
validationStatus[2].description &&
validationStatus[2].categories &&
validationStatus[2].dateCreated
) {
this.setState(prevState => ({
validationStatus: {
...prevState.validationStatus,
@ -250,7 +259,7 @@ class Publish extends Component<{}, PublishState> {
base: Object.assign(AssetModel.base, {
name: this.state.name,
description: this.state.description,
dateCreated: new Date().toString(),
dateCreated: new Date(this.state.dateCreated).toString(),
author: this.state.author,
license: this.state.license,
copyrightHolder: this.state.copyrightHolder,