Skip to content

Commit 2c7d38d

Browse files
ABenassi87ABenassi87
committed
created libs components
1 parent 547c050 commit 2c7d38d

11 files changed

+657
-88
lines changed

‎.prettierrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"printWidth": 140,
3+
"tabWidth": 2,
4+
"singleQuote": true
5+
}

‎package-lock.json‎

Lines changed: 244 additions & 60 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,27 @@
1111
},
1212
"private": true,
1313
"dependencies": {
14-
"@angular/animations": "^6.1.0",
15-
"@angular/common": "^6.1.0",
16-
"@angular/compiler": "^6.1.0",
17-
"@angular/core": "^6.1.0",
18-
"@angular/forms": "^6.1.0",
19-
"@angular/http": "^6.1.0",
20-
"@angular/platform-browser": "^6.1.0",
21-
"@angular/platform-browser-dynamic": "^6.1.0",
22-
"@angular/router": "^6.1.0",
14+
"@angular/animations": "^6.1.10",
15+
"@angular/common": "^6.1.10",
16+
"@angular/compiler": "^6.1.10",
17+
"@angular/core": "^6.1.10",
18+
"@angular/forms": "^6.1.10",
19+
"@angular/http": "^6.1.10",
20+
"@angular/platform-browser": "^6.1.10",
21+
"@angular/platform-browser-dynamic": "^6.1.10",
22+
"@angular/router": "^6.1.10",
2323
"core-js": "^2.5.4",
24-
"rxjs": "~6.2.0",
24+
"diff-match-patch": "^1.0.4",
25+
"rxjs": "~6.3.3",
2526
"zone.js": "~0.8.26"
2627
},
2728
"devDependencies": {
2829
"@angular-devkit/build-angular": "~0.8.0",
2930
"@angular-devkit/build-ng-packagr": "~0.8.0",
30-
"@angular/cli": "^6.2.4",
31-
"@angular/compiler-cli": "^6.1.0",
32-
"@angular/language-service": "^6.1.0",
31+
"@angular/cli": "^6.2.5",
32+
"@angular/compiler-cli": "^6.1.10",
33+
"@angular/language-service": "^6.1.10",
34+
"@types/diff-match-patch": "^1.0.32",
3335
"@types/jasmine": "~2.8.8",
3436
"@types/jasminewd2": "~2.0.3",
3537
"@types/node": "~8.9.4",
@@ -42,6 +44,7 @@
4244
"karma-jasmine": "~1.1.2",
4345
"karma-jasmine-html-reporter": "^0.2.2",
4446
"ng-packagr": "^4.1.0",
47+
"prettier": "^1.14.3",
4548
"protractor": "~5.4.0",
4649
"ts-node": "~7.0.0",
4750
"tsickle": ">=0.29.0",

‎projects/ngx-text-diff/package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
"name": "ngx-text-diff",
33
"version": "0.0.1",
44
"peerDependencies": {
5-
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
6-
"@angular/core": "^6.0.0-rc.0 || ^6.0.0"
5+
"@angular/common": ">=6.0.0 <7.0.0",
6+
"@angular/core": "^>=6.0.0 <7.0.0",
7+
"@angular/forms": "^>=6.0.0 <7.0.0",
8+
"diff-match-patch": "^1.0.4",
9+
"rxjs": "~6.3.3"
710
}
8-
}
11+
}

‎projects/ngx-text-diff/src/lib/ngx-text-diff.component.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
table {
2+
border: 1px solid darkgray;
3+
max-height: 50vh;
4+
max-width: 100%;
5+
}
6+
7+
.fit-column {
8+
width: 1px;
9+
white-space: nowrap;
10+
}
11+
12+
.line-number-col {
13+
border-right: 1px solid #ddd;
14+
color: #999;
15+
text-align: right;
16+
background-color: #f7f7f7;
17+
font-size: 87.5%;
18+
}
19+
20+
.line-number-col-left {
21+
color: #999;
22+
text-align: right;
23+
background-color: #f7f7f7;
24+
font-size: 87.5%;
25+
}
26+
27+
.insert-row,
28+
.insert-row > .line-number-col {
29+
background-color: #dfd;
30+
border-color: #b4e2b4;
31+
}
32+
33+
.delete-row,
34+
.delete-row > .line-number-col {
35+
background-color: #fee8e9;
36+
border-color: #e9aeae;
37+
}
38+
39+
.empty-row {
40+
background-color: #f7f7f7;
41+
}
42+
43+
.table td {
44+
border-top: 0;
45+
padding-top: 0;
46+
padding-bottom: 0;
47+
}
48+
49+
pre {
50+
margin-bottom: 0;
51+
}
52+
53+
td.content-col {
54+
padding: 0;
55+
margin: 0;
56+
line-height: 20px;
57+
}
58+
59+
td.prefix-col {
60+
line-height: 20px;
61+
}

