Merge pull request #73 from senzingiris/issue70.awinters.1

fix for entity icons #70

src/lib/entity/detail/sz-entity-detail-header/content.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inpu
 
 import { SzSearchResultEntityData } from '../../../models/responces/search-results/sz-search-result-entity-data';
 import { SzEntityDetailSectionData } from '../../../models/entity-detail-section-data';
-import { SzEntityRecord } from '@senzing/rest-api-client-ng';
+import { SzEntityRecord, SzEntityFeature } from '@senzing/rest-api-client-ng';
 
 /**
  * @internal

src/lib/entity/detail/sz-entity-detail-header/header.component.html

@@ -1,10 +1,16 @@
 <div class="detail-header__wrapper">
   <div class="detail-header__top--wrapper">
-    <svg class="icon-user icon-inline icon-flip" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
-    width="190" viewBox="0, 0, 1024, 1024">
-      <g id="icon-user">
+    <svg [ngClass]="iconClasses" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
+    width="190" [attr.viewBox]="iconViewBox">
+      <g id="icon-user-male" class="icon-user-male icon-user-default">
         <path d="M687.543 660.114c7.314 21.943 14.629 43.886 14.629 65.829 0 102.4-87.771 190.171-197.486 190.171s-204.8-87.771-204.8-190.171c0-21.943 7.314-43.886 14.629-65.829-14.629-14.629-21.943-36.571-14.629-65.829 0-21.943 14.629-43.886 29.257-58.514 21.943-117.029 95.086-190.171 182.857-190.171s153.6 73.143 182.857 190.171c0 14.629 14.629 36.571 14.629 58.514 7.314 29.257 0 51.2-21.943 65.829zM687.543 594.286c0-21.943-7.314-36.571-21.943-43.886 0 0-7.314-7.314-7.314-7.314-14.629-102.4-80.457-175.543-153.6-175.543s-138.971 73.143-160.914 175.543c0 0 0 7.314-7.314 7.314-7.314 7.314-14.629 29.257-14.629 43.886 0 29.257 7.314 43.886 14.629 51.2 0 0 7.314 7.314 7.314 7.314 7.314-29.257 14.629-51.2 14.629-36.571 0 29.257-7.314 87.771-7.314 117.029 29.257 21.943 80.457 51.2 124.343 51.2 0 0 0 0 0 0 43.886 0 58.514-14.629 73.143-36.571 14.629-29.257 36.571-51.2 109.714-51.2 0 0 0 0 7.314 0-7.314-29.257-7.314-58.514-7.314-80.457 0-14.629 7.314 7.314 14.629 36.571 0 0 0 0 7.314-7.314 0-7.314 14.629-21.943 7.314-51.2zM680.229 367.543c-29.257-65.829-95.086-117.029-175.543-117.029s-146.286 51.2-175.543 124.343c-146.286-36.571-256-153.6-256-292.571v-95.086h877.714v95.086c0 138.971-117.029 256-270.629 285.257z" />
       </g>
+      <g id="icon-user-female" class="icon-user-female">
+        <path d="M687.543 599.771c-29.257 73.143-95.086 124.343-175.543 124.343s-146.286-51.2-175.543-117.029c-146.286 36.571-256 146.286-256 277.943v95.086h870.4v-95.086c0-138.971-117.029-248.686-263.314-285.257zM768 592.457c0 0-51.2-299.886-65.829-365.714-14.629-87.771-95.086-160.914-197.486-160.914-95.086 0-182.857 65.829-197.486 160.914-7.314 51.2-73.143 329.143-80.457 343.771 0 0 7.314 14.629 95.086-14.629 7.314 0 43.886-14.629 51.2-14.629 36.571 51.2 80.457 80.457 138.971 80.457 51.2 0 102.4-29.257 138.971-87.771 29.257 14.629 14.629 36.571 117.029 58.514zM512 599.771c-43.886 0-80.457-21.943-109.714-65.829v0c0 0-7.314-7.314-7.314-7.314s0 0 0 0-7.314-7.314-7.314-14.629c0 0 0 0 0 0 0-7.314-7.314-7.314-7.314-14.629 0 0 0 0 0 0 0-7.314-7.314-7.314-7.314-14.629 0 0 0 0 0 0-7.314 0-7.314-7.314-7.314-7.314s0 0 0 0c0-7.314 0-7.314-7.314-14.629 0 0 0 0 0 0 0-7.314 0-7.314-7.314-14.629 0 0 0 0 0 0 0-7.314 0-7.314 0-14.629 0 0 0-7.314-7.314-7.314-7.314-7.314-14.629-21.943-14.629-43.886s7.314-43.886 14.629-51.2c0 0 7.314 0 7.314-7.314 14.629 14.629 7.314-7.314 7.314-21.943 0-43.886 0-51.2 0-58.514 29.257-21.943 80.457-51.2 117.029-51.2 0 0 0 0 0 0 43.886 0 51.2 14.629 73.143 36.571 14.629 29.257 43.886 51.2 109.714 51.2 0 0 0 0 7.314 0 0 0 0 14.629 0 29.257s0 43.886 7.314 14.629c0 0 0 0 7.314 7.314s14.629 21.943 14.629 51.2c0 21.943-7.314 36.571-21.943 43.886 0 0-7.314 7.314-7.314 7.314 0 7.314 0 7.314 0 14.629 0 0 0 0 0 0-7.314 7.314-7.314 7.314-7.314 14.629 0 0 0 0 0 0 0 7.314 0 7.314-7.314 14.629 0 0 0 0 0 0 0 7.314 0 7.314-7.314 14.629 0 0 0 0 0 0 0 7.314 0 7.314-7.314 14.629 0 0 0 0 0 0s-0 7.314-0 7.314c0 0 0 0 0 0 0 7.314-7.314 7.314-7.314 14.629 0 0 0 0 0 0s-7.314 7.314-7.314 7.314v0c-29.257 43.886-73.143 65.829-109.714 65.829z" />
+      </g>
+      <g id="icon-user-company" class="icon-user-company">
+        <path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z" />
+      </g>
     </svg>
     <div class="detail-header__top-right">
       <div><span class="detail-header__entity-name">{{bestName | titlecase}}</span></div>

src/lib/entity/detail/sz-entity-detail-header/header.component.scss

@@ -20,23 +20,50 @@
 
 
   .detail-header__top--wrapper {
+    display: flex;
+    svg {
+      display: none;
+    }
     .icon-user {
       /*border: 3px solid $sz-grey;*/
       border: var(--sz-entity-detail-icon-border);
       border-radius: var(--sz-entity-detail-icon-border-radius);
