From 73bb7b13682318dc83d4dd6b9be90a00ca0805f5 Mon Sep 17 00:00:00 2001
From: develite98 <phongcao3091998@gmail.com>
Date: Tue, 5 Dec 2023 22:52:23 +0700
Subject: [PATCH] bug: fix task drag and drop

---
 .../task-create/task-create.component.html    | 46 ++++++++++---------
 .../task-group-list.component.ts              |  8 +++-
 .../task-parent-card.component.ts             |  1 +
 .../task-manage/task-manage.component.ts      |  7 ++-
 4 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.html b/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.html
index 7db6a1ac..e77909e1 100644
--- a/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.html
+++ b/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.html
@@ -1,32 +1,36 @@
-<div class="task-create"
+<div class="task-create mix-dialog --default-padding"
      [formGroup]="taskForm">
-  <div class="text-l">Add New {{ parentTask ? 'Task' : 'Swimlane' }}</div>
+  <div class="mix-dialog__header">
+    Add New {{ parentTask ? 'Task' : 'Swimlane' }}
+  </div>
 
-  @if(parentTask) {
-  <div class="row mt-4 mb-1">
-    <div class="col-6">
-      <div class="mb-1 text-sub text-500">Task Type</div>
-      <task-type-select formControlName="type"></task-type-select>
-    </div>
+  <div class="mix-dialog__content">
+    @if(parentTask) {
+    <div class="row mb-1">
+      <div class="col-6">
+        <div class="mb-1 text-sub text-500">Task Type</div>
+        <task-type-select formControlName="type"></task-type-select>
+      </div>
 
-    <div class="col-6">
-      <div class="mb-1 text-sub text-500">Task Priority</div>
-      <task-priority-select formControlName="taskPriority"></task-priority-select>
+      <div class="col-6">
+        <div class="mb-1 text-sub text-500">Task Priority</div>
+        <task-priority-select formControlName="taskPriority"></task-priority-select>
+      </div>
     </div>
-  </div>
-  }
+    }
 
-  <div class="mt-3 mb-1 text-sub text-500">Short Summary</div>
-  <mix-input formControlName="title"
-             placeHolder="Quick description about your task"></mix-input>
+    <div class="mb-1 text-sub text-500">Short Summary</div>
+    <mix-input formControlName="title"
+               placeHolder="Quick description about your task"></mix-input>
 
-  <div class="mt-3 mb-1 text-sub text-500">Reporter</div>
-  <mix-user-select formControlName="reporter"></mix-user-select>
+    <div class="mt-3 mb-1 text-sub text-500">Reporter</div>
+    <mix-user-select formControlName="reporter"></mix-user-select>
 
-  <div class="mt-3 mb-1 text-sub text-500">Description</div>
-  <mix-rich-text-editor formControlName="description"></mix-rich-text-editor>
+    <div class="mt-3 mb-1 text-sub text-500">Description</div>
+    <mix-rich-text-editor formControlName="description"></mix-rich-text-editor>
+  </div>
 
-  <div class="mt-4 d-flex justify-content-end align-items-center gap-2">
+  <div class="mix-dialog__footer">
     <mix-button [loading]="loadingState() === 'Loading'"
                 (click)="createTask()">Create</mix-button>
     <mix-button type="outline"
diff --git a/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.ts b/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.ts
index 83527431..86c447f1 100644
--- a/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.ts
+++ b/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.ts
@@ -1,3 +1,4 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { Component, Input, inject, signal } from '@angular/core';
 import { MixTaskNew, TaskStatus, TaskStatusDisplay } from '@mixcore/lib/model';
@@ -8,7 +9,12 @@ import { TaskParentCardComponent } from '../task-parent-card/task-parent-card.co
 @Component({
   selector: 'mix-task-group-list',
   standalone: true,
-  imports: [CommonModule, TaskDndListComponent, TaskParentCardComponent],
+  imports: [
+    CommonModule,
+    TaskDndListComponent,
+    TaskParentCardComponent,
+    DragDropModule,
+  ],
   templateUrl: './task-group-list.component.html',
   styleUrls: ['./task-group-list.component.scss'],
 })
diff --git a/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.ts b/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.ts
index e19ded4a..8ab6558b 100644
--- a/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.ts
+++ b/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.ts
@@ -33,6 +33,7 @@ export class TaskParentCardComponent {
   public addTask() {
     this.dialog.open(TaskCreateComponent, {
       width: 800,
+      windowClass: 'top-align-modal',
       data: {
         parentTask: this.task,
       },
diff --git a/libs/mix-share/src/modules/task-manage/task-manage.component.ts b/libs/mix-share/src/modules/task-manage/task-manage.component.ts
index 9ef66b54..d2b17afe 100644
--- a/libs/mix-share/src/modules/task-manage/task-manage.component.ts
+++ b/libs/mix-share/src/modules/task-manage/task-manage.component.ts
@@ -1,3 +1,4 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -50,6 +51,7 @@ import { TaskStore } from './store/task.store';
     TaskHeaderComponent,
     ProjectSelectComponent,
     TrackByProp,
+    DragDropModule,
   ],
   templateUrl: './task-manage.component.html',
   styleUrls: ['./task-manage.component.scss'],
@@ -75,6 +77,9 @@ export class TaskManageComponent extends BaseComponent {
   }
 
   public addTask() {
-    this.dialog.open(TaskCreateComponent, { width: 800 });
+    this.dialog.open(TaskCreateComponent, {
+      width: 800,
+      windowClass: 'top-align-modal',
+    });
   }
 }