‎projects/ngx-text-diff/src/lib/ngx-text-diff.component.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<div>
2+
<h3>Comparison</h3>
3+
<div *ngIf="!loading">
4+
<div class="toolbar">
5+
<div class="pull-left">
6+
<div class="custom-control custom-checkbox">
7+
<input type="checkbox"
8+
class="custom-control-input"
9+
id="showDiffs"
10+
[ngModel]="showLinesDiffs"
11+
(ngModelChange)="showLinesDiffsChange($event)"
12+
>
13+
<label class="custom-control-label" for="showDiffs">Show Lines with Diffs ({{diffs}})</label>
14+
</div>
15+
</div>
16+
<div class="pull-right">
17+
<div class="btn-group btn-group-toggle" data-toggle="buttons">
18+
<label class="btn btn-outline-dark btn-sm" *ngFor="let option of formatOptions"
19+
[ngClass]="{'active': format === option.value, 'disabled': !!option.disabled}">
20+
<input type="radio"
21+
[name]="option.name"
22+
[id]="option.id"
23+
[disabled]="!!option.disabled"
24+
autocomplete="off"
25+
(click)="setDiffTableFormat(option.value)"
26+
[checked]="format === option.value"
27+
><i class="la {{option.icon}}"></i> {{option.label}}
28+
</label>
29+
</div>
30+
</div>
31+
</div>
32+
<div class="side-by-side table-responsive" *ngIf="format === 'SideBySide'">
33+
<table class="table">
34+
<tbody>
35+
<tr *ngFor="let row of filteredLeftRightRows">
36+
<td scope="row" class="fit-column line-number-col"
37+
[ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">{{(row.lineNumberLeft !== -1) ?
38+
row.lineNumberLeft : ' '}}
39+
</td>
40+
<td class="fit-column prefix-col" [ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">
41+
<pre>{{row.prefix || ' '}}</pre>
42+
</td>
43+
<td class="content-col" [ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">
44+
<pre>{{row.content || ' '}}</pre>
45+
</td>
46+
<td scope="row" class="fit-column line-number-col"
47+
[ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
48+
{{(row.lineNumberRight !== -1) ? row.lineNumberRight : ' '}}
49+
</td>
50+
<td class="fit-column prefix-col"
51+
[ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
52+
<pre>{{row.prefixRight || ' '}}</pre>
53+
</td>
54+
<td class="content-col" [ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
55+
<pre>{{row.contentRight || ' '}}</pre>
56+
</td>
57+
<tr>
58+
</tr>
59+
</tbody>
60+
</table>
61+
</div>
62+
<div class="line-by-line table-responsive" *ngIf="format === 'LineByLine'">
63+
<table class="table">
64+
<tbody>
65+
<tr *ngFor="let row of filteredRows">
66+
<td scope="row" class="fit-column line-number-col-left">{{row.lineNumberLeft}}</td>
67+
<td scope="row" class="fit-column line-number-col">{{row.lineNumberRight}}</td>
68+
<td class="fit-column prefix-col"
69+
[ngClass]="{'delete-row' : row.prefix === '-', 'insert-row' : row.prefix === '+'}">
70+
<pre>{{row.prefix || ' '}}</pre>
71+
</td>
72+
<td class="content-col" [ngClass]="{'delete-row' : row.prefix === '-', 'insert-row' : row.prefix === '+'}">
73+
<pre>{{row.content || ' '}}</pre>
74+
</td>
75+
</tr>
76+
</tbody>
77+
</table>
78+
</div>
79+
<app-diff-codemirror-merge [left]="left" [right]="right" *ngIf="format === 'MergeView'"></app-diff-codemirror-merge>
80+
</div>
81+
</div>

‎projects/ngx-text-diff/src/lib/ngx-text-diff.component.ts‎

Lines changed: 124 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,135 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
2+
import { DiffContent, DiffTableBothRow, DiffTableFormat, DiffTableFormatOption, DiffTableRow } from './ngx-text-diff.model';
3+
import { NgxTextDiffService } from './ngx-text-diff.service';
4+
import { Observable, Subscription } from 'rxjs';
25

36
@Component({
47
selector: 'td-ngx-text-diff',
5-
template: `
6-
<p>
7-
ngx-text-diff works!
8-
</p>
9-
`,
10-
styles: []
8+
templateUrl: './ngx-text-diff.component.html',
9+
styleUrls: ['./ngx-text-diff.component.css'],
10+
changeDetection: ChangeDetectionStrategy.OnPush
1111
})
1212
export class NgxTextDiffComponent implements OnInit {
13+
@Input() format: DiffTableFormat = 'SideBySide';
14+
@Input() left = '';
15+
@Input() right = '';
16+
@Input() loading = false;
17+
@Input() diffContentObservable$: Observable<DiffContent>;
18+
subscriptions: Subscription[] = [];
19+
rows: DiffTableRow[] = [];
20+
filteredRows: DiffTableRow[] = [];
21+
leftRightRows: DiffTableBothRow[] = [];
22+
filteredLeftRightRows: DiffTableBothRow[] = [];
23+
showLinesDiffs = false;
24+
diffs = 0;
1325

14-
constructor() { }
26+
formatOptions: DiffTableFormatOption[] = [
27+
{
28+
id: 'side-by-side',
29+
name: 'side-by-side',
30+
label: 'Side by Side',
31+
value: 'SideBySide',
32+
icon: 'la-code'
33+
},
34+
{
35+
id: 'line-by-line',
36+
name: 'line-by-line',
37+
label: 'Line by Line',
38+
value: 'LineByLine',
39+
icon: 'la-file-text'
40+
},
41+
{
42+
id: 'merge-view',
43+
name: 'merge-view',
44+
label: 'Merge View',
45+
value: 'MergeView',
46+
icon: 'la-file-text',
47+
disabled: true
48+
}
49+
];
50+
51+
constructor(private diff: NgxTextDiffService, private cd: ChangeDetectorRef) {}
1552

1653
ngOnInit() {
54+
if (this.diffContentObservable$) {
55+
this.subscriptions.push(
56+
this.diffContentObservable$.subscribe(content => {
57+
this.left = content.leftContent;
58+
this.right = content.rightContent;
59+
this.renderDiffs();
60+
this.cd.detectChanges();
61+
})
62+
);
63+
}
64+
this.renderDiffs();
65+
}
66+
67+
showLinesDiffsChange(value: boolean) {
68+
this.showLinesDiffs = value;
69+
if (this.showLinesDiffs) {
70+
this.filteredLeftRightRows = this.leftRightRows.filter(row => row.prefix === '-' || row.prefixRight === '+');
71+
this.filteredRows = this.rows.filter(row => row.prefix === '-' || row.prefix === '+');
72+
} else {
73+
this.filteredLeftRightRows = this.leftRightRows;
74+
this.filteredRows = this.rows;
75+
}
1776
}
1877

78+
setDiffTableFormat(format: DiffTableFormat) {
79+
this.format = format;
80+
}
81+
82+
renderDiffs() {
83+
this.loading = true;
84+
this.leftRightRows = [];
85+
this.rows = [];
86+
this.diffs = 0;
87+
this.diff.getDiffs(this.left, this.right).then((diffRows: DiffTableRow[]) => {
88+
diffRows.forEach(row => {
89+
switch (row.belongTo) {
90+
case 'both':
91+
this.leftRightRows.push({
92+
lineNumberLeft: row.lineNumberLeft,
93+
lineNumberRight: row.lineNumberRight,
94+
prefix: row.prefix,
95+
prefixRight: row.prefix,
96+
content: row.content,
97+
contentRight: row.content
98+
});
99+
break;
100+
case 'left':
101+
if (!this.leftRightRows.some(rowTemp => row.lineNumberLeft === rowTemp.lineNumberLeft)) {
102+
const rightRow = diffRows.find(rowTemp => row.lineNumberLeft === rowTemp.lineNumberRight && rowTemp.belongTo === 'right');
103+
this.leftRightRows.push({
104+
lineNumberLeft: row.lineNumberLeft,
105+
lineNumberRight: rightRow ? rightRow.lineNumberRight : null,
106+
prefix: row.prefix,
107+
prefixRight: rightRow ? rightRow.prefix : null,
108+
content: row.content,
109+
contentRight: rightRow ? rightRow.content : null
110+
});
111+
}
112+
break;
113+
case 'right':
114+
if (!this.leftRightRows.some(rowTemp => row.lineNumberRight === rowTemp.lineNumberRight)) {
115+
const leftRow = diffRows.find(rowTemp => row.lineNumberRight === rowTemp.lineNumberLeft && rowTemp.belongTo === 'left');
116+
this.leftRightRows.push({
117+
lineNumberLeft: leftRow ? leftRow.lineNumberLeft : null,
118+
lineNumberRight: row.lineNumberRight,
119+
prefix: leftRow ? leftRow.prefix : null,
120+
prefixRight: row.prefix,
121+
content: leftRow ? leftRow.content : null,
122+
contentRight: row.content
123+
});
124+
}
125+
break;
126+
}
127+
});
128+
this.rows = diffRows;
129+
this.diffs = this.leftRightRows.filter(row => row.prefix === '-' || row.prefixRight === '+').length;
130+
this.filteredLeftRightRows = this.leftRightRows;
131+
this.filteredRows = this.rows;
132+
this.loading = false;
133+
});
134+
}
19135
}

‎projects/ngx-text-diff/src/lib/ngx-text-diff.model.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export type DiffTableFormat = 'SideBySide' | 'LineByLine' | 'MergeView';
2+
export type SideDiff = 'both' | 'left' | 'right';
3+
4+
export interface DiffTableFormatOption {
5+
id: string;
6+
name: string;
7+
label: string;
8+
value: DiffTableFormat;
9+
icon?: string;
10+
disabled?: boolean;
11+
}
12+
13+
export interface DiffContent {
14+
leftContent: string;
15+
rightContent: string;
16+
}
17+
18+
export interface DiffTableRow {
19+
lineNumberLeft?: number;
20+
lineNumberRight?: number;
21+
prefix?: string;
22+
content: string;
23+
belongTo?: SideDiff;
24+
}
25+
26+
export interface DiffTableBothRow extends DiffTableRow {
27+
prefixRight?: string;
28+
contentRight?: string;
29+
}

0 commit comments

Comments
 (0)