Procházet zdrojové kódy

contact, customer pages updated with update functions

Devansh Vakharia před 2 týdny
rodič
revize
0da5dbb6f8

+ 2 - 2
src/app/contact/contact.component.html

@@ -271,7 +271,7 @@
             </button>
         </div>
 
-        <div class="col-lg-1 col-sm-12 col-md-2" style="margin-bottom:6px; margin-right: 12px;">
+        <div class="col-lg-1 col-sm-12 col-md-2" style="margin-bottom:6px;">
             <!-- SAVE / SUBMIT BUTTON -->
             <input class="submitbutton" 
                    type="submit" 
@@ -279,7 +279,7 @@
                    [style.background-color]="!isEditMode ? '#f9b523' : 'grey'" />
         </div>
 
-        <div class="col-lg-1 col-sm-12 col-md-2" style="margin-bottom:6px;">
+        <div class="col-lg-1 col-sm-12 col-md-2">
             <input class="cancelbutton" type="reset" value="reset"
                    (click)="onReset()">
         </div>

+ 2 - 1
src/app/contact/contact.component.ts

@@ -728,10 +728,11 @@ rerender(): void {
     this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
       // 2. **DESTROY:** Destroy the existing table instance
       dtInstance.destroy();
+      window.location.reload();
       
       // 3. **TRIGGER:** Call .next() on the trigger subject 
       //    to re-initialize the table with the new data source.
-      this.dtTrigger.next(null);
+      // this.dtTrigger.next(null);
     });
   } else {
     // If the table hasn't been rendered yet, just trigger the first render

+ 34 - 0
src/app/customer/customer.component.css

@@ -45,4 +45,38 @@ border-color: #cacdd1 !important;
 }
 th{background: #ffe8cb !important;}
 
+.add-panel {
+  position: fixed;
+  top: 0;
+  right: -400px;
+  width: 380px;
+  height: 100%;
+  background: #ffffff;
+  box-shadow: -4px 0 10px rgba(0,0,0,0.2);
+  transition: right 0.3s ease-in-out;
+  z-index: 1050;
+}
+
+.add-panel.open {
+  right: 0;
+}
+
+.add-panel-header {
+  padding: 15px;
+  background: #f9b523;
+  color: #000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.add-panel-body {
+  padding: 20px;
+}
 
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 22px;
+  cursor: pointer;
+}

+ 109 - 16
src/app/customer/customer.component.html

@@ -67,6 +67,24 @@
                                         </app-field-error-display>
                                     </div>
 
+                                </div>
+
+                                 <div class="col-lg-6">
+                                    <div class="form-group" [ngClass]="displayFieldCss('status')">
+                                        <!-- <input type="text" class="form-control " formControlName='status'
+                                            name="status" id="status" style="margin-top:0px"> -->
+                                        <select class="form-control" formControlName='status' style="margin-top: 0px;">
+                                            <option>Active</option>
+                                            <option>Inactive</option>
+                                            <option>Ongoing</option>
+                                        </select>
+                                            
+                                        <label for="user" class="animated-label">Status</label>
+                                        <app-field-error-display [displayError]="isFieldValid('status')"
+                                            errorMsg="Please enter Customer Status">
+                                        </app-field-error-display>
+                                    </div>
+
                                 </div>
 
                                 <div class="col-lg-6">
@@ -98,11 +116,11 @@
                                 <div class="modal-dialog" role="document">
                                     <div class="modal-content">
                                         <div class="modal-header">
-                                            <h4 class="modal-title">{{status_msg}}</h4>
+                                            <h4 class="modal-title">{{ status_msg }}</h4>
 
                                         </div>
                                         <div class="modal-body">
-                                            <p>{{error_msg}}</p>
+                                            <p>{{ error_msg }}</p>
 
                                         </div>
                                         <div class="modal-footer">
@@ -119,21 +137,39 @@
 
                             <div class="row text-lg-right">
                                 <div class="col-lg-12 row">
