From 9660a5b3328a5ff450697038b3f411f011a4762f Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Fri, 8 May 2020 15:48:22 +0800
Subject: [PATCH] feat(render): init maturity rating module

---
 .../component-rating-item.component.html      |  9 +++
 .../component-rating-item.component.scss      |  0
 .../component-rating-item.component.spec.ts   | 50 +++++++++++++++
 .../component-rating-item.component.ts        | 62 +++++++++++++++++++
 .../component-rating.component.html           | 13 ++++
 .../component-rating.component.scss           | 13 ++++
 .../component-rating.component.spec.ts        | 48 ++++++++++++++
 .../component-rating.component.ts             | 53 ++++++++++++++++
 .../ledge-maturity.component.html             |  4 +-
 .../src/lib/components/model/rating.model.ts  |  5 ++
 .../src/lib/ledge-render.module.ts            |  4 ++
 11 files changed, 259 insertions(+), 2 deletions(-)
 create mode 100644 projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.html
 create mode 100644 projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.scss
 create mode 100644 projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.spec.ts
 create mode 100644 projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.ts
 create mode 100644 projects/ledge-render/src/lib/components/component-rating/component-rating.component.html
 create mode 100644 projects/ledge-render/src/lib/components/component-rating/component-rating.component.scss
 create mode 100644 projects/ledge-render/src/lib/components/component-rating/component-rating.component.spec.ts
 create mode 100644 projects/ledge-render/src/lib/components/component-rating/component-rating.component.ts
 create mode 100644 projects/ledge-render/src/lib/components/model/rating.model.ts