+      background-color: var(--sz-entity-detail-icon-background-color);
       height: var(--sz-entity-detail-icon-height);
       width: var(--sz-entity-detail-icon-width);
       min-height: 120px;
       min-width: 120px;
       display: var(--sz-entity-detail-icon-display);
       margin: var(--sz-entity-detail-icon-margin);
       overflow: hidden;
+      fill: var(--sz-entity-detail-icon-fill);
     }
-    display: flex;
+    /* svg paths by class */
+    .icon-user-female, .icon-user-company, .icon-user-male, .icon-user-default {
+      display: none;
+      fill: none;
+    }
+    /* active svg path styles*/
+    .icon-user.default {
+      .icon-user-default {fill: var(--sz-entity-detail-icon-person-fill); display: inline;}
+    }
+    .icon-user.male {
+      .icon-user-male {fill: var(--sz-entity-detail-icon-person-fill); display: inline;}
+    }
+    .icon-user.female {
+      .icon-user-female {fill: var(--sz-entity-detail-icon-person-fill); display: inline;}
+    }
+    .icon-user.company {
+      fill: var(--sz-entity-detail-icon-company-fill);
 
+      .icon-user-company {
+        fill: inherit;
+        display: inline;
+      }
+    }
+    /* section summary boxes */
     .detail-header__section-summary--wrapper {
       display: flex;
-
       margin: 30px 0 0 0;
     }
     .detail-header__entity-name {

src/lib/entity/detail/sz-entity-detail-header/header.component.ts

@@ -6,7 +6,8 @@ import {
   SzEntityData,
   SzRelatedEntity,
   SzEntityRecord,
-  SzRelationshipType
+  SzRelationshipType,
+  SzEntityFeature
 } from '@senzing/rest-api-client-ng';
 
 /**
@@ -22,7 +23,7 @@ export class SzEntityDetailHeaderComponent implements OnInit {
   @Input() public searchTerm: string;
   @Input() public entity: SzEntityData;
 
-/**
+  /**
    * A list of the search results that are matches.
    * @readonly
    */
@@ -78,9 +79,107 @@ export class SzEntityDetailHeaderComponent implements OnInit {
     }
     return "";
   }
