Merge pull request #3153 from hotosm/feature/add-project-due-date

Add project due date
hotosm · Oct 1, 2020 · b6643ba · b6643ba
2 parents 9a77198 + 301bfcf
commit b6643ba
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 18 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -45,6 +45,7 @@
     "react-calendar-heatmap": "^1.8.1",
     "react-chartjs-2": "^2.10.0",
     "react-click-outside": "^3.0.1",
+    "react-datepicker": "^3.2.2",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.2.0",
     "react-final-form": "^6.5.1",

diff --git a/frontend/src/assets/styles/_datepicker.scss b/frontend/src/assets/styles/_datepicker.scss
@@ -0,0 +1,7 @@
+.react-datepicker__day--keyboard-selected{
+    background-color: $red !important;
+}
+
+.react-datepicker__day--selected{
+    background-color: $red !important;
+}
diff --git a/frontend/src/assets/styles/index.scss b/frontend/src/assets/styles/index.scss
@@ -5,4 +5,5 @@
 @import 'extra';
 @import 'testimonials';
 @import 'organizations';
-@import 'calendarheatmap';
+@import 'calendarheatmap';
+@import 'datepicker';
diff --git a/frontend/src/components/projectCard/dueDateBox.js b/frontend/src/components/projectCard/dueDateBox.js
@@ -36,11 +36,9 @@ function DueDateBox({ intl, dueDate, intervalMili, align = 'right' }: Object) {
     largest: 1,
   };
 
