Skip to content

Commit 3a049de

Browse files
ABenassi87ABenassi87
committed
Refactor table code #45
- Refactored folder structure. - Added components for tables. Resolves #45
1 parent 52a678b commit 3a049de

29 files changed

+607
-291
lines changed

‎.prettierrc

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"printWidth": 140,
3-
"parser": "typescript",
43
"semi": true,
54
"tabWidth": 2,
65
"useTabs": false,

‎projects/ngx-text-diff/src/lib/components/components.module.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { LoaderSpinnerComponent } from './loader-spinner/loader-spinner.component';
4+
import { SideBySideTableComponent } from './side-by-side-table/side-by-side-table.component';
5+
import { LineByLineTableComponent } from './line-by-line-table/line-by-line-table.component';
6+
import { DirectivesModule } from '../directives/directives.module';
7+
import { PipesModule } from '../pipes/pipes.module';
8+
import { CdkTableModule } from '@angular/cdk/table';
9+
import { ScrollingModule } from '@angular/cdk/scrolling';
10+
11+
@NgModule({
12+
declarations: [LoaderSpinnerComponent, SideBySideTableComponent, LineByLineTableComponent],
13+
imports: [CommonModule, CdkTableModule, ScrollingModule, DirectivesModule, PipesModule],
14+
exports: [LoaderSpinnerComponent, SideBySideTableComponent, LineByLineTableComponent],
15+
})
16+
export class ComponentsModule {}

‎projects/ngx-text-diff/src/lib/components/line-by-line-table/line-by-line-table.component.css

Whitespace-only changes.

‎projects/ngx-text-diff/src/lib/components/line-by-line-table/line-by-line-table.component.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<div class="td-table-container" [id]="id" tdContainer cdkScrollable>
2+
<table cdk-table class="td-table" [dataSource]="data" [trackBy]="trackTableRows">
3+
<!-- Line Number Column -->
4+
<ng-container cdkColumnDef="lineNumber">
5+
<th cdk-header-cell *cdkHeaderCellDef>
6+
</th>
7+
<td cdk-cell *cdkCellDef="let row"
8+
class="fit-column line-number-col"
9+
[class.delete-row]="row.prefix === '-'"
10+
[class.insert-row]="row.prefix === '+'"
11+
[class.empty-row]="!row?.lineContent"
12+
>
13+
{{ row.lineNumber | lineNumber }}
14+
</td>
15+
</ng-container>
16+
<!-- Line Number Column -->
17+
<ng-container cdkColumnDef="lineNumberRight">
18+
<th cdk-header-cell *cdkHeaderCellDef>
19+
</th>
20+
<td cdk-cell *cdkCellDef="let row"
21+
class="fit-column line-number-col"
22+
[class.delete-row]="row.prefix === '-'"
23+
[class.insert-row]="row.prefix === '+'"
24+
[class.empty-row]="!row?.lineContent"
25+
>
26+
{{ row.lineNumberRight | lineNumber }}
27+
</td>
28+
</ng-container>
29+
<!-- Prefix Column -->
30+
<ng-container cdkColumnDef="prefix">
31+
<th cdk-header-cell *cdkHeaderCellDef>
32+
</th>
33+
<td cdk-cell *cdkCellDef="let row"
34+
class="fit-column prefix-col"
35+
[class.delete-row]="row.prefix === '-'"
36+
[class.insert-row]="row.prefix === '+'"
37+
[class.empty-row]="!row?.lineContent"
38+
>
39+
{{ row.prefix | linePrefix }}
40+
</td>
41+
</ng-container>
42+
<!-- Line Content Column -->
43+
<ng-container cdkColumnDef="lineContent">
44+
<th cdk-header-cell *cdkHeaderCellDef>
45+
</th>
46+
<td cdk-cell *cdkCellDef="let row"
47+
class="content-col"
48+
[class.delete-row]="row.prefix === '-'"
49+
[class.insert-row]="row.prefix === '+'"
50+
[class.empty-row]="!row?.lineContent"
51+
>
52+
<ng-container *ngIf="row.prefix === '-' || row.prefix === '+'; else hasNoDiffs">
53+
<span
54+
[innerHTML]="diff.content | lineContent"
55+
[ngClass]="{ highlight: diff.isDiff }"
56+
*ngFor="let diff of row?.lineDiffs; trackBy: trackDiffs"
57+
></span>
58+
</ng-container>
59+
<ng-template #hasNoDiffs>
60+
<span [innerHTML]="row?.lineContent | lineContent"></span>
61+
</ng-template>
62+
</td>
63+
</ng-container>
64+
65+
<!-- Header and Row Declarations -->
66+
<tr cdk-header-row *cdkHeaderRowDef="displayedColumns; sticky: true"></tr>
67+
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>
68+
</table>
69+
</div>

