Rearranging lists in JHipster: What is the best way to do it?

Question

Rearranging lists in JHipster: What is the best way to do it?

Seeking advice and guidance on implementing a drag-and-drop reorderable list in JHipster 6.7.1.

To illustrate, picture creating a custom ordered list of objects where users can add, remove, and rearrange items. For instance, wanting to move [Epsilon] between [Alpha] and [Beta]:

(before)         (after)
[Alpha]          [Alpha]
[Beta] \---+     [Epsilon]
[Gamma]    |     [Beta]
[Delta]    |     [Gamma]
[Epsilon]--+     [Delta]

Simply drag/drop [Epsilon] between [Alpha] and [Beta], then release to display the updated order. The backend will handle persisting the new ordering while providing an intuitive user experience.

A drag-and-drop reorderable feature enables seamless customization of item ordering. While I have implemented similar functionalities using basic JavaScript libraries, I expected JHipster 6.7.1 to offer a more modern solution.

Ng-bootstrap seems limited to static tools without drag-and-drop capability.

Angular Materials appears promising; however, integrating it with JHipster proved challenging due to conflicts with Bootstrap. Other attempts with SortableJS did not yield success.

In exploring alternative options like PrimeNG, known for its popularity among JHipster developers, I found their Drag/Drop directives useful but lacking examples for simple reorderable lists. Further investigation into PrimeNG's capabilities is ongoing...

While seeking solutions, reaching out to the StackOverflow community for insights:

Has anyone successfully implemented a drag-and-drop list reordering system within a JHipster application?
What library or method has worked effectively within JHipster - SortableJS/NGX-SortableJS, PrimeNG, or others?
Is NG-Dragula a viable option for JHipster applications?
Would switching to Vue, React, or another frontend framework provide more flexibility for this functionality?
Am I overcomplicating this? Any obvious solutions I might be missing?

Considering different front-end approaches while remaining open to other possibilities during early development stages.

Thank you in advance!

[Development environment: Windows 10 Pro; IntelliJ 2019.3.3; OpenJDK 13; Node 12.15.0; npm 6.13.7; Gradle 6.1.1; Chrome v80.0.3987.116]

[PS: Happy to provide additional details upon request.]

angular drag-and-drop jhipster

Answer 1

Answer №1

Exploring the capabilities of PrimeNG, I stumbled upon the OrderList feature, which offers a drag-and-drop reordering functionality. While not as sleek as the Angular Material version, it seems to be more elaborate, bordering on overengineering. Simplifying the widget may enhance its usability, but for now, it gets the job done.

A special thanks goes to Jochen Gebsattel for sharing the Jhipster/PrimeNG integration guide. It works like magic.

To implement this in my module, I included the following:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { OrderListModule } from 'primeng/orderlist';

...

@NgModule({
  imports: [..., BrowserAnimationsModule, OrderListModule],
  ...
})
export class ...Module {}

In my component, I made the following additions:

export class ...Component implements OnInit, OnDestroy {
books: string[] = [
                    'Moby Dick',
                    'Brave New World',
                    'Great Expectations',
                    'Wuthering Heights',
                    'King James Bible'
                  ];
lheight: string;

...

  ngOnInit(): void {
    this.lheight = String( 41 * this.books.length ) + 'px';
  }

...

  onReorder(): void {
    console.log(this.books); // eslint-disable-line no-console
  }

}

The component's template was updated as follows:

...

<p-orderList [value]="books" dragdrop="true" (onReorder)="onReorder()" [listStyle]="{'height': lheight}">
  <ng-template let-book pTemplate="item">
    <div class="ui-helper-clearfix">
      <p>{{book}}</p>
    </div>
  </ng-template>
</p-orderList>

...

It's worth noting that the lheight property enables dynamic resizing of the list window to ensure all items are visible at all times.

PrimegNG showcases some appealing features. Though not on par with Angular Material, in the words of my wise grandfather: "If you can't have the one you love, love the one you're with!".

Answer 2

Exploring the capabilities of PrimeNG, I stumbled upon the OrderList feature, which offers a drag-and-drop reordering functionality. While not as sleek as the Angular Material version, it seems to be more elaborate, bordering on overengineering. Simplifying the widget may enhance its usability, but for now, it gets the job done.

