DSC-1603 Last changes and package.json and yarn.lock sortable replaced + lint fix

[DURACOM-237] Fix tests

[DURACOM-237] - Refactoring based on @angular/cdk/drag-drop

[DURACOM-237] - Added DragDropModule which replaced the SortablejsModule inside form.module.ts

Author: Simone-Ramundi

package.json

@@ -140,7 +140,6 @@
     "ng2-nouislider": "^2.0.0",
     "ngx-infinite-scroll": "^15.0.0",
     "ngx-pagination": "6.0.3",
-    "ngx-sortablejs": "^11.1.0",
     "ngx-ui-switch": "^14.0.3",
     "nouislider": "^15.7.1",
     "pem": "1.14.7",
@@ -149,7 +148,6 @@
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.0",
     "sanitize-html": "^2.10.0",
-    "sortablejs": "1.15.0",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
     "zone.js": "~0.11.5"

src/app/shared/form/chips/chips.component.html

@@ -4,29 +4,28 @@
 </ng-template>
 
 <div [className]="'float-left w-100 ' + wrapperClass">
-  <div *ngIf="isPlatformBrowser" role="list" class="nav nav-pills d-flex flex-column flex-sm-row" [sortablejs]="chips.getChips()" [sortablejsOptions]="options">
+  <div  *ngIf="isPlatformBrowser" role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
     <ng-container *ngFor="let c of chips.getChips(); let i = index">
       <ng-template #tipContent>
         <p class="text-left p-0 m-0" *ngFor="let tip of (tipText$ | async)">
           {{tip}}
         </p>
       </ng-template>
-
       <div role="listitem" class="nav-item mr-2 mb-1"
-          #t="ngbTooltip"
-          triggers="manual"
-          [ngbTooltip]="tipContent"
-          (dragstart)="t.close();onDragStart(i)"
-          (dragend)="onDragEnd(i)"
-          (mouseover)="showTooltip(t, i)"
-          (mouseout)="t.close()">
+           #t="ngbTooltip"
+           triggers="manual"
+           [ngbTooltip]="tipContent"
+           (mouseover)="showTooltip(t, i)"
+           (mouseout)="t.close()">
         <a class="flex-sm-fill text-sm-center nav-link active bg-info"
+           cdkDrag
+           (cdkDragStarted)="onDrag(i)"
            href="javascript:void(0);"
-           [class.disabled]="(editable && c.editMode) || dragged == i || !clickable"
+           [class.disabled]="!clickable || (editable && c.editMode) || dragged == i  "
            [class.chip-selected]="(editable && c.editMode) || dragged == i"
            (click)="chipsSelected($event, i);">
           <span>
-            <i *ngIf="showIcons && !c.isNestedItem()" dsAuthorityConfidenceState [authorityValue]="c.item" class="far fa-circle" aria-hidden="true"></i>
+            <i *ngIf="showIcons && !c.isNestedItem()" dsAuthorityConfidenceState [authorityValue]="c.item" class="far fa-circle" aria-hidden="true">&nbsp;</i>
             <ng-container *ngIf="showIcons && c.hasVisibleIcons()">
               <span *ngFor="let icon of c.icons; let l = last" class="chip-stacked-icons">
                 <i [ngbTooltip]="tipContent"
@@ -41,7 +40,6 @@
                    [visibleWhenAuthorityEmpty]="icon.visibleWhenAuthorityEmpty"
                    [showTooltip]="false"
                    aria-hidden="true"
-                   (dragstart)="t.close();"
                    (mouseover)="showTooltip(t, i, icon.metadata)"
                    (mouseout)="t.close()"></i>
                 <i *ngIf="hasWillBeGenerated(c, icon.metadata)"

src/app/shared/form/chips/chips.component.scss

@@ -1,11 +1,27 @@
-.chip-selected {
-  background-color: var(--bs-secondary) !important;
-}
+//.example-custom-placeholder {
+  //background: #ccc;
+  //border: none;
+  //min-height: 30px;
+  //border: 2px solid red;
+//}
 
