More WIP

Author: GUI

src/api-umbrella/admin-ui/app/components/api-users/record-form.js

@@ -72,20 +72,6 @@ export default class RecordForm extends Component.extend(Save) {
 
         return message;
       },
-      messageHide(model) {
-        if(isNew && model.get('apiKey')) {
-          return false;
-        } else {
-          return true;
-        }
-      },
-      messageWidth(model) {
-        if(isNew && model.get('apiKey')) {
-          return '500px';
-        } else {
-          return undefined;
-        }
-      },
     });
   }
 }

src/api-umbrella/admin-ui/app/components/config/publish-form.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line ember/no-classic-components
 import Component from '@ember/component';
 import { action, computed } from '@ember/object';
-import { success } from '@pnotify/core';
+import { service } from '@ember/service';
 import LoadingButton from 'api-umbrella-admin-ui/utils/loading-button';
 import bootbox from 'bootbox';
 import Diff from 'diff';
@@ -12,6 +12,8 @@ import $ from 'jquery';
 export default class PublishForm extends Component {
   tagName = '';
 
+  @service pendingFlashMessages;
+
   @action
   didInsert(element) {
     this.publishButton = element.querySelector('.publish-button');
@@ -121,10 +123,11 @@ export default class PublishForm extends Component {
       data: form.serialize(),
     }).then(() => {
       LoadingButton.reset(this.publishButton);
-      success({
+
+      this.pendingFlashMessages.add({
+        type: 'success',
         title: 'Published',
-        text: 'Successfully published the configuration<br>Changes should be live in a few seconds...',
-        textTrusted: true,
+        message: 'Successfully published the configuration<br>Changes should be live in a few seconds...',
       });
 
       this.refreshCurrentRouteController();

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

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

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

@@ -0,0 +1,68 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+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) {
+    super(...arguments);
+
+    // this.addObserver('args.collection', this, () => {
+    //   console.info('COLLECTION CHANGES');
+    // });
+  }
+
+  get isReorderable() {
+    console.info('isReorderable');
+    const length = this.args.collection.length;
+    return (length > 1);
+  }
+
+  @action
+  toggleReordering() {
+    this.isReordering = !this.isReordering;
+    console.info('toggleReordering');
+    const length = this.args.collection.length;
+    console.info('length: ', length);
+
+
+    const observer = new MutationObserver((mutationList) => {
+      console.info('MUTATION: ', mutationList);
+      console.info('MUTATION: ', mutationList[0]);
+    });
+    observer.observe(document.querySelector(`#${this.args.tableId} tbody`), {
+      childList: true,
+    });
+
+    this.makeSortable();
+  }
+
+  makeSortable() {
+    const container = document.getElementById(this.args.tableId);
+
+    if (this.isReordering) {
+      container.classList.add('reorder-active');
+    } else {
+      container.classList.remove('reorder-active');
+    }
+
+    const 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({
+        id: tableRowEl.dataset.guid,
+        index,
+        element: tableRowEl,
+        handle: tableRowEl.querySelector('.reorder-handle'),
+      }, manager);
+    }
+  }
+}

src/api-umbrella/admin-ui/app/components/stats/drilldown/results-table.js

@@ -30,13 +30,13 @@ export default class ResultsTable extends Component {
           render: (name, type, data) => {
             if(type === 'display' && name && name !== '-') {
               if(data.terminal) {
-                return '<i class="far fa-file fa-fw me-1"></i>' + escape(name);
+                return '<i class="far fa-file me-1"></i>' + escape(name);
               } else {
                 let params = clone(this.presentQueryParamValues);
                 params.prefix = data.descendent_prefix;
                 let link = '#/stats/drilldown?' + $.param(params);
 
-                return '<a href="' + link + '"><i class="far fa-folder fa-fw me-1"></i>' + escape(name) + '</a>';
+                return '<a href="' + link + '"><i class="far fa-folder me-1"></i>' + escape(name) + '</a>';
               }
             }
 

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

@@ -1,4 +1,66 @@
-import { dom } from '@fortawesome/fontawesome-svg-core';
+import { config, dom, library } from '@fortawesome/fontawesome-svg-core';
+import '@fortawesome/fontawesome-svg-core/styles.css';
+import {
+  faArrowDown,
+  faArrowRight,
+  faBars,
+  faCalendar,
+  faCaretDown,
+  faCog,
+  faGrip,
+  faGripVertical,
+  faLock,
+  faMapMarkerAlt,
+  faPencilAlt,
+  faPlus,
+  faPlusCircle,
+  faQuestionCircle,
+  faSignal,
+  faSitemap,
+  faSort,
+  faSortDown,
+  faSortUp,
+  faSyncAlt,
+  faTimes,
+  faUpload,
+  faUser,
+  faUsers,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  faFile,
+  faFolder,
+} from '@fortawesome/free-regular-svg-icons';
+
+config.autoAddCss = false;
+
+library.add(
+  faArrowDown,
+  faArrowRight,
+  faBars,
+  faCalendar,
+  faCaretDown,
+  faCog,
+  faFile,
+  faFolder,
+  faGrip,
+  faGripVertical,
+  faLock,
+  faMapMarkerAlt,
+  faPencilAlt,
+  faPlus,
+  faPlusCircle,
+  faQuestionCircle,
+  faSignal,
+  faSitemap,
+  faSort,
+  faSortDown,
+  faSortUp,
+  faSyncAlt,
+  faTimes,
+  faUpload,
+  faUser,
+  faUsers,
+);
 
 export function initialize() {
   dom.watch();

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

@@ -1,14 +1,15 @@
 import Mixin from '@ember/object/mixin'
-import { inject } from '@ember/service';
-import { success } from '@pnotify/core';
+import { inject as service } from '@ember/service';
 import LoadingButton from 'api-umbrella-admin-ui/utils/loading-button';
 import bootbox from 'bootbox';
 import scrollTo from 'jquery.scrollto';
 import isFunction from 'lodash-es/isFunction';
 
 // eslint-disable-next-line ember/no-new-mixins
 export default Mixin.create({
-  router: inject(),
+  router: service(),
+
+  pendingFlashMessages: service(),
 
   scrollToErrors(button) {
     LoadingButton.reset(button);
@@ -17,12 +18,10 @@ export default Mixin.create({
 
   afterSaveComplete(options, button) {
     LoadingButton.reset(button);
-    success({
-      title: 'Saved',
-      text: (isFunction(options.message)) ? options.message(this.model) : options.message,
-      hide: (isFunction(options.messageHide)) ? options.messageHide(this.model) : options.messageHide,
-      width: (isFunction(options.messageWidth)) ? options.messageWidth(this.model) : options.messageWidth,
-      textTrusted: true,
+
+    this.pendingFlashMessages.add({
+      type: 'success',
+      message: (isFunction(options.message)) ? options.message(this.model) : options.message,
     });
 
     this.router.transitionTo(options.transitionToRoute);
@@ -72,10 +71,10 @@ export default Mixin.create({
     bootbox.confirm(options.prompt, (result) => {
       if(result) {
         this.model.destroyRecord().then(() => {
-          success({
+          this.pendingFlashMessages.add({
+            type: 'success',
             title: 'Deleted',
-            text: (isFunction(options.message)) ? options.message(this.model) : options.message,
-            textTrusted: true,
+            message: (isFunction(options.message)) ? options.message(this.model) : options.message,
           });
 
           this.router.transitionTo(options.transitionToRoute);

src/api-umbrella/admin-ui/app/initializers/test-pnotify.js

@@ -9,6 +9,9 @@ export default class ApplicationRoute extends Route {
 
   @service busy;
 
+  @service currentFlashMessages;
+  @service pendingFlashMessages;
+
   async beforeModel() {
     await this.session.setup();
   }
@@ -59,6 +62,7 @@ export default class ApplicationRoute extends Route {
   @action
   refreshCurrentRoute() {
     this.refresh();
+    window.scrollTo(0, 0);
   }
 
   @action
@@ -79,4 +83,25 @@ export default class ApplicationRoute extends Route {
       return this.intermediateTransitionTo('error');
     }
   }
+
+  @action
+  didTransition() {
+    // On each route change, clear any currently visible flash messages, since
+    // we only want the flash messages to be visible on one page, but not
+    // persistent otherwise.
+    this.currentFlashMessages.empty();
+
+    // 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) {
+      this.currentFlashMessages.add(item);
+    }
+
+    // Clear the pending messages that have now been copied for one-time
+    // display to the current area.
+    this.pendingFlashMessages.empty();
+
+    return true;
+  }
 }