LDBR-4.12: Теги (#45)

* LDBR-4.12: Добавить actions * LDBR-4.12: Добавить верстку TagPopUp * LDBR-4.12: Добавить верстку TagsListPopUp * LDBR-4.12: Добавить callback'и * LDBR-4.12: Добавить код в CardPopUp и BoardView * LDBR-4.12: Внести правки для тестового запуска * LDBR-4.12: Отображение окон и правки по стилям * LDBR-4.12: Добавить все операции с тегами и offline заглушки * LDBR-4.12: Удалить параметр * LDBR-4.12: Добавить bid в запрос создания тега * LDBR-4.12: Внести правки после итеграции с беком * LDBR-4.12: Валидация названия тега * LDBR-4.12: Убрать порт из запросов
frontend-park-mail-ru · Dec 16, 2021 · 27ecc12 · 27ecc12
1 parent 3fd3e5a
commit 27ecc12
Show file tree

Hide file tree

Showing 22 changed files with 1,300 additions and 27 deletions.
diff --git a/src/actions/tags.js b/src/actions/tags.js
@@ -0,0 +1,153 @@
+'use strict';
+
+// Modules
+import Dispatcher from '../modules/Dispatcher/Dispatcher.js';
+
+/**
+ * Константа, содержащая в себе типы действий для работы с тегами.
+ */
+export const TagsActionTypes = {
+    /* Список тегов (в случае карточки и в случае доски) */
+    SHOW_LIST_POPUP_BOARD: 'tags/list-popup/show/board',
+    SHOW_LIST_POPUP_CARD: 'tags/list-popup/show/card',
+    HIDE_LIST_POPUP: 'tags/list-popup/hide',
+
+    /* Окно редактирования/создания тега */
+    SHOW_TAG_POPUP_EDIT: 'tags/tag-popup/edit/show',
+    SHOW_TAG_POPUP_CREATE: 'tags/tag-popup/create/show',
+    HIDE_TAG_POPUP: 'tags/tag-popup/hide',
+    CREATE_TAG: 'tags/create',
+    DELETE_TAG: 'tags/delete',
+    UPDATE_TAG: 'tags/update',
+    PICK_COLOR: 'tags/pick-color',
+
+    /* Переключение тега у карточки */
+    TOGGLE_TAG: 'tags/toggle',
+    EDIT_TAG_NAME: 'tags/editname',
+};
+
+/**
+ * Класс, содержащий в себе действия для работы с тегами.
+ */
+export const tagsActions = {
+
+    /**
+     * Отображает окно со списком тегов, при нажатии на кнопку тегов на доске
+     */
+    showTagListPopUpBoard() {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.SHOW_LIST_POPUP_BOARD,
+        });
+    },
+
+    /**
+     * Отображает окно со списком тегов, при нажатии на кнопку добавить тег на карточке
+     */
+    showTagListPopUpCard() {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.SHOW_LIST_POPUP_CARD,
+        });
+    },
+
+    /**
+     * Скрывает окно со списком тегов
+     */
+    hideTagListPopUp() {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.HIDE_LIST_POPUP,
+        });
+    },
+
+    /**
+     * Отображает окно редактирования тега
+     * @param {Number} tgid id тега
+     */
+    showTagEditPopUp(tgid) {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.SHOW_TAG_POPUP_EDIT,
+            data: {tgid},
+        });
+    },
+
+    /**
+     * Отображает окно создания тега
+     */
+    showTagCreatePopUp() {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.SHOW_TAG_POPUP_CREATE,
+        });
+    },
+
+    /**
+     * Скрывает окно тега
+     */
+    hideTagPopUp() {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.HIDE_TAG_POPUP,
+        });
+    },
+
+    /**
+     * Создает тег
+     * @param {String} tagName название тега
+     */
+    createTag(tagName) {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.CREATE_TAG,
+            data: {
+                tag_name: tagName,
+            },
+        });
+    },
+
+    /**
+     * Удаляет тег
+     */
+    deleteTag() {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.DELETE_TAG,
+        });
+    },
+
+    /**
+     * Обновляет тег
+     */
+    updateTag() {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.UPDATE_TAG,
+        });
+    },
+
+    /**
+     * Переключает тег у карточки
+     * @param {Number} tgid id тега
+     */
+    toggleTag(tgid) {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.TOGGLE_TAG,
+            data: {tgid},
+        });
+    },
+
+    /**
+     * Выбирает цвет для текущего, редактируемого тега
+     * @param {Number} clrid id цвета
+     */
+    pickColor(clrid) {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.PICK_COLOR,
+            data: {clrid},
+        });
+    },
+
+    /**
+     * Обновляет в сторе редактируемое имя тега
+     * @param {String} tagName название тега
+     */
+    editTagName(tagName) {
+        Dispatcher.dispatch({
+            actionName: TagsActionTypes.EDIT_TAG_NAME,
+            data: {tag_name: tagName},
+        });
+    },
+};
diff --git a/src/components/Card/Card.hbs b/src/components/Card/Card.hbs
@@ -1,7 +1,7 @@
 <div class="card editCard" data-id="{{cid}}">
     <div class="card__tags-container" data-id="{{cid}}">
         {{#each tags}}
-            <div class="card-tag" data-id="{{cid}}"></div>
+            <div class="card-tag tag-colors__{{this.color.color_name}}" data-id="{{cid}}"></div>
         {{/each}}
     </div>
     <div class="card__header" data-id="{{cid}}">

diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -91,6 +91,8 @@ export const ConstantMessages = {
     CardTitleTooLong: 'Название карточки слишком длинное',
     CardErrorOnServer: 'Не удалось создать карточку, попробуйте позднее',
     UnsuccessfulRequest: 'Неудачный запрос, попробуйте позднее :]',
+
+    WrongTagNameLength: 'Введите имя тега длиной от 1 до 40 символов',
 };
 
 export const BoardStoreConstants = {

diff --git a/src/modules/Network/Network.js b/src/modules/Network/Network.js
@@ -28,6 +28,7 @@ class Network {
             team: 'api/teams',
             checklists: 'api/checkLists',
             checklistsItems: 'api/checkListItems',
+            tags: 'api/tags',
         };
 
         this._defaultOptions = {
@@ -590,6 +591,68 @@ class Network {
             `https://${this.BackendUrl}/${this._endpoints.comments}/${data.cmid}`,
             options);
     }
+
+    /**
+     * Метод, реализующий PUT /api/cards/:cid/toggletag/:tgid
+     * @param {Number} cid - id карточки
+     * @param {Number} tgid - id переключаемого тега
+     */
+    async toggleCardTag(cid, tgid) {
+        const options = {
+            method: 'put',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        };
+        return this.httpRequest(
+            `https://${this.BackendUrl}/${this._endpoints.card}/${cid}` +
+            `/toggletag/${tgid}`, options);
+    }
+
+    /**
+     * Метод, реализующий запрос DELETE /api/tags/:tgid
+     * @param {Number} tgid - id тега
+     * @return {Promise<Response>} промис запроса
+     */
+    async deleteTag(tgid) {
+        const options = {
+            method: 'delete',
+        };
+        return this.httpRequest(`https://${this.BackendUrl}` +
+            `/${this._endpoints.tags}/${tgid}`, options);
+    }
+
+
+    /**
+     * Метод, реализующий запрос POST /api/tags.
+     * @param {object} data полезная нагрузка запроса
+     * @return {Promise<Response>} промис запроса
+     */
+    async createTag(data) {
+        const options = {
+            method: 'post',
+            body: JSON.stringify(data),
+        };
+        return this.httpRequest(
+            `https://${this.BackendUrl}/${this._endpoints.tags}`,
+            options);
+    }
+
+    /**
+     * Метод, реализующий запрос PUT /api/tag/:tgid.
+     * @param {Object} data полезная нагрузка запроса
+     * @param {Number} tgid id обновляемого тега
+     * @return {Promise<Response>} промис запроса
+     */
+    async updateTag(data, tgid) {
+        const options = {
+            method: 'put',
+            body: JSON.stringify(data),
+        };
+        return this.httpRequest(
+            `https://${this.BackendUrl}/${this._endpoints.tags}/${tgid}`,
+            options);
+    }
 }
 
 export default new Network();
diff --git a/src/modules/Validator/Validator.js b/src/modules/Validator/Validator.js
@@ -176,4 +176,16 @@ export default class Validator {
         }
         return '';
     }
+
+    /**
+     * Метод, валидирующий название тега
+     * @param {String} title заглавие на проверку
+     * @return {String | null}
+     */
+    validateTagTitle(title) {
+        if (!title || title.length === 0 || title.length > 40) {
+            return ConstantMessages.WrongTagNameLength;
+        }
+        return null;
+    }
 }
