data lake

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

@@ -104,7 +104,7 @@
               <span
                 style="margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;"
                 title="{{user.url_endpoint}}" (click)="showFullUrl(user.url_endpoint)">
-                {{user.url | slice:0:30}}{{user.url_endpoint.length > 30 ? '...' : ''}}
+                {{user.url | slice:0:30}}{{user?.url_endpoint?.length > 30 ? '...' : ''}}
               </span>
               <button class="btn btn-icon btn-sm" (click)="copyToClipboard(user.url_endpoint)" title="Copy URL">
                 <clr-icon shape="copy-to-clipboard"></clr-icon>
@@ -445,10 +445,17 @@
         <!-- Blending Data Lakes (only show when blending type is selected) -->
         <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'blending'">
           <label>Blending Data Lakes</label>
-          <select class="clr-input" [(ngModel)]="rowSelected.blending_lakeids" name="blending_lakeids" multiple size="4">
+          <div class="checkbox-container">
-            <option *ngFor="let dataLake of dataLakeList" [value]="dataLake.id">{{ dataLake.name }}</option>
+            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
-          </select>
+              <input 
-          <small class="clr-subtext">Hold Ctrl/Cmd to select multiple data lakes</small>
+                type="checkbox" 
+                [value]="dataLake.id" 
+                (change)="onEditBlendingLakeCheckboxChange($event, dataLake.id)"
+                [checked]="isEditBlendingLakeSelected(dataLake.id)">
+              <label>{{ dataLake.name }}</label>
+            </div>
+          </div>
+          <small class="clr-subtext">Select data lakes to blend</small>
         </div>
 
         <!-- Reference Data Lake (only show when normal type is selected) -->
@@ -591,10 +598,17 @@
         <!-- Blending Data Lakes (only show when blending type is selected) -->
         <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'blending'">
           <label>Blending Data Lakes</label>
-          <select formControlName="blending_lakeids" multiple size="4">
+          <div class="checkbox-container">
-            <option *ngFor="let dataLake of dataLakeList" [value]="dataLake.id">{{ dataLake.name }}</option>
+            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
-          </select>
+              <input 
-          <small class="clr-subtext">Hold Ctrl/Cmd to select multiple data lakes</small>
+                type="checkbox" 
+                [value]="dataLake.id" 
+                (change)="onBlendingLakeCheckboxChange($event, dataLake.id)"
+                [checked]="isBlendingLakeSelected(dataLake.id)">
+              <label>{{ dataLake.name }}</label>
+            </div>
+          </div>
+          <small class="clr-subtext">Select data lakes to blend</small>
         </div>
 
         <!-- Reference Data Lake (only show when normal type is selected) -->

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

@@ -397,3 +397,28 @@
   height: auto !important;
   min-height: 80px;
 }
+
+/* Checkbox Styles for Blending Data Lakes */
+.checkbox-container {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: #f9f9f9;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.checkbox-item input[type="checkbox"] {
+  margin-right: 8px;
+}
+
+.checkbox-item label {
+  margin-bottom: 0;
+  cursor: pointer;
+}

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

