From 6b1827015a9a5ab2d07a9f09bba2fc17889e1f28 Mon Sep 17 00:00:00 2001 From: romkalan Date: Wed, 2 Oct 2024 21:12:14 +0300 Subject: [PATCH 1/2] add logic for reset all changes in editForm for point --- src/presenter/main-presenter.js | 5 +++++ src/presenter/point-presenter.js | 12 +++++++++++- src/view/form-manipulation/edit-form-view.js | 17 +++++++++++------ 3 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index e8ba83c..5d39d22 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -76,6 +76,7 @@ export default class MainPresenter { #renderPoint(point) { const pointPresenter = new PointPresenter({ pointsListContainer: this.#boardListPoints.element, + onEditPointView: this.#resetPointView, onDataChange: this.#handlePointChange, onModeChange: this.#handleModeChange, }); @@ -85,6 +86,10 @@ export default class MainPresenter { this.#pointPresenters.set(point.id, pointPresenter); } + #resetPointView = (point) => { + this.#pointPresenters.get(point.id).resetView(); + }; + #handleModeChange = () => { this.#pointPresenters.forEach((presenter) => presenter.resetView()); }; diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index 3da80db..62262e2 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -10,16 +10,18 @@ export default class PointPresenter { #handleModeChange = null; #handleDataChange = null; + #resetPointView = null; #point = null; #offers = null; #destinations = null; #mode = MODE.DEFAULT; - constructor({pointsListContainer, onDataChange, onModeChange}) { + constructor({pointsListContainer, onDataChange, onModeChange, onEditPointView}) { this.#pointsListContainer = pointsListContainer; this.#handleDataChange = onDataChange; this.#handleModeChange = onModeChange; + this.#resetPointView = onEditPointView; } init(point, offers, destinations) { @@ -42,6 +44,7 @@ export default class PointPresenter { point: this.#point, offers: this.#offers, destinations: this.#destinations, + onEditClick: this.#handleFormEditClick, onFormSubmit: this.#handleFormSubmit, onCloseForm: this.#replaceFormToPoint, }); @@ -70,6 +73,7 @@ export default class PointPresenter { resetView() { if(this.#mode !== MODE.DEFAULT) { + this.#pointEditComponent.reset(this.#point); this.#replaceFormToPoint(); } } @@ -77,6 +81,7 @@ export default class PointPresenter { #escKeyDownHandler = (evt) => { if(evt.key === 'Escape') { evt.preventDefault(); + this.#pointEditComponent.reset(this.#point); this.#replaceFormToPoint(); } }; @@ -94,6 +99,11 @@ export default class PointPresenter { this.#mode = MODE.DEFAULT; }; + #handleFormEditClick = (point) => { + this.resetView(point); + document.removeEventListener('keydown', this.#escKeyDownHandler); + }; + #handleFormSubmit = (point) => { this.#handleDataChange(point); this.#replaceFormToPoint(); diff --git a/src/view/form-manipulation/edit-form-view.js b/src/view/form-manipulation/edit-form-view.js index 0803cf4..b11281d 100644 --- a/src/view/form-manipulation/edit-form-view.js +++ b/src/view/form-manipulation/edit-form-view.js @@ -120,16 +120,17 @@ export default class EditFormView extends AbstractStatefulView { #destinations = null; #offers = null; #handleFormSubmit = null; - #handleCloseForm = null; + #handleEditClick = null; #handleFormDelete = null; _state = {}; - constructor({point, offers, destinations, onFormSubmit, onCloseForm}) { + constructor({point, offers, destinations, onEditClick, onFormSubmit, onCloseForm}) { super(); this._setState(EditFormView.parsePointToState(point)); this.#destinations = destinations; this.#offers = offers; + this.#handleEditClick = onEditClick; this.#handleFormSubmit = onFormSubmit; this.#handleFormDelete = onCloseForm; @@ -140,10 +141,14 @@ export default class EditFormView extends AbstractStatefulView { return editFormTemplate(this._state, this.#offers, this.#destinations); } + reset(point) { + this.updateElement(EditFormView.parsePointToState(point)); + } + _restoreHandlers() { - this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#closeEditForm); + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler); - this.element.querySelector('form').addEventListener('submit', this.#handleFormDelete); + this.element.querySelector('form').addEventListener('reset', this.#formDeleteHandler); this.element.querySelector('.event__type-group').addEventListener('change', this.#formTypeChangeHandler); this.element.querySelector('.event__input--destination').addEventListener('change', this.#formDestinationChangeHandler); this.element.querySelector('.event__input--price').addEventListener('input', this.#formPriceInputHandler); @@ -193,8 +198,8 @@ export default class EditFormView extends AbstractStatefulView { this.#handleFormDelete(EditFormView.parseStateToPoint(this._state)); }; - #closeEditForm = (evt) => { + #editClickHandler = (evt) => { evt.preventDefault(); - this.#handleCloseForm(); + this.#handleEditClick(EditFormView.parseStateToPoint(this._state)); }; } From 076662ded8b845dee7f4d681b6baf1cc487acc8c Mon Sep 17 00:00:00 2001 From: romkalan Date: Thu, 3 Oct 2024 20:01:29 +0300 Subject: [PATCH 2/2] clear field with _state for edit-point-view --- package-lock.json | 6 ++ package.json | 1 + src/view/form-manipulation/edit-form-view.js | 66 +++++++++++++++++++- 3 files changed, 70 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1df35d2..564ff7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "22.0.0", "dependencies": { "dayjs": "1.11.13", + "flatpickr": "4.6.13", "nanoid": "5.0.7" }, "devDependencies": { @@ -4230,6 +4231,11 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/flatpickr": { + "version": "4.6.13", + "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz", + "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==" + }, "node_modules/flatted": { "version": "3.2.7", "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz", diff --git a/package.json b/package.json index a662c16..86ec782 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ }, "dependencies": { "dayjs": "1.11.13", + "flatpickr": "4.6.13", "nanoid": "5.0.7" } } diff --git a/src/view/form-manipulation/edit-form-view.js b/src/view/form-manipulation/edit-form-view.js index b11281d..8cd3110 100644 --- a/src/view/form-manipulation/edit-form-view.js +++ b/src/view/form-manipulation/edit-form-view.js @@ -1,8 +1,12 @@ import {capitalize} from '../../utils/common-utils.js'; import { humanizePointDate, getOffersByType, getDestinationId } from '../../utils/point-utils.js'; +import AbstractStatefulView from '../../framework/view/abstract-stateful-view.js'; import { DATE_WITH_TIME_FORMAT, TYPES } from '../../const.js'; import { CITIES } from '../../mock/const-mock.js'; -import AbstractStatefulView from '../../framework/view/abstract-stateful-view.js'; + +import flatpickr from 'flatpickr'; +import 'flatpickr/dist/flatpickr.css'; + const createOfferClass = (offerTitle) => { const splittedOfferTitles = offerTitle.split(' '); @@ -122,8 +126,8 @@ export default class EditFormView extends AbstractStatefulView { #handleFormSubmit = null; #handleEditClick = null; #handleFormDelete = null; - - _state = {}; + #dateFromPicker = null; + #dateToPicker = null; constructor({point, offers, destinations, onEditClick, onFormSubmit, onCloseForm}) { super(); @@ -145,6 +149,20 @@ export default class EditFormView extends AbstractStatefulView { this.updateElement(EditFormView.parsePointToState(point)); } + removeElement() { + super.removeElement(); + + if (this.#dateFromPicker) { + this.#dateFromPicker.destroy(); + this.#dateFromPicker = null; + } + + if (this.#dateToPicker) { + this.#dateToPicker.destroy(); + this.#dateToPicker = null; + } + } + _restoreHandlers() { this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler); @@ -152,6 +170,9 @@ export default class EditFormView extends AbstractStatefulView { this.element.querySelector('.event__type-group').addEventListener('change', this.#formTypeChangeHandler); this.element.querySelector('.event__input--destination').addEventListener('change', this.#formDestinationChangeHandler); this.element.querySelector('.event__input--price').addEventListener('input', this.#formPriceInputHandler); + + this.#setDateFromPicker(); + this.#setDateToPicker(); } static parsePointToState(point) { @@ -202,4 +223,43 @@ export default class EditFormView extends AbstractStatefulView { evt.preventDefault(); this.#handleEditClick(EditFormView.parseStateToPoint(this._state)); }; + + #setDateFromPicker() { + this.#dateFromPicker = flatpickr( + this.element.querySelector('#event-start-time-1'), + { + enableTime: true, + dateFormat: 'd/m/y H:i', + 'time_24hr': true, + defaultDate: humanizePointDate(this._state.dateFrom, DATE_WITH_TIME_FORMAT), + onChange: this.#dateFromChangeHandler, + } + ); + } + + #setDateToPicker() { + this.#dateToPicker = flatpickr( + this.element.querySelector('#event-end-time-1'), + { + enableTime: true, + dateFormat: 'd/m/y H:i', + 'time_24hr': true, + minDate: humanizePointDate(this._state.dateFrom, DATE_WITH_TIME_FORMAT), + defaultDate: humanizePointDate(this._state.dateTo, DATE_WITH_TIME_FORMAT), + onChange: this.#dateToChangeHandler, + } + ); + } + + #dateFromChangeHandler = (userDate) => { + this.updateElement({ + dateFrom: userDate, + }); + }; + + #dateToChangeHandler = (userDate) => { + this.updateElement({ + dateTo: userDate, + }); + }; }