Proper defaulting of thumbnail URL AND role position display (#1951)

* add catalog entry so can create crm app card

* default thumbnailURL only for deal to account. Account requires one otherwise uses an icon

* fix lint

* bad merge

Author: tintinthong

packages/experiments-realm/CatalogEntry/crm-app.json

@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "CrmApp",
+      "description": "Catalog entry for CRM App",
+      "isField": false,
+      "ref": {
+        "module": "../crm-app",
+        "name": "CrmApp"
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}

packages/experiments-realm/components/account-header.gts

@@ -1,4 +1,5 @@
 import GlimmerComponent from '@glimmer/component';
+import ImageIcon from '@cardstack/boxel-icons/image';
 
 interface AccountHeaderArgs {
   Args: {
@@ -15,7 +16,11 @@ interface AccountHeaderArgs {
 class AccountHeader extends GlimmerComponent<AccountHeaderArgs> {
   <template>
     <header class='account-header' ...attributes>
-      <img src={{@logoURL}} alt={{@name}} class='account-header-logo' />
+      {{#if @logoURL}}
+        <img src={{@logoURL}} alt={{@name}} class='account-header-logo' />
+      {{else}}
+        <ImageIcon class='account-header-logo default-icon-container' />
+      {{/if}}
       <div class='account-header-info'>
         {{#if (has-block 'name')}}
           {{yield to='name'}}
@@ -40,6 +45,10 @@ class AccountHeader extends GlimmerComponent<AccountHeaderArgs> {
         object-fit: cover;
         border-radius: var(--boxel-border-radius-xl);
       }
+      .default-icon-container {
+        background-color: var(--boxel-200);
+        color: var(--boxel-400);
+      }
       .account-header-info {
         min-width: 0;
         width: 100%;

packages/experiments-realm/crm/account.gts

@@ -27,10 +27,6 @@ import { LooseGooseyField } from '../loosey-goosey';
 import { StatusPill } from '../components/status-pill';
 
 class IsolatedTemplate extends Component<typeof Account> {
-  get logoURL() {
-    return this.args.model?.thumbnailURL;
-  }
-
   get hasCompanyInfo() {
     return this.args.model?.website || this.args.model?.headquartersAddress;
   }
@@ -45,7 +41,7 @@ class IsolatedTemplate extends Component<typeof Account> {
   <template>
     <AccountPageLayout>
       <:header>
-        <AccountHeader @logoURL={{this.logoURL}} @name={{@model.name}}>
+        <AccountHeader @logoURL={{@model.thumbnailURL}} @name={{@model.name}}>
           <:name>
             {{#if @model.name}}
               <h1 class='account-name'>{{@model.name}}</h1>

packages/experiments-realm/crm/contact.gts

@@ -634,7 +634,7 @@ class AtomTemplate extends Component<typeof Contact> {
           class='avatar'
         />
       {{/if}}
-      <span class='name'>{{@model.name}}</span>
+      <span class='name'>{{this.label}}</span>
     </div>
     <style scoped>
       .contact {

packages/experiments-realm/crm/deal.gts

@@ -49,14 +49,11 @@ interface DealSizeSummary {
 
 class IsolatedTemplate extends Component<typeof Deal> {
   get logoURL() {
+    //We default to account thumbnail
     return (
-      this.args.model.thumbnailURL ??
-      this.args.model.account?.thumbnailURL ??
-      this.args.model.account?.company?.thumbnailURL ??
-      'https://picsum.photos/id/237/200/300'
+      this.args.model.thumbnailURL ?? this.args.model.account?.thumbnailURL
     );
   }
-
   get primaryContactName() {
     console.log(this.args.fields.account?.primaryContact);
     return this.args.model.account?.primaryContact?.name;