‎projects/ngx-text-diff/src/lib/components/line-by-line-table/line-by-line-table.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { LineByLineTableComponent } from './line-by-line-table.component';
4+
5+
describe('LineByLineTableComponent', () => {
6+
let component: LineByLineTableComponent;
7+
let fixture: ComponentFixture<LineByLineTableComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ LineByLineTableComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(LineByLineTableComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎projects/ngx-text-diff/src/lib/components/line-by-line-table/line-by-line-table.component.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
import { Observable } from 'rxjs';
3+
import { DiffLineByLineResult, DiffLineResult, DiffPart } from '../../ngx-text-diff.model';
4+
5+
@Component({
6+
selector: 'td-line-by-line-table',
7+
templateUrl: './line-by-line-table.component.html',
8+
styleUrls: ['./line-by-line-table.component.css']
9+
})
10+
export class LineByLineTableComponent implements OnInit {
11+
@Input() id: string;
12+
@Input() data: Observable<DiffLineByLineResult[]>;
13+
@Input() displayedColumns: string[] = ['lineNumber', 'lineNumberRight', 'prefix', 'lineContent'];
14+
15+
constructor() { }
16+
17+
ngOnInit(): void {
18+
}
19+
20+
trackTableRows(index, row: DiffLineByLineResult) {
21+
return row?.lineNumber ?? index;
22+
}
23+
24+
trackDiffs(index, diff: DiffPart) {
25+
return index;
26+
}
27+
28+
}

‎projects/ngx-text-diff/src/lib/loader-spinner/loader-spinner.component.css renamed to ‎projects/ngx-text-diff/src/lib/components/loader-spinner/loader-spinner.component.css

File renamed without changes.

‎projects/ngx-text-diff/src/lib/loader-spinner/loader-spinner.component.html renamed to ‎projects/ngx-text-diff/src/lib/components/loader-spinner/loader-spinner.component.html

File renamed without changes.

‎projects/ngx-text-diff/src/lib/loader-spinner/loader-spinner.component.ts renamed to ‎projects/ngx-text-diff/src/lib/components/loader-spinner/loader-spinner.component.ts

File renamed without changes.

‎projects/ngx-text-diff/src/lib/components/side-by-side-table/side-by-side-table.component.css

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
.td-table-container {
2+
grid-column: 1 / 2;
3+
grid-row: 2;
4+
width: 100%;
5+
max-width: 100%;
6+
overflow-x: auto;
7+
}
8+
9+
.td-table-wrapper {
10+
display: flex;
11+
width: 200%;
12+
}
13+
14+
.td-table {
15+
border: 1px solid darkgray;
16+
max-height: 50vh;
17+
width: 100%;
18+
max-width: 100%;
19+
}
20+
21+
.fit-column {
22+
width: 1px;
23+
white-space: nowrap;
24+
}
25+
26+
.line-number-col {
27+
position: relative; /* I am the fallback */
28+
29+
/* Give it everything you got! (use an auto prefixer...) */
30+
position: -webkit-sticky;
31+
position: sticky;
32+
left: 0;
33+
top: auto;
34+
border-right: 1px solid #ddd;
35+
color: #999;
36+
text-align: right;
37+
background-color: #f7f7f7;
38+
padding-left: 10px;
39+
padding-right: 10px;
40+
font-size: 87.5%;
41+
}
42+
43+
.line-number-col-left {
44+
color: #999;
45+
padding-left: 10px;
46+
padding-right: 10px;
47+
text-align: right;
48+
background-color: #f7f7f7;
49+
font-size: 87.5%;
50+
}
51+
52+
.insert-row,
53+
.insert-row > .line-number-col {
54+
background-color: #dfd;
55+
border-color: #b4e2b4;
56+
}
57+
58+
.delete-row,
59+
.delete-row > .line-number-col {
60+
background-color: #fee8e9;
61+
border-color: #e9aeae;
62+
}
63+
64+
.empty-row {
65+
background-color: #f7f7f7;
66+
height: 24px;
67+
}
68+
69+
.td-table td {
70+
border-top: 0;
71+
padding-top: 0;
72+
padding-bottom: 0;
73+
white-space: nowrap;
74+
max-width: 50%;
75+
}
76+
77+
pre {
78+
margin-bottom: 0;
79+
}
80+
81+
td.content-col {
82+
padding: 0;
83+
margin: 0;
84+
line-height: 24px;
85+
}
86+
87+
td.prefix-col {
88+
padding-left: 10px;
89+
padding-right: 10px;
90+
line-height: 24px;
91+
}
92+
93+
.insert-row > .highlight {
94+
background-color: #acf2bd !important;
95+
}
96+
97+
.delete-row > .highlight {
98+
background-color: #fdb8c0 !important;
99+
}

‎projects/ngx-text-diff/src/lib/components/side-by-side-table/side-by-side-table.component.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<div class="td-table-container" [id]="id" tdContainer cdkScrollable>
2+
<table cdk-table class="td-table" [dataSource]="data" [trackBy]="trackTableRows">
3+
<!-- Line Number Column -->
4+
<ng-container cdkColumnDef="lineNumber">
5+
<th cdk-header-cell *cdkHeaderCellDef>
6+
</th>
7+
<td cdk-cell *cdkCellDef="let row"
8+
class="fit-column line-number-col"
9+
[class.delete-row]="row?.prefix === '-'"
10+
[class.insert-row]="row?.prefix === '+'"
11+
[class.empty-row]="!row?.lineContent"
12+
>
13+
{{ row?.lineNumber | lineNumber }}
14+
</td>
15+
</ng-container>
16+
<!-- Prefix Column -->
17+
<ng-container cdkColumnDef="prefix">
18+
<th cdk-header-cell *cdkHeaderCellDef>
19+
</th>
20+
<td cdk-cell *cdkCellDef="let row"
21+
class="fit-column prefix-col"
22+
[class.delete-row]="row?.prefix === '-'"
23+
[class.insert-row]="row?.prefix === '+'"
24+
[class.empty-row]="!row?.lineContent"
25+
>
26+
{{ row?.prefix | linePrefix }}
27+
</td>
28+
</ng-container>
29+
<!-- Line Content Column -->
30+
<ng-container cdkColumnDef="lineContent">
31+
<th cdk-header-cell *cdkHeaderCellDef>
32+
</th>
33+
<td cdk-cell *cdkCellDef="let row"
34+
class="content-col"
35+
[class.delete-row]="row?.prefix === '-'"
36+
[class.insert-row]="row?.prefix === '+'"
37+
[class.empty-row]="!row?.lineContent"
38+
>
39+
<ng-container *ngIf="row?.prefix === '-' || row?.prefix === '+'; else hasNoDiffs">
40+
<span
41+
[innerHTML]="diff.content | lineContent"
42+
[ngClass]="{ highlight: diff.isDiff }"
43+
*ngFor="let diff of row?.lineDiffs; trackBy: trackDiffs"
44+
></span>
45+
</ng-container>
46+
<ng-template #hasNoDiffs>
47+
<span [innerHTML]="row?.lineContent | lineContent"></span>
48+
</ng-template>
49+
</td>
50+
</ng-container>
51+
52+
<!-- Header and Row Declarations -->
53+
<tr cdk-header-row *cdkHeaderRowDef="displayedColumns; sticky: true"></tr>
54+
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>
55+
</table>
56+
</div>

‎projects/ngx-text-diff/src/lib/components/side-by-side-table/side-by-side-table.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { SideBySideTableComponent } from './side-by-side-table.component';
4+
5+
describe('SideBySideTableComponent', () => {
6+
let component: SideBySideTableComponent;
7+
let fixture: ComponentFixture<SideBySideTableComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ SideBySideTableComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(SideBySideTableComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎projects/ngx-text-diff/src/lib/components/side-by-side-table/side-by-side-table.component.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
import { Observable } from 'rxjs';
3+
import { DiffLineResult, DiffPart, DiffTableRowResult } from '../../ngx-text-diff.model';
4+
5+
@Component({
6+
selector: 'td-side-by-side-table',
7+
templateUrl: './side-by-side-table.component.html',
8+
styleUrls: ['./side-by-side-table.component.css'],
9+
})
10+
export class SideBySideTableComponent implements OnInit {
11+
@Input() id: string;
12+
@Input() data: Observable<DiffLineResult[]>;
13+
@Input() displayedColumns: string[] = ['lineNumber', 'prefix', 'lineContent'];
14+
@Input() prefix = '';
15+
16+
constructor() {}
17+
18+
ngOnInit(): void {}
19+
20+
trackTableRows(index, row: DiffLineResult) {
21+
return row?.lineNumber ?? index;
22+
}
23+
24+
trackDiffs(index, diff: DiffPart) {
25+
return index;
26+
}
27+
}

‎projects/ngx-text-diff/src/lib/directives/directives.module.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { ContainerDirective } from './ngx-text-diff-container.directive';
4+
5+
@NgModule({
6+
declarations: [ContainerDirective],
7+
imports: [CommonModule],
8+
exports: [ContainerDirective],
9+
})
10+
export class DirectivesModule {}

‎projects/ngx-text-diff/src/lib/ngx-text-diff-container.directive.ts renamed to ‎projects/ngx-text-diff/src/lib/directives/ngx-text-diff-container.directive.ts

File renamed without changes.

‎projects/ngx-text-diff/src/lib/format-line.pipe.spec.ts

-8
This file was deleted.

0 commit comments

Comments
 (0)