LDBR-4.12: Вложения (#49)

* LDBR-4.12: Реализовать функционал работы с вложенями * LDBR-4.7: Внести правки в работу с аттачами Co-authored-by: DPeshkoff <[email protected]>
frontend-park-mail-ru · Dec 16, 2021 · 72d92ac · 72d92ac
1 parent 93e40be
commit 72d92ac
Show file tree

Hide file tree

Showing 9 changed files with 320 additions and 0 deletions.
diff --git a/.github/workflows/Deploy.yml b/.github/workflows/Deploy.yml
@@ -57,4 +57,5 @@ jobs:
             source: "dist/*"
             target: "/home/ubuntu/01-frontend/"
             overwrite: true
+            rm: true
 
diff --git a/src/actions/attachments.js b/src/actions/attachments.js
@@ -0,0 +1,51 @@
+'use strict';
+
+// Modules
+import Dispatcher from '../modules/Dispatcher/Dispatcher.js';
+
+/**
+ * Константа, содержащая в себе типы действий для списка досок.
+ */
+export const AttachmentsActionTypes = {
+    UPLOAD: 'attach/upload',
+    DELETE: 'attach/delete',
+    DOWNLOAD: 'attach/download',
+};
+
+/**
+ * Класс, содержащий в себе действия в системе.
+ */
+export const attachmentsActions = {
+    /**
+     * Загружает файл вложения
+     * @param {File} file файл вложения
+     */
+    uploadAttachment(file) {
+        Dispatcher.dispatch({
+            actionName: AttachmentsActionTypes.UPLOAD,
+            data: {file},
+        });
+    },
+
+    /**
+     * Удаляет файл вложения
+     * @param {Number} atid id вложения
+     */
+    deleteAttachment(atid) {
+        Dispatcher.dispatch({
+            actionName: AttachmentsActionTypes.DELETE,
+            data: {atid},
+        });
+    },
+
+    /**
+     * Скачивает файл вложения
+     * @param {Number} atid id вложения
+     */
+    downloadAttachment(atid) {
+        Dispatcher.dispatch({
+            actionName: AttachmentsActionTypes.DOWNLOAD,
+            data: {atid},
+        });
+    },
+};
diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -97,13 +97,15 @@ export const ConstantMessages = {
     CardTitleTooLong: 'Название карточки слишком длинное',
     CardErrorOnServer: 'Не удалось создать карточку, попробуйте позднее',
     UnsuccessfulRequest: 'Неудачный запрос, попробуйте позднее :]',
+    AttachmentSizeTooBig: 'Слишком большой размер вложения',
     CantCopyToClipBoard: 'Не удалось скопировать текст',
 
     WrongTagNameLength: 'Введите имя тега длиной от 1 до 40 символов',
 };
 
 export const BoardStoreConstants = {
     MinUserNameSearchLength: 3,
+    MaxAttachmentSize: 1024 * 1024 * 50,
 };
 
 export const CheckLists = {

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',
+            attachments: 'api/attachments',
             tags: 'api/tags',
         };
 
@@ -709,6 +710,40 @@ class Network {
             `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.card}/access/${cid}`,
             options);
     }
+
+    /**
+     * Метод, реализующий запрос POST /api/attachments/:cid.
+     * @param {Object} data файл аттача
+     * @param {Number} cid id карточки
+     * @return {Promise<Response>} промис запроса
+     */
+    async uploadAttachment(data, cid) {
+        const options = {
+            method: 'post',
+            body: data,
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/` +
+            `${this._endpoints.attachments}/${cid}`,
+            options);
+    }
+
+    /**
+     * Метод, реализующий запрос DELETE /api/attachments/:atid.
+     * @param {Number} atid id аттача
+     * @return {Promise<Response>} промис запроса
+     */
+    async deleteAttachment(atid) {
+        const options = {
+            method: 'delete',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.attachments}/${atid}`,
+            options);
+    }
 }
 
 export default new Network();
diff --git a/src/popups/Card/CardPopUp.hbs b/src/popups/Card/CardPopUp.hbs
@@ -102,6 +102,21 @@
                             <div class="error">{{errors}}</div>
                         {{/if}}
                         {{#if edit }}
+                            {{#if attachments}}<span class="check-list-separator">Вложения</span>{{/if}}
+                            <div class="attachments">
+                                {{#each attachments}}
+                                <div class="attachment" data-id="{{this.atid}}">
+                                    <div class="attachment__icon material-icon-file"></div>
+                                    <div class="attachment__title"><div>{{this.file_pub_name}}</div></div>
+                                    <div class="attachment__download-btn material-icon-download"></div>
+                                    <div class="attachment__delete-btn material-icon-delete"></div>
+                                </div>
+                                {{/each}}
+                            </div>
+                            <label class="button attachment__button">
+                                <input type="file" accept="*" id="attachmentInputId"/>
+                                <i class="fa fa-cloud-upload"></i><span>Загрузить вложение</span>
+                            </label>
                             <button class="button" id="cardPopUpAddAssigneeBtnId">Участники</button>
                             <button class="button" id="cardPopUpAddCheckListBtnId">Новый чек-лист</button>
                             <button class="button" id="cardPopUpSaveBtnId">Сохранить</button>

diff --git a/src/popups/Card/CardPopUp.js b/src/popups/Card/CardPopUp.js
@@ -11,6 +11,7 @@ import {checkListAction} from '../../actions/checklist';
 
 // Стили:
 import './CardPopUp.scss';
+import {attachmentsActions} from '../../actions/attachments';
 import {tagsActions} from '../../actions/tags';
 
 /**
@@ -61,6 +62,9 @@ export default class CardPopUp extends BaseComponent {
                 deleteBtn: document.querySelectorAll('.checklist-item-delete'),
                 label: document.querySelectorAll('.checklist-item__label'),
             },
+            attachInput: document.getElementById('attachmentInputId'),
+            downloadAttachBtn: document.querySelectorAll('.attachment__download-btn'),
+            deleteAttachBtn: document.querySelectorAll('.attachment__delete-btn'),
             scrollZone: document.getElementById('cardPopUpScrollZoneId'),
             tags: document.querySelectorAll('.card-popup-tag'),
             addTagBtn: document.getElementById('addTagCardPopUpId'),
@@ -133,6 +137,15 @@ export default class CardPopUp extends BaseComponent {
         if (this._elements.scrollZone) {
             this._elements.scrollZone.scrollTop = this.context.get('card-popup').scroll;
         }
+
+        /* Attachments */
+        this._elements.attachInput?.addEventListener('change', this._onUploadAttachment);
+        this._elements.downloadAttachBtn?.forEach((element) => {
+            element.addEventListener('click', this._onDownloadAttachment);
+        });
+        this._elements.deleteAttachBtn?.forEach((element) => {
+            element.addEventListener('click', this._onDeleteAttachment);
+        });
     };
 
     /**
@@ -184,6 +197,14 @@ export default class CardPopUp extends BaseComponent {
             element.removeEventListener('click', this._onDeleteCheckListItem);
         });
 
+        /* Attachments */
+        this._elements.attachInput?.removeEventListener('change', this._onUploadAttachment);
+        this._elements.downloadAttachBtn?.forEach((element) => {
+            element.removeEventListener('click', this._onDownloadAttachment);
+        });
+        this._elements.deleteAttachBtn?.forEach((element) => {
+            element.removeEventListener('click', this._onDeleteAttachment);
+        });
         /* Tags */
         this._elements.tags?.forEach((tag) => {
             tag.removeEventListener('click', this._onShowTagListPopUpCard);
@@ -221,6 +242,10 @@ export default class CardPopUp extends BaseComponent {
         this._onSaveChekListItem = this._onSaveChekListItem.bind(this);
         this._onToggleChekListItem = this._onToggleChekListItem.bind(this);
 
+        /* Attachments */
+        this._onDownloadAttachment = this._onDownloadAttachment.bind(this);
+        this._onUploadAttachment = this._onUploadAttachment.bind(this);
+        this._onDeleteAttachment = this._onDeleteAttachment.bind(this);
         /* Tags */
         this._onShowTagListPopUpCard = this._onShowTagListPopUpCard.bind(this);
     }
@@ -475,6 +500,37 @@ export default class CardPopUp extends BaseComponent {
         cardActions.changeScroll(this._elements.scrollZone.scrollTop);
     }
 
+    /**
+     * CallBack на загрузку вложения
+     * @param {Event} event - объект события
+     * @private
+     */
+    _onUploadAttachment(event) {
+        event.preventDefault();
+        attachmentsActions.uploadAttachment(event.target.files[0]);
+    }
+
+    /**
+     * CallBack на удаление вложения
+     * @param {Event} event - объект события
+     * @private
+     */
+    _onDeleteAttachment(event) {
+        event.preventDefault();
+        const atid = Number.parseInt(event.target.closest('div.attachment').dataset.id, 10);
+        attachmentsActions.deleteAttachment(atid);
+    }
+
+    /**
+     * CallBack на скачивание вложения
+     * @param {Event} event - объект события
+     * @private
+     */
+    _onDownloadAttachment(event) {
+        event.preventDefault();
+        const atid = Number.parseInt(event.target.closest('div.attachment').dataset.id, 10);
+        attachmentsActions.downloadAttachment(atid);
+    }
     /**
      * CallBack на добаление тега
      * @param {Event} event - объект события

diff --git a/src/popups/Card/CardPopUp.scss b/src/popups/Card/CardPopUp.scss
@@ -84,6 +84,51 @@ input.checklist-item__input {
     }
 }
 
+
+.attachments {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+}
+
+.attachment {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+
+    &__icon {
+    }
+
+    &__title {
+        margin-left: 5px;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &__download-btn {
+
+    }
+
+    &__delete-btn {
+
+    }
+
+    &__button {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        column-gap: 5px;
+    }
+}
+
+#attachmentInputId {
+    display: none;
+}
 .card-popup-tags {
     display: flex;
     flex-direction: row;