LDBR 2.15: Создание доски (#26)

* LDBR-2.15: Исправить removeEventListeners * LDBR-2.15: Добавить форму создания доски * LDBR-2.15: Добавить обработчики событий для отображения окна * LDBR-2.15: Реализовать отправку Action на создание доски * LDBR-2.15: Добавить запросы и валидацию в BoardsStore * LDBR-2.15: Добавить отображение ошибки в модальное окно, автовыбор элемента в select * LDBR-2.15: Изменить внешний вид отображения ошибки * LDBR-2.15: Исправить стиль конпки и ошибки * LDBR-2.15: Переписать логику открытия окна на Action'ы * LDBR-2.15: Вернуть рендеринг модального окна, добавить handelbars helper * LDBR-2.15: Исправить заголовки Login View Register View * LDBR-2.15: Внести правки в работу с modal в Boards Stor * LDBR-2.15: Удалить console.log * LDBR-2.15: Вынести переключение свйоства display в шаблон * LDBR-2.15: Изменить источник события клика с window на document * LDBR-2.15: Добавить removeEventListener на submitBtn * LDBR-2.15: Добавить проверку существования объекта submitBtn в _removeListenersCreateModal
frontend-park-mail-ru · Nov 2, 2021 · 307e244 · 307e244
1 parent 41b4321
commit 307e244
Show file tree

Hide file tree

Showing 18 changed files with 535 additions and 121 deletions.
diff --git a/src/actions/boards.js b/src/actions/boards.js
@@ -8,6 +8,9 @@ import Dispatcher from '../modules/Dispatcher/Dispatcher.js';
  */
 export const BoardsActionTypes = {
     BOARDS_GET: 'boards/get',
+    BOARDS_CREATE: 'boards/create',
+    BOARDS_MODAL_SHOW: 'boards/modal/show',
+    BOARDS_MODAL_HIDE: 'boards/modal/hide',
 };
 
 /**
@@ -22,4 +25,30 @@ export const boardsActions = {
             actionName: BoardsActionTypes.BOARDS_GET,
         });
     },
+
+
+    createBoard(name, teamID) {
+        Dispatcher.dispatch({
+            actionName: BoardsActionTypes.BOARDS_CREATE,
+            data: {
+                name,
+                teamID,
+            },
+        });
+    },
+
+    showModal(teamID) {
+        Dispatcher.dispatch({
+            actionName: BoardsActionTypes.BOARDS_MODAL_SHOW,
+            data: {
+                teamID,
+            },
+        });
+    },
+
+    hideModal() {
+        Dispatcher.dispatch({
+            actionName: BoardsActionTypes.BOARDS_MODAL_HIDE,
+        });
+    },
 };
diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -70,4 +70,8 @@ export const ConstantMessages = {
     UseOnlyLatinLettersPassword: 'Введите пароль, содержащий только латинские буквы',
 
     AvatarTooBig: 'Аватар не должен превышать 500 МиБ',
+
+    BoardTitleTooLong: 'Название доски превышает 60 символов',
+    BoardTitleTooShort: 'Название доски слишком короткое',
+    BoardErrorOnServer: 'Не удалось создать доску, попробуйте позднее',
 };
diff --git a/src/index_template.html b/src/index_template.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' <%= htmlWebpackPlugin.options.backend %> blob:; style-src 'self'; font-src 'self'; object-src 'none'; script-src 'self'">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' <%= htmlWebpackPlugin.options.backend %> blob:; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; script-src 'self'">
     <!-- for super modern broswers - coloring browser header -->
     <meta name="theme-color" content="#258085">
     <!-- light blue -->

diff --git a/src/modules/Network/Network.js b/src/modules/Network/Network.js
@@ -1,8 +1,8 @@
 import {SelfAddress, BackendAddress} from '../../constants/constants.js';
 
 /**
-  * Класс, реализующий работу с сетью.
-  */
+ * Класс, реализующий работу с сетью.
+ */
 class Network {
     /**
      * Конструктор, инициализирующий BackendUrl и порт бэкенд-сервера.
@@ -35,7 +35,7 @@ class Network {
      * @param {String} URL адрес, на который будет посылаться запрос
      * @param {object} options параметры запроса
      * @return {Promise<Response>} промис запроса
-    */
+     */
     httpRequest(URL, options) {
         return fetch(URL, {...this._defaultOptions, ...options})
             .then((response) => response.json()
@@ -133,6 +133,20 @@ class Network {
             options);
     }
 
+    /**
+     * Метод, реализующий запрос POST /api/board.
+     * @param {object} data полезная нагрузка запроса
+     * @return {Promise<Response>} промис запроса
+     */
+    async createBoard(data) {
+        const options = {
+            method: 'post',
+            body: JSON.stringify(data),
+        };
+        return this.httpRequest(`http://${this.BackendUrl}:${this.BackendPort}/api/boards`,
+                                options);
+    }
+
     /**
      * Метод, реализующий запрос DELETE /api/sessions.
      * @param {object} data полезная нагрузка запроса

diff --git a/src/modules/Validator/Validator.js b/src/modules/Validator/Validator.js
@@ -1,8 +1,8 @@
 import {ConstantMessages} from '../../constants/constants.js';
 
 /**
-  * Класс, реализующий валидацию форм.
-  */
+ * Класс, реализующий валидацию форм.
+ */
 export default class Validator {
     /**
      * @constructor
@@ -80,4 +80,19 @@ export default class Validator {
         }
         return null;
     }
+
+    /**
+     * Метод, валидирующий название доски
+     * @param {String} title
+     * @return {String | null}
+     */
+    validateBoardTitle(title) {
+        if (title.length < 1) {
+            return ConstantMessages.BoardTitleTooShort;
+        }
+        if (title.length > 60) {
+            return ConstantMessages.BoardTitleTooLong;
+        }
+        return null;
+    }
 }
diff --git a/src/stores/BoardsStore/BoardsStore.js b/src/stores/BoardsStore/BoardsStore.js
@@ -2,8 +2,9 @@ import BaseStore from '../BaseStore.js';
 import {BoardsActionTypes} from '../../actions/boards.js';
 
 import Network from '../../modules/Network/Network.js';
-import {HttpStatusCodes} from '../../constants/constants.js';
+import {ConstantMessages, HttpStatusCodes} from '../../constants/constants.js';
 import UserStore from '../UserStore/UserStore.js';
+import Validator from '../../modules/Validator/Validator';
 
 /**
  * Класс, реализующий хранилище списка команд и досок
@@ -19,7 +20,12 @@ class BoardsStore extends BaseStore {
 
         this._storage = new Map();
 
-        this._storage.set('teams', undefined);
+        this._storage.set('teams', null);
+        this._storage.set('modal', {
+            visible: false,
+            teamID: null,
+            errors: null,
+        });
     }
 
     /**
@@ -32,7 +38,18 @@ class BoardsStore extends BaseStore {
             await this._get();
             this._emitChange();
             break;
-
+        case BoardsActionTypes.BOARDS_CREATE:
+            await this._create(action.data);
+            this._emitChange();
+            break;
+        case BoardsActionTypes.BOARDS_MODAL_HIDE:
+            this._hideModal();
+            this._emitChange();
+            break;
+        case BoardsActionTypes.BOARDS_MODAL_SHOW:
+            this._showModal(action.data);
+            this._emitChange();
+            break;
         default:
             return;
         }
@@ -68,6 +85,84 @@ class BoardsStore extends BaseStore {
             console.log('Undefined error');
         }
     }
+
+    /**
+     * Метод, обрабатывающий запрос на создание доски
+     * @todo Обработка дополнительных кодов от сервера (нет прав, например)
+     * @param {Object} data - информация о новой доске
+     * @return {Promise<void>}
+     * @private
+     */
+    async _create(data) {
+        const validator = new Validator();
+
+        const validatorStatus = validator.validateBoardTitle(data.name);
+        this._storage.get('modal').errors = validatorStatus;
+        if (validatorStatus) {
+            return;
+        }
+        this._hideModal();
+
+        let payload;
+
+        try {
+            payload = await Network.createBoard({
+                board_name: data.name,
+                tid: data.teamID,
+            });
+        } catch (error) {
+            console.log('Unable to connect to backend, reason: ', error); // TODO pretty
+            return;
+        }
+
+        switch (payload.status) {
+        case HttpStatusCodes.Created:
+            const team = this._storage.get('teams').find((value) => {
+                return value.id === data.teamID;
+            });
+
+            // Ожидаются данные по доске (board_name, description, id, tasks)
+            team.boards.push(payload.data);
+            return;
+
+        case HttpStatusCodes.Unauthorized:
+            UserStore.__logout();
+            return;
+
+        case HttpStatusCodes.InternalServerError:
+            this._showModal(data);
+            this._storage.get('modal').errors = ConstantMessages.BoardErrorOnServer;
+            return;
+
+        default:
+            console.log('Undefined error');
+        }
+    }
+
+    /**
+     * Устанавливает состояние скрытого модального окна
+     * @private
+     */
+    _hideModal() {
+        this._storage.set('modal', {
+            visible: false,
+            teamID: null,
+            errors: null,
+        });
+    }
+
+    /**
+     * Устанавливает состояние видимого модального окна
+     * @param {Object} data
+     * @private
+     */
+    _showModal(data) {
+        this._storage.set('modal', {
+            visible: true,
+            teamID: data.teamID,
+            errors: null,
+        });
+    }
 }
 
 export default new BoardsStore();
diff --git a/src/styles/scss/Common.scss b/src/styles/scss/Common.scss
@@ -14,4 +14,95 @@ body {
   background: linear-gradient(45deg, $primary-bg-color, $secondary-bg-color);
   height: 100%;
   font-family: 'Montserrat', sans-serif;
+  min-width: 400px;
+}
+
+.horizontal-line {
+  border-bottom: solid 2px $tertiary-bg-color;
+  margin: 5px;
+}
+
+.vertical-line {
+  height: 25px;
+  border-left: solid 2px $tertiary-bg-color;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.close-button {
+  @extend .material-icons;
+  opacity: 0.8;
+
+  &::before {
+    content: 'close';
+  }
+  &:hover {
+    opacity: 1.0;
+    cursor: pointer;
+  }
+}
+
+.button {
+  padding: 16px 24px;
+
+  color: rgb(255, 255, 255);
+  background-color: $main-theme-color;
+
+  border: none;
+  outline: none;
+  border-radius: 5px;
+
+  letter-spacing: 1px;
+  font-size: 16px;
+
+  cursor: pointer;
+
+  transition: all 0.3s ease-in-out;
+
+  &_small {
+    padding: 8px 12px;
+  }
+}
+
+.button:focus,
+.button:hover {
+  background-color: $main-theme-color__focus;
+}
+
+
+$simple-form-radius: 10px;
+
+.simple-form-element {
+  font: inherit;
+  font-size: 24px;
+  width: 100%;
+  border-radius: $simple-form-radius;
+  background-color: $secondary-bg-color;
+  border: 4px solid $tertiary-bg-color;
+  padding: 2px 10px;
+  &:focus {
+    box-shadow: 0 0 10px 2px $default-box-shadow-color;
+    outline: none;
+  }
+}
+
+/* контейнер для ошибок */
+.error {
+  padding: 5px 10px;
+  border-radius: 16px;
+
+  border: 2px solid $error-color;
+  background: $error-bg-color;
+  color: $error-color;
+
+  &::before {
+    @extend .material-icons;
+    content: 'close';
+    font-size: 30px;
+    display: inline;
+    position: relative;
+    color: $error-bg-color;
+    background-color: $error-color;
+    border-radius: 100%;
+  }
 }
diff --git a/src/styles/scss/Constants.scss b/src/styles/scss/Constants.scss
@@ -15,3 +15,5 @@ $light-white-color: rgb(241, 241, 241);
 $input-color: rgb(210, 210, 210);
 
 $input__input-color: rgb(144, 144, 144);
+
+$footer-size: 50px;
diff --git a/src/styles/scss/Fonts.scss b/src/styles/scss/Fonts.scss
@@ -5,7 +5,7 @@
     src: url('../../../public/fonts/Montserrat-Regular.ttf') format('truetype');
 }
 
-.material-icons_colored {
+.material-icons-colored {
     position: relative;
     top: 5px;
 
@@ -21,7 +21,7 @@
     opacity: 1;
 }
 
-.material-icons_colored:hover {
+.material-icons-colored:hover {
     color: var(--dark-blue);
     cursor: pointer;
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,5 @@ $light-white-color: rgb(241, 241, 241);
		$input-color: rgb(210, 210, 210);

		$input__input-color: rgb(144, 144, 144);

		$footer-size: 50px;