|
|
@@ -19,7 +19,9 @@ export class ContactComponent implements OnInit {
|
|
|
@ViewChild(DataTableDirective, { static: false })
|
|
|
dtElement: DataTableDirective;
|
|
|
|
|
|
-
|
|
|
+// Inside your component class
|
|
|
+selectedCustomerFilter: string = ''; // Holds the name selected in the new filter dropdown
|
|
|
+// ... (Your existing properties: dtElement, dtTrigger, contactList, cust_data)
|
|
|
public contactForm !: FormGroup;
|
|
|
currentDateData: any = [];
|
|
|
|
|
|
@@ -34,7 +36,8 @@ export class ContactComponent implements OnInit {
|
|
|
contnav_flag: boolean = false;
|
|
|
mySelect: any;
|
|
|
cont_id: any;
|
|
|
-
|
|
|
+ isEditMode: boolean = false;
|
|
|
+ selectedContactId: number | null = null;
|
|
|
checkfirstnm_flag: boolean = false;
|
|
|
checklastnm_flag: boolean = false;
|
|
|
checkmobilleno_flag: boolean = false;
|
|
|
@@ -77,14 +80,68 @@ export class ContactComponent implements OnInit {
|
|
|
ordering: false,
|
|
|
dom: 'Blfrtip',
|
|
|
|
|
|
+ // Use initComplete to manipulate the DOM after DataTables is ready
|
|
|
+ initComplete: function (settings: any, json: any) {
|
|
|
+
|
|
|
+ // Get the DataTables API instance
|
|
|
+ const api = new $.fn.dataTable.Api(settings);
|
|
|
+ const filterContainer = document.querySelector('.dataTables_filter');
|
|
|
+ const dropdown = document.getElementById('customer-filter-container');
|
|
|
+
|
|
|
+ if (filterContainer && dropdown) {
|
|
|
+ dropdown.style.display = 'inline-block'; // Align nicely
|
|
|
+ filterContainer.insertBefore(dropdown, filterContainer.firstChild);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // // 1. Find the search input element created by DataTables
|
|
|
+ // const searchInput = $(api.table().container()).find('.dataTables_filter');
|
|
|
+
|
|
|
+ // // 2. Find your placeholder div
|
|
|
+ // const customFilterHtml = $('#CustomerFilterContainer').html();
|
|
|
+
|
|
|
+ // // 3. Prepend your filter container's content (the dropdown) to the search div
|
|
|
+ // // You'll need to create the container HTML (step 3)
|
|
|
+ // // For now, let's use the standard search input parent.
|
|
|
+
|
|
|
+ // // Find the main filter div (which contains the label and input)
|
|
|
+ // const filterWrapper = $(api.table().container()).find('.dataTables_filter').parent();
|
|
|
+
|
|
|
+ // // 4. Insert the new dropdown HTML before the search box wrapper
|
|
|
+ // // NOTE: Replace the placeholder ID with the actual HTML of your filter dropdown
|
|
|
+ // // This assumes you rendered the filter HTML somewhere else and are moving it.
|
|
|
+
|
|
|
+ // // Since it's complex to move Angular components with jQuery, a simpler client-side filter is usually done by:
|
|
|
+
|
|
|
+ // // Get the original placeholder element
|
|
|
+ // const placeholder = $('#custom-filter-placeholder');
|
|
|
+
|
|
|
+ // // Get the search wrapper
|
|
|
+ // const searchWrapper = $(api.table().container()).find('.dataTables_filter');
|
|
|
+
|
|
|
+ // // Move the HTML content from the placeholder into the search wrapper.
|
|
|
+ // // You'll need to render the Angular select box outside and move it, OR
|
|
|
+ // // use an Angular ViewChild to access the native element.
|
|
|
+
|
|
|
+ // // --- RECOMMENDED ANGULAR APPROACH ---
|
|
|
+ // // Access the native search input and inject the filter HTML *before* it.
|
|
|
+ // // This requires access to the 'this' context, so use an arrow function.
|
|
|
+ },
|
|
|
+
|
|
|
buttons: [
|
|
|
{
|
|
|
extend: 'print',
|
|
|
- title: 'Contact Details Reports'
|
|
|
+ title: 'Contact Details Reports',
|
|
|
+ exportOptions: {
|
|
|
+ columns: ':not(.no-export)'
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
extend: 'excelHtml5',
|
|
|
- title: 'Contact Details Reports'
|
|
|
+ title: 'Contact Details Reports',
|
|
|
+ exportOptions: {
|
|
|
+ columns: ':not(.no-export)'
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
]
|
|
|
@@ -150,41 +207,14 @@ export class ContactComponent implements OnInit {
|
|
|
|
|
|
}
|
|
|
|
|
|
- ngOnInit() {
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- this.contactList = [];
|
|
|
-
|
|
|
-
|
|
|
- this.loginData.push(JSON.parse(localStorage.getItem("loginData")));
|
|
|
- console.log("", this.loginData[0]["user_name"]);
|
|
|
- this.login_name = this.loginData[0]["user_name"];
|
|
|
- this.last_login_date = this.loginData[0]["last_loginDate"];
|
|
|
- this.login_id = this.loginData[0]["user_id"];
|
|
|
- this.role = this.loginData[0]["role"];
|
|
|
-
|
|
|
- if (this.cont_name) {
|
|
|
+ loadData() {
|
|
|
+ if (this.cont_name) {
|
|
|
console.log("in if")
|
|
|
this.contnav_flag = true;
|
|
|
|
|
|
} else {
|
|
|
this.contnav_flag = false;
|
|
|
- // this.commonservice.getAllData(this.commonservice.projectpath + "/getcontactdetails?role=" + this.role + "&login_id=" + this.login_id).subscribe(response => {
|
|
|
- // if (response.status == 'falsetoken') {
|
|
|
- // this.router.navigate(['/login'])
|
|
|
- // } else {
|
|
|
- // this.contactList = response.data[0].conrtactData;
|
|
|
- // console.log("aaaaaaaaaaa------------>", this.contactList);
|
|
|
- // this.dtTrigger.next(this.dtOptions)
|
|
|
-
|
|
|
- // }
|
|
|
- // });
|
|
|
|
|
|
this.commonservice.getAllData(this.commonservice.projectpath + "/getcustcontactdetails?customer_id=0&passid=number").subscribe(response => {
|
|
|
if (response.status == 'falsetoken') {
|
|
|
@@ -192,8 +222,33 @@ export class ContactComponent implements OnInit {
|
|
|
} else {
|
|
|
this.contactList = response.data[0].conrtactData;
|
|
|
console.log("aaaaaaaaaaa------------>", this.contactList);
|
|
|
- this.dtTrigger.next(this.dtOptions)
|
|
|
-
|
|
|
+ // this.dtTrigger.next(this.dtOptions);
|
|
|
+ this.rerender();
|
|
|
+
|
|
|
+ // 4. 🔥 NEW STEP: Move the filter after a short delay to ensure DataTables is done
|
|
|
+ // setTimeout(() => {
|
|
|
+ // // Find the DataTables filter search box wrapper
|
|
|
+ // const dtFilterWrapper = $('.dataTables_filter');
|
|
|
+
|
|
|
+ // // Get the HTML content of the filter dropdown you rendered elsewhere
|
|
|
+ // const filterToMove = $('#filter-to-move').html();
|
|
|
+
|
|
|
+ // if (dtFilterWrapper.length > 0) {
|
|
|
+ // // Insert the HTML content BEFORE the DataTables search box
|
|
|
+ // dtFilterWrapper.prepend(filterToMove);
|
|
|
+
|
|
|
+ // // Re-bind the Angular function to the newly moved element
|
|
|
+ // // NOTE: This requires you to ensure the (ngModelChange) binding still works
|
|
|
+ // // on the dynamically moved element, which might need Angular's Renderer2.
|
|
|
+ // // For quick jQuery fix, you'd need to re-bind the change event manually here.
|
|
|
+
|
|
|
+ // // --- QUICK FIX: Manual Change Event Re-binding ---
|
|
|
+ // $('#CustomerFilter').on('change', (e) => {
|
|
|
+ // this.selectedCustomerFilter = $(e.target).val() as string;
|
|
|
+ // this.filterByCustomerName();
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // }, 100); // Small delay
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
@@ -208,8 +263,20 @@ export class ContactComponent implements OnInit {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ }
|
|
|
+
|
|
|
+ ngOnInit() {
|
|
|
|
|
|
+ this.contactList = [];
|
|
|
+
|
|
|
+
|
|
|
|
|
|
+ this.loginData.push(JSON.parse(localStorage.getItem("loginData")));
|
|
|
+ console.log("", this.loginData[0]["user_name"]);
|
|
|
+ this.login_name = this.loginData[0]["user_name"];
|
|
|
+ this.last_login_date = this.loginData[0]["last_loginDate"];
|
|
|
+ this.login_id = this.loginData[0]["user_id"];
|
|
|
+ this.role = this.loginData[0]["role"];
|
|
|
|
|
|
this.contactForm = new FormGroup({
|
|
|
first_name: new FormControl('', Validators.required),
|
|
|
@@ -221,10 +288,18 @@ export class ContactComponent implements OnInit {
|
|
|
function: new FormControl('', Validators.required),
|
|
|
mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
|
|
|
})
|
|
|
+
|
|
|
+ this.loadData();
|
|
|
}
|
|
|
+
|
|
|
|
|
|
contactData(form: FormGroup) {
|
|
|
|
|
|
+ console.log(this.isEditMode);
|
|
|
+ if (this.isEditMode) {
|
|
|
+ console.log("EDITING");
|
|
|
+ return;
|
|
|
+ }
|
|
|
this.msg = "";
|
|
|
|
|
|
console.log("first name", form.value.first_name);
|
|
|
@@ -251,6 +326,7 @@ export class ContactComponent implements OnInit {
|
|
|
if (this.cont_name) {
|
|
|
|
|
|
console.log("get from url")
|
|
|
+ console.log(this.cont_id);
|
|
|
const contactData = {
|
|
|
first_name: form.value.first_name,
|
|
|
last_name: form.value.last_name,
|
|
|
@@ -476,17 +552,131 @@ export class ContactComponent implements OnInit {
|
|
|
|
|
|
}
|
|
|
|
|
|
+onEditButtonClick() {
|
|
|
+ if (this.isEditMode) {
|
|
|
+ this.updateContact();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+updateContact() {
|
|
|
+
|
|
|
+ console.log("Updating");
|
|
|
+
|
|
|
+ if (!this.selectedContactId) return;
|
|
|
+
|
|
|
+ const updatedData = this.contactForm.value;
|
|
|
+ updatedData.contact_id = this.selectedContactId;
|
|
|
+ updatedData.customer_id = (this.mySelect ? this.mySelect.customer_id : '');
|
|
|
+ updatedData.updated_by = this.login_id;
|
|
|
+ console.log(updatedData);
|
|
|
+
|
|
|
+ this.commonservice.updateContact(this.commonservice.projectpath + "/updateContactDetails", updatedData).subscribe(
|
|
|
+ response => {
|
|
|
+ if (response.status == 'tokenfalse') {
|
|
|
+ this.router.navigate(['/login'])
|
|
|
+ }
|
|
|
+ else if (response.updateContactStatus == 0) {
|
|
|
+ console.log("Contact Updated");
|
|
|
+ alert("Contact updated successfully!");
|
|
|
+ this.isEditMode = false;
|
|
|
+ this.selectedContactId = null;
|
|
|
+ this.contactForm.reset();
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ const msg = response.message || response.errors;
|
|
|
+ alert("Error updating contact! " + msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+ editContact(contact: any) {
|
|
|
+ this.isEditMode = true;
|
|
|
+ this.selectedContactId = contact.contact_id;
|
|
|
+ console.log(this.selectedContactId);
|
|
|
+
|
|
|
+ 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,
|
|
|
+ designation: contact.designation,
|
|
|
+ department: contact.department,
|
|
|
+ function: contact.function_area
|
|
|
+ });
|
|
|
+
|
|
|
+ const nameToSelect = contact.customer_name;
|
|
|
+ const selected = this.cust_data.find(c => c.customer_name === nameToSelect);
|
|
|
+ console.log(selected);
|
|
|
+
|
|
|
+ if (selected) {
|
|
|
+ this.mySelect = selected;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Scroll to top where the form is
|
|
|
+ window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
|
+}
|
|
|
+
|
|
|
+deleteContact(contact_id: any) {
|
|
|
+ console.log(contact_id);
|
|
|
+ // deleteData.updated_by = this.login_id;
|
|
|
+ // deleteData.contact_id = this.selectedContactId;
|
|
|
+ if (confirm("Are you sure you want to delete this contact?")) {
|
|
|
+ this.commonservice.deleteContact(this.commonservice.projectpath + "/deleteContactDetails", this.login_id, contact_id).subscribe(
|
|
|
+ response => {
|
|
|
+ if (response.status == 'tokenfalse') {
|
|
|
+ this.router.navigate(['/login'])
|
|
|
+ }
|
|
|
+ else if (response.deleteContactStatus == 0) {
|
|
|
+ console.log("Contact Deleted");
|
|
|
+ alert("Contact deleted successfully!");
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ const msg = response.message || response.errors;
|
|
|
+ alert("Error updating contact! " + msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
resetForm() {
|
|
|
this.msg = "";
|
|
|
}
|
|
|
|
|
|
+ onReset() {
|
|
|
+ this.contactForm.reset();
|
|
|
+ this.isEditMode = false;
|
|
|
+}
|
|
|
+
|
|
|
+rerender(): void {
|
|
|
+ // 1. Check if the DataTables instance exists
|
|
|
+ if (this.dtElement && this.dtElement.dtInstance) { // Added check for dtElement itself
|
|
|
+ this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
|
|
|
+ // 2. **DESTROY:** Destroy the existing table instance
|
|
|
+ dtInstance.destroy();
|
|
|
+
|
|
|
+ // 3. **TRIGGER:** Call .next() on the trigger subject
|
|
|
+ // to re-initialize the table with the new data source.
|
|
|
+ this.dtTrigger.next(null);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // If the table hasn't been rendered yet, just trigger the first render
|
|
|
+ this.dtTrigger.next(null);
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
onBack() {
|
|
|
console.log("back dvr page");
|
|
|
this.router.navigate(['/dvrentry'])
|
|
|
}
|
|
|
|
|
|
+ ngOnDestroy(): void {
|
|
|
+ // Essential to prevent memory leaks with RxJS Subject
|
|
|
+ this.dtTrigger.unsubscribe();
|
|
|
+}
|
|
|
+
|
|
|
clearForm() {
|
|
|
// this.form.reset();
|
|
|
}
|
|
|
@@ -538,71 +728,74 @@ export class ContactComponent implements OnInit {
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
- modo(value: any) {
|
|
|
- this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
|
|
|
- // Destroy the table first
|
|
|
- dtInstance.destroy();
|
|
|
- // Call the dtTrigger to rerender again
|
|
|
- });
|
|
|
-
|
|
|
- console.log("data---->", value);
|
|
|
- console.log("customer_id", value.customer_id);
|
|
|
-
|
|
|
- var id;
|
|
|
- if (value.customer_id != undefined) {
|
|
|
- console.log("specific customer contact");
|
|
|
- id = parseInt(value.customer_id);
|
|
|
- console.log("parseInt", typeof (id));
|
|
|
+ // Inside your component class
|
|
|
+
|
|
|
+// ✅ NEW FUNCTION FOR CLIENT-SIDE FILTERING
|
|
|
+filterByCustomerName(): void {
|
|
|
+ if (this.dtElement && this.dtElement.dtInstance) {
|
|
|
+ this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
|
|
|
+
|
|
|
+ const filterValue = this.selectedCustomerFilter;
|
|
|
+ const customerNameColumnIndex = this.role === 'admin' ? 1 : 0; // Index 1 is 'Customer Name' based on your template
|
|
|
+
|
|
|
+ // Use DataTables API to search the specific column
|
|
|
+ dtInstance
|
|
|
+ .column(customerNameColumnIndex)
|
|
|
+ .search(filterValue)
|
|
|
+ .draw();
|
|
|
+
|
|
|
+ console.log(`Table filtered by Customer Name: ${filterValue}`);
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+// ❌ MODIFIED modo() - REMOVE ALL DATATABLES/API LOGIC
|
|
|
+modo(value: any) {
|
|
|
+ // Keep only the logic related to the form/flags (e.g., cont_name, contnav_flag)
|
|
|
+
|
|
|
+ // Check if the value is being used for other purposes (like form setup)
|
|
|
+ if (value && value.customer_id != undefined) {
|
|
|
+ console.log("Customer selected for form context.");
|
|
|
} else {
|
|
|
- console.log("in all customer data");
|
|
|
- id = value;
|
|
|
+ console.log("All customers selected for form context.");
|
|
|
}
|
|
|
|
|
|
+ this.mySelect = value;
|
|
|
+ console.log(this.mySelect);
|
|
|
+
|
|
|
+ // Do NOT call API, destroy table, or call dtTrigger.next() here.
|
|
|
+ // The table data is now handled by loadData() once.
|
|
|
+}
|
|
|
|
|
|
-
|
|
|
- this.commonservice.getAllData(this.commonservice.projectpath + "/getcustcontactdetails?customer_id=" + id + "&passid=number").subscribe(response => {
|
|
|
- if (response.status == 'falsetoken') {
|
|
|
- this.router.navigate(['/login'])
|
|
|
- } else {
|
|
|
-
|
|
|
- this.dtTrigger.next(this.dtOptions)
|
|
|
-
|
|
|
- //console.log("check length",response.data[0]);
|
|
|
- if (response.data[0].getdvrDataStatus == '1') {
|
|
|
- //data not found
|
|
|
- this.contactList = [];
|
|
|
- console.log("in dataa not found");
|
|
|
- $(document).ready(function () {
|
|
|
- $('.odd').show();
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- } else {
|
|
|
- console.log("in data");
|
|
|
-
|
|
|
- this.contactList = response.data[0].conrtactData;
|
|
|
- //this.dtTrigger1.next(this.dtOptions1)
|
|
|
-
|
|
|
- // document.getElementById("myH1").style.display = "none";
|
|
|
-
|
|
|
- $(document).ready(function () {
|
|
|
- $('.odd').hide()
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- console.log("aaaaaaaaaaa", this.contactList);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
+// modo(value: any) {
|
|
|
+// var id;
|
|
|
+// // Determine the customer ID
|
|
|
+// if (value && value.customer_id != undefined) {
|
|
|
+// id = parseInt(value.customer_id);
|
|
|
+// } else {
|
|
|
+// id = 0; // Assuming '0' is the value for 'All'
|
|
|
+// }
|
|
|
+
|
|
|
+// // 1. Call the API to get the new, filtered data
|
|
|
+// this.commonservice.getAllData(this.commonservice.projectpath + "/getcustcontactdetails?customer_id=" + id + "&passid=number").subscribe(response => {
|
|
|
+// if (response.status == 'falsetoken') {
|
|
|
+// this.router.navigate(['/login']);
|
|
|
+// } else {
|
|
|
+// // 2. Assign the new data
|
|
|
+// if (response.data[0].getdvrDataStatus == '1') {
|
|
|
+// this.contactList = [];
|
|
|
+// } else {
|
|
|
+// this.contactList = response.data[0].conrtactData;
|
|
|
+// }
|
|
|
+
|
|
|
+// // 3. 🔥 CALL THE ROBUST RERENDER METHOD
|
|
|
+// this.rerender(); // This handles the destroy and re-trigger
|
|
|
+// }
|
|
|
+// });
|
|
|
+
|
|
|
+// // ❌ REMOVE THE DESTROY CALLS OUTSIDE THE SUBSCRIBE
|
|
|
+// // ❌ REMOVE THE dtTrigger.next(this.dtOptions) INSIDE THE SUBSCRIBE
|
|
|
+// }
|
|
|
|
|
|
|
|
|
getContactName(first_name: any, last_name: any) {
|
Devansh Vakharia