Перетаскивание переупорядоченных списков в JHipster: что рекомендуется? - PullRequest
Новая
       5

Перетаскивание переупорядоченных списков в JHipster: что рекомендуется?

0 голосов
/ 19 февраля 2020

Нужны советы / рекомендации. Я хочу реализовать (что я считаю довольно стандартной функцией) перетаскиваемый список с перетаскиванием в JHipster 6.7.1.

Чтобы быть действительно точным c, представьте, что вы создали пользовательский упорядоченный список объектов , Помимо добавления / удаления элементов из списка, пользователь также захочет изменить порядок списка. Например, представьте, что хотите сделать [Epsilon] секунду по порядку (после [Alpha]): 

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

Просто перетащите [Epsilon] в положение между [Alpha] и [Beta] и опустите его. , Список обновляется с новым порядком. Выполнено. Очевидно, что на серверном уровне код должен сохраняться / управлять новыми индексами / упорядочением, но пользовательский интерфейс интуитивно понятен и быстр.

С возможностью перетаскивания можно быстро перетащить элементы в любой желаемый заказ. Я реализовывал подобные вещи много раз, используя простые библиотеки JavaScript. Я надеялся, что JHipster 6.7.1 поможет быстро найти хорошее современное решение.

Ng- bootstrap, похоже, не предоставляет ничего, кроме stati c инструментов. (Без перетаскивания.)

Angular Материалы выглядят идеально !! После того, как изо всех сил пытались заставить вещи двигаться в JHipster, даже пытаясь JHipster Angular Генератор материалов , я с удивлением узнал, что JHipster не поддерживает (и может никогда не поддерживать) Angular Материалы ! Что-то делать с Bootstrap наступлением на Angular Пальцы материала ... Хорошо .

Затем я попытался Сортируемый JS, используя ngx- сортировка . Не повезло.

Я нашел несколько ссылок на PrimeNG как популярный набор инструментов для разработчиков JHipster. Эти директивы перетаскивания выглядят полезными, но ни один пример не показывает простой переупорядочиваемый список (перетаскивание из одного списка в другой - это не то, о чем я говорю). Директивы списка выбора также не то, что я ищу. Я продолжу играть с PrimeNG ...

Тем временем, вместо того, чтобы побеждать в одиночку, я обращаюсь к добрым людям в StackOverflow для некоторой мудрости.

  • Кто-нибудь реализовал простой механизм порядка перетаскивания списков в приложении JHipster?
  • Какая библиотека / метод работает в JHipster? Работал ли у вас SortableJS / NGX-Sortable JS? PrimeNG? Что-то еще?
  • Я заметил вещь под названием NG-Dragula ... Кто-нибудь пробовал это в приложении JHipster?
  • Должен ли я использовать Vue или React или какой-то другой интерфейс (а не Angular)? Это дало бы мне больше гибкости?
  • Думаю ли я об этом? и упустить что-то очевидное?

Я бы очень хотел попробовать использовать JHipster / Angular, но я нахожусь на ранней стадии разработки, чтобы быть открытым для других возможностей ...

Заранее спасибо!

[Среда разработки: Windows 10 Pro; IntelliJ 2019.3.3; OpenJDK 13; Узел 12.15.0; npm 6,13,7; Gradle 6.1.1; Chrome v80.0.3987.116]

[PS: Я рад предоставить более подробную информацию. Просто спросите!]

Ответы [ 2 ]

0 голосов
/ 22 февраля 2020

Начиная с демонстрационного проекта Судхараки https://github.com/SudharakaP/JHipsterProtractorDragAndDrop, я реализовал @ angular / cdk / drag-drop в проекте Jhipster 6.7.0.

Я использовал стандартный генератор jHipster, а затем добавлена ​​библиотека cdk с npm install @angular/cdk@8.2.3 (последний модуль 9.0.1 не работает с @ angular / core 8.2.14)

Импорт DragDropModule в ваш модуль:

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

Затем вы можете использовать директивы DragDrop, как описано в официальной документации: https://material.angular.io/cdk/drag-drop/overview

0 голосов
/ 22 февраля 2020

После игры с PrimeNG я нашел OrderList , который обеспечивает переупорядочение методом перетаскивания. Это не так просто и элегантно, как версия Angular Material . В некотором смысле это более амбициозно, возможно, немного переоценено. Иногда меньше - это больше, и нужно выполнить работу, чтобы «заглушить» виджет, но пока он работает.

Большое спасибо Йохену Гебсаттелю за ссылку на Руководство по интеграции Jhipster / PrimeNG . Работает как шарм.

После этого я добавил в свой модуль следующее: 

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

...

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

Я добавил следующее в свой компонент: 

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
  }

}

Затем я добавил следующее в шаблон моего компонента: 

...

<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>

...

Обратите внимание, свойство lheight позволяет мне динамически изменять размер окна списка, чтобы все элементы всегда были на виду.

PrimegNG выглядит так имеет несколько приятных особенностей. Это не Angular материал, но, как говорил мой старый дедушка: «Если ты не можешь получить того, кого любишь, то лучше любить того, кого можешь получить!».

...