diff --git a/frontend/views/owners/find-owners-view.ts b/frontend/views/owners/find-owners-view.ts index 97aabf5..475a141 100644 --- a/frontend/views/owners/find-owners-view.ts +++ b/frontend/views/owners/find-owners-view.ts @@ -1,6 +1,5 @@ import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { ref, createRef } from 'lit/directives/ref'; import '@vaadin/vaadin-button/vaadin-button' import '@vaadin/vaadin-icons/vaadin-iconset' import '@vaadin/vaadin-icon/vaadin-icon' @@ -13,28 +12,17 @@ import { Router } from '@vaadin/router'; @customElement('find-owners-view') export class FindOwnersView extends View { - @property({ type: String, attribute: 'initial-last-name' }) - initialLastName?: string; + @property({ type: String, attribute: 'last-name' }) + lastName: string = ''; @property({ type: String, attribute: 'hint-text' }) hintText?: string; - private textFieldRef = createRef(); - - connectedCallback() { - super.connectedCallback(); - const searchParams = new URLSearchParams(router.location.search); - const lastNameQuery = searchParams.get('lastName'); - if (typeof lastNameQuery === 'string') { - this.initialLastName = lastNameQuery; - } - } - render() { return html`

Find Owners

- + Find Owner
@@ -43,9 +31,16 @@ export class FindOwnersView extends View { `; } + lastNameChanged(event: Event) { + const textField = event.target as TextFieldElement; + this.lastName = textField.value; + } + findOwner() { - const lastName = this.textFieldRef.value?.value || ''; - const targetUrl = router.urlForName('owners-list') + '?lastName=' + encodeURIComponent(lastName); + let targetUrl = router.urlForName('owners-list'); + if (this.lastName !== '') { + targetUrl += '?lastName=' + encodeURIComponent(this.lastName); + } Router.go(targetUrl); } diff --git a/frontend/views/owners/owners-list-view.ts b/frontend/views/owners/owners-list-view.ts index 5688b7a..e4a99a6 100644 --- a/frontend/views/owners/owners-list-view.ts +++ b/frontend/views/owners/owners-list-view.ts @@ -83,7 +83,7 @@ export class OwnersListView extends View implements BeforeEnterObserver { renderNotFound() { return html` - + `; }