-
-                                    <div class="col-lg-9 col-md-8">
-                                    </div>
-
-                                    <div class="col-lg-2 col-sm-12 col-md-2" style="margin-bottom:6px">
-
-
-
-                                        <input class="submitbutton" type="submit" value="Save">
+                                                <div class="col-lg-1 col-sm-12 col-md-2" style="margin-bottom:6px;">
+                                                    <!-- EDIT / UPDATE BUTTON -->
+                                                    <button class="submitbutton" 
+                                                            type="button" 
+                                                            (click)="onEditButtonClick()" 
+                                                            [style.background-color]="isEditMode ? '#f9b523' : 'grey'">
+                                                        {{ isEditMode ? 'Edit' : 'Edit' }}
+                                                    </button>
+                                                </div>
+
+
+
+                                    <div class="col-lg-1 col-sm-12 col-md-2" style="margin-bottom:6px;">
+                                                    <!-- EDIT / UPDATE BUTTON -->
+                                                    <button class="submitbutton" 
+                                                            type="button" 
+                                                            (click)="onAddButtonClick()" 
+                                                            [style.background-color]="isAddMode ? '#f9b523' : 'grey'">
+                                                        {{ isAddMode ? 'Add' : 'Add' }}
+                                                    </button>
+                                                </div>
+
+ 
+                                    <div class="col-lg-1 col-sm-12 col-md-2" style="margin-bottom:6px">
+
+                                        <input class="submitbutton" type="submit" value="Save"
+                                        [style.background-color]="!isEditMode ? '#f9b523' : 'grey'" >
                                     </div>
 
 
                                     <div class="col-lg-1 col-sm-12 col-md-2">
                                         <input class="cancelbutton" type="button" value="reset"
-                                             (click)="(customerForm.reset({}));reset()">
+                                             (click)="reset()">
                                     </div>
 
 
@@ -150,6 +186,44 @@
 
             </div>
 
+            <!-- ADD SLIDE PANEL -->
+<div class="add-panel" [class.open]="showAddBox">
+    <div class="add-panel-header">
+        <h5>Add Customer to User Mapping</h5>
+        <button class="close-btn" (click)="closeAddPanel()">×</button>
+    </div>
+
+    <div class="add-panel-body">
+
+        <div class="form-group">
+            <label>Customers</label>
+            <select class="form-control" #customerSelect>
+                <option value="">Select Customer</option>
+                <option *ngFor="let cust of cust_data"
+                        [value]="cust.customer_id">
+                    {{ cust.customer_name }}
+                </option>
+            </select>
+        </div>
+
+        <div class="form-group">
+            <label>Users</label>
+            <select class="form-control" #userSelect>
+                <option value="">Select User</option>
+                <option *ngFor="let item of datalist?.[0]"
+                        [value]="item.user_id">
+                    {{ item.first_name }} {{ item.last_name }}
+                </option>
+            </select>
+        </div>
+
+        <button class="submitbutton"
+                (click)="addTask(customerSelect.value, userSelect.value)">
+            Submit
+        </button>
+
+    </div>
+</div>
 
 
             <div class=" p-4 p-md-5 pt-4" style="padding-top: 20px !important;">
@@ -161,19 +235,38 @@
 
                         <thead>
                             <tr>
-
+                                <th class="no-export" style="width:15%">Actions</th>
                                 <th style="width:15%">Sr. No.</th>
                                 <th style="width:15%">Customer Name</th>
-                           
-
+                                <th style="width:15%">Customer Status</th>
+                                <th style="width:15%;">Sales Person Name</th>
                             </tr>
                         </thead>
 
                         <tbody>
                             <tr *ngFor="let current of cust_data; let i = index">
+
+                                <td class="no-export">
+                                    <table>
+                                        <tr>
+                                            <td>
+                                                <button class="btn btn-primary btn-sm" (click)="editCustomer(current)">
+                                                    <i class="fa fa-edit"></i>
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button class="btn btn-danger btn-sm" style="margin-left: 5px;" 
+                                                    (click)="deleteCustomer(current)" disabled>
+                                                    <i class="fa fa-trash"></i>
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
                                 <td>{{i+1 }}</td>
                                 <td>{{current.customer_name }}</td>
