Merge pull request #5 from WhiteShark23/module4-task1

Author: keksobot

package-lock.json

@@ -20,9 +20,11 @@
     "@babel/preset-env": "7.21.4",
     "babel-loader": "9.1.2",
     "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.7.3",
     "eslint": "8.38.0",
     "eslint-config-htmlacademy": "9.0.0",
     "html-webpack-plugin": "5.5.1",
+    "style-loader": "3.3.2",
     "webpack": "5.79.0",
     "webpack-cli": "5.0.1",
     "webpack-dev-server": "4.13.3"

package.json

@@ -1,24 +1,73 @@
 import FilterView from '../view/filter-view.js';
-import { render } from '../render.js';
+import { render, replace } from '../framework/render.js';
 import ListEventsView from '../view/list-events.js';
 import ItemEventView from '../view/item-event.js';
 import EditEventView from '../view/edit-event.js';
 export default class BoardPresenter {
-  listEventsComponent = new ListEventsView();
+  #boardContainer = null;
+  #pointsModel = null;
+  #boardPoints = [];
+
+  #listEventsComponent = new ListEventsView();
 
   constructor({boardContainer, pointsModel}) {
-    this.boardContainer = boardContainer;
-    this.pointsModel = pointsModel;
+    this.#boardContainer = boardContainer;
+    this.#pointsModel = pointsModel;
   }
 
   init() {
-    this.boardPoints = [...this.pointsModel.getPoint()];
-    render(new FilterView, this.boardContainer);
-    render(this.listEventsComponent, this.boardContainer);
-    render(new EditEventView(this.pointsModel, this.boardPoints[0]), this.listEventsComponent.getElement());
+    this.#boardPoints = [...this.#pointsModel.getPoint()];
+
+    this.#renderBoard();
+  }
+
+  #renderItemEvent(pointsModel, point) {
+    const escKeyDownHandler = (evt) => {
+      if (evt.key === 'Escape') {
+        evt.preventDefault();
+        replaceFormToCard();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      }
+    };
+
+    const itemEvent = new ItemEventView({
+      pointsModel,
+      point,
+      onEditClick: () => {
+        replaceCardToForm();
+        document.addEventListener('keydown', escKeyDownHandler);
+      }
+    });
+
+    const editEvent = new EditEventView({
+      pointsModel,
+      point,
+      onFormSubmit: () => {
+        replaceFormToCard();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      },
+      onFormCloseClick: () => {
+        replaceFormToCard();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      }
+    });
+
+    render(itemEvent, this.#listEventsComponent.element);
+
+    function replaceCardToForm() {
+      replace(editEvent, itemEvent);
+    }
+
+    function replaceFormToCard() {
+      replace(itemEvent, editEvent);
+    }
+  }
 
-    for (let i = 1; i < this.boardPoints.length; i++) {
-      render(new ItemEventView(this.pointsModel, this.boardPoints[i]), this.listEventsComponent.getElement());
+  #renderBoard() {
+    render(new FilterView, this.#boardContainer);
+    render(this.#listEventsComponent, this.#boardContainer);
+    for (let i = 0; i < this.#boardPoints.length; i++) {
+      this.#renderItemEvent(this.#pointsModel, this.#boardPoints[i]);
     }
   }
 }