LDBR-3.17: Дедлайн (#34)

* LDBR-3.17: Вернуть дедлайн, отрисовывать валидность даты в превью. * LDBR-3.17: Добавить возможность отмечать выполненную карточку, изменен дизайн превью дедлайна. * LDBR-3.17: Исправить стиль кодирования. * LDBR-3.17: Изменить название стиля согласно БЭМ'у * LDBR-3.17: Исправить интеграцию с бэкендом. * LDBR-3.17: Добавить ограничения на год, исправить автообновление, автоматически добавлять текущее время.
frontend-park-mail-ru · Nov 24, 2021 · 64f568c · 64f568c
1 parent b9b527b
commit 64f568c
Show file tree

Hide file tree

Showing 9 changed files with 216 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
+        }
+    }
 }