implement deal filter (#1999)

* implement deal filter * add icon to strip view
cardstack · Jan 6, 2025 · 0570b8c · 0570b8c
1 parent 707cc10
commit 0570b8c
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 42 deletions.
diff --git a/packages/experiments-realm/Deal/4fdd3053-14f1-4800-827f-d3e2a5c44ae8.json b/packages/experiments-realm/Deal/4fdd3053-14f1-4800-827f-d3e2a5c44ae8.json
@@ -2,7 +2,7 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": null,
+      "name": "Demo Deal Name",
       "status": {
         "index": 1,
         "label": "Proposal",

diff --git a/packages/experiments-realm/Deal/f0d769bd-e347-4203-9a96-89332cfba0e2.json b/packages/experiments-realm/Deal/f0d769bd-e347-4203-9a96-89332cfba0e2.json
@@ -2,10 +2,67 @@
   "data": {
     "type": "card",
     "attributes": {
+      "name": null,
+      "status": {
+        "index": 3,
+        "label": "Closed Won",
+        "color": null,
+        "colorScheme": {
+          "foregroundColor": "#000000",
+          "backgroundColor": "#E8F5E9"
+        }
+      },
+      "priority": {
+        "index": null,
+        "label": null,
+        "color": null,
+        "colorScheme": {
+          "foregroundColor": null,
+          "backgroundColor": null
+        }
+      },
+      "closeDate": null,
+      "currentValue": {
+        "amount": null,
+        "currency": {
+          "code": null
+        }
+      },
+      "predictedRevenue": {
+        "amount": null,
+        "currency": {
+          "code": null
+        }
+      },
+      "healthScore": null,
+      "notes": null,
+      "valueBreakdown": [],
       "title": null,
       "description": null,
       "thumbnailURL": null
     },
+    "relationships": {
+      "account": {
+        "links": {
+          "self": null
+        }
+      },
+      "document": {
+        "links": {
+          "self": null
+        }
+      },
+      "primaryStakeholder": {
+        "links": {
+          "self": null
+        }
+      },
+      "stakeholders": {
+        "links": {
+          "self": null
+        }
+      }
+    },
     "meta": {
       "adoptsFrom": {
         "module": "../crm/deal",

diff --git a/packages/experiments-realm/crm-app.gts b/packages/experiments-realm/crm-app.gts
@@ -29,6 +29,7 @@ import HeartHandshakeIcon from '@cardstack/boxel-icons/heart-handshake';
 import TargetArrowIcon from '@cardstack/boxel-icons/target-arrow';
 import CalendarExclamation from '@cardstack/boxel-icons/calendar-exclamation';
 import { urgencyTagValues } from './crm/account';
+import { dealStatusValues } from './crm/deal';
 
 type ViewOption = 'card' | 'strip' | 'grid';
 
@@ -66,6 +67,12 @@ const DEAL_FILTERS: LayoutFilter[] = [
     cardTypeName: 'CRM Deal',
     createNewButtonText: 'Create Deal',
   },
+  ...dealStatusValues.map((status) => ({
+    displayName: status.label,
+    icon: status.icon,
+    cardTypeName: 'CRM Deal',
+    createNewButtonText: status.buttonText,
+  })),
 ];
 // Map with urgencyTagValues array from crm/account.gts
 const ACCOUNT_FILTERS: LayoutFilter[] = [
@@ -234,6 +241,19 @@ class CrmAppTemplate extends Component<typeof AppCard> {
           ]
         : [];
 
+    // filter field value by CRM Deal
+    const dealFilter =
+      activeTabId === 'Deal' && activeFilter.displayName !== 'All Deals'
+        ? [
+            {
+              on: activeFilter.cardRef,
+              eq: {
+                'status.label': activeFilter.displayName,
+              },
+            },
+          ]
+        : [];
+
     const searchFilter = searchKey
       ? [
           {
@@ -254,7 +274,12 @@ class CrmAppTemplate extends Component<typeof AppCard> {
     return {
       filter: {
         on: activeFilter.cardRef,
-        every: [defaultFilter, ...accountFilter, ...searchFilter],
+        every: [
+          defaultFilter,
+          ...accountFilter,
+          ...dealFilter,
+          ...searchFilter,
+        ],
       },
       sort: this.selectedSort?.sort ?? sortByCardTitleAsc,
     } as Query;

diff --git a/packages/experiments-realm/crm/deal.gts b/packages/experiments-realm/crm/deal.gts
@@ -32,6 +32,11 @@ import { Contact } from './contact';
 import { ContactRow } from '../components/contact-row';
 import Users from '@cardstack/boxel-icons/users';
 import World from '@cardstack/boxel-icons/world';
+import FilterSearch from '@cardstack/boxel-icons/filter-search';
+import FilePen from '@cardstack/boxel-icons/file-pen';
+import ArrowLeftRight from '@cardstack/boxel-icons/arrow-left-right';
+import Award from '@cardstack/boxel-icons/award';
+import AwardOff from '@cardstack/boxel-icons/award-off';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import { Document } from './document';
@@ -589,7 +594,7 @@ class FittedTemplate extends Component<typeof Deal> {
         </AccountHeader>
 
         <div class='deal-status'>
-          {{@model.status.label}}
+          <@fields.status @format='atom' @displayContainer={{false}} />
         </div>
       </header>
 
@@ -762,50 +767,85 @@ class FittedTemplate extends Component<typeof Deal> {
   </template>
 }
 
-class DealStatus extends LooseGooseyField {
-  static displayName = 'CRM Deal Status';
-  static values = [
-    {
-      index: 0,
-      label: 'Discovery',
-      colorScheme: {
-        foregroundColor: '#000000',
-        backgroundColor: '#E3F2FD',
-      },
+export const dealStatusValues = [
+  {
+    index: 0,
+    icon: FilterSearch,
+    label: 'Discovery',
+    value: 'discovery',
+    buttonText: 'Create Deal', // TODO: For the createNewButtonText usage in CRM App
+    colorScheme: {
+      foregroundColor: '#D32F2F', // Dark Red
+      backgroundColor: '#FFEBEE', // Light Red
     },
-    {
-      index: 1,
-      label: 'Proposal',
-      colorScheme: {
-        foregroundColor: '#000000',
-        backgroundColor: 'var(--boxel-lilac)',
-      },
+  },
+  {
+    index: 1,
+    icon: FilePen,
+    label: 'Proposal',
+    value: 'proposal',
+    buttonText: 'Create Deal',
+    colorScheme: {
+      foregroundColor: '#000000',
+      backgroundColor: 'var(--boxel-lilac)',
     },
-    {
-      index: 2,
-      label: 'Negotiation',
-      colorScheme: {
-        foregroundColor: '#000000',
-        backgroundColor: '#FFF3E0', // light orange
-      },
+  },
+  {
+    index: 2,
+    icon: ArrowLeftRight,
+    label: 'Negotiation',
+    value: 'negotiation',
+    buttonText: 'Create Deal',
+    colorScheme: {
+      foregroundColor: '#000000',
+      backgroundColor: '#FFF3E0', // light orange
     },
-    {
-      index: 3,
-      label: 'Closed Won',
-      colorScheme: {
-        foregroundColor: '#000000',
-        backgroundColor: '#E8F5E9', // light green
-      },
+  },
+  {
+    index: 3,
+    icon: Award,
+    label: 'Closed Won',
+    value: 'closed-won',
+    buttonText: 'Create Deal',
+    colorScheme: {
+      foregroundColor: '#000000',
+      backgroundColor: '#E8F5E9', // light green
     },
-    {
-      index: 4,
-      label: 'Closed Lost',
-      colorScheme: {
-        foregroundColor: '#000000',
-        backgroundColor: '#FFEBEE', // light red
-      },
+  },
+  {
+    index: 4,
+    icon: AwardOff,
+    label: 'Closed Lost',
+    value: 'closed-lost',
+    buttonText: 'Create Deal',
+    colorScheme: {
+      foregroundColor: '#000000',
+      backgroundColor: '#FFEBEE', // light red
     },
-  ];
+  },
+];
+
+class DealStatus extends LooseGooseyField {
+  static displayName = 'CRM Deal Status';
+  static values = dealStatusValues;
+
+  static atom = class Atom extends Component<typeof this> {
+    get statusData() {
+      return dealStatusValues.find(
+        (status) => status.label === this.args.model.label,
+      );
+    }
+
+    <template>
+      {{#if @model.label}}
+        <EntityDisplayWithIcon @title={{@model.label}}>
+          <:icon>
+            {{this.statusData.icon}}
+          </:icon>
+        </EntityDisplayWithIcon>
+      {{/if}}
+    </template>
+  };
 }
 
 export class DealPriority extends LooseGooseyField {