feat: #12 <render> add process table

src/app/presentation/ledge-helper/ledge-helper.component.ts

@@ -18,6 +18,14 @@ console.log('hello, world');
 | | | |
 | | | |
 
+
+\`\`\`process-table
+| 源码管理 | 代码质量 | 制品管理  | 测试 | 持续集成 | 分析 | 协作  |
+|-|-|-|-|-|-|-|
+| Git | TSLint | Git (history) | Jasmine | GitHub Action | GitHub Traffic | GitHub Projects |
+| GitHub | Code Climate | |  Jest | | Google Analysis |  |
+\`\`\`
+
 `;
 
   constructor() { }

src/app/shared/components/ledge-render/ledge-render.component.html

@@ -1,47 +1,66 @@
-<div *ngFor="let token of markdownData" class="markdown-reporter markdown">
-  <div [ngSwitch]="token.type">
+<div *ngFor="let item of markdownData" class="markdown-reporter markdown">
+  <div [ngSwitch]="item.type">
     <div *ngSwitchCase="'chart'">
       <div class="charts">
-        <component-markdown-chart [data]="token.data"></component-markdown-chart>
+        <component-markdown-chart [data]="item.data"></component-markdown-chart>
       </div>
     </div>
 
     <div *ngSwitchCase="'table'">
       <table>
         <thead>
         <tr>
-          <th *ngFor="let h of token.header">{{h}}</th>
+          <th *ngFor="let h of item.header">{{h}}</th>
         </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let row of token.cells">
+        <tr *ngFor="let row of item.cells">
           <th *ngFor="let cell of row">{{cell}}</th>
         </tr>
         </tbody>
       </table>
     </div>
 
     <div *ngSwitchCase="'paragraph'">
-      <div [innerHTML]="token.data"></div>
+      <div [innerHTML]="item.data"></div>
+    </div>
+
+    <div *ngSwitchCase="'process-table'">
+      <div class="process-table markdown-table">
+        {{stringify(item.data)}}
+        <div class="table-container" role="table" aria-label="Destinations">
+          <div class="flex-table header" role="rowgroup">
+            <div class="flex-row cell type_{{index}}" *ngFor="let header of item.data.header;let index = index;">
+              {{header}}
+            </div>
+          </div>
+        </div>
+        <div class="table-space"></div>
+        <div class="flex-table row">
+          <div class="table-column" *ngFor="let row of item.data.cells;">
+            <div class="cell" *ngFor="let cell of row">{{cell}}</div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div *ngSwitchCase="'heading'">
-      <h1 *ngIf="token.depth === 1">{{token.text}}</h1>
-      <h2 *ngIf="token.depth === 2">{{token.text}}</h2>
-      <h3 *ngIf="token.depth === 3">{{token.text}}</h3>
-      <h4 *ngIf="token.depth === 4">{{token.text}}</h4>
-      <h5 *ngIf="token.depth === 5">{{token.text}}</h5>
-      <h6 *ngIf="token.depth === 6">{{token.text}}</h6>
+      <h1 *ngIf="item.depth === 1">{{item.text}}</h1>
+      <h2 *ngIf="item.depth === 2">{{item.text}}</h2>
+      <h3 *ngIf="item.depth === 3">{{item.text}}</h3>
+      <h4 *ngIf="item.depth === 4">{{item.text}}</h4>
+      <h5 *ngIf="item.depth === 5">{{item.text}}</h5>
+      <h6 *ngIf="item.depth === 6">{{item.text}}</h6>
     </div>
 
     <div *ngSwitchCase="'code'">
-      <pre class="language-{{token.lang}}">
-        <code class="language-{{token.lang}}">{{token.text}}</code>
+      <pre class="language-{{item.lang}}">
+        <code class="language-{{item.lang}}">{{item.text}}</code>
       </pre>
     </div>
 
     <div *ngSwitchDefault>
-      {{stringify(token)}}
+      {{stringify(item)}}
     </div>
   </div>
 </div>

src/app/shared/components/ledge-render/ledge-render.component.ts

@@ -87,6 +87,13 @@ export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
           data: this.buildBarChartData(chartData.tables[0])
         });
         break;
+      case 'process-table':
+        const tableData = LedgeMarkdownConverter.toJson(codeBlock.text);
+        this.markdownData.push({
+          type: 'process-table',
+          data: tableData.tables[0]
+        });
+        break;
       default:
         this.markdownData.push(token);
         break;