From 64f568c567b12a40b5ce497605977e8f1081f31e Mon Sep 17 00:00:00 2001
From: Dmitry Peshkov <31134795+DPeshkoff@users.noreply.github.com>
Date: Wed, 24 Nov 2021 12:44:33 +0300
Subject: [PATCH] =?UTF-8?q?LDBR-3.17:=20=D0=94=D0=B5=D0=B4=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=B9=D0=BD=20(#34)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* LDBR-3.17: Вернуть дедлайн, отрисовывать валидность даты в превью.

* LDBR-3.17: Добавить возможность отмечать выполненную карточку, изменен дизайн превью дедлайна.

* LDBR-3.17: Исправить стиль кодирования.

* LDBR-3.17: Изменить название стиля согласно БЭМ'у

* LDBR-3.17: Исправить интеграцию с бэкендом.

* LDBR-3.17: Добавить ограничения на год, исправить автообновление, автоматически добавлять текущее время.
---
 src/actions/card.js                          | 34 ++++----
 src/components/Card/Card.hbs                 | 12 +--
 src/components/Card/Card.scss                | 17 +++-
 src/modules/Helpers/isEmptyDeadlineHelper.js |  5 +-
 src/modules/Validator/Validator.js           | 22 +++++
 src/popups/Card/CardPopUp.hbs                |  9 +-
 src/popups/Card/CardPopUp.js                 | 50 ++++++++++--
 src/stores/BoardStore/BoardStore.js          | 86 +++++++++++++++++++-
 src/views/BoardView/BoardView.js             | 20 +++++
 9 files changed, 216 insertions(+), 39 deletions(-)

diff --git a/src/actions/card.js b/src/actions/card.js
index 6ed388eb..49decab3 100644
--- a/src/actions/card.js
+++ b/src/actions/card.js
@@ -15,6 +15,7 @@ export const CardActionTypes = {
     CARD_DELETE_SHOW: 'card/delete/show',
     CARD_DELETE_CHOOSE: 'card/delete/choose',
     CARD_DELETE_HIDE: 'card/delete/hide',
+    CARD_UPDATE_STATUS: 'card/update/deadline',
 };
 
 /**
@@ -58,39 +59,44 @@ export const cardActions = {
 
     /**
      * Обновляет список карточек
-     * @param {Number} position позиция на доске
-     * @param {String} title заголовок
-     * @param {String} description описание
-     * @param {Number} cid id карточки
-     * @param {Number} bid id доски
-     * @param {Number} clid id списка карточек
+     * @param {Object} data объект, содержащий поля карточки
      */
-    updateCard(position, title, description, cid, bid, clid) {
+    updateCard(data) {
         Dispatcher.dispatch({
             actionName: CardActionTypes.CARD_UPDATE_SUBMIT,
+            data,
+        });
+    },
+
+    /**
+     * Обновляет статус дедлайна карточки
+     * @param {Number} clid id списка карточек
+     * @param {Number} cid id карточки
+     */
+    updateDeadlineCard(clid, cid) {
+        Dispatcher.dispatch({
+            actionName: CardActionTypes.CARD_UPDATE_STATUS,
             data: {
-                card_name: title,
-                description,
-                pos: position,
-                cid,
-                bid,
                 clid,
+                cid,
             },
         });
     },
 
+
     /**
      * Создает карточку
      * @param {String} title заголовок
      * @param {String} description описание
+     * @param {String} deadline дедлайн
      */
-    createCard(title, description) {
+    createCard(title, description, deadline) {
         Dispatcher.dispatch({
             actionName: CardActionTypes.CARD_CREATE_SUBMIT,
             data: {
                 card_name: title,
                 description,
-                // deadline,
+                deadline,
             },
         });
     },
diff --git a/src/components/Card/Card.hbs b/src/components/Card/Card.hbs
index 64422154..dea2b88e 100644
--- a/src/components/Card/Card.hbs
+++ b/src/components/Card/Card.hbs
@@ -9,12 +9,12 @@
         <span class="column__delete material-icons deleteCard" data-id="{{cid}}"></span>
     </div>
     <div class="card__badges" data-id="{{cid}}">
-{{!--         {{#if (IsEmptyDeadlineHelper deadline)}}
-        <div class="badge-due-date-wrapper" data-id="{{cid}}">
-            <div class="material-icons badge-due-date__icon" data-id="{{cid}}"></div>
-            <div class="badge-due-date__text" data-id="{{cid}}">{{deadline}}</div>
-        </div>
-        {{/if}} --}}
+        {{#if (IsEmptyDeadlineHelper deadline)}}
+            <div class="badge-due-date-wrapper badge-due-date__text-{{deadlineStatus}} checkDeadlineCard" data-id="{{cid}}">
+                <div class="material-icons badge-due-date__icon" data-id="{{cid}}"></div>
+                <div class="badge-due-date__text badge-due-date__text-{{deadlineStatus}}" data-id="{{cid}}">{{deadlineDate}}</div>
+            </div>
+        {{/if}}
         {{#if description}}
             <div class="material-icons badge-description" data-id="{{cid}}"></div>
         {{/if}}
diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
index 04fc4390..fb7ee9cf 100644
--- a/src/components/Card/Card.scss
+++ b/src/components/Card/Card.scss
@@ -43,7 +43,6 @@ $card-due-date-done: forestgreen;
 .badge-due-date-wrapper {
   border: 2px solid;
   border-radius: 10px;
-  width: min-content;
   display: flex;
   flex-direction: row;
   padding-right: 5px;
@@ -56,9 +55,23 @@ $card-due-date-done: forestgreen;
 
 .badge-due-date__text {
   font-family: 'Montserrat', sans-serif;
-  font-size: 15px;
+  font-size: 13px;
   font-weight: bold;
   line-height: normal;
+  color: rgb(255, 255, 255);
+  padding-top: 3px;
+    
+  &-invalid {
+    background-color: rgb(235, 90, 70);
+  }
+
+  &-valid {
+    background-color: rgb(97, 189, 79);
+  }
+
+  &-completed {
+    background-color: rgb(107, 148, 99);
+  }
 }
 
 .badge-due-date-wrapper_overdue {
diff --git a/src/modules/Helpers/isEmptyDeadlineHelper.js b/src/modules/Helpers/isEmptyDeadlineHelper.js
index 1dd7e59d..00a9affa 100644
--- a/src/modules/Helpers/isEmptyDeadlineHelper.js
+++ b/src/modules/Helpers/isEmptyDeadlineHelper.js
@@ -4,13 +4,12 @@
  * @return {boolean} - результат сравнения
  * @constructor
  */
-/* export default function IsEmptyDeadlineHelper(deadline) {
+export default function IsEmptyDeadlineHelper(deadline) {
     if (deadline) {
-        if (deadline === '0001-01-01T00:00:00Z') {
+        if (deadline === '0001-01-01T00:00') {
             return false;
         }
         return true;
     }
     return false;
 };
- */
diff --git a/src/modules/Validator/Validator.js b/src/modules/Validator/Validator.js
index da7b687c..357f821f 100644
--- a/src/modules/Validator/Validator.js
+++ b/src/modules/Validator/Validator.js
@@ -137,4 +137,26 @@ export default class Validator {
         }
         return null;
     }
+
+    /**
+     * Метод, валидирующий дату дедлайна
+     * @param {String} deadline дедлайн в строковом формате
+     * @param {boolean} deadlineCheck статус дедлайна (выполнено | не выполнено)
+     * @return {String} 'invalid' или 'valid'
+     */
+    validateDeadline(deadline, deadlineCheck) {
+        /*  if (!deadline) {
+            throw new Error('DeadlinePreview: некорректный deadline.');
+        } */
+        const deadlineDate = new Date(deadline);
+        const timeNow = new Date();
+
+        if (deadlineCheck) {
+            return 'completed';
+        }
+
+        return (deadlineDate <= timeNow) ?
+            'invalid' :
+            'valid';
+    }
 }
diff --git a/src/popups/Card/CardPopUp.hbs b/src/popups/Card/CardPopUp.hbs
index 5bc7c629..ce6f7892 100644
--- a/src/popups/Card/CardPopUp.hbs
+++ b/src/popups/Card/CardPopUp.hbs
@@ -24,12 +24,13 @@
                                 autofocus pattern="^[a-zA-Z\d]{1,40}$" autocomplete="off" required
                                 {{#if edit}} value="{{description}}" {{/if}}>
                         </div>
-{{!--                         <div>
+                        <div>
                             <label for="cardPopUpDeadlineId" class>Дедлайн карточки:</label>
-                            <input class="simple-form-element" type="text" id="cardPopUpDeadlineId" name="card-deadline"
-                                autofocus pattern="^[a-zA-Z\d]{1,40}$" autocomplete="off" required
+                            <input class="simple-form-element" type="datetime-local" id="cardPopUpDeadlineId" name="card-deadline"
+                                min="1970-01-01T00:00" max="3000-12-31T23:59" 
+                                pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required
                                 {{#if edit}} value="{{deadline}}" {{/if}}>
-                        </div> --}}
+                        </div>
                         {{#if edit}}
                             <label for="cardPopUpPositionId">Позиция:</label>
                             <select class="simple-form-element" id="cardPopUpPositionId" name="position-select" required>
diff --git a/src/popups/Card/CardPopUp.js b/src/popups/Card/CardPopUp.js
index 83f49b7f..6bcd112e 100644
--- a/src/popups/Card/CardPopUp.js
+++ b/src/popups/Card/CardPopUp.js
@@ -33,7 +33,7 @@ export default class CardPopUp extends BaseComponent {
             positionSelect: document.getElementById('cardPopUpPositionId'),
             card_name: document.getElementById('cardPopUpTitleId'),
             description: document.getElementById('cardPopUpDescriptionId'),
-            // deadline: document.getElementById('cardPopUpDeadlineId'),
+            deadline: document.getElementById('cardPopUpDeadlineId'),
         };
     }
 
@@ -48,6 +48,7 @@ export default class CardPopUp extends BaseComponent {
         this._elements.closeBtn?.addEventListener('click', this._onPopUpClose);
         this._elements.createBtn?.addEventListener('click', this._onCreate);
         this._elements.saveBtn?.addEventListener('click', this._onSave);
+        this._elements.deadline?.addEventListener('click', this._onDeadlineClick);
     };
 
     /**
@@ -60,6 +61,7 @@ export default class CardPopUp extends BaseComponent {
         this._elements.closeBtn?.removeEventListener('click', this._onPopUpClose);
         this._elements.createBtn?.removeEventListener('click', this._onCreate);
         this._elements.saveBtn?.removeEventListener('click', this._onSave);
+        this._elements.deadline?.removeEventListener('click', this._onDeadlineClick);
     }
 
     /**
@@ -70,6 +72,7 @@ export default class CardPopUp extends BaseComponent {
         this._onPopUpClose = this._onPopUpClose.bind(this);
         this._onCreate = this._onCreate.bind(this);
         this._onSave = this._onSave.bind(this);
+        this._onDeadlineClick = this._onDeadlineClick.bind(this);
     }
 
     /**
@@ -91,14 +94,21 @@ export default class CardPopUp extends BaseComponent {
      */
     _onSave(event) {
         event.preventDefault();
-        cardActions.updateCard(
-            parseInt(this._elements.positionSelect.value, 10),
-            this._elements.card_name.value,
-            this._elements.description.value,
-            this.context.cid,
-            this.context.bid,
-            this.context.clid,
-        );
+        const date = new Date(this._elements.deadline.value);
+        if (isNaN(date)) {
+            this._elements.deadline.value = '3000-12-31T23:59';
+        }
+
+        const data = {
+            position: parseInt(this._elements.positionSelect.value, 10),
+            card_name: this._elements.card_name.value,
+            description: this._elements.description.value,
+            cid: this.context.cid,
+            bid: this.context.bid,
+            clid: this.context.clid,
+            deadline: this._elements.deadline.value,
+        };
+        cardActions.updateCard(data);
     }
 
     /**
@@ -108,9 +118,31 @@ export default class CardPopUp extends BaseComponent {
      */
     _onCreate(event) {
         event.preventDefault();
+        const date = new Date(this._elements.deadline.value);
+        if (isNaN(date)) {
+            this._elements.deadline.value = '3000-12-31T23:59';
+        }
         cardActions.createCard(
             this._elements.card_name.value,
             this._elements.description.value,
+            this._elements.deadline.value,
         );
     }
+
+    /**
+     * Callback, вызываемый при редактировании дедлайна
+     * @param {Event} event объект события
+     * @private
+     */
+    _onDeadlineClick(event) {
+        event.preventDefault();
+        if (!this._elements.deadline.value) {
+            const date = new Date();
+            date.setDate(date.getDate() + 1);
+            this._elements.deadline.value = new Date(
+                date.getTime() - (date.getTimezoneOffset() * 60000))
+                .toISOString()
+                .substring(0, 16);
+        }
+    }
 }
diff --git a/src/stores/BoardStore/BoardStore.js b/src/stores/BoardStore/BoardStore.js
index ad2f5d07..b084ca74 100644
--- a/src/stores/BoardStore/BoardStore.js
+++ b/src/stores/BoardStore/BoardStore.js
@@ -186,6 +186,11 @@ class BoardStore extends BaseStore {
             this._emitChange();
             break;
 
+        case CardActionTypes.CARD_UPDATE_STATUS:
+            await this._updateDeadlineCheck(action.data);
+            this._emitChange();
+            break;
+
         default:
             return;
         }
@@ -196,6 +201,9 @@ class BoardStore extends BaseStore {
      * @param {Object} data полезная нагрузка запроса
      */
     async _getBoard(data) {
+        const validator = new Validator();
+        const options = {year: 'numeric', month: 'short', day: '2-digit'};
+
         let payload;
 
         try {
@@ -212,6 +220,15 @@ class BoardStore extends BaseStore {
             this._storage.set('board_name', payload.data.board_name);
             this._storage.set('description', payload.data.description);
             this._storage.set('card_lists', payload.data.card_lists);
+
+            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);
+                });
+            });
+
             return;
 
         case HttpStatusCodes.Unauthorized:
@@ -607,6 +624,8 @@ class BoardStore extends BaseStore {
 
         switch (payload.status) {
         case HttpStatusCodes.Ok:
+            const validator = new Validator();
+            const options = {year: 'numeric', month: 'short', day: '2-digit'};
             this._storage.get('card-popup').visible = false;
             this._getCardListById(data.clid).cards.push({
                 cid: payload.data.cid,
@@ -614,6 +633,11 @@ class BoardStore extends BaseStore {
                 card_name: data.card_name,
                 description: data.description,
                 pos: this._getCardListById(data.clid).cards.length + 1,
+                deadline: data.deadline,
+                deadline_check: false,
+                deadlineStatus: validator.validateDeadline(
+                    data.deadline, false),
+                deadlineDate: (new Date(data.deadline)).toLocaleDateString('ru-RU', options),
             });
             return;
 
@@ -668,10 +692,61 @@ class BoardStore extends BaseStore {
                 (_, index) => index + 1),
             card_name: card.card_name,
             description: card.description,
+            deadline: card.deadline,
+            deadline_check: card.deadline_check,
             errors: null,
         });
     }
 
+    /**
+     * Меняет статус дедлайна (выполнено | не выполнено)
+     * @param {Object} data информация о карточке
+     * @private
+     */
+    async _updateDeadlineCheck(data) {
+        const card = this._getCardById(
+            data.clid,
+            data.cid,
+        );
+
+        let payload;
+
+        const _data = {
+            pos: card.pos,
+            cid: card.cid,
+            clid: card.clid,
+            card_name: card.card_name,
+            description: card.description,
+            bid: card.bid,
+            deadline: card.deadline,
+            deadline_check: !card.deadline_check,
+        };
+
+        try {
+            payload = await Network._updateCard(_data, card.cid);
+        } catch (error) {
+            console.log('Unable to connect to backend, reason: ', error);
+            return;
+        }
+
+        switch (payload.status) {
+        case HttpStatusCodes.Ok:
+            const validator = new Validator();
+            card.deadlineStatus = validator.validateDeadline(
+                payload.data.deadline, payload.data.deadline_check);
+            card.deadline_check = payload.data.deadline_check;
+            return;
+
+        case HttpStatusCodes.Forbidden:
+            // todo
+            return;
+
+        default:
+            // todo
+            return;
+        }
+    }
+
     /**
      * Обновляет текущий card
      * @param {Object} data новые данные списка
@@ -696,6 +771,8 @@ class BoardStore extends BaseStore {
             card_name: data.card_name,
             description: data.description,
             bid: this._storage.get('card-popup').bid,
+            deadline: data.deadline,
+            deadline_check: data.deadline_check,
         };
 
         try {
@@ -723,11 +800,18 @@ class BoardStore extends BaseStore {
                 cards[index].pos += bound.increment;
             }
 
-            // Обновим cardList:
+            // Обновим card:
+            const options = {year: 'numeric', month: 'short', day: '2-digit'};
+
             card.card_name = data.card_name;
             card.description = data.description;
             card.pos = data.pos;
 
+            card.deadline = data.deadline;
+            card.deadlineStatus = validator.validateDeadline(data.deadline, data.deadline_check);
+            card.deadline_check = data.deadline_check;
+            card.deadlineDate = (new Date(data.deadline)).toLocaleDateString('ru-RU', options);
+
             // Переупорядочим списки
             cards.sort((lhs, rhs) => {
                 return lhs.pos - rhs.pos;
diff --git a/src/views/BoardView/BoardView.js b/src/views/BoardView/BoardView.js
index abc9d480..2f409f38 100644
--- a/src/views/BoardView/BoardView.js
+++ b/src/views/BoardView/BoardView.js
@@ -132,6 +132,7 @@ export default class BoardView extends BaseView {
             cards: {
                 editAreas: document.querySelectorAll('.editCard'),
                 deleteBtns: document.querySelectorAll('.deleteCard'),
+                checkDeadlineCardBtns: document.querySelectorAll('.checkDeadlineCard'),
             },
         };
     }
@@ -176,6 +177,9 @@ export default class BoardView extends BaseView {
         this._elements.cards.deleteBtns.forEach((deleteCardBtn)=>{
             deleteCardBtn.addEventListener('click', this._onDeleteCard);
         });
+        this._elements.cards.checkDeadlineCardBtns.forEach((checkDeadlineCardBtn)=>{
+            checkDeadlineCardBtn.addEventListener('click', this._onCheckDeadlineCard);
+        });
     }
 
     /**
@@ -200,6 +204,9 @@ export default class BoardView extends BaseView {
         this._elements.cards.deleteBtns.forEach((deleteCardBtn)=>{
             deleteCardBtn.removeEventListener('click', this._onDeleteCard);
         });
+        this._elements.cards.checkDeadlineCardBtns.forEach((checkDeadlineCardBtn)=>{
+            checkDeadlineCardBtn.removeEventListener('click', this._onCheckDeadlineCard);
+        });
     }
 
     /**
@@ -269,4 +276,17 @@ export default class BoardView extends BaseView {
         );
         event.stopPropagation();
     }
+
+    /**
+     * Метод вызывается при нажатии на значок дедлайна
+     * @param {Event} event объект события
+     * @private
+     */
+    _onCheckDeadlineCard(event) {
+        cardActions.updateDeadlineCard(
+            parseInt(event.target.closest('.column__content').dataset.id, 10),
+            parseInt(event.target.dataset.id, 10),
+        );
+        event.stopPropagation();
+    }
 }