QuickStart UI fixes for 2.x-develop (#942)

* DHFPROD-664 adjust offset, size of new entities in UI

* DHFPROD-675 add index confirm for save new entity

* DHFPROD-497 fix property index selection

Add flags to property to keep track of what indexes are set (instead of using name).
Set flags based on entity state when editor opens.
Set entity state based on flags on save.

Author: wooldridge

quick-start/src/main/ui/app/entities/entity.model.ts

@@ -138,8 +138,8 @@ export class Entity {
       },
       'filename': null,
       'hubUi': {
-        x: 100,
-        y: 100,
+        x: 10,
+        y: 115,
         width: 350,
         height: 100
       },

quick-start/src/main/ui/app/entities/property.model.ts

@@ -13,6 +13,11 @@ export class PropertyType {
 
   // ui only
   showCollation: boolean = false;
+  isPrimaryKey: boolean = false;
+  hasElementRangeIndex: boolean = false;
+  hasRangeIndex: boolean = false;
+  hasWordLexicon: boolean = false;
+  required: boolean = false;
 
   UNICODE_COLLATION: string = 'http://marklogic.com/collation/codepoint';
 

quick-start/src/main/ui/app/entity-modeler/entity-editor.component.html

@@ -44,11 +44,11 @@ <h4>Properties</h4>
       <tbody>
         <tr *ngFor="let property of entity.definition.properties; let i = index">
           <td><input type="checkbox" [(ngModel)]="property.selected"></td>
-          <td class="col-toggler" (click)="togglePrimaryKey(property)"><i [ngClass]="{'active': isPrimaryKey(property.name)}" class="fa fa-key"></i></td>
-          <td class="col-toggler" (click)="toggleRangeIndex(property)"><i [ngClass]="{'active': isRangeIndex(property.name)}" class="fa fa-bolt"></i></td>
-          <td class="col-toggler" (click)="togglePathRangeIndex(property)"><i [ngClass]="{'active': isPathRangeIndex(property.name)}" class="fa fa-code"></i></td>
-          <td class="col-toggler" (click)="toggleWordLexicon(property)"><i [ngClass]="{'active': isWordLexicon(property.name)}" class="fa fa-won"></i></td>
-          <td class="col-toggler" (click)="toggleRequired(property)"><i [ngClass]="{'active': isRequired(property.name)}" class="fa fa-exclamation"></i></td>
+          <td class="col-toggler" (click)="togglePrimaryKey(property)"><i [ngClass]="{'active': property.isPrimaryKey}" class="fa fa-key"></i></td>
+          <td class="col-toggler" (click)="property.hasElementRangeIndex = !property.hasElementRangeIndex"><i [ngClass]="{'active': property.hasElementRangeIndex}" class="fa fa-bolt"></i></td>
+          <td class="col-toggler" (click)="property.hasRangeIndex = !property.hasRangeIndex"><i [ngClass]="{'active': property.hasRangeIndex}" class="fa fa-code"></i></td>
+          <td class="col-toggler" (click)="property.hasWordLexicon = !property.hasWordLexicon"><i [ngClass]="{'active': property.hasWordLexicon}" class="fa fa-won"></i></td>
+          <td class="col-toggler" (click)="property.required = !property.required"><i [ngClass]="{'active': property.required}" class="fa fa-exclamation"></i></td>
 
           <td><input type="text" [(ngModel)]="property.name"></td>
           <td>

quick-start/src/main/ui/app/entity-modeler/entity-editor.component.ts

@@ -51,6 +51,14 @@ export class EntityEditorComponent {
     this.actions = actions;
     this.dataTypes = dataTypes;
     this.entityBackup = JSON.stringify(this.entity);
+    // Set property ui flags based on entity state
+    this.entity.definition.properties.forEach(function(property) {
+      property.isPrimaryKey = this.entity.definition.primaryKey === property.name;
+      property.hasElementRangeIndex = this.entity.definition.elementRangeIndex.indexOf(property.name) >= 0;
+      property.hasRangeIndex = this.entity.definition.rangeIndex.indexOf(property.name) >= 0;
+      property.hasWordLexicon = this.entity.definition.wordLexicon.indexOf(property.name) >= 0;
+      property.required = this.entity.definition.required.indexOf(property.name) >= 0;
+    }, this);
   }
 
   getType(property: PropertyType) {
@@ -147,26 +155,6 @@ export class EntityEditorComponent {
     });
   }
 
-  isPrimaryKey(key: string) {
-    return this.entity.definition.primaryKey === key;
-  }
-
-  isRangeIndex(key: string) {
-    return this.entity.definition.elementRangeIndex.indexOf(key) >= 0;
-  }
-
-  isPathRangeIndex(key: string) {
-    return this.entity.definition.rangeIndex.indexOf(key) >= 0;
-  }
-
-  isWordLexicon(key: string) {
-    return this.entity.definition.wordLexicon.indexOf(key) >= 0;
-  }
-
-  isRequired(key: string) {
-    return this.entity.definition.required.indexOf(key) >= 0;
-  }
-
   addProperty() {
     this.entity.definition.properties.push(new PropertyType());
   }
@@ -212,6 +200,29 @@ export class EntityEditorComponent {
 
   saveEntity() {
     if (this.actions.save) {
+      // Set entity state based on property ui flags
+      this.entity.definition.primaryKey = null;
+      this.entity.definition.elementRangeIndex = [];
+      this.entity.definition.rangeIndex = [];
+      this.entity.definition.wordLexicon = [];
+      this.entity.definition.required = [];
+      this.entity.definition.properties.forEach(function(property) {
+        if (property.isPrimaryKey) {
+          this.entity.definition.primaryKey = property.name;
+        }
+        if (property.hasElementRangeIndex) {
+          this.entity.definition.elementRangeIndex.push(property.name);
+        }
+        if (property.hasRangeIndex) {
+          this.entity.definition.rangeIndex.push(property.name);
+        }
+        if (property.hasWordLexicon) {
+          this.entity.definition.wordLexicon.push(property.name);
+        }
+        if (property.required) {
+          this.entity.definition.required.push(property.name);
+        }
+      }, this);
       this.actions.save();
     }
     this.dialog.hide();
@@ -243,28 +254,14 @@ export class EntityEditorComponent {
   }
 
   togglePrimaryKey(property: PropertyType) {
-    if (this.entity.definition.primaryKey === property.name) {
-      this.entity.definition.primaryKey = null;
+    if (property.isPrimaryKey) {
+      property.isPrimaryKey = false;
     } else {
-      this.entity.definition.primaryKey = property.name;
-    }
-  }
-
-  toggleRangeIndex(property: PropertyType) {
-    let idx = this.entity.definition.elementRangeIndex.indexOf(property.name);
-    if (idx >= 0) {
-      this.entity.definition.elementRangeIndex.splice(idx, 1);
-    } else {
-      this.entity.definition.elementRangeIndex.push(property.name);
-    }
-  }
-
-  togglePathRangeIndex(property: PropertyType) {
-    let idx = this.entity.definition.rangeIndex.indexOf(property.name);
-    if (idx >= 0) {
-      this.entity.definition.rangeIndex.splice(idx, 1);
-    } else {
-      this.entity.definition.rangeIndex.push(property.name);
+      // Unset any existing primary key
+      this.entity.definition.properties.map(function(prop) {
+        prop.isPrimaryKey = false;
+      });
+      property.isPrimaryKey = true;
     }
   }
 
@@ -314,24 +311,6 @@ export class EntityEditorComponent {
     }
   }
 
-  toggleWordLexicon(property: PropertyType) {
-    let idx = this.entity.definition.wordLexicon.indexOf(property.name);
-    if (idx >= 0) {
-      this.entity.definition.wordLexicon.splice(idx, 1);
-    } else {
-      this.entity.definition.wordLexicon.push(property.name);
-    }
-  }
-
-  toggleRequired(property: PropertyType) {
-    let idx = this.entity.definition.required.indexOf(property.name);
-    if (idx >= 0) {
-      this.entity.definition.required.splice(idx, 1);
-    } else {
-      this.entity.definition.required.push(property.name);
-    }
-  }
-
   onDescKey($event: KeyboardEvent, propertyIndex: number) {
     if (
       (propertyIndex === (this.entity.definition.properties.length - 1)) &&

quick-start/src/main/ui/app/entity-modeler/entity-modeler.component.ts

@@ -282,14 +282,7 @@ export class EntityModelerComponent implements AfterViewChecked {
   startEditing(entity: Entity) {
     this.entitiesService.editEntity(entity).subscribe(() => {
       this.entitiesService.saveEntity(entity).subscribe(() => {
-        let result = this.dialogService.confirm(`Saved. Update Indexes in MarkLogic?`, 'No', 'Yes');
-        result.subscribe(() => {
-          this.installService.updateIndexes().subscribe(() => {
-            this.snackbar.showSnackbar({
-              message: 'Indexes updated.',
-            });
-          });
-        }, () => {});
+        this.confirmUpdateIndexes()
       });
     },
     // cancel... do nothing
@@ -353,15 +346,54 @@ export class EntityModelerComponent implements AfterViewChecked {
     this.saveUiState();
   }
 
+  /**
+   * Adjust entity container coordinates based on number of entities already in UI
+   * @param {Entity} entity
+   */
+  adjustCoords(entity: Entity) {
+    entity.hubUi.x += 20*this.entities.length;
+    entity.hubUi.y += 30*this.entities.length;
+  }
+
+  /**
+   * Adjust entity container size based on its number of properties
+   * @param {Entity} entity
+   */
+  adjustSize(entity: Entity) {
+    entity.hubUi.height += 22*entity.definition.properties.length;
+  }
+
   addEntity() {
     let entity = new Entity().defaultValues();
     this.entitiesService.editEntity(entity).subscribe(() => {
-      this.entitiesService.saveEntity(entity);
+      this.adjustCoords(entity);
+      this.adjustSize(entity);
+      this.entitiesService.saveEntity(entity).subscribe(() => {
+        this.confirmUpdateIndexes();
+      });
     },
     // cancel... do nothing
     () => {
       console.log('cancel');
     });
   }
 
+  /**
+   * Display confirm dialog and update entity indexes upon confirmation
+   */
+  confirmUpdateIndexes() {
+    let result = this.dialogService.confirm(
+      `Saved. Update Indexes in MarkLogic?`,
+      'No',
+      'Yes'
+    );
+    result.subscribe(() => {
+      this.installService.updateIndexes().subscribe(() => {
+        this.snackbar.showSnackbar({
+          message: 'Indexes updated.',
+        });
+      });
+    }, () => {});
+  }
+
 }