|
|
@@ -6,7 +6,8 @@ import { Router } from '@angular/router';
|
|
|
import { Subject } from 'rxjs';
|
|
|
import { DataTableDirective } from 'angular-datatables';
|
|
|
import { ViewChild } from '@angular/core'
|
|
|
-
|
|
|
+import { CountryISO, PhoneNumberFormat, SearchCountryField } from 'ngx-intl-tel-input';
|
|
|
+import { parsePhoneNumberFromString } from 'libphonenumber-js';
|
|
|
|
|
|
@Component({
|
|
|
selector: 'dvr-contact',
|
|
|
@@ -23,8 +24,11 @@ export class ContactComponent implements OnInit {
|
|
|
selectedCustomerFilter: string = ''; // Holds the name selected in the new filter dropdown
|
|
|
// ... (Your existing properties: dtElement, dtTrigger, contactList, cust_data)
|
|
|
public contactForm !: FormGroup;
|
|
|
+
|
|
|
currentDateData: any = [];
|
|
|
-
|
|
|
+ CountryISO = CountryISO;
|
|
|
+ PhoneNumberFormat = PhoneNumberFormat;
|
|
|
+ SearchCountryField = SearchCountryField;
|
|
|
loginData: any = [];
|
|
|
login_name: any;
|
|
|
last_login_date: any;
|
|
|
@@ -53,8 +57,8 @@ selectedCustomerFilter: string = ''; // Holds the name selected in the new filte
|
|
|
dtOptions = {};
|
|
|
dtTrigger: Subject<any> = new Subject();
|
|
|
|
|
|
- designations = ["Executive","AM","Manager","Senior Manager","GM","AGM","PMO","DVP","AVP","VP","SVP","EVP","Head","CTO","CIO","CISO","CFO","President","Director","Managing Director","CEO"];
|
|
|
- functions = ["Infra","Cloud","Devops","Digital Transformation","Applications","Testing","Vendor Management","Procurement","Finance","Audit","Business Systems","Quality Assurance", "Buiness Solutions Group"];
|
|
|
+ designations = ["Executive","AM","Manager","Senior Manager","GM","AGM","PMO","DVP","AVP","VP","VP 1","VP 2","SVP","SVP 1","SVP 2","EVP","Head","CTO","CIO","CISO","CFO","President","Director","Managing Director","CEO"];
|
|
|
+ functions = ["All", "Infra","Cloud","Devops","Digital Transformation","Applications","Testing","Vendor Management","Procurement","Finance","Audit","Business Systems","Quality Assurance", "Buiness Solutions Group"];
|
|
|
departments = ["IT","Procurement","Finance","Business"];
|
|
|
|
|
|
sucess_flag: boolean = false;
|
|
|
@@ -397,14 +401,14 @@ $(document).on('click', function () {
|
|
|
this.role = this.loginData[0]["role"];
|
|
|
|
|
|
this.contactForm = new FormGroup({
|
|
|
- first_name: new FormControl('', Validators.required),
|
|
|
- last_name: new FormControl('', Validators.required),
|
|
|
- mobile_number: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
|
|
+ first_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
|
|
|
+ last_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
|
|
|
+ mobile_number: new FormControl('', [Validators.required]),
|
|
|
designation: new FormControl(null, Validators.required),
|
|
|
- email_Id: new FormControl('', Validators.required),
|
|
|
+ email_Id: new FormControl('', [Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/), Validators.required]),
|
|
|
department: new FormControl('', Validators.required),
|
|
|
function: new FormControl('', Validators.required),
|
|
|
- mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
|
|
|
+ mob_no: new FormControl('')
|
|
|
})
|
|
|
|
|
|
this.loadData();
|
|
|
@@ -445,17 +449,21 @@ $(document).on('click', function () {
|
|
|
|
|
|
console.log("get from url")
|
|
|
console.log(this.cont_id);
|
|
|
+ const phoneValue = form.value.mobile_number;
|
|
|
+ const formattedPhone = typeof phoneValue === 'object' ? phoneValue.e164Number : phoneValue;
|
|
|
+ const altPhoneValue = form.value.mob_no;
|
|
|
+ const cleanAltMobile = typeof altPhoneValue === 'object' ? altPhoneValue.e164Number : altPhoneValue;
|
|
|
const contactData = {
|
|
|
first_name: form.value.first_name,
|
|
|
last_name: form.value.last_name,
|
|
|
- mobile_no: form.value.mobile_number,
|
|
|
+ mobile_no: formattedPhone,
|
|
|
email_id: form.value.email_Id,
|
|
|
designation: form.value.designation,
|
|
|
department: form.value.department,
|
|
|
function: form.value.function,
|
|
|
contact_for: this.cont_id,
|
|
|
created_by: this.login_id,
|
|
|
- mob_no: form.value.mob_no
|
|
|
+ mob_no: cleanAltMobile
|
|
|
|
|
|
|
|
|
}
|
|
|
@@ -547,18 +555,26 @@ $(document).on('click', function () {
|
|
|
|
|
|
} else {
|
|
|
console.log("getting from dropdown");
|
|
|
-
|
|
|
+ const phoneValue = form.value.mobile_number;
|
|
|
+ const formattedPhone = typeof phoneValue === 'object' ? phoneValue.e164Number : phoneValue;
|
|
|
+ let cleanAltMobile = null;
|
|
|
+ if (form.value.mob_no) {
|
|
|
+ const altPhoneValue = form.value.mob_no;
|
|
|
+ cleanAltMobile = typeof altPhoneValue === 'object' ? altPhoneValue.e164Number : altPhoneValue;
|
|
|
+ }
|
|
|
+ console.log(form.value.mobile_number);
|
|
|
+ console.log(formattedPhone);
|
|
|
const contactData = {
|
|
|
first_name: form.value.first_name,
|
|
|
last_name: form.value.last_name,
|
|
|
- mobile_no: form.value.mobile_number,
|
|
|
+ mobile_no: formattedPhone,
|
|
|
email_id: form.value.email_Id,
|
|
|
designation: form.value.designation,
|
|
|
department: form.value.department,
|
|
|
function: form.value.function,
|
|
|
contact_for: (this.mySelect ? this.mySelect.customer_id : ''),
|
|
|
created_by: this.login_id,
|
|
|
- mob_no: form.value.mob_no
|
|
|
+ mob_no: cleanAltMobile
|
|
|
|
|
|
}
|
|
|
console.log("contactData", contactData);
|
|
|
@@ -593,16 +609,26 @@ $(document).on('click', function () {
|
|
|
this.error_msg = response.data[0].message;
|
|
|
this.checkfirstnm_flag = true;
|
|
|
this.mySelect = "";
|
|
|
+ // this.contactForm = new FormGroup({
|
|
|
+ // first_name: new FormControl('', Validators.required),
|
|
|
+ // last_name: new FormControl('', Validators.required),
|
|
|
+ // mobile_number: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
|
|
+ // designation: new FormControl(null, Validators.required),
|
|
|
+ // email_Id: new FormControl('', Validators.required),
|
|
|
+ // department: new FormControl('', Validators.required),
|
|
|
+ // function: new FormControl('', Validators.required),
|
|
|
+ // mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
|
|
|
+ // })
|
|
|
this.contactForm = new FormGroup({
|
|
|
- first_name: new FormControl('', Validators.required),
|
|
|
- last_name: new FormControl('', Validators.required),
|
|
|
- mobile_number: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
|
|
- designation: new FormControl(null, Validators.required),
|
|
|
- email_Id: new FormControl('', Validators.required),
|
|
|
- department: new FormControl('', Validators.required),
|
|
|
- function: new FormControl('', Validators.required),
|
|
|
- mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
|
|
|
- })
|
|
|
+ first_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
|
|
|
+ last_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
|
|
|
+ mobile_number: new FormControl('', Validators.required),
|
|
|
+ designation: new FormControl(null, Validators.required),
|
|
|
+ email_Id: new FormControl('', [Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/), Validators.required]),
|
|
|
+ department: new FormControl('', Validators.required),
|
|
|
+ function: new FormControl('', Validators.required),
|
|
|
+ mob_no: new FormControl('', Validators.pattern(/^[6-9]\d{4}\s?\d{5}$/))
|
|
|
+ })
|
|
|
// console.log("response.data.message", response.data[0].exception.errorid);
|
|
|
if (response.data[0].exception.errorid != '') {
|
|
|
this.openPopup();
|
|
|
@@ -635,16 +661,26 @@ $(document).on('click', function () {
|
|
|
this.error_msg = response.data[0].message;
|
|
|
this.checkfirstnm_flag = true;
|
|
|
this.mySelect = "";
|
|
|
+ // this.contactForm = new FormGroup({
|
|
|
+ // first_name: new FormControl('', Validators.required),
|
|
|
+ // last_name: new FormControl('', Validators.required),
|
|
|
+ // mobile_number: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
|
|
+ // designation: new FormControl(null, Validators.required),
|
|
|
+ // email_Id: new FormControl('', Validators.required),
|
|
|
+ // department: new FormControl('', Validators.required),
|
|
|
+ // function: new FormControl('', Validators.required),
|
|
|
+ // mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
|
|
|
+ // })
|
|
|
this.contactForm = new FormGroup({
|
|
|
- first_name: new FormControl('', Validators.required),
|
|
|
- last_name: new FormControl('', Validators.required),
|
|
|
- mobile_number: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
|
|
- designation: new FormControl(null, Validators.required),
|
|
|
- email_Id: new FormControl('', Validators.required),
|
|
|
- department: new FormControl('', Validators.required),
|
|
|
- function: new FormControl('', Validators.required),
|
|
|
- mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
|
|
|
- })
|
|
|
+ first_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
|
|
|
+ last_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
|
|
|
+ mobile_number: new FormControl('', Validators.required),
|
|
|
+ designation: new FormControl(null, Validators.required),
|
|
|
+ email_Id: new FormControl('', [Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/), Validators.required]),
|
|
|
+ department: new FormControl('', Validators.required),
|
|
|
+ function: new FormControl('', Validators.required),
|
|
|
+ mob_no: new FormControl('', Validators.pattern(/^[6-9]\d{4}\s?\d{5}$/))
|
|
|
+ })
|
|
|
// console.log("response.data.message", response.data[0].exception.errorid);
|
|
|
if (response.data[0].exception.errorid != '') {
|
|
|
this.openPopup();
|
|
|
@@ -679,6 +715,7 @@ onEditButtonClick() {
|
|
|
updateContact() {
|
|
|
|
|
|
console.log("Updating");
|
|
|
+ console.log(this.contactForm.value);
|
|
|
|
|
|
if (!this.selectedContactId) return;
|
|
|
|
|
|
@@ -686,6 +723,8 @@ updateContact() {
|
|
|
updatedData.contact_id = this.selectedContactId;
|
|
|
updatedData.customer_id = (this.mySelect ? this.mySelect.customer_id : '');
|
|
|
updatedData.updated_by = this.login_id;
|
|
|
+ updatedData.mobile_number = updatedData.mobile_number.e164Number;
|
|
|
+ updatedData.mob_no = updatedData.mob_no.e164Number;
|
|
|
console.log(updatedData);
|
|
|
|
|
|
this.commonservice.updateContact(this.commonservice.projectpath + "/updateContactDetails", updatedData).subscribe(
|
|
|
@@ -712,13 +751,19 @@ updateContact() {
|
|
|
this.isEditMode = true;
|
|
|
this.selectedContactId = contact.contact_id;
|
|
|
console.log(this.selectedContactId);
|
|
|
+ console.log(contact);
|
|
|
+
|
|
|
+ // const phoneValue = contact.mobile_number;
|
|
|
+ // const altPhoneValue = contact.mob_no;
|
|
|
+ const parsedMobile = this.parsePhoneNumberAuto(contact.mobile_number);
|
|
|
+ const parsedAltMobile = this.parsePhoneNumberAuto(contact.mob_no);
|
|
|
|
|
|
this.contactForm.patchValue({
|
|
|
first_name: contact.first_name,
|
|
|
last_name: contact.last_name,
|
|
|
email_Id: contact.email_id,
|
|
|
- mobile_number: contact.mobile_number,
|
|
|
- mob_no: contact.mob_no,
|
|
|
+ mobile_number: parsedMobile,
|
|
|
+ mob_no: parsedAltMobile,
|
|
|
designation: contact.designation,
|
|
|
department: contact.department,
|
|
|
function: contact.function_area
|
|
|
@@ -765,6 +810,12 @@ deleteContact(contact_id: any) {
|
|
|
|
|
|
onReset() {
|
|
|
this.contactForm.reset();
|
|
|
+ const defaultPhone = this.parsePhoneNumberAuto('');
|
|
|
+ console.log(defaultPhone);
|
|
|
+ this.contactForm.patchValue({
|
|
|
+ mobile_number: defaultPhone,
|
|
|
+ mob_no: defaultPhone
|
|
|
+ });
|
|
|
this.isEditMode = false;
|
|
|
}
|
|
|
|
|
|
@@ -803,6 +854,14 @@ rerender(): void {
|
|
|
// console.log("in field", field)
|
|
|
return !this.contactForm.get(field).valid && this.contactForm.get(field).touched;
|
|
|
}
|
|
|
+ isFormValid(): boolean {
|
|
|
+ // if (!this.contactForm.valid) return false;
|
|
|
+
|
|
|
+ if (this.cont_id || this.mySelect) {
|
|
|
+ return this.contactForm.valid;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
displayFieldCss(field: string) {
|
|
|
return {
|
|
|
'has-error': this.isFieldValid(field),
|
|
|
@@ -839,14 +898,52 @@ rerender(): void {
|
|
|
}
|
|
|
|
|
|
|
|
|
- numberOnly(event): boolean {
|
|
|
- const charCode = (event.which) ? event.which : event.keyCode;
|
|
|
- if (charCode > 31 && (charCode < 48 || charCode > 57)) {
|
|
|
+ // numberOnly(event): boolean {
|
|
|
+ // const charCode = (event.which) ? event.which : event.keyCode;
|
|
|
+ // if (charCode > 31 && (charCode < 48 || charCode > 57)) {
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+
|
|
|
+// this.contactForm = this.fb.group({
|
|
|
+// mobile_number: [
|
|
|
+// '',
|
|
|
+// [
|
|
|
+// Validators.required,
|
|
|
+// Validators.pattern(/^[6-9]\d{9}$/) // Indian mobile numbers
|
|
|
+// ]
|
|
|
+// ]
|
|
|
+// });
|
|
|
+
|
|
|
+ numberOnly(event: any): boolean {
|
|
|
+ const charCode = event.which ? event.which : event.keyCode;
|
|
|
+ if (charCode < 48 || charCode > 57) {
|
|
|
+ event.preventDefault();
|
|
|
return false;
|
|
|
}
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
+ getMobileError(field: string) {
|
|
|
+ const control = this.contactForm.get(field);
|
|
|
+
|
|
|
+ if (control.hasError('required')) {
|
|
|
+ return 'Mobile number is required';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (control.hasError('pattern')) {
|
|
|
+ return 'Enter a valid 10-digit mobile number';
|
|
|
+ }
|
|
|
+
|
|
|
+ // The library sets 'validatePhoneNumber' to false if the number is invalid
|
|
|
+ if (control.hasError('validatePhoneNumber')) {
|
|
|
+ return 'Enter a valid mobile number for the selected country';
|
|
|
+ }
|
|
|
+
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+
|
|
|
// Inside your component class
|
|
|
|
|
|
// ✅ NEW FUNCTION FOR CLIENT-SIDE FILTERING
|
|
|
@@ -922,5 +1019,32 @@ modo(value: any) {
|
|
|
localStorage.setItem('contactlastinsert', first_name + ' ' + last_name);
|
|
|
//this.router.navigate(['/dvrentry']);
|
|
|
}
|
|
|
+
|
|
|
+ parsePhoneNumberAuto(phone: string) {
|
|
|
+ if (!phone) return null;
|
|
|
+
|
|
|
+ // 👉 Default fallback country (India)
|
|
|
+ let parsed = parsePhoneNumberFromString(phone, 'IN');
|
|
|
+
|
|
|
+ if (!parsed) {
|
|
|
+ return {
|
|
|
+ number: phone,
|
|
|
+ internationalNumber: '',
|
|
|
+ nationalNumber: phone,
|
|
|
+ e164Number: phone,
|
|
|
+ countryCode: 'IN',
|
|
|
+ dialCode: '+91'
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ number: parsed.nationalNumber,
|
|
|
+ internationalNumber: parsed.formatInternational(),
|
|
|
+ nationalNumber: parsed.nationalNumber,
|
|
|
+ e164Number: parsed.number, // always E.164
|
|
|
+ countryCode: parsed.country, // 🔥 auto-detected
|
|
|
+ dialCode: '+' + parsed.countryCallingCode
|
|
|
+ };
|
|
|
+ }
|
|
|
}
|
|
|
|
Devansh Vakharia