Skip to content

Commit

Permalink
simplified code
Browse files Browse the repository at this point in the history
  • Loading branch information
@sleidig
sleidig committed Mar 27, 2024
1 parent 7378112 commit f7a0e76
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 90 deletions.
106 changes: 51 additions & 55 deletions src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,67 @@
<div cdkDropListGroup class="overall-container flex-row">
<div class="overall-container flex-row">
<!-- FORM PREVIEW -->
<div class="flex-grow admin-grid-layout padding-right-regular">
<div
class="flex-grow admin-grid-layout padding-right-regular"
cdkDropList
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropGroup($event)"
cdkDropListGroup
>
<!-- FIELD GROUPS -->
<div
*ngFor="let group of config.fieldGroups; let i = index"
class="entity-form-cell admin-form-column section-container"
cdkDrag
[cdkDragData]="group"
>
<!-- GROUP HEADER -->
<div class="flex-row align-center">
<fa-icon
icon="grip-vertical"
size="xl"
class="drag-handle"
cdkDragHandle
></fa-icon>
<app-admin-section-header
[(title)]="group.header"
(remove)="removeGroup(i)"
></app-admin-section-header>
</div>

<div
cdkDropList
[cdkDropListData]="{ group, index: i }"
(cdkDropListDropped)="dropGroup($event)"
[cdkDropListConnectedTo]="dropLists"
[cdkDropListData]="group.fields"
(cdkDropListDropped)="drop($event)"
class="fields-group-list drop-list"
>
<div cdkDrag>
<div class="flex-row align-center">
<fa-icon
icon="grip-vertical"
size="xl"
class="drag-handle"
></fa-icon>
<!-- GROUP HEADER -->
<app-admin-section-header
[(title)]="group.header"
(remove)="removeGroup(i)"
></app-admin-section-header>
</div>
<div
cdkDropList
[cdkDropListData]="group.fields"
(cdkDropListDropped)="drop($event)"
[cdkDropListConnectedTo]="dropLists"
class="fields-group-list drop-list"
>
<!-- FIELD [start] -->
<div
*ngFor="let field of group.fields; let j = index"
class="admin-form-field flex-row align-center"
cdkDrag
cdkDragBoundary=".overall-container"
>
<fa-icon
icon="grip-vertical"
size="xl"
class="drag-handle"
></fa-icon>
<!-- FIELD [start] -->
<div
*ngFor="let field of group.fields; let j = index"
class="admin-form-field flex-row align-center"
cdkDrag
cdkDragBoundary=".overall-container"
>
<fa-icon icon="grip-vertical" size="xl" class="drag-handle"></fa-icon>

<button
mat-stroked-button
color="accent"
class="field-edit-button"
(click)="openFieldConfig(field)"
i18n="Button label"
>
Edit Field
</button>
<button
mat-stroked-button
color="accent"
class="field-edit-button"
(click)="openFieldConfig(field)"
i18n="Button label"
>
Edit Field
</button>

<div class="dummy-form-field">
<app-entity-field-edit
[field]="field"
[entity]="dummyEntity"
[form]="dummyForm"
></app-entity-field-edit>
</div>
</div>
<!-- FIELD [end]-->
<div class="dummy-form-field">
<app-entity-field-edit
[field]="field"
[entity]="dummyEntity"
[form]="dummyForm"
></app-entity-field-edit>
</div>
</div>
<!-- FIELD [end]-->
</div>
</div>

Expand Down
40 changes: 5 additions & 35 deletions src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
import {
Component,
Input,
OnChanges,
SimpleChanges,
ViewChildren,
QueryList,
AfterViewInit,
} from "@angular/core";
import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
import { Entity, EntityConstructor } from "../../../entity/model/entity";
import { EntityFormService } from "../../../common-components/entity-form/entity-form.service";
import { FormControl, FormGroup } from "@angular/forms";
Expand All @@ -17,15 +9,14 @@ import {
DragDropModule,
moveItemInArray,
transferArrayItem,
CdkDropList,
} from "@angular/cdk/drag-drop";
import {
ColumnConfig,
FormFieldConfig,
toFormFieldConfig,
} from "../../../common-components/entity-form/FormConfig";
import { AdminEntityService } from "../../admin-entity.service";
import { lastValueFrom, asapScheduler } from "rxjs";
import { lastValueFrom } from "rxjs";
import { NgForOf, NgIf } from "@angular/common";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";
import { MatButtonModule } from "@angular/material/button";
Expand Down Expand Up @@ -60,14 +51,11 @@ import { FormConfig } from "../../../entity-details/form/form.component";
NgIf,
],
})
export class AdminEntityFormComponent implements OnChanges, AfterViewInit {
export class AdminEntityFormComponent implements OnChanges {
@Input() entityType: EntityConstructor;

@Input() config: FormConfig;

@ViewChildren(CdkDropList)
private dropListQuery: QueryList<CdkDropList>;
public dropLists: CdkDropList[] = [];
dummyEntity: Entity;
dummyForm: FormGroup;

Expand Down Expand Up @@ -111,24 +99,6 @@ export class AdminEntityFormComponent implements OnChanges, AfterViewInit {
return config.fieldGroups.reduce((p, c) => p.concat(c.fields), []);
}

ngAfterViewInit(): void {
let loadedDropLists: CdkDropList[] = [];
this.dropListQuery.forEach((dropList) => {
loadedDropLists.push(dropList);
});
loadedDropLists = loadedDropLists.reverse();
asapScheduler.schedule(() => {
this.dropLists = loadedDropLists;
// one array of siblings (shared for a whole tree)
const groupSiblings = this.dropLists.map((dl) => dl?._dropListRef);
// overwrite _getSiblingContainerFromPosition method
this.dropListQuery.forEach((dl) => {
dl._dropListRef._getSiblingContainerFromPosition = (item, x, y) =>
groupSiblings.find((sibling) => sibling._canReceive(item, x, y));
});
});
}

/**
* Load any fields from schema that are not already in the form, so that the user can drag them into the form.
* @param config
Expand Down Expand Up @@ -233,8 +203,8 @@ export class AdminEntityFormComponent implements OnChanges, AfterViewInit {
dropGroup(event: CdkDragDrop<any>) {
moveItemInArray(
this.config.fieldGroups,
event.previousContainer.data.index,
event.container.data.index,
event.previousIndex,
event.currentIndex,
);
}

Expand Down

0 comments on commit f7a0e76

Please sign in to comment.