Added drag and drop functionality

abhishekjain12 · Nov 13, 2019 · a1f409d · a1f409d
1 parent a17ed32
commit a1f409d
Show file tree

Hide file tree

Showing 13 changed files with 112 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,7 @@ Use `ngx-ts` in your `app-component.html` template.
   [sections]="sections"
   [events]="events"
   [showBusinessDayOnly]="false"
+  [allowDragging]="true"
 ></ngx-ts>
 ```
 
@@ -144,6 +145,7 @@ export class AppComponent implements OnInit {
 | showGoto              | No        | boolean   | `true`                    | Whether the Goto button should be displayed. |
 | showToday             | No        | boolean   | `true`                    | Whether the Today button should be displayed. |
 | showBusinessDayOnly   | No        | boolean   | `false`                   | Whether business days only displayed (Sat-Sun). |
+| allowDragging         | No        | boolean   | `false`                   | Whether or not dragging should be allowed. |
 | headerFormat          | No        | string    | `'Do MMM YYYY'`           | The momentjs format to use for the date range displayed as a header. |
 | minRowHeight          | No        | number    | `40`                      | The minimum height, in pixels, that a section should be. |
 | maxHeight             | No        | number    | `null`                    | The maximum height of the scheduler. |
@@ -202,6 +204,7 @@ A selection of events are provided to hook into when creating the scheduler, and
 | ---               | ---               | ---           | ---         |
 | ItemClicked       | item: Item        | void          | Triggered when an item is clicked. |
 | SectionClickEvent | section: Section  | void          | Triggered when a section is clicked. |
+| ItemDropped       | item: Item        | void          | Triggered when an item is dropped onto a section. `item` is the new data after the action. |
 
 
 # Demo

diff --git a/package.json b/package.json
@@ -19,44 +19,45 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.1.0",
-    "@angular/common": "~7.1.0",
-    "@angular/compiler": "~7.1.0",
-    "@angular/core": "~7.1.0",
-    "@angular/forms": "~7.1.0",
-    "@angular/platform-browser": "~7.1.0",
-    "@angular/platform-browser-dynamic": "~7.1.0",
-    "@angular/router": "~7.1.0",
+    "@angular/animations": "~8.2.13",
+    "@angular/cdk": "^8.2.3",
+    "@angular/common": "~8.2.13",
+    "@angular/compiler": "~8.2.13",
+    "@angular/core": "~8.2.13",
+    "@angular/forms": "~8.2.13",
+    "@angular/platform-browser": "~8.2.13",
+    "@angular/platform-browser-dynamic": "~8.2.13",
+    "@angular/router": "~8.2.13",
     "core-js": "^2.5.4",
     "moment": "^2.24.0",
-    "rxjs": "~6.3.3",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.8.26"
+    "rxjs": "~6.4.0",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.11.0",
-    "@angular-devkit/build-ng-packagr": "~0.11.0",
-    "@angular/cli": "~7.1.3",
-    "@angular/compiler-cli": "~7.1.0",
-    "@angular/language-service": "~7.1.0",
+    "@angular-devkit/build-angular": "~0.803.17",
+    "@angular-devkit/build-ng-packagr": "~0.803.17",
+    "@angular/cli": "~8.3.17",
+    "@angular/compiler-cli": "~8.2.13",
+    "@angular/language-service": "~8.2.13",
     "@types/node": "~8.9.4",
-    "@types/jasmine": "~2.8.8",
+    "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "~4.5.0",
+    "codelyzer": "^5.0.1",
     "gh-pages": "^2.1.1",
-    "jasmine-core": "~2.99.1",
+    "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.1.1",
+    "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^4.2.0",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "ng-packagr": "^5.4.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
-    "tsickle": ">=0.29.0",
+    "tsickle": "^0.37.0",
     "tslib": "^1.9.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.1.6"
+    "tslint": "~5.15.0",
+    "typescript": "~3.5.3"
   }
 }
diff --git a/projects/ngx-time-scheduler/package.json b/projects/ngx-time-scheduler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-time-scheduler",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "A simple Angular Timeline Scheduler library",
   "author": {
     "name": "Abhishek Jain",
@@ -27,8 +27,9 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^7.1.0",
-    "@angular/core": "^7.1.0",
+    "@angular/common": "^8.2.13",
+    "@angular/core": "^8.2.13",
+    "@angular/cdk": "^8.2.3",
     "moment": "^2.24.0"
   }
 }
diff --git a/projects/ngx-time-scheduler/src/lib/ngx-time-scheduler.component.css b/projects/ngx-time-scheduler/src/lib/ngx-time-scheduler.component.css
@@ -150,3 +150,10 @@
   border-left-width: 1px;
   border-left-color: #000000;
 }
+
+.item-drag-placeholder {
+  position: absolute;
+  background: #ccc;
+  border: dotted 3px #999;
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
diff --git a/projects/ngx-time-scheduler/src/lib/ngx-time-scheduler.component.html b/projects/ngx-time-scheduler/src/lib/ngx-time-scheduler.component.html
@@ -61,12 +61,21 @@ <h3 class="text-center m-0">
         </tr>
       </table>
 
-      <div class="time-sch-section-wrapper" [style.left]="SectionLeftMeasure">
+      <div class="time-sch-section-wrapper" [style.left]="SectionLeftMeasure" cdkDropListGroup>
         <div class="time-sch-section-container"
+             cdkDropList
+             cdkDropListSortingDisabled
+             [cdkDropListData]="sectionItem.section"
+             (cdkDropListDropped)="drop($event)"
              *ngFor="let sectionItem of sectionItems; trackBy: trackByFn"
              [style.height]="sectionItem.minRowHeight + 'px'"
         >
           <div class="time-sch-item"
+               cdkDrag
+               cdkDragLockAxis="y"
+               cdkDragBoundary=".time-sch-section-wrapper"
+               [cdkDragData]="itemMeta.item"
+               [cdkDragDisabled]="!allowDragging"
                *ngFor="let itemMeta of sectionItem.itemMetas"
                [ngClass]="itemMeta.item.classes"
                (click)="events.ItemClicked ? events.ItemClicked(itemMeta.item) : false"
@@ -75,6 +84,12 @@ <h3 class="text-center m-0">
                [style.left]="itemMeta.cssLeft + '%'"
                [style.width]="itemMeta.cssWidth + '%'"
           >
+            <div class="item-drag-placeholder"
+                 *cdkDragPlaceholder
+                 [style.height]="(minRowHeight - 6) + 'px'"
+                 [style.left]="itemMeta.cssLeft + '%'"
+                 [style.width]="'calc('+ itemMeta.cssWidth + '% - 6px)'"
+            ></div>
             <div class="time-sch-item-start" *ngIf="itemMeta.isStart"></div>
             <div class="time-sch-item-content">
               {{itemMeta.item.name}}

diff --git a/projects/ngx-time-scheduler/src/lib/ngx-time-scheduler.component.ts b/projects/ngx-time-scheduler/src/lib/ngx-time-scheduler.component.ts
@@ -1,4 +1,5 @@
 import {ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {CdkDragDrop} from '@angular/cdk/drag-drop';
 import {
   HeaderDetails,
   Header,
@@ -18,7 +19,7 @@ const moment = moment_;
   styleUrls: ['./ngx-time-scheduler.component.css']
 })
 export class NgxTimeSchedulerComponent implements OnInit {
-  @ViewChild('sectionTd') set SectionTd(elementRef: ElementRef) {
+  @ViewChild('sectionTd', {static: false}) set SectionTd(elementRef: ElementRef) {
     this.SectionLeftMeasure = elementRef.nativeElement.clientWidth + 'px';
     this.changeDetector.detectChanges();
   }
@@ -27,9 +28,8 @@ export class NgxTimeSchedulerComponent implements OnInit {
   @Input() showCurrentTime = true;
   @Input() showGoto = true;
   @Input() showToday = true;
-  // @Input() allowDragging = false;
+  @Input() allowDragging = false;
   // @Input() allowResizing = false;
-  // @Input() disableOnMove = true;
   @Input() showBusinessDayOnly = false;
   @Input() headerFormat = 'Do MMM YYYY';
   @Input() minRowHeight = 40;
@@ -51,7 +51,7 @@ export class NgxTimeSchedulerComponent implements OnInit {
   currentPeriod: Period;
   currentPeriodMinuteDiff = 0;
   header: Header[];
-  sectionItems: SectionItem[] = new Array<SectionItem>();
+  sectionItems: SectionItem[];
 
   constructor(private changeDetector: ChangeDetectorRef) { }
 
@@ -65,6 +65,7 @@ export class NgxTimeSchedulerComponent implements OnInit {
   }
 
   setSectionsInSectionItems() {
+    this.sectionItems = new Array<SectionItem>();
     this.sections.forEach(section => {
       const perSectionItem = new SectionItem();
       perSectionItem.section = section;
@@ -217,4 +218,11 @@ export class NgxTimeSchedulerComponent implements OnInit {
     return count;
   }
 
+  drop(event: CdkDragDrop<Section>) {
+    event.item.data.sectionID = event.container.data.id;
+    this.setSectionsInSectionItems();
+    this.changePeriod(this.currentPeriod);
+    this.events.ItemDropped(event.item.data);
+  }
+
 }
diff --git a/projects/ngx-time-scheduler/src/lib/ngx-time-scheduler.model.ts b/projects/ngx-time-scheduler/src/lib/ngx-time-scheduler.model.ts
@@ -20,6 +20,32 @@ export class Section {
   name: string;
 }
 
+export class Text {
+  NextButton: string;
+  PrevButton: string;
+  TodayButton: string;
+  GotoButton: string;
+  SectionTitle: string;
+
+  constructor() {
+    this.NextButton = 'Next';
+    this.PrevButton = 'Prev';
+    this.TodayButton = 'Today';
+    this.GotoButton = 'Go to';
+    this.SectionTitle = 'Section';
+  }
+}
+
+export class Events {
+  // ItemResized: (item: Item, start: any, end: any) => void;
+  // ItemMovement: (item: Item, start: any, end: any) => void;
+  // ItemMovementStart: (item: Item, start: any, end: any) => void;
+  // ItemMovementEnd: (item: Item, start: any, end: any) => void;
+  ItemDropped: (item: Item) => void;
+  ItemClicked: (item: Item) => void;
+  SectionClickEvent: (section: Section) => void;
+}
+
 export class SectionItem {
   section: Section;
   minRowHeight: number;
@@ -57,31 +83,3 @@ export class HeaderDetails {
   name: string;
   colspan: number;
 }
-
-export class Text {
-  NextButton: string;
-  PrevButton: string;
-  TodayButton: string;
-  GotoButton: string;
-  SectionTitle: string;
-
-  constructor() {
-    this.NextButton = 'Next';
-    this.PrevButton = 'Prev';
-    this.TodayButton = 'Today';
-    this.GotoButton = 'Go to';
-    this.SectionTitle = 'Section';
-  }
-}
-
-export class Events {
-  // ItemMouseEnter: (item: Item) => void;
-  // ItemMouseLeave: (item: Item) => void;
-  // ItemDropped: (item: Item, sectionID: string, start: any, end: any) => void;
-  // ItemResized: (item: Item, start: any, end: any) => void;
-  // ItemMovement: (item: Item, start: any, end: any) => void;
-  // ItemMovementStart: (item: Item, start: any, end: any) => void;
-  // ItemMovementEnd: (item: Item, start: any, end: any) => void;
-  ItemClicked: (item: Item) => void;
-  SectionClickEvent: (section: Section) => void;
-}
diff --git a/projects/ngx-time-scheduler/src/lib/ngx-time-scheduler.module.ts b/projects/ngx-time-scheduler/src/lib/ngx-time-scheduler.module.ts
@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { NgxTimeSchedulerComponent } from './ngx-time-scheduler.component';
 import {CommonModule} from '@angular/common';
+import {DragDropModule} from '@angular/cdk/drag-drop';
 
 @NgModule({
   declarations: [NgxTimeSchedulerComponent],
   imports: [
-    CommonModule
+    CommonModule,
+    DragDropModule
   ],
   exports: [NgxTimeSchedulerComponent]
 })

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -4,9 +4,14 @@
   [sections]="sections"
   [events]="events"
   [showBusinessDayOnly]="false"
+  [allowDragging]="true"
 ></ngx-ts>
 
 <h3>Event output</h3>
 <label>
-  <textarea placeholder="Event output" [(ngModel)]="eventOutput" name="event-output" style="width: 80%"></textarea>
+  <textarea
+    placeholder="Event output"
+    [(ngModel)]="eventOutput"
+    name="event-output"
+    style="width: 80%; height: 50px"></textarea>
 </label>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -18,6 +18,7 @@ export class AppComponent implements OnInit {
   constructor() {
     this.events.SectionClickEvent = (section) => { this.eventOutput += '\n' + JSON.stringify(section); };
     this.events.ItemClicked = (item) => { this.eventOutput += '\n' + JSON.stringify(item); };
+    this.events.ItemDropped = (item) => { this.eventOutput += '\n' + JSON.stringify(item); };
 
     this.periods = [
       {

diff --git a/src/browserslist b/src/browserslist
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,15 +2,16 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "downlevelIteration": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

diff --git a/tslint.json b/tslint.json
@@ -118,12 +118,12 @@
       "check-type"
     ],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true