-
+                                <td>{{current.customer_status}}</td>
+                                <td>{{current.first_name}} {{current.last_name}}</td>
                             </tr>
                         </tbody>
                     </table>

+ 163 - 13
src/app/customer/customer.component.ts

@@ -4,6 +4,7 @@ import { CommonFunctionService } from '../services/commonfunctions.service';
 import { DatePipe } from '@angular/common';
 import { Router } from '@angular/router';
 import { Subject } from 'rxjs';
+import { NgModule } from '@angular/core';
 
 
 @Component({
@@ -26,7 +27,8 @@ export class CustomerComponent implements OnInit {
 
   datalist: any = [];
   salePersonlist: any = [];
-
+  cust_add: any;
+  sp_add: any;
 
   checkfirstnm_flag: boolean = false;
   checklastnm_flag: boolean = false;
@@ -90,7 +92,8 @@ export class CustomerComponent implements OnInit {
     this.contactList = [];
     this.customerForm = new FormGroup({
       customer_name: new FormControl('', Validators.required),
-      sales_person: new FormControl('', Validators.required)
+      sales_person: new FormControl('', Validators.required),
+      status: new FormControl('', Validators.required)
     })
 
 
@@ -101,23 +104,18 @@ export class CustomerComponent implements OnInit {
     this.login_id = this.loginData[0]["user_id"];
     this.role = this.loginData[0]["role"];
 
-
-
     this.commonservice.getAllData(this.commonservice.projectpath + "/getselectionData").subscribe(response => {
       if (response.status == 'falsetoken') {
         this.router.navigate(['/login'])
       } else {
         this.cust_data = response.data[0].customerData;
+        // console.log(this.cust_data);
         this.dtTrigger.next(this.dtOptions);
         console.log("yyyyyyyyyyyyyy");
 
       }
     });
 
-
-
-
-
     this.commonservice.getAllData(this.commonservice.projectpath + "/getsalepersonlist").subscribe(response => {
       if (response.status == 'falsetoken') {
         this.router.navigate(['/login'])
@@ -146,6 +144,7 @@ export class CustomerComponent implements OnInit {
       customer_id: "",
       customer_name: form.value.customer_name,
       sale_person: form.value.sales_person,
+      status: form.value.status,
       created_by: this.login_id,
       action: 'insert'
     }
@@ -176,7 +175,8 @@ export class CustomerComponent implements OnInit {
             this.checkfirstnm_flag = true;
             this.customerForm = new FormGroup({
               customer_name: new FormControl('', Validators.required),
-              sales_person: new FormControl('', Validators.required)
+              sales_person: new FormControl('', Validators.required),
+              status: new FormControl('', Validators.required)
             });
 
           } else {
@@ -273,6 +273,157 @@ export class CustomerComponent implements OnInit {
     };
 
   }
+
+  onEditButtonClick() {
+    if (this.isEditMode) {
+        this.editCustomerLogic();
+    }
+  }
+
+  onAddButtonClick() {
+    if (this.isAddMode) {
+      console.log("Adding");
+      this.showAddBox = true;
+
+        // this.addCustomerMappingLogic();
+    }
+  }
+
+closeAddPanel() {
+  this.showAddBox = false;
+}
+
+addTask(customerId: string, userId: string) {
+
+  if (!customerId || !userId) {
+    alert('Please select both Customer and User');
+    return;
+  }
+
+  const payload = {
+    customer_id: customerId,
+    user_id: userId,
+    created_by: this.login_id
+  };
+
+  console.log('Mapping Payload:', payload);
+  this.commonservice.getData(this.commonservice.projectpath + "/addCustomerUserMapping", payload).subscribe(response => {
+
+      console.log("response", response);
+
+      if (response.status == 'falsetoken') {
+        this.router.navigate(['/login'])
+      } else {
+        console.log("response", response);
+        // this.msg = response["message"];
+        if (response.status == false) {
+          //error occured
+          this.status_msg = "Warning";
+          this.error_msg = response.data[0].message;
+          this.openPopup();
+        } else {
+          //succeessful response
+          if (response.data?.[0]?.addCustomerMappingStatus === '0') {
+            this.sucess_flag = true;
+            this.status_msg = "Success";
+            this.error_msg = response.data[0].message;
+            this.openPopup();
+            this.checkfirstnm_flag = true;
+            this.closeAddPanel();
+
+          } else {
+            this.status_msg = "Warning";
+            this.error_msg = response.data[0].message;
+            this.openPopup();
+          }
+        }
+      }
+    });
+}
+
+  editCustomerLogic() {
+    console.log("Editing");
+    console.log(this.customerForm.value);
+    console.log(this.old_sales_person_id);
+    const customerData = {
+      customer_id: this.selectedCustomerId,
+      customer_name: this.customerForm.value.customer_name,
+      sale_person: this.customerForm.value.sales_person,
+      status: this.customerForm.value.status,
+      updated_by: this.login_id,
+      old_sale_person: this.old_sales_person_id
+    }
+    console.log(customerData);
+    this.commonservice.updateData(this.commonservice.projectpath + "/updateCustomerDetails", customerData).subscribe(response => {
+
+      console.log("response", response);
+
+      if (response.status == 'falsetoken') {
+        this.router.navigate(['/login'])
+      } else {
+        console.log("response", response);
+        // this.msg = response["message"];
+        if (response.status == false) {
+          //error occured
+          this.openPopup();
+          this.status_msg = "Warning";
+          this.error_msg = response.errors || response.mesasge;
+        } else {
+          //succeessful response
+          if (response.updateCustomerStatus == 0) {
+            this.openPopup();
+            this.sucess_flag = true;
+            this.status_msg = "Success";
+            this.error_msg = response.mesasge;
+            this.checkfirstnm_flag = true;
+            this.customerForm = new FormGroup({
+              customer_name: new FormControl('', Validators.required),
+              sales_person: new FormControl('', Validators.required),
+              status: new FormControl('', Validators.required)
+            });
+
+          } else {
+            this.openPopup();
+            this.status_msg = "Warning";
+            this.error_msg = response.mesasge;
+          }
+        }
+      }
+    });
+
+  }
+
+  selectedCustomerId: any;
+  isEditMode: boolean = false;
+  isAddMode: boolean = true;
+  showAddBox: boolean = false;
+  old_sales_person_id: any;
+
+  editCustomer(current: any) {
+    console.log(current);
+    this.isEditMode = true;
+    this.selectedCustomerId = current.customer_id;
+    console.log(this.selectedCustomerId);
+
+    this.customerForm.patchValue({
+        customer_id: current.customer_id,
+        customer_name: current.customer_name,
+        status: current.customer_status,
+        sales_person: current.first_name + " " + current.last_name || current.first_name
+    });
+
+    this.old_sales_person_id = current.user_id;
+
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+
+    // NEED TO ADD EDIT BUTTON ON UI BESIDES SAVE, DROPDOWN FOR STATUS, 
+      // QUERY TO FETCH USER AS WELL SO CAN UPDATE THAT, ETC
+  }
+
+  deleteCustomer(i: any) {
+    console.log("Deleting" + i)
+  }
+
   openPopup() {
     this.displayStyle = "block";
   }
@@ -359,10 +510,9 @@ export class CustomerComponent implements OnInit {
 
   reset(){
     this.resetflag=true;
-    this.customerForm = new FormGroup({
-      customer_name: new FormControl('', Validators.required),
-      sales_person: new FormControl('', Validators.required)
-    })
+    this.isEditMode = false;
+    this.isAddMode = false;
+    this.customerForm.reset();
   }
 }