Merge branch 'refactor-task-to-crm' into fix-priority-field

Author: tintinthong

packages/experiments-realm/task.gts

@@ -21,6 +21,7 @@ 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';
@@ -29,6 +30,11 @@ 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 { 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';
 
@@ -148,6 +154,7 @@ export class FittedTask extends Component<typeof TaskBase> {
         </div>
         <div class='short-id-container'>
           <@fields.priority @format='atom' />
+          <ChevronsUp width='14px' height='14px' />
           <span class='short-id'>{{@model.shortId}}</span>
         </div>
       </header>
@@ -650,3 +657,125 @@ export class TaskCompletionStatus extends GlimmerComponent<TaskCompletionStatusS
     </style>
   </template>
 }
+
+export class TaskBase extends CardDef {
+  static displayName = 'Task Base';
+  @field taskName = contains(StringField);
+  @field tags = linksToMany(() => Tag);
+  @field dateRange = contains(DateRangeField);
+  @field status = contains(BaseTaskStatusField);
+  @field taskDetail = contains(TextAreaCard);
+  @field assignee = linksTo(() => User);
+  @field priority = contains(BaseTaskPriority);
+
+  @field title = contains(StringField, {
+    computeVia: function (this: TaskBase) {
+      return this.taskName;
+    },
+  });
+
+  @field shortId = contains(StringField, {
+    computeVia: function (this: TaskBase) {
+      if (this.id) {
+        let id = shortenId(extractId(this.id));
+        return id.toUpperCase();
+      }
+      return;
+    },
+  });
+
+  static fitted = FittedTask;
+}
+
+function extractId(href: string): string {
+  const urlObj = new URL(href);
+  const pathname = urlObj.pathname;
+  const parts = pathname.split('/');
+  const lastPart = parts[parts.length - 1];
+  return lastPart.replace('.json', '');
+}
+
+function shortenId(id: string): string {
+  const shortUuid = id.slice(0, 8);
+  const decimal = parseInt(shortUuid, 16);
+  return decimal.toString(36).padStart(6, '0');
+}
+
+function getDueDateStatus(dueDateString: string | null) {
+  if (!dueDateString) return null;
+
+  const dueDate = new Date(dueDateString);
+  const today = new Date();
+  const nextWeek = addWeeks(today, 1);
+
+  if (isToday(dueDate)) {
+    return {
+      label: 'Due Today',
+      color: '#01de67',
+    };
+  } else if (isThisWeek(dueDate)) {
+    return {
+      label: 'This Week',
+      color: '#ffbc00',
+    };
+  } else if (dueDate > today && dueDate < nextWeek) {
+    return {
+      label: 'Next Week',
+      color: '#4fc8fd',
+    };
+  }
+
+  return null;
+}
+
+interface TaskCompletionStatusSignature {
+  Element: HTMLDivElement;
+  Args: {
+    completed: boolean;
+  };
+}
+
+export class TaskCompletionStatus extends GlimmerComponent<TaskCompletionStatusSignature> {
+  <template>
+    <div class='completion-status' ...attributes>
+      <span class='checkmark {{if @completed "completed"}}'>
+        {{#if @completed}}
+          <CheckMark class='checkmark-icon' />
+        {{/if}}
+      </span>
+    </div>
+
+    <style scoped>
+      .completion-status {
+        --circle-size: var(--boxel-circle-size, 20px);
+        --border-radius: var(
+          --boxel-border-radius,
+          var(--boxel-border-radius-xs)
+        );
+        display: inline-flex;
+        align-items: center;
+      }
+      .checkmark {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: var(--circle-size);
+        width: var(--circle-size);
+        background-color: white;
+        border: 2px solid var(--boxel-400);
+        border-radius: var(--border-radius);
+        transition: all 0.2s ease;
+      }
+      .checkmark.completed {
+        background-color: var(--boxel-highlight);
+        color: white;
+      }
+      .checkmark-icon {
+        --icon-size: calc(var(--circle-size, 20px) * 0.8);
+        width: var(--icon-size);
+        height: var(--icon-size);
+      }
+    </style>
+  </template>
+}