-  let className =
-    'relative lh-solid f7 tr br1 link ph1 pv2 bg-grey-light blue-grey truncate mw4 dib';
-  if (align === 'right') {
-    className = className.replace('fl', 'fr');
-  }
+  let className = `dib relative lh-solid f7 tr ${
+    align === 'right' ? 'fr' : 'fl'
+  } br1 link ph1 pv2 bg-grey-light blue-grey truncate mw4`;
   if (intervalMili !== undefined) {
     className = className.replace('mw4', '');
     options = {

diff --git a/frontend/src/components/projectCard/projectCard.js b/frontend/src/components/projectCard/projectCard.js
@@ -8,7 +8,6 @@ import ProjectProgressBar from './projectProgressBar';
 import { MappingLevelMessage } from '../mappingLevel';
 import { ProjectStatusBox } from '../projectDetail/statusBox';
 import { PROJECTCARD_CONTRIBUTION_SHOWN_THRESHOLD } from '../../config/index';
-import DueDateBox from './dueDateBox';
 import { PriorityBox } from './priorityBox';
 
 export function ProjectTeaser({
@@ -127,11 +126,11 @@ export function ProjectCard({
                 percentMapped={percentMapped}
                 percentValidated={percentValidated}
               />
-              <div className="cf pt2 h2">
-                <MappingLevelMessage level={mapperLevel} className="fl f7 mt1 ttc fw5 blue-grey" />
-                <div className="fr">
-                  <DueDateBox dueDate={dueDate} />
-                </div>
+              <div className="cf pt2 h2 truncate">
+                <MappingLevelMessage
+                  level={mapperLevel}
+                  className="fl f7 pv2 ttc fw5 blue-grey truncate"
+                />
               </div>
             </div>
           </div>

diff --git a/frontend/src/components/projectDetail/infoPanel.js b/frontend/src/components/projectDetail/infoPanel.js
@@ -64,10 +64,9 @@ export function ProjectInfoPanel({ project, tasks, contributors, type }: Object)
         percentBadImagery={percentBadImagery}
       />
       <div className="cf pb1 bg-white">
-        <MappingLevelMessage level={project.mapperLevel} className="tl f5 mt1 ttc fw5 blue-dark" />
+        <MappingLevelMessage level={project.mapperLevel} className="fl f5 mt1 ttc fw5 blue-dark" />
         <DueDateBox dueDate={project.dueDate} />
       </div>
-      <DueDateBox />
     </ReactPlaceholder>
   );
 }
diff --git a/frontend/src/components/projectEdit/descriptionForm.js b/frontend/src/components/projectEdit/descriptionForm.js
@@ -2,6 +2,8 @@ import React, { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 import { StateContext, styleClasses } from '../../views/projectEdit';
 import { InputLocale } from './inputLocale';
 
@@ -74,6 +76,7 @@ export const DescriptionForm = ({ languages }) => {
           </label>
         </InputLocale>
       </div>
+
       <div className={styleClasses.divClass}>
         <InputLocale languages={languages} name="shortDescription" maxLength={1500}>
           <label className={styleClasses.labelClass}>
@@ -88,6 +91,29 @@ export const DescriptionForm = ({ languages }) => {
           </label>
         </InputLocale>
       </div>
+      <div className={styleClasses.divClass}>
+        <label className={styleClasses.labelClass}>
+          <FormattedMessage {...messages.dueDate} />
+        </label>
+        <DatePicker
+          selected={Date.parse(projectInfo.dueDate)}
+          onChange={(date) =>
+            setProjectInfo({
+              ...projectInfo,
+              dueDate: date,
+            })
+          }
+          minDate={Date.parse(projectInfo.created)}
+          dateFormat="dd/MM/yyyy"
+          filterDate={(date) => date.getDay() !== 6 && date.getDay() !== 0}
+          className={styleClasses.inputClass}
+          showYearDropdown
+          scrollableYearDropdown
+        />
+        <p className={styleClasses.pClass}>
+          <FormattedMessage {...messages.dueDateDescription} />
+        </p>
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/components/projectEdit/messages.js b/frontend/src/components/projectEdit/messages.js
@@ -359,6 +359,15 @@ export default defineMessages({
     id: 'projects.formInputs.name',
     defaultMessage: 'Name of the project',
   },
+  dueDate: {
+    id: 'projects.formInputs.dueDate',
+    defaultMessage: 'Due date',
+  },
+  dueDateDescription: {
+    id: 'projects.formInputs.dueDate.description',
+    defaultMessage:
+      'Define the ideal date to have the project finished. The date format is day/month/year.',
+  },
   description: {
     id: 'projects.formInputs.description',
     defaultMessage: 'Description',

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -391,6 +391,8 @@
   "projects.formInputs.priority_areas.options.rectangle": "Draw rectangle",
   "projects.formInputs.priority_areas.action.clear": "Clear all",
   "projects.formInputs.name": "Name of the project",
+  "projects.formInputs.dueDate": "Due date",
+  "projects.formInputs.dueDate.description": "Define the ideal date to have the project finished. The date format is day/month/year.",
   "projects.formInputs.description": "Description",
   "projects.formInputs.shortDescription": "Short description",
   "projects.formInputs.instructions": "Detailed instructions",

diff --git a/frontend/src/views/projectEdit.js b/frontend/src/views/projectEdit.js
@@ -25,7 +25,7 @@ import { CheckIcon, CloseIcon } from '../components/svgIcons';
 export const StateContext = React.createContext();
 
 export const styleClasses = {
-  divClass: 'w-70-l w-100 pb5 mb4 bb b--grey-light',
+  divClass: 'w-70-l w-100 pb4 mb3',
   labelClass: 'f4 fw6 db mb3',
   pClass: 'db mb3 f5',
   inputClass: 'w-80 pa2 db mb2',

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -1002,6 +1002,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.1.2":
+  version "7.10.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
+  integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.4.0", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
@@ -3821,6 +3828,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -4230,7 +4242,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-[email protected]:
+[email protected], create-react-context@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
   integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
@@ -4574,6 +4586,11 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@^2.0.1:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.14.0.tgz#359a87a265bb34ef2e38f93ecf63ac453f9bc7ba"
+  integrity sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==
+
 [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4605,7 +4622,7 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
-deep-equal@^1.0.1:
+deep-equal@^1.0.1, deep-equal@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
   integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@@ -9474,6 +9491,11 @@ [email protected]:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@^1.14.4:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -10502,6 +10524,17 @@ react-click-outside@^3.0.1:
   dependencies:
     hoist-non-react-statics "^2.1.1"
 
+react-datepicker@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-3.2.2.tgz#cd5351ab1bba0b34412dd11db3169801f8f8b2ef"
+  integrity sha512-/3D6hfhXcCNCbO8LICuQeoNDItWFyitGo+aLcsi0tAyJLtCInamYRwPIXhsEF+N6/qWim1yNyr71mqjj4YEBmg==
+  dependencies:
+    classnames "^2.2.6"
+    date-fns "^2.0.1"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.9.0"
+    react-popper "^1.3.4"
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
@@ -10602,11 +10635,29 @@ react-meta-elements@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-meta-elements/-/react-meta-elements-1.0.0.tgz#5da493b158f482f00c03c8ed326db367ffc4d880"
   integrity sha512-+bSTNyhlr5vpDokclaWMxhcsyS9Og17/kmL0DL3P//VA5a8S3cfYxfOPmEjDlTa04CAwHvgApleIM5ZGWfeSaA==
 
+react-onclickoutside@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f"
+  integrity sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==
+
 react-placeholder@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-placeholder/-/react-placeholder-4.0.3.tgz#098f8ee00122bfd73f1ce47d7d99de00384ab141"
   integrity sha512-yPyqFYbh/u72p0UHsKTu19KruK/aJFP0x3YENg8ZBBjf13PoTKBQckVxlpLCfn0Rm2MaMly7IxZuRsUIQV+mrw==
 
+react-popper@^1.3.4:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
+  integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    create-react-context "^0.3.0"
+    deep-equal "^1.1.1"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.7"
+    warning "^4.0.2"
+
 react-redux@^7.2.1:
   version "7.2.1"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.1.tgz#8dedf784901014db2feca1ab633864dee68ad985"
@@ -12572,6 +12623,11 @@ type@^2.0.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
   integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
 
+typed-styles@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
+  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
+
 typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -12890,7 +12946,7 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^4.0.3:
+warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==