feat fix dialog, header, drag

project-management-app/src/app/boards/components/board/board.component.scss

@@ -66,7 +66,7 @@
     padding: 2rem 2rem 0;
     background-color: $board-main-bg;
     border-top: 2px solid $theme-accent;
-    border-radius: $border-radius;
+    border-radius: $border-radius $border-radius 5px 5px;
 
     &--scrollable {
       @include scrollbar(100%, 10px);
@@ -86,13 +86,15 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: $border-radius;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
   opacity: 0.5;
+  border: 2px dashed $theme-accent;
+  border-radius: $border-radius;
+  transition: all 0.3s;
 }
 
 .cdk-drag-animating {

project-management-app/src/app/boards/components/board/column/column.component.html

@@ -4,23 +4,31 @@
       <div class="column__title">
         <h3 class="column__title--no-edit" *ngIf="!editMode">
           <mat-icon class="column__title__icon">flare</mat-icon>
-          <span class="column__title__text">{{ column?.title || '' }}</span>
+          <span class="column__title__text">{{ column?.title || "" }}</span>
         </h3>
         <div class="column__title--edit" *ngIf="editMode">
-          <app-column-edit [column]="column" [boardID]="boardID" (cancelEditing)="onCancelEditing()"
-            (submitEditing)="onSubmitEditing($event)"></app-column-edit>
+          <app-column-edit
+            [column]="column"
+            [boardID]="boardID"
+            (cancelEditing)="onCancelEditing()"
+            (submitEditing)="onSubmitEditing($event)"
+          ></app-column-edit>
         </div>
       </div>
-      <app-button-board-delete title="Delete column"
-        (click)="boardHandlingService.openDialogToDelete('column', columnTitle, boardID, columnID, '')"
-        appClickStopPropagation></app-button-board-delete>
+      <app-button-board-delete
+        title="Delete column"
+        (click)="
+          boardHandlingService.openDialogToDelete('column', columnTitle, boardID, columnID, '')
+        "
+        appClickStopPropagation
+      ></app-button-board-delete>
     </div>
     <div
       class="column__content"
       cdkDropList
       [cdkDropListData]="tasks"
-      (cdkDropListDropped)="drop($event)">
-
+      (cdkDropListDropped)="drop($event)"
+    >
       <app-task
         class="column__item column-box"
         *ngFor="let task of tasks"
@@ -29,10 +37,13 @@ <h3 class="column__title--no-edit" *ngIf="!editMode">
         [boardID]="boardID"
         (click)="boardHandlingService.updateTaskModal(boardID, columnID, task)"
         cdkDrag
-      ></app-task>
-
+      >
+      </app-task>
     </div>
   </div>
-  <app-button-board-create text="Add task" (click)="boardHandlingService.openCreateTaskDialog(boardID, columnID)">
+  <app-button-board-create
+    text="Add task"
+    (click)="boardHandlingService.openCreateTaskDialog(boardID, columnID)"
+  >
   </app-button-board-create>
 </div>

project-management-app/src/app/boards/components/board/column/column.component.scss

@@ -97,13 +97,13 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: $border-radius;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
   opacity: 0.5;
+  transition: all 0.3s;
 }
 
 .cdk-drag-animating {

project-management-app/src/app/boards/services/drag-drop.service.ts

@@ -10,13 +10,12 @@ import { IBoard } from 'src/app/shared/models/board.model';
 import { ITaskRequest } from 'src/app/shared/models/task-request.model';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class DragDropService {
-
   constructor(private readonly store: Store) {}
 
-  public moveTask(event: CdkDragDrop < ITask[] > , boardID: string, column: IColumn): void {
+  public moveTask(event: CdkDragDrop<ITask[]>, boardID: string, column: IColumn): void {
     const columnID = column.id;
     const newColumn = JSON.parse(JSON.stringify(event.container.data));
     moveItemInArray(newColumn, event.previousIndex, event.currentIndex);
@@ -32,24 +31,26 @@ export class DragDropService {
     });
   }
 
-  public moveTaskDifferentColumn(event: CdkDragDrop < ITask[] > , boardID: string, column: IColumn, columns: IColumn[]): void {
+  public moveTaskDifferentColumn(
+    event: CdkDragDrop<ITask[]>,
+    boardID: string,
+    column: IColumn,
+    columns: IColumn[],
+  ): void {
     const columnID = column.id;
     const newTargetColumn = JSON.parse(JSON.stringify(event.container.data));
     const newPreviousColumn = JSON.parse(JSON.stringify(event.previousContainer.data));
-    transferArrayItem(
-      newPreviousColumn,
-      newTargetColumn,
-      event.previousIndex,
-      event.currentIndex,
-    );
+    transferArrayItem(newPreviousColumn, newTargetColumn, event.previousIndex, event.currentIndex);
     const prevTask = newTargetColumn[event.currentIndex];
     newTargetColumn.map((task: ITask, index: number) => {
       task.order = index + 1;
       return task;
     });
     this.addTask(boardID, columnID, prevTask);
     newTargetColumn.forEach((task: ITask, index: number) => {
-      if (event.currentIndex !== index) this.updateTask(boardID, columnID, task);
+      if (event.currentIndex !== index) {
+        this.updateTask(boardID, columnID, task);
+      }
     });
     const taskToDelete: ITask = event.previousContainer.data[event.previousIndex];
     columns.forEach((prevColumn: IColumn) => {
@@ -61,31 +62,27 @@ export class DragDropService {
 
   private deleteTask(boardID: string, columnID: string, taskID: string): void {
     this.store.dispatch(
-      TaskActions.DeleteTask({
+      TaskActions.DragDeleteTask({
         boardID,
         columnID,
         taskID,
       }),
     );
   }
 
-  private updateTask(
-    boardID: string,
-    columnID: string,
-    oldTask: ITask ,
-  ): void {
+  private updateTask(boardID: string, columnID: string, oldTask: ITask): void {
     const taskID = oldTask.id;
-    const task: Omit < ITaskRequest, 'id' > = {
+    const task: Omit<ITaskRequest, 'id'> = {
       title: oldTask.title,
       done: oldTask.done,
       order: oldTask.order,
       description: oldTask.description,
       userId: oldTask.userId,
       boardId: boardID,
       columnId: columnID,
-    }
+    };
     this.store.dispatch(
-      TaskActions.PutTask({
+      TaskActions.DragTask({
         boardID,
         columnID,
         taskID,
@@ -95,25 +92,27 @@ export class DragDropService {
   }
 
   addTask(boardID: string, columnID: string, prevTask: ITask): void {
-    const task: Partial < ITaskRequest > = {
+    const taskRequest: Partial<ITaskRequest> = {
       title: prevTask.title,
       done: prevTask.done,
       order: prevTask.order,
       description: prevTask.description,
       userId: prevTask.userId,
     };
     this.store.dispatch(
-      TaskActions.AddTask({
+      TaskActions.DragAddTask({
         boardID,
         columnID,
-        task,
+        task: prevTask,
+        taskRequest,
       }),
     );
   }
 
-  public moveColumn(event: CdkDragDrop < IColumn[] > , boardID: string, board: IBoard): void {
+  public moveColumn(event: CdkDragDrop<IColumn[]>, boardID: string, board: IBoard): void {
     const newBoard = JSON.parse(JSON.stringify(board));
-    if (newBoard?.columns) moveItemInArray(newBoard.columns, event.previousIndex, event.currentIndex);
+    if (newBoard?.columns)
+      moveItemInArray(newBoard.columns, event.previousIndex, event.currentIndex);
     let maxOrder = 0;
     let minOrder = Infinity;
     newBoard.columns.forEach((column: IColumn) => {
@@ -122,17 +121,12 @@ export class DragDropService {
     });
     newBoard.columns.forEach((column: IColumn, index: number) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      (minOrder > newBoard.columns.length) ? column.order = index + 1: column.order = ++maxOrder;
+      minOrder > newBoard.columns.length ? (column.order = index + 1) : (column.order = ++maxOrder);
       this.updateColumn(boardID, column);
     });
   }
 
-  private updateColumn(boardID: string, column: Partial < IColumn > ): void {
-    this.store.dispatch(
-      ColumnActions.putColumn({
-        boardID,
-        column,
-      }),
-    );
+  private updateColumn(boardID: string, column: IColumn): void {
+    this.store.dispatch(ColumnActions.dragColumn({ boardID, column }));
   }
 }

project-management-app/src/app/core/components/header/create-button/create-button.component.scss

@@ -1,8 +1,10 @@
 @import "variables";
 @import "mixins";
+@import "animation";
 
 .btn {
   @include btn-shadow-style;
+  animation: 0.5s forwards reveal;
 
   font-size: 2.4rem;
   font-weight: 300;

project-management-app/src/app/core/components/header/header/header.component.scss

@@ -1,5 +1,6 @@
 @import "variables";
 @import "mixins";
+@import "animation";
 
 :host {
   display: block;
@@ -14,13 +15,14 @@
 }
 
 .header {
+  animation: 0.5s forwards reveal;
   position: sticky;
   top: 0;
   left: 0;
   z-index: 500;
   padding: 0 3rem;
   transition: all 0.3s ease-in-out;
-  background-color: $form-bg;
+  background-color: $color-white;
   display: flex;
   gap: 2rem;
   align-items: center;

project-management-app/src/app/core/components/header/navigation/navigation.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="(isAuth$ | async) && !hiddenElement">
+<nav class="nav" *ngIf="(isAuth$ | async) && !hiddenElement">
   <span *ngIf="profile$ | async as profile" class="user-name" title="Your name">{{
     profile.name
   }}</span>
@@ -19,4 +19,4 @@
       Logout
     </button>
   </div>
-</ng-container>
+</nav>

project-management-app/src/app/core/components/header/navigation/navigation.component.scss

@@ -1,9 +1,8 @@
 @import "variables";
+@import "animation";
 
 :host {
   margin-left: auto;
-  display: flex;
-  align-items: center;
 
   @media only screen and (max-width: $laptop) {
     position: absolute;
@@ -28,6 +27,12 @@
   }
 }
 
+.nav {
+  display: flex;
+  align-items: center;
+  animation: 0.5s forwards reveal;
+}
+
 .user-name {
   display: block;
   font-size: 2.5rem;

project-management-app/src/app/shared/components/dialog-creation/dialog-creation.component.ts

@@ -2,16 +2,16 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { map, Observable, of, take, tap } from 'rxjs';
+import { EMPTY, map, Observable, of, take, tap } from 'rxjs';
 import { BoardActions } from 'src/app/store/actions/board.action';
 import { ColumnActions } from 'src/app/store/actions/column.action';
 import { TaskActions } from 'src/app/store/actions/task.action';
 import { BoardSelectors } from 'src/app/store/selectors/board.selector';
+import { selectProfile } from 'src/app/store/selectors/auth.selector';
 import { IBoard } from '../../models/board.model';
 import { IColumn } from '../../models/column.model';
 import { ITask } from '../../models/task.model';
-
-const DEFAULT_USER_ID = 'd07f544c-99e0-4816-a331-5c87794e4270';
+import { User } from '../../models/user.model';
 
 const MAIN_PAGE = '/main';
 
@@ -54,7 +54,9 @@ const DEFAULT_ALERT = {
   styleUrls: ['./dialog-creation.component.scss'],
 })
 export class DialogCreationComponent implements OnInit {
-  boards$: Observable<IBoard[]> = of([]);
+  private boards$: Observable<IBoard[]> = of([]);
+
+  private currentUser$: Observable<User | null> = EMPTY;
 
   title: string = DefaultTitle[this.data.type];
 
@@ -70,6 +72,8 @@ export class DialogCreationComponent implements OnInit {
 
   currentTask!: ITask;
 
+  private currentUserID = '';
+
   createEntity = {
     board: this.createBoard,
     column: this.createColumn,
@@ -87,6 +91,16 @@ export class DialogCreationComponent implements OnInit {
 
   ngOnInit(): void {
     this.boards$ = this.store.select(BoardSelectors.selectBoards);
+    this.currentUser$ = this.store.select(selectProfile);
+    this.currentUser$
+      .pipe(
+        take(1),
+        tap((user) => {
+          this.currentUserID = user?.id || '';
+        }),
+      )
+      .subscribe();
+
     if (this.data.column) {
       this.currentColumn = this.data.column;
       this.title = this.currentColumn.title;
@@ -137,7 +151,7 @@ export class DialogCreationComponent implements OnInit {
             order: this.takeNextTaskOrder,
             description: this.description,
             done: false,
-            userId: DEFAULT_USER_ID,
+            userId: this.currentUserID,
           },
         }),
       );

project-management-app/src/app/store/actions/column.action.ts

@@ -11,6 +11,7 @@ export enum ColumnAction {
   DeleteColumnSuccess = '[column] DELETE_COLUMN_SUCCESS',
   PutColumn = '[column] PUT_COLUMN',
   PutColumnSuccess = '[column] PUT_COLUMN_SUCCESS',
+  DragColumn = '[column] DRAG_COLUMN',
   ColumnError = '[column] COLUMN_ERROR',
 }
 
@@ -41,6 +42,10 @@ export namespace ColumnActions {
     ColumnAction.PutColumnSuccess,
     props<{ boardID: string; column: IColumn }>(),
   );
+  export const dragColumn = createAction(
+    ColumnAction.DragColumn,
+    props<{ boardID: string; column: IColumn }>(),
+  );
   export const columnError = createAction(
     ColumnAction.ColumnError,
     props<{