CarlosTorres/Jobhero_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Mejoras en formulario hero, estilos globales y OneSignal

Browse Source 
- Formulario hero: validación por campo con estado touched/submitted,
  mensajes de error inline, máscara de moneda en cuota, autocomplete
  flotante para dirección y categorías con clearInput, chips para
  categorías y palabras clave, campos banco/CLABE/RFC
- Estilos globales: border-radius y sombra en ion-button, borde para
  botones light sobre fondo claro, sin borde en toolbars de color
- OneSignal: reescritura del servicio con login/logout, addTag y
  routing por título de notificación usando NgZone
- FAQ: color primary en acordeón activo/desplegado

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Carlos
2026-06-16 21:23:13 -06:00
parent 9f2a0d62e0
commit 0efe318db3
6 changed files with 302 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/app/pages/hero/hero.page.ts
View File

@@ -1,6 +1,8 @@
import { Component, OnInit, NgZone } from '@angular/core';
import { NavController, LoadingController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { TranslateService } from '@ngx-translate/core';
import { LanguageService } from 'src/app/services/language.service';
import { IchambaService } from 'src/app/services/ichamba.service';
import { AlertService } from 'src/app/services/alert.service';
@@ -10,6 +12,7 @@ declare var google: any;
selector: 'app-hero',
templateUrl: './hero.page.html',
styleUrls: ['./hero.page.scss'],
standalone: false
})
export class HeroPage implements OnInit {
@@ -25,19 +28,29 @@ export class HeroPage implements OnInit {
myPosition: any = {};
myAddress: string | null = null;
myIntnumber: string | null = null;
banks: any[] = [];
reference: string | null = null;
name: string | null = null;
rfc: string | null = null;
selectedBank: number | null = null;
bankAccount: number | null = null;
fee: number | null = null;
feeDisplay: string = '';
selectedReference: number = 0;
addressAutocomplete: string = '';
placesSearch: any = '';
showinput: boolean = false;
showif = true;
submitted: boolean = false;
touched: { [key: string]: boolean } = {};
constructor(
private navCtrl: NavController,
private loadingCtrl: LoadingController,
private authService: AuthService,
private alertService: AlertService,
private translateService: TranslateService,
private languageService: LanguageService,
private ichambaService: IchambaService,
private ngZone: NgZone,
) { }
@@ -48,6 +61,10 @@ export class HeroPage implements OnInit {
this.categories = categories;
this.filteredCategories = categories;
})
this.ichambaService.getBanks()
.subscribe( banks => {
this.banks = banks;
})
}
// ========== CATEGORÍAS CON CHIPS ==========
@@ -82,19 +99,16 @@ export class HeroPage implements OnInit {
this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
}
showCategoryList() {
this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
this.showCategoryDropdown = true;
}
hideCategoryList() {
setTimeout(() => {
this.showCategoryDropdown = false;
this.touched['categories'] = true;
}, 200);
}
// ========== PALABRAS CLAVE CON CHIPS ==========
addKeyword(event?: any) {
this.touched['keywords'] = true;
const value = this.keywordInput?.trim();
if (value && value.length > 0) {
// Separar por comas si hay varias palabras
@@ -112,6 +126,8 @@ export class HeroPage implements OnInit {
if (event.key === 'Enter' || event.key === ',') {
event.preventDefault();
this.addKeyword();
} else if (event.key === 'Backspace' && !this.keywordInput && this.keywords.length > 0) {
this.keywords.pop();
}
}
@@ -123,92 +139,105 @@ export class HeroPage implements OnInit {
}
dismissHero() {
this.navCtrl.navigateRoot('/landing');
this.navCtrl.navigateRoot('/dashboard');
}
autocomplete(ev: any) {
if (!this.addressAutocomplete.trim().length) {
const value = (ev.detail?.value ?? this.addressAutocomplete).trim();
this.myAddress = null;
if (!value.length) {
this.placesSearch = null;
return;
}
console.log(this.addressAutocomplete)
new google.maps.places.AutocompleteService().getPredictions({ input: this.addressAutocomplete }, predictions => {
new google.maps.places.AutocompleteService().getPredictions({ input: value }, (predictions: any) => {
this.ngZone.run(() => {
this.placesSearch = predictions;
console.log(predictions);
});
});
}
geoloc(place_id: string, place_description: string, place_intnumber: string) {
this.myAddress = place_description;
this.addressAutocomplete = place_description;
this.myIntnumber = place_intnumber;
console.log(place_id);
this.placesSearch = null;
this.hidelist();
new google.maps.Geocoder().geocode({ placeId: place_id }, coordinates => {
new google.maps.Geocoder().geocode({ placeId: place_id }, (coordinates: any) => {
this.ngZone.run(() => {
console.log(coordinates[0].geometry.location.lat() + ", " + coordinates[0].geometry.location.lng());
const result = coordinates[0];
this.myPosition = {
latitude: coordinates[0].geometry.location.lat(),
longitude: coordinates[0].geometry.location.lng()
}
latitude: result.geometry.location.lat(),
longitude: result.geometry.location.lng()
};
});
});
}
selected_reference(ev: any) {
console.log(ev.target.value);
this.selectedReference = ev.target.value;
if (this.selectedReference == 5) {
this.showinput = true;
} else {
this.showinput = false;
}
this.showinput = ev.detail.value === 5;
}
onFeeInput(ev: any) {
const raw = (ev.detail?.value ?? '').replace(/[^0-9.]/g, '');
const parts = raw.split('.');
const integer = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
const decimal = parts.length > 1 ? '.' + parts[1].slice(0, 2) : '';
this.feeDisplay = raw ? `$${integer}${decimal}` : '';
this.fee = raw ? parseFloat(raw) : null;
}
addHero(){
// Preparar categorías y keywords
this.submitted = true;
const categoriesString = this.categories_input.join(',');
const keywordsString = this.keywords.length > 0 ? this.keywords.join(', ') : null;
const keywordsString = this.keywords.length > 0 ? this.keywords.join(', ') : '';
if (this.name && this.categories_input.length > 0 && this.myAddress && this.myPosition.latitude && this.myPosition.longitude && this.selectedReference){
if (this.selectedReference == 5 && this.reference) {
this.loadingCtrl.create().then((overlay) => {
this.loading = overlay;
this.loading.present();
});
this.ichambaService.addHero(this.name, categoriesString, keywordsString, this.myAddress, this.myPosition.latitude, this.myPosition.longitude, this.selectedReference, this.reference).subscribe(
data => {
this.loading.dismiss();
this.alertService.presentToast(data['message']);
this.navCtrl.navigateRoot('/dashboard');
}, error => {
this.loading.dismiss();
this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
});
} else if (this.selectedReference !== 5) {
this.loadingCtrl.create().then((overlay) => {
this.loading = overlay;
this.loading.present();
});
this.ichambaService.addHero(this.name, categoriesString, keywordsString, this.myAddress, this.myPosition.latitude, this.myPosition.longitude, this.selectedReference, this.reference).subscribe(
data => {
this.loading.dismiss();
this.alertService.presentToast(data['message']);
this.navCtrl.navigateRoot('/dashboard');
}, error => {
this.loading.dismiss();
this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
});
} else {
if (
this.name &&
this.rfc &&
this.categories_input.length > 0 &&
this.myAddress &&
this.myPosition.latitude &&
this.myPosition.longitude &&
this.selectedBank !== null &&
this.bankAccount &&
this.fee !== null &&
this.selectedReference
) {
if (this.selectedReference === 5 && !this.reference) {
this.alertService.presentToast("Por favor, específique cómo supo de nosotros");
return;
}
this.loadingCtrl.create().then((overlay) => {
this.loading = overlay;
this.loading.present();
});
this.ichambaService.addHero(this.name!, this.rfc!, categoriesString, keywordsString, this.myAddress!, this.myPosition.latitude, this.myPosition.longitude, this.selectedBank ?? 0, this.bankAccount ?? 0, this.fee ?? 0, this.selectedReference, this.reference ?? '').subscribe(
(data: any) => {
if (this.loading) this.loading.dismiss();
this.alertService.presentToast(data['message']);
this.navCtrl.navigateRoot('/dashboard');
}, (error: any) => {
if (this.loading) this.loading.dismiss();
this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
});
} else {
this.alertService.presentToast("Llene todos los datos solicitados");
}
}
markTouched(field: string) {
this.touched[field] = true;
}
blurAddressList() {
setTimeout(() => {
this.hidelist();
this.touched['address'] = true;
}, 200);
}
showlist() {
this.showif = true;
}