@@ -105,6 +105,10 @@ export class Data_lakeComponent implements OnInit {
   
   selectedAggregationFields: { field: string; operation: string }[] = [];
   
+  // New property to store selected blending lake IDs as string
+  selectedBlendingLakeIds: string[] = [];
+  editSelectedBlendingLakeIds: string[] = [];
+  
   constructor(
     private extensionService: ExtensionService,
     private userInfoService: UserInfoService,
@@ -686,8 +690,16 @@ export class Data_lakeComponent implements OnInit {
     this.editCronExpression = row.cron_job || '';
     // Set the selected SureConnect for edit form
     this.selectedSureConnect = row.sure_connect_id || null;
-    // Set the selected Data Lake for edit form
+    
-    this.selectedDataLake = row.ref_datalake_id || null;
+    // Initialize blending lake IDs for edit form from string
+    if (row.blending_lakeids && typeof row.blending_lakeids === 'string') {
+      this.editSelectedBlendingLakeIds = row.blending_lakeids.split(',').filter(id => id.trim() !== '');
+    } else if (row.blending_lakeids && Array.isArray(row.blending_lakeids)) {
+      this.editSelectedBlendingLakeIds = row.blending_lakeids.map(id => id.toString());
+    } else {
+      this.editSelectedBlendingLakeIds = [];
+    }
+    
     // Use setTimeout to ensure the component has time to initialize
     setTimeout(() => {
       this.modalEdit = true;
@@ -838,18 +850,22 @@ export class Data_lakeComponent implements OnInit {
   }
   
   goToAdd(row) {
-    this.modalAdd = true;
+    this.modalAdd = false;
     this.addCronExpression = '';
     this.selectedSureConnect = null; // Reset SureConnect selection
-    this.selectedDataLake = null; // Reset Data Lake selection
     this.submitted = false;
+    // Reset blending lake IDs for add form
+    this.selectedBlendingLakeIds = [];
+    
     // Reset the form control for cron_job and sure_connect_id
     if (this.entryForm) {
       if (this.entryForm.get('cron_job')) {
         this.entryForm.get('cron_job')?.setValue('');
       }
-
+      // Reset blending_lakeids to empty string
+      this.entryForm.get('blending_lakeids')?.setValue('');
     }
+    this.modalAdd = true;
   }
   submitted = false;
   onSubmit() {
@@ -1290,4 +1306,54 @@ export class Data_lakeComponent implements OnInit {
       return [];
     }
   }
+  
+  // Method to handle checkbox change for blending lakes (ADD form)
+  onBlendingLakeCheckboxChange(event: any, lakeId: number) {
+    const lakeIdStr = lakeId.toString();
+    if (event.target.checked) {
+      // Add to selected blending lake IDs
+      if (!this.selectedBlendingLakeIds.includes(lakeIdStr)) {
+        this.selectedBlendingLakeIds.push(lakeIdStr);
+      }
+    } else {
+      // Remove from selected blending lake IDs
+      const index = this.selectedBlendingLakeIds.indexOf(lakeIdStr);
+      if (index > -1) {
+        this.selectedBlendingLakeIds.splice(index, 1);
+      }
+    }
+    
+    // Update the form control value as a comma-separated string
+    this.entryForm.get('blending_lakeids')?.setValue(this.selectedBlendingLakeIds.join(','));
+  }
+  
+  // Method to check if a blending lake is selected (ADD form)
+  isBlendingLakeSelected(lakeId: number): boolean {
+    return this.selectedBlendingLakeIds.includes(lakeId.toString());
+  }
+  
+  // Method to handle checkbox change for blending lakes (EDIT form)
+  onEditBlendingLakeCheckboxChange(event: any, lakeId: number) {
+    const lakeIdStr = lakeId.toString();
+    if (event.target.checked) {
+      // Add to selected blending lake IDs
+      if (!this.editSelectedBlendingLakeIds.includes(lakeIdStr)) {
+        this.editSelectedBlendingLakeIds.push(lakeIdStr);
+      }
+    } else {
+      // Remove from selected blending lake IDs
+      const index = this.editSelectedBlendingLakeIds.indexOf(lakeIdStr);
+      if (index > -1) {
+        this.editSelectedBlendingLakeIds.splice(index, 1);
+      }
+    }
+    
+    // Update the rowSelected value as a comma-separated string
+    this.rowSelected.blending_lakeids = this.editSelectedBlendingLakeIds.join(',');
+  }
+  
+  // Method to check if a blending lake is selected (EDIT form)
+  isEditBlendingLakeSelected(lakeId: number): boolean {
+    return this.editSelectedBlendingLakeIds.includes(lakeId.toString());
+  }
 }