projects/maplander/shared/src/lib/components/address/address.component.ts
| selector | lib-location-address |
| styleUrls | ./address.component.scss |
| templateUrl | ./address.component.html |
Properties |
|
Methods |
constructor(_data: Address, _dialogRef: MatDialogRef
|
||||||||||||
|
Parameters :
|
| Public accept | ||||||
accept(data: any)
|
||||||
|
Parameters :
Returns :
void
|
| Private buildForm |
buildForm()
|
|
Returns :
void
|
| Public close |
close()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public addressForm |
Type : FormGroup
|
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import {FormBuilder, FormGroup} from '@angular/forms';
import {Address, DialogResponse, DialogResponseType} from '@maplander/types';
@Component({
selector: 'lib-location-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.scss']
})
export class AddressComponent implements OnInit {
public addressForm: FormGroup;
constructor(
@Inject(MAT_DIALOG_DATA) private _data: Address,
private _dialogRef: MatDialogRef<AddressComponent>,
private _formBuilder: FormBuilder
) {
}
ngOnInit() {
this.buildForm();
}
public accept(data: any): void {
this._data = new Address({
city: data.city,
colony: data.colony,
country: data.country,
postalCode: data.postalCode,
location: this._data.location,
publicLocation: this._data.publicLocation,
state: data.state,
street: data.street,
interiorNumber: data.interior,
lt: data.lt,
mz: data.mz,
outdoorNumber: data.exterior,
township: data.township,
visible: true
});
this._dialogRef.close({code: DialogResponseType.ACCEPT, data: this._data} as DialogResponse<Address>);
}
public close(): void {
this._dialogRef.close({code: DialogResponseType.CANCEL} as DialogResponse<Address>);
}
private buildForm(): void {
this.addressForm = this._formBuilder.group({
country: [this._data.country || ''],
postalCode: [this._data.postalCode || ''],
city: [this._data.city || ''],
state: [this._data.state || ''],
colony: [this._data.colony || ''],
street: [this._data.street || ''],
township: [this._data.township || ''],
mz: [this._data.mz || ''],
lt: [this._data.lt || ''],
interior: [this._data.interiorNumber || ''],
exterior: [this._data.outdoorNumber || '']
});
}
}
<div class="location-address">
<form [formGroup]="addressForm" (ngSubmit)="accept(addressForm.value)">
<h2 mat-dialog-title>¿La dirección es correcta?</h2>
<p class="location-address__info">
<mat-icon class="info__icon">info</mat-icon> Si automáticamente no se muestra la dirección correcta <br>
y el marcador está bien colocado, puede hacer cambios manuales.
</p>
<mat-dialog-content class="location-address__content">
<div class="content__row">
<mat-form-field class="row__col">
<input title="Country" formControlName="country" matInput="" placeholder="País">
</mat-form-field>
<mat-form-field class="row__col">
<input title="Postal code" formControlName="postalCode" matInput="" placeholder="Código postal">
</mat-form-field>
</div>
<div class="content__row">
<mat-form-field class="row__col">
<input title="State" formControlName="state" matInput="" placeholder="Entidad federativa">
</mat-form-field>
<mat-form-field class="row__col">
<input title="City" formControlName="city" matInput="" placeholder="Ciudad">
</mat-form-field>
</div>
<div class="content__row">
<mat-form-field class="row__col">
<input title="City" formControlName="township" matInput="" placeholder="Delegación/Municipio">
</mat-form-field>
<mat-form-field class="row__col">
<input title="Colony" formControlName="colony" matInput="" placeholder="Colonia">
</mat-form-field>
</div>
<div class="content__row">
<mat-form-field class="row__col">
<input title="Street" formControlName="street" matInput="" placeholder="Vialidad">
</mat-form-field>
<mat-form-field class="row__col">
<input title="Mz" formControlName="mz" matInput="" placeholder="Manzana">
</mat-form-field>
</div>
<div class="content__row">
<mat-form-field class="row__col">
<input title="Lt" formControlName="lt" matInput="" placeholder="Lote">
</mat-form-field>
<mat-form-field class="row__col">
<input title="Ext number" formControlName="exterior" matInput="" placeholder="Numero exterior">
</mat-form-field>
</div>
<div class="content__row">
<mat-form-field class="row__col">
<input title="Int number" formControlName="interior" matInput="" placeholder="Numero interior">
</mat-form-field>
</div>
</mat-dialog-content>
<mat-dialog-actions class="location-address__actions">
<button (click)="close()" type="button" mat-flat-button="" color="primary">REUBICAR</button>
<button mat-flat-button="" color="primary">SÍ</button>
</mat-dialog-actions>
</form>
</div>
./address.component.scss
::ng-deep .dialog_location_address {
max-height: 70vh !important;
}
.location-address {
padding: 16px;
box-sizing: border-box;
}
.content__row {
display: flex;
justify-content: space-between;
}
.row__col {
width: 48%;
}
.location-address__info {
font-size: 12px;
}
.info__icon {
font-size: 12px;
width: 12px;
height: 12px;
}
.location-address__actions {
justify-content: flex-end;
}