diff --git a/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.html b/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.html
new file mode 100644
index 00000000..0c66a1cf
--- /dev/null
+++ b/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.html
@@ -0,0 +1,9 @@
+<span>{{item.name}}</span>
+<mat-slider
+  min="1" max="5" step="1"
+  *ngIf="isParent"
+  [(ngModel)]="item.chartValue"
+  (change)="updateValue($event)"
+>
+
+</mat-slider>
diff --git a/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.scss b/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.spec.ts b/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.spec.ts
new file mode 100644
index 00000000..9a40b41e
--- /dev/null
+++ b/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.spec.ts
@@ -0,0 +1,50 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComponentRatingItemComponent } from './component-rating-item.component';
+import { MarkdownModule } from 'ngx-markdown';
+import { LedgeRenderModule } from '../../ledge-render.module';
+
+describe('MarkdownRatingItemComponent', () => {
+  let component: ComponentRatingItemComponent;
+  let fixture: ComponentFixture<ComponentRatingItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [LedgeRenderModule, MarkdownModule],
+      declarations: [ComponentRatingItemComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComponentRatingItemComponent);
+    component = fixture.componentInstance;
+    component.item = {
+      id: '',
+      name: '23442'
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should reg touch', () => {
+    const mockTouch = jasmine.createSpy('touch');
+    component.registerOnTouched(mockTouch);
+    component.onTouched({});
+    expect(mockTouch).toHaveBeenCalled();
+  });
+
+  it('should reg change', () => {
+    const mockChange = jasmine.createSpy('change');
+    component.registerOnChange(mockChange);
+    component.onChange('a');
+    expect(mockChange).toHaveBeenCalled();
+  });
+
+  it('should change state', () => {
+    component.setDisabledState(true);
+    expect(component.disabled).toEqual(true);
+  });
+});
diff --git a/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.ts b/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.ts
new file mode 100644
index 00000000..228855e7
--- /dev/null
+++ b/projects/ledge-render/src/lib/components/component-rating-item/component-rating-item.component.ts
@@ -0,0 +1,62 @@
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MatSliderChange } from '@angular/material/slider';
+import { RatingModel } from '../model/rating.model';
+
+@Component({
+  selector: 'component-rating-item',
+  templateUrl: './component-rating-item.component.html',
+  styleUrls: ['./component-rating-item.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ComponentRatingItemComponent),
+      multi: true,
+    },
+  ],
+})
+export class ComponentRatingItemComponent implements OnInit {
+  @Input() item: RatingModel;
+  @Input() isParent: boolean;
+  @Output() itemChange = new EventEmitter();
+
+  disabled = false;
+
+  onChange(_) {}
+
+  onTouched(_) {}
+
+  ngOnInit() {
+
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+    this.itemChange.emit = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  writeValue(obj: any): void {
+    if (obj !== null && obj !== undefined) {
+      this.item = obj;
+    }
+  }
+
+  updateValue($event: MatSliderChange) {
+    this.itemChange.emit(this.item);
+  }
+}
diff --git a/projects/ledge-render/src/lib/components/component-rating/component-rating.component.html b/projects/ledge-render/src/lib/components/component-rating/component-rating.component.html
new file mode 100644
index 00000000..e8add86d
--- /dev/null
+++ b/projects/ledge-render/src/lib/components/component-rating/component-rating.component.html
@@ -0,0 +1,13 @@
+<ul id="markdown-rating">
+  <li *ngFor="let task of data">
+    <component-rating-item
+      [isParent]="isParent"
+      [item]="task"
+      (itemChange)="changeForm($event, task)">
+    </component-rating-item>
+
+    <ol *ngIf="task.children">
+      <li *ngFor="let item of task.children">{{item.name}}</li>
+    </ol>
+  </li>
+</ul>
diff --git a/projects/ledge-render/src/lib/components/component-rating/component-rating.component.scss b/projects/ledge-render/src/lib/components/component-rating/component-rating.component.scss
new file mode 100644
index 00000000..b9ce504d
--- /dev/null
+++ b/projects/ledge-render/src/lib/components/component-rating/component-rating.component.scss
@@ -0,0 +1,13 @@
+ul {
+  li {
+    font-size: 1.2em;
+  }
+
+  ul {
+    li {
+      font-size: 1em;
+      line-height: 1.2em !important;
+      margin-left: 2em;
+    }
+  }
+}
diff --git a/projects/ledge-render/src/lib/components/component-rating/component-rating.component.spec.ts b/projects/ledge-render/src/lib/components/component-rating/component-rating.component.spec.ts
new file mode 100644
index 00000000..3afd8d48
--- /dev/null
+++ b/projects/ledge-render/src/lib/components/component-rating/component-rating.component.spec.ts
@@ -0,0 +1,48 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MarkdownModule } from 'ngx-markdown';
+
+import { ComponentRatingComponent } from './component-rating.component';
+import { LedgeRenderModule } from '../../ledge-render.module';
+
+describe('MarkdownRatingComponent', () => {
+  let component: ComponentRatingComponent;
+  let fixture: ComponentFixture<ComponentRatingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [LedgeRenderModule, MarkdownModule],
+      declarations: [ComponentRatingComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComponentRatingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    component.onChange('aa');
+    component.onTouched({});
+    expect(component).toBeTruthy();
+  });
+
+  it('should reg touch', () => {
+    const mockTouch = jasmine.createSpy('touch');
+    component.registerOnTouched(mockTouch);
+    component.onTouched({});
+    expect(mockTouch).toHaveBeenCalled();
+  });
+
+  it('should reg change', () => {
+    const mockChange = jasmine.createSpy('change');
+    component.registerOnChange(mockChange);
+    component.onChange('a');
+    expect(mockChange).toHaveBeenCalled();
+  });
+
+  it('should change state', () => {
+    component.setDisabledState(true);
+    expect(component.disabled).toEqual(true);
+  });
+});
diff --git a/projects/ledge-render/src/lib/components/component-rating/component-rating.component.ts b/projects/ledge-render/src/lib/components/component-rating/component-rating.component.ts
new file mode 100644
index 00000000..83f1f3db
--- /dev/null
+++ b/projects/ledge-render/src/lib/components/component-rating/component-rating.component.ts
@@ -0,0 +1,53 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'component-rating',
+  templateUrl: './component-rating.component.html',
+  styleUrls: ['./component-rating.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ComponentRatingComponent),
+      multi: true,
+    },
+  ],
+})
+export class ComponentRatingComponent implements OnInit, ControlValueAccessor {
+  @Input() data: any[];
+  @Input() isParent = false;
+  @Input() instanceKey: string;
+
+  disabled = false;
+
+  onChange(_) {}
+
+  onTouched(_) {}
+
+  constructor() {}
+
+  ngOnInit(): void {
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  writeValue(obj: any): void {
+    if (obj !== null) {
+      this.data = obj;
+    }
+  }
+
+  changeForm($event: any, item: any) {
+
+  }
+}
diff --git a/projects/ledge-render/src/lib/components/ledge-maturity/ledge-maturity.component.html b/projects/ledge-render/src/lib/components/ledge-maturity/ledge-maturity.component.html
index e76bc93e..332c5ca7 100644
--- a/projects/ledge-render/src/lib/components/ledge-maturity/ledge-maturity.component.html
+++ b/projects/ledge-render/src/lib/components/ledge-maturity/ledge-maturity.component.html
@@ -3,7 +3,7 @@
     <ledge-radar [data]="data" [config]="config"></ledge-radar>
   </div>
 
-  <div class="right">
-    <ledge-checklist [data]="data" [config]="config"></ledge-checklist>
+  <div class="right" *ngIf="data">
+    <component-rating [data]="data[0].children"></component-rating>
   </div>
 </div>
diff --git a/projects/ledge-render/src/lib/components/model/rating.model.ts b/projects/ledge-render/src/lib/components/model/rating.model.ts
new file mode 100644
index 00000000..5c66d468
--- /dev/null
+++ b/projects/ledge-render/src/lib/components/model/rating.model.ts
@@ -0,0 +1,5 @@
+export interface RatingModel {
+  id: string;
+  name: string;
+  chartValue?: number;
+}
diff --git a/projects/ledge-render/src/lib/ledge-render.module.ts b/projects/ledge-render/src/lib/ledge-render.module.ts
index baf1289a..2140004d 100644
--- a/projects/ledge-render/src/lib/ledge-render.module.ts
+++ b/projects/ledge-render/src/lib/ledge-render.module.ts
@@ -32,6 +32,8 @@ import { LedgeSunburstComponent } from './chart/ledge-sunburst/ledge-sunburst.co
 import { LedgeFishBoneComponent } from './chart/ledge-fish-bone/ledge-fish-bone.component';
 import { LedgeHeatmapComponent } from './chart/ledge-heatmap/ledge-heatmap.component';
 import { LedgeMaturityComponent } from './components/ledge-maturity/ledge-maturity.component';
+import { ComponentRatingItemComponent } from './components/component-rating-item/component-rating-item.component';
+import { ComponentRatingComponent } from './components/component-rating/component-rating.component';
 
 const LedgeComponents = [
   LedgeRenderComponent,
@@ -60,6 +62,8 @@ const LedgeComponents = [
 
   ComponentTodoComponent,
   ComponentChecklistComponent,
+  ComponentRatingItemComponent,
+  ComponentRatingComponent,
 ];
 
 const LedgePipes = [TohtmlPipe];