add today input

src/client/js/components/PageCreateModal.jsx

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -7,13 +7,35 @@ import {
 } from 'reactstrap';
 
 import { withTranslation } from 'react-i18next';
+import { format } from 'date-fns';
 
+import { userPageRoot } from '@commons/util/path-utils';
 import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
 const PageCreateModal = (props) => {
   const { t, appContainer } = props;
 
+  const [todayInput1, setTodayInput1] = useState(t('Memo'));
+  const [todayInput2, setTodayInput2] = useState('');
+
+  /**
+   * onmemo
+   * @param {string} value
+   */
+  function onChangeTodayInput1(value) {
+    setTodayInput1(value);
+  }
+
+  /**
+   * onmemo
+   * @param {string} value
+   */
+  function onChangeTodayInput2(value) {
+    setTodayInput2(value);
+  }
+
+
   return (
     <Modal size="lg" isOpen={appContainer.state.isPageCreateModalShown} toggle={appContainer.closePageCreateModal}>
       <ModalHeader tag="h4" toggle={appContainer.closePageCreateModal} className="bg-primary text-light">
@@ -23,12 +45,24 @@ const PageCreateModal = (props) => {
         <div className="row form-group">
           <fieldset className="col-12 mb-4">
             <h3 className="grw-modal-head pb-2">{ t("Create today's") }</h3>
-            <div className="d-flex create-page-input-container">
+            <div className="d-flex">
               <div className="create-page-input-row d-flex align-items-center">
-                {/* <span class="page-today-prefix">{ userPageRoot(user) }}/</span>
-                  <input type="text" data-prefix="{{ userPageRoot(user) }}/" class="page-today-input1 form-control text-center" value="{{ t('Memo') }}" id="" name="">
-                  <span class="page-today-suffix">/{ now|datetz('Y/m/d') }}/</span>
-                  <input type="text" data-prefix="/{{ now|datetz('Y/m/d') }}/" class="page-today-input2 form-control" id="page-today-input2" name="" placeholder="{{ t('Input page name (optional)') }}"> */}
+                <span>{ userPageRoot(appContainer.currentUser) }/</span>
+                <input
+                  type="text"
+                  className="page-today-input1 form-control text-center"
+                  value={todayInput1}
+                  onChange={e => onChangeTodayInput1(e.target.value)}
+                />
+                <span className="page-today-suffix">/{format(new Date(), 'yyyy/MM/dd')}/</span>
+                <input
+                  type="text"
+                  className="page-today-input2 form-control"
+                  id="page-today-input2"
+                  placeholder={t('Input page name (optional)')}
+                  value={todayInput2}
+                  onChange={e => onChangeTodayInput2(e.target.value)}
+                />
               </div>
               <div className="create-page-button-container">
                 <button type="submit" className="btn btn-outline-primary rounded-pill"><i className="icon-fw icon-doc"></i>{ t('Create') }</button>
@@ -40,9 +74,11 @@ const PageCreateModal = (props) => {
       <ModalFooter>
       </ModalFooter>
     </Modal>
+
   );
 };
 
+
 /**
  * Wrapper component for using unstated
  */

src/server/views/modal/create_page.html

@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
 
-      <div class="modal-header bg-primary">
+      <!-- <div class="modal-header bg-primary">
         <div class="modal-title text-white">{{ t('New Page') }}</div>
         <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">&times;</button>
-      </div>
+      </div> -->
 
       <div class="modal-body">