Merge pull request #17 from jfhdgkjfh/module6-task2

package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "css-loader": "^7.0.0",
     "dayjs": "1.11.7",
+    "flatpickr": "^4.6.13",
     "nanoid": "^5.0.7",
     "style-loader": "^3.3.4"
   }

src/view/task-edit-view.js

@@ -1,6 +1,9 @@
 import AbstractStatefulView from '../framework/view/abstract-stateful-view.js';
 import {COLORS} from '../const.js';
 import {humanizeTaskDueDate, isTaskRepeating} from '../utils/task.js';
+import flatpickr from 'flatpickr';
+
+import 'flatpickr/dist/flatpickr.min.css';
 
 const BLANK_TASK = {
   color: COLORS[0],
@@ -90,7 +93,7 @@ function createTaskEditTemplate(data) {
   const repeatingTemplate = createTaskEditRepeatingTemplate(repeating, isRepeating);
 
   const colorsTemplate = createTaskEditColorsTemplate(color);
-  const isSubmitDisabled = isRepeating && !isTaskRepeating(repeating);
+  const isSubmitDisabled = (isDueDate && dueDate === null) || (isRepeating && !isTaskRepeating(repeating));
 
 
   return (
@@ -138,6 +141,7 @@ function createTaskEditTemplate(data) {
 
 export default class TaskEditView extends AbstractStatefulView {
   #handleFormSubmit = null;
+  #datepicker = null;
 
   constructor({task = BLANK_TASK, onFormSubmit}) {
     super();
@@ -151,6 +155,15 @@ export default class TaskEditView extends AbstractStatefulView {
     return createTaskEditTemplate(this._state);
   }
 
+  removeElement() {
+    super.removeElement();
+
+    if (this.#datepicker) {
+      this.#datepicker.destroy();
+      this.#datepicker = null;
+    }
+  }
+
   reset(task) {
     this.updateElement(
       TaskEditView.parseTaskToState(task),
@@ -173,6 +186,8 @@ export default class TaskEditView extends AbstractStatefulView {
       this.element.querySelector('.card__repeat-days-inner')
         .addEventListener('change', this.#repeatingChangeHandler);
     }
+
+    this.#setDatepicker();
   }
 
   #colorChangeHandler = (evt) => {
@@ -189,6 +204,12 @@ export default class TaskEditView extends AbstractStatefulView {
     });
   };
 
+  #dueDateChangeHandler = ([userDate]) => {
+    this.updateElement({
+      dueDate: userDate,
+    });
+  };
+
   #dueDateToggleHandler = (evt) => {
     evt.preventDefault();
     this.updateElement({
@@ -217,6 +238,18 @@ export default class TaskEditView extends AbstractStatefulView {
     });
   };
 
+  #setDatepicker() {
+    if (this._state.isDueDate) {
+      this.#datepicker = flatpickr(
+        this.element.querySelector('.card__date'),
+        {
+          dateFormat: 'j F',
+          defaultDate: this._state.dueDate,
+          onChange: this.#dueDateChangeHandler,
+        },
+      );
+    }
+  }
 
   static parseTaskToState(task) {
     return {...task,