feat(boards): make super basic eisenhower matrix work

src/app/core/model-version.ts

@@ -13,7 +13,8 @@ export enum MODEL_VERSION {
   METRIC = 1.0,
   SIMPLE_COUNTER = 2.1,
   NOTE = 1.0,
-  TAG = 1.0,
+  // new default tags for boards feature
+  TAG = 1.1,
   TASK_REPEAT = 1.43,
 
   // eslint-disable-next-line @typescript-eslint/naming-convention

src/app/features/boards/board-task-list/board-task-list.component.ts

@@ -1,8 +1,16 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
 import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
 import { PlannerTaskComponent } from '../../planner/planner-task/planner-task.component';
+import { BoardPanelCfg } from '../boards.model';
+import { Store } from '@ngrx/store';
+import { selectAllTasks } from '../../tasks/store/task.selectors';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { WorkContextService } from '../../work-context/work-context.service';
 
 @Component({
   selector: 'board-task-list',
@@ -13,7 +21,23 @@ import { WorkContextService } from '../../work-context/work-context.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BoardTaskListComponent {
-  workContextService = inject(WorkContextService);
+  // tasks = input.required<TaskCopy[]>();
+  panelCfg = input.required<BoardPanelCfg>();
 
-  tasks = toSignal(this.workContextService.todaysTasks$);
+  store = inject(Store);
+
+  allTasks$ = this.store.select(selectAllTasks);
+  allTasks = toSignal(this.allTasks$, {
+    initialValue: [],
+  });
+
+  tasks = computed(() => {
+    const panelCfg = this.panelCfg();
+    return this.allTasks().filter((task) => {
+      if (panelCfg.tagIds?.length) {
+        return panelCfg.tagIds!.every((tagId) => task.tagIds.includes(tagId));
+      }
+      return true;
+    });
+  });
 }

src/app/features/boards/board/board.component.html

@@ -6,6 +6,6 @@
         <mat-icon>more_vert</mat-icon>
       </button>
     </header>
-    <board-task-list></board-task-list>
+    <board-task-list [panelCfg]="panel"></board-task-list>
   </div>
 }

src/app/features/boards/boards.const.ts

@@ -1,4 +1,10 @@
 import { BoardCfg } from './boards.model';
+import {
+  IMPORTANT_TAG,
+  NOT_IMPORTANT_TAG,
+  NOT_URGENT_TAG,
+  URGENT_TAG,
+} from '../tag/tag.const';
 
 // TODO translate strings
 export const DEFAULT_BOARDS: BoardCfg[] = [
@@ -11,22 +17,22 @@ export const DEFAULT_BOARDS: BoardCfg[] = [
       {
         id: 'URGENT_AND_IMPORTANT',
         title: 'Urgent & Important',
-        tagIds: [],
+        tagIds: [IMPORTANT_TAG.id, URGENT_TAG.id],
       },
       {
         id: 'NOT_URGENT_AND_IMPORTANT',
         title: 'Not Urgent & Important',
-        tagIds: [],
+        tagIds: [IMPORTANT_TAG.id, NOT_URGENT_TAG.id],
       },
       {
         id: 'URGENT_AND_NOT_IMPORTANT',
         title: 'Urgent & Not Important',
-        tagIds: [],
+        tagIds: [URGENT_TAG.id, NOT_IMPORTANT_TAG.id],
       },
       {
         id: 'NOT_URGENT_AND_NOT_IMPORTANT',
         title: 'Not Urgent & Not Important',
-        tagIds: [],
+        tagIds: [NOT_URGENT_TAG.id, NOT_IMPORTANT_TAG.id],
       },
     ],
   },

src/app/features/tag/migrate-tag-state.util.ts

@@ -2,7 +2,13 @@ import { Dictionary } from '@ngrx/entity';
 import { MODEL_VERSION_KEY } from '../../app.constants';
 import { isMigrateModel } from '../../util/model-version';
 import { Tag, TagCopy, TagState } from './tag.model';
-import { TODAY_TAG } from './tag.const';
+import {
+  IMPORTANT_TAG,
+  NOT_IMPORTANT_TAG,
+  NOT_URGENT_TAG,
+  TODAY_TAG,
+  URGENT_TAG,
+} from './tag.const';
 import { MODEL_VERSION } from '../../core/model-version';
 
 export const migrateTagState = (tagState: TagState): TagState => {
@@ -18,7 +24,11 @@ export const migrateTagState = (tagState: TagState): TagState => {
     // tagEntities[key] = _addNewIssueFields(tagEntities[key] as TagCopy);
   });
 
-  return { ...tagState, entities: tagEntities, [MODEL_VERSION_KEY]: MODEL_VERSION.TAG };
+  return _addDefaultTagsIfNecessary({
+    ...tagState,
+    entities: tagEntities,
+    [MODEL_VERSION_KEY]: MODEL_VERSION.TAG,
+  });
 };
 
 const _addBackgroundImageForDarkTheme = (tag: Tag): Tag => {
@@ -34,3 +44,27 @@ const _addBackgroundImageForDarkTheme = (tag: Tag): Tag => {
     };
   }
 };
