Pure uml component

package.json

@@ -70,6 +70,7 @@
     "@types/hammerjs": "^2.0.36",
     "@types/jasmine": "^3.5.10",
     "@types/jasminewd2": "^2.0.8",
+    "@types/jest": "^27.4.1",
     "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "cypress": "^7.6.0",

src/app/components/data-view/data-view.component.ts

@@ -15,7 +15,7 @@ import {WebuiSettingsService} from '../../services/webui-settings.service';
 import {WebSocket} from '../../services/webSocket';
 import {HttpEventType} from '@angular/common/http';
 import * as $ from 'jquery';
-import {DbTable} from '../../views/uml/uml.model';
+import {DbTable} from '../../views/uml/api/uml.model';
 import {TableModel} from '../../views/schema-editing/edit-tables/edit-tables.component';
 import {Store} from '../../views/adapters/adapter.model';
 import {LeftSidebarService} from '../left-sidebar/left-sidebar.service';

src/app/pipes/pipes.ts

@@ -3,6 +3,9 @@ import {Pipe, PipeTransform} from '@angular/core';
 @Pipe({ name: 'value' })
 export class ValuePipe implements PipeTransform {
   transform(value: any): any {
+    if(!value){
+      return value;
+    }
     return Object.values( value );
   }
 }

src/app/services/crud.service.ts

@@ -4,7 +4,7 @@ import {WebuiSettingsService} from './webui-settings.service';
 import {Index, ModifyPartitionRequest, PartitionFunctionModel, PartitioningRequest} from '../components/data-view/models/result-set.model';
 import {webSocket} from 'rxjs/webSocket';
 import {ColumnRequest, ConstraintRequest, DeleteRequest, EditCollectionRequest, EditTableRequest, ExploreTable, MaterializedRequest, MonitoringRequest, QueryRequest, RelAlgRequest, Schema, SchemaRequest, StatisticRequest, TableRequest} from '../models/ui-request.model';
-import {ForeignKey} from '../views/uml/uml.model';
+import {ForeignKey} from '../views/uml/api/uml.model';
 import {Validators} from '@angular/forms';
 import {HubService} from './hub.service';
 import {Adapter} from '../views/adapters/adapter.model';
@@ -501,6 +501,9 @@ export class CrudService {
     });
   }
 
