Add ability to drag and reorganize tree pages in sidebar
continuous-integration/drone/push Build is failing Details

master
Garrett Mills 3 years ago
parent c7f9a59cc4
commit 96423d7145
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246

@ -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>

@ -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();
}
}

@ -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);
},
});
});
}
}

Loading…
Cancel
Save