Merge pull request #70 from raywo-personal/67-add-color-to-prior-know…

…ledge 67-add-color-to-prior-knowledge
raywo-personal · Jan 3, 2025 · 0da13f8 · 0da13f8
2 parents c866b9f + 7b47635
commit 0da13f8
Show file tree

Hide file tree

Showing 26 changed files with 467 additions and 122 deletions.
diff --git a/src/app/persons/components/person-knowledge-edit/person-knowledge-edit.component.html b/src/app/persons/components/person-knowledge-edit/person-knowledge-edit.component.html
@@ -7,8 +7,10 @@
       formControlName="selected"
     >
     <label class="form-check-label d-flex flex-column" for="knowledge_{{ knowledgeId }}">
-      {{ knowledge?.name }}
-      <small class="text-muted">{{ knowledge?.description }}</small>
+      <div [class]="badgeCSSClass(knowledge?.color || 'gray')">
+        <div class="fw-bold">{{ knowledge?.name }}</div>
+        <span class="text-muted">{{ knowledge?.description }}</span>
+      </div>
     </label>
   </div>
 

diff --git a/src/app/persons/components/person-knowledge-edit/person-knowledge-edit.component.ts b/src/app/persons/components/person-knowledge-edit/person-knowledge-edit.component.ts
@@ -3,6 +3,7 @@ import {PersonKnowledgeForm} from '../../models/person-form.model';
 import {FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {SetCustomValidityDirective} from '../../../shared/directives/set-custom-validity.directive';
 import {PriorKnowledge} from '../../../prior-knowledge/models/prior-knowledge.model';
+import {badgeCSSClass} from "../../../shared/data/default-colors.data";
 
 
 @Component({
@@ -21,6 +22,8 @@ export class PersonKnowledgeEditComponent {
   protected knowledgeId: string = "";
   protected knowledge?: PriorKnowledge;
 
+  protected readonly badgeCSSClass = badgeCSSClass;
+
 
   constructor() {
     effect(() => {
@@ -40,4 +43,5 @@ export class PersonKnowledgeEditComponent {
 
     return remarkControl.touched || remarkControl.dirty;
   }
+
 }
diff --git a/src/app/persons/components/person-view/person-view.component.html b/src/app/persons/components/person-view/person-view.component.html
@@ -12,6 +12,20 @@ <h4 class="person-view-title">{{ person().name }}</h4>
         <p class="person-view-info">{{ person().info }}</p>
       </div>
 
+      <div class="person-view-knowledge">
+        @for (knowledge of person().priorKnowledge; track knowledge.priorKnowledge.id) {
+          <div [class]="dotCSSClass(knowledge.priorKnowledge.color)"
+               [ngbTooltip]="tooltip"
+               [tooltipClass]="tooltipCSSClass(knowledge.priorKnowledge.color)">
+          </div>
+
+          <ng-template #tooltip>
+            <div><strong>{{ knowledge.priorKnowledge.name }}: </strong></div>
+            <div>{{ knowledge.remark }}</div>
+          </ng-template>
+        }
+      </div>
+
       <div class="person-view-slots">
         @for (slotPriority of slotKeys; track $index) {
           <div class="person-view-slot">
@@ -37,14 +51,8 @@ <h4 class="person-view-title">{{ person().name }}</h4>
 
     <div class="person-view-knowledge">
       @for (knowledge of person().priorKnowledge; track knowledge.priorKnowledge.id) {
-        <div class="knowledge-pill"
-             ngbPopover="{{ knowledge.remark }}"
-             triggers="mouseenter:mouseleave"
-             [openDelay]="300"
-             [closeDelay]="150">
-          <div class="knowledge-pill-title">{{ knowledge.priorKnowledge.name }}</div>
-          <div class="knowledge-pill-remark">{{ knowledge.remark }}</div>
-        </div>
+        <app-prior-knowledge-pill [knowledge]="knowledge.priorKnowledge"
+                                  [remark]="knowledge.remark"/>
       }
     </div>
   </div>

diff --git a/src/app/persons/components/person-view/person-view.component.ts b/src/app/persons/components/person-view/person-view.component.ts
@@ -3,20 +3,23 @@ import {Person} from '../../models/person.model';
 import {DeleteButtonComponent} from '../../../shared/components/delete-button/delete-button.component';
 import {PersonTimeSlot} from '../../models/person-timeslot.model';
 import {CdkDragHandle} from '@angular/cdk/drag-drop';
-import {NgbDropdown, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle, NgbPopover} from '@ng-bootstrap/ng-bootstrap';
+import {NgbDropdown, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle, NgbTooltip} from '@ng-bootstrap/ng-bootstrap';
 import {timeCompare} from '../../../shared/helper/comparison';
+import {PriorKnowledgePillComponent} from '../../../prior-knowledge/components/prior-knowledge-pill/prior-knowledge-pill.component';
+import {dotCSSClass, tooltipCSSClass} from '../../../shared/data/default-colors.data';
 
 
 @Component({
   selector: 'app-person-view',
   imports: [
     DeleteButtonComponent,
     CdkDragHandle,
-    NgbPopover,
     NgbDropdown,
     NgbDropdownToggle,
     NgbDropdownMenu,
-    NgbDropdownItem
+    NgbDropdownItem,
+    PriorKnowledgePillComponent,
+    NgbTooltip
   ],
   templateUrl: './person-view.component.html',
   styleUrl: './person-view.component.scss'
@@ -29,6 +32,9 @@ export class PersonViewComponent {
   public edit = output<Person>();
   public delete = output<Person>();
 
+  protected readonly dotCSSClass = dotCSSClass;
+  protected readonly tooltipCSSClass = tooltipCSSClass;
+
 
   protected slots = computed(() => {
     const person = this.person();
@@ -63,4 +69,5 @@ export class PersonViewComponent {
   protected onDelete() {
     this.delete.emit(this.person());
   }
+
 }
diff --git a/...knowledge/components/prior-knowledge-badge-list/prior-knowledge-badge-list.component.html b/...knowledge/components/prior-knowledge-badge-list/prior-knowledge-badge-list.component.html
@@ -0,0 +1,6 @@
+<div class="knowledge-badge-list">
+  @for (knowledge of knowledgeList$ | async; track knowledge.id) {
+    <app-prior-knowledge-pill [knowledge]="knowledge"
+                              [remark]="knowledge.description"/>
+  }
+</div>
diff --git a/...knowledge/components/prior-knowledge-badge-list/prior-knowledge-badge-list.component.scss b/...knowledge/components/prior-knowledge-badge-list/prior-knowledge-badge-list.component.scss
diff --git a/...wledge/components/prior-knowledge-badge-list/prior-knowledge-badge-list.component.spec.ts b/...wledge/components/prior-knowledge-badge-list/prior-knowledge-badge-list.component.spec.ts
@@ -0,0 +1,24 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PriorKnowledgeBadgeListComponent} from './prior-knowledge-badge-list.component';
+
+
+describe('PriorKnowledgeBadgeListComponent', () => {
+  let component: PriorKnowledgeBadgeListComponent;
+  let fixture: ComponentFixture<PriorKnowledgeBadgeListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PriorKnowledgeBadgeListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PriorKnowledgeBadgeListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...r-knowledge/components/prior-knowledge-badge-list/prior-knowledge-badge-list.component.ts b/...r-knowledge/components/prior-knowledge-badge-list/prior-knowledge-badge-list.component.ts
@@ -0,0 +1,22 @@
+import {Component, inject} from '@angular/core';
+import {PriorKnowledgeService} from '../../services/prior-knowledge.service';
+import {AsyncPipe} from '@angular/common';
+import {PriorKnowledgePillComponent} from '../prior-knowledge-pill/prior-knowledge-pill.component';
+
+
+@Component({
+  selector: 'app-prior-knowledge-badge-list',
+  imports: [
+    AsyncPipe,
+    PriorKnowledgePillComponent
+  ],
+  templateUrl: './prior-knowledge-badge-list.component.html',
+  styleUrl: './prior-knowledge-badge-list.component.scss'
+})
+export class PriorKnowledgeBadgeListComponent {
+
+  private knowledgeService = inject(PriorKnowledgeService);
+
+  protected knowledgeList$ = this.knowledgeService.knowledgeList$;
+
+}
diff --git a/src/app/prior-knowledge/components/prior-knowledge-edit/prior-knowledge-edit.component.html b/src/app/prior-knowledge/components/prior-knowledge-edit/prior-knowledge-edit.component.html
@@ -1,46 +1,62 @@
 <form (ngSubmit)="onSubmit()" #form="ngForm"
       class="offcanvas-form">
   <div class="offcanvas-body">
-  <div class="form-floating mb-3"
-       [class.was-validated]="nameInput.dirty || nameInput.touched">
-    <input
-      type="text"
-      class="form-control"
-      id="name"
-      name="name"
-      [(ngModel)]="name"
-      required
-      minlength="2"
-      maxlength="50"
-      placeholder="Name"
-      autofocus
-      #nameInput="ngModel"
-    />
-    <label for="name">Name</label>
-    <div class="invalid-feedback">
-      Please enter a name (2-50 characters).
+    <div class="form-floating mb-3"
+         [class.was-validated]="nameInput.dirty || nameInput.touched">
+      <input
+        type="text"
+        class="form-control"
+        id="name"
+        name="name"
+        [(ngModel)]="name"
+        required
+        minlength="2"
+        maxlength="50"
+        placeholder="Name"
+        autofocus
+        #nameInput="ngModel"
+      />
+      <label for="name">Name</label>
+      <div class="invalid-feedback">
+        Please enter a name (2-50 characters).
+      </div>
     </div>
-  </div>
 
-  <div class="form-floating mb-3"
-       [class.was-validated]="descriptionInput.dirty || descriptionInput.touched">
-    <input
-      class="form-control"
-      id="description"
-      name="description"
-      [(ngModel)]="description"
-      minlength="2"
-      maxlength="160"
-      placeholder="Description"
-      #descriptionInput="ngModel"
-    />
-    <label for="description">Description</label>
-    <div class="invalid-feedback">
-      Please enter a description (2-160 characters).
+    <div class="form-floating mb-3"
+         [class.was-validated]="descriptionInput.dirty || descriptionInput.touched">
+      <input
+        class="form-control"
+        id="description"
+        name="description"
+        [(ngModel)]="description"
+        minlength="2"
+        maxlength="160"
+        placeholder="Description"
+        #descriptionInput="ngModel"
+      />
+      <label for="description">Description</label>
+      <div class="invalid-feedback">
+        Please enter a description (2-160 characters).
+      </div>
     </div>
-  </div>
 
-  <div class="max-height"></div>
+    <label for="color" class="mb-2">Color</label>
+    <div id="color" class="row gap-2">
+      @for (clr of colors.keys(); track $index) {
+        <div class="col mb-2">
+          <div [class]="dotCSSClass(clr)"
+               class="color-picker-dot focus-ring text-center align-items-center pt-1 pointer"
+               [ngbTooltip]="colors.get(clr)?.name"
+               tabindex="0"
+               (keyup)="onColorKeySelected($event, clr)"
+               (click)="onColorSelected(clr)">
+            @if (clr === color) {
+              <i class="bi-check fs-1" [class]="fgCSSClass(clr)"></i>
+            }
+          </div>
+        </div>
+      }
+    </div>
   </div>
 
   <div class="offcanvas-footer">

diff --git a/src/app/prior-knowledge/components/prior-knowledge-edit/prior-knowledge-edit.component.ts b/src/app/prior-knowledge/components/prior-knowledge-edit/prior-knowledge-edit.component.ts
@@ -2,27 +2,35 @@ import {Component, effect, inject, input, output} from '@angular/core';
 import {PriorKnowledge} from '../../models/prior-knowledge.model';
 import {FormsModule} from '@angular/forms';
 import {PriorKnowledgeService} from '../../services/prior-knowledge.service';
+import {colors, dotCSSClass, fgCSSClass} from '../../../shared/data/default-colors.data';
+import {NgbTooltip} from '@ng-bootstrap/ng-bootstrap';
 
 
 @Component({
   selector: 'app-prior-knowledge-edit',
   imports: [
-    FormsModule
+    FormsModule,
+    NgbTooltip
   ],
   templateUrl: './prior-knowledge-edit.component.html',
   styleUrl: './prior-knowledge-edit.component.scss'
 })
 export class PriorKnowledgeEditComponent {
 
+  private knowledgeService = inject(PriorKnowledgeService);
+
   public knowledge = input<PriorKnowledge>();
   public edit = input<boolean>(false);
   public saved = output<PriorKnowledge>();
   public cancelled = output<void>();
 
   protected name: string = "";
   protected description: string = "";
+  protected color: string = "gray";
 
-  private knowledgeService = inject(PriorKnowledgeService);
+  protected readonly colors = colors;
+  protected readonly dotCSSClass = dotCSSClass;
+  protected readonly fgCSSClass = fgCSSClass;
 
 
   constructor() {
@@ -32,16 +40,18 @@ export class PriorKnowledgeEditComponent {
       if (knowledge) {
         this.name = knowledge.name;
         this.description = knowledge.description;
+        this.color = knowledge.color;
       }
     });
   }
 
 
   protected onSubmit() {
-    const knowledge = {
+    const knowledge: PriorKnowledge = {
       id: this.knowledge()?.id,
       name: this.name,
-      description: this.description
+      description: this.description,
+      color: this.color
     }
 
     if (this.edit()) {
@@ -57,4 +67,16 @@ export class PriorKnowledgeEditComponent {
   onCancel() {
     this.cancelled.emit();
   }
+
+
+  protected onColorSelected(color: string) {
+    this.color = color;
+  }
+
+
+  protected onColorKeySelected(keyboardEvent: KeyboardEvent, color: string) {
+    if (keyboardEvent.code === "Space") {
+      this.onColorSelected(color);
+    }
+  }
 }
diff --git a/src/app/prior-knowledge/components/prior-knowledge-pill/prior-knowledge-pill.component.html b/src/app/prior-knowledge/components/prior-knowledge-pill/prior-knowledge-pill.component.html
@@ -0,0 +1,9 @@
+<div class="knowledge-pill"
+     [class]="badgeCSSClass(knowledge().color)"
+     ngbTooltip="{{ remark() }}"
+     [tooltipClass]="tooltipCSSClass(knowledge().color)"
+     triggers="mouseenter:mouseleave"
+     [openDelay]="300"
+     [closeDelay]="150">
+  <div class="knowledge-pill-title">{{ knowledge().name }}</div>
+</div>
diff --git a/src/app/prior-knowledge/components/prior-knowledge-pill/prior-knowledge-pill.component.scss b/src/app/prior-knowledge/components/prior-knowledge-pill/prior-knowledge-pill.component.scss
diff --git a/...pp/prior-knowledge/components/prior-knowledge-pill/prior-knowledge-pill.component.spec.ts b/...pp/prior-knowledge/components/prior-knowledge-pill/prior-knowledge-pill.component.spec.ts
@@ -0,0 +1,24 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PriorKnowledgePillComponent} from './prior-knowledge-pill.component';
+
+
+describe('PriorKnowledgePillComponent', () => {
+  let component: PriorKnowledgePillComponent;
+  let fixture: ComponentFixture<PriorKnowledgePillComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PriorKnowledgePillComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PriorKnowledgePillComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});