-.chip-label {
-  max-width: 10rem;
+.cdk-drag-placeholder {
+  filter: grayscale(100%);
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.cdk-drag-preview {
+  color: white;
+  box-sizing: border-box;
+  border-radius: 0.25rem;
+  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);
 }
 
+//.example-drag-preview.nav-item {
+//  margin-right: 2px;
+//  margin-bottom: 1px;
+//}
+
 .chip-stacked-icons {
   display: inline-block;
   position: relative;

src/app/shared/form/chips/chips.component.spec.ts

@@ -11,7 +11,6 @@ import { createTestComponent } from '../../testing/utils.test';
 import { AuthorityConfidenceStateDirective } from '../directives/authority-confidence-state.directive';
 import { TranslateModule } from '@ngx-translate/core';
 import { ConfidenceType } from '../../../core/shared/confidence-type';
-import { SortablejsModule } from 'ngx-sortablejs';
 import { environment } from '../../../../environments/environment';
 
 describe('ChipsComponent test suite', () => {
@@ -29,7 +28,6 @@ describe('ChipsComponent test suite', () => {
     TestBed.configureTestingModule({
       imports: [
         NgbModule,
-        SortablejsModule.forRoot({ animation: 150 }),
         TranslateModule.forRoot()
       ],
       declarations: [
@@ -94,18 +92,18 @@ describe('ChipsComponent test suite', () => {
     }));
 
     it('should save chips item index when drag and drop start', fakeAsync(() => {
-      const de = chipsFixture.debugElement.query(By.css('div.nav-item'));
+      const de = chipsFixture.debugElement.query(By.css('a'));
 
-      de.triggerEventHandler('dragstart', null);
+      de.triggerEventHandler('cdkDragStarted', null);
 
       expect(chipsComp.dragged).toBe(0);
     }));
 
     it('should update chips item order when drag and drop end', fakeAsync(() => {
       spyOn(chipsComp.chips, 'updateOrder');
-      const de = chipsFixture.debugElement.query(By.css('div.nav-item'));
+      const de = chipsFixture.debugElement.query(By.css('div[role="list"]'));
 
-      de.triggerEventHandler('dragend', null);
+      de.triggerEventHandler('cdkDropListDropped', { previousIndex: 0, currentIndex: 1 });
 
       expect(chipsComp.dragged).toBe(-1);
       expect(chipsComp.chips.updateOrder).toHaveBeenCalled();

src/app/shared/form/chips/chips.component.ts

@@ -15,12 +15,12 @@ import isObject from 'lodash/isObject';
 
 import { Chips } from './models/chips.model';
 import { ChipsItem } from './models/chips-item.model';
-import { DragService } from '../../../core/drag.service';
 import { TranslateService } from '@ngx-translate/core';
-import { Options } from 'sortablejs';
 import { BehaviorSubject, forkJoin } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { isNotEmpty } from '../../empty.util';
+import { CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+
 
 const TOOLTIP_TEXT_LIMIT = 21;
 @Component({
@@ -40,7 +40,6 @@ export class ChipsComponent implements OnChanges {
   @Output() change: EventEmitter<any> = new EventEmitter<any>();
 
   isDragging: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-  options: Options;
   dragged = -1;
   tipText$: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
 
@@ -52,16 +51,7 @@ export class ChipsComponent implements OnChanges {
   constructor(
     @Inject(PLATFORM_ID) protected platformId: string,
     private cdr: ChangeDetectorRef,
-    private dragService: DragService,
     private translate: TranslateService) {
-
-    this.options = {
-      animation: 300,
-      chosenClass: 'm-0',
-      dragClass: 'm-0',
-      filter: '.chips-sort-ignore',
-      ghostClass: 'm-0',
-    };
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -88,22 +78,23 @@ export class ChipsComponent implements OnChanges {
     }
   }
 
-  onDragStart(index) {
+  onDrag(index) {
     this.isDragging.next(true);
-    this.dragService.overrideDragOverPage();
     this.dragged = index;
   }
 
-  onDragEnd(event) {
-    this.dragService.allowDragOverPage();
-    this.dragged = -1;
+  onDrop(event: CdkDragDrop<ChipsItem[]>) {
+    moveItemInArray(this.chips.chipsItems.getValue(), event.previousIndex, event.currentIndex);
     this.chips.updateOrder();
     this.isDragging.next(false);
   }
 
   showTooltip(tooltip: NgbTooltip, index, field?) {
     tooltip.close();
     let canShowToolTip = true;
+    if (this.isDragging.value) {
+      return;
+    }
     const chipsItem = this.chips.getChipByIndex(index);
     const textToDisplay: string[] = [];
     if (!chipsItem.editMode && this.dragged === -1) {

src/app/shared/form/form.module.ts

@@ -30,7 +30,7 @@ import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstr
 import { ChipsComponent } from './chips/chips.component';
 import { NumberPickerComponent } from './number-picker/number-picker.component';
 import { AuthorityConfidenceStateDirective } from './directives/authority-confidence-state.directive';
-import { SortablejsModule } from 'ngx-sortablejs';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { VocabularyTreeviewComponent } from './vocabulary-treeview/vocabulary-treeview.component';
 import { VocabularyTreeviewModalComponent } from './vocabulary-treeview-modal/vocabulary-treeview-modal.component';
 import { FormBuilderService } from './builder/form-builder.service';
@@ -95,11 +95,11 @@ const DIRECTIVES = [
     SearchModule,
     SharedModule,
     TranslateModule,
-    SortablejsModule,
     NgxMaskModule.forRoot(),
     NgbDatepickerModule,
     NgbTimepickerModule,
     CdkTreeModule,
+    DragDropModule,
   ],
   exports: [
     ...COMPONENTS,

yarn.lock

@@ -8981,13 +8981,6 @@ ngx-pagination@6.0.3:
   dependencies:
     tslib "^2.3.0"
 
-ngx-sortablejs@^11.1.0:
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/ngx-sortablejs/-/ngx-sortablejs-11.1.0.tgz#14e50c48db908c1cb4b37722b28c2d3867c6140a"
-  integrity sha512-eM4dHwWSmXDcvF5gUmyMMQ0qqcqBXWCSZ9IRpqx4UkBKfo4N7pk/QuYh5io2fXVHWVFDaxW1yhn2FNpqxV6Jqw==
-  dependencies:
-    tslib "^2.0.0"
-
 ngx-ui-switch@^14.0.3:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/ngx-ui-switch/-/ngx-ui-switch-14.1.0.tgz#32248361a684257c5ae64cfde61b95de920b901c"
@@ -11325,11 +11318,6 @@ socks@^2.6.2:
     ip "^2.0.0"
     smart-buffer "^4.2.0"
 
-sortablejs@1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a"
-  integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==
-
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"