+  /**
+   * @deprecated use utils/validation.ts instead
+  */
   getNameValidator ( required: boolean = false ) {
     if ( required ){
       return [Validators.pattern('^[a-zA-Z_][a-zA-Z0-9_]*$'), Validators.required, Validators.max(100)];
@@ -509,20 +512,32 @@ export class CrudService {
     }
   }
 
+  /**
+   * @deprecated use utils/validation.ts instead
+  */
   invalidNameMessage ( type: string = '' ) {
     type = type + ' ';
     return `Please provide a valid ${type}name`;
   }
 
+  /**
+   * @deprecated use utils/validation.ts instead
+  */
   getValidationRegex(){
     return new RegExp( '^[a-zA-Z_][a-zA-Z0-9_]*$' );
   }
 
+  /**
+   * @deprecated use utils/validation.ts instead
+  */
   nameIsValid( name: string ) {
     const regex = this.getValidationRegex();
     return regex.test( name ) && name.length <= 100;
   }
 
+  /**
+   * @deprecated use utils/validation.ts instead
+  */
   getValidationClass( name: string ){
     const regex = this.getValidationRegex();
     if( name === '' ){

src/app/utils/validation.ts

@@ -0,0 +1,43 @@
+import { Validators } from "@angular/forms";
+
+const getNameValidator = (required: boolean = false) => {
+  if (required) {
+    return [Validators.pattern('^[a-zA-Z_][a-zA-Z0-9_]*$'), Validators.required, Validators.max(100)];
+  } else {
+    return [Validators.pattern('^[a-zA-Z_][a-zA-Z0-9_]*$'), Validators.max(100)];
+  }
+}
+
+const invalidNameMessage = (type: string = '') => {
+  type = type + ' ';
+  return `Please provide a valid ${type}name`;
+}
+
+const getValidationRegex = () => {
+  return new RegExp('^[a-zA-Z_][a-zA-Z0-9_]*$');
+}
+
+const nameIsValid = (name: string) => {
+  const regex = getValidationRegex();
+  return regex.test(name) && name.length <= 100;
+}
+
+const getValidationClass = (name: string) => {
+  const regex = getValidationRegex();
+  if (name === '') {
+    return '';
+  }
+  else if (regex.test(name) && name.length <= 100) {
+    return 'is-valid';
+  } else {
+    return 'is-invalid';
+  }
+}
+
+export {
+  getNameValidator,
+  invalidNameMessage,
+  getValidationRegex,
+  nameIsValid,
+  getValidationClass,
+};

src/app/views/querying/explore-by-example/explore-by-example.component.ts

@@ -7,7 +7,7 @@ import {ResultSet} from '../../../components/data-view/models/result-set.model';
 import {ToastService} from '../../../components/toast/toast.service';
 import {DataTableComponent} from '../../../components/data-view/data-table/data-table.component';
 import {SidebarNode} from '../../../models/sidebar-node.model';
-import {ForeignKey, Uml} from '../../uml/uml.model';
+import {ForeignKey, Uml} from '../../uml/api/uml.model';
 import {BsModalRef, BsModalService} from 'ngx-bootstrap/modal';
 import {Subscription} from 'rxjs';
 import {TableConfig} from '../../../components/data-view/data-table/table-config';

src/app/views/querying/graphical-querying/graphical-querying.component.ts

@@ -9,7 +9,7 @@ import {LeftSidebarService} from '../../../components/left-sidebar/left-sidebar.
 import {ToastService} from '../../../components/toast/toast.service';
 import {EditTableRequest, QueryRequest, SchemaRequest} from '../../../models/ui-request.model';
 import {SidebarNode} from '../../../models/sidebar-node.model';
-import {ForeignKey, Uml} from '../../uml/uml.model';
+import {ForeignKey, Uml} from '../../uml/api/uml.model';
 import {Router} from '@angular/router';
 import {Subscription} from 'rxjs';
 import {WebuiSettingsService} from '../../../services/webui-settings.service';

src/app/views/querying/relational-algebra/relational-algebra.component.ts

@@ -7,7 +7,7 @@ import * as $ from 'jquery';
 import 'jquery-ui/ui/widget';
 import 'jquery-ui/ui/widgets/draggable';
 import 'jquery-ui/ui/widgets/droppable';
-import {SvgLine} from '../../uml/uml.model';
+import {SvgLine} from '../../uml/api/uml.model';
 import {SchemaRequest} from '../../../models/ui-request.model';
 import {SidebarNode} from '../../../models/sidebar-node.model';
 import {WebSocketService} from '../../../services/web-socket.service';

src/app/views/schema-editing/document-edit-collection/document-edit-collection.component.ts

@@ -19,7 +19,7 @@ import {CatalogColumnPlacement, Placements, PlacementType, Store} from '../../ad
 import {ModalDirective} from 'ngx-bootstrap/modal';
 import * as _ from 'lodash';
 import {Subscription} from 'rxjs';
-import {DbTable, ForeignKey, SvgLine, Uml} from '../../../views/uml/uml.model';
+import {DbTable, ForeignKey, SvgLine, Uml} from '../../uml/api/uml.model';
 
 @Component({
   selector: 'app-document-edit-collection',

src/app/views/schema-editing/document-edit-collections/document-edit-collections.component.ts

@@ -13,7 +13,7 @@ import {Subscription} from 'rxjs';
 import {ModalDirective} from 'ngx-bootstrap/modal';
 import {UtilService} from '../../../services/util.service';
 import * as $ from 'jquery';
-import {DbTable} from '../../uml/uml.model';
+import {DbTable} from '../../uml/api/uml.model';
 
 @Component({
   selector: 'app-document-edit-collections',

src/app/views/schema-editing/edit-columns/edit-columns.component.ts

@@ -12,7 +12,7 @@ import {CatalogColumnPlacement, MaterializedInfos, Placements, PlacementType, St
 import {ModalDirective} from 'ngx-bootstrap/modal';
 import * as _ from 'lodash';
 import {Subscription} from 'rxjs';
-import {ForeignKey, Uml} from '../../../views/uml/uml.model';
+import {ForeignKey, Uml} from '../../uml/api/uml.model';
 
 @Component({
   selector: 'app-edit-columns',

src/app/views/schema-editing/edit-source-columns/edit-source-columns.component.ts

@@ -8,7 +8,7 @@ import {ToastService} from '../../../components/toast/toast.service';
 import {Placements, UnderlyingTables} from '../../adapters/adapter.model';
 import {Subscription} from 'rxjs';
 import {DbmsTypesService} from '../../../services/dbms-types.service';
-import {ForeignKey, Uml} from '../../../views/uml/uml.model';
+import {ForeignKey, Uml} from '../../uml/api/uml.model';
 
 @Component({
   selector: 'app-edit-source-columns',

src/app/views/schema-editing/edit-tables/edit-tables.component.ts

@@ -13,7 +13,7 @@ import {Subscription} from 'rxjs';
 import {ModalDirective} from 'ngx-bootstrap/modal';
 import {UtilService} from '../../../services/util.service';
 import * as $ from 'jquery';
-import {DbTable} from '../../uml/uml.model';
+import {DbTable} from '../../uml/api/uml.model';
 
 @Component({
   selector: 'app-edit-tables',

src/app/views/uml/uml.model.ts → src/app/views/uml/api/uml.model.ts

@@ -1,4 +1,4 @@
-import {DbColumn} from '../../components/data-view/models/result-set.model';
+import {DbColumn} from '../../../components/data-view/models/result-set.model';
 
 export class Uml {
   constructor(

src/app/views/uml/uml.component.spec.ts → src/app/views/uml/component/specs/uml.component.spec.ts

@@ -1,6 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { UmlComponent } from './uml.component';
+import { UmlComponent } from '../uml.component';
 
 describe('UmlComponent', () => {
   let component: UmlComponent;

src/app/views/uml/uml.component.html → src/app/views/uml/component/uml.component.html

@@ -4,10 +4,10 @@
     <h5 *ngIf="schema">{{schema}}</h5>
     <p *ngIf="uml">Drag a connection from a column to a <span class="badge" id="badge-pk">primary key</span> or <span class="badge" id="badge-unique">unique column</span> to create a new foreign key.</p>
     <span *ngIf="!schema">Please select a schema in the left sidebar. Document schemas and tables originating from a data source are not supported.</span>
-    <span *ngIf="schemaType.toLowerCase() === 'document'"><i>Document schemas do not support the UML builder.</i></span>
+    <span *ngIf="schemaType?.toLowerCase() === 'document'"><i>Document schemas do not support the UML builder.</i></span>
   </div>
   <div id="drag-container" class="col-lg-12" *ngIf="uml">
-    <div class="card uml" *ngFor="let table of uml.tables | value" [id]="table.schema+'_'+table.tableName" [attr.tableName]="table.schema+'.'+table.tableName" cdkDragBoundary="#drag-container" cdkDrag (cdkDragEnded)="updateZIndex($event)" (cdkDragStarted)="onDragging($event)">
+    <div class="card uml" *ngFor="let table of uml.tables | value" [id]="table.schema+'_'+table.tableName" [attr.tableName]="table.schema+'.'+table.tableName" cdkDragBoundary="#drag-container" cdkDrag (cdkDragEnded)="updateZIndex($event)" (cdkDragStarted)="onDragStart($event)" (cdkDragMoved)="onDragging()">
       <div class="card-header tableName" cdkDragHandle>{{table.tableName}}</div>
       <div class="list-group list-group-flush">
         <div class="list-group-item cols"
@@ -79,7 +79,7 @@ <h4 class="modal-title">Create foreign key</h4>
             <div>
               constraint name<br><input type="text" [(ngModel)]="constraintName" [placeholder]="proposedConstraintName"
                                         class="form-control form-control-sm"
-                                        [ngClass]="_crud.getValidationClass(constraintName)">
+                                        [ngClass]="getValidationClass(constraintName)">
               <div class="invalid-feedback">invalid name</div>
             </div>
           </div>