Add ability to drag and reorganize tree pages in sidebar

src/app/app.component.html

@@ -30,7 +30,7 @@
         </ion-list>
       </ion-header>
       <ion-content>
-          <tree-root style="font-size: 15px;" #menuTree [nodes]="nodes" [options]="options">
+          <tree-root style="font-size: 15px;" #menuTree [nodes]="nodes" [options]="options" (moveNode)="onTreeNodeMove($event)">
             <ng-template #treeNodeTemplate let-node let-index="index">
               <span class="tree-node-container" style="display: flex; padding: 5px; width: 100%;" [ngClass]="node.data.type">
                 <i class="tree-node-icon" [ngClass]="typeIcons[node.data.type]"></i>

src/app/app.component.ts

@@ -45,6 +45,16 @@ export class AppComponent implements OnInit {
     isExpandedField: 'expanded',
     animateExpand: true,
     scrollOnActivate: false,
+    allowDrag: true,
+    allowDrop: (element, { parent, index }) => {
+      return (
+          !this.api.isOffline
+          && (element.data.type === 'page' || element.data.type === 'form')
+          && (parent.data.type === 'page' || parent.data.userRootPage)
+          && !element.data.userRootPage
+          && element.data.id !== parent.data.id
+      );
+    },
     actionMapping: {
       mouse: {
         dblClick: (tree, node, $event) => {
@@ -710,4 +720,32 @@ export class AppComponent implements OnInit {
   isPrefetch() {
     return !!this.session.get('user.preferences.auto_prefetch');
   }
+
+  async onTreeNodeMove({ node, to }) {
+    if ( this.api.isOffline ) {
+      debug('Cannot move node. API is offline.');
+      return;
+    }
+
+    const { parent } = to;
+    debug('Moving node:', { node, parent });
+
+    try {
+      await this.api.moveMenuNode(node.id, to.parent.id);
+    } catch (error) {
+      console.error('Error moving tree node:', error);
+      this.alerts.create({
+        header: 'Error Moving Node',
+        message: error.message,
+        buttons: [
+          {
+            text: 'Okay',
+            role: 'cancel',
+          },
+        ],
+      }).then(x => x.present());
+    }
+
+    await this.reloadMenuItems().toPromise();
+  }
 }

src/app/service/api.service.ts

@@ -1222,4 +1222,25 @@ export class ApiService {
       });
     });
   }
+
+  public moveMenuNode(MovedPageId: string, ParentPageId: string): Promise<any> {
+    return new Promise(async (res, rej) => {
+      if ( this.isOffline ) {
+        return;
+      }
+
+      this.post('/menu/move-node', { MovedPageId, ParentPageId }).subscribe({
+        next: async result => {
+          if ( result.data.status !== 200 ) {
+            return rej(new Error (result.data.message || 'An unknown error has occurred.'));
+          }
+
+          res();
+        },
+        error: err => {
+          rej(err);
+        },
+      });
+    });
+  }
 }