From 3051fa8d8d2ff6e28af49592c8b657f0487eacd5 Mon Sep 17 00:00:00 2001 From: Simone Ramundi Date: Thu, 29 Feb 2024 16:12:26 +0100 Subject: [PATCH 01/14] [DURACOM-237] - Added DragDropModule which replaced the SortablejsModule inside form.module.ts --- src/app/shared/form/form.module.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/shared/form/form.module.ts b/src/app/shared/form/form.module.ts index 0bc87bef90..9a60c12f3f 100644 --- a/src/app/shared/form/form.module.ts +++ b/src/app/shared/form/form.module.ts @@ -61,6 +61,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 { 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'; @@ -126,6 +127,7 @@ const DIRECTIVES = [ NgxMaskModule.forRoot(), NgbDatepickerModule, NgbTimepickerModule, + DragDropModule, CdkTreeModule, ...COMPONENTS, ...DIRECTIVES From 3807a3563c93188bf0b31a8ddaee93fe0a33c82c Mon Sep 17 00:00:00 2001 From: Simone Ramundi Date: Thu, 29 Feb 2024 16:14:10 +0100 Subject: [PATCH 02/14] [DURACOM-237] - Refactoring ts based on @angular/cdk/drag-drop --- src/app/shared/form/chips/chips.component.ts | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.ts b/src/app/shared/form/chips/chips.component.ts index 56234e3e8b..d4b1cbf589 100644 --- a/src/app/shared/form/chips/chips.component.ts +++ b/src/app/shared/form/chips/chips.component.ts @@ -5,8 +5,8 @@ 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 { TranslateModule, TranslateService } from '@ngx-translate/core'; +import { TranslateService, TranslateModule } from '@ngx-translate/core'; +import { CdkDragDrop, CdkDragStart, moveItemInArray} from '@angular/cdk/drag-drop'; import { BehaviorSubject } from 'rxjs'; import { AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common'; import { AuthorityConfidenceStateDirective } from '../directives/authority-confidence-state.directive'; @@ -43,9 +43,7 @@ export class ChipsComponent implements OnChanges { constructor( private cdr: ChangeDetectorRef, - private dragService: DragService, private translate: TranslateService) { - } ngOnChanges(changes: SimpleChanges) { @@ -77,19 +75,14 @@ export class ChipsComponent implements OnChanges { } } - onDragStart(index) { + onDrag(event: CdkDragStart) { this.isDragging.next(true); - this.dragService.overrideDragOverPage(); - this.dragged = index; } - - onDragEnd(event) { - this.dragService.allowDragOverPage(); - this.dragged = -1; + onDrop(event: CdkDragDrop) { + moveItemInArray(this.chips.chipsItems.getValue(), event.previousIndex, event.currentIndex); this.chips.updateOrder(); this.isDragging.next(false); } - showTooltip(tooltip: NgbTooltip, index, field?) { tooltip.close(); const chipsItem = this.chips.getChipByIndex(index); @@ -122,5 +115,4 @@ export class ChipsComponent implements OnChanges { } } - } From 0c80b1a366e01c7554b5f17c67985f185473d527 Mon Sep 17 00:00:00 2001 From: Simone Ramundi Date: Thu, 29 Feb 2024 16:14:32 +0100 Subject: [PATCH 03/14] [DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop --- .../shared/form/chips/chips.component.html | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html index 0b8835877d..ac203e4c53 100644 --- a/src/app/shared/form/chips/chips.component.html +++ b/src/app/shared/form/chips/chips.component.html @@ -1,20 +1,17 @@
-
+

{{tip}}

- -
+
+ +
+
+ {{ c.display }} +
+
+
From dbf6b9d1f9dfaa0def447fc1f793393a601f11a0 Mon Sep 17 00:00:00 2001 From: Simone Ramundi Date: Thu, 29 Feb 2024 16:14:50 +0100 Subject: [PATCH 04/14] [DURACOM-237] - Refactoring scss based on @angular/cdk/drag-drop --- .../shared/form/chips/chips.component.scss | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.scss b/src/app/shared/form/chips/chips.component.scss index a894448730..9e7ce20fc2 100644 --- a/src/app/shared/form/chips/chips.component.scss +++ b/src/app/shared/form/chips/chips.component.scss @@ -1,7 +1,23 @@ -.chip-selected { - background-color: var(--bs-secondary) !important; +.example-custom-placeholder { + background: #ccc; + border: none; + min-height: 30px; + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } -.chip-label { - max-width: 10rem; +.example-drag-preview { + /* Preview styling */ + display: inline-block; + background-color: var(--bs-secondary); + color: #fff; + padding: 8px 30px; + border-radius: 10px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + transform-origin: center; +} + +.example-drag-preview.nav-item { + margin-right: 2px; + margin-bottom: 1px; } From e092914c00b17c815f4a1f92a3a4a0c4e5ef5e16 Mon Sep 17 00:00:00 2001 From: Simone Ramundi Date: Thu, 29 Feb 2024 18:26:01 +0100 Subject: [PATCH 05/14] [DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop --- .../shared/form/chips/chips.component.html | 26 ++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html index ac203e4c53..714d1d524c 100644 --- a/src/app/shared/form/chips/chips.component.html +++ b/src/app/shared/form/chips/chips.component.html @@ -1,17 +1,31 @@
- - -

- {{tip}} -

-
+ + + + + + + + + + + + + + + +

+ {{tip}} +

+ Date: Thu, 29 Feb 2024 18:26:33 +0100 Subject: [PATCH 06/14] [DURACOM-237] - Refactoring scss based on @angular/cdk/drag-drop --- .../shared/form/chips/chips.component.scss | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.scss b/src/app/shared/form/chips/chips.component.scss index 9e7ce20fc2..56e536a936 100644 --- a/src/app/shared/form/chips/chips.component.scss +++ b/src/app/shared/form/chips/chips.component.scss @@ -1,7 +1,12 @@ -.example-custom-placeholder { - background: #ccc; - border: none; - min-height: 30px; +//.example-custom-placeholder { + //background: #ccc; + //border: none; + //min-height: 30px; + //border: 2px solid red; +//} + +.cdk-drag-placeholder { + filter: grayscale(100%); transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } @@ -17,7 +22,7 @@ transform-origin: center; } -.example-drag-preview.nav-item { - margin-right: 2px; - margin-bottom: 1px; -} +//.example-drag-preview.nav-item { +// margin-right: 2px; +// margin-bottom: 1px; +//} From 61bf50e15269b69cdd09184f5acd904cbe5a7208 Mon Sep 17 00:00:00 2001 From: Simone Ramundi Date: Thu, 29 Feb 2024 18:51:58 +0100 Subject: [PATCH 07/14] [DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop --- src/app/shared/form/chips/chips.component.html | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html index 714d1d524c..2c3cdeb1de 100644 --- a/src/app/shared/form/chips/chips.component.html +++ b/src/app/shared/form/chips/chips.component.html @@ -50,15 +50,7 @@

{{c.display}}

 - -
-
- {{ c.display }} -
-
-
-
From 671fa8f220fca65830b7ee020dc484d4fbb1b224 Mon Sep 17 00:00:00 2001 From: Simone Ramundi Date: Fri, 1 Mar 2024 20:14:14 +0100 Subject: [PATCH 08/14] [DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop --- .../shared/form/chips/chips.component.html | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html index 2c3cdeb1de..500c605a43 100644 --- a/src/app/shared/form/chips/chips.component.html +++ b/src/app/shared/form/chips/chips.component.html @@ -1,37 +1,24 @@
-
- - - - - - - - - - - - - -

{{tip}}

- Date: Fri, 1 Mar 2024 20:14:30 +0100 Subject: [PATCH 09/14] [DURACOM-237] - Refactoring scss based on @angular/cdk/drag-drop --- .../shared/form/chips/chips.component.scss | 29 ++++--------------- 1 file changed, 6 insertions(+), 23 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.scss b/src/app/shared/form/chips/chips.component.scss index 56e536a936..a136c40cf3 100644 --- a/src/app/shared/form/chips/chips.component.scss +++ b/src/app/shared/form/chips/chips.component.scss @@ -1,28 +1,11 @@ -//.example-custom-placeholder { - //background: #ccc; - //border: none; - //min-height: 30px; - //border: 2px solid red; -//} - .cdk-drag-placeholder { filter: grayscale(100%); transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } - -.example-drag-preview { - /* Preview styling */ - display: inline-block; - background-color: var(--bs-secondary); - color: #fff; - padding: 8px 30px; - border-radius: 10px; - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); - transform-origin: center; +.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; -//} From 4b0bf74d297ed878442cda6b423e441091470e76 Mon Sep 17 00:00:00 2001 From: Simone Ramundi Date: Mon, 4 Mar 2024 17:51:44 +0100 Subject: [PATCH 10/14] [DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop --- src/app/shared/form/chips/chips.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html index 500c605a43..a8813cd242 100644 --- a/src/app/shared/form/chips/chips.component.html +++ b/src/app/shared/form/chips/chips.component.html @@ -19,6 +19,7 @@ [ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged == i}" (click)="chipsSelected($event, i);"> + Date: Mon, 4 Mar 2024 17:53:05 +0100 Subject: [PATCH 11/14] [DURACOM-237] - Refactoring ts based on @angular/cdk/drag-drop --- src/app/shared/form/chips/chips.component.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/shared/form/chips/chips.component.ts b/src/app/shared/form/chips/chips.component.ts index d4b1cbf589..45a6763b8a 100644 --- a/src/app/shared/form/chips/chips.component.ts +++ b/src/app/shared/form/chips/chips.component.ts @@ -85,6 +85,9 @@ export class ChipsComponent implements OnChanges { } showTooltip(tooltip: NgbTooltip, index, field?) { tooltip.close(); + if (this.isDragging.value) { + return; + } const chipsItem = this.chips.getChipByIndex(index); const textToDisplay: string[] = []; if (!chipsItem.editMode && this.dragged === -1) { From 3907bc114f2709b7bc1410f5dd6ac5e7dd24457a Mon Sep 17 00:00:00 2001 From: Simone Ramundi Date: Tue, 5 Mar 2024 12:20:33 +0100 Subject: [PATCH 12/14] [DURACOM-237] - Added imports inside ts component --- src/app/shared/form/chips/chips.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.ts b/src/app/shared/form/chips/chips.component.ts index 45a6763b8a..3ca3c9a310 100644 --- a/src/app/shared/form/chips/chips.component.ts +++ b/src/app/shared/form/chips/chips.component.ts @@ -6,7 +6,7 @@ import isObject from 'lodash/isObject'; import { Chips } from './models/chips.model'; import { ChipsItem } from './models/chips-item.model'; import { TranslateService, TranslateModule } from '@ngx-translate/core'; -import { CdkDragDrop, CdkDragStart, moveItemInArray} from '@angular/cdk/drag-drop'; +import {CdkDrag, CdkDragDrop, CdkDragStart, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop'; import { BehaviorSubject } from 'rxjs'; import { AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common'; import { AuthorityConfidenceStateDirective } from '../directives/authority-confidence-state.directive'; @@ -22,7 +22,9 @@ import { AuthorityConfidenceStateDirective } from '../directives/authority-confi AsyncPipe, AuthorityConfidenceStateDirective, NgIf, - TranslateModule + TranslateModule, + CdkDrag, + CdkDropList ], standalone: true }) From 1e95fdb30011620db65312ee1e06145424a27397 Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Sun, 17 Mar 2024 17:50:14 +0100 Subject: [PATCH 13/14] [DURACOM-237] Fix lint --- src/app/shared/form/chips/chips.component.ts | 11 ++++++++--- src/modules/app/server-app.module.ts | 4 +--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.ts b/src/app/shared/form/chips/chips.component.ts index e72dce16b0..ae428127a8 100644 --- a/src/app/shared/form/chips/chips.component.ts +++ b/src/app/shared/form/chips/chips.component.ts @@ -1,3 +1,10 @@ +import { + CdkDrag, + CdkDragDrop, + CdkDragStart, + CdkDropList, + moveItemInArray, +} from '@angular/cdk/drag-drop'; import { AsyncPipe, NgClass, @@ -24,11 +31,9 @@ import { import isObject from 'lodash/isObject'; import { BehaviorSubject } from 'rxjs'; -import { DragService } from '../../../core/drag.service'; import { AuthorityConfidenceStateDirective } from '../directives/authority-confidence-state.directive'; import { Chips } from './models/chips.model'; import { ChipsItem } from './models/chips-item.model'; -import {CdkDrag, CdkDragDrop, CdkDragStart, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop'; @Component({ selector: 'ds-chips', @@ -43,7 +48,7 @@ import {CdkDrag, CdkDragDrop, CdkDragStart, CdkDropList, moveItemInArray} from ' NgIf, TranslateModule, CdkDrag, - CdkDropList + CdkDropList, ], standalone: true, }) diff --git a/src/modules/app/server-app.module.ts b/src/modules/app/server-app.module.ts index 9d930b892c..eb99534513 100644 --- a/src/modules/app/server-app.module.ts +++ b/src/modules/app/server-app.module.ts @@ -6,9 +6,7 @@ import { TransferState, } from '@angular/core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { - ServerModule, -} from '@angular/platform-server'; +import { ServerModule } from '@angular/platform-server'; import { EffectsModule } from '@ngrx/effects'; import { Action, From 3e03b7147926be85b8c3d0d6ab067b23cbd324eb Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Sun, 17 Mar 2024 18:06:06 +0100 Subject: [PATCH 14/14] [DURACOM-237] Add space before text --- src/app/shared/form/chips/chips.component.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html index 3fa74fc6b3..4f77a5fa3b 100644 --- a/src/app/shared/form/chips/chips.component.html +++ b/src/app/shared/form/chips/chips.component.html @@ -1,5 +1,10 @@