Feat/fe check contraints (#10)

* Add the UI changes for supporting check constraints --------- Co-authored-by: Vivek Yadav <vivek.yadav@ollion.com> Co-authored-by: taherkl <taher.lakdawala@ollion.com>
ollionorg · Dec 23, 2024 · 41cc32f · 41cc32f
1 parent 38ee14e
commit 41cc32f
Show file tree

Hide file tree

Showing 17 changed files with 865 additions and 33 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -24,6 +24,7 @@
     "babel-loader": "^9.1.3",
     "jszip": "^3.10.1",
     "loader-utils": "^3.2.1",
+    "node-sql-parser": "^5.3.5",
     "rxjs": "~7.8.1",
     "terser": "^5.22.0",
     "tslib": "^2.6.2",
@@ -44,4 +45,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "^5.3.3"
   }
-}
+}
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
 import { FormsModule } from '@angular/forms'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
 import { MatChipsModule } from '@angular/material/chips'
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { AppComponent } from './app.component'
 import { HeaderComponent } from './components/header/header.component'
@@ -113,7 +114,8 @@ import { AddNewSequenceComponent } from './components/add-new-sequence/add-new-s
     MatRadioModule,
     ClipboardModule,
     MatProgressSpinnerModule,
-    MatChipsModule
+    MatChipsModule,
+    MatTooltipModule,
   ],
   providers: [
     {

diff --git a/ui/src/app/components/object-detail/object-detail.component.html b/ui/src/app/components/object-detail/object-detail.component.html
@@ -269,7 +269,7 @@ <h3 class="title">
                         </ng-container>
                       </mat-select>
                     </mat-form-field>
-                  </ng-container>                  
+                  </ng-container>
                   <ng-container *ngIf="!isEditMode">
                     <p>{{ element.get('spAutoGen').value.Name !== '' ? element.get('spAutoGen').value.Name : 'None' }}</p>
                   </ng-container>
@@ -381,7 +381,7 @@ <h3 class="title">
       <div class="pk-tab-container">
         <table mat-table [dataSource]="pkDataSource">
           <ng-container matColumnDef="srcDatabase">
-            <th mat-header-cell class="db_name" *matHeaderCellDef colspan="5">{{ srcDbName }}</th>
+            <th mat-header-cell class="db_name" *matHeaderCellDef colspan="6">{{ srcDbName }}</th>
           </ng-container>
 
           <ng-container matColumnDef="spDatabase">
@@ -707,6 +707,129 @@ <h3 class="title">
       </div>
     </mat-tab>
 
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <span>CHECK CONSTRAINTS</span>
+      </ng-template>
+      <div class="cc-tab-container">
+        <table mat-table [dataSource]="ccDataSource">
+          <ng-container matColumnDef="srcDatabase">
+            <th mat-header-cell class="db_name" *matHeaderCellDef [attr.colspan]="3">{{ srcDbName }}</th>
+          </ng-container>
+
+          <ng-container matColumnDef="spDatabase">
+            <th mat-header-cell *matHeaderCellDef class="db_name" [attr.colspan]="4" >
+              <div class="spanner_edit-button">
+                <span>Spanner</span>
+                <div *ngIf="
+                    !isCcEditMode &&
+                    ccDataSource.length > 0 &&
+                    currentObject!.isSpannerNode &&
+                    !currentObject.isDeleted
+                  ">
+                  <button mat-stroked-button color="primary" (click)="toggleCcEdit()">
+                    <mat-icon class="edit-icon">edit</mat-icon>
+                    EDIT
+                  </button>
+                </div>
+              </div>
+            </th>
+          </ng-container>
+
+          <ng-container matColumnDef="srcSno">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>S. No.</th>
+            <td mat-cell *matCellDef="let element"  >
+              <span *ngIf="element.get('srcSno').value != 0">
+              {{ element.get('srcSno').value }}
+             </span>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="srcConstraintName">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Constraint Name</th>
+            <td mat-cell *matCellDef="let element">
+              {{ element.get('srcConstraintName').value }}
+            </td>
+
+          </ng-container>
+
+          <ng-container matColumnDef="srcCondition">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Condition</th>
+            <td mat-cell *matCellDef="let element" matTooltip="{{ element.get('srcCondition').value }}"
+            matTooltipPosition="above" class="overflow-cell">
+
+              {{ element.get('srcCondition').value }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="spSno">
+            <th mat-header-cell class="table_header" *matHeaderCellDef>S. No.</th>
+            <td mat-cell *matCellDef="let element">
+              {{ element.get('spSno').value }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="spConstraintName">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Constraint Name</th>
+            <td mat-cell *matCellDef="let element">
+              <div *ngIf="isCcEditMode">
+                <input
+                  matInput
+                  class="name_input"
+                  type="text"
+                  [formControl]="element.get('spConstraintName')"
+                  matTooltip="No special characters allowed except underscore."
+                   />
+              </div>
+              <p *ngIf="!isCcEditMode">{{ element.get('spConstraintName').value }}</p>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="spCondition">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Condition</th>
+            <td mat-cell *matCellDef="let element" >
+              <div *ngIf="isCcEditMode">
+                   <textarea name="spConstraintName"  matInput
+                   class="name_input" [formControl]="element.get('spCondition')"
+                   matTooltip="Enter valid clause for CHECK constraints" id="ck1"></textarea>
+              </div>
+              <p *ngIf="!isCcEditMode" matTooltip="{{ element.get('spCondition').value }}"
+              matTooltipPosition="above" class="overflow-cell">{{ element.get('spCondition').value }}</p>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="dropButton">
+            <th mat-header-cell class="table_header" *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let element" [ngClass]="{ 'drop-button-left-border': isCcEditMode }">
+              <div class="actions" *ngIf="
+              isCcEditMode &&
+                  currentObject!.isSpannerNode
+                ">
+                <mat-icon [matMenuTriggerFor]="menu">more_vert</mat-icon>
+                <mat-menu #menu="matMenu" xPosition="before">
+                  <button [disabled]="!isCcEditMode" mat-menu-item (click)="dropCc(element)">
+                    <span>Remove constraint</span>
+                  </button>
+                </mat-menu>
+              </div>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="['srcDatabase', 'spDatabase']"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedCCColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedCCColumns"></tr>
+        </table>
+
+        <div *ngIf="isCcEditMode" class="add-cc-column">
+          <button mat-button color="primary" class="add-column-btn" type="button" (click)="addCcColumn()">
+            <mat-icon>add</mat-icon>
+            ADD COLUMN
+          </button>
+        </div>
+
+      </div>
+    </mat-tab>
+
     <mat-tab label="INTERLEAVE" *ngIf="
         ((interleaveStatus.tableInterleaveStatus &&
           interleaveStatus.tableInterleaveStatus.Possible) ||
@@ -901,7 +1024,7 @@ <h3 class="title">
             </ng-container>
           </div>
         </td>
-      </ng-container>      
+      </ng-container>
       <ng-container matColumnDef="spSkipRangeMin">
         <th mat-header-cell class="table_header" *matHeaderCellDef>Skip Range Min</th>
         <td mat-cell *matCellDef="let element">
@@ -952,7 +1075,7 @@ <h3 class="title">
       <tr mat-header-row *matHeaderRowDef="sequenceDisplayedColumns"></tr>
       <tr mat-row class="sequence-data-row" *matRowDef="let row; columns: sequenceDisplayedColumns"></tr>
     </table>
-    
+
   </div>
 
   <div class="save-edits">
@@ -976,6 +1099,15 @@ <h3 class="title">
         CANCEL
       </button>
     </div>
+    <div class="save-button" *ngIf="isCcEditMode && currentTabIndex === 3">
+      <button mat-raised-button color="primary" (click)="saveCc()" [disabled]="!ccArray.valid" >
+        SAVE & CONVERT
+      </button>
+      <button class="cancel-button" mat-raised-button color="primary" (click)="toggleCcEdit()"
+        *ngIf="currentObject!.isSpannerNode">
+        CANCEL
+      </button>
+    </div>
     <div class="save-button" *ngIf="isFkEditMode && currentTabIndex === 2">
       <button mat-raised-button color="primary" (click)="saveFk()">SAVE & CONVERT</button>
       <button class="cancel-button" mat-raised-button color="primary" (click)="toggleFkEdit()"
@@ -1000,4 +1132,4 @@ <h3 class="title">
       </button>
     </div>
   </div>
-</div>
+</div>
diff --git a/ui/src/app/components/object-detail/object-detail.component.scss b/ui/src/app/components/object-detail/object-detail.component.scss
@@ -81,6 +81,7 @@
   }
 }
 .add-pk-column,
+.add-cc-column,
 .add-column {
   margin-left: 50%;
   padding: 10px;
@@ -99,6 +100,7 @@
 .column-tab-container,
 .fk-tab-container,
 .pk-tab-container,
+.cc-tab-container,
 .index-tab-container,
 .sequence-tab-container {
   height: 84%;
@@ -201,7 +203,7 @@
   .mat-column-srcColMaxLength {
     min-width: 100px;
   }
-  
+
   .mat-column-spSequenceKind{
     min-width: 250px;
   }
@@ -315,3 +317,11 @@ tr.mat-mdc-row {
 .custom-mat-form-field .mat-select-panel .mat-option {
   white-space: nowrap;
 }
+
+.overflow-cell {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}