-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: Add schema editor module * feat: Add schema editor selection * feat: Add schema editor component * feat: Preview and reorder schema sections * feat: Add, edit and remove fields * feat: Reorder fields * fix: Don't allow reordering or deleting section while expanded And expand when adding a field. * feat: Add schema section * wip: Edit schema section page * feat: Edit schema name * fix: More consistent Add buttons * feat: Add field editor * feat: Change field validations to use if * feat: Edit field validation * feat: Edit subfields * fix(schema-editor): Default input type for text and number * fix(forms): Properly reset dependent fields * fix: Adjust endpoints for schemas * refactor: Add SchemaService and generic endpoint * feat: Add schema edit endpoints * feat: Implement schema section create * feat: Implement schema section delete * feat: Implement save field * fix(forms): Don't touch localStorage if formId is unset * feat(schema-editor): Save sections * feat(schema-editor): Edit section conditions * feat(schema-editor): Schema condition syntax check * feat(forms): Minor fixes - Forms no longer initialize subelements whose dependentKeyValue is not active - Subelements with the same key no longer create Angular warnings * feat(forms): Add new gridSize property * feat(schema-editor): Clearly mark unsaved sections * fix(schema-editor): Wait for load before editing field or section * feat(schema-editor): Edit section copy buttons * feat(schema-editor): Edit copy button mappings in offcanvas * feat(schema-editor): Autocomplete for new copy field mapping * fix(schema-editor): Don't disable field key * fix(schema-editor): Disable section reorder * fix(schema-editor): Better copy button label placeholder * fix(schema-editor): Move add buttons into headers * fix(forms): Mark section dirty when changing fields * fix(schema-editor): Respect field type for subfield dependentKeyValue * fix(schema-editor): Comma-separated values field * fix(forms): Disabled property for radio fields * feat(schema-editor): Show parent section when editing fields * feat(schema-editor): Change layout of special editors to read like a sentence * fix(schema-editor): Prevent dragging forms
- Loading branch information
Showing
40 changed files
with
1,398 additions
and
129 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
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
140 changes: 140 additions & 0 deletions
140
src/app/schema-editor/edit-field/edit-field.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,140 @@ | ||
| <div class="container"> | ||
| <div class="h3 text-muted bi-card-list"> | ||
| {{ section?.name }} | ||
| </div> | ||
| <h1> | ||
| Edit Field: {{ field.title }} | ||
| </h1> | ||
| <h2> | ||
| Basic Information | ||
| </h2> | ||
| <app-form [typeSchema]="metaSchema" [formData]="{data: field}" (saved)="save()" [dirty]="!!section?._dirty" (dirtyChange)="setDirty($event)"></app-form> | ||
| <h2 class="d-flex align-items-center"> | ||
| Validation | ||
| <i class="small bi-info-circle ms-2" ngbTooltip="About Validation" [ngbPopover]="popup" popoverTitle="About Validation"></i> | ||
| <button class="btn btn-success bi-plus-lg ms-auto" (click)="addValidation()"> | ||
| Add Validation | ||
| </button> | ||
| </h2> | ||
| <ng-template #popup> | ||
| <dl> | ||
| <dt>Message</dt> | ||
| <dd> | ||
| Validation messages are displayed when the condition is met. | ||
| </dd> | ||
| <dt>Severity</dt> | ||
| <dd> | ||
| The severity (error or warning) determines how the color of the message and whether the form is considered valid. | ||
| </dd> | ||
| <dt>Conditions</dt> | ||
| <dd> | ||
| Conditions are written in Jexl, a simple expression language. | ||
| You can refer to any field in the form by its key. | ||
| <br> | ||
| <a class="bi-info-circle me-2" target="_blank" href="https://github.com/TomFrost/Jexl#all-the-details"> | ||
| Learn more | ||
| </a> | ||
| </dd> | ||
| <dt> | ||
| Example | ||
| </dt> | ||
| <dd> | ||
| To display an error message when a field named <code>year</code> is before 1900: | ||
| <ul> | ||
| <li>Severity: Error</li> | ||
| <li>Condition: <code>year < 1900</code></li> | ||
| <li>Message: Year must be after 1900</li> | ||
| </ul> | ||
| </dl> | ||
| </ng-template> | ||
| <div class="list-group mb-3"> | ||
| @for (validation of field.validations; track validation) { | ||
| <div class="list-group-item"> | ||
| <div class="row g-2 align-items-center"> | ||
| <div class="col-auto"> | ||
| When | ||
| </div> | ||
| <div class="col"> | ||
| <label class="visually-hidden">Condition</label> | ||
| <input class="form-control font-monospace" [(ngModel)]="validation['if']" ngbTooltip="The condition that must be met for the validation to be triggered."/> | ||
| </div> | ||
| <div class="col-auto"> | ||
| then display | ||
| </div> | ||
| <div class="col-auto"> | ||
| <label class="visually-hidden">Severity</label> | ||
| <select class="form-select" ngbTooltip="The severity of the validation" [(ngModel)]="validation.level"> | ||
| <option value="error">Error</option> | ||
| <option value="warning">Warning</option> | ||
| </select> | ||
| </div> | ||
| <div class="col-auto"> | ||
| with message | ||
| </div> | ||
| <div class="col"> | ||
| <label class="visually-hidden">Message</label> | ||
| <input class="form-control" [(ngModel)]="validation.message" ngbTooltip="The message to display if the validation is triggered."/> | ||
| </div> | ||
| <div class="col-auto"> | ||
| <button class="btn btn-danger bi-trash" ngbTooltip="Remove Validation" (click)="removeValidation($index)"></button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } @empty { | ||
| <div class="list-group-item text-muted"> | ||
| No validations. | ||
| </div> | ||
| } | ||
| </div> | ||
| <h2 class="d-flex align-items-center"> | ||
| Subfields | ||
| <button class="btn btn-success bi-plus-lg ms-auto" (click)="addSubfield()"> | ||
| Add Subfield | ||
| </button> | ||
| </h2> | ||
| <div class="list-group mb-3" cdkDropList (cdkDropListDropped)="dropSubfield($event)"> | ||
| @for (subField of field.inputList; track subField) { | ||
| <div class="list-group-item" cdkDrag> | ||
| <div class="row g-2 align-items-center"> | ||
| <div class="col-auto"> | ||
| When <span class="font-monospace text-info">{{ field.key }}</span> equals | ||
| </div> | ||
| <div class="col"> | ||
| <label class="visually-hidden">Dependent Value</label> | ||
| @if (field.dataType === 'bool') { | ||
| <select class="form-select" [(ngModel)]="subField.dependentKeyValue" ngbTooltip="The value of '{{ field.key }}' that triggers this subfield"> | ||
| <option [value]="true">True</option> | ||
| <option [value]="false">False</option> | ||
| </select> | ||
| } @else { | ||
| <input class="form-control font-monospace" [placeholder]="field.dataType" [type]="field.dataType" [(ngModel)]="subField.dependentKeyValue" ngbTooltip="The value of '{{ field.key }}' that triggers this subfield"/> | ||
| } | ||
| </div> | ||
| <div class="col-auto"> | ||
| show field with key | ||
| </div> | ||
| <div class="col"> | ||
| <label class="visually-hidden">Key</label> | ||
| <input class="form-control font-monospace" placeholder="Key" [(ngModel)]="subField.key" [ngbTooltip]="'The key of this subfield'"/> | ||
| </div> | ||
| <div class="col-auto"> | ||
| titled | ||
| </div> | ||
| <div class="col"> | ||
| <label class="visually-hidden">Title</label> | ||
| <input class="form-control" placeholder="Title" [(ngModel)]="subField.title" [ngbTooltip]="'The title of this subfield'"/> | ||
| </div> | ||
| <div class="col-auto"> | ||
| <a class="btn btn-primary bi-pencil me-2" ngbTooltip="Edit Subfield" [routerLink]="['..', subField.key]"></a> | ||
| <div class="btn btn-secondary bi-grip-vertical me-2" cdkDragHandle ngbTooltip="Drag to Reorder"></div> | ||
| <button class="btn btn-danger bi-trash" ngbTooltip="Remove Subfield" (click)="removeSubfield($index)"></button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } @empty { | ||
| <div class="list-group-item text-muted"> | ||
| No subfields. | ||
| </div> | ||
| } | ||
| </div> | ||
| </div> |
Empty file.
23 changes: 23 additions & 0 deletions
23
src/app/schema-editor/edit-field/edit-field.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,23 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { EditFieldComponent } from './edit-field.component'; | ||
|
|
||
| describe('EditFieldComponent', () => { | ||
| let component: EditFieldComponent; | ||
| let fixture: ComponentFixture<EditFieldComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [EditFieldComponent] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(EditFieldComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
Oops, something went wrong.