-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #108 from CentreForDigitalHumanities/feature/agent…
…-form Feature/agent form
- Loading branch information
Showing
18 changed files
with
553 additions
and
22 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
98 changes: 98 additions & 0 deletions
98
...rc/app/data-entry/agent-form/agent-description-form/agent-description-form.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,98 @@ | ||
| <form> | ||
| <h3>Designators</h3> | ||
|
|
||
| <p>What expressions are used in the text to refer to this agent?</p> | ||
|
|
||
| <lc-designators-control [formControl]="form.controls.designators"></lc-designators-control> | ||
|
|
||
| <h3>Gender</h3> | ||
|
|
||
| <p>Does the text establish the gender of this agent?</p> | ||
|
|
||
| <div class="mb-4"> | ||
| <label class="form-label" for="input-gender">Gender</label> | ||
| <select class="form-select" id="input-gender" | ||
| [formControl]="form.controls.gender.controls.gender"> | ||
| <option *ngFor="let option of genderOptions" [value]="option.value"> | ||
| {{option.label}} | ||
| </option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div class="mb-4"> | ||
| <label class="form-label" for="input-gender-mention"> | ||
| How is this information presented in the text? | ||
| </label> | ||
| <select class="form-select" id="input-gender-mention" | ||
| [formControl]="form.controls.gender.controls.sourceMention"> | ||
| <option *ngFor="let option of genderSourceMentionOptions" [value]="option.value"> | ||
| {{option.label}} | ||
| </option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div class="mb-4"> | ||
| <label class="form-label" for="input-gender-notes"> | ||
| Additional notes | ||
| </label> | ||
| <textarea class="form-control" id="input-gender-notes" | ||
| [formControl]="form.controls.gender.controls.note"> | ||
| </textarea> | ||
| </div> | ||
|
|
||
| <ng-container *ngIf="isGroup$ | async"> | ||
| <h3>Location</h3> | ||
|
|
||
| <div class="mb-4"> | ||
| <label class="form-label" for="input-has-location"> | ||
| Is the group characterised by their location? (For example, "the citizens of | ||
| Arles", "the nuns at the abbey in Poitiers".) | ||
| </label> | ||
| <select class="form-select" id="input-has-location" | ||
| [formControl]="form.controls.location.controls.hasLocation"> | ||
| <option [ngValue]="true">Yes</option> | ||
| <option [ngValue]="false">No</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div [ngbCollapse]="!form.controls.location.controls.hasLocation.value"> | ||
| <div class="mb-4"> | ||
| <label class="form-label" for="input-location"> | ||
| By which location is the group defined? | ||
| </label> | ||
| <select class="form-select" id="input-location" | ||
| [formControl]="form.controls.location.controls.location"> | ||
| <ng-container *ngIf="locations$ | async as locationData"> | ||
| <option *ngFor="let location of locationData.spaceDescriptions" | ||
| [value]="location.id"> | ||
| {{location.name}} | ||
| </option> | ||
| </ng-container> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div class="mb-4"> | ||
| <label class="form-label" for="input-location-mention"> | ||
| How is this information presented in the text? | ||
| </label> | ||
| <select class="form-select" id="input-location-mention" | ||
| [formControl]="form.controls.location.controls.sourceMention"> | ||
| <option *ngFor="let option of locationSourceMentionOptions" | ||
| [value]="option.value"> | ||
| {{option.label}} | ||
| </option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div class="mb-4"> | ||
| <label class="form-label" for="input-location-notes"> | ||
| Additional notes | ||
| </label> | ||
| <textarea class="form-control" id="input-location-notes" | ||
| [formControl]="form.controls.location.controls.note"> | ||
| </textarea> | ||
| </div> | ||
| </div> | ||
|
|
||
| </ng-container> | ||
| </form> |
Empty file.
24 changes: 24 additions & 0 deletions
24
...app/data-entry/agent-form/agent-description-form/agent-description-form.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,24 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { AgentDescriptionFormComponent } from './agent-description-form.component'; | ||
| import { SharedTestingModule } from '@shared/shared-testing.module'; | ||
| import { DataEntrySharedModule } from '../../shared/data-entry-shared.module'; | ||
|
|
||
| describe('AgentDescriptionFormComponent', () => { | ||
| let component: AgentDescriptionFormComponent; | ||
| let fixture: ComponentFixture<AgentDescriptionFormComponent>; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [AgentDescriptionFormComponent], | ||
| imports: [SharedTestingModule, DataEntrySharedModule,], | ||
| }); | ||
| fixture = TestBed.createComponent(AgentDescriptionFormComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
114 changes: 114 additions & 0 deletions
114
.../src/app/data-entry/agent-form/agent-description-form/agent-description-form.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,114 @@ | ||
| import { Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; | ||
| import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; | ||
| import { FormControl, FormGroup } from '@angular/forms'; | ||
| import { | ||
| DataEntryAgentDescriptionGQL, | ||
| DataEntryAgentDescriptionQuery, | ||
| PersonAgentDescriptionGenderGenderChoices as GenderChoices, | ||
| PersonAgentDescriptionGenderSourceMentionChoices as GenderSourceMentionChoices, | ||
| LocationsInSourceListGQL, | ||
| LocationsInSourceListQuery, | ||
| PersonAgentDescriptionSourceMentionChoices as LocationSourceMentionChoices, | ||
| } from 'generated/graphql'; | ||
| import { Observable, map, Subject, switchMap, shareReplay, filter } from 'rxjs'; | ||
| import _ from 'underscore'; | ||
|
|
||
|
|
||
| @Component({ | ||
| selector: 'lc-agent-description-form', | ||
| templateUrl: './agent-description-form.component.html', | ||
| styleUrls: ['./agent-description-form.component.scss'], | ||
| }) | ||
| export class AgentDescriptionFormComponent implements OnChanges, OnDestroy { | ||
| @Input() id?: string; | ||
|
|
||
| genderOptions: { value: GenderChoices, label: string }[] = [ | ||
| { value: GenderChoices.Female, label: 'Female' }, | ||
| { value: GenderChoices.Male, label: 'Male' }, | ||
| { value: GenderChoices.Other, label: 'Other' }, | ||
| { value: GenderChoices.Mixed, label: 'Mixed (for groups)' }, | ||
| { value: GenderChoices.Unknown, label: 'Unknown' } | ||
| ]; | ||
|
|
||
| genderSourceMentionOptions: { value: GenderSourceMentionChoices, label: string }[] = [ | ||
| { value: GenderSourceMentionChoices.Direct, label: 'Mentioned' }, | ||
| { value: GenderSourceMentionChoices.Implied, label: 'Implied' }, | ||
| ]; | ||
|
|
||
| locationSourceMentionOptions: { value: LocationSourceMentionChoices, label: string }[] = [ | ||
| { value: LocationSourceMentionChoices.Direct, label: 'Mentioned' }, | ||
| { value: LocationSourceMentionChoices.Implied, label: 'Implied' }, | ||
| ]; | ||
|
|
||
| form = new FormGroup({ | ||
| designators: new FormControl<string[]>([], { nonNullable: true }), | ||
| gender: new FormGroup({ | ||
| gender: new FormControl<string>(GenderChoices.Unknown), | ||
| sourceMention: new FormControl<string>(GenderSourceMentionChoices.Direct), | ||
| note: new FormControl<string>(''), | ||
| }), | ||
| location: new FormGroup({ | ||
| hasLocation: new FormControl<boolean>(false, { nonNullable: true }), | ||
| location: new FormControl<string | null>(null), | ||
| sourceMention: new FormControl<string>(LocationSourceMentionChoices.Direct), | ||
| note: new FormControl<string>(''), | ||
| }) | ||
| }); | ||
|
|
||
| isGroup$: Observable<boolean>; | ||
| locations$: Observable<LocationsInSourceListQuery>; | ||
|
|
||
| private id$ = new Subject<string>(); | ||
| private data$: Observable<DataEntryAgentDescriptionQuery>; | ||
|
|
||
| constructor( | ||
| private agentQuery: DataEntryAgentDescriptionGQL, | ||
| private locationsQuery: LocationsInSourceListGQL, | ||
| ) { | ||
| this.data$ = this.id$.pipe( | ||
| switchMap(id => this.agentQuery.watch({ id }).valueChanges), | ||
| map(result => result.data), | ||
| takeUntilDestroyed(), | ||
| shareReplay(1), | ||
| ); | ||
| this.isGroup$ = this.data$.pipe( | ||
| map(result => result.agentDescription?.isGroup || false), | ||
| ); | ||
| this.locations$ = this.data$.pipe( | ||
| map(data => data.agentDescription?.source.id), | ||
| filter(_.negate(_.isUndefined)), | ||
| switchMap(id => this.locationsQuery.watch({ id }).valueChanges), | ||
| map(result => result.data), | ||
| shareReplay(1), | ||
| ); | ||
| this.data$.subscribe(this.updateFormData.bind(this)); | ||
| } | ||
|
|
||
| ngOnChanges(changes: SimpleChanges): void { | ||
| if (changes['id'] && this.id) { | ||
| this.id$.next(this.id); | ||
| } | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.id$.complete(); | ||
| } | ||
|
|
||
| updateFormData(data: DataEntryAgentDescriptionQuery) { | ||
| this.form.setValue({ | ||
| designators: data.agentDescription?.designators || [], | ||
| gender: { | ||
| gender: data.agentDescription?.gender?.gender || GenderChoices.Unknown, | ||
| sourceMention: data.agentDescription?.gender?.sourceMention || GenderSourceMentionChoices.Direct, | ||
| note: data.agentDescription?.gender?.note || '', | ||
| }, | ||
| location: { | ||
| hasLocation: data.agentDescription?.location !== null, | ||
| location: data.agentDescription?.location?.location.id || null, | ||
| sourceMention: data.agentDescription?.location?.sourceMention || LocationSourceMentionChoices.Direct, | ||
| note: data.agentDescription?.location?.note || '', | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.