From 1e26329d38039cd209da33622181b688749b98be Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 16 Sep 2021 09:06:50 +0200
Subject: [PATCH] #101 - Added now button to datetime

---
 CHANGELOG.md                                  |  1 +
 assets/media/styles.css                       | 17 ++++++++++++
 .../{DateTime.tsx => DateTimeField.tsx}       | 26 ++++++++++++-------
 src/viewpanel/components/Metadata.tsx         | 14 +++++-----
 4 files changed, 40 insertions(+), 18 deletions(-)
 rename src/viewpanel/components/Fields/{DateTime.tsx => DateTimeField.tsx} (64%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c2805322..e5f191af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - [#101](https://github.com/estruyf/vscode-front-matter/issues/101): Date picker available on the metadata section
 - [#102](https://github.com/estruyf/vscode-front-matter/issues/102): Support comma separated arrays in front matter
+- [#103](https://github.com/estruyf/vscode-front-matter/issues/103): Added title and description field to the metadata section
 
 ## [3.1.0] - 2021-09-10
 
diff --git a/assets/media/styles.css b/assets/media/styles.css
index 9a3030da..8c6ebccb 100644
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -437,6 +437,23 @@ input:checked + .field__toggle__slider:before {
   margin-top: .25rem;
 }
 
+.metadata_field__datetime {
+  display: flex;
+  justify-content: space-between;
+}
+
+.metadata_field__datetime > .react-datepicker-wrapper {
+  margin-right: 1rem;
+}
+
+.metadata_field__datetime > button {
+  color: var(--vscode-button-secondaryForeground);
+  background-color: var(--vscode-button-secondaryBackground);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: auto;
+}
+
 /* File list */
 .file_list vscode-label {
   border-bottom: 1px solid var(--vscode-foreground);
diff --git a/src/viewpanel/components/Fields/DateTime.tsx b/src/viewpanel/components/Fields/DateTimeField.tsx
similarity index 64%
rename from src/viewpanel/components/Fields/DateTime.tsx
rename to src/viewpanel/components/Fields/DateTimeField.tsx
index ad5d418b..b18b0c65 100644
--- a/src/viewpanel/components/Fields/DateTime.tsx
+++ b/src/viewpanel/components/Fields/DateTimeField.tsx
@@ -4,7 +4,7 @@ import { ClockIcon } from '@heroicons/react/outline';
 import DatePicker from 'react-datepicker';
 import { forwardRef } from 'react';
 
-export interface IDateTimeProps {
+export interface IDateTimeFieldProps {
   label: string;
   date: Date | null;
   format?: string;
@@ -21,7 +21,7 @@ const CustomInput = forwardRef<HTMLInputElement, InputProps>(({ value, onClick }
   )
 });
 
-export const DateTime: React.FunctionComponent<IDateTimeProps> = ({label, date, format, onChange}: React.PropsWithChildren<IDateTimeProps>) => {
+export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({label, date, format, onChange}: React.PropsWithChildren<IDateTimeFieldProps>) => {
   const [ dateValue, setDateValue ] = React.useState<Date | null>(date);
   
   const onDateChange = (date: Date) => {
@@ -43,14 +43,20 @@ export const DateTime: React.FunctionComponent<IDateTimeProps> = ({label, date,
         </div>
       </VsLabel>
       
-      <DatePicker
-        selected={dateValue as Date}
-        onChange={onDateChange}
-        timeInputLabel="Time:"
-        dateFormat={format || "MM/dd/yyyy HH:mm"}
-        customInput={(<CustomInput />)}
-        showTimeInput
-         />
+      <div className={`metadata_field__datetime`}>
+        <DatePicker
+          selected={dateValue as Date}
+          onChange={onDateChange}
+          timeInputLabel="Time:"
+          dateFormat={format || "MM/dd/yyyy HH:mm"}
+          customInput={(<CustomInput />)}
+          showTimeInput
+          />
+
+        <button className={`metadata_field__datetime__now`} onClick={() => onDateChange(new Date())}>
+          now
+        </button>
+      </div>
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/viewpanel/components/Metadata.tsx b/src/viewpanel/components/Metadata.tsx
index 55e6e399..61cb2cea 100644
--- a/src/viewpanel/components/Metadata.tsx
+++ b/src/viewpanel/components/Metadata.tsx
@@ -11,14 +11,12 @@ import { SymbolKeywordIcon } from './Icons/SymbolKeywordIcon';
 import { TagIcon } from './Icons/TagIcon';
 import { TagPicker } from './TagPicker';
 import { VsLabel } from './VscodeComponents';
-import { useState } from 'react';
-
-import "react-datepicker/dist/react-datepicker.css";
 import { parseJSON } from 'date-fns';
-import { DateTime } from './Fields/DateTime';
+import { DateTimeField } from './Fields/DateTimeField';
 import { TextField } from './Fields/TextField';
 import { DefaultFields } from '../../constants';
 
+import "react-datepicker/dist/react-datepicker.css";
 export interface IMetadataProps {
   settings: PanelSettings | undefined;
   metadata: { [prop: string]: string[] | string | null };
@@ -73,18 +71,18 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
         onChange={(value) => sendUpdate(descriptionField, value)}
         value={metadata[descriptionField] as string || null} />
 
-      <DateTime
+      <DateTimeField
         label={`Article date`}
         date={publishing}
-        format={settings?.date?.format}
+        dateFormat={settings?.date?.format}
         onChange={(date => sendUpdate(settings?.date?.pubDate, date))} />
 
       {
         modifying && (
-          <DateTime
+          <DateTimeField
             label={`Modified date`}
             date={modifying}
-            format={settings?.date?.format}
+            dateFormat={settings?.date?.format}
             onChange={(date => sendUpdate(settings?.date?.modDate, date))} />
         )
       }