field mapping

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.html

@@ -177,6 +177,14 @@
                   *ngIf="canShowBlendingAction(user)">
               <clr-icon shape="code"></clr-icon>
             </button>
+          
+            <!-- Field Mapping button -->
+            <button class="btn btn-icon" 
+                  (click)="openFieldMappingModal(user)" 
+                  title="Field Mapping"
+                  *ngIf="user.url && user.sure_connect_id">
+              <clr-icon shape="map"></clr-icon>
+            </button>
           </clr-dg-cell>
 
           <!-- who colmn -->
@@ -1052,4 +1060,49 @@
   </div>
 </clr-modal>
 
+<!-- Field Mapping Modal -->
+<clr-modal [(clrModalOpen)]="showFieldMappingModal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Field Mapping Configuration</h3>
+  <div class="modal-body">
+    <div class="field-mapping-container">
+      <div class="instructions">
+        <p>Map original field names to new names. Leave mapping blank to exclude field from mapping.</p>
+      </div>
+      
+      <div class="mapping-table-container" *ngIf="fieldMappingData && fieldMappingData.length > 0">
+        <table class="table mapping-table">
+          <thead>
+            <tr>
+              <th width="50%">Original Field Name</th>
+              <th width="50%">Mapped Field Name</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let field of fieldMappingData; let i = index">
+              <td class="original-field">
+                <span class="field-tag">{{ field.original }}</span>
+              </td>
+              <td>
+                <input type="text" 
+                       class="clr-input mapping-input" 
+                       [(ngModel)]="field.mapped" 
+                       placeholder="Enter new field name"
+                       (ngModelChange)="updateFieldMapping(i, $event)">
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      
+      <div class="no-data-message" *ngIf="fieldMappingData && fieldMappingData.length === 0">
+        <p>No fields available for mapping. Please check the data source configuration.</p>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="closeFieldMappingModal()">Cancel</button>
+    <button type="button" class="btn btn-primary" (click)="updateFieldMappings()" [disabled]="!fieldMappingData || fieldMappingData.length === 0">Update Field Mappings</button>
+  </div>
+</clr-modal>
+
 <!-- htmlpopup -->   

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.scss

@@ -599,3 +599,87 @@
   padding: 15px;
   border-top: 1px solid #eee;
 }
+
+/* Field Mapping Modal Styles */
+.field-mapping-container {
+  padding: 10px;
+}
+
+.instructions {
+  background-color: #e3f2fd;
+  border: 1px solid #bbdefb;
+  border-radius: 4px;
+  padding: 15px;
+  margin-bottom: 20px;
+}
+
+.instructions p {
+  margin: 0;
+  color: #1976d2;
+}
+
+.mapping-table-container {
+  overflow-x: auto;
+}
+
+.mapping-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.mapping-table th {
+  background-color: #f5f5f5;
+  padding: 12px 15px;
+  text-align: left;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 2px solid #ddd;
+}
+
+.mapping-table td {
+  padding: 12px 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.original-field {
+  vertical-align: middle;
+}
+
+.field-tag {
+  display: inline-block;
+  background-color: #e0e0e0;
+  border: 1px solid #bdbdbd;
+  border-radius: 4px;
+  padding: 6px 10px;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.mapping-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.mapping-input:focus {
+  outline: none;
+  border-color: #0072a0;
+  box-shadow: 0 0 0 2px rgba(0, 114, 160, 0.2);
+}
+
+.no-data-message {
+  text-align: center;
+  padding: 30px;
+  color: #666;
+  font-style: italic;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 15px;
+  border-top: 1px solid #eee;
+}

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.ts

@@ -115,6 +115,12 @@ export class Data_lakeComponent implements OnInit {
   sqlQueryText = '';
   selectedBlendingItem: any = null;
   
+  // New properties for field mapping
+  showFieldMappingModal = false;
+  fieldMappingData: any[] = [];
+  fieldMappings: { [key: string]: string } = {};
+  selectedMappingItem: any = null;
+  
   constructor(
     private extensionService: ExtensionService,
     private userInfoService: UserInfoService,
@@ -1463,4 +1469,95 @@ export class Data_lakeComponent implements OnInit {
   isEditBlendingLakeSelected(lakeId: number): boolean {
     return this.editSelectedBlendingLakeIds.includes(lakeId.toString());
   }
+  
+  // Method to open field mapping modal
+  openFieldMappingModal(item: any) {
+    this.selectedMappingItem = item;
+    this.fieldMappingData = [];
+    this.fieldMappings = {};
+    this.showFieldMappingModal = true;
+    
+    // Fetch available keys using the same API as calculated fields
+    this.mainService.fetchAvailableKeys(item.url, item.sure_connect_id).subscribe(
+      (keys: string[]) => {
+        // Initialize field mappings with empty values
+        this.fieldMappingData = keys.map(key => ({
+          original: key,
+          mapped: ''
+        }));
+        
+        // If there's existing mapping data, populate it
+        if (item.mapping_json) {
+          try {
+            const existingMappings = JSON.parse(item.mapping_json);
+            this.fieldMappingData.forEach(field => {
+              if (existingMappings[field.original]) {
+                field.mapped = existingMappings[field.original];
+              }
+            });
+          } catch (e) {
+            console.error('Error parsing existing mapping JSON:', e);
+          }
+        }
+      },
+      (error) => {
+        console.error('Error fetching keys for field mapping:', error);
+        this.toastr.error('Failed to fetch available keys for field mapping');
+      }
+    );
+  }
+  
+  // Method to update field mappings
+  updateFieldMappings() {
+    if (!this.selectedMappingItem) {
+      this.toastr.error('No item selected for mapping');
+      return;
+    }
+    
+    // Create mapping object
+    const mappings: { [key: string]: string } = {};
+    this.fieldMappingData.forEach(field => {
+      if (field.mapped && field.mapped.trim() !== '') {
+        mappings[field.original] = field.mapped.trim();
+      }
+    });
+    
+    // Convert to JSON string
+    const mappingJson = JSON.stringify(mappings);
+    
+    // Update the mapping JSON field
+    this.selectedMappingItem.mapping_json = mappingJson;
+    
+    // Call update service
+    this.mainService.update(this.selectedMappingItem.id, this.selectedMappingItem).subscribe(
+      (response) => {
+        this.toastr.success('Field mappings updated successfully');
+        // Update the local data
+        const index = this.product.findIndex(p => p.id === this.selectedMappingItem.id);
+        if (index !== -1) {
+          this.product[index] = {...this.selectedMappingItem};
+        }
+        this.closeFieldMappingModal();
+      },
+      (error) => {
+        console.error('Error updating field mappings:', error);
+        this.toastr.error('Failed to update field mappings');
+      }
+    );
+  }
+  
+  // Method to close field mapping modal
+  closeFieldMappingModal() {
+    this.showFieldMappingModal = false;
+    this.fieldMappingData = [];
+    this.fieldMappings = {};
+    this.selectedMappingItem = null;
+  }
+  
+  // Method to update individual field mapping
+  updateFieldMapping(index: number, value: string) {
+    if (index >= 0 && index < this.fieldMappingData.length) {
+      this.fieldMappingData[index].mapped = value;
+    }
+  }
 }