libs/upp-wdgt/src/components/upp-address/upp-address.ts
Component for displaying an address modal. It allows users to select, validate, and manipulate addresses.
languageSupport
OnInit
OnDestroy
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | upp-modal-address |
| styleUrls | ./md/upp-address.scss |
| templateUrl | ./md/upp-address.html |
Properties |
|
Methods |
Inputs |
Accessors |
constructor(lang: languageService, change: ChangeDetectorRef, geocode: geocodeService, toast: toastService, modalCtrl: ModalController, http: HttpClient)
|
||||||||||||||||||||||||||||
|
Constructor for dependency injection.
Parameters :
|
| title |
Type : string
|
Default value : ''
|
|
Modal title. |
| value |
Type : string | MapAddress | null
|
Default value : null
|
|
Input value, which can be a string or a MapAddress object. |
| Async AcceptModal |
AcceptModal()
|
|
Closes the modal and returns the selected address.
Returns :
Promise<void>
|
| Async CloseModal |
CloseModal()
|
|
Dismisses the modal without returning data.
Returns :
Promise<void>
|
| ngOnDestroy |
ngOnDestroy()
|
|
Lifecycle hook: Cleans up resources on destroy.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Lifecycle hook: Initializes component state.
Returns :
void
|
| onFormChanged |
onFormChanged()
|
|
Handles form changes and marks the form as invalid until validation.
Returns :
void
|
| onLocate |
onLocate()
|
|
Attempts to locate the user using geolocation.
Returns :
void
|
| onMapClick | ||||||||
onMapClick(event: any)
|
||||||||
|
Handles map click event to update position.
Parameters :
Returns :
void
|
| onValidate |
onValidate()
|
|
Validates the entered address by resolving it via the geocode service.
Returns :
void
|
| Public _mapinfo |
Type : MapInfo
|
Default value : {
initialized: false,
validated: false,
zoom: 17,
formatted: null,
accuracy: 0,
position: {
lat: 0,
lng: 0
},
markers: [{
position: {
lat: 0,
lng: 0
}
}]
}
|
|
Object containing map information. |
| Public gmapsApiLoaded |
Default value : this._gmapsApiLoaded.asObservable()
|
| GoogleMapId |
getGoogleMapId()
|
|
Retrieves the Google Maps API key. |
| AddressForm |
getAddressForm()
|
|
Returns the FormGroup for the address form. Initializes the form if it hasn't been created yet.
Returns :
FormGroup
|
<ion-header>
<ion-toolbar>
<ion-title>{{title}}</ion-title>
<ion-buttons slot="end">
<ion-button uppDataId="address-submit-button" [hidden]="AddressForm.pristine || AddressForm.invalid || !_mapinfo.validated" (click)="AcceptModal()">
<ion-icon slot="icon-only" name="checkmark"></ion-icon>
</ion-button>
<ion-button uppDataId="address-close-button" (click)="CloseModal()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="mapcontainer">
<div *ngIf="gmapsApiLoaded | async" style="height: 100%; width: 100%;">
<google-map #googlemap uppDataId="address-google-map" id="googlemap" [mapId]="GoogleMapId" height="100%" width="100%" [options]="{ mapTypeControl: false, fullscreenControl: false }" [zoom]="_mapinfo.zoom" [center]="_mapinfo.position" (mapClick)="onMapClick($event)">
<map-advanced-marker uppDataId="address-google-marker" *ngFor="let marker of _mapinfo.markers" [position]="marker.position"></map-advanced-marker>
</google-map>
</div>
</div>
<form class="address-form" [formGroup]="AddressForm">
<ion-item>
<upp-input uppDataId="address-street-text"
formControlName="address"
type='text'
placeholder="{{tr('@address_enter_street')}}"
(Changed)="onFormChanged()"
[errornfo]="{ required: tr('@mandatory_field') }"
></upp-input>
</ion-item>
<ion-item>
<upp-input uppDataId="address-number-text"
style="min-width: 30%"
formControlName="number"
type='text'
placeholder="{{tr('@address_enter_number')}}"
(Changed)="onFormChanged()"
></upp-input>
<upp-input uppDataId="address-door-text"
style="margin-left: 8px"
formControlName="door"
type='text'
placeholder="{{tr('@address_enter_door')}}"
></upp-input>
</ion-item>
<ion-item>
<upp-input uppDataId="address-locality-text"
formControlName="locality"
type='text'
placeholder="{{tr('@address_enter_locality')}}"
(Changed)="onFormChanged()"
[errornfo]="{ required: tr('@mandatory_field') }"
></upp-input>
</ion-item>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button uppDataId="address-locate-button"
color="primary"
expand="block"
fill="solid"
shape="round"
(click)="onLocate()"
>
<ion-icon slot="start" name="locate"></ion-icon>
{{tr('@address_go_to_current')}}
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button uppDataId="address-validate-button"
[ngClass]="{ 'hidden': _mapinfo.validated !== false }"
color="danger"
expand="block"
fill="solid"
shape="round"
[disabled]="!AddressForm.valid"
(click)="onValidate()"
>
<ion-icon slot="start" name="checkmark-circle-outline"></ion-icon>
{{tr('@address_validate')}}
</ion-button>
<ion-button uppDataId="address-msgvalid-info"
[ngClass]="{ 'hidden': _mapinfo.validated === false }"
color="success"
fill="solid"
shape="round"
expand="block"
(click)="AcceptModal()"
>
<ion-icon slot="start" name="checkmark-circle-outline"></ion-icon>
{{tr('@address_msgvalid')}}
</ion-button>
</ion-buttons>
</ion-toolbar>
</form>
</ion-content>
./md/upp-address.scss
:host {
#googlemap {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
cursor: pointer;
&.hide {
opacity: 0;
}
}
.error-container {
opacity: 0;
&.show {
opacity: 1;
}
}
ion-label {
&.input-error {
color: var(--ion-color-danger);
position: absolute;
bottom: 2px;
right: 3px;
font-size: 12px;
transition: opacity 0.5s, font-size 0.5s;
&.hide {
opacity: 0;
pointer-events: none;
position: absolute;
top: 22px;
left: 8px;
font-size: 16px;
color: var(--ion-color-medium);
}
}
&.center {
width: 100% !important;
text-align: center !important;
right: unset !important;
}
}
ion-content {
.address-form {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0px;
padding: 10px 16px;
background-color: rgba(var(--ion-background-color-rgb), 0.5) !important;
upp-input {
--upp-input-placeholder: white;
--upp-input-background: transparent;
}
ion-item, > ion-item {
--padding-start: 0px;
--padding-end: 0px;
--background: transparent !important;
ion-icon {
margin-left: 10px;
float: right;
cursor: pointer;
}
}
ion-toolbar {
--background: transparent;
margin-bottom: -10px;
}
ion-button {
text-transform: none !important;
--padding-start: 10px;
--padding-end: 20px;
&.hidden {
display: none !important;
}
}
}
.mapcontainer {
height: 100%;
background-image: url('../../../../assets/image/gmaps.png');
background-color: var(--ion-background-color) !important;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
}