Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

Add ability to reposition nodes and insert before/after
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
Garrett Mills 2020-10-14 09:43:30 -05:00
parent d6611d9c82
commit fdeea85450
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
4 changed files with 68 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/components/editor/host-options/host-options.component.html
View File

@ -1,6 +1,9 @@
<ion-list>
<ion-item *ngFor="let menuItem of menuItems; let i = index" button (click)="onSelect(menuItems[i].value)">
<ion-icon slot="start" [name]="menuItems[i].icon"></ion-icon>
<ion-item *ngFor="let menuItem of menuItems; let i = index" button (click)="onSelect($event, menuItems[i].value)">
<i *ngIf="menuItems[i].icon" class="fa" slot="start" [ngClass]="menuItems[i].icon"></i>
<div *ngIf="menuItems[i].icons" slot="start">
<i *ngFor="let icon of menuItems[i].icons" class="fa" slot="start" [ngClass]="icon" style="margin-right: 5px;"></i>
</div>
<ion-label>{{ menuItems[i].name }}</ion-label>
</ion-item>
</ion-list>

30
src/app/components/editor/host-options/host-options.component.ts
View File

@ -14,13 +14,33 @@ export class HostOptionsComponent implements OnInit {
@Input() event: Event;
@Input() hostRecord: HostRecord;
public menuItems: Array<{name: string, icon: string, value: string, type?: string}> = [];
protected possibleMenuItems: Array<{name: string, icon: string, value: string, type?: string}> = [
public menuItems: Array<{name: string, icon?: string, icons?: string[], value: string, type?: string}> = [];
protected possibleMenuItems: Array<{name: string, icon?: string, icons?: string[], value: string, type?: string}> = [
{
name: 'Move Up',
icons: ['fa-chevron-up'],
value: 'move_up',
},
{
name: 'Add Node Before',
icons: ['fa-plus'],
value: 'add_before',
},
{
name: 'Delete Node',
icon: 'trash',
icon: 'fa-trash',
value: 'delete_node',
},
{
name: 'Add Node After',
icons: ['fa-plus'],
value: 'add_after',
},
{
name: 'Move Down',
icons: ['fa-chevron-down'],
value: 'move_down',
},
];
constructor(
@ -37,7 +57,7 @@ export class HostOptionsComponent implements OnInit {
}
}
async onSelect(value) {
await this.popover.dismiss(value);
async onSelect(event: MouseEvent, value) {
await this.popover.dismiss({event, value});
}
}

15
src/app/pages/editor/editor.page.ts
View File

@ -68,15 +68,24 @@ export class EditorPage implements OnInit {
});
popover.onDidDismiss().then(result => {
if ( result.data === 'delete_node' ) {
const { event: dismissEvent , value } = result.data;
if ( value === 'delete_node' ) {
this.editorService.deleteNode(node.UUID);
} else if ( value === 'move_up' ) {
this.editorService.moveNode(node, 'up');
} else if ( value === 'move_down' ) {
this.editorService.moveNode(node, 'down');
} else if ( value === 'add_before' ) {
this.onAddClick(dismissEvent, 'before', node.UUID);
} else if ( value === 'add_after' ) {
this.onAddClick(dismissEvent, 'after', node.UUID);
}
});
await popover.present();
}
async onAddClick(event: MouseEvent) {
async onAddClick(event: MouseEvent, position?: 'before' | 'after', positionNodeId?: string) {
if ( !this.editorService.canEdit() ) {
return;
}
@ -88,7 +97,7 @@ export class EditorPage implements OnInit {
popover.onDidDismiss().then(result => {
console.log('adding node', result.data);
this.editorService.addNode(result.data);
this.editorService.addNode(result.data, position, positionNodeId);
});
// popover.onDidDismiss().then(arg => {

26
src/app/service/editor.service.ts
View File

@ -91,6 +91,32 @@ export class EditorService {
}));
await this.saveNodesAsPage(this.currentPage, this.currentNodes);
this.dirtyOverride = false;
}
async moveNode(node: HostRecord, direction: 'up' | 'down') {
if ( !this.currentPage ) {
throw new NoPageLoadedError();
}
const nodeIndex = this.currentNodes.findIndex(maybeNode => maybeNode.UUID === node.UUID);
if ( nodeIndex < 0 ) {
return;
}
if ( direction === 'up' && nodeIndex > 0 ) {
const otherIdx = nodeIndex - 1;
const otherNode = this.currentNodes[otherIdx];
this.currentNodes[otherIdx] = this.currentNodes[nodeIndex];
this.currentNodes[nodeIndex] = otherNode;
} else if ( direction === 'down' && nodeIndex !== (this.currentNodes.length - 1) ) {
const otherIdx = nodeIndex + 1;
const otherNode = this.currentNodes[otherIdx];
this.currentNodes[otherIdx] = this.currentNodes[nodeIndex];
this.currentNodes[nodeIndex] = otherNode;
}
this.dirtyOverride = true;
}
async saveNodesAsPage(page: PageRecord, nodes: HostRecord[]): Promise<HostRecord[]> {