diff --git a/src/popups/Card/CardPopUp.hbs b/src/popups/Card/CardPopUp.hbs
@@ -12,6 +12,17 @@
                     </div>
                     <div class="horizontal-line"></div>
                     <div class="popup-form__elements-wrapper">
+                        {{#if edit }}
+                            <div>
+                                <label>Теги карточки:</label>
+                                <div class="card-popup-tags">
+                                    {{#each tags}}
+                                        <div class="tags-list__tag_compact tag-colors__{{this.color.color_name}}"><div>{{tag_name}}</div></div>
+                                    {{/each}}
+                                    <div class="button button_small add" id="addTagCardPopUpId"></div>
+                                </div>
+                            </div>
+                        {{/if}}
                         <div>
                             <label for="cardPopUpTitleId" class>Название карточки:</label>
                             <input class="simple-form-element" type="text" id="cardPopUpTitleId" name="card-name"
@@ -33,19 +44,19 @@
                                 {{#if edit}} value="{{deadline}}" {{/if}}>
                         </div>
                         {{#if edit}}
-                        <div>
-                            <label for="cardPopUpPositionId">Позиция:</label>
-                            <select class="simple-form-element" id="cardPopUpPositionId" name="position-select"
-                                    required>
-                                {{#each positionRange}}
-                                    {{#if (IsEqualHelper this ../position) }}
-                                        <option value="{{this}}" selected>#{{this}}</option>
-                                    {{else}}
-                                        <option value="{{this}}">#{{this}}</option>
-                                    {{/if}}
-                                {{/each}}
-                            </select>
-                        </div>
+                            <div>
+                                <label for="cardPopUpPositionId">Позиция:</label>
+                                <select class="simple-form-element" id="cardPopUpPositionId" name="position-select"
+                                        required>
+                                    {{#each positionRange}}
+                                        {{#if (IsEqualHelper this ../position) }}
+                                            <option value="{{this}}" selected>#{{this}}</option>
+                                        {{else}}
+                                            <option value="{{this}}">#{{this}}</option>
+                                        {{/if}}
+                                    {{/each}}
+                                </select>
+                            </div>
                         {{/if}}
                         {{# if checkLists}}
                             <span class="check-list-separator">Чек листы</span>
@@ -100,12 +111,13 @@
                         {{#if edit}}
                             <div class="comments-wrapper">
                                 <textarea class="simple-form-element" type="text" id="newCommentTextId"
-                                           name="comment" autocomplete="off"
-                                           placeholder="Добавить комментарий" required></textarea>
+                                          name="comment" autocomplete="off"
+                                          placeholder="Добавить комментарий" required></textarea>
                                 <button class="button" id="createCommentId">Добавить</button>
                                 {{#each comments}}
                                     <div class="comment" data-author="{{this.uid}}">
-                                        <img class="comment__avatar" title="{{this.user.userName}}" src="{{this.user.avatar}}"/>
+                                        <img class="comment__avatar" title="{{this.user.userName}}"
+                                             src="{{this.user.avatar}}"/>
                                         <div class="comment__content">
                                             {{#if this.edit}}
                                                 <input class="simple-form-element commentInput" type="text"