+  /**
+   * returns "M", "F", or undefined if gender cannot be determined.
+   * @param features
+   */
+  private getGenderFromFeatures(features: {[key: string] : SzEntityFeature[]} | undefined | null): string | undefined {
+    if(features){
+      //console.warn('getGenderFromFeatures: ', features.GENDER);
+      if(features.GENDER){
+        // has gender
+        let _gender = features.GENDER;
+        if(_gender.some) {
+          let _female = _gender.some( (val: {primaryValue: string, usageType: any, duplicateValues: any} ) => {
+            return val.primaryValue === "F";
+          });
+          let _male = _gender.some( (val: {primaryValue: string, usageType: any, duplicateValues: any} ) => {
+            return val.primaryValue === "M";
+          });
+          //console.warn('getGenderFromFeatures: ', _female, features.GENDER);
+          return (_female ? 'F' : ( _male ? 'M' : undefined));
+        }
+      }
+    }
+  }
+  /**
+   * returns true if a Entities features collection can identify it as a person.
+   * returns false if a Entities features collection cannot identify it as a company or the entity type cannot be identified.
+   */
+  private isPerson(features: {[key: string] : SzEntityFeature[]} | undefined | null): boolean {
+    if(features) {
+      let hasPersonKey = false;
+      let hasBusinessKey = false;
+      let personKeys = ["DOB","DRLIC","SSN","SSN_LAST4","PASSPORT","GENDER"];
+      personKeys.forEach((keyName) => {
+        if( features[keyName] ){
+          hasPersonKey = true; // has key
+        }
+      });
+      if(features && (features.ORG || features.NAME_ORG)){
+        hasBusinessKey = true;
+      }
+      return (!hasBusinessKey && hasPersonKey);
+    }
+  }
+  /**
+   * returns the svg view box to use for the primary icon
+   * @readonly
+   */
+  public get iconViewBox() {
+    let ret = '0, 0, 1024, 1024';
+    const iconClasses = this.iconClasses;
+    if(iconClasses && iconClasses.indexOf){
 
-  constructor() {
+      if(iconClasses.indexOf('company') >= 0){
+        ret = '0, -5, 24, 32';
+      } else if(iconClasses.indexOf('female') >= 0) {
+        ret = '0, -50, 1024, 1024';
+      }
+    }
+    return ret;
+  }
+  /**
+   * returns string[] of classes to be applied to icon svg element
+   * @readonly
+   */
+  public get iconClasses() {
+    let ret = ['icon-user', 'icon-inline'];
+    if(this.entity && this.entity.resolvedEntity.features) {
+      let isPerson = this.isPerson(this.entity.resolvedEntity.features);
+      let gender = this.getGenderFromFeatures(this.entity.resolvedEntity.features);
+      //console.warn('gender: ', gender);
+      if(gender) {
+        ret.push( (gender == 'F' ? 'female' : 'male') );
+        if(gender == 'M'){
+          ret.push('icon-flip');
+        }
+      } else if(!isPerson) {
+        ret.push('company');
+      } else {
+        ret.push('default'); ret.push('icon-flip');
+      }
+    } else {
+      // default
+      ret.push('default'); ret.push('icon-flip');
+    }
+    //console.log('iconClasses: ', ret);
+    return ret
   }
+  /**
+   * return the gender to be used for the icon.
+   * @returns none | F | M
+   * @readonly
+   */
+  public get iconGender(): string {
+    let gender = 'none';
+    if(this.entity && this.entity.resolvedEntity){
+      gender = this.getGenderFromFeatures(this.entity.resolvedEntity.features)
+    }
+    return gender;
+  }
+
+  constructor() {}
 
   ngOnInit() {}
 

src/lib/scss/theme.scss

@@ -101,6 +101,9 @@ body {
     --sz-entity-detail-icon-width: 175px;
     --sz-entity-detail-icon-border: 3px solid #82848647;
     --sz-entity-detail-icon-border-radius: 50%;
+    --sz-entity-detail-icon-person-fill: #353535;
+    --sz-entity-detail-icon-company-fill: #565656;
+    --sz-entity-detail-icon-background-color: #f3f3f3;
     --sz-entity-detail-icon-margin: 0 30px 30px 20px;
 
     --sz-entity-detail-header-entity-name-font-size: 34px;