From 9f77147d42d0deb64bf8caec4e021c965fd8d54f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 29 Mar 2019 15:47:18 +0100 Subject: [PATCH] ask for date, populate dateCreated from it --- .../components/atoms/Form/Input.module.scss | 69 +------------------ .../atoms/Form/InputDate.module.scss | 69 +++++++++++++++++++ client/src/data/form-publish.json | 6 ++ client/src/routes/Publish/index.tsx | 21 ++++-- 4 files changed, 91 insertions(+), 74 deletions(-) create mode 100644 client/src/components/atoms/Form/InputDate.module.scss diff --git a/client/src/components/atoms/Form/Input.module.scss b/client/src/components/atoms/Form/Input.module.scss index 571f4a5..e3c0607 100644 --- a/client/src/components/atoms/Form/Input.module.scss +++ b/client/src/components/atoms/Form/Input.module.scss @@ -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 { diff --git a/client/src/components/atoms/Form/InputDate.module.scss b/client/src/components/atoms/Form/InputDate.module.scss new file mode 100644 index 0000000..b9e800d --- /dev/null +++ b/client/src/components/atoms/Form/InputDate.module.scss @@ -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; +} diff --git a/client/src/data/form-publish.json b/client/src/data/form-publish.json index 588ed38..1e34387 100644 --- a/client/src/data/form-publish.json +++ b/client/src/data/form-publish.json @@ -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 } } }, diff --git a/client/src/routes/Publish/index.tsx b/client/src/routes/Publish/index.tsx index 5c558de..9d1f1de 100644 --- a/client/src/routes/Publish/index.tsx +++ b/client/src/routes/Publish/index.tsx @@ -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,