A special thanks goes to Jochen Gebsattel for sharing the Jhipster/PrimeNG integration guide. It works like magic.

To implement this in my module, I included the following:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { OrderListModule } from 'primeng/orderlist';

...

@NgModule({
  imports: [..., BrowserAnimationsModule, OrderListModule],
  ...
})
export class ...Module {}

In my component, I made the following additions:

export class ...Component implements OnInit, OnDestroy {
books: string[] = [
                    'Moby Dick',
                    'Brave New World',
                    'Great Expectations',
                    'Wuthering Heights',
                    'King James Bible'
                  ];
lheight: string;

...

  ngOnInit(): void {
    this.lheight = String( 41 * this.books.length ) + 'px';
  }

...

  onReorder(): void {
    console.log(this.books); // eslint-disable-line no-console
  }

}

The component's template was updated as follows:

...

<p-orderList [value]="books" dragdrop="true" (onReorder)="onReorder()" [listStyle]="{'height': lheight}">
  <ng-template let-book pTemplate="item">
    <div class="ui-helper-clearfix">
      <p>{{book}}</p>
    </div>
  </ng-template>
</p-orderList>

...

It's worth noting that the lheight property enables dynamic resizing of the list window to ensure all items are visible at all times.

PrimegNG showcases some appealing features. Though not on par with Angular Material, in the words of my wise grandfather: "If you can't have the one you love, love the one you're with!".

Answer 3

Answer №2

After studying Sudharaka's example project at https://github.com/SudharakaP/JHipsterProtractorDragAndDrop, I successfully integrated @angular/cdk/drag-drop into my Jhipster 6.7.0 project.

Following the jHipster standard generator, I then installed the cdk library using

npm install @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f1f6f9d2aabca0bca1">[email protected]</a>

(note that the version 9.0.1 is not compatible with @angular/core 8.2.14)

To incorporate the DragDropModule in your module:

import { DragDropModule } from '@angular/cdk/drag-drop';
imports: [
  DragDropModule
]

You can then utilize the DragDrop directives as outlined in the official documentation: https://material.angular.io/cdk/drag-drop/overview

Answer 4

After studying Sudharaka's example project at https://github.com/SudharakaP/JHipsterProtractorDragAndDrop, I successfully integrated @angular/cdk/drag-drop into my Jhipster 6.7.0 project.

Following the jHipster standard generator, I then installed the cdk library using

npm install @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f1f6f9d2aabca0bca1">[email protected]</a>

(note that the version 9.0.1 is not compatible with @angular/core 8.2.14)

To incorporate the DragDropModule in your module:

import { DragDropModule } from '@angular/cdk/drag-drop';
imports: [
  DragDropModule
]

You can then utilize the DragDrop directives as outlined in the official documentation: https://material.angular.io/cdk/drag-drop/overview

Rearranging lists in JHipster: What is the best way to do it?

Answer №1

Answer №2

Similar questions

Customize the date format of the Datepicker in Angular by implementing a personalized pipe

Error with Angular InjectionToken utilization

Issue with Angular 6: Unable to match nested routes

Manipulate inherited CSS styles from an external source

"Exploring the interoperability between Angular's ngSanitize and ngDragDrop

Loading a view in Ionic2 with Angular2 after a successful subscription

The TypeScript find() method on an array are showing an error message that says, "There is no overload that matches this call

Angular2 - Setting focus on input field during component initialization

The selectors in NgRx store are failing to retrieve data from the main global store

Is there a way to set a custom port number for an Angular application?

Angular Kendo dropdownlist and input textbox are not working together as anticipated

The AgGridModule type does not feature the property 'ɵmod'

Transform Angular into a library

Headers cannot be modified after they have been sent to the client in Node.js and Angular

415 Media Type Not Supported - Please choose a different format

Why isn't the Angular2 ngIf directive updating the DOM?

Unable to update a single object within an array using the spread operator

Distinguish among various mat accordion types

Unlock the Full Potential of TypeScript: Seamless Export of Classes and Functions

Encountering 'npm install' error while trying to follow the Angular2 5 minute