diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0342494..5f804db 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -30,7 +30,7 @@
-
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 86e4cd7..0ac131d 100644
--- a/src/app/app.component.ts
+++ b/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();
+ }
}
diff --git a/src/app/service/api.service.ts b/src/app/service/api.service.ts
index dd6ad63..e4d2237 100644
--- a/src/app/service/api.service.ts
+++ b/src/app/service/api.service.ts
@@ -1222,4 +1222,25 @@ export class ApiService {
});
});
}
+
+ public moveMenuNode(MovedPageId: string, ParentPageId: string): Promise {
+ 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);
+ },
+ });
+ });
+ }
}