feat: TT-35 make new entries creation modal panel draggable (#646)

* feat: TT-35 make new entries creation modal panel draggable

* feat: TT-35 solve PR comments

Author: eduardisrael

package-lock.json

@@ -15,6 +15,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^10.2.2",
+    "@angular/cdk": "^11.2.3",
     "@angular/common": "~10.2.2",
     "@angular/compiler": "~10.2.2",
     "@angular/core": "~10.2.2",

package.json

@@ -10,6 +10,7 @@ import { DataTablesModule } from 'angular-datatables';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 import { NgxPaginationModule } from 'ngx-pagination';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
@@ -144,6 +145,7 @@ const maskConfig: Partial<IConfig> = {
     AutocompleteLibModule,
     NgxMaterialTimepickerModule,
     UiSwitchModule,
+    DragDropModule,
     StoreModule.forRoot(reducers, {
       metaReducers,
     }),

src/app/app.module.ts

@@ -61,7 +61,7 @@
 </div>
 <div class="modal fade" id="editRecordsByDate" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-    <div class="modal-content">
+    <div class="modal-content" cdkDrag (cdkDragEnded)="resetDraggablePosition($event)">
       <div class="modal-header">
         <h5 class="modal-title">{{ entryId ? 'Edit Entry' : 'New Entry' }}</h5>
       </div>

src/app/modules/time-entries/pages/time-entries.component.html

@@ -442,4 +442,17 @@ describe('TimeEntriesComponent', () => {
     component.newEntry();
     expect(component.entry).toEqual(newEntry);
   });
+
+  it('When I stop dragging the modal, it should reset Draggable Position', () => {
+    const dragEndEventStub = {
+      source: {
+        _dragRef: {
+          reset: () => { }
+        }
+      }
+    };
+    spyOn(dragEndEventStub.source._dragRef, 'reset');
+    component.resetDraggablePosition(dragEndEventStub);
+    expect(dragEndEventStub.source._dragRef.reset).toHaveBeenCalled();
+  });
 });

src/app/modules/time-entries/pages/time-entries.component.spec.ts

@@ -165,4 +165,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
     this.message = `Are you sure you want to delete ${item.activity_name}?`;
     this.showModal = true;
   }
-}
+  resetDraggablePosition(event: any): void {
+    event.source._dragRef.reset();
+  }
+}