LDBR-4.4: Работа с командой в /boards (#44)

* LDBR-3.8: Добавить поддержку типа команды в шаблоне * LDBR-3.23: Добавить actions на команды * LDBR-4.4: Добавить всплывающие окна и экшоны для команды и удаления * LDBR-4.4: Callback'и на boards, шаблон для тим * LDBR-4.4: Добавить Callback'и методы в сторе * LDBR-4.4: Добавить реализацию методов CUD и сетевых запросов * LDBR-4.4: Внести правки в работу с тимами * LDBR-4.4: invited_members Co-authored-by: DPeshkoff <[email protected]>
frontend-park-mail-ru · Dec 16, 2021 · f5d6237 · f5d6237
1 parent 00be196
commit f5d6237
Show file tree

Hide file tree

Showing 15 changed files with 803 additions and 25 deletions.
diff --git a/src/actions/teams.js b/src/actions/teams.js
@@ -0,0 +1,111 @@
+'use strict';
+
+// Modules
+import Dispatcher from '../modules/Dispatcher/Dispatcher.js';
+
+/**
+ * Константа, содержащая в себе типы действий для списка досок.
+ */
+export const TeamsActionTypes = {
+    POPUP_TEAM_HIDE: 'teams/popup/hide',
+    POPUP_CREATE_TEAM_SHOW: 'teams/popup/create/show',
+    POPUP_CREATE_TEAM_SUBMIT: 'teams/popup/create/submit',
+    POPUP_EDIT_TEAM_SHOW: 'teams/popup/edit/show',
+    POPUP_EDIT_TEAM_SUBMIT: 'teams/popup/edit/submit',
+
+    POPUP_DELETE_TEAM_CHOOSE: 'teams/delete/choose',
+    POPUP_DELETE_TEAM_SHOW: 'teams/delete/show',
+    POPUP_DELETE_TEAM_CLOSE: 'teams/delete/close',
+};
+
+/**
+ * Класс, содержащий в себе действия, связанные с управлением командами.
+ */
+export const teamsActions = {
+
+    /**
+     * Отобразить popup создания команды
+     */
+    showAddTeamPopUp() {
+        Dispatcher.dispatch({
+            actionName: TeamsActionTypes.POPUP_CREATE_TEAM_SHOW,
+        });
+    },
+
+    /**
+     * Отобразить popup редактирования команды
+     * @param {Number} tid id команды
+     */
+    showEditTeamPopUp(tid) {
+        Dispatcher.dispatch({
+            actionName: TeamsActionTypes.POPUP_EDIT_TEAM_SHOW,
+            data: {tid},
+        });
+    },
+
+    /**
+     * Скрыть popup команды
+     */
+    hideTeamPopUp() {
+        Dispatcher.dispatch({
+            actionName: TeamsActionTypes.POPUP_TEAM_HIDE,
+        });
+    },
+
+    /**
+     * Создать команду
+     * @param {String} teamName - название команды
+     */
+    submitAddTeamPopUp(teamName) {
+        Dispatcher.dispatch({
+            actionName: TeamsActionTypes.POPUP_CREATE_TEAM_SUBMIT,
+            data: {
+                team_name: teamName,
+            },
+        });
+    },
+
+    /**
+     * Переименовать команду
+     * @param {String} teamName - новое название команды
+     */
+    submitEditTeamPopUp(teamName) {
+        Dispatcher.dispatch({
+            actionName: TeamsActionTypes.POPUP_EDIT_TEAM_SUBMIT,
+            data: {
+                team_name: teamName,
+            },
+        });
+    },
+
+    /**
+     * Отобразить popup удаления команды
+     * @param {Number} tid id команды
+     */
+    showDeleteTeamPopUp(tid) {
+        Dispatcher.dispatch({
+            actionName: TeamsActionTypes.POPUP_DELETE_TEAM_SHOW,
+            data: {tid},
+        });
+    },
+
+    /**
+     * Скрыть pop удаления команды с выбором "удалять" или "не удалять"
+     * @param {Boolean} confirm подтверждено ли удаление
+     */
+    deleteTeam(confirm) {
+        Dispatcher.dispatch({
+            actionName: TeamsActionTypes.POPUP_DELETE_TEAM_CHOOSE,
+            data: {confirm},
+        });
+    },
+
+    /**
+     * Скрыть pop удаления команды
+     */
+    hideDeleteTeamPopUp() {
+        Dispatcher.dispatch({
+            actionName: TeamsActionTypes.POPUP_DELETE_TEAM_CLOSE,
+        });
+    },
+};
diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -80,6 +80,9 @@ export const ConstantMessages = {
 
     AvatarTooBig: 'Аватар не должен превышать 500 КБ',
 
+    TeamTitleTooLong: 'Название команды превышает 60 символов',
+    TeamTitleTooShort: 'Название команды слишком короткое',
+
     BoardTitleTooLong: 'Название доски превышает 60 символов',
     BoardTitleTooShort: 'Название доски слишком короткое',
     BoardDescriptionTooLong: 'Описание доски превышает 500 символов',

diff --git a/src/modules/Network/Network.js b/src/modules/Network/Network.js
@@ -744,6 +744,56 @@ class Network {
             `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.attachments}/${atid}`,
             options);
     }
+
+    /**
+     * Метод, реализующий запрос POST /api/teams.
+     * @param {object} data полезная нагрузка запроса
+     * @return {Promise<Response>} промис запроса
+     */
+    async createTeam(data) {
+        const options = {
+            method: 'post',
+            body: JSON.stringify(data),
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.team}`, options);
+    }
+
+    /**
+     * Метод, реализующий запрос DELETE /api/teams.
+     * @param {Number} tid id команды
+     * @return {Promise<Response>} промис запроса
+     */
+    async _deleteTeam(tid) {
+        const options = {
+            method: 'delete',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.team}/${tid}`,
+            options);
+    }
+
+    /**
+     * Метод, реализующий запрос PUT /api/teams.
+     * @param {Number} tid id команды
+     * @param {Object} data полезная нагрузка запроса
+     * @return {Promise<Response>} промис запроса
+     */
+    async updateTeam(tid, data) {
+        const options = {
+            method: 'put',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.team}/${tid}`,
+            options);
+    }
 }
 
 export default new Network();
diff --git a/src/modules/Validator/Validator.js b/src/modules/Validator/Validator.js
@@ -96,6 +96,21 @@ export default class Validator {
         return null;
     }
 
+    /**
+     * Метод, валидирующий название команды
+     * @param {String} title название на проверку
+     * @return {String | null}
+     */
+    validateTeamTitle(title) {
+        if (title.length < 1) {
+            return ConstantMessages.TeamTitleTooShort;
+        }
+        if (title.length > 60) {
+            return ConstantMessages.TeamTitleTooLong;
+        }
+        return null;
+    }
+
     /**
      * Метод, валидирующий описание доски
      * @param {String} description описание на проверку

diff --git a/src/popups/CreateBoard/CreateBoardPopUp.hbs b/src/popups/CreateBoard/CreateBoardPopUp.hbs
@@ -10,17 +10,22 @@
                     <div class="popup-form__elements-wrapper">
                         <div>
                             <label for="board-name" class>Название доски:</label>
-                            <input class="simple-form-element" type="text" id="createBoardPopUpNameId" name="board-name" autofocus
-                                pattern="^[a-zA-Z\d]{1,40}$" autocomplete="off" required>
+                            <input class="simple-form-element" type="text" id="createBoardPopUpNameId" name="board-name"
+                                   autofocus
+                                   pattern="^[a-zA-Z\d]{1,40}$" autocomplete="off" required>
                         </div>
                         <div>
                             <label for="team-select">Команда:</label>
                             <select class="simple-form-element" id="createBoardPopUpTeamId" name="team-select" required>
                                 {{#each ../teams}}
-                                    {{#if (IsEqualHelper this.tid ../tid) }}
-                                        <option value="{{this.tid}}" selected>{{this.team_name}}</option>
+<!--                                Исключим "остальные доски"-->
+                                    {{#if (IsEqualHelper this.team_type 1) }}
                                     {{else}}
-                                        <option value="{{this.tid}}">{{this.team_name}}</option>
+                                        {{#if (IsEqualHelper this.tid ../tid) }}
+                                            <option value="{{this.tid}}" selected>{{this.team_name}}</option>
+                                        {{else}}
+                                            <option value="{{this.tid}}">{{this.team_name}}</option>
+                                        {{/if}}
                                     {{/if}}
                                 {{/each}}
                             </select>

diff --git a/src/popups/CreateTeam/CreateTeamPopUp.hbs b/src/popups/CreateTeam/CreateTeamPopUp.hbs
@@ -0,0 +1,31 @@
+{{#with team-popup}}
+    {{# if visible }}
+        <div class="popup-wrapper" id="createTeamPopUpWrapperId">
+            <div class="popup-content popup-content_create-board">
+                <form class="popup-form">
+                    <div class="popup-form__header">
+                        Создать команду
+                    </div>
+                    <div class="horizontal-line"></div>
+                    <div class="popup-form__elements-wrapper">
+                        <div>
+                            <label for="team-name" class>Название команды:</label>
+                            <input class="simple-form-element" type="text" id="createTeamPopUpNameId" name="team-name" autofocus
+                                   pattern="^[a-zA-Z\d]{1,40}$" autocomplete="off"
+                                   {{#if edit}} value="{{team_name}}" {{/if}} required>
+                        </div>
+                        {{#if errors}}
+                            <div class="error">{{errors}}</div>
+                        {{/if}}
+                        {{# if edit }}
+                            <button class="button" id="editTeamPopUpSubmitId">Сохранить</button>
+                        {{ else }}
+                            <button class="button" id="createTeamPopUpSubmitId">Создать</button>
+                        {{/if}}
+                    </div>
+                </form>
+                <div class="close-button" id="createTeamPopUpCloseId"></div>
+            </div>
+        </div>
+    {{/if}}
+{{/with}}
diff --git a/src/popups/CreateTeam/CreateTeamPopUp.js b/src/popups/CreateTeam/CreateTeamPopUp.js
@@ -0,0 +1,105 @@
+// BaseComponent
+import BaseComponent from '../../components/BaseComponent.js';
+
+// Шаблон
+import template from './CreateTeamPopUp.hbs';
+
+// Actions
+import {teamsActions} from '../../actions/teams.js';
+
+/**
+ * Класс popup окна создания команды
+ */
+export default class CreateTeamPopUp extends BaseComponent {
+    /**
+     * Конструирует объект CreateTeamPopUp
+     */
+    constructor() {
+        super(null, template);
+        this._bindCallBacks();
+        this._elements = {};
+    }
+
+    /**
+     * Метод сохраняет ссылки на элементы popup'a
+     * @private
+     */
+    _registerPopUpElements() {
+        this._elements = {
+            closeBtn: document.getElementById('createTeamPopUpCloseId'),
+            wrapper: document.getElementById('createTeamPopUpWrapperId'),
+            name: document.getElementById('createTeamPopUpNameId'),
+            createBtn: document.getElementById('createTeamPopUpSubmitId'),
+            saveBtn: document.getElementById('editTeamPopUpSubmitId'),
+
+        };
+    }
+
+    /**
+     * Метод регестрирует callback
+     * @private
+     */
+    addEventListeners() {
+        this._registerPopUpElements();
+        super.addEventListeners();
+        this._elements.wrapper?.addEventListener('click', this._onPopUpClose);
+        this._elements.closeBtn?.addEventListener('click', this._onPopUpClose);
+        this._elements.createBtn?.addEventListener('click', this._onCreateBtnClick);
+        this._elements.saveBtn?.addEventListener('click', this._onSaveBtnClick);
+        this._elements.name?.focus();
+    };
+
+    /**
+     * Метод удаляет все ранее зарегестрированные callback
+     * @private
+     */
+    removeEventListeners() {
+        super.removeEventListeners();
+        this._elements.wrapper?.removeEventListener('click', this._onPopUpClose);
+        this._elements.closeBtn?.removeEventListener('click', this._onPopUpClose);
+        this._elements.createBtn?.removeEventListener('click', this._onCreateBtnClick);
+        this._elements.saveBtn?.removeEventListener('click', this._onSaveBtnClick);
+    }
+
+    /**
+     * Метод биндит this контекст к callback методам
+     * @private
+     */
+    _bindCallBacks() {
+        this._onPopUpClose = this._onPopUpClose.bind(this);
+        this._onSaveBtnClick = this._onSaveBtnClick.bind(this);
+        this._onCreateBtnClick = this._onCreateBtnClick.bind(this);
+    }
+
+    /**
+     * Скрывает модальное окно создания команды
+     * @param {Event} event объект события
+     * @private
+     */
+    _onPopUpClose(event) {
+        if (event.target === this._elements.closeBtn ||
+            event.target === this._elements.wrapper) {
+            teamsActions.hideTeamPopUp();
+        }
+    }
+
+    /**
+     * Обработчик события отправки формы сохранения названия команды
+     * @param {Object} event объект события
+     * @private
+     */
+    _onSaveBtnClick(event) {
+        event.preventDefault();
+        teamsActions.submitEditTeamPopUp(this._elements.name.value);
+    }
+
+    /**
+     * Обработчик события отправки формы создания команды
+     * @param {Object} event объект события
+     * @private
+     */
+    _onCreateBtnClick(event) {
+        event.preventDefault();
+        teamsActions.submitAddTeamPopUp(this._elements.name.value);
+    }
+}
diff --git a/src/popups/DeleteDialog/DeleteDialogPopUp.hbs b/src/popups/DeleteDialog/DeleteDialogPopUp.hbs
@@ -0,0 +1,24 @@
+{{#with delete-dialog}}
+    {{# if visible }}
+        <div class="popup-wrapper" id="deletePopUpWrapperId">
+            <div class="popup-content popup-content_delete">
+                <form class="popup-form">
+                    <div class="popup-form__header">
+                            Удалить "{{name}}"?
+                    </div>
+                    <div class="horizontal-line"></div>
+                    {{#if errors}}
+                        <div class="error"> {{errors}}</div>
+                    {{/if}}
+                    <div class="popup-form__elements-wrapper">
+                        <div class="confirm-delete-wrapper">
+                            <button class="button button_red button_full-space button_no-overflow-hiding" id="deletePopUpConfirmBtnId">Да, удалить</button>
+                            <button class="button button_full-space button_no-overflow-hiding" id="deletePopUpRejectBtnId">Нет, отменить</button>
+                        </div>
+                    </div>
+                </form>
+                <div class="close-button" id="deletePopUpCloseId"></div>
+            </div>
+        </div>
+    {{/if}}
+{{/with}}