Skip to content

Commit 0acee80

Browse files
GUIGUI
committed
WIP
1 parent 7b5201a commit 0acee80

17 files changed

Lines changed: 147 additions & 178 deletions

File tree

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Component from '@ember/component';
33
import { action } from '@ember/object';
44
import { inject as service } from '@ember/service';
55
import { tagName } from '@ember-decorators/component';
6-
import Sortable from 'api-umbrella-admin-ui/utils/sortable';
76
import bootbox from 'bootbox';
87
import classic from 'ember-classic-decorator';
98
import without from 'lodash-es/without';
@@ -15,12 +14,6 @@ export default class RewriteTable extends Component {
1514

1615
openModal = false;
1716

18-
init() {
19-
super.init(...arguments);
20-
21-
this.sortable = new Sortable(this.model.rewrites);
22-
}
23-
2417
@action
2518
add() {
2619
this.set('rewriteModel', this.store.createRecord('api/rewrite'));

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Component from '@ember/component';
33
import { action } from '@ember/object';
44
import { inject as service } from '@ember/service';
55
import { tagName } from '@ember-decorators/component';
6-
import Sortable from 'api-umbrella-admin-ui/utils/sortable';
76
import bootbox from 'bootbox';
87
import classic from 'ember-classic-decorator';
98
import without from 'lodash-es/without';
@@ -15,12 +14,6 @@ export default class SubSettingsTable extends Component {
1514

1615
openModal = false;
1716

18-
init() {
19-
super.init(...arguments);
20-
21-
this.sortable = new Sortable(this.model.subSettings);
22-
}
23-
2417
@action
2518
add() {
2619
this.set('subSettingsModel', this.store.createRecord('api/sub-settings'));

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Component from '@glimmer/component';
21
import { service } from '@ember/service';
2+
import Component from '@glimmer/component';
33

44
export default class FlashMessages extends Component {
55
@service currentFlashMessages;

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

Lines changed: 70 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,103 @@
1-
import Component from '@glimmer/component';
1+
import {RestrictToVerticalAxis} from '@dnd-kit/abstract/modifiers';
2+
import {DragDropManager} from '@dnd-kit/dom';
3+
import {isSortable,Sortable} from '@dnd-kit/dom/sortable';
24
import { action } from '@ember/object';
3-
import { service } from '@ember/service';
5+
import { guidFor } from '@ember/object/internals';
6+
import { schedule } from '@ember/runloop';
7+
import Component from '@glimmer/component';
48
import { tracked } from '@glimmer/tracking';
5-
import {DragDropManager} from '@dnd-kit/dom';
6-
import {RestrictToVerticalAxis} from '@dnd-kit/abstract/modifiers';
7-
import {Sortable} from '@dnd-kit/dom/sortable';
89

910
export default class ReorderTable extends Component {
1011
@tracked isReordering = false;
1112

12-
constructor(owner, args) {
13+
constructor() {
1314
super(...arguments);
15+
this.setupDomSorting();
16+
}
1417

15-
// this.addObserver('args.collection', this, () => {
16-
// console.info('COLLECTION CHANGES');
17-
// });
18+
willDestroy() {
19+
super.willDestroy(...arguments);
20+
this.destroyDomSorting();
1821
}
1922

2023
get isReorderable() {
21-
console.info('isReorderable');
2224
const length = this.args.collection.length;
25+
this.handleCollectionChange();
2326
return (length > 1);
2427
}
2528

26-
@action
27-
toggleReordering() {
28-
this.isReordering = !this.isReordering;
29-
console.info('toggleReordering');
30-
const length = this.args.collection.length;
31-
console.info('length: ', length);
32-
29+
get container() {
30+
const container = document.getElementById(this.args.tableId);
31+
return container;
32+
}
3333

34-
const observer = new MutationObserver((mutationList) => {
35-
console.info('MUTATION: ', mutationList);
36-
console.info('MUTATION: ', mutationList[0]);
37-
});
38-
observer.observe(document.querySelector(`#${this.args.tableId} tbody`), {
39-
childList: true,
34+
handleCollectionChange() {
35+
schedule('afterRender', this, function() {
36+
this.setupDomSorting();
4037
});
38+
}
4139

42-
this.makeSortable();
40+
@action
41+
toggleReordering() {
42+
this.isReordering = !this.isReordering;
43+
this.setupDomSorting();
4344
}
4445

45-
makeSortable() {
46-
const container = document.getElementById(this.args.tableId);
46+
setupDomSorting() {
47+
this.destroyDomSorting();
4748

48-
if (this.isReordering) {
49-
container.classList.add('reorder-active');
49+
if(!this.container) {
50+
console.error('tableId doesn not exist: ', this.args.tableId);
51+
return;
52+
}
53+
54+
if(this.isReordering) {
55+
this.container.classList.add('reorder-active');
5056
} else {
51-
container.classList.remove('reorder-active');
57+
this.container.classList.remove('reorder-active');
5258
}
5359

54-
const manager = new DragDropManager({
60+
this.manager = new DragDropManager({
5561
modifiers: (defaults) => [...defaults, RestrictToVerticalAxis],
5662
});
57-
const tableRowEls = container.querySelectorAll('tbody tr');
58-
for (const [index, tableRowEl] of tableRowEls.entries()) {
59-
console.info(tableRowEl);
60-
const sortable = new Sortable({
63+
64+
this.sortables = [];
65+
const tableRowEls = this.container.querySelectorAll('tbody tr');
66+
for(const [index, tableRowEl] of tableRowEls.entries()) {
67+
this.sortables.push(new Sortable({
6168
id: tableRowEl.dataset.guid,
6269
index,
6370
element: tableRowEl,
6471
handle: tableRowEl.querySelector('.reorder-handle'),
65-
}, manager);
72+
}, this.manager));
73+
}
74+
75+
this.manager.monitor.addEventListener('dragend', this.handleDragEnd.bind(this));
76+
}
77+
78+
destroyDomSorting() {
79+
if(this.manager) {
80+
this.manager.destroy();
81+
}
82+
}
83+
84+
handleDragEnd(event) {
85+
if(event.canceled || !isSortable(event.operation.source)) {
86+
return;
87+
}
88+
89+
const indexes = {};
90+
for(const sortable of this.sortables) {
91+
indexes[sortable.id] = sortable.index;
92+
}
93+
94+
this.updateCollectionSortOrders(indexes);
95+
}
96+
97+
updateCollectionSortOrders(indexes) {
98+
for(const record of this.args.collection) {
99+
const index = indexes[guidFor(record)];
100+
record.set('sortOrder', index + 1);
66101
}
67102
}
68103
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { tagName } from '@ember-decorators/component';
88
import { observes } from '@ember-decorators/object';
99
import Logs from 'api-umbrella-admin-ui/models/stats/logs';
1010
import { t } from 'api-umbrella-admin-ui/utils/i18n';
11-
import Popover from 'bootstrap/js/dist/popover'
1211
import classic from 'ember-classic-decorator';
1312
import $ from 'jquery';
1413
import QueryBuilder from 'jQuery-QueryBuilder';

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
import { config, dom, library } from '@fortawesome/fontawesome-svg-core';
21
import '@fortawesome/fontawesome-svg-core/styles.css';
2+
3+
import { config, dom, library } from '@fortawesome/fontawesome-svg-core';
4+
import {
5+
faFile,
6+
faFolder,
7+
} from '@fortawesome/free-regular-svg-icons';
38
import {
49
faArrowDown,
510
faArrowRight,
@@ -26,10 +31,6 @@ import {
2631
faUser,
2732
faUsers,
2833
} from '@fortawesome/free-solid-svg-icons';
29-
import {
30-
faFile,
31-
faFolder,
32-
} from '@fortawesome/free-regular-svg-icons';
3334

3435
config.autoAddCss = false;
3536

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default class ApplicationRoute extends Route {
9494
// Next, copy any "pending" flash messages that were set just before this
9595
// route change to the "current" messages to display. In this way, the
9696
// "pending" changes can be shown just once.
97-
for (const item of this.pendingFlashMessages.items) {
97+
for(const item of this.pendingFlashMessages.items) {
9898
this.currentFlashMessages.add(item);
9999
}
100100

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import Service from '@ember/service';
21
import { A } from '@ember/array';
3-
import ArrayProxy from '@ember/array/proxy';
2+
import Service from '@ember/service';
43

54
export default class FlashMessagesService extends Service {
65
items = A([]);

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,7 @@
3737
<button type="button" class="btn btn-light btn-sm" {{action "add"}}><FaIcon @icon="plus-circle" /> {{t "Add Rewrite"}}</button>
3838
</div>
3939
<div class="col-6 text-end">
40-
{{#if this.sortable.isReorderable}}
41-
<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>
42-
{{/if}}
40+
<ReorderTable @collection={{this.model.rewrites}} @tableId="rewrites_table" />
4341
</div>
4442
</div>
4543
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
{{#if flash.title}}
44
<div><strong>{{flash.title}}</strong></div>
55
{{/if}}
6-
{{{flash.message}}}
6+
{{! template-lint-disable no-triple-curlies }}{{{flash.message}}}
77
</BsAlert>
88
{{/each}}

0 commit comments

Comments
 (0)