Fix priority icons for task (#1874)

* refactor task to be common to crm

* fix priority icons

* fix css gap

* fix priority icon to be displayed

* more fix on completed status

Author: tintinthong

packages/experiments-realm/TaskBase/c0bf3231-435c-4363-ad92-a1d756aea8d9.json

@@ -12,6 +12,10 @@
         "label": "In Progress"
       },
       "taskDetail": null,
+      "priority": {
+        "index": 1,
+        "label": "Low"
+      },
       "description": null,
       "thumbnailURL": null
     },
@@ -34,4 +38,4 @@
       }
     }
   }
-}
+}

packages/experiments-realm/loosey-goosey.gts

@@ -5,11 +5,13 @@ import {
   StringField,
 } from 'https://cardstack.com/base/card-api';
 import NumberField from 'https://cardstack.com/base/number';
+import type IconComponent from '@cardstack/boxel-icons/captions';
 
 export interface LooseyGooseyData {
   index: number;
   label: string;
   color?: string;
+  icon?: typeof IconComponent;
 }
 
 export class LooseGooseyField extends FieldDef {

packages/experiments-realm/task.gts

@@ -21,10 +21,14 @@ import { LooseGooseyField, type LooseyGooseyData } from './loosey-goosey';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { fn } from '@ember/helper';
+import ChevronsUp from '@cardstack/boxel-icons/chevrons-up';
+import ChevronUp from '@cardstack/boxel-icons/chevron-up';
+import ChevronsDown from '@cardstack/boxel-icons/chevrons-down';
+import ChevronDown from '@cardstack/boxel-icons/chevrons-down';
+import CircleEqual from '@cardstack/boxel-icons/circle-equal';
 import { isToday, isThisWeek, addWeeks } from 'date-fns';
 import GlimmerComponent from '@glimmer/component';
 import Calendar from '@cardstack/boxel-icons/calendar';
-import ChevronsUp from '@cardstack/boxel-icons/chevrons-up';
 import { Pill } from '@cardstack/boxel-ui/components';
 import { CheckMark } from '@cardstack/boxel-ui/icons';
 
@@ -143,7 +147,7 @@ export class FittedTask extends Component<typeof TaskBase> {
           {{/if}}
         </div>
         <div class='short-id-container'>
-          <ChevronsUp width='14px' height='14px' />
+          <@fields.priority @format='atom' />
           <span class='short-id'>{{@model.shortId}}</span>
         </div>
       </header>
@@ -229,7 +233,7 @@ export class FittedTask extends Component<typeof TaskBase> {
       .short-id-container {
         display: flex;
         align-items: center;
-        gap: var(--boxel-sp-3xs);
+        gap: var(--boxel-sp-xxxs);
         margin-left: auto;
       }
       .short-id {
@@ -483,14 +487,22 @@ class EditPriority extends Component<typeof BaseTaskPriority> {
 export class BaseTaskPriority extends LooseGooseyField {
   // loosey goosey pattern
   static values = [
-    { index: 0, label: 'Low' },
+    { index: 0, label: 'Lowest', icon: ChevronsDown },
+    { index: 1, label: 'Low', icon: ChevronDown },
     {
-      index: 1,
+      index: 2,
       label: 'Medium',
+      icon: CircleEqual,
     },
     {
-      index: 2,
+      index: 3,
       label: 'High',
+      icon: ChevronUp,
+    },
+    {
+      index: 4,
+      label: 'Highest',
+      icon: ChevronsUp,
     },
   ];
 
@@ -500,6 +512,21 @@ export class BaseTaskPriority extends LooseGooseyField {
       {{@model.label}}
     </template>
   };
+
+  static atom = class Atom extends Component<typeof this> {
+    get selectedPriority() {
+      return BaseTaskPriority.values.find((priority) => {
+        return priority.label === this.args.model.label;
+      });
+    }
+
+    get selectedIcon() {
+      return this.selectedPriority?.icon;
+    }
+    <template>
+      <this.selectedIcon width='14px' height='14px' />
+    </template>
+  };
 }
 
 export class TaskBase extends CardDef {