From c3855e30bdeabc66c3b034e22137c75a104cb054 Mon Sep 17 00:00:00 2001 From: Phodal Huang Date: Wed, 15 Apr 2020 16:00:51 +0800 Subject: [PATCH] feat: init ledge-checklist --- .../ledge-checklist.component.html | 1 + .../ledge-checklist.component.scss | 0 .../ledge-checklist.component.spec.ts | 25 +++++++ .../ledge-checklist.component.ts | 28 ++++++++ .../src/lib/ledge-render.component.html | 4 ++ .../src/lib/ledge-render.component.ts | 8 +++ .../src/lib/ledge-render.module.ts | 2 + .../checklists/checklists.component.html | 2 + .../checklists/checklists.component.ts | 4 ++ src/assets/docs/checklists/agile.md | 70 ++++++++++--------- 10 files changed, 110 insertions(+), 34 deletions(-) create mode 100644 projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.html create mode 100644 projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.scss create mode 100644 projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.spec.ts create mode 100644 projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.ts diff --git a/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.html b/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.html new file mode 100644 index 00000000..6057a8e7 --- /dev/null +++ b/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.html @@ -0,0 +1 @@ +

ledge-checklist works!

diff --git a/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.scss b/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.spec.ts b/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.spec.ts new file mode 100644 index 00000000..320c95fe --- /dev/null +++ b/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LedgeChecklistComponent } from './ledge-checklist.component'; + +describe('LedgeChecklistComponent', () => { + let component: LedgeChecklistComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LedgeChecklistComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LedgeChecklistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.ts b/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.ts new file mode 100644 index 00000000..52ecb148 --- /dev/null +++ b/projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { LedgeListItem } from '../model/ledge-chart.model'; + +@Component({ + selector: 'ledge-checklist', + templateUrl: './ledge-checklist.component.html', + styleUrls: ['./ledge-checklist.component.scss'] +}) +export class LedgeChecklistComponent implements OnInit, OnChanges { + @Input() + data: LedgeListItem[]; + + @Input() + config: any; + + constructor() { } + + ngOnInit(): void { + } + + ngOnChanges(changes: SimpleChanges): void { + this.renderData(); + } + + private renderData() { + console.log(this.data); + } +} diff --git a/projects/ledge-render/src/lib/ledge-render.component.html b/projects/ledge-render/src/lib/ledge-render.component.html index 350fc69a..92f410f1 100644 --- a/projects/ledge-render/src/lib/ledge-render.component.html +++ b/projects/ledge-render/src/lib/ledge-render.component.html @@ -62,6 +62,10 @@ +
+ +
+
diff --git a/projects/ledge-render/src/lib/ledge-render.component.ts b/projects/ledge-render/src/lib/ledge-render.component.ts index 0f73f8b5..2fe953c5 100644 --- a/projects/ledge-render/src/lib/ledge-render.component.ts +++ b/projects/ledge-render/src/lib/ledge-render.component.ts @@ -314,6 +314,14 @@ export class LedgeRenderComponent implements OnInit, OnChanges { config: kanbanData.config, }); break; + case 'checklist': + const checklistData = LedgeMarkdownConverter.toJson(codeBlock.text); + this.markdownData.push({ + type: 'checklist', + data: checklistData.lists[0].children, + config: checklistData.config, + }); + break; default: this.markdownData.push(token); break; diff --git a/projects/ledge-render/src/lib/ledge-render.module.ts b/projects/ledge-render/src/lib/ledge-render.module.ts index 43cd6f72..f1436048 100644 --- a/projects/ledge-render/src/lib/ledge-render.module.ts +++ b/projects/ledge-render/src/lib/ledge-render.module.ts @@ -22,6 +22,7 @@ import { LedgeKanbanComponent } from './components/ledge-kanban/ledge-kanban.com import { ComponentTodoComponent } from './components/component-todo/component-todo.component'; import { ComponentChecklistComponent } from './components/component-checklist/component-checklist.component'; import { LedgeStorageService } from './services/ledge-storage.service'; +import { LedgeChecklistComponent } from './components/ledge-checklist/ledge-checklist.component'; const LedgeComponents = [ LedgeRenderComponent, @@ -40,6 +41,7 @@ const LedgeComponents = [ LedgeDevProcessComponent, LedgeTechRadarComponent, LedgeKanbanComponent, + LedgeChecklistComponent, ComponentTodoComponent, ComponentChecklistComponent diff --git a/src/app/presentation/checklists/checklists.component.html b/src/app/presentation/checklists/checklists.component.html index 1291ec33..c142b4c3 100644 --- a/src/app/presentation/checklists/checklists.component.html +++ b/src/app/presentation/checklists/checklists.component.html @@ -21,6 +21,8 @@

业务

来源：ThoughtWorks敏捷实践关键清单

+ +
diff --git a/src/app/presentation/checklists/checklists.component.ts b/src/app/presentation/checklists/checklists.component.ts index 76cd7845..752c2389 100644 --- a/src/app/presentation/checklists/checklists.component.ts +++ b/src/app/presentation/checklists/checklists.component.ts @@ -7,6 +7,8 @@ import PEOPLE_CHECKLIST from './checklists/people.json'; import DOMAIN_CHECKLIST from './checklists/domain.json'; import { StorageMap } from '@ngx-pwa/local-storage'; +import * as agileMD from 'raw-loader!../../../assets/docs/checklists/agile.md'; + @Component({ selector: 'app-checklists', templateUrl: './checklists.component.html', @@ -18,6 +20,8 @@ export class ChecklistsComponent implements OnInit { peopleChecklist: any = PEOPLE_CHECKLIST; domainChecklist: any = DOMAIN_CHECKLIST; + agileContent = agileMD.default; + selectedTabIndex = 0; constructor(private storage: StorageMap) {} diff --git a/src/assets/docs/checklists/agile.md b/src/assets/docs/checklists/agile.md index 91dc3c77..35067d18 100644 --- a/src/assets/docs/checklists/agile.md +++ b/src/assets/docs/checklists/agile.md @@ -1,35 +1,37 @@ +```checklist - ThoughtWorks 敏捷实践关键清单 - - 时点 1：当获得原始需求时 - - 用户问题还是解决方案：分辨原始需求是用户问题还是解决方案，以发现真正的用户问题 - - 电梯演讲：描述产品的价值假设 - - 用户画像：描述产品的用户特点 - - 用户目标：描述产品如何让用户成为 Better Me，以吸引用户 - - 用户问题定义：描述所识别出的用户问题 -- 时点 2：当形成问题定义时 - - 用户体验地图：识别用户体验中的痛点 - - 纸面原型：快速验证用户交互界面的可用性 - - 用户故事地图：识别用户故事，以便进行软件开发 - - 用户故事拆分：将大故事拆小，以便提升价值流动效率 - - 用户故事验收条件：编写用户故事验收条件，以便减少返工 -- 时点 3：当产生用户故事时 - - 故事梳理工作坊：为下一个迭代的用户故事编写验收条件，以便提升迭代计划会的效率 - - 迭代计划会：本迭代的目标？团队承诺在本迭代完成哪些用户故事？如何才算完成？ - - 每日站会：同步用户故事的进展和风险 - - 价值流式开发管理：不设置迭代周期，而使用看板更灵活地管理价值流动 - - 分支策略：尽早、频繁、小批地解决代码冲突 - - 持续集成：尽早、频繁、小批地解决软件集成问题 - - 暗部署：将“部署”与“发布”分离，尽早、频繁、小批地解决部署中出现的问题 - - 敏捷度量：制定全局度量指标，以评估过程改进的成效 - - 领域驱动设计工作坊：让开发人员和领域专家就业务领域知识和通用语言达成共识，并识别核心域，以便让软件代码与业务概念对齐 - - 用户故事开卡：在代码编写前消除对需求的误解，大幅降低变更的成本 -- 时点 4：当为用户故事编写首行代码时 - - 用户故事验卡“关键清单：在代码编写完成后立即检验，能大幅降低返工的成本 - - 自动化单元测试：自动化单元测试的运行无须依赖测试环境，成本最低，速度最快 - - 集体代码回顾：多双眼睛，多道检查；及时纠偏，又快又好；知识分享，消除瓶颈，对齐约定 -- 时点 5：当用户故事通过测试而待部署时 - - 迭代评审会：为用户展示已完成的用户故事，获取其反馈，以便持续改进 - - 迭代回顾会：发现改进点，形成行动项，进行持续过程改进 - - 最大痛点改进工作坊：尽早、频繁、小批地识别“价值最大、质量最差”的最大痛点，并将其拆解，迭代地解决 - - 改进形：教练一对一地帮助学员制定频繁和小批的改进计划，并及时回顾，循环往复，以提升学员能力 -- 时点 6：当用户故事部署上线时 - - 验尸报告工作坊：尽早、频繁、小批地针对线上事故，回顾没有限制住的“小裂纹”，以便改进过程与系统，提升系统的稳定性 + - 时点 1：当获得原始需求时 + - 用户问题还是解决方案：分辨原始需求是用户问题还是解决方案，以发现真正的用户问题 + - 电梯演讲：描述产品的价值假设 + - 用户画像：描述产品的用户特点 + - 用户目标：描述产品如何让用户成为 Better Me，以吸引用户 + - 用户问题定义：描述所识别出的用户问题 + - 时点 2：当形成问题定义时 + - 用户体验地图：识别用户体验中的痛点 + - 纸面原型：快速验证用户交互界面的可用性 + - 用户故事地图：识别用户故事，以便进行软件开发 + - 用户故事拆分：将大故事拆小，以便提升价值流动效率 + - 用户故事验收条件：编写用户故事验收条件，以便减少返工 + - 时点 3：当产生用户故事时 + - 故事梳理工作坊：为下一个迭代的用户故事编写验收条件，以便提升迭代计划会的效率 + - 迭代计划会：本迭代的目标？团队承诺在本迭代完成哪些用户故事？如何才算完成？ + - 每日站会：同步用户故事的进展和风险 + - 价值流式开发管理：不设置迭代周期，而使用看板更灵活地管理价值流动 + - 分支策略：尽早、频繁、小批地解决代码冲突 + - 持续集成：尽早、频繁、小批地解决软件集成问题 + - 暗部署：将“部署”与“发布”分离，尽早、频繁、小批地解决部署中出现的问题 + - 敏捷度量：制定全局度量指标，以评估过程改进的成效 + - 领域驱动设计工作坊：让开发人员和领域专家就业务领域知识和通用语言达成共识，并识别核心域，以便让软件代码与业务概念对齐 + - 用户故事开卡：在代码编写前消除对需求的误解，大幅降低变更的成本 + - 时点 4：当为用户故事编写首行代码时 + - 用户故事验卡“关键清单：在代码编写完成后立即检验，能大幅降低返工的成本 + - 自动化单元测试：自动化单元测试的运行无须依赖测试环境，成本最低，速度最快 + - 集体代码回顾：多双眼睛，多道检查；及时纠偏，又快又好；知识分享，消除瓶颈，对齐约定 + - 时点 5：当用户故事通过测试而待部署时 + - 迭代评审会：为用户展示已完成的用户故事，获取其反馈，以便持续改进 + - 迭代回顾会：发现改进点，形成行动项，进行持续过程改进 + - 最大痛点改进工作坊：尽早、频繁、小批地识别“价值最大、质量最差”的最大痛点，并将其拆解，迭代地解决 + - 改进形：教练一对一地帮助学员制定频繁和小批的改进计划，并及时回顾，循环往复，以提升学员能力 + - 时点 6：当用户故事部署上线时 + - 验尸报告工作坊：尽早、频繁、小批地针对线上事故，回顾没有限制住的“小裂纹”，以便改进过程与系统，提升系统的稳定性 +```