query deal (#2075)

cardstack · Jan 24, 2025 · 32a3e8a · 32a3e8a
1 parent 4edc5d9
commit 32a3e8a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 12 deletions.
diff --git a/packages/experiments-realm/crm/account.gts b/packages/experiments-realm/crm/account.gts
@@ -652,6 +652,7 @@ class IsolatedTemplate extends Component<typeof Account> {
       .tasks-summary-card {
         --summary-card-padding: var(--boxel-sp-xl) var(--boxel-sp);
         --summary-card-gap: var(--boxel-sp-lg);
+        --summary-card-content-gap: 0;
         container-type: inline-size;
         container-name: activities-summary-card;
       }

diff --git a/packages/experiments-realm/crm/deal.gts b/packages/experiments-realm/crm/deal.gts
@@ -9,7 +9,7 @@ import {
   FieldDef,
   realmURL,
 } from 'https://cardstack.com/base/card-api';
-import { Component } from 'https://cardstack.com/base/card-api';
+import { Component, BaseDef } from 'https://cardstack.com/base/card-api';
 import DateField from 'https://cardstack.com/base/date';
 import GlimmerComponent from '@glimmer/component';
 import SummaryCard from '../components/summary-card';
@@ -137,6 +137,18 @@ class IsolatedTemplate extends Component<typeof Deal> {
     isLive: true,
   });
 
+  get activeTasksCount() {
+    const tasks = this.activeTasks;
+    if (!tasks || tasks.isLoading) {
+      return 0;
+    }
+    return tasks.instances?.length ?? 0;
+  }
+
+  get hasActiveTasks() {
+    return this.activeTasksCount > 0;
+  }
+
   private _createNewTask = restartableTask(async () => {
     let doc: LooseSingleCardDocument = {
       data: {
@@ -384,7 +396,7 @@ class IsolatedTemplate extends Component<typeof Deal> {
       </:dashboard>
 
       <:summary>
-        <SummaryGridContainer>
+        <SummaryGridContainer class='task-summary-grid'>
           <SummaryCard>
             <:title>
               <label>Company Info</label>
@@ -437,12 +449,13 @@ class IsolatedTemplate extends Component<typeof Deal> {
             </:content>
           </SummaryCard>
 
-          <SummaryCard>
+          <SummaryCard class='tasks-summary-card'>
             <:title>
               <label>Active Tasks</label>
             </:title>
             <:icon>
               <BoxelButton
+                class='sidebar-create-button'
                 @kind='primary'
                 @size='extra-small'
                 @disabled={{this.activeTasks.isLoading}}
@@ -454,13 +467,20 @@ class IsolatedTemplate extends Component<typeof Deal> {
             </:icon>
             <:content>
               {{#if this.activeTasks.isLoading}}
-                Loading...
-              {{else if this.activeTasks.instances}}
-                {{this.activeTasks.instances.length}}
+                <div class='loading-skeleton'>Loading...</div>
               {{else}}
-                <div class='default-value'>
-                  No Active Tasks
-                </div>
+                {{#if this.hasActiveTasks}}
+                  {{#each this.activeTasks.instances as |task|}}
+                    {{#let (getComponent task) as |Component|}}
+                      <Component
+                        @format='embedded'
+                        @displayContainer={{false}}
+                      />
+                    {{/let}}
+                  {{/each}}
+                {{else}}
+                  <p class='description'>No Active Tasks</p>
+                {{/if}}
               {{/if}}
             </:content>
           </SummaryCard>
@@ -480,9 +500,6 @@ class IsolatedTemplate extends Component<typeof Deal> {
         border: 1px solid var(--boxel-200);
         margin: 1.3rem 0;
       }
-      label {
-        font-weight: 500;
-      }
       .mt-5 {
         margin-top: 1rem;
       }
@@ -569,6 +586,16 @@ class IsolatedTemplate extends Component<typeof Deal> {
         margin-right: 1rem;
         margin-top: 0.5rem;
       }
+      /* Task Summary Grid & Card */
+      .task-summary-grid {
+        --summary-card-min-height: 180px;
+      }
+      .tasks-summary-card :where(.task-card) {
+        --task-card-padding: var(--boxel-sp-xxxs) 0;
+      }
+      .sidebar-create-button {
+        font-weight: 600;
+      }
       /* footer */
       .next-steps {
         display: flex;
@@ -1187,3 +1214,7 @@ class DealPageLayout extends GlimmerComponent<DealPageLayoutArgs> {
     </style>
   </template>
 }
+
+function getComponent(cardOrField: BaseDef) {
+  return cardOrField.constructor.getComponent(cardOrField);
+}