+
+const _addDefaultTagsIfNecessary = (tagState: TagState): TagState => {
+  if (tagState.entities[URGENT_TAG.id]) {
+    return tagState;
+  } else {
+    const tagToAdd: Tag[] = [
+      IMPORTANT_TAG,
+      URGENT_TAG,
+      NOT_IMPORTANT_TAG,
+      NOT_URGENT_TAG,
+    ].filter((tag) => !tagState.entities[tag.id]);
+
+    return tagToAdd.reduce<TagState>((acc, tag) => {
+      return {
+        ...acc,
+        entities: {
+          ...acc.entities,
+          [tag.id]: tag,
+        },
+        ids: [...acc.ids, tag.id] as string[],
+      };
+    }, tagState);
+  }
+};

src/app/features/tag/tag.const.ts

@@ -55,3 +55,62 @@ export const NO_LIST_TAG: Tag = {
       : {}) as Partial<WorkContextThemeCfg>),
   },
 };
+
+// TODO translate
+export const URGENT_TAG: Tag = {
+  color: null,
+  created: Date.now(),
+  ...WORK_CONTEXT_DEFAULT_COMMON,
+  icon: 'emergency',
+  title: 'urgent',
+  id: 'EM_URGENT',
+  theme: {
+    ...WORK_CONTEXT_DEFAULT_THEME,
+    primary: '#c618e1',
+    backgroundImageDark: '',
+    isDisableBackgroundGradient: false,
+  },
+};
+
+export const NOT_URGENT_TAG: Tag = {
+  color: null,
+  created: Date.now(),
+  ...WORK_CONTEXT_DEFAULT_COMMON,
+  title: 'not-urgent',
+  id: 'EM_NOT_URGENT',
+  theme: {
+    ...WORK_CONTEXT_DEFAULT_THEME,
+    primary: DEFAULT_TODAY_TAG_COLOR,
+    backgroundImageDark: '',
+    isDisableBackgroundGradient: false,
+  },
+};
+
+export const IMPORTANT_TAG: Tag = {
+  color: null,
+  created: Date.now(),
+  ...WORK_CONTEXT_DEFAULT_COMMON,
+  icon: 'priority_high',
+  title: 'important',
+  id: 'EM_IMPORTANT',
+  theme: {
+    ...WORK_CONTEXT_DEFAULT_THEME,
+    primary: '#e11826',
+    backgroundImageDark: '',
+    isDisableBackgroundGradient: false,
+  },
+};
+
+export const NOT_IMPORTANT_TAG: Tag = {
+  color: null,
+  created: Date.now(),
+  ...WORK_CONTEXT_DEFAULT_COMMON,
+  title: 'not-important',
+  id: 'EM_NOT_IMPORTANT',
+  theme: {
+    ...WORK_CONTEXT_DEFAULT_THEME,
+    primary: DEFAULT_TODAY_TAG_COLOR,
+    backgroundImageDark: '',
+    isDisableBackgroundGradient: false,
+  },
+};