add notification service

app/app.js

@@ -3,7 +3,7 @@ import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'papermerge/config/environment';
 import '@popperjs/core';
-import 'bootstrap';
+import bootstrap from 'bootstrap';
 
 
 export default class App extends Application {
@@ -27,6 +27,13 @@ export default class App extends Application {
     if (divs.length > 0) {
       divs[0].style.display = 'None';
     }
+
+    /*Initializer bootstrap toasts*/
+    let toastElList = [].slice.call(document.querySelectorAll('.toast'))
+    toastElList.map(function (toastEl) {
+      return new bootstrap.Toast(toastEl)
+    })
+
   }
 }
 

app/components/notifications/index.hbs

+<div class="toast-container position-fixed top-0 end-0 p-3">
+  {{#each this.notifications as |notification|}}
+    <Notifications::Toast @notification={{notification}} />
+  {{/each}}
+</div>

app/components/notifications/index.js

+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+
+export default class NotificationsComponent extends Component {
+  @service notify;
+
+  get notifications() {
+    return this.notify.notifications;
+  }
+}
\ No newline at end of file

app/components/notifications/toast/index.hbs

+<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-header">
+    {{#if (is_equal this.type 'info') }}
+      <strong class="me-auto text-primary">
+        <i class='bi bi-info-circle mx-2'></i>Info
+      </strong>
+    {{else if (is_equal this.type 'error')}}
+      <strong class="me-auto text-danger">
+        <i class='bi bi-info-circle mx-2'></i>Error
+      </strong>
+    {{else}}
+      <strong class="me-auto text-warning">
+        <i class='bi bi-info-circle mx-2'></i>Warning
+      </strong>
+    {{/if}}
+    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+  </div>
+  <div class="toast-body">
+    {{this.message}}
+  </div>
+</div>

app/components/notifications/toast/index.js

+import Component from '@glimmer/component';
+
+
+export default class ToastComponent extends Component {
+  get type() {
+    return this.args.notification.type;
+  }
+
+  get message() {
+    return this.args.notification.message;
+  }
+}
\ No newline at end of file

app/components/role/edit.js

 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { group_perms_by_model } from 'papermerge/utils';
 

app/components/viewer/action_buttons/index.hbs

@@ -31,9 +31,10 @@
   {{#if @page_order_changed }}
     Page order changed.
     <button
-      class="btn btn-success"
+      class="btn btn-success pe-4"
       type="button"
       {{on "click" @onPageOrderApply}}>
+        <Spinner @inProgress={{@apply_page_order_changes_in_progress}} />
         Apply Changes
     </button>
     <button

app/components/viewer/index.hbs

@@ -6,6 +6,7 @@
       @ocrStatus={{this.ocrStatus}}
       @selectedPages={{this.selected_pages}}
       @page_order_changed={{this.page_order_changed}}
+      @apply_page_order_changes_in_progress={{this.apply_page_order_changes_in_progress}}
       @onPageOrderApply={{this.onPageOrderApply}}
       @onPageOrderDiscard={{this.onPageOrderDiscard}}
       @openConfirmDeletionModal={{this.openConfirmDeletionModal}}

app/components/viewer/index.js

@@ -23,6 +23,7 @@ export default class ViewerComponent extends Component {
   @service websockets;
   @service store;
   @service requests;
+  @service notify;
   @service router;
 
   @tracked ocr_status = null;
@@ -38,6 +39,7 @@ export default class ViewerComponent extends Component {
   @tracked show_confirm_pages_deletion_modal = false;
   @tracked show_rename_node_modal = false;
   @tracked page_order_changed = false;
+  @tracked apply_page_order_changes_in_progress = false;
 
   initial_pages_memo = A([]);
 
@@ -254,11 +256,26 @@ export default class ViewerComponent extends Component {
 
   @action
   async onPageOrderApply() {
-    await this.requests.reorderPagesApply({
+    this.apply_page_order_changes_in_progress = true;
+    this.requests.reorderPagesApply({
       old_items: this.initial_pages_memo,
       new_items: this.pages
-    });
-    this.router.refresh();
+    }).then(
+      () => { // on success
+        this.apply_page_order_changes_in_progress = false;
+        this.notify.info(
+          'New page order successfully applied'
+        );
+        this.page_order_changed = false;
+      },
+      () => { // on failure
+        this.apply_page_order_changes_in_progress = false;
+        this.notify.error(
+          'There was a problem while saving new page order'
+        );
+        this.page_order_changed = false;
+      }
+    );
   }
 
   @action

app/services/notify.js

+import Service from '@ember/service';
+import { tracked } from 'tracked-built-ins';
+import { TrackedArray } from 'tracked-built-ins';
+
+
+export default class Notify extends Service {
+  /*
+    Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
+  */
+  @tracked notifications = new TrackedArray([]);
+
+  info(message) {
+    let type = 'info';
+
+    this.notifications.push({message, type});
+  }
+
+  warning(message) {
+    let type = 'warning';
+
+    this.notifications.push({message, type});
+  }
+
+  error(message) {
+    let type = 'error';
+
+    this.notifications.push({message, type});
+  }
+}

app/styles/app.scss

@@ -73,3 +73,7 @@ main {
 .droparea {
   outline: 1px solid green;
 }
+
+.toast-container {
+  z-index: 1000;
+}
\ No newline at end of file

app/templates/authenticated.hbs

@@ -6,6 +6,7 @@
     @pinned_tags={{@model.pinned_tags}}
     @expanded={{this.expanded_sidebar}} />
   <div class="w-100 central-bar">
+    <Notifications />
     <Nav::Topbar
       @onSidebarToggle={{this.onSidebarToggle}} />
     <div class="container-fluid mx-2 my-1">

package.json

@@ -69,7 +69,8 @@
     "prettier": "^2.5.1",
     "qunit": "^2.17.2",
     "qunit-dom": "^2.0.0",
-    "sass": "^1.47.0"
+    "sass": "^1.47.0",
+    "tracked-built-ins": "^2.0.1"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"
@@ -78,7 +79,6 @@
     "edition": "octane"
   },
   "devDependencies": {
-    "tracked-built-ins": "^2.0.1",
     "webpack": "^5.65.0"
   }
 }