From 27ecc12cfefa2131151c17f75c2e209c63d2362e Mon Sep 17 00:00:00 2001 From: GeorgiyX <34867130+GeorgiyX@users.noreply.github.com> Date: Thu, 16 Dec 2021 13:35:43 +0300 Subject: [PATCH] =?UTF-8?q?LDBR-4.12:=20=D0=A2=D0=B5=D0=B3=D0=B8=20(#45)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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: Убрать порт из запросов --- src/actions/tags.js | 153 +++++++++ src/components/Card/Card.hbs | 2 +- src/constants/constants.js | 2 + src/modules/Network/Network.js | 63 ++++ src/modules/Validator/Validator.js | 12 + src/popups/Card/CardPopUp.hbs | 44 ++- src/popups/Card/CardPopUp.js | 28 ++ src/popups/Card/CardPopUp.scss | 23 ++ src/popups/Tag/TagPopUp.hbs | 46 +++ src/popups/Tag/TagPopUp.js | 153 +++++++++ src/popups/Tag/TagPopUp.scss | 76 +++++ src/popups/TagsList/TagsListPopUp.hbs | 38 +++ src/popups/TagsList/TagsListPopUp.js | 144 +++++++++ src/popups/TagsList/TagsListPopUp.scss | 62 ++++ src/stores/BoardStore/BoardStore.js | 427 ++++++++++++++++++++++++- src/styles/scss/CardPopup.scss | 7 +- src/styles/scss/Common.scss | 10 +- src/styles/scss/Constants.scss | 2 + src/styles/scss/PopUp.scss | 8 + src/views/BoardView/BoardView.hbs | 4 + src/views/BoardView/BoardView.js | 19 ++ webpack.config.js | 4 +- 22 files changed, 1300 insertions(+), 27 deletions(-) create mode 100644 src/actions/tags.js create mode 100644 src/popups/Tag/TagPopUp.hbs create mode 100644 src/popups/Tag/TagPopUp.js create mode 100644 src/popups/Tag/TagPopUp.scss create mode 100644 src/popups/TagsList/TagsListPopUp.hbs create mode 100644 src/popups/TagsList/TagsListPopUp.js create mode 100644 src/popups/TagsList/TagsListPopUp.scss diff --git a/src/actions/tags.js b/src/actions/tags.js new file mode 100644 index 00000000..58a753e4 --- /dev/null +++ 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 index 43e9331f..e861f219 100644 --- a/src/components/Card/Card.hbs +++ b/src/components/Card/Card.hbs @@ -1,7 +1,7 @@
{{#each tags}} -
+
{{/each}}
diff --git a/src/constants/constants.js b/src/constants/constants.js index c263536a..4875deb8 100644 --- 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 index 240f3114..8507d4ac 100644 --- 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} промис запроса + */ + 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} промис запроса + */ + 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} промис запроса + */ + 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 index 0e5b0fad..169c715d 100644 --- 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 index 6de91c69..2d3db2f7 100644 --- a/src/popups/Card/CardPopUp.hbs +++ b/src/popups/Card/CardPopUp.hbs @@ -12,6 +12,17 @@
+ {{#if edit }} +
+ +
+ {{#each tags}} +
{{tag_name}}
+ {{/each}} +
+
+
+ {{/if}}
{{#if edit}} -
- - -
+
+ + +
{{/if}} {{# if checkLists}} Чек листы @@ -100,12 +111,13 @@ {{#if edit}}
+ name="comment" autocomplete="off" + placeholder="Добавить комментарий" required> {{#each comments}}
- +
{{#if this.edit}} { + tag.addEventListener('click', this._onShowTagListPopUpCard); + }); + this._elements.addTagBtn?.addEventListener('click', this._onShowTagListPopUpCard); + if (!this.context.get('card-popup').edit) { this._elements.card_name?.focus(); } @@ -174,6 +183,12 @@ export default class CardPopUp extends BaseComponent { this._elements.checkListItem.deleteBtn?.forEach((element) => { element.removeEventListener('click', this._onDeleteCheckListItem); }); + + /* Tags */ + this._elements.tags?.forEach((tag) => { + tag.removeEventListener('click', this._onShowTagListPopUpCard); + }); + this._elements.addTagBtn?.removeEventListener('click', this._onShowTagListPopUpCard); } /** @@ -205,6 +220,9 @@ export default class CardPopUp extends BaseComponent { this._onEditCheckListItem = this._onEditCheckListItem.bind(this); this._onSaveChekListItem = this._onSaveChekListItem.bind(this); this._onToggleChekListItem = this._onToggleChekListItem.bind(this); + + /* Tags */ + this._onShowTagListPopUpCard = this._onShowTagListPopUpCard.bind(this); } /** @@ -456,4 +474,14 @@ export default class CardPopUp extends BaseComponent { status); cardActions.changeScroll(this._elements.scrollZone.scrollTop); } + + /** + * CallBack на добаление тега + * @param {Event} event - объект события + * @private + */ + _onShowTagListPopUpCard(event) { + event.preventDefault(); + tagsActions.showTagListPopUpCard(); + } } diff --git a/src/popups/Card/CardPopUp.scss b/src/popups/Card/CardPopUp.scss index 399c64e5..599e9412 100644 --- a/src/popups/Card/CardPopUp.scss +++ b/src/popups/Card/CardPopUp.scss @@ -83,3 +83,26 @@ input.checklist-item__input { align-items: center; } } + +.card-popup-tags { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: start; + gap: 5px; +} + +.card-popup-tag { + height: $tags-list-tag-height; + color: $main-theme-color; + padding: 2px 5px 2px 5px; + overflow: hidden; + text-overflow: ellipsis; + border-radius: 5px; + + display: flex; + flex-direction: row; + align-items: center; +} + diff --git a/src/popups/Tag/TagPopUp.hbs b/src/popups/Tag/TagPopUp.hbs new file mode 100644 index 00000000..0eae85a8 --- /dev/null +++ b/src/popups/Tag/TagPopUp.hbs @@ -0,0 +1,46 @@ +{{#with tag-popup}} +{{# if visible }} + +{{/if}} +{{/with}} diff --git a/src/popups/Tag/TagPopUp.js b/src/popups/Tag/TagPopUp.js new file mode 100644 index 00000000..ff0bd69d --- /dev/null +++ b/src/popups/Tag/TagPopUp.js @@ -0,0 +1,153 @@ +// BaseComponent +import BaseComponent from '../../components/BaseComponent.js'; + +// Шаблон +import template from './TagPopUp.hbs'; + +// Стили +import './TagPopUp.scss'; + +// Actions +import {tagsActions} from '../../actions/tags.js'; + +/** + * Класс popup окна редактирования/создания тега. + */ +export default class TagPopUp extends BaseComponent { + /** + * Конструирует объект TagPopUp + */ + constructor() { + super(null, template); + this._bindCallBacks(); + this._elements = {}; + } + + /** + * Метод сохраняет ссылки на элементы popup'a + * @private + */ + _registerPopUpElements() { + this._elements = { + wrapper: document.getElementById('tagPopUpWrapperId'), + closeBtn: document.getElementById('tagPopUpCloseId'), + createBtn: document.getElementById('tagPopUpCreateBtnId'), + deleteBtn: document.getElementById('tagPopUpDeleteBtnId'), + updateBtn: document.getElementById('tagPopUpSaveBtnId'), + input: document.getElementById('tagNameInputId'), + colors: document.querySelectorAll('.tag-colors__color'), + }; + } + + /** + * Метод регестрирует callback + * @private + */ + addEventListeners() { + this._registerPopUpElements(); + super.addEventListeners(); + this._elements.wrapper?.addEventListener('click', this.onHideTagPopUp); + this._elements.closeBtn?.addEventListener('click', this.onHideTagPopUp); + this._elements.createBtn?.addEventListener('click', this.onCreateTag); + this._elements.deleteBtn?.addEventListener('click', this.onDeleteTag); + this._elements.updateBtn?.addEventListener('click', this.onUpdateTag); + this._elements.input?.addEventListener('input', this.onEditTagName); + this._elements.colors?.forEach((color) => { + color.addEventListener('click', this.onPickColor); + }); + }; + + /** + * Метод удаляет все ранее зарегестрированные callback + * @private + */ + removeEventListeners() { + super.removeEventListeners(); + this._elements.wrapper?.removeEventListener('click', this.onHideTagPopUp); + this._elements.closeBtn?.removeEventListener('click', this.onHideTagPopUp); + this._elements.createBtn?.removeEventListener('click', this.onCreateTag); + this._elements.deleteBtn?.removeEventListener('click', this.onDeleteTag); + this._elements.updateBtn?.removeEventListener('click', this.onUpdateTag); + this._elements.input?.removeEventListener('input', this.onEditTagName); + this._elements.colors?.forEach((color) => { + color.removeEventListener('click', this.onPickColor); + }); + } + + /** + * Метод биндит this контекст к callback методам + * @private + */ + _bindCallBacks() { + this.onHideTagPopUp = this.onHideTagPopUp.bind(this); + this.onCreateTag = this.onCreateTag.bind(this); + this.onDeleteTag = this.onDeleteTag.bind(this); + this.onUpdateTag = this.onUpdateTag.bind(this); + this.onPickColor = this.onPickColor.bind(this); + this.onEditTagName = this.onEditTagName.bind(this); + } + + + /** + * Callback, вызываемый при закрытии окна + * @param {Event} event объект события + * @private + */ + onHideTagPopUp(event) { + event.preventDefault(); + if (event.target === this._elements.closeBtn || + event.target === this._elements.wrapper) { + tagsActions.hideTagPopUp(); + } + } + + /** + * Callback, вызываемый при нажатии на "создать" + * @param {Event} event объект события + * @private + */ + onCreateTag(event) { + event.preventDefault(); + tagsActions.createTag(event.target.value); + } + + /** + * Callback, вызываемый при нажатии на "удалить" + * @param {Event} event объект события + * @private + */ + onDeleteTag(event) { + event.preventDefault(); + tagsActions.deleteTag(); + } + + /** + * Callback, вызываемый при нажатии на "сохранить" + * @param {Event} event объект события + * @private + */ + onUpdateTag(event) { + event.preventDefault(); + tagsActions.updateTag(); + } + + /** + * Callback, вызываемый при нажатии на цвет + * @param {Event} event объект события + * @private + */ + onPickColor(event) { + event.preventDefault(); + tagsActions.pickColor(Number.parseInt(event.target.dataset.id, 10)); + } + + /** + * Callback, вызываемый при изменении текста в инпуте + * @param {Event} event объект события + * @private + */ + onEditTagName(event) { + event.preventDefault(); + tagsActions.editTagName(this._elements.input.value); + } +} diff --git a/src/popups/Tag/TagPopUp.scss b/src/popups/Tag/TagPopUp.scss new file mode 100644 index 00000000..21ae3d66 --- /dev/null +++ b/src/popups/Tag/TagPopUp.scss @@ -0,0 +1,76 @@ +@import '../../styles/scss/Fonts'; +@import '../../styles/scss/Common'; +@import '../../styles/scss/Constants'; + +.tag-colors { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + + &__color { + width: $tags-list-tag-height; + height: $tags-list-tag-height; + border-radius: 5px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + cursor: pointer; + + &:hover { + border: 2px solid $main-theme-color; + } + } + + &__green { + background-color: green; + } + + &__yellow { + background-color: yellow; + } + + &__orange { + background-color: orange; + } + + &__red { + background-color: red; + } + + &__purple { + background-color: purple; + } + + &__darkblue { + background-color: darkblue; + } + + &__blue { + background-color: blue; + } + + &__pink { + background-color: pink; + } + + &__darkolivegreen { + background-color: darkolivegreen; + } + + &__grey { + background-color: grey; + } + + &__default_color { + background: linear-gradient(to bottom right, blue, pink); + } +} + +.tag-popup-edit-btns { + display: flex; + flex-direction: row; + align-items: center; + column-gap: 5px; +} diff --git a/src/popups/TagsList/TagsListPopUp.hbs b/src/popups/TagsList/TagsListPopUp.hbs new file mode 100644 index 00000000..dbfa2392 --- /dev/null +++ b/src/popups/TagsList/TagsListPopUp.hbs @@ -0,0 +1,38 @@ +{{#with tags-list-popup}} + {{# if visible }} + + {{/if}} +{{/with}} diff --git a/src/popups/TagsList/TagsListPopUp.js b/src/popups/TagsList/TagsListPopUp.js new file mode 100644 index 00000000..e7619d7f --- /dev/null +++ b/src/popups/TagsList/TagsListPopUp.js @@ -0,0 +1,144 @@ +// BaseComponent +import BaseComponent from '../../components/BaseComponent.js'; + +// Шаблон +import template from './TagsListPopUp.hbs'; + +// Стили +import './TagsListPopUp.scss'; + +// Actions +import {tagsActions} from '../../actions/tags.js'; + +/** + * Класс popup окна просмотра тегов. + */ +export default class TagsListPopUp extends BaseComponent { + /** + * Конструирует объект TagsListPopUp + */ + constructor() { + super(null, template); + this._bindCallBacks(); + this._elements = {}; + } + + /** + * Метод сохраняет ссылки на элементы popup'a + * @private + */ + _registerPopUpElements() { + this._elements = { + wrapper: document.getElementById('tagListPopUpWrapperId'), + closeBtn: document.getElementById('tagListPopUpCloseId'), + createBtn: document.getElementById('showTagPopUpBtnId'), + tags: document.querySelectorAll('.tags-list__tag'), + editTagBtns: document.querySelectorAll('.tags-list__edit-btn'), + }; + } + + /** + * Метод регестрирует callback + * @private + */ + addEventListeners() { + this._registerPopUpElements(); + super.addEventListeners(); + this._elements.wrapper?.addEventListener('click', this.onHideTagListPopUp); + this._elements.closeBtn?.addEventListener('click', this.onHideTagListPopUp); + this._elements.createBtn?.addEventListener('click', this.onShowTagCreatePopUp); + if (this.context?.get('tags-list-popup').toggle_mode) { + this._elements.tags?.forEach((tag) => { + tag.addEventListener('click', this.onToggleTag); + }); + } else { + this._elements.tags?.forEach((tag) => { + tag.addEventListener('click', this.onShowTagEditPopUp); + }); + } + this._elements.editTagBtns?.forEach((btn) => { + btn.addEventListener('click', this.onShowTagEditPopUp); + }); + }; + + /** + * Метод удаляет все ранее зарегестрированные callback + * @private + */ + removeEventListeners() { + super.removeEventListeners(); + this._elements.wrapper?.removeEventListener('click', this.onHideTagListPopUp); + this._elements.closeBtn?.removeEventListener('click', this.onHideTagListPopUp); + this._elements.createBtn?.removeEventListener('click', this.onShowTagCreatePopUp); + if (this.context?.get('tags-list-popup').toggle_mode) { + this._elements.tags?.forEach((tag) => { + tag.removeEventListener('click', this.onToggleTag); + }); + } else { + this._elements.tags?.forEach((tag) => { + tag.removeEventListener('click', this.onShowTagEditPopUp); + }); + } + this._elements.editTagBtns?.forEach((btn) => { + btn.removeEventListener('click', this.onShowTagEditPopUp); + }); + }; + + /** + * Метод биндит this контекст к callback методам + * @private + */ + _bindCallBacks() { + this.onShowTagEditPopUp = this.onShowTagEditPopUp.bind(this); + this.onShowTagCreatePopUp = this.onShowTagCreatePopUp.bind(this); + this.onToggleTag = this.onToggleTag.bind(this); + this.onHideTagListPopUp = this.onHideTagListPopUp.bind(this); + } + + /** + * Callback, вызываемый при нажатии на редактирование тега + * @param {Event} event объект события + * @private + */ + onShowTagEditPopUp(event) { + event.preventDefault(); + const tgid = Number.parseInt(event.target.closest('div.tags-list__tag-wrapper') + .dataset.id, 10); + tagsActions.showTagEditPopUp(tgid); + } + + /** + * Callback, вызываемый при нажатии "Добавить тег" + * @param {Event} event объект события + * @private + */ + onShowTagCreatePopUp(event) { + event.preventDefault(); + tagsActions.showTagCreatePopUp(); + } + + /** + * Callback, вызываемый при нажатии на тег (в режиме toggle-mod) + * @param {Event} event объект события + * @private + */ + onToggleTag(event) { + event.preventDefault(); + const tgid = Number.parseInt(event.target.closest('div.tags-list__tag-wrapper') + .dataset.id, 10); + tagsActions.toggleTag(tgid); + } + + /** + * Callback, вызываемый при закрытии окна + * @param {Event} event объект события + * @private + */ + onHideTagListPopUp(event) { + event.preventDefault(); + if (event.target === this._elements.closeBtn || + event.target === this._elements.wrapper) { + tagsActions.hideTagListPopUp(); + } + } +} diff --git a/src/popups/TagsList/TagsListPopUp.scss b/src/popups/TagsList/TagsListPopUp.scss new file mode 100644 index 00000000..eca6614e --- /dev/null +++ b/src/popups/TagsList/TagsListPopUp.scss @@ -0,0 +1,62 @@ +@import '../../styles/scss/Fonts'; +@import '../../styles/scss/Common'; +@import '../../styles/scss/Constants'; + +.tags-list { + display: flex; + flex-direction: column; + justify-content: stretch; + row-gap: 3px; + + &__tag-wrapper { + display: flex; + flex-direction: row; + align-items: center; + height: $tags-list-tag-height; + + column-gap: 5px; + } + + &__tag { + height: $tags-list-tag-height; + flex-grow: 1; + display: flex; + flex-direction: row; + align-items: center; + padding: 2px 5px 2px 5px; + border-radius: 5px; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + + &:hover { + box-shadow: 0 0 5px $dark-box-shadow; + } + } + + &__tag_compact { + @extend .tags-list__tag; + flex-grow: 0; + } + + &__tag-name { + flex-grow: 1; + font-size: $small-font-size; + } + + &__edit-btn { + height: $tags-list-tag-height; + width: $tags-list-tag-height; + border-radius: 5px; + border: 2px solid $main-theme-color; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &:hover { + box-shadow: 0 0 5px $dark-box-shadow; + } + } +} diff --git a/src/stores/BoardStore/BoardStore.js b/src/stores/BoardStore/BoardStore.js index 49ec9bfd..d8936277 100644 --- a/src/stores/BoardStore/BoardStore.js +++ b/src/stores/BoardStore/BoardStore.js @@ -7,6 +7,7 @@ import {CheckListActionTypes} from '../../actions/checklist'; import {CardActionTypes} from '../../actions/card.js'; import {BoardActionTypes} from '../../actions/board.js'; import {CommentsActionTypes} from '../../actions/comments.js'; +import {TagsActionTypes} from '../../actions/tags'; // Modules import Network from '../../modules/Network/Network.js'; @@ -15,8 +16,11 @@ import Validator from '../../modules/Validator/Validator'; // Constants import { - CheckLists, ConstantMessages, - HttpStatusCodes, Urls, BoardStoreConstants, + BoardStoreConstants, + CheckLists, + ConstantMessages, + HttpStatusCodes, + Urls, } from '../../constants/constants.js'; // Stores @@ -89,6 +93,23 @@ class BoardStore extends BaseStore { users: [], header: 'Добавить пользователя в карточку', }); + + this._storage.set('tags-list-popup', { + visible: false, + errors: null, + toggle_mode: false, + tags: [], + }); + + this._storage.set('tag-popup', { + visible: false, + errors: null, + edit: false, + tag_name: null, + colors: [], + picked_color: null, + tgid: null, + }); } /** @@ -327,12 +348,95 @@ class BoardStore extends BaseStore { this._emitChange(); break; + case TagsActionTypes.SHOW_LIST_POPUP_BOARD: + this._showTagListPopUpBoard(); + this._emitChange(); + break; + + case TagsActionTypes.SHOW_LIST_POPUP_CARD: + this._showTagListPopUpCard(); + this._emitChange(); + break; + + case TagsActionTypes.HIDE_LIST_POPUP: + this._hideTagListPopUp(); + this._emitChange(); + break; + + case TagsActionTypes.SHOW_TAG_POPUP_EDIT: + this._showTagEditPopUp(action.data); + this._emitChange(); + break; + + case TagsActionTypes.SHOW_TAG_POPUP_CREATE: + this._showTagCreatePopUp(); + this._emitChange(); + break; + + case TagsActionTypes.HIDE_TAG_POPUP: + this._hideTagPopUp(); + this._emitChange(); + break; + + case TagsActionTypes.CREATE_TAG: + await this._createTag(action.data); + this._emitChange(); + break; + + case TagsActionTypes.DELETE_TAG: + await this._deleteTag(); + this._emitChange(); + break; + + case TagsActionTypes.UPDATE_TAG: + await this._updateTag(); + this._emitChange(); + break; + + case TagsActionTypes.TOGGLE_TAG: + await this._toggleTag(action.data); + this._emitChange(); + break; + + case TagsActionTypes.PICK_COLOR: + this._pickColor(action.data); + this._emitChange(); + break; + + case TagsActionTypes.EDIT_TAG_NAME: + this._editTagName(action.data); + break; default: return; } } + /** + * Ищет тег среди полученных вместе с доской тегов + * @param {Number} tgid id тега + * @return {Object} объект тега + * @private + */ + _getTagById(tgid) { + return this._storage.get('tags-list-popup').tags.find((tag) => { + return tag.tgid === tgid; + }); + } + + /** + * Ищет цвет среди полученных вместе с доской цветов тегов + * @param {Number} clrid id цвета + * @return {Object} объект цвета + * @private + */ + _getTagColorById(clrid) { + return this._storage.get('tag-popup').colors.find((color) => { + return color.clrid === clrid; + }); + } + + /** * Метод, реализующий реакцию на запрос доски с id. * @param {Object} data полезная нагрузка запроса @@ -358,11 +462,26 @@ class BoardStore extends BaseStore { this._storage.set('description', payload.data.description); this._storage.set('card_lists', payload.data.card_lists); + // todo network + selected = false, переключаем при отображение card + this._storage.get('tags-list-popup').tags = payload.data.tags.map((tag) => { + tag.selected = false; + return tag; + }); + + this._storage.get('tag-popup').colors = payload.data.colors.map((color) => { + color.selected = false; + return color; + }); + this._storage.get('card_lists').forEach((cardlist) => { cardlist.cards.forEach((card) => { card.deadlineStatus = validator.validateDeadline(card.deadline, card.deadline_check); card.deadlineCheck = card.deadline_check; card.deadlineDate = (new Date(card.deadline)).toLocaleDateString('ru-RU', options); + // Сохраним в карточке ссылки на теже теги, что и в списке тегов + card.tags = card.tags.map((tag) => { + return this._getTagById(tag.tgid); + }); }); }); @@ -784,6 +903,7 @@ class BoardStore extends BaseStore { data.deadline, false), deadlineDate: (new Date(data.deadline)).toLocaleDateString('ru-RU', options), assignees: [], + tags: [], check_lists: [], }); return; @@ -848,6 +968,7 @@ class BoardStore extends BaseStore { deadline: card.deadline, deadline_check: card.deadline_check, errors: null, + tags: card.tags, checkLists: this._getCardById(data.clid, data.cid).check_lists.map((list) => { const items = list.check_list_items.map((item) => { return {...item, edit: false}; @@ -1794,6 +1915,308 @@ class BoardStore extends BaseStore { _changeCardPopUpScroll(data) { this._storage.get('card-popup').scroll = data.scrollValue; } + + /** + * Отображает окно со списком тегов, при нажатии на кнопку тегов на доске + * @private + */ + _showTagListPopUpBoard() { + const context = this._storage.get('tags-list-popup'); + context.visible = true; + context.toggle_mode = false; + context.errors = null; + } + + /** + * Отображает окно со списком тегов, при нажатии на кнопку добавить тег на карточке + */ + _showTagListPopUpCard() { + const context = this._storage.get('tags-list-popup'); + const currentCard = this._getCardById(this._storage.get('card-popup').clid, + this._storage.get('card-popup').cid); + context.visible = true; + context.toggle_mode = true; + context.errors = null; + /* Отметим теги указанные для текущей карточки */ + context.tags.forEach((tag) => { + tag.selected = !!currentCard.tags.find((cardTag) => { + return cardTag.tgid === tag.tgid; + }); + }); + } + + /** + * Скрывает окно со списком тегов + */ + _hideTagListPopUp() { + const context = this._storage.get('tags-list-popup'); + context.visible = false; + context.toggle_mode = false; + context.errors = null; + } + + /** + * Отображает окно редактирования тега + * @param {Object} data данные + */ + _showTagEditPopUp(data) { + const context = this._storage.get('tag-popup'); + const currentTag = this._getTagById(data.tgid); + context.visible = true; + context.errors = null; + context.edit = true; + context.tgid = data.tgid; + context.picked_color = currentTag.color.clrid; + context.tag_name = currentTag.tag_name; + /* Отметим текущий цвет тега */ + context.colors.forEach((color) => { + color.selected = (color.clrid === currentTag.color.clrid); + }); + } + + /** + * Отображает окно создания тега + */ + _showTagCreatePopUp() { + const context = this._storage.get('tag-popup'); + context.visible = true; + context.errors = null; + context.edit = false; + context.picked_color = context.colors[Math.floor(Math.random() * (context.colors.length))].clrid; + context.tag_name = null; + /* Отметим текущий цвет тега */ + context.colors.forEach((color) => { + color.selected = (color.clrid === context.picked_color); + }); + console.log(context.colors); + } + + /** + * Скрывает окно тега + */ + _hideTagPopUp() { + const context = this._storage.get('tag-popup'); + context.visible = false; + context.errors = null; + context.edit = false; + } + + /** + * Создает тег + * @param {Object} data данные c названием тега + */ + async _createTag(data) { + const contextTagPopUp = this._storage.get('tag-popup'); + const contextTagListPopUp = this._storage.get('tags-list-popup'); + + contextTagPopUp.errors = null; + const validator = new Validator(); + contextTagPopUp.errors = validator.validateTagTitle(contextTagPopUp.tag_name); + if (contextTagPopUp.errors) { + return; + } + + let payload; + + const newTagNetwork = { + bid: this._storage.get('bid'), + tag_name: contextTagPopUp.tag_name, + color: { + clrid: contextTagPopUp.picked_color, + }, + }; + + try { + payload = await Network.createTag(newTagNetwork); + } catch (error) { + console.log('Unable to connect to backend, reason: ', error); + return; + } + + switch (payload.status) { + case HttpStatusCodes.Ok: + const color = this._getTagColorById(contextTagPopUp.picked_color); + const newTag = { + tgid: payload.data.tgid, + tag_name: contextTagPopUp.tag_name, + selected: false, + color: { + color_name: color.color_name, + clrid: color.clrid, + }, + }; + contextTagListPopUp.tags.push(newTag); + this._hideTagPopUp(); + return; + + case HttpStatusCodes.BadRequest: + contextTagPopUp.errors = ConstantMessages.UnsuccessfulRequest + ' (400)'; + return; + + default: + contextTagPopUp.errors = ConstantMessages.UnsuccessfulRequest; + return; + } + } + + /** + * Удаляет текущий тег + */ + async _deleteTag() { + const contextTagPopUp = this._storage.get('tag-popup'); + const contextTagListPopUp = this._storage.get('tags-list-popup'); + + let payload; + + try { + payload = await Network.deleteTag(contextTagPopUp.tgid); + } catch (error) { + console.log('Unable to connect to backend, reason: ', error); + return; + } + + switch (payload.status) { + case HttpStatusCodes.Ok: + /* Удалим из карточек */ + this._storage.get('card_lists').forEach((cardlist) => { + cardlist.cards.forEach((card) => { + card.tags.splice(contextTagListPopUp.tags.indexOf( + this._getTagById(contextTagPopUp.tgid)), 1); + }); + }); + /* Удалим из списка тегов */ + contextTagListPopUp.tags.splice(contextTagListPopUp.tags.indexOf( + this._getTagById(contextTagPopUp.tgid)), 1); + this._hideTagPopUp(); + return; + + case HttpStatusCodes.BadRequest: + contextTagPopUp.errors = ConstantMessages.UnsuccessfulRequest + ' (400)'; + return; + + default: + contextTagPopUp.errors = ConstantMessages.UnsuccessfulRequest; + return; + } + } + + /** + * Обновляет тег + */ + async _updateTag() { + const context = this._storage.get('tag-popup'); + + context.errors = null; + const validator = new Validator(); + context.errors = validator.validateTagTitle(context.tag_name); + if (context.errors) { + return; + } + + const color = this._getTagColorById(context.picked_color); + + let payload; + + const updatedTag = { + bid: this._storage.get('bid'), + tag_name: context.tag_name, + color: { + clrid: color.clrid, + }, + }; + + try { + payload = await Network.updateTag(updatedTag, context.tgid); + } catch (error) { + console.log('Unable to connect to backend, reason: ', error); + return; + } + + switch (payload.status) { + case HttpStatusCodes.Ok: + const tag = this._getTagById(context.tgid); + tag.tag_name = context.tag_name; + tag.color.clrid = color.clrid; + tag.color.color_name = color.color_name; + this._hideTagPopUp(); + return; + + case HttpStatusCodes.BadRequest: + context.errors = ConstantMessages.UnsuccessfulRequest + ' (400)'; + return; + + default: + context.errors = ConstantMessages.UnsuccessfulRequest; + return; + } + } + + /** + * Переключает тег у карточки + * @param {Object} data данные + */ + async _toggleTag(data) { + const context = this._storage.get('tags-list-popup'); + const currentCard = this._getCardById(this._storage.get('card-popup').clid, + this._storage.get('card-popup').cid); + + let payload; + + try { + payload = await Network.toggleCardTag(this._storage.get('card-popup').cid, + data.tgid); + } catch (error) { + console.log('Unable to connect to backend, reason: ', error); + return; + } + + switch (payload.status) { + case HttpStatusCodes.Ok: + const tagPopUp = context.tags.find((tag) => { + return tag.tgid === data.tgid; + }); + tagPopUp.selected = !tagPopUp.selected; + + if (tagPopUp.selected) { + currentCard.tags.push(tagPopUp); + } else { + currentCard.tags.splice(currentCard.tags.indexOf(currentCard.tags.find((tag) => { + return tag.tgid === data.tgid; + })), 1); + } + + return; + + case HttpStatusCodes.BadRequest: + context.errors = ConstantMessages.UnsuccessfulRequest + ' (400)'; + return; + + default: + context.errors = ConstantMessages.UnsuccessfulRequest; + return; + } + } + + /** + * Выбирает цвет для текущего, редактируемого тега + * @param {Object} data данные + */ + _pickColor(data) { + const context = this._storage.get('tag-popup'); + context.picked_color = data.clrid; + context.colors.forEach((color) => { + color.selected = (color.clrid === context.picked_color); + }); + } + + /** + * Обновляет в сторе редактируемое имя тега + * @param {Object} data данные c название тега + */ + _editTagName(data) { + const context = this._storage.get('tag-popup'); + context.tag_name = data.tag_name; + } } export default new BoardStore(); diff --git a/src/styles/scss/CardPopup.scss b/src/styles/scss/CardPopup.scss index fbed6ea4..3ce9acdc 100644 --- a/src/styles/scss/CardPopup.scss +++ b/src/styles/scss/CardPopup.scss @@ -99,7 +99,7 @@ .login__input__bar:after { position: absolute; content: ""; - + height: 2px; bottom: -1px; left: 0; @@ -111,9 +111,6 @@ transition: all 0.3s ease-in-out; } - - - /* кнопка входа */ .login__button { padding: 16px 24px; @@ -127,7 +124,7 @@ letter-spacing: 1px; font-size: 16px; - + cursor: pointer; transition: all 0.3s ease-in-out; diff --git a/src/styles/scss/Common.scss b/src/styles/scss/Common.scss index ba954dc2..37836646 100644 --- a/src/styles/scss/Common.scss +++ b/src/styles/scss/Common.scss @@ -112,7 +112,6 @@ div#root { } .card-tag { - background: darkred; // будет в шаблоне width: 50px; height: 10px; border-radius: 5px; @@ -220,6 +219,15 @@ div#root { } } + &-check { + @extend .material-icon; + + &::before { + content: 'check'; + } + + } + &-remove { @extend .material-icon; &::before { diff --git a/src/styles/scss/Constants.scss b/src/styles/scss/Constants.scss index 7f845465..a0bf2be1 100644 --- a/src/styles/scss/Constants.scss +++ b/src/styles/scss/Constants.scss @@ -31,3 +31,5 @@ $nav-bar-hover: rgba(0, 0, 0, 0.5); $small-font-size: 16px; $mobile-threshold: 500px; $popup-min-width: 190px; + +$tags-list-tag-height: 32px; diff --git a/src/styles/scss/PopUp.scss b/src/styles/scss/PopUp.scss index 8aa50003..5a318921 100644 --- a/src/styles/scss/PopUp.scss +++ b/src/styles/scss/PopUp.scss @@ -54,6 +54,14 @@ &_invite { max-width: 450px; } + + &_tag { + max-width: 450px; + } + + &_tag-list { + max-width: 450px; + } } .popup-form { diff --git a/src/views/BoardView/BoardView.hbs b/src/views/BoardView/BoardView.hbs index 5b5561c3..1c3eb254 100644 --- a/src/views/BoardView/BoardView.hbs +++ b/src/views/BoardView/BoardView.hbs @@ -14,6 +14,8 @@
Добавить колонку
Настройки
+
+
Теги
{{#each _cardlists}} @@ -29,5 +31,7 @@ {{{DeleteCardPopUp}}} {{{AddBoardMemberPopUp}}} {{{AddCardMemberPopUp}}} +{{{TagsListPopUp}}} +{{{TagPopUp}}} {{{Footer}}} diff --git a/src/views/BoardView/BoardView.js b/src/views/BoardView/BoardView.js index 0351d975..005338bf 100644 --- a/src/views/BoardView/BoardView.js +++ b/src/views/BoardView/BoardView.js @@ -17,6 +17,8 @@ import CardPopUp from '../../popups/Card/CardPopUp.js'; import DeleteCardListPopUp from '../../popups/DeleteCardList/DeleteCardListPopUp.js'; import DeleteCardPopUp from '../../popups/DeleteCard/DeleteCardPopUp.js'; import AddUserPopUp from '../../popups/AddUser/AddUserPopUp.js'; +import TagsListPopUp from '../../popups/TagsList/TagsListPopUp.js'; +import TagPopUp from '../../popups/Tag/TagPopUp.js'; // Stores import UserStore from '../../stores/UserStore/UserStore.js'; @@ -34,6 +36,7 @@ import './BoardView.scss'; // Шаблон import template from './BoardView.hbs'; +import {tagsActions} from '../../actions/tags'; /** * Класс, реализующий страницу доски. @@ -64,6 +67,8 @@ export default class BoardView extends BaseView { this.addComponent('DeleteCardPopUp', new DeleteCardPopUp()); this.addComponent('AddBoardMemberPopUp', new AddUserPopUp(this._addUserCallBacks.board)); this.addComponent('AddCardMemberPopUp', new AddUserPopUp(this._addUserCallBacks.card)); + this.addComponent('TagsListPopUp', new TagsListPopUp()); + this.addComponent('TagPopUp', new TagPopUp()); this._setContextByComponentName('AddBoardMemberPopUp', BoardStore.getContext('add-board-member-popup')); @@ -136,6 +141,7 @@ export default class BoardView extends BaseView { showSettingBtn: document.getElementById('showBoardSettingPopUpId'), showCreateCLBtn: document.getElementById('showCreateCardListPopUpId'), addMembersBtn: document.getElementById('showAddBoardMemberPopUpId'), + showTagsBtn: document.getElementById('showTagsBoardPopUpId'), cardLists: { addCardBtns: document.querySelectorAll('.addCardToCardList'), editBtns: document.querySelectorAll('.editCardList'), @@ -182,6 +188,7 @@ export default class BoardView extends BaseView { }, }; this._onAddBoardMemberShow = this._onAddBoardMemberShow.bind(this); + this._onShowTagListPopUpBoard = this._onShowTagListPopUpBoard.bind(this); } /** @@ -211,6 +218,7 @@ export default class BoardView extends BaseView { this._elements.cards.checkDeadlineCardBtns.forEach((checkDeadlineCardBtn)=>{ checkDeadlineCardBtn.addEventListener('click', this._onCheckDeadlineCard); }); + this._elements.showTagsBtn?.addEventListener('click', this._onShowTagListPopUpBoard); } /** @@ -239,6 +247,7 @@ export default class BoardView extends BaseView { this._elements.cards.checkDeadlineCardBtns.forEach((checkDeadlineCardBtn)=>{ checkDeadlineCardBtn.removeEventListener('click', this._onCheckDeadlineCard); }); + this._elements.showTagsBtn?.removeEventListener('click', this._onShowTagListPopUpBoard); } /** @@ -394,4 +403,14 @@ export default class BoardView extends BaseView { boardActions.hideAddBoardMemberPopUp(); } } + + /** + * CallBack на отображение тегов + * @param {Event} event - объект события + * @private + */ + _onShowTagListPopUpBoard(event) { + event.preventDefault(); + tagsActions.showTagListPopUpBoard(); + } } diff --git a/webpack.config.js b/webpack.config.js index c2fc58e9..f5227e68 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -13,9 +13,9 @@ const confConst = { BACKEND_RELEASE: process.env.BACKEND_RELEASE || SERVER_IP, BACKEND_PORT: process.env.BACKEND_PORT || 8000, FRONTEND_RELEASE: process.env.FRONTEND_RELEASE || SERVER_IP, - FRONTEND_PORT: process.env.FRONTEND_PORT || 3000, + FRONTEND_PORT: process.env.FRONTEND_PORT || 3001, DEBUG: process.env.NODE_ENV !== 'production', - PROTOCOL: process.env.PROTOCOL || 'http', + PROTOCOL: process.env.PROTOCOL || 'https', }; const confDefs = {