-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(public forms): admin UI for creating and editing public forms (#…
…2682) closes #2271 --------- Co-authored-by: Sebastian <[email protected]>
- Loading branch information
Showing
13 changed files
with
350 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
...app/features/public-form/edit-public-form-columns/edit-public-form-columns.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<div class="public-form-detail-hint-banner" i18n> | ||
You can edit how users will see the details of this public form. To edit | ||
fields, click on the Edit button, make your changes, and then save. These | ||
changes will reflect on the public form. | ||
<br /> | ||
Drag and drop fields and sections in this preview of a profile view. The | ||
editor below closely resembles how the form will look for users later. Forms | ||
show all fields below each other not in multiple columns, however. | ||
<br /> | ||
</div> | ||
<app-admin-entity-form | ||
[config]="publicFormConfig" | ||
(configChange)="updateValue($event)" | ||
[entityType]="entityConstructor" | ||
[isDisabled]="formControl.disabled" | ||
> | ||
</app-admin-entity-form> |
5 changes: 5 additions & 0 deletions
5
...app/features/public-form/edit-public-form-columns/edit-public-form-columns.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
@use "variables/sizes"; | ||
|
||
.public-form-detail-hint-banner{ | ||
margin-bottom: sizes.$regular; | ||
} |
60 changes: 60 additions & 0 deletions
60
.../features/public-form/edit-public-form-columns/edit-public-form-columns.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { ComponentFixture, TestBed } from "@angular/core/testing"; | ||
import { EditPublicFormColumnsComponent } from "./edit-public-form-columns.component"; | ||
import { EntityRegistry } from "app/core/entity/database-entity.decorator"; | ||
import { Entity } from "app/core/entity/model/entity"; | ||
import { FormControl } from "@angular/forms"; | ||
import { Database } from "app/core/database/database"; | ||
import { EntityFormService } from "app/core/common-components/entity-form/entity-form.service"; | ||
import { TestEntity } from "app/utils/test-utils/TestEntity"; | ||
import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing"; | ||
import { NoopAnimationsModule } from "@angular/platform-browser/animations"; | ||
|
||
describe("EditPublicFormColumnsComponent", () => { | ||
let component: EditPublicFormColumnsComponent; | ||
let fixture: ComponentFixture<EditPublicFormColumnsComponent>; | ||
let mockEntityRegistry: Partial<EntityRegistry>; | ||
let mockEntityFormService: jasmine.SpyObj<EntityFormService>; | ||
|
||
const testColumns = [ | ||
{ | ||
fields: ["name", "phone"], | ||
}, | ||
]; | ||
beforeEach(() => { | ||
let mockDatabase: jasmine.SpyObj<Database>; | ||
mockEntityFormService = jasmine.createSpyObj("EntityFormService", [ | ||
"createEntityForm", | ||
"extendFormFieldConfig", | ||
]); | ||
mockEntityRegistry = { | ||
get: jasmine.createSpy("get").and.returnValue(Entity), | ||
}; | ||
|
||
TestBed.configureTestingModule({ | ||
declarations: [], | ||
imports: [ | ||
EditPublicFormColumnsComponent, | ||
FontAwesomeTestingModule, | ||
NoopAnimationsModule, | ||
], | ||
providers: [ | ||
{ provide: Database, useValue: mockDatabase }, | ||
{ provide: EntityRegistry, useValue: mockEntityRegistry }, | ||
{ provide: EntityFormService, useValue: mockEntityFormService }, | ||
], | ||
}).compileComponents(); | ||
}); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(EditPublicFormColumnsComponent); | ||
component = fixture.componentInstance; | ||
component.entity = new TestEntity(); | ||
component.entity["columns"] = testColumns; | ||
component.formControl = new FormControl(); | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it("should create the component", () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
41 changes: 41 additions & 0 deletions
41
src/app/features/public-form/edit-public-form-columns/edit-public-form-columns.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import { Component, inject, OnInit } from "@angular/core"; | ||
import { EditComponent } from "app/core/entity/default-datatype/edit-component"; | ||
import { DynamicComponent } from "app/core/config/dynamic-components/dynamic-component.decorator"; | ||
|
||
import { EntityConstructor } from "app/core/entity/model/entity"; | ||
import { EntityRegistry } from "app/core/entity/database-entity.decorator"; | ||
import { AdminEntityFormComponent } from "app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component"; | ||
import { FormConfig } from "app/core/entity-details/form/form.component"; | ||
import { FieldGroup } from "app/core/entity-details/form/field-group"; | ||
@Component({ | ||
selector: "app-edit-public-form-columns", | ||
standalone: true, | ||
imports: [AdminEntityFormComponent], | ||
templateUrl: "./edit-public-form-columns.component.html", | ||
styleUrl: "./edit-public-form-columns.component.scss", | ||
}) | ||
@DynamicComponent("EditPublicFormColumns") | ||
export class EditPublicFormColumnsComponent | ||
extends EditComponent<FieldGroup[]> | ||
implements OnInit | ||
{ | ||
entityConstructor: EntityConstructor; | ||
publicFormConfig: FormConfig; | ||
|
||
private entities = inject(EntityRegistry); | ||
|
||
override ngOnInit(): void { | ||
if (this.entity) { | ||
this.entityConstructor = this.entities.get(this.entity["entity"]); | ||
|
||
this.publicFormConfig = { fieldGroups: this.formControl.getRawValue() }; | ||
} | ||
} | ||
|
||
updateValue(newConfig: FormConfig) { | ||
// setTimeout needed for change detection of disabling tabs | ||
// TODO: change logic to instead disable tabs upon edit mode immediately (without waiting for changes) | ||
setTimeout(() => this.formControl.setValue(newConfig.fieldGroups)); | ||
this.formControl.markAsDirty(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.