WIP pref dict component (working grid) #105

src/lib/configuration/sz-preferences/sz-pref-dict/sz-pref-dict.component.html

@@ -1,3 +1,21 @@
 <div class="sz-pref-dict">
-  SzPrefDictComponent skeleton
+  <div class="value-pair">
+    <div class="value-pair-header">
+      <div class="value-pair-header-cell">{{ keyTitle }}</div>
+      <div class="value-pair-header-cell">{{ valueTitle }}</div>
+    </div>
+  </div>
+  <div class="value-pair" *ngFor="let valuePair of valueAsArray">
+    <div class="value-pair-row">
+      <button class="button-del" (click)="deleteProperty(valuePair.name)">-</button>
+      <input type="text "[id]="'dict-input-'+valuePair.name+'-key'"
+        [placeholder]="keyPlaceholder"
+        (change)="onKeyChange(valuePair.name, $event)"
+        class="text value-pair-row-cell first-child" [value]="valuePair.name"/>
+      <input type="text" [id]="'dict-input-'+valuePair.name+'-value'"
+        (change)="onValueChange(valuePair.name, $event)"
+        class="text value-pair-row-cell" [value]="valuePair.value"/>
+    </div>
+  </div>
+  <button class="button-add" (click)="addProperty()">+</button>
 </div>

src/lib/configuration/sz-preferences/sz-pref-dict/sz-pref-dict.component.scss

@@ -1,6 +1,70 @@
 
 :host {
-  border: 1px solid orange;
   border-radius: 3px;
   display: block;
+
+  input[type=text], input.text {
+    padding: 4px;
+    border-radius: 0;
+    border: 0;
+  }
+
+  .value-pair {
+    display: block;
+
+    .value-pair-header {
+      background-color: #a5a5a5;
+      display: flex;
+      flex-wrap: nowrap;
+      /* justify-content: flex-end;*/
+      flex-direction: row;
+      align-content: space-around;
+      justify-content: space-evenly;
+
+      .value-pair-header-cell {
+        border-right: 1px solid #5e5e5e;
+        padding: 1px 8px 1px 8px;
+        width: 50%;
+      }
+      .value-pair-header-cell:last-child {
+        border-right: 0;
+      }
+    }
+
+    .value-pair-row {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: flex-end;
+      flex-direction: row;
+      border-bottom: 1px solid #5e5e5e;
+      margin-bottom: .3em;
+
+      .button-del {
+        width: 20px;
+      }
+
+      .value-pair-row-cell {
+        border: 0;
+        border-right: 1px solid #5e5e5e;
+        padding: 1px 8px 1px 8px;
+        width: 50%;
+      }
+      .value-pair-row-cell:first-child,
+      .value-pair-row-cell.first-child {
+        /* the first item should include space for button */
+        width: calc(50% - 21px);
+      }
+      .value-pair-row-cell:last-child {
+        border-right: 0;
+      }
+
+      label {
+        margin-right: .8em;
+      }
+    }
+    .value-pair-row:last-child {
+      margin-bottom: 0;
+      border-bottom: 0;
+    }
+  }
 }

src/lib/configuration/sz-preferences/sz-pref-dict/sz-pref-dict.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, Input } from '@angular/core';
 import { Configuration as SzRestConfiguration } from '@senzing/rest-api-client-ng';
 
 /**
@@ -16,7 +16,107 @@ import { Configuration as SzRestConfiguration } from '@senzing/rest-api-client-n
   styleUrls: ['./sz-pref-dict.component.scss']
 })
 export class SzPrefDictComponent implements OnInit {
-  public apiProperties: object[];
+
+  public keyTitle = "datasource";
+  public valueTitle = "color";
+
+  public newKeyPrefix = "DataSourceName";
+  public keyPlaceholder = "Data Source Name";
+
+
+  public _data: any = {
+    'OWNERS': 'red',
+    'SAMPLE_PERSON': 'purple',
+  };
+
+  private _newKeyMaxInt = Object.keys(this._data).length + 1;
+
+  @Input() public set value(val: any) {
+    const isInitialValue = (this._data == undefined) ? true : false;
+    this._data = val;
+    if(isInitialValue) {
+      this._newKeyMaxInt = Object.keys(this._data).length + 1;
+    }
+  }
+  public get value() {
+    return this._data;
+  }
+
+  public get valueAsArray() {
+    let retVal = [];
+    if(this._data && typeof this._data == 'object') {
+      let _keys = Object.keys(this._data);
+      retVal = _keys.map( (_kname) => {
+        return {'name': _kname, 'value': this._data[_kname]}
+      })
+    }
+    return retVal;
+  }
+
+  public deleteProperty(propertyKey: string) {
+    if(this._data && this._data[propertyKey]){
+      // remove property from data object
+      delete this._data[propertyKey];
+    }
+    try {
+      delete this._data[propertyKey];
+    } catch(err) {
+          console.log('deleteProperty('+propertyKey+')  error: ', err);
+    }
+    console.log('deleteProperty('+propertyKey+')  _data: ', this._data);
+  }
+
+  public addProperty(propertyKey?: string) {
+    if(propertyKey) {
+      if(this._data && this._data[propertyKey]){
+        // property already exists just update
+        // focus on element input and highlight text
+      }
+      console.log('propertyKey already defined: ', this._data[propertyKey]);
+    } else {
+      // autogen property key (cant have a value with no key in a JSON object)
+      let _newKeyName = this.newKeyPrefix + this._newKeyMaxInt;
+      this._newKeyMaxInt = this._newKeyMaxInt + 1; // bump next value up by one so were less likely to repeat
+      this._data[_newKeyName] = '';
+      console.log('added "'+ _newKeyName +'"');
+    }
+  }
+
+  public onValueChange(propertyKey, evt) {
+    if(propertyKey && evt && evt.target && evt.target.value){
+      const newValue   = evt.target.value;
+      this._data[propertyKey] = newValue;
+    } else {
+      console.warn('could not update value: ', evt, this._data);
+    }
+  }
+
+  public onKeyChange(propertyKey, evt) {
+    const _oldData = this._data;
+    const oldKey   = propertyKey;
+    const oldValue = _oldData[propertyKey];
+    let isOldKeySameAsNewOne = false;
+
+    if(evt && evt.target && evt.target.value){
+      const newKey   = evt.target.value;
+      if(oldKey == newKey) {
+        isOldKeySameAsNewOne = true;
+      }
+       try {
+        delete _oldData[propertyKey];
+      } catch(err) {
+            console.log('could not remove old key ('+propertyKey+')  error: ', err);
+      }
+      // add new one
+      _oldData[newKey] = oldValue;
+      this._data = _oldData;
+    }
+    console.log('onKeyChange: ', propertyKey, this._data);
+
+    if(!isOldKeySameAsNewOne) {
+      this._newKeyMaxInt = this._newKeyMaxInt + 1; // bump next value up by one so were less likely to repeat
+    }
+  }
 
   constructor(@Inject(SzRestConfiguration) public apiConfiguration: SzRestConfiguration) {}
 
@@ -32,10 +132,6 @@ export class SzPrefDictComponent implements OnInit {
     return retArr;
   }
 
-  ngOnInit() {
-    if(this.apiConfiguration){
-      this.apiProperties = this.getPropsAsArray();
-    }
-  }
+  ngOnInit() {}
 
 }