Changes for updated Dragula and some file attachment work

src/api/.user.ini

@@ -0,0 +1,3 @@
+upload_max_filesize = 40M
+post_max_size = 40M
+

src/app/app.module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
-import { DragulaModule } from 'ng2-dragula/ng2-dragula';
+import { DragulaModule } from 'ng2-dragula/dist';
 
 import { ROUTES } from './app.routes';
 import { AppComponent } from './app.component';
@@ -21,7 +21,7 @@ import { SharedModule } from './shared/shared.module';
     BrowserModule,
     FormsModule,
     HttpClientModule,
-    DragulaModule,
+    DragulaModule.forRoot(),
     BoardModule,
     DashboardModule,
     SettingsModule,

src/app/board/board.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, AfterContentInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 
-import { DragulaService } from 'ng2-dragula/ng2-dragula';
+import { DragulaService } from 'ng2-dragula/dist';
 
 import {
   ApiResponse,
@@ -127,13 +127,13 @@ export class BoardDisplay implements OnInit, OnDestroy, AfterContentInit {
       this.dragula.destroy('tasks-bag');
     }
 
-    this.dragula.setOptions('tasks-bag', {
+    this.dragula.createGroup('tasks-bag', <any>{
       moves: (el: any, container: any, handle: any) => {
         return handle.classList.contains('drag-handle');
       }
     });
 
-    this.dragula.dropModel.subscribe((value: any) => {
+    this.dragula.dropModel('tasks-bag').subscribe((value: any) => {
       let taskId = +value[1].id,
         toColumnId = +value[2].parentNode.id,
         fromColumnId = +value[3].parentNode.id;

src/app/board/board.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { DragulaModule } from 'ng2-dragula/ng2-dragula';
+import { DragulaModule } from 'ng2-dragula/dist';
 import { SharedModule } from '../shared/shared.module';
 
 import { BoardDisplay } from './board.component';

src/app/board/board.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 
 import * as marked from 'marked';
 import * as hljs from 'highlight.js';
@@ -139,8 +139,12 @@ export class BoardService {
     );
   }
 
-  uploadAttachment(attachment: Attachment): Observable<ApiResponse> {
+  uploadAttachment(attachment: Attachment, data: FormData): Observable<ApiResponse> {
-    return this.http.post('api/attachments', attachment)
+    let headers = new HttpHeaders();
+    let options = { headers: headers, params: new HttpParams() };
+    options.params.set('attachment', JSON.stringify(attachment));
+
+    return this.http.post('api/attachments', data, options)
     .pipe(
       map((response: ApiResponse) => { return response; }),
       catchError((err) => { return of(<ApiResponse>err.error); })

src/app/board/column/column.component.html

@@ -73,7 +73,7 @@
 </div>
 
 <div class="tasks" *ngIf="columnData"
-  [dragula]="'tasks-bag'" [dragulaModel]="columnData.tasks">
+  [dragula]="'tasks-bag'" [(dragulaModel)]="columnData.tasks">
   <tb-task class="task-container" [id]="task.id"
     *ngFor="let task of columnData.tasks"
     [task]="task" [boards]="boards"

src/app/board/column/column.component.ts

@@ -12,6 +12,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import {
   ApiResponse,
   ActivitySimple,
+  Attachment,
   Board,
   Category,
   Column,
@@ -286,9 +287,17 @@ export class ColumnDisplay implements OnInit, OnDestroy {
     let formData = new FormData();
     formData.append('file', this.fileUpload);
 
-    let headers = new Headers();
+    let attachment = new Attachment();
+    attachment.filename = this.fileUpload.name;
+    attachment.name = attachment.filename.split('.')[0];
+    attachment.type = this.fileUpload.type;
+    attachment.user_id = this.activeUser.id;
+    attachment.task_id = this.viewModalProps.id;
 
-    console.log(formData, headers); // tslint:disable-line
+    this.boardService.uploadAttachment(attachment, formData)
+      .subscribe(res => {
+        console.log(res);
+      });
   }
 
   addComment() {

src/app/settings/board-admin/board-admin.component.html

@@ -160,7 +160,7 @@
   <div class="half-modal">
     <label>{{ strings['settings_columns'] }}</label>
     <ul class="modal-list" [hidden]="!modalProps.columns.length"
-      [dragula]="'columns-bag'" [dragulaModel]="modalProps.columns">
+      [dragula]="'columns-bag'" [(dragulaModel)]="modalProps.columns">
       <li *ngFor="let column of modalProps.columns; let i = index">
         <i class="icon icon-resize-vertical"></i>
         <inline-edit [text]="getPropertyValue('columns', 'name', i)"

src/app/settings/board-admin/board-admin.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
 
-import { DragulaService } from 'ng2-dragula/ng2-dragula';
+import { DragulaService } from 'ng2-dragula/dist';
 
 import {
   ApiResponse,
@@ -109,14 +109,14 @@ export class BoardAdmin implements OnDestroy {
       this.dragula.destroy('columns-bag');
     }
 
-    this.dragula.setOptions('columns-bag', {
+    this.dragula.createGroup('columns-bag', <any>{
       moves: (el: any, container: any, handle: any) => {
         return handle.classList.contains('icon-resize-vertical');
       },
       mirrorContainer: ul
     });
 
-    this.dragula.dragend.subscribe(() => {
+    this.dragula.dragend('columns-bag').subscribe(() => {
       this.modalProps.columns.forEach((item, index) => {
         item.position = '' + index;
       });

src/app/settings/settings.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { DragulaModule } from 'ng2-dragula/ng2-dragula';
+import { DragulaModule } from 'ng2-dragula/dist';
 import { SharedModule } from '../shared/shared.module';
 
 import { AutoActions } from './auto-actions/auto-actions.component';