WIP

Author: GUI

src/api-umbrella/admin-ui/app/components/apis/rewrite-table.js

@@ -3,7 +3,6 @@ import Component from '@ember/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { tagName } from '@ember-decorators/component';
-import Sortable from 'api-umbrella-admin-ui/utils/sortable';
 import bootbox from 'bootbox';
 import classic from 'ember-classic-decorator';
 import without from 'lodash-es/without';
@@ -15,12 +14,6 @@ export default class RewriteTable extends Component {
 
   openModal = false;
 
-  init() {
-    super.init(...arguments);
-
-    this.sortable = new Sortable(this.model.rewrites);
-  }
-
   @action
   add() {
     this.set('rewriteModel', this.store.createRecord('api/rewrite'));

src/api-umbrella/admin-ui/app/components/apis/sub-settings-table.js

@@ -3,7 +3,6 @@ import Component from '@ember/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { tagName } from '@ember-decorators/component';
-import Sortable from 'api-umbrella-admin-ui/utils/sortable';
 import bootbox from 'bootbox';
 import classic from 'ember-classic-decorator';
 import without from 'lodash-es/without';
@@ -15,12 +14,6 @@ export default class SubSettingsTable extends Component {
 
   openModal = false;
 
-  init() {
-    super.init(...arguments);
-
-    this.sortable = new Sortable(this.model.subSettings);
-  }
-
   @action
   add() {
     this.set('subSettingsModel', this.store.createRecord('api/sub-settings'));

src/api-umbrella/admin-ui/app/components/flash-messages.js

@@ -1,5 +1,5 @@
-import Component from '@glimmer/component';
 import { service } from '@ember/service';
+import Component from '@glimmer/component';
 
 export default class FlashMessages extends Component {
   @service currentFlashMessages;

src/api-umbrella/admin-ui/app/components/reorder-table.js

@@ -1,68 +1,103 @@
-import Component from '@glimmer/component';
+import {RestrictToVerticalAxis} from '@dnd-kit/abstract/modifiers';
+import {DragDropManager} from '@dnd-kit/dom';
+import {isSortable,Sortable} from '@dnd-kit/dom/sortable';
 import { action } from '@ember/object';
-import { service } from '@ember/service';
+import { guidFor } from '@ember/object/internals';
+import { schedule } from '@ember/runloop';
+import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import {DragDropManager} from '@dnd-kit/dom';
-import {RestrictToVerticalAxis} from '@dnd-kit/abstract/modifiers';
-import {Sortable} from '@dnd-kit/dom/sortable';
 
 export default class ReorderTable extends Component {
   @tracked isReordering = false;
 
-  constructor(owner, args) {
+  constructor() {
     super(...arguments);
+    this.setupDomSorting();
+  }
 
-    // this.addObserver('args.collection', this, () => {
-    //   console.info('COLLECTION CHANGES');
-    // });
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.destroyDomSorting();
   }
 
   get isReorderable() {
-    console.info('isReorderable');
     const length = this.args.collection.length;
+    this.handleCollectionChange();
     return (length > 1);
   }
 
-  @action
-  toggleReordering() {
-    this.isReordering = !this.isReordering;
-    console.info('toggleReordering');
-    const length = this.args.collection.length;
-    console.info('length: ', length);
-
+  get container() {
+    const container = document.getElementById(this.args.tableId);
+    return container;
+  }
 
-    const observer = new MutationObserver((mutationList) => {
-      console.info('MUTATION: ', mutationList);
-      console.info('MUTATION: ', mutationList[0]);
-    });
-    observer.observe(document.querySelector(`#${this.args.tableId} tbody`), {
-      childList: true,
+  handleCollectionChange() {
+    schedule('afterRender', this, function() {
+      this.setupDomSorting();
     });
+  }
 
-    this.makeSortable();
+  @action
+  toggleReordering() {
+    this.isReordering = !this.isReordering;
+    this.setupDomSorting();
   }
 
-  makeSortable() {
-    const container = document.getElementById(this.args.tableId);
+  setupDomSorting() {
+    this.destroyDomSorting();
 
-    if (this.isReordering) {
-      container.classList.add('reorder-active');
+    if(!this.container) {
+      console.error('tableId doesn not exist: ', this.args.tableId);
+      return;
+    }
+
+    if(this.isReordering) {
+      this.container.classList.add('reorder-active');
     } else {
-      container.classList.remove('reorder-active');
+      this.container.classList.remove('reorder-active');
     }
 
-    const manager = new DragDropManager({
+    this.manager = new DragDropManager({
       modifiers: (defaults) => [...defaults, RestrictToVerticalAxis],
     });
-    const tableRowEls = container.querySelectorAll('tbody tr');
-    for (const [index, tableRowEl] of tableRowEls.entries()) {
-      console.info(tableRowEl);
-      const sortable = new Sortable({
+
+    this.sortables = [];
+    const tableRowEls = this.container.querySelectorAll('tbody tr');
+    for(const [index, tableRowEl] of tableRowEls.entries()) {
+      this.sortables.push(new Sortable({
         id: tableRowEl.dataset.guid,
         index,
         element: tableRowEl,
         handle: tableRowEl.querySelector('.reorder-handle'),
-      }, manager);
+      }, this.manager));
+    }
+
+    this.manager.monitor.addEventListener('dragend', this.handleDragEnd.bind(this));
+  }
+
+  destroyDomSorting() {
+    if(this.manager) {
+      this.manager.destroy();
+    }
+  }
+
+  handleDragEnd(event) {
+    if(event.canceled || !isSortable(event.operation.source)) {
+      return;
+    }
+
+    const indexes = {};
+    for(const sortable of this.sortables) {
+      indexes[sortable.id] = sortable.index;
+    }
+
+    this.updateCollectionSortOrders(indexes);
+  }
+
+  updateCollectionSortOrders(indexes) {
+    for(const record of this.args.collection) {
+      const index = indexes[guidFor(record)];
+      record.set('sortOrder', index + 1);
     }
   }
 }

src/api-umbrella/admin-ui/app/components/stats/query-form.js

@@ -8,7 +8,6 @@ import { tagName } from '@ember-decorators/component';
 import { observes } from '@ember-decorators/object';
 import Logs from 'api-umbrella-admin-ui/models/stats/logs';
 import { t } from 'api-umbrella-admin-ui/utils/i18n';
-import Popover from 'bootstrap/js/dist/popover'
 import classic from 'ember-classic-decorator';
 import $ from 'jquery';
 import QueryBuilder from 'jQuery-QueryBuilder';

src/api-umbrella/admin-ui/app/initializers/fontawesome.js

@@ -1,5 +1,10 @@
-import { config, dom, library } from '@fortawesome/fontawesome-svg-core';
 import '@fortawesome/fontawesome-svg-core/styles.css';
+
+import { config, dom, library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faFile,
+  faFolder,
+} from '@fortawesome/free-regular-svg-icons';
 import {
   faArrowDown,
   faArrowRight,
@@ -26,10 +31,6 @@ import {
   faUser,
   faUsers,
 } from '@fortawesome/free-solid-svg-icons';
-import {
-  faFile,
-  faFolder,
-} from '@fortawesome/free-regular-svg-icons';
 
 config.autoAddCss = false;
 

src/api-umbrella/admin-ui/app/routes/application.js

@@ -94,7 +94,7 @@ export default class ApplicationRoute extends Route {
     // Next, copy any "pending" flash messages that were set just before this
     // route change to the "current" messages to display. In this way, the
     // "pending" changes can be shown just once.
-    for (const item of this.pendingFlashMessages.items) {
+    for(const item of this.pendingFlashMessages.items) {
       this.currentFlashMessages.add(item);
     }
 

src/api-umbrella/admin-ui/app/services/flash-messages.js

@@ -1,6 +1,5 @@
-import Service from '@ember/service';
 import { A } from '@ember/array';
-import ArrayProxy from '@ember/array/proxy';
+import Service from '@ember/service';
 
 export default class FlashMessagesService extends Service {
   items = A([]);

src/api-umbrella/admin-ui/app/templates/components/apis/rewrite-table.hbs

@@ -37,9 +37,7 @@
       <button type="button" class="btn btn-light btn-sm" {{action "add"}}><FaIcon @icon="plus-circle" /> {{t "Add Rewrite"}}</button>
     </div>
     <div class="col-6 text-end">
-      {{#if this.sortable.isReorderable}}
-        <button type="button" id="rewrites_reorder" class="btn btn-light btn-sm" {{on "click" (fn this.sortable.reorderCollection "rewrites")}}><FaIcon @icon="grip-vertical" /> <span class="reorder-button-text">{{t "Reorder"}}</span></button>
-      {{/if}}
+      <ReorderTable @collection={{this.model.rewrites}} @tableId="rewrites_table" />
     </div>
   </div>
 </div>

src/api-umbrella/admin-ui/app/templates/components/flash-messages.hbs

@@ -3,6 +3,6 @@
     {{#if flash.title}}
       <div><strong>{{flash.title}}</strong></div>
     {{/if}}
-    {{{flash.message}}}
+    {{! template-lint-disable no-triple-curlies }}{{{flash.message}}}
   </BsAlert>
 {{/each}}