Merge pull request #3907 from CatoTH/OpenSlides-3-ChangeRecommendations
Line Numbering / Change Recommendations
This commit is contained in:
Sean
GitHub
commit
794b978627
@ -6,7 +6,7 @@ import { BaseModel } from '../base/base-model';
|
||||
*/
|
||||
export class MotionChangeReco extends BaseModel<MotionChangeReco> {
|
||||
public id: number;
|
||||
public motion_version_id: number;
|
||||
public motion_id: number;
|
||||
public rejected: boolean;
|
||||
public type: number;
|
||||
public other_description: string;
|
||||
|
||||
@ -20,10 +20,12 @@ import {
|
||||
MatDatepickerModule,
|
||||
MatNativeDateModule,
|
||||
DateAdapter,
|
||||
MatIconModule
|
||||
MatIconModule,
|
||||
MatButtonToggleModule
|
||||
} from '@angular/material';
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatChipsModule } from '@angular/material';
|
||||
import { MatRadioModule } from '@angular/material';
|
||||
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
@ -88,6 +90,8 @@ import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.
|
||||
// we either wait or include a fixed version manually (dirty)
|
||||
// https://github.com/google/material-design-icons/issues/786
|
||||
MatIconModule,
|
||||
MatRadioModule,
|
||||
MatButtonToggleModule,
|
||||
TranslateModule.forChild(),
|
||||
RouterModule,
|
||||
NgxMatSelectSearchModule
|
||||
@ -117,6 +121,8 @@ import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.
|
||||
MatChipsModule,
|
||||
MatTooltipModule,
|
||||
MatIconModule,
|
||||
MatRadioModule,
|
||||
MatButtonToggleModule,
|
||||
NgxMatSelectSearchModule,
|
||||
TranslateModule,
|
||||
PermsDirective,
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
<h2 mat-dialog-title>Create a change recommendation</h2>
|
||||
<mat-dialog-content>
|
||||
<form class="motion-content" [formGroup]='contentForm' (ngSubmit)='saveChangeRecommendation()'>
|
||||
<h3>Change from line {{ lineRange.from }} to {{ lineRange.to }}:</h3>
|
||||
|
||||
<mat-radio-group #rGroup formControlName="diffType">
|
||||
<mat-radio-button *ngFor="let radio of replacementTypes" [value]="radio.value">{{ radio.title }}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<mat-form-field class="wide-form">
|
||||
<textarea matInput placeholder='Change recommendation Text' formControlName='text'></textarea>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions>
|
||||
<button mat-button mat-dialog-close>Abort</button>
|
||||
<!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
|
||||
<button mat-button (click)="saveChangeRecommendation()">save</button>
|
||||
</mat-dialog-actions>
|
||||
@ -0,0 +1,9 @@
|
||||
.wide-form {
|
||||
textarea {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import {
|
||||
MotionChangeRecommendationComponent,
|
||||
MotionChangeRecommendationComponentData
|
||||
} from './motion-change-recommendation.component';
|
||||
import { E2EImportsModule } from '../../../../../e2e-imports.module';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
|
||||
import { ModificationType } from '../../services/diff.service';
|
||||
import { ViewChangeReco } from '../../models/view-change-reco';
|
||||
|
||||
describe('MotionChangeRecommendationComponent', () => {
|
||||
let component: MotionChangeRecommendationComponent;
|
||||
let fixture: ComponentFixture<MotionChangeRecommendationComponent>;
|
||||
|
||||
const changeReco = <ViewChangeReco>{
|
||||
line_from: 1,
|
||||
line_to: 2,
|
||||
type: ModificationType.TYPE_REPLACEMENT,
|
||||
text: '<p>',
|
||||
rejected: false,
|
||||
motion_id: 1
|
||||
};
|
||||
const dialogData: MotionChangeRecommendationComponentData = {
|
||||
newChangeRecommendation: true,
|
||||
editChangeRecommendation: false,
|
||||
changeRecommendation: changeReco,
|
||||
lineRange: { from: 1, to: 2 }
|
||||
};
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [E2EImportsModule],
|
||||
declarations: [MotionChangeRecommendationComponent],
|
||||
providers: [
|
||||
{ provide: MatDialogRef, useValue: {} },
|
||||
{
|
||||
provide: MAT_DIALOG_DATA,
|
||||
useValue: dialogData
|
||||
}
|
||||
]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MotionChangeRecommendationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,135 @@
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { LineRange, ModificationType } from '../../services/diff.service';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { ChangeRecommendationRepositoryService } from '../../services/change-recommendation-repository.service';
|
||||
import { ViewChangeReco } from '../../models/view-change-reco';
|
||||
|
||||
/**
|
||||
* Data that needs to be provided to the MotionChangeRecommendationComponent dialog
|
||||
*/
|
||||
export interface MotionChangeRecommendationComponentData {
|
||||
editChangeRecommendation: boolean;
|
||||
newChangeRecommendation: boolean;
|
||||
lineRange: LineRange;
|
||||
changeRecommendation: ViewChangeReco;
|
||||
}
|
||||
|
||||
/**
|
||||
* The dialog for creating and editing change recommendations from within the os-motion-detail-component.
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* const data: MotionChangeRecommendationComponentData = {
|
||||
* editChangeRecommendation: false,
|
||||
* newChangeRecommendation: true,
|
||||
* lineRange: lineRange,
|
||||
* motion: this.motion,
|
||||
* };
|
||||
* this.dialogService.open(MotionChangeRecommendationComponent, {
|
||||
* height: '400px',
|
||||
* width: '600px',
|
||||
* data: data,
|
||||
* });
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
@Component({
|
||||
selector: 'os-motion-change-recommendation',
|
||||
templateUrl: './motion-change-recommendation.component.html',
|
||||
styleUrls: ['./motion-change-recommendation.component.scss']
|
||||
})
|
||||
export class MotionChangeRecommendationComponent {
|
||||
/**
|
||||
* Determine if the change recommendation is edited
|
||||
*/
|
||||
public editReco = false;
|
||||
|
||||
/**
|
||||
* Determine if the change recommendation is new
|
||||
*/
|
||||
public newReco = false;
|
||||
|
||||
/**
|
||||
* The change recommendation
|
||||
*/
|
||||
public changeReco: ViewChangeReco;
|
||||
|
||||
/**
|
||||
* The line range affected by this change recommendation
|
||||
*/
|
||||
public lineRange: LineRange;
|
||||
|
||||
/**
|
||||
* Change recommendation content.
|
||||
*/
|
||||
public contentForm: FormGroup;
|
||||
|
||||
/**
|
||||
* The replacement types for the radio group
|
||||
* @TODO translate
|
||||
*/
|
||||
public replacementTypes = [
|
||||
{
|
||||
value: ModificationType.TYPE_REPLACEMENT,
|
||||
title: 'Replacement'
|
||||
},
|
||||
{
|
||||
value: ModificationType.TYPE_INSERTION,
|
||||
title: 'Insertion'
|
||||
},
|
||||
{
|
||||
value: ModificationType.TYPE_DELETION,
|
||||
title: 'Deletion'
|
||||
}
|
||||
];
|
||||
|
||||
public constructor(
|
||||
@Inject(MAT_DIALOG_DATA) public data: MotionChangeRecommendationComponentData,
|
||||
private formBuilder: FormBuilder,
|
||||
private repo: ChangeRecommendationRepositoryService,
|
||||
private dialogRef: MatDialogRef<MotionChangeRecommendationComponent>
|
||||
) {
|
||||
this.editReco = data.editChangeRecommendation;
|
||||
this.newReco = data.newChangeRecommendation;
|
||||
this.changeReco = data.changeRecommendation;
|
||||
this.lineRange = data.lineRange;
|
||||
|
||||
this.createForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the forms for the Motion and the MotionVersion
|
||||
*/
|
||||
public createForm(): void {
|
||||
this.contentForm = this.formBuilder.group({
|
||||
text: [this.changeReco.text, Validators.required],
|
||||
diffType: [this.changeReco.type, Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
public saveChangeRecommendation(): void {
|
||||
this.changeReco.updateChangeReco(
|
||||
this.contentForm.controls.diffType.value,
|
||||
this.contentForm.controls.text.value
|
||||
);
|
||||
|
||||
if (this.newReco) {
|
||||
this.repo.createByViewModel(this.changeReco).subscribe(response => {
|
||||
if (response.id) {
|
||||
this.dialogRef.close(response);
|
||||
} else {
|
||||
// @TODO Show an error message
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.repo.update(this.changeReco.changeRecommendation, this.changeReco).subscribe(response => {
|
||||
if (response.id) {
|
||||
this.dialogRef.close(response);
|
||||
} else {
|
||||
// @TODO Show an error message
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,123 @@
|
||||
<!-- A summary of all changes -->
|
||||
<section class="change-recommendation-overview">
|
||||
<strong>
|
||||
{{ 'Summary of changes' | translate }}:
|
||||
</strong>
|
||||
|
||||
<!--
|
||||
<button os-perms="motions.can_manage" class="btn btn-sm btn-default pull-right"
|
||||
uib-tooltip="{{ 'Note: You have to reject all change recommendations if the plenum does not follow the recommendation. This does not affect amendments.' | translate }}"
|
||||
ng-click="viewChangeRecommendations.rejectAllChangeRecommendations(motion)">
|
||||
<i class="fa fa-thumbs-down"></i>
|
||||
<translate>Reject all change recommendations</translate>
|
||||
</button>
|
||||
-->
|
||||
|
||||
<ul *ngIf="changes.length > 0">
|
||||
<li *ngFor="let change of changes">
|
||||
<a href='' (click)="scrollToChangeClicked(change, $event)"
|
||||
[class.amendment]="isAmendment(change)"
|
||||
[class.recommendation]="isChangeRecommendation(change)">
|
||||
<span *ngIf="change.getLineFrom() >= change.getLineTo() - 1" class="line-number">
|
||||
{{ 'Line' | translate }} {{ change.getLineFrom() }}<span *ngIf="isChangeRecommendation(change)"></span>
|
||||
</span>
|
||||
<span *ngIf="change.getLineFrom() < change.getLineTo() - 1" class="line-number">
|
||||
{{ 'Line' | translate }} {{ change.getLineFrom() }} -
|
||||
{{ change.getLineTo() - 1 }}<span *ngIf="isChangeRecommendation(change)"></span>
|
||||
</span>
|
||||
<span *ngIf="isChangeRecommendation(change)">({{ 'Change recommendation' | translate }})</span>
|
||||
<span *ngIf="isAmendment(change)">@TODO Identifier</span>
|
||||
<span class="operation" *ngIf="isChangeRecommendation(change)">–
|
||||
{{ getRecommendationTypeName(change) }}
|
||||
<!-- @TODO
|
||||
<span ng-if="change.original.getType(motion.getVersion(version).text) == 3">
|
||||
{ change.other_description }
|
||||
</span>
|
||||
-->
|
||||
</span>
|
||||
<span class="status">
|
||||
<ng-container *ngIf="change.isRejected()" translate>Rejected</ng-container>
|
||||
<ng-container *ngIf="change.isAccepted() && isAmendment(change)" translate>Accepted</ng-container>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div *ngIf="changes.length === 0" class="no-changes">
|
||||
{{ 'No change recommendations yet' | translate }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- The actual diff view -->
|
||||
<div class="motion-text-with-diffs">
|
||||
<div *ngFor="let change of changes; let i = index">
|
||||
<div class="motion-text line-numbers-outside">
|
||||
<os-motion-detail-original-change-recommendations
|
||||
[html]="getTextBetweenChanges(changes[i - 1], change)"
|
||||
[changeRecommendations]="[]"
|
||||
(createChangeRecommendation)="onCreateChangeRecommendation($event)"
|
||||
></os-motion-detail-original-change-recommendations>
|
||||
</div>
|
||||
|
||||
<div [class.collides]="hasCollissions(change)"
|
||||
class="diff-box diff-box-{{ change.getChangeId() }} clearfix">
|
||||
<div class="collission-hint" *ngIf="hasCollissions(change)">
|
||||
<mat-icon matTooltip="{{ 'This change collides with another one.' | translate }}">warning</mat-icon>
|
||||
</div>
|
||||
<div class="action-row" *osPerms="'motions.can_manage'">
|
||||
<button mat-icon-button *ngIf="isRecommendation(change)" type="button"
|
||||
[matMenuTriggerFor]="changeRecommendationMenu" [matMenuTriggerData]="{change: change}" >
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
<a ng-if="change.type == 'amendment'" ui-sref="motions.motion.detail({id: change.original.id})"
|
||||
uib-tooltip="Open amendment"
|
||||
class="btn btn-default btn-sm pull-right btn-amend-info">
|
||||
<i class="fa fa-info"></i>
|
||||
{{ change.original.identifier }}
|
||||
</a>
|
||||
-->
|
||||
</div>
|
||||
<div class="status-row" *ngIf="change.isRejected()">
|
||||
<i class="grey" translate>{{ 'Rejected' | translate }}:</i>
|
||||
</div>
|
||||
|
||||
<div class="motion-text motion-text-diff line-numbers-outside"
|
||||
[attr.data-change-id]="change.getChangeId()"
|
||||
[innerHTML]="getDiff(change)"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="motion-text line-numbers-outside">
|
||||
<os-motion-detail-original-change-recommendations
|
||||
[html]="getTextRemainderAfterLastChange()"
|
||||
[changeRecommendations]="[]"
|
||||
(createChangeRecommendation)="onCreateChangeRecommendation($event)"
|
||||
></os-motion-detail-original-change-recommendations>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-menu #changeRecommendationMenu="matMenu">
|
||||
<ng-template matMenuContent let-change="change">
|
||||
<button type="button" mat-menu-item [disabled]="hasCollissions(change)" (click)="setAcceptanceValue(change, 'accepted')">
|
||||
<mat-icon>thumb_up</mat-icon>
|
||||
<span translate>Accept</span>
|
||||
<mat-icon *ngIf="change.isAccepted()" class="active-indicator">done</mat-icon>
|
||||
</button>
|
||||
<button type="button" mat-menu-item [disabled]="hasCollissions(change)" (click)="setAcceptanceValue(change, 'rejected')">
|
||||
<mat-icon>thumb_down</mat-icon>
|
||||
<span translate>Reject</span>
|
||||
<mat-icon *ngIf="change.isRejected()" class="active-indicator">done</mat-icon>
|
||||
</button>
|
||||
<button type="button" mat-menu-item (click)="deleteChangeRecommendation(change, $event)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span translate>Delete</span>
|
||||
</button>
|
||||
<button type="button" mat-menu-item (click)="editChangeRecommendation(change, $event)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
<span translate>Edit</span>
|
||||
</button>
|
||||
</ng-template>
|
||||
</mat-menu>
|
||||
@ -0,0 +1,116 @@
|
||||
/* Diffbox */
|
||||
.diff-box {
|
||||
background-color: #f9f9f9;
|
||||
border: solid 1px #eee;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-right: 155px;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f0f0;
|
||||
|
||||
.action-row {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.action-row {
|
||||
font-size: 0.8em;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
float: right;
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
margin-right: -150px;
|
||||
opacity: 0.5;
|
||||
|
||||
.btn-delete {
|
||||
margin-left: 5px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.btn-amend-info {
|
||||
margin-left: 5px;
|
||||
min-width: 68px;
|
||||
}
|
||||
}
|
||||
.status-row {
|
||||
font-style: italic;
|
||||
color: gray;
|
||||
|
||||
& > *:after {
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.change-recommendation-overview {
|
||||
background-color: #eee;
|
||||
border: solid 1px #ddd;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: -15px;
|
||||
padding: 5px 5px 0 5px;
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: table;
|
||||
}
|
||||
|
||||
li {
|
||||
display: table-row;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
& > * {
|
||||
display: table-cell;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
color: gray;
|
||||
font-style: italic;
|
||||
|
||||
& > *:before {
|
||||
content: '(';
|
||||
}
|
||||
|
||||
& > *:after {
|
||||
content: ')';
|
||||
}
|
||||
}
|
||||
|
||||
.no-changes {
|
||||
font-style: italic;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-menu-content {
|
||||
.active-indicator {
|
||||
font-size: 18px;
|
||||
color: green !important;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { E2EImportsModule } from '../../../../../e2e-imports.module';
|
||||
import { Component } from '@angular/core';
|
||||
import { ViewMotion } from '../../models/view-motion';
|
||||
import { ViewChangeReco } from '../../models/view-change-reco';
|
||||
import { MotionDetailDiffComponent } from './motion-detail-diff.component';
|
||||
import { MotionDetailOriginalChangeRecommendationsComponent } from '../motion-detail-original-change-recommendations/motion-detail-original-change-recommendations.component';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<os-motion-detail-diff
|
||||
[motion]="motion"
|
||||
[changes]="changes"
|
||||
(scrollToChange)="scrollToChange($event)"
|
||||
(createChangeRecommendation)="createChangeRecommendation($event)"
|
||||
>
|
||||
</os-motion-detail-diff>`
|
||||
})
|
||||
class TestHostComponent {
|
||||
public motion: ViewMotion;
|
||||
public changes: ViewChangeReco[];
|
||||
|
||||
public constructor() {
|
||||
this.motion = new ViewMotion();
|
||||
this.changes = [];
|
||||
}
|
||||
|
||||
public scrollToChange($event: Event): void {}
|
||||
|
||||
public createChangeRecommendation($event: Event): void {}
|
||||
}
|
||||
|
||||
describe('MotionDetailDiffComponent', () => {
|
||||
let component: TestHostComponent;
|
||||
let fixture: ComponentFixture<TestHostComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [E2EImportsModule],
|
||||
declarations: [
|
||||
TestHostComponent,
|
||||
MotionDetailDiffComponent,
|
||||
MotionDetailOriginalChangeRecommendationsComponent
|
||||
]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TestHostComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,253 @@
|
||||
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
|
||||
import { ViewMotion } from '../../models/view-motion';
|
||||
import { ViewUnifiedChange, ViewUnifiedChangeType } from '../../models/view-unified-change';
|
||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
import { MotionRepositoryService } from '../../services/motion-repository.service';
|
||||
import { LineRange, ModificationType } from '../../services/diff.service';
|
||||
import { ViewChangeReco } from '../../models/view-change-reco';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { ChangeRecommendationRepositoryService } from '../../services/change-recommendation-repository.service';
|
||||
import {
|
||||
MotionChangeRecommendationComponent,
|
||||
MotionChangeRecommendationComponentData
|
||||
} from '../motion-change-recommendation/motion-change-recommendation.component';
|
||||
|
||||
/**
|
||||
* This component displays the original motion text with the change blocks inside.
|
||||
* If the user is an administrator, each change block can be rejected.
|
||||
*
|
||||
* The line numbers are provided within the pre-rendered HTML, so we have to work with raw HTML and native HTML elements.
|
||||
*
|
||||
* It takes the styling from the parent component.
|
||||
*
|
||||
* ## Examples
|
||||
*
|
||||
* ```html
|
||||
* <os-motion-detail-diff
|
||||
* [motion]="motion"
|
||||
* [changes]="changes"
|
||||
* [scrollToChange]="change"
|
||||
* (createChangeRecommendation)="createChangeRecommendation($event)"
|
||||
* ></os-motion-detail-diff>
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: 'os-motion-detail-diff',
|
||||
templateUrl: './motion-detail-diff.component.html',
|
||||
styleUrls: ['./motion-detail-diff.component.scss']
|
||||
})
|
||||
export class MotionDetailDiffComponent implements AfterViewInit {
|
||||
@Input()
|
||||
public motion: ViewMotion;
|
||||
@Input()
|
||||
public changes: ViewUnifiedChange[];
|
||||
@Input()
|
||||
public scrollToChange: ViewUnifiedChange;
|
||||
|
||||
@Output()
|
||||
public createChangeRecommendation: EventEmitter<LineRange> = new EventEmitter<LineRange>();
|
||||
|
||||
public constructor(
|
||||
private sanitizer: DomSanitizer,
|
||||
private motionRepo: MotionRepositoryService,
|
||||
private recoRepo: ChangeRecommendationRepositoryService,
|
||||
private dialogService: MatDialog,
|
||||
private el: ElementRef
|
||||
) {}
|
||||
|
||||
/**
|
||||
* Returns the part of this motion between two change objects
|
||||
* @param {ViewUnifiedChange} change1
|
||||
* @param {ViewUnifiedChange} change2
|
||||
*/
|
||||
public getTextBetweenChanges(change1: ViewUnifiedChange, change2: ViewUnifiedChange): string {
|
||||
// @TODO Highlighting
|
||||
const lineRange: LineRange = {
|
||||
from: change1 ? change1.getLineTo() : 1,
|
||||
to: change2 ? change2.getLineFrom() : null
|
||||
};
|
||||
|
||||
if (lineRange.from > lineRange.to) {
|
||||
const msg = 'Inconsistent data.';
|
||||
return '<em style="color: red; font-weight: bold;">' + msg + '</em>';
|
||||
}
|
||||
if (lineRange.from === lineRange.to) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return this.motionRepo.extractMotionLineRange(this.motion.id, lineRange, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if this change is colliding with another change
|
||||
* @param change
|
||||
*/
|
||||
public hasCollissions(change: ViewUnifiedChange): boolean {
|
||||
// @TODO Implementation
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the diff string from the motion to the change
|
||||
* @param {ViewUnifiedChange} change
|
||||
*/
|
||||
public getDiff(change: ViewUnifiedChange): SafeHtml {
|
||||
const html = this.motionRepo.getChangeDiff(this.motion, change);
|
||||
return this.sanitizer.bypassSecurityTrustHtml(html);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the remainder text of the motion after the last change
|
||||
*/
|
||||
public getTextRemainderAfterLastChange(): string {
|
||||
return this.motionRepo.getTextRemainderAfterLastChange(this.motion, this.changes);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the change is a Change Recommendation
|
||||
*
|
||||
* @param {ViewUnifiedChange} change
|
||||
*/
|
||||
public isRecommendation(change: ViewUnifiedChange): boolean {
|
||||
return change.getChangeType() === ViewUnifiedChangeType.TYPE_CHANGE_RECOMMENDATION;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns accepted, rejected or an empty string depending on the state of this change.
|
||||
*
|
||||
* @param change
|
||||
*/
|
||||
public getAcceptanceValue(change: ViewUnifiedChange): string {
|
||||
if (change.isAccepted()) {
|
||||
return 'accepted';
|
||||
}
|
||||
if (change.isRejected()) {
|
||||
return 'rejected';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the change is an Amendment
|
||||
*
|
||||
* @param {ViewUnifiedChange} change
|
||||
*/
|
||||
public isAmendment(change: ViewUnifiedChange): boolean {
|
||||
return change.getChangeType() === ViewUnifiedChangeType.TYPE_AMENDMENT;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the change is a Change Recommendation
|
||||
*
|
||||
* @param {ViewUnifiedChange} change
|
||||
*/
|
||||
public isChangeRecommendation(change: ViewUnifiedChange): boolean {
|
||||
return change.getChangeType() === ViewUnifiedChangeType.TYPE_CHANGE_RECOMMENDATION;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the name of the modification type
|
||||
*
|
||||
* @param change
|
||||
*/
|
||||
public getRecommendationTypeName(change: ViewChangeReco): string {
|
||||
switch (change.type) {
|
||||
case ModificationType.TYPE_REPLACEMENT:
|
||||
return 'Replacement';
|
||||
case ModificationType.TYPE_INSERTION:
|
||||
return 'Insertion';
|
||||
case ModificationType.TYPE_DELETION:
|
||||
return 'Deletion';
|
||||
default:
|
||||
return '@UNKNOWN@';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a change recommendation to accepted or rejected.
|
||||
* The template has to make sure only to pass change recommendations to this method.
|
||||
*
|
||||
* @param {ViewChangeReco} change
|
||||
* @param {string} value
|
||||
*/
|
||||
public setAcceptanceValue(change: ViewChangeReco, value: string): void {
|
||||
if (value === 'accepted') {
|
||||
this.recoRepo.setAccepted(change).subscribe(() => {}); // Subscribe to trigger HTTP request
|
||||
}
|
||||
if (value === 'rejected') {
|
||||
this.recoRepo.setRejected(change).subscribe(() => {}); // Subscribe to trigger HTTP request
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a change recommendation.
|
||||
* The template has to make sure only to pass change recommendations to this method.
|
||||
*
|
||||
* @param {ViewChangeReco} reco
|
||||
* @param {MouseEvent} $event
|
||||
*/
|
||||
public deleteChangeRecommendation(reco: ViewChangeReco, $event: MouseEvent): void {
|
||||
this.recoRepo.delete(reco).subscribe(() => {}); // Subscribe to trigger HTTP request
|
||||
$event.stopPropagation();
|
||||
$event.preventDefault();
|
||||
}
|
||||
|
||||
/**
|
||||
* Edits a change recommendation.
|
||||
* The template has to make sure only to pass change recommendations to this method.
|
||||
*
|
||||
* @param {ViewChangeReco} reco
|
||||
* @param {MouseEvent} $event
|
||||
*/
|
||||
public editChangeRecommendation(reco: ViewChangeReco, $event: MouseEvent): void {
|
||||
$event.stopPropagation();
|
||||
$event.preventDefault();
|
||||
|
||||
const data: MotionChangeRecommendationComponentData = {
|
||||
editChangeRecommendation: true,
|
||||
newChangeRecommendation: false,
|
||||
lineRange: {
|
||||
from: reco.getLineFrom(),
|
||||
to: reco.getLineTo()
|
||||
},
|
||||
changeRecommendation: reco
|
||||
};
|
||||
this.dialogService.open(MotionChangeRecommendationComponent, {
|
||||
height: '400px',
|
||||
width: '600px',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Scrolls to the native element specified by [scrollToChange]
|
||||
*/
|
||||
private scrollToChangeElement(change: ViewUnifiedChange): void {
|
||||
const element = <HTMLElement>this.el.nativeElement;
|
||||
const target = element.querySelector('[data-change-id="' + change.getChangeId() + '"]');
|
||||
target.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
public scrollToChangeClicked(change: ViewUnifiedChange, $event: MouseEvent): void {
|
||||
$event.preventDefault();
|
||||
$event.stopPropagation();
|
||||
this.scrollToChangeElement(change);
|
||||
}
|
||||
|
||||
/**
|
||||
* Called from motion-detail-original-change-recommendations -> delegate to parent
|
||||
*
|
||||
* @param {LineRange} event
|
||||
*/
|
||||
public onCreateChangeRecommendation(event: LineRange): void {
|
||||
this.createChangeRecommendation.emit(event);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
if (this.scrollToChange) {
|
||||
window.setTimeout(() => {
|
||||
this.scrollToChangeElement(this.scrollToChange);
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="text"></div>
|
||||
<ul class="change-recommendation-list" *ngIf="showChangeRecommendations">
|
||||
<li *ngFor="let reco of changeRecommendations"
|
||||
[title]="reco.getTitle()"
|
||||
[style.top]="calcRecoTop(reco)"
|
||||
[style.height]="calcRecoHeight(reco)"
|
||||
[class.delete]="recoIsDeletion(reco)"
|
||||
[class.insert]="recoIsInsertion(reco)"
|
||||
[class.replace]="recoIsReplacement(reco)"
|
||||
(click)="gotoReco(reco)"
|
||||
></li>
|
||||
</ul>
|
||||
@ -0,0 +1,38 @@
|
||||
.change-recommendation-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -25px;
|
||||
width: 4px;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
& > li {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&.insert {
|
||||
background-color: #00aa00;
|
||||
}
|
||||
|
||||
&.delete {
|
||||
background-color: #aa0000;
|
||||
}
|
||||
|
||||
&.replace {
|
||||
background-color: #0333ff;
|
||||
}
|
||||
|
||||
&.other {
|
||||
background-color: #777777;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MotionDetailOriginalChangeRecommendationsComponent } from './motion-detail-original-change-recommendations.component';
|
||||
import { E2EImportsModule } from '../../../../../e2e-imports.module';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<os-motion-detail-original-change-recommendations
|
||||
[html]="html"
|
||||
[changeRecommendations]="changeRecommendations"
|
||||
(createChangeRecommendation)="createChangeRecommendation($event)"
|
||||
(gotoChangeRecommendation)="gotoChangeRecommendation($event)"
|
||||
>
|
||||
</os-motion-detail-original-change-recommendations>`
|
||||
})
|
||||
class TestHostComponent {
|
||||
public html = '<p>Test123</p>';
|
||||
public changeRecommendations = [];
|
||||
public createChangeRecommendation($event: Event): void {}
|
||||
public gotoChangeRecommendation($event: Event): void {}
|
||||
}
|
||||
|
||||
describe('MotionDetailOriginalChangeRecommendationsComponent', () => {
|
||||
let component: TestHostComponent;
|
||||
let fixture: ComponentFixture<TestHostComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [E2EImportsModule],
|
||||
declarations: [MotionDetailOriginalChangeRecommendationsComponent, TestHostComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TestHostComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,284 @@
|
||||
import {
|
||||
ElementRef,
|
||||
Renderer2,
|
||||
OnInit,
|
||||
Output,
|
||||
EventEmitter,
|
||||
Input,
|
||||
Component,
|
||||
OnChanges,
|
||||
SimpleChanges
|
||||
} from '@angular/core';
|
||||
import { LineRange, ModificationType } from '../../services/diff.service';
|
||||
import { ViewChangeReco } from '../../models/view-change-reco';
|
||||
import { OperatorService } from '../../../../core/services/operator.service';
|
||||
|
||||
/**
|
||||
* This component displays the original motion text with annotated change commendations
|
||||
* and a method to create new change recommendations from the line numbers to the left of the text.
|
||||
* It's called from motion-details for displaying the whole motion text as well as from the diff view to show the
|
||||
* unchanged parts of the motion.
|
||||
*
|
||||
* The line numbers are provided within the pre-rendered HTML, so we have to work with raw HTML and native HTML elements.
|
||||
*
|
||||
* It takes the styling from the parent component.
|
||||
*
|
||||
* ## Examples
|
||||
*
|
||||
* ```html
|
||||
* <os-motion-detail-original-change-recommendations
|
||||
* [html]="getFormattedText()"
|
||||
* [changeRecommendations]="changeRecommendations"
|
||||
* (createChangeRecommendation)="createChangeRecommendation($event)"
|
||||
* (gotoChangeRecommendation)="gotoChangeRecommendation($event)"
|
||||
* ></os-motion-detail-original-change-recommendations>
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: 'os-motion-detail-original-change-recommendations',
|
||||
templateUrl: './motion-detail-original-change-recommendations.component.html',
|
||||
styleUrls: ['./motion-detail-original-change-recommendations.component.scss']
|
||||
})
|
||||
export class MotionDetailOriginalChangeRecommendationsComponent implements OnInit, OnChanges {
|
||||
private element: Element;
|
||||
private selectedFrom: number = null;
|
||||
|
||||
@Output()
|
||||
public createChangeRecommendation: EventEmitter<LineRange> = new EventEmitter<LineRange>();
|
||||
|
||||
@Output()
|
||||
public gotoChangeRecommendation: EventEmitter<ViewChangeReco> = new EventEmitter<ViewChangeReco>();
|
||||
|
||||
@Input()
|
||||
public html: string;
|
||||
|
||||
@Input()
|
||||
public changeRecommendations: ViewChangeReco[];
|
||||
|
||||
public showChangeRecommendations = false;
|
||||
|
||||
public can_manage = false;
|
||||
|
||||
/**
|
||||
* @param {Renderer2} renderer
|
||||
* @param {ElementRef} el
|
||||
* @param {OperatorService} operator
|
||||
*/
|
||||
public constructor(private renderer: Renderer2, private el: ElementRef, private operator: OperatorService) {
|
||||
this.operator.getObservable().subscribe(this.onPermissionsChanged.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-creates
|
||||
*/
|
||||
private update(): void {
|
||||
if (!this.element) {
|
||||
// Not yet initialized
|
||||
return;
|
||||
}
|
||||
this.element.innerHTML = this.html;
|
||||
|
||||
this.startCreating();
|
||||
}
|
||||
|
||||
/**
|
||||
* The permissions of the user have changed -> activate / deactivate editing functionality
|
||||
*/
|
||||
private onPermissionsChanged(): void {
|
||||
if (this.operator.hasPerms('motions.can_manage')) {
|
||||
this.can_manage = true;
|
||||
if (this.selectedFrom === null) {
|
||||
this.startCreating();
|
||||
}
|
||||
} else {
|
||||
this.can_manage = false;
|
||||
this.selectedFrom = null;
|
||||
if (this.element) {
|
||||
Array.from(this.element.querySelectorAll('.os-line-number')).forEach((lineNumber: Element) => {
|
||||
lineNumber.classList.remove('selectable');
|
||||
lineNumber.classList.remove('selected');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an array with all line numbers that are currently affected by a change recommendation
|
||||
* and therefor not subject to further changes
|
||||
*/
|
||||
private getAffectedLineNumbers(): number[] {
|
||||
const affectedLines = [];
|
||||
this.changeRecommendations.forEach((change: ViewChangeReco) => {
|
||||
for (let j = change.line_from; j < change.line_to; j++) {
|
||||
affectedLines.push(j);
|
||||
}
|
||||
});
|
||||
return affectedLines;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resetting the selection. All selected lines are unselected, and the selectable lines are marked as such
|
||||
*/
|
||||
private startCreating(): void {
|
||||
if (!this.can_manage || !this.element) {
|
||||
return;
|
||||
}
|
||||
|
||||
const alreadyAffectedLines = this.getAffectedLineNumbers();
|
||||
Array.from(this.element.querySelectorAll('.os-line-number')).forEach((lineNumber: Element) => {
|
||||
lineNumber.classList.remove('selected');
|
||||
if (alreadyAffectedLines.indexOf(parseInt(lineNumber.getAttribute('data-line-number'), 10)) === -1) {
|
||||
lineNumber.classList.add('selectable');
|
||||
} else {
|
||||
lineNumber.classList.remove('selectable');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* A line number has been clicked - either to start the selection or to finish it.
|
||||
*
|
||||
* @param lineNumber
|
||||
*/
|
||||
private clickedLineNumber(lineNumber: number): void {
|
||||
if (this.selectedFrom === null) {
|
||||
this.selectedFrom = lineNumber;
|
||||
} else {
|
||||
if (lineNumber > this.selectedFrom) {
|
||||
this.createChangeRecommendation.emit({
|
||||
from: this.selectedFrom,
|
||||
to: lineNumber + 1
|
||||
});
|
||||
} else {
|
||||
this.createChangeRecommendation.emit({
|
||||
from: lineNumber,
|
||||
to: this.selectedFrom + 1
|
||||
});
|
||||
}
|
||||
this.selectedFrom = null;
|
||||
this.startCreating();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A line number is hovered. If we are in the process of selecting a line range and the hovered line is selectable,
|
||||
* the plus sign is shown for this line and all lines between the first selected line.
|
||||
*
|
||||
* @param lineNumberHovered
|
||||
*/
|
||||
private hoverLineNumber(lineNumberHovered: number): void {
|
||||
if (this.selectedFrom === null) {
|
||||
return;
|
||||
}
|
||||
Array.from(this.element.querySelectorAll('.os-line-number')).forEach((lineNumber: Element) => {
|
||||
const line = parseInt(lineNumber.getAttribute('data-line-number'), 10);
|
||||
if (
|
||||
(line >= this.selectedFrom && line <= lineNumberHovered) ||
|
||||
(line >= lineNumberHovered && line <= this.selectedFrom)
|
||||
) {
|
||||
lineNumber.classList.add('selected');
|
||||
} else {
|
||||
lineNumber.classList.remove('selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Style for the change recommendation list
|
||||
* @param reco
|
||||
*/
|
||||
public calcRecoTop(reco: ViewChangeReco): string {
|
||||
const from = <HTMLElement>(
|
||||
this.element.querySelector('.os-line-number.line-number-' + reco.line_from.toString(10))
|
||||
);
|
||||
return from.offsetTop.toString() + 'px';
|
||||
}
|
||||
|
||||
/**
|
||||
* Style for the change recommendation list
|
||||
* @param reco
|
||||
*/
|
||||
public calcRecoHeight(reco: ViewChangeReco): string {
|
||||
const from = <HTMLElement>(
|
||||
this.element.querySelector('.os-line-number.line-number-' + reco.line_from.toString(10))
|
||||
);
|
||||
const to = <HTMLElement>this.element.querySelector('.os-line-number.line-number-' + reco.line_to.toString(10));
|
||||
if (to) {
|
||||
return (to.offsetTop - from.offsetTop).toString() + 'px';
|
||||
} else {
|
||||
// Last line - lets assume a realistic value
|
||||
return '20px';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* CSS-Class for the change recommendation list
|
||||
* @param reco
|
||||
*/
|
||||
public recoIsInsertion(reco: ViewChangeReco): boolean {
|
||||
return reco.type === ModificationType.TYPE_INSERTION;
|
||||
}
|
||||
|
||||
/**
|
||||
* CSS-Class for the change recommendation list
|
||||
* @param reco
|
||||
*/
|
||||
public recoIsDeletion(reco: ViewChangeReco): boolean {
|
||||
return reco.type === ModificationType.TYPE_DELETION;
|
||||
}
|
||||
|
||||
/**
|
||||
* CSS-Class for the change recommendation list
|
||||
* @param reco
|
||||
*/
|
||||
public recoIsReplacement(reco: ViewChangeReco): boolean {
|
||||
return reco.type === ModificationType.TYPE_REPLACEMENT;
|
||||
}
|
||||
|
||||
/**
|
||||
* Trigger the `gotoChangeRecommendation`-event
|
||||
* @param reco
|
||||
*/
|
||||
public gotoReco(reco: ViewChangeReco): void {
|
||||
this.gotoChangeRecommendation.emit(reco);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adding the event listeners: clicking on plus signs next to line numbers
|
||||
* and the hover-event next to the line numbers
|
||||
*/
|
||||
public ngOnInit(): void {
|
||||
const nativeElement = <Element>this.el.nativeElement;
|
||||
this.element = <Element>nativeElement.querySelector('.text');
|
||||
|
||||
this.renderer.listen(this.el.nativeElement, 'click', (ev: MouseEvent) => {
|
||||
const element = <Element>ev.target;
|
||||
if (element.classList.contains('os-line-number') && element.classList.contains('selectable')) {
|
||||
this.clickedLineNumber(parseInt(element.getAttribute('data-line-number'), 10));
|
||||
}
|
||||
});
|
||||
|
||||
this.renderer.listen(this.el.nativeElement, 'mouseover', (ev: MouseEvent) => {
|
||||
const element = <Element>ev.target;
|
||||
if (element.classList.contains('os-line-number') && element.classList.contains('selectable')) {
|
||||
this.hoverLineNumber(parseInt(element.getAttribute('data-line-number'), 10));
|
||||
}
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// The positioning of the change recommendations depends on the rendered HTML
|
||||
// If we show it right away, there will be nasty Angular warnings about changed values, as the position
|
||||
// is changing while the DOM updates
|
||||
window.setTimeout(() => {
|
||||
this.showChangeRecommendations = true;
|
||||
}, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param changes
|
||||
*/
|
||||
public ngOnChanges(changes: SimpleChanges): void {
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
@ -50,7 +50,7 @@
|
||||
<mat-accordion multi='true' class='on-transition-fade'>
|
||||
|
||||
<!-- MetaInfo Panel-->
|
||||
<mat-expansion-panel #metaInfoPanel [expanded]='this.editMotion && this.newMotion' class='meta-info-block meta-info-panel'>
|
||||
<mat-expansion-panel #metaInfoPanel [expanded]="this.editReco && this.newReco" class='meta-info-block meta-info-panel'>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<mat-icon>info</mat-icon>
|
||||
@ -275,9 +275,27 @@
|
||||
<!-- Text -->
|
||||
<!-- TODO: this is a config variable. Read it out -->
|
||||
<h3 translate>The assembly may decide:</h3>
|
||||
<div *ngIf='motion && !editMotion'>
|
||||
<div [innerHtml]='getFormatedText()'></div>
|
||||
</div>
|
||||
<ng-container *ngIf='motion && !editMotion'>
|
||||
<div *ngIf="!isRecoModeDiff()" class="motion-text"
|
||||
[class.line-numbers-none]="isLineNumberingNone()"
|
||||
[class.line-numbers-inline]="isLineNumberingInline()"
|
||||
[class.line-numbers-outside]="isLineNumberingOutside()">
|
||||
<os-motion-detail-original-change-recommendations
|
||||
*ngIf="isLineNumberingOutside() && isRecoModeOriginal()"
|
||||
[html]="getFormattedTextPlain()"
|
||||
[changeRecommendations]="changeRecommendations"
|
||||
(createChangeRecommendation)="createChangeRecommendation($event)"
|
||||
(gotoChangeRecommendation)="gotoChangeRecommendation($event)"
|
||||
></os-motion-detail-original-change-recommendations>
|
||||
<div *ngIf="!isLineNumberingOutside() || !isRecoModeOriginal()" [innerHTML]="getFormattedText()"></div>
|
||||
</div>
|
||||
<os-motion-detail-diff *ngIf="isRecoModeDiff()"
|
||||
[motion]="motion"
|
||||
[changes]="allChangingObjects"
|
||||
[scrollToChange]="scrollToChange"
|
||||
(createChangeRecommendation)="createChangeRecommendation($event)"
|
||||
></os-motion-detail-diff>
|
||||
</ng-container>
|
||||
<mat-form-field *ngIf="motion && editMotion" class="wide-form">
|
||||
<textarea matInput placeholder='Motion Text' formControlName='text' [value]='motionCopy.text'></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
@ -160,3 +160,106 @@ mat-expansion-panel {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Line numbers */
|
||||
// :host ::ng-deep is needed as this styling applies to the motion html that is injected using innerHTML,
|
||||
// which doesn't have the [ngcontent]-attributes necessary for regular styles.
|
||||
// An alternative approach (in case ::ng-deep gets removed) might be to change the view encapsulation.
|
||||
:host ::ng-deep .motion-text {
|
||||
ins,
|
||||
.insert {
|
||||
color: green;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
del,
|
||||
.delete {
|
||||
color: red;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: #ff0;
|
||||
}
|
||||
&.line-numbers-outside {
|
||||
padding-left: 40px;
|
||||
position: relative;
|
||||
|
||||
.os-line-number {
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding-right: 55px;
|
||||
|
||||
&:after {
|
||||
content: attr(data-line-number);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
vertical-align: top;
|
||||
color: gray;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&.selectable:hover:before,
|
||||
&.selected:before {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 20px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23337ab7"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.line-numbers-inline {
|
||||
.os-line-break {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.os-line-number {
|
||||
display: inline-block;
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
content: attr(data-line-number);
|
||||
vertical-align: top;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
color: gray;
|
||||
margin-top: -3px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.line-numbers-none {
|
||||
.os-line-break {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.os-line-number {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MotionDetailComponent } from './motion-detail.component';
|
||||
import { E2EImportsModule } from '../../../../../e2e-imports.module';
|
||||
import { MotionsModule } from '../../motions.module';
|
||||
|
||||
describe('MotionDetailComponent', () => {
|
||||
let component: MotionDetailComponent;
|
||||
@ -9,8 +10,8 @@ describe('MotionDetailComponent', () => {
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [E2EImportsModule],
|
||||
declarations: [MotionDetailComponent]
|
||||
imports: [E2EImportsModule, MotionsModule],
|
||||
declarations: []
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
|
||||
@ -1,18 +1,27 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { MatExpansionPanel } from '@angular/material';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { MatDialog, MatExpansionPanel } from '@angular/material';
|
||||
|
||||
import { BaseComponent } from '../../../../base.component';
|
||||
import { Category } from '../../../../shared/models/motions/category';
|
||||
import { ViewportService } from '../../../../core/services/viewport.service';
|
||||
import { MotionRepositoryService } from '../../services/motion-repository.service';
|
||||
import { ViewMotion } from '../../models/view-motion';
|
||||
import { ChangeRecoMode, LineNumberingMode, ViewMotion } from '../../models/view-motion';
|
||||
import { User } from '../../../../shared/models/users/user';
|
||||
import { DataStoreService } from '../../../../core/services/data-store.service';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { Motion } from '../../../../shared/models/motions/motion';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
import { LineRange } from '../../services/diff.service';
|
||||
import {
|
||||
MotionChangeRecommendationComponent,
|
||||
MotionChangeRecommendationComponentData
|
||||
} from '../motion-change-recommendation/motion-change-recommendation.component';
|
||||
import { ChangeRecommendationRepositoryService } from '../../services/change-recommendation-repository.service';
|
||||
import { ViewChangeReco } from '../../models/view-change-reco';
|
||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
import { ViewUnifiedChange } from '../../models/view-unified-change';
|
||||
|
||||
/**
|
||||
* Component for the motion detail view
|
||||
@ -67,6 +76,16 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
|
||||
*/
|
||||
public motionCopy: ViewMotion;
|
||||
|
||||
/**
|
||||
* All change recommendations to this motion
|
||||
*/
|
||||
public changeRecommendations: ViewChangeReco[];
|
||||
|
||||
/**
|
||||
* All change recommendations AND amendments, sorted by line number.
|
||||
*/
|
||||
public allChangingObjects: ViewUnifiedChange[];
|
||||
|
||||
/**
|
||||
* Subject for the Categories
|
||||
*/
|
||||
@ -82,6 +101,11 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
|
||||
*/
|
||||
public supporterObserver: BehaviorSubject<Array<User>>;
|
||||
|
||||
/**
|
||||
* Value for os-motion-detail-diff: when this is set, that component scrolls to the given change
|
||||
*/
|
||||
public scrollToChange: ViewUnifiedChange = null;
|
||||
|
||||
/**
|
||||
* Constuct the detail view.
|
||||
*
|
||||
@ -89,7 +113,11 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
|
||||
* @param router to navigate back to the motion list and to an existing motion
|
||||
* @param route determine if this is a new or an existing motion
|
||||
* @param formBuilder For reactive forms. Form Group and Form Control
|
||||
* @param dialogService For opening dialogs
|
||||
* @param repo: Motion Repository
|
||||
* @param changeRecoRepo: Change Recommendation Repository
|
||||
* @param DS: The DataStoreService
|
||||
* @param sanitizer: For making HTML SafeHTML
|
||||
* @param translate: Translation Service
|
||||
*/
|
||||
public constructor(
|
||||
@ -97,8 +125,11 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private formBuilder: FormBuilder,
|
||||
private dialogService: MatDialog,
|
||||
private repo: MotionRepositoryService,
|
||||
private changeRecoRepo: ChangeRecommendationRepositoryService,
|
||||
private DS: DataStoreService,
|
||||
private sanitizer: DomSanitizer,
|
||||
protected translate: TranslateService
|
||||
) {
|
||||
super();
|
||||
@ -118,6 +149,12 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
|
||||
this.repo.getViewModelObservable(params.id).subscribe(newViewMotion => {
|
||||
this.motion = newViewMotion;
|
||||
});
|
||||
this.changeRecoRepo
|
||||
.getChangeRecosOfMotionObservable(parseInt(params.id, 10))
|
||||
.subscribe((recos: ViewChangeReco[]) => {
|
||||
this.changeRecommendations = recos;
|
||||
this.recalcUnifiedChanges();
|
||||
});
|
||||
});
|
||||
}
|
||||
// Initial Filling of the Subjects
|
||||
@ -137,6 +174,24 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Merges amendments and change recommendations and sorts them by the line numbers.
|
||||
* Called each time one of these arrays changes.
|
||||
*/
|
||||
private recalcUnifiedChanges(): void {
|
||||
// @TODO implement amendments
|
||||
this.allChangingObjects = this.changeRecommendations;
|
||||
this.allChangingObjects.sort((a: ViewUnifiedChange, b: ViewUnifiedChange) => {
|
||||
if (a.getLineFrom() < b.getLineFrom()) {
|
||||
return -1;
|
||||
} else if (a.getLineFrom() > b.getLineFrom()) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Async load the values of the motion in the Form.
|
||||
*/
|
||||
@ -215,8 +270,23 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
|
||||
/**
|
||||
* get the formated motion text from the repository.
|
||||
*/
|
||||
public getFormatedText(): string {
|
||||
return this.repo.formatMotion(this.motion.id, this.motion.lnMode, this.motion.crMode);
|
||||
public getFormattedTextPlain(): string {
|
||||
// Prevent this.allChangingObjects to be reordered from within formatMotion
|
||||
const changes: ViewUnifiedChange[] = Object.assign([], this.allChangingObjects);
|
||||
return this.repo.formatMotion(
|
||||
this.motion.id,
|
||||
this.motion.crMode,
|
||||
changes,
|
||||
this.motion.lineLength,
|
||||
this.motion.highlightedLine
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* get the formated motion text from the repository, as SafeHTML for [innerHTML]
|
||||
*/
|
||||
public getFormattedText(): SafeHtml {
|
||||
return this.sanitizer.bypassSecurityTrustHtml(this.getFormattedTextPlain());
|
||||
}
|
||||
|
||||
/**
|
||||
@ -264,10 +334,31 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
|
||||
* Sets the motions line numbering mode
|
||||
* @param mode Needs to fot to the enum defined in ViewMotion
|
||||
*/
|
||||
public setLineNumberingMode(mode: number): void {
|
||||
public setLineNumberingMode(mode: LineNumberingMode): void {
|
||||
this.motion.lnMode = mode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if no line numbers are to be shown.
|
||||
*/
|
||||
public isLineNumberingNone(): boolean {
|
||||
return this.motion.lnMode === LineNumberingMode.None;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the line numbers are to be shown within the text with no line breaks.
|
||||
*/
|
||||
public isLineNumberingInline(): boolean {
|
||||
return this.motion.lnMode === LineNumberingMode.Inside;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the line numbers are to be shown to the left of the text.
|
||||
*/
|
||||
public isLineNumberingOutside(): boolean {
|
||||
return this.motion.lnMode === LineNumberingMode.Outside;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the motions change reco mode
|
||||
* @param mode Needs to fot to the enum defined in ViewMotion
|
||||
@ -276,6 +367,48 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
|
||||
this.motion.crMode = mode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the original version (including change recommendation annotation) is to be shown
|
||||
*/
|
||||
public isRecoModeOriginal(): boolean {
|
||||
return this.motion.crMode === ChangeRecoMode.Original;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the diff version is to be shown
|
||||
*/
|
||||
public isRecoModeDiff(): boolean {
|
||||
return this.motion.crMode === ChangeRecoMode.Diff;
|
||||
}
|
||||
|
||||
/**
|
||||
* In the original version, a line number range has been selected in order to create a new change recommendation
|
||||
*
|
||||
* @param lineRange
|
||||
*/
|
||||
public createChangeRecommendation(lineRange: LineRange): void {
|
||||
const data: MotionChangeRecommendationComponentData = {
|
||||
editChangeRecommendation: false,
|
||||
newChangeRecommendation: true,
|
||||
lineRange: lineRange,
|
||||
changeRecommendation: this.repo.createChangeRecommendationTemplate(this.motion.id, lineRange)
|
||||
};
|
||||
this.dialogService.open(MotionChangeRecommendationComponent, {
|
||||
height: '400px',
|
||||
width: '600px',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* In the original version, a change-recommendation-annotation has been clicked
|
||||
* -> Go to the diff view and scroll to the change recommendation
|
||||
*/
|
||||
public gotoChangeRecommendation(changeRecommendation: ViewChangeReco): void {
|
||||
this.scrollToChange = changeRecommendation;
|
||||
this.setChangeRecoMode(ChangeRecoMode.Diff);
|
||||
}
|
||||
|
||||
/**
|
||||
* Init. Does nothing here.
|
||||
*/
|
||||
|
||||
100
client/src/app/site/motions/models/view-change-reco.ts
Normal file
100
client/src/app/site/motions/models/view-change-reco.ts
Normal file
@ -0,0 +1,100 @@
|
||||
import { BaseViewModel } from '../../base/base-view-model';
|
||||
import { MotionChangeReco } from '../../../shared/models/motions/motion-change-reco';
|
||||
import { BaseModel } from '../../../shared/models/base/base-model';
|
||||
import { ModificationType } from '../services/diff.service';
|
||||
import { ViewUnifiedChange, ViewUnifiedChangeType } from './view-unified-change';
|
||||
|
||||
/**
|
||||
* Change recommendation class for the View
|
||||
*
|
||||
* Stores a motion including all (implicit) references
|
||||
* Provides "safe" access to variables and functions in {@link MotionChangeReco}
|
||||
* @ignore
|
||||
*/
|
||||
export class ViewChangeReco extends BaseViewModel implements ViewUnifiedChange {
|
||||
private _changeReco: MotionChangeReco;
|
||||
|
||||
public get id(): number {
|
||||
return this._changeReco ? this._changeReco.id : null;
|
||||
}
|
||||
|
||||
public get changeRecommendation(): MotionChangeReco {
|
||||
return this._changeReco;
|
||||
}
|
||||
|
||||
public constructor(changeReco?: MotionChangeReco) {
|
||||
super();
|
||||
|
||||
this._changeReco = changeReco;
|
||||
}
|
||||
|
||||
public getTitle(): string {
|
||||
return this._changeReco.getTitle();
|
||||
}
|
||||
|
||||
public updateValues(update: BaseModel): void {
|
||||
// @TODO Is there any need for this function?
|
||||
}
|
||||
|
||||
public updateChangeReco(type: number, text: string): void {
|
||||
// @TODO HTML sanitazion
|
||||
this._changeReco.type = type;
|
||||
this._changeReco.text = text;
|
||||
}
|
||||
|
||||
public get rejected(): boolean {
|
||||
return this._changeReco ? this._changeReco.rejected : null;
|
||||
}
|
||||
|
||||
public get type(): number {
|
||||
return this._changeReco ? this._changeReco.type : ModificationType.TYPE_REPLACEMENT;
|
||||
}
|
||||
|
||||
public get other_description(): string {
|
||||
return this._changeReco ? this._changeReco.other_description : null;
|
||||
}
|
||||
|
||||
public get line_from(): number {
|
||||
return this._changeReco ? this._changeReco.line_from : null;
|
||||
}
|
||||
|
||||
public get line_to(): number {
|
||||
return this._changeReco ? this._changeReco.line_to : null;
|
||||
}
|
||||
|
||||
public get text(): string {
|
||||
return this._changeReco ? this._changeReco.text : null;
|
||||
}
|
||||
|
||||
public get motion_id(): number {
|
||||
return this._changeReco ? this._changeReco.motion_id : null;
|
||||
}
|
||||
|
||||
public getChangeId(): string {
|
||||
return 'recommendation-' + this.id.toString(10);
|
||||
}
|
||||
|
||||
public getChangeType(): ViewUnifiedChangeType {
|
||||
return ViewUnifiedChangeType.TYPE_CHANGE_RECOMMENDATION;
|
||||
}
|
||||
|
||||
public getLineFrom(): number {
|
||||
return this.line_from;
|
||||
}
|
||||
|
||||
public getLineTo(): number {
|
||||
return this.line_to;
|
||||
}
|
||||
|
||||
public getChangeNewText(): string {
|
||||
return this.text;
|
||||
}
|
||||
|
||||
public isAccepted(): boolean {
|
||||
return !this.rejected;
|
||||
}
|
||||
|
||||
public isRejected(): boolean {
|
||||
return this.rejected;
|
||||
}
|
||||
}
|
||||
@ -6,15 +6,15 @@ import { WorkflowState } from '../../../shared/models/motions/workflow-state';
|
||||
import { BaseModel } from '../../../shared/models/base/base-model';
|
||||
import { BaseViewModel } from '../../base/base-view-model';
|
||||
|
||||
enum LineNumbering {
|
||||
export enum LineNumberingMode {
|
||||
None,
|
||||
Inside,
|
||||
Outside
|
||||
}
|
||||
|
||||
enum ChangeReco {
|
||||
export enum ChangeRecoMode {
|
||||
Original,
|
||||
Change,
|
||||
Changed,
|
||||
Diff,
|
||||
Final
|
||||
}
|
||||
@ -35,16 +35,28 @@ export class ViewMotion extends BaseViewModel {
|
||||
private _state: WorkflowState;
|
||||
|
||||
/**
|
||||
* Indicates the LineNumbering Mode.
|
||||
* Indicates the LineNumberingMode Mode.
|
||||
* Needs to be accessed from outside
|
||||
*/
|
||||
public lnMode: LineNumbering;
|
||||
public lnMode: LineNumberingMode;
|
||||
|
||||
/**
|
||||
* Indicates the Change reco Mode.
|
||||
* Needs to be accessed from outside
|
||||
*/
|
||||
public crMode: ChangeReco;
|
||||
public crMode: ChangeRecoMode;
|
||||
|
||||
/**
|
||||
* Indicates the maximum line length as defined in the configuration.
|
||||
* Needs to be accessed from outside
|
||||
*/
|
||||
public lineLength: number;
|
||||
|
||||
/**
|
||||
* Indicates the currently highlighted line, if any.
|
||||
* Needs to be accessed from outside
|
||||
*/
|
||||
public highlightedLine: number;
|
||||
|
||||
public get motion(): Motion {
|
||||
return this._motion;
|
||||
@ -177,8 +189,11 @@ export class ViewMotion extends BaseViewModel {
|
||||
this._state = state;
|
||||
|
||||
// TODO: Should be set using a a config variable
|
||||
this.lnMode = LineNumbering.None;
|
||||
this.crMode = ChangeReco.Original;
|
||||
this.lnMode = LineNumberingMode.Outside;
|
||||
this.crMode = ChangeRecoMode.Original;
|
||||
this.lineLength = 80;
|
||||
|
||||
this.highlightedLine = null;
|
||||
}
|
||||
|
||||
public getTitle(): string {
|
||||
|
||||
46
client/src/app/site/motions/models/view-unified-change.ts
Normal file
46
client/src/app/site/motions/models/view-unified-change.ts
Normal file
@ -0,0 +1,46 @@
|
||||
export enum ViewUnifiedChangeType {
|
||||
TYPE_CHANGE_RECOMMENDATION,
|
||||
TYPE_AMENDMENT
|
||||
}
|
||||
|
||||
/**
|
||||
* A common interface for (paragraph-based) amendments and change recommendations.
|
||||
* Needed to merge both types of change objects in the motion content at the same time
|
||||
*/
|
||||
export interface ViewUnifiedChange {
|
||||
/**
|
||||
* Returns the type of change
|
||||
*/
|
||||
getChangeType(): ViewUnifiedChangeType;
|
||||
|
||||
/**
|
||||
* An id that is unique considering both change recommendations and amendments, therefore needs to be
|
||||
* "namespaced" (e.g. "amendment.23" or "recommendation.42")
|
||||
*/
|
||||
getChangeId(): string;
|
||||
|
||||
/**
|
||||
* First line number of the change
|
||||
*/
|
||||
getLineFrom(): number;
|
||||
|
||||
/**
|
||||
* Last line number of the change (the line number marking the end of the change - not the number of the last line)
|
||||
*/
|
||||
getLineTo(): number;
|
||||
|
||||
/**
|
||||
* Returns the new version of the text, as it would be if this change was to be adopted.
|
||||
*/
|
||||
getChangeNewText(): string;
|
||||
|
||||
/**
|
||||
* True, if accepted. False, if rejected or undecided.
|
||||
*/
|
||||
isAccepted(): boolean;
|
||||
|
||||
/**
|
||||
* True, if rejected. False, if accepted or undecided.
|
||||
*/
|
||||
isRejected(): boolean;
|
||||
}
|
||||
@ -8,6 +8,9 @@ import { MotionDetailComponent } from './components/motion-detail/motion-detail.
|
||||
import { CategoryListComponent } from './components/category-list/category-list.component';
|
||||
import { MotionCommentSectionListComponent } from './components/motion-comment-section-list/motion-comment-section-list.component';
|
||||
import { StatuteParagraphListComponent } from './components/statute-paragraph-list/statute-paragraph-list.component';
|
||||
import { MotionChangeRecommendationComponent } from './components/motion-change-recommendation/motion-change-recommendation.component';
|
||||
import { MotionDetailOriginalChangeRecommendationsComponent } from './components/motion-detail-original-change-recommendations/motion-detail-original-change-recommendations.component';
|
||||
import { MotionDetailDiffComponent } from './components/motion-detail-diff/motion-detail-diff.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, MotionsRoutingModule, SharedModule],
|
||||
@ -16,7 +19,12 @@ import { StatuteParagraphListComponent } from './components/statute-paragraph-li
|
||||
MotionDetailComponent,
|
||||
CategoryListComponent,
|
||||
MotionCommentSectionListComponent,
|
||||
StatuteParagraphListComponent
|
||||
]
|
||||
StatuteParagraphListComponent,
|
||||
MotionChangeRecommendationComponent,
|
||||
MotionCommentSectionListComponent,
|
||||
MotionDetailOriginalChangeRecommendationsComponent,
|
||||
MotionDetailDiffComponent
|
||||
],
|
||||
entryComponents: [MotionChangeRecommendationComponent]
|
||||
})
|
||||
export class MotionsModule {}
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
import { TestBed, inject } from '@angular/core/testing';
|
||||
|
||||
import { ChangeRecommendationRepositoryService } from './change-recommendation-repository.service';
|
||||
import { E2EImportsModule } from '../../../../e2e-imports.module';
|
||||
|
||||
describe('ChangeRecommendationRepositoryService', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [E2EImportsModule],
|
||||
providers: [ChangeRecommendationRepositoryService]
|
||||
});
|
||||
});
|
||||
|
||||
it('should be created', inject(
|
||||
[ChangeRecommendationRepositoryService],
|
||||
(service: ChangeRecommendationRepositoryService) => {
|
||||
expect(service).toBeTruthy();
|
||||
}
|
||||
));
|
||||
});
|
||||
@ -0,0 +1,135 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { DataSendService } from '../../../core/services/data-send.service';
|
||||
import { User } from '../../../shared/models/users/user';
|
||||
import { Category } from '../../../shared/models/motions/category';
|
||||
import { Workflow } from '../../../shared/models/motions/workflow';
|
||||
import { Observable } from 'rxjs';
|
||||
import { BaseRepository } from '../../base/base-repository';
|
||||
import { DataStoreService } from '../../../core/services/data-store.service';
|
||||
import { MotionChangeReco } from '../../../shared/models/motions/motion-change-reco';
|
||||
import { ViewChangeReco } from '../models/view-change-reco';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
/**
|
||||
* Repository Services for change recommendations
|
||||
*
|
||||
* The repository is meant to process domain objects (those found under
|
||||
* shared/models), so components can display them and interact with them.
|
||||
*
|
||||
* Rather than manipulating models directly, the repository is meant to
|
||||
* inform the {@link DataSendService} about changes which will send
|
||||
* them to the Server.
|
||||
*/
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ChangeRecommendationRepositoryService extends BaseRepository<ViewChangeReco, MotionChangeReco> {
|
||||
/**
|
||||
* Creates a MotionRepository
|
||||
*
|
||||
* Converts existing and incoming motions to ViewMotions
|
||||
* Handles CRUD using an observer to the DataStore
|
||||
* @param DS
|
||||
* @param dataSend
|
||||
*/
|
||||
public constructor(DS: DataStoreService, private dataSend: DataSendService) {
|
||||
super(DS, MotionChangeReco, [Category, User, Workflow]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a change recommendation
|
||||
* Creates a (real) change recommendation and delegates it to the {@link DataSendService}
|
||||
*
|
||||
* @param {MotionChangeReco} changeReco
|
||||
*/
|
||||
public create(changeReco: MotionChangeReco): Observable<MotionChangeReco> {
|
||||
return this.dataSend.createModel(changeReco) as Observable<MotionChangeReco>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a change recommendation view object, a entry in the backend is created and the new
|
||||
* change recommendation view object is returned (as an observable).
|
||||
*
|
||||
* @param {ViewChangeReco} view
|
||||
*/
|
||||
public createByViewModel(view: ViewChangeReco): Observable<ViewChangeReco> {
|
||||
return this.create(view.changeRecommendation).pipe(
|
||||
map((changeReco: MotionChangeReco) => {
|
||||
return new ViewChangeReco(changeReco);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates this view wrapper based on an actual Change Recommendation model
|
||||
*
|
||||
* @param {MotionChangeReco} model
|
||||
*/
|
||||
protected createViewModel(model: MotionChangeReco): ViewChangeReco {
|
||||
return new ViewChangeReco(model);
|
||||
}
|
||||
|
||||
/**
|
||||
* Deleting a change recommendation.
|
||||
*
|
||||
* Extract the change recommendation out of the viewModel and delegate
|
||||
* to {@link DataSendService}
|
||||
* @param {ViewChangeReco} viewModel
|
||||
*/
|
||||
public delete(viewModel: ViewChangeReco): Observable<MotionChangeReco> {
|
||||
return this.dataSend.delete(viewModel.changeRecommendation) as Observable<MotionChangeReco>;
|
||||
}
|
||||
|
||||
/**
|
||||
* updates a change recommendation
|
||||
*
|
||||
* Updates a (real) change recommendation with patched data and delegate it
|
||||
* to the {@link DataSendService}
|
||||
*
|
||||
* @param {Partial<MotionChangeReco>} update the form data containing the update values
|
||||
* @param {ViewChangeReco} viewModel The View Change Recommendation. If not present, a new motion will be created
|
||||
*/
|
||||
public update(update: Partial<MotionChangeReco>, viewModel: ViewChangeReco): Observable<MotionChangeReco> {
|
||||
const changeReco = viewModel.changeRecommendation;
|
||||
changeReco.patchValues(update);
|
||||
return this.dataSend.updateModel(changeReco, 'patch') as Observable<MotionChangeReco>;
|
||||
}
|
||||
|
||||
/**
|
||||
* return the Observable of all change recommendations belonging to the given motion
|
||||
*/
|
||||
public getChangeRecosOfMotionObservable(motion_id: number): Observable<ViewChangeReco[]> {
|
||||
return this.viewModelListSubject.asObservable().pipe(
|
||||
map((recos: ViewChangeReco[]) => {
|
||||
return recos.filter(reco => reco.motion_id === motion_id);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a change recommendation to accepted.
|
||||
*
|
||||
* @param {ViewChangeReco} change
|
||||
*/
|
||||
public setAccepted(change: ViewChangeReco): Observable<MotionChangeReco> {
|
||||
const changeReco = change.changeRecommendation;
|
||||
changeReco.patchValues({
|
||||
rejected: false
|
||||
});
|
||||
return this.dataSend.updateModel(changeReco, 'patch') as Observable<MotionChangeReco>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a change recommendation to rejected.
|
||||
*
|
||||
* @param {ViewChangeReco} change
|
||||
*/
|
||||
public setRejected(change: ViewChangeReco): Observable<MotionChangeReco> {
|
||||
const changeReco = change.changeRecommendation;
|
||||
changeReco.patchValues({
|
||||
rejected: true
|
||||
});
|
||||
return this.dataSend.updateModel(changeReco, 'patch') as Observable<MotionChangeReco>;
|
||||
}
|
||||
}
|
||||
1168
client/src/app/site/motions/services/diff.service.spec.ts
Normal file
1168
client/src/app/site/motions/services/diff.service.spec.ts
Normal file
File diff suppressed because it is too large
Load Diff
2031
client/src/app/site/motions/services/diff.service.ts
Normal file
2031
client/src/app/site/motions/services/diff.service.ts
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,775 @@
|
||||
import { TestBed, inject } from '@angular/core/testing';
|
||||
|
||||
import { LinenumberingService } from './linenumbering.service';
|
||||
|
||||
describe('LinenumberingService', () => {
|
||||
const brMarkup = (no: number): string => {
|
||||
return (
|
||||
'<br class="os-line-break">' +
|
||||
'<span class="os-line-number line-number-' +
|
||||
no +
|
||||
'" data-line-number="' +
|
||||
no +
|
||||
'" contenteditable="false"> </span>'
|
||||
);
|
||||
},
|
||||
noMarkup = (no: number): string => {
|
||||
return (
|
||||
'<span class="os-line-number line-number-' +
|
||||
no +
|
||||
'" data-line-number="' +
|
||||
no +
|
||||
'" contenteditable="false"> </span>'
|
||||
);
|
||||
},
|
||||
longstr = (length: number): string => {
|
||||
let outstr = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
outstr += String.fromCharCode(65 + (i % 26));
|
||||
}
|
||||
return outstr;
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [LinenumberingService]
|
||||
});
|
||||
});
|
||||
|
||||
it('should be created', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
expect(service).toBeTruthy();
|
||||
}));
|
||||
|
||||
describe('paragraph splitting', () => {
|
||||
it('breaks simple DIVs', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const htmlIn = '<DIV class="testclass">Test <strong>1</strong></DIV>' + '\n' + '<p>Test <em>2</em> 3</p>';
|
||||
const out = service.splitToParagraphs(htmlIn);
|
||||
expect(out.length).toBe(2);
|
||||
expect(out[0]).toBe('<div class="testclass">Test <strong>1</strong></div>');
|
||||
expect(out[1]).toBe('<p>Test <em>2</em> 3</p>');
|
||||
}));
|
||||
it('ignores root-level text-nodes', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const htmlIn = '<DIV class="testclass">Test <strong>3</strong></DIV>' + '\n New line';
|
||||
const out = service.splitToParagraphs(htmlIn);
|
||||
expect(out.length).toBe(1);
|
||||
expect(out[0]).toBe('<div class="testclass">Test <strong>3</strong></div>');
|
||||
}));
|
||||
it('splits UL-Lists', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const htmlIn =
|
||||
"<UL class='testclass'>\n<li>Node 1</li>\n <li class='second'>Node <strong>2</strong></li><li><p>Node 3</p></li></UL>";
|
||||
const out = service.splitToParagraphs(htmlIn);
|
||||
expect(out.length).toBe(3);
|
||||
expect(out[0]).toBe('<ul class="testclass"><li>Node 1</li></ul>');
|
||||
expect(out[1]).toBe('<ul class="testclass"><li class="second">Node <strong>2</strong></li></ul>');
|
||||
expect(out[2]).toBe('<ul class="testclass"><li><p>Node 3</p></li></ul>');
|
||||
}));
|
||||
it('splits OL-Lists', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const htmlIn =
|
||||
"<OL start='2' class='testclass'>\n<li>Node 1</li>\n <li class='second'>Node <strong>2</strong></li><li><p>Node 3</p></li></OL>";
|
||||
const out = service.splitToParagraphs(htmlIn);
|
||||
expect(out.length).toBe(3);
|
||||
expect(out[0]).toBe('<ol start="2" class="testclass"><li>Node 1</li></ol>');
|
||||
expect(out[1]).toBe('<ol start="3" class="testclass"><li class="second">Node <strong>2</strong></li></ol>');
|
||||
expect(out[2]).toBe('<ol start="4" class="testclass"><li><p>Node 3</p></li></ol>');
|
||||
}));
|
||||
});
|
||||
|
||||
describe('getting line number range', () => {
|
||||
it('extracts the line number range, example 1', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const html =
|
||||
'<p>' +
|
||||
noMarkup(2) +
|
||||
'et accusam et justo duo dolores et ea <span style="color: #ff0000;"><strike>rebum </strike></span><span style="color: #006400;">Inserted Text</span>. Stet clita kasd ' +
|
||||
brMarkup(3) +
|
||||
'gubergren,</p>';
|
||||
const range = service.getLineNumberRange(html);
|
||||
expect(range).toEqual({ from: 2, to: 4 });
|
||||
}
|
||||
));
|
||||
});
|
||||
|
||||
describe('line numbering: test nodes', () => {
|
||||
it('breaks very short lines', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const textNode = document.createTextNode('0123');
|
||||
service.setInlineOffsetLineNumberForTests(0, 1);
|
||||
const out = service.textNodeToLines(textNode, 5);
|
||||
const outHtml = service.nodesToHtml(out);
|
||||
expect(outHtml).toBe('0123');
|
||||
expect(service.getInlineOffsetForTests()).toBe(4);
|
||||
}));
|
||||
|
||||
it('breaks simple lines', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const textNode = document.createTextNode('012345678901234567');
|
||||
service.setInlineOffsetLineNumberForTests(0, 1);
|
||||
const out = service.textNodeToLines(textNode, 5);
|
||||
const outHtml = service.nodesToHtml(out);
|
||||
expect(outHtml).toBe('01234' + brMarkup(1) + '56789' + brMarkup(2) + '01234' + brMarkup(3) + '567');
|
||||
expect(service.getInlineOffsetForTests()).toBe(3);
|
||||
}));
|
||||
|
||||
it('breaks simple lines with offset', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const textNode = document.createTextNode('012345678901234567');
|
||||
service.setInlineOffsetLineNumberForTests(2, 1);
|
||||
const out = service.textNodeToLines(textNode, 5);
|
||||
const outHtml = service.nodesToHtml(out);
|
||||
expect(outHtml).toBe('012' + brMarkup(1) + '34567' + brMarkup(2) + '89012' + brMarkup(3) + '34567');
|
||||
expect(service.getInlineOffsetForTests()).toBe(5);
|
||||
}));
|
||||
|
||||
it('breaks simple lines with offset equaling to length', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const textNode = document.createTextNode('012345678901234567');
|
||||
service.setInlineOffsetLineNumberForTests(5, 1);
|
||||
const out = service.textNodeToLines(textNode, 5);
|
||||
const outHtml = service.nodesToHtml(out);
|
||||
expect(outHtml).toBe(
|
||||
brMarkup(1) + '01234' + brMarkup(2) + '56789' + brMarkup(3) + '01234' + brMarkup(4) + '567'
|
||||
);
|
||||
expect(service.getInlineOffsetForTests()).toBe(3);
|
||||
}
|
||||
));
|
||||
|
||||
it('breaks simple lines with spaces (1)', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const textNode = document.createTextNode('0123 45 67 89012 34 567');
|
||||
service.setInlineOffsetLineNumberForTests(0, 1);
|
||||
const out = service.textNodeToLines(textNode, 5);
|
||||
const outHtml = service.nodesToHtml(out);
|
||||
expect(outHtml).toBe(
|
||||
'0123 ' + brMarkup(1) + '45 67 ' + brMarkup(2) + '89012 ' + brMarkup(3) + '34 ' + brMarkup(4) + '567'
|
||||
);
|
||||
expect(service.getInlineOffsetForTests()).toBe(3);
|
||||
}));
|
||||
|
||||
it('breaks simple lines with spaces (2)', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const textNode = document.createTextNode('0123 45 67 89012tes 344 ');
|
||||
service.setInlineOffsetLineNumberForTests(0, 1);
|
||||
const out = service.textNodeToLines(textNode, 5);
|
||||
const outHtml = service.nodesToHtml(out);
|
||||
expect(outHtml).toBe(
|
||||
'0123 ' + brMarkup(1) + '45 67 ' + brMarkup(2) + '89012' + brMarkup(3) + 'tes ' + brMarkup(4) + '344 '
|
||||
);
|
||||
expect(service.getInlineOffsetForTests()).toBe(4);
|
||||
}));
|
||||
|
||||
it('breaks simple lines with spaces (3)', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const textNode = document.createTextNode("I'm a Demo-Text");
|
||||
service.setInlineOffsetLineNumberForTests(0, 1);
|
||||
const out = service.textNodeToLines(textNode, 5);
|
||||
const outHtml = service.nodesToHtml(out);
|
||||
expect(outHtml).toBe("I'm a " + brMarkup(1) + 'Demo-' + brMarkup(2) + 'Text');
|
||||
expect(service.getInlineOffsetForTests()).toBe(4);
|
||||
}));
|
||||
|
||||
it('breaks simple lines with spaces (4)', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const textNode = document.createTextNode("I'm a LongDemo-Text");
|
||||
service.setInlineOffsetLineNumberForTests(0, 1);
|
||||
const out = service.textNodeToLines(textNode, 5);
|
||||
const outHtml = service.nodesToHtml(out);
|
||||
expect(outHtml).toBe("I'm a " + brMarkup(1) + 'LongD' + brMarkup(2) + 'emo-' + brMarkup(3) + 'Text');
|
||||
expect(service.getInlineOffsetForTests()).toBe(4);
|
||||
}));
|
||||
});
|
||||
|
||||
describe('line numbering: inline nodes', () => {
|
||||
it('leaves a simple SPAN untouched', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<span>Test</span>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 5);
|
||||
expect(outHtml).toBe(noMarkup(1) + '<span>Test</span>');
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('breaks lines in a simple SPAN', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<span>Lorem ipsum dolorsit amet</span>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 5);
|
||||
expect(outHtml).toBe(
|
||||
noMarkup(1) +
|
||||
'<span>Lorem ' +
|
||||
brMarkup(2) +
|
||||
'ipsum ' +
|
||||
brMarkup(3) +
|
||||
'dolor' +
|
||||
brMarkup(4) +
|
||||
'sit ' +
|
||||
brMarkup(5) +
|
||||
'amet</span>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('breaks lines in nested inline elements', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<span>Lorem <strong>ipsum dolorsit</strong> amet</span>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 5);
|
||||
expect(outHtml).toBe(
|
||||
noMarkup(1) +
|
||||
'<span>Lorem ' +
|
||||
brMarkup(2) +
|
||||
'<strong>ipsum ' +
|
||||
brMarkup(3) +
|
||||
'dolor' +
|
||||
brMarkup(4) +
|
||||
'sit</strong> ' +
|
||||
brMarkup(5) +
|
||||
'amet</span>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('counts within DEL nodes', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '1234 <del>1234</del> 1234 1234';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 10);
|
||||
expect(outHtml).toBe(noMarkup(1) + '1234 <del>1234</del> ' + brMarkup(2) + '1234 1234');
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('counts after DEL/INS-nodes', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml =
|
||||
'<P>leo Testelefantgeweih Buchstabenwut als Achzehnzahlunginer. Hierbei <DEL>darf</DEL><INS>setzen</INS> bist der Deifi <DEL>das </DEL><INS>Dor Reh Wachtel da </INS>Subjunktivier <DEL>als Derftige Aal</DEL><INS>san</INS> Orthopädische<DEL>, der Arbeitsnachweisdiskus Bass der Tastatur </DEL><DEL>Weiter schreiben wie Tasse Wasser als</DEL><INS> dienen</INS>.</P>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 95);
|
||||
expect(outHtml).toBe(
|
||||
'<p>' +
|
||||
noMarkup(1) +
|
||||
'leo Testelefantgeweih Buchstabenwut als Achzehnzahlunginer. Hierbei <del>darf</del><ins>setzen</ins> bist der Deifi <del>das ' +
|
||||
brMarkup(2) +
|
||||
'</del><ins>Dor Reh Wachtel da </ins>Subjunktivier <del>als Derftige Aal</del><ins>san</ins> Orthopädische<del>, der Arbeitsnachweisdiskus Bass der Tastatur </del>' +
|
||||
brMarkup(3) +
|
||||
'<del>Weiter schreiben wie Tasse Wasser als</del><ins> dienen</ins>.</p>'
|
||||
);
|
||||
}));
|
||||
|
||||
it('handles STRIKE-tags', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml =
|
||||
'<p>et accusam et justo duo dolores et ea <span style="color: #ff0000;"><strike>rebum </strike></span><span style="color: #006400;">Inserted Text</span>. Stet clita kasd gubergren,</p>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(
|
||||
'<p>' +
|
||||
noMarkup(1) +
|
||||
'et accusam et justo duo dolores et ea <span style="color: #ff0000;"><strike>rebum </strike></span><span style="color: #006400;">Inserted Text</span>. Stet clita kasd ' +
|
||||
brMarkup(2) +
|
||||
'gubergren,</p>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('treats ascii newline characters like spaces', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = '<p>Test 123\nTest1</p>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 5);
|
||||
expect(outHtml).toBe('<p>' + noMarkup(1) + 'Test ' + brMarkup(2) + '123\n' + brMarkup(3) + 'Test1</p>');
|
||||
}
|
||||
));
|
||||
});
|
||||
|
||||
describe('line numbering: block nodes', () => {
|
||||
it('leaves a simple DIV untouched', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<div>Test</div>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 5);
|
||||
expect(outHtml).toBe('<div>' + noMarkup(1) + 'Test</div>');
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('breaks a DIV containing only inline elements', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = '<div>Test <span>Test1234</span>5678 Test</div>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 5);
|
||||
expect(outHtml).toBe(
|
||||
'<div>' +
|
||||
noMarkup(1) +
|
||||
'Test ' +
|
||||
brMarkup(2) +
|
||||
'<span>Test1' +
|
||||
brMarkup(3) +
|
||||
'234</span>56' +
|
||||
brMarkup(4) +
|
||||
'78 ' +
|
||||
brMarkup(5) +
|
||||
'Test</div>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
|
||||
it('handles a DIV within a DIV correctly', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<div>Te<div>Te Test</div>Test</div>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 5);
|
||||
expect(outHtml).toBe(
|
||||
'<div>' +
|
||||
noMarkup(1) +
|
||||
'Te<div>' +
|
||||
noMarkup(2) +
|
||||
'Te ' +
|
||||
brMarkup(3) +
|
||||
'Test</div>' +
|
||||
noMarkup(4) +
|
||||
'Test</div>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('ignores white spaces between block element tags', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = '<ul>\n<li>Test</li>\n</ul>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe('<ul>\n<li>' + noMarkup(1) + 'Test</li>\n</ul>');
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
});
|
||||
|
||||
describe('indentation for block elements', () => {
|
||||
it('indents LI-elements', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<div>' + longstr(100) + '<ul><li>' + longstr(100) + '</li></ul>' + longstr(100) + '</div>';
|
||||
const expected =
|
||||
'<div>' +
|
||||
noMarkup(1) +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZAB' +
|
||||
brMarkup(2) +
|
||||
'CDEFGHIJKLMNOPQRSTUV' +
|
||||
'<ul><li>' +
|
||||
noMarkup(3) +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVW' +
|
||||
brMarkup(4) +
|
||||
'XYZABCDEFGHIJKLMNOPQRSTUV' +
|
||||
'</li></ul>' +
|
||||
noMarkup(5) +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZAB' +
|
||||
brMarkup(6) +
|
||||
'CDEFGHIJKLMNOPQRSTUV</div>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(expected);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('indents BLOCKQUOTE-elements', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml =
|
||||
'<div>' + longstr(100) + '<blockquote>' + longstr(100) + '</blockquote>' + longstr(100) + '</div>';
|
||||
const expected =
|
||||
'<div>' +
|
||||
noMarkup(1) +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZAB' +
|
||||
brMarkup(2) +
|
||||
'CDEFGHIJKLMNOPQRSTUV' +
|
||||
'<blockquote>' +
|
||||
noMarkup(3) +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGH' +
|
||||
brMarkup(4) +
|
||||
'IJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUV' +
|
||||
'</blockquote>' +
|
||||
noMarkup(5) +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZAB' +
|
||||
brMarkup(6) +
|
||||
'CDEFGHIJKLMNOPQRSTUV</div>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(expected);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('shortens the line for H1-elements by 2/3', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = '<h1>' + longstr(80) + '</h1>';
|
||||
const expected =
|
||||
'<h1>' +
|
||||
noMarkup(1) +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZA' +
|
||||
brMarkup(2) +
|
||||
'BCDEFGHIJKLMNOPQRSTUVWXYZAB</h1>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(expected);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
|
||||
it('shortens the line for H2-elements by 0.75', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = '<h2>' + longstr(80) + '</h2>';
|
||||
const expected =
|
||||
'<h2>' +
|
||||
noMarkup(1) +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGH' +
|
||||
brMarkup(2) +
|
||||
'IJKLMNOPQRSTUVWXYZAB</h2>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(expected);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
|
||||
it('indents Ps with 30px-padding by 6 characters', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = '<div style="padding-left: 30px;">' + longstr(80) + '</div>';
|
||||
const expected =
|
||||
'<div style="padding-left: 30px;">' +
|
||||
noMarkup(1) +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUV' +
|
||||
brMarkup(2) +
|
||||
'WXYZAB</div>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(expected);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
|
||||
it('breaks before an inline element, if the first word of the new inline element is longer than the remaining line (1)', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml =
|
||||
'<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie <strong>consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio</strong>.</p>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(
|
||||
'<p>' +
|
||||
noMarkup(1) +
|
||||
'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie ' +
|
||||
brMarkup(2) +
|
||||
'<strong>consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan ' +
|
||||
brMarkup(3) +
|
||||
'et iusto odio</strong>.</p>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
|
||||
it('breaks before an inline element, if the first word of the new inline element is longer than the remaining line (2)', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml =
|
||||
'<p><span>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie <strong>consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio</strong>.</span></p>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(
|
||||
'<p>' +
|
||||
noMarkup(1) +
|
||||
'<span>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie ' +
|
||||
brMarkup(2) +
|
||||
'<strong>consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan ' +
|
||||
brMarkup(3) +
|
||||
'et iusto odio</strong>.</span></p>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
|
||||
it('does not fail in a weird case', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<ins>seid Noch</ins><p></p><p><ins>Test 123</ins></p>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(
|
||||
noMarkup(1) + '<ins>seid Noch</ins><p></p><p>' + noMarkup(2) + '<ins>Test 123</ins></p>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
});
|
||||
|
||||
describe('line numbering in regard to the inline diff', () => {
|
||||
it('does not count within INS nodes', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '1234 <ins>1234</ins> 1234 1234';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 10);
|
||||
expect(outHtml).toBe(noMarkup(1) + '1234 <ins>1234</ins> 1234 ' + brMarkup(2) + '1234');
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('does not create a new line for a trailing INS', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml =
|
||||
'<p>et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur<ins>dsfsdf23</ins></p>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(
|
||||
'<p>' +
|
||||
noMarkup(1) +
|
||||
'et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata ' +
|
||||
brMarkup(2) +
|
||||
'sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur<ins>dsfsdf23</ins></p>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
|
||||
it('inserts the line number before the INS, if INS is the first element of the paragraph', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml =
|
||||
"<p><ins>lauthals </ins>'liebe Kinder, ich will hinaus in den Wald, seid auf der Hut vor dem Wolf!' Und noch etwas mehr Text bis zur nächsten Zeile</p>";
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(
|
||||
'<p>' +
|
||||
noMarkup(1) +
|
||||
"<ins>lauthals </ins>'liebe Kinder, ich will hinaus in den Wald, seid auf der Hut vor dem Wolf!' Und " +
|
||||
brMarkup(2) +
|
||||
'noch etwas mehr Text bis zur nächsten Zeile</p>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
|
||||
it('cancels newlines after br-elements', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<p>Test 123<br>\nTest 456</p>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe('<p>' + noMarkup(1) + 'Test 123<br>' + noMarkup(2) + 'Test 456</p>');
|
||||
}));
|
||||
|
||||
it('does not force-break words right after an INS', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = '<p>' + noMarkup(1) + '012345 <ins>78 01 34567</ins>8901234567890123456789</p>';
|
||||
const outHtml = service.insertLineBreaksWithoutNumbers(inHtml, 20, true);
|
||||
expect(outHtml).toBe(
|
||||
'<p>' +
|
||||
noMarkup(1) +
|
||||
'012345 <ins>78 01 <br class="os-line-break">34567</ins>890123456789012<br class="os-line-break">3456789</p>'
|
||||
);
|
||||
}
|
||||
));
|
||||
});
|
||||
|
||||
describe('line breaking without adding line numbers', () => {
|
||||
const plainBr = '<br class="os-line-break">';
|
||||
|
||||
it('breaks a DIV containing only inline elements', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = '<div>Test <span>Test1234</span>5678 Test</div>';
|
||||
const outHtml = service.insertLineBreaksWithoutNumbers(inHtml, 5);
|
||||
expect(outHtml).toBe(
|
||||
'<div>Test ' +
|
||||
plainBr +
|
||||
'<span>Test1' +
|
||||
plainBr +
|
||||
'234</span>56' +
|
||||
plainBr +
|
||||
'78 ' +
|
||||
plainBr +
|
||||
'Test</div>'
|
||||
);
|
||||
expect(service.stripLineNumbers(outHtml)).toBe(inHtml);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
|
||||
it('indents BLOCKQUOTE-elements', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml =
|
||||
'<div>' + longstr(100) + '<blockquote>' + longstr(100) + '</blockquote>' + longstr(100) + '</div>';
|
||||
const expected =
|
||||
'<div>' +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZAB' +
|
||||
plainBr +
|
||||
'CDEFGHIJKLMNOPQRSTUV' +
|
||||
'<blockquote>' +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGH' +
|
||||
plainBr +
|
||||
'IJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUV' +
|
||||
'</blockquote>' +
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZAB' +
|
||||
plainBr +
|
||||
'CDEFGHIJKLMNOPQRSTUV</div>';
|
||||
const outHtml = service.insertLineBreaksWithoutNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe(expected);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('DOES count within INS nodes', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '1234 <ins>1234</ins> 1234 1234';
|
||||
const outHtml = service.insertLineBreaksWithoutNumbers(inHtml, 10, true);
|
||||
expect(outHtml).toBe('1234 <ins>1234</ins> ' + plainBr + '1234 1234');
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}));
|
||||
|
||||
it('does not create a new line for a trailing INS', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml =
|
||||
'<p>et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur<ins>dsfsdf23</ins></p>';
|
||||
const outHtml = service.insertLineBreaksWithoutNumbers(inHtml, 80, true);
|
||||
expect(outHtml).toBe(
|
||||
'<p>et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata ' +
|
||||
plainBr +
|
||||
'sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur' +
|
||||
plainBr +
|
||||
'<ins>dsfsdf23</ins></p>'
|
||||
);
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
|
||||
it('ignores witespaces by previously added line numbers', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = '<p>' + noMarkup(1) + longstr(10) + '</p>';
|
||||
const outHtml = service.insertLineBreaksWithoutNumbers(inHtml, 10, true);
|
||||
expect(outHtml).toBe('<p>' + noMarkup(1) + longstr(10) + '</p>');
|
||||
expect(service.insertLineBreaksWithoutNumbers(outHtml, 80)).toBe(outHtml);
|
||||
}
|
||||
));
|
||||
});
|
||||
|
||||
describe('behavior regarding ckeditor', () => {
|
||||
it('does not count empty lines, case 1', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<p>Line 1</p>\n\n<p>Line 2</p>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe('<p>' + noMarkup(1) + 'Line 1</p>' + '\n\n' + '<p>' + noMarkup(2) + 'Line 2</p>');
|
||||
}));
|
||||
|
||||
it('does not count empty lines, case 2', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<ul>\n\n<li>Point 1</li>\n\n</ul>';
|
||||
const outHtml = service.insertLineNumbers(inHtml, 80);
|
||||
expect(outHtml).toBe('<ul>\n\n<li>' + noMarkup(1) + 'Point 1</li>\n\n</ul>');
|
||||
}));
|
||||
});
|
||||
|
||||
describe('line highlighting', () => {
|
||||
it('highlights a simple line', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = service.insertLineNumbers('<span>Lorem ipsum dolorsit amet</span>', 5);
|
||||
const highlighted = service.highlightLine(inHtml, 2);
|
||||
expect(highlighted).toBe(
|
||||
noMarkup(1) +
|
||||
'<span>Lorem ' +
|
||||
brMarkup(2) +
|
||||
'<span class="highlight">ipsum </span>' +
|
||||
brMarkup(3) +
|
||||
'dolor' +
|
||||
brMarkup(4) +
|
||||
'sit ' +
|
||||
brMarkup(5) +
|
||||
'amet</span>'
|
||||
);
|
||||
}));
|
||||
|
||||
it('highlights a simple line with formattings', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = service.insertLineNumbers(
|
||||
'<span>Lorem ipsum <strong>dolorsit amet Lorem</strong><em> ipsum dolorsit amet</em> Lorem ipsum dolorsit amet</span>',
|
||||
20
|
||||
);
|
||||
expect(inHtml).toBe(
|
||||
noMarkup(1) +
|
||||
'<span>Lorem ipsum <strong>dolorsit ' +
|
||||
brMarkup(2) +
|
||||
'amet Lorem</strong><em> ipsum ' +
|
||||
brMarkup(3) +
|
||||
'dolorsit amet</em> Lorem ' +
|
||||
brMarkup(4) +
|
||||
'ipsum dolorsit amet</span>'
|
||||
);
|
||||
|
||||
const highlighted = service.highlightLine(inHtml, 2);
|
||||
expect(highlighted).toBe(
|
||||
noMarkup(1) +
|
||||
'<span>Lorem ipsum <strong>dolorsit ' +
|
||||
brMarkup(2) +
|
||||
'<span class="highlight">amet Lorem</span></strong><em><span class="highlight"> ipsum </span>' +
|
||||
brMarkup(3) +
|
||||
'dolorsit amet</em> Lorem ' +
|
||||
brMarkup(4) +
|
||||
'ipsum dolorsit amet</span>'
|
||||
);
|
||||
}
|
||||
));
|
||||
|
||||
it('highlights the last line', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = service.insertLineNumbers('<span>Lorem ipsum dolorsit amet</span>', 5);
|
||||
const highlighted = service.highlightLine(inHtml, 5);
|
||||
expect(highlighted).toBe(
|
||||
noMarkup(1) +
|
||||
'<span>Lorem ' +
|
||||
brMarkup(2) +
|
||||
'ipsum ' +
|
||||
brMarkup(3) +
|
||||
'dolor' +
|
||||
brMarkup(4) +
|
||||
'sit ' +
|
||||
brMarkup(5) +
|
||||
'<span class="highlight">amet</span></span>'
|
||||
);
|
||||
}));
|
||||
|
||||
it('highlights the first line', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = service.insertLineNumbers('<span>Lorem ipsum dolorsit amet</span>', 5);
|
||||
const highlighted = service.highlightLine(inHtml, 1);
|
||||
expect(highlighted).toBe(
|
||||
noMarkup(1) +
|
||||
'<span><span class="highlight">Lorem </span>' +
|
||||
brMarkup(2) +
|
||||
'ipsum ' +
|
||||
brMarkup(3) +
|
||||
'dolor' +
|
||||
brMarkup(4) +
|
||||
'sit ' +
|
||||
brMarkup(5) +
|
||||
'amet</span>'
|
||||
);
|
||||
}));
|
||||
|
||||
it('does not change the string if the line number is not found', inject(
|
||||
[LinenumberingService],
|
||||
(service: LinenumberingService) => {
|
||||
const inHtml = service.insertLineNumbers('<span>Lorem ipsum dolorsit amet</span>', 5);
|
||||
const highlighted = service.highlightLine(inHtml, 8);
|
||||
expect(highlighted).toBe(
|
||||
noMarkup(1) +
|
||||
'<span>Lorem ' +
|
||||
brMarkup(2) +
|
||||
'ipsum ' +
|
||||
brMarkup(3) +
|
||||
'dolor' +
|
||||
brMarkup(4) +
|
||||
'sit ' +
|
||||
brMarkup(5) +
|
||||
'amet</span>'
|
||||
);
|
||||
}
|
||||
));
|
||||
});
|
||||
|
||||
describe('document structure parsing', () => {
|
||||
it('detects the line numbers of headings', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
let inHtml =
|
||||
'<p>Line 1</p>' +
|
||||
'<h1>Heading 1</h1><p>Line 2</p><h2>Heading 1.1</h2><p>Line 3</p><h2>Heading 1.2</h2><p>Line 4</p>' +
|
||||
'<h1>Heading 2</h1><h2>Heading 2.1</h2><p>Line 5</p>';
|
||||
inHtml = service.insertLineNumbers(inHtml, 80);
|
||||
const structure = service.getHeadingsWithLineNumbers(inHtml);
|
||||
expect(structure).toEqual([
|
||||
{ lineNumber: 2, level: 1, text: 'Heading 1' },
|
||||
{ lineNumber: 4, level: 2, text: 'Heading 1.1' },
|
||||
{ lineNumber: 6, level: 2, text: 'Heading 1.2' },
|
||||
{ lineNumber: 8, level: 1, text: 'Heading 2' },
|
||||
{ lineNumber: 9, level: 2, text: 'Heading 2.1' }
|
||||
]);
|
||||
}));
|
||||
});
|
||||
|
||||
describe('caching', () => {
|
||||
it('caches based on line length', inject([LinenumberingService], (service: LinenumberingService) => {
|
||||
const inHtml = '<p>' + longstr(100) + '</p>';
|
||||
const outHtml80 = service.insertLineNumbers(inHtml, 80);
|
||||
const outHtml70 = service.insertLineNumbers(inHtml, 70);
|
||||
expect(outHtml70).not.toBe(outHtml80);
|
||||
}));
|
||||
});
|
||||
});
|
||||
1028
client/src/app/site/motions/services/linenumbering.service.ts
Normal file
1028
client/src/app/site/motions/services/linenumbering.service.ts
Normal file
File diff suppressed because it is too large
Load Diff
@ -6,10 +6,15 @@ import { User } from '../../../shared/models/users/user';
|
||||
import { Category } from '../../../shared/models/motions/category';
|
||||
import { Workflow } from '../../../shared/models/motions/workflow';
|
||||
import { WorkflowState } from '../../../shared/models/motions/workflow-state';
|
||||
import { ViewMotion } from '../models/view-motion';
|
||||
import { ChangeRecoMode, ViewMotion } from '../models/view-motion';
|
||||
import { Observable } from 'rxjs';
|
||||
import { BaseRepository } from '../../base/base-repository';
|
||||
import { DataStoreService } from '../../../core/services/data-store.service';
|
||||
import { LinenumberingService } from './linenumbering.service';
|
||||
import { DiffService, LineRange, ModificationType } from './diff.service';
|
||||
import { ViewChangeReco } from '../models/view-change-reco';
|
||||
import { MotionChangeReco } from '../../../shared/models/motions/motion-change-reco';
|
||||
import { ViewUnifiedChange } from '../models/view-unified-change';
|
||||
|
||||
/**
|
||||
* Repository Services for motions (and potentially categories)
|
||||
@ -30,9 +35,17 @@ export class MotionRepositoryService extends BaseRepository<ViewMotion, Motion>
|
||||
*
|
||||
* Converts existing and incoming motions to ViewMotions
|
||||
* Handles CRUD using an observer to the DataStore
|
||||
* @param DataSend
|
||||
* @param {DataStoreService} DS
|
||||
* @param {DataSendService} dataSend
|
||||
* @param {LinenumberingService} lineNumbering
|
||||
* @param {DiffService} diff
|
||||
*/
|
||||
public constructor(DS: DataStoreService, private dataSend: DataSendService) {
|
||||
public constructor(
|
||||
DS: DataStoreService,
|
||||
private dataSend: DataSendService,
|
||||
private readonly lineNumbering: LinenumberingService,
|
||||
private readonly diff: DiffService
|
||||
) {
|
||||
super(DS, Motion, [Category, User, Workflow]);
|
||||
}
|
||||
|
||||
@ -102,51 +115,209 @@ export class MotionRepositoryService extends BaseRepository<ViewMotion, Motion>
|
||||
* Format the motion text using the line numbering and change
|
||||
* reco algorithm.
|
||||
*
|
||||
* TODO: Call DiffView and LineNumbering Service here.
|
||||
*
|
||||
* Can be called from detail view and exporter
|
||||
* @param id Motion ID - will be pulled from the repository
|
||||
* @param lnMode indicator for the line numbering mode
|
||||
* @param crMode indicator for the change reco mode
|
||||
* @param changes all change recommendations and amendments, sorted by line number
|
||||
* @param lineLength the current line
|
||||
* @param highlightLine the currently highlighted line (default: none)
|
||||
*/
|
||||
public formatMotion(id: number, lnMode: number, crMode: number): string {
|
||||
public formatMotion(
|
||||
id: number,
|
||||
crMode: ChangeRecoMode,
|
||||
changes: ViewUnifiedChange[],
|
||||
lineLength: number,
|
||||
highlightLine?: number
|
||||
): string {
|
||||
const targetMotion = this.getViewModel(id);
|
||||
|
||||
if (targetMotion && targetMotion.text) {
|
||||
let motionText = targetMotion.text;
|
||||
|
||||
// TODO : Use Line numbering service here
|
||||
switch (lnMode) {
|
||||
case 0: // no line numbers
|
||||
break;
|
||||
case 1: // line number inside
|
||||
motionText = 'Get line numbers outside';
|
||||
break;
|
||||
case 2: // line number outside
|
||||
motionText = 'Get line numbers inside';
|
||||
break;
|
||||
}
|
||||
|
||||
// TODO : Use Diff Service here.
|
||||
// this will(currently) append the previous changes.
|
||||
// update
|
||||
switch (crMode) {
|
||||
case 0: // Original
|
||||
break;
|
||||
case 1: // Changed Version
|
||||
motionText += ' and get changed version';
|
||||
break;
|
||||
case 2: // Diff Version
|
||||
motionText += ' and get diff version';
|
||||
break;
|
||||
case 3: // Final Version
|
||||
motionText += ' and final version';
|
||||
break;
|
||||
case ChangeRecoMode.Original:
|
||||
return this.lineNumbering.insertLineNumbers(targetMotion.text, lineLength, highlightLine);
|
||||
case ChangeRecoMode.Changed:
|
||||
return this.diff.getTextWithChanges(targetMotion, changes, lineLength, highlightLine);
|
||||
case ChangeRecoMode.Diff:
|
||||
let text = '';
|
||||
changes.forEach((change: ViewUnifiedChange, idx: number) => {
|
||||
if (idx === 0) {
|
||||
text += this.extractMotionLineRange(
|
||||
id,
|
||||
{
|
||||
from: 1,
|
||||
to: change.getLineFrom()
|
||||
},
|
||||
true
|
||||
);
|
||||
} else if (changes[idx - 1].getLineTo() < change.getLineFrom()) {
|
||||
text += this.extractMotionLineRange(
|
||||
id,
|
||||
{
|
||||
from: changes[idx - 1].getLineTo(),
|
||||
to: change.getLineFrom()
|
||||
},
|
||||
true
|
||||
);
|
||||
}
|
||||
text += this.getChangeDiff(targetMotion, change, highlightLine);
|
||||
});
|
||||
text += this.getTextRemainderAfterLastChange(targetMotion, changes, highlightLine);
|
||||
return text;
|
||||
case ChangeRecoMode.Final:
|
||||
const appliedChanges: ViewUnifiedChange[] = changes.filter(change => change.isAccepted());
|
||||
return this.diff.getTextWithChanges(targetMotion, appliedChanges, lineLength, highlightLine);
|
||||
default:
|
||||
console.error('unrecognized ChangeRecoMode option');
|
||||
return null;
|
||||
}
|
||||
|
||||
return motionText;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts a renderable HTML string representing the given line number range of this motion
|
||||
*
|
||||
* @param {number} id
|
||||
* @param {LineRange} lineRange
|
||||
* @param {boolean} lineNumbers - weather to add line numbers to the returned HTML string
|
||||
*/
|
||||
public extractMotionLineRange(id: number, lineRange: LineRange, lineNumbers: boolean): string {
|
||||
// @TODO flexible line numbers
|
||||
const origHtml = this.formatMotion(id, ChangeRecoMode.Original, [], 80);
|
||||
const extracted = this.diff.extractRangeByLineNumbers(origHtml, lineRange.from, lineRange.to);
|
||||
let html =
|
||||
extracted.outerContextStart +
|
||||
extracted.innerContextStart +
|
||||
extracted.html +
|
||||
extracted.innerContextEnd +
|
||||
extracted.outerContextEnd;
|
||||
if (lineNumbers) {
|
||||
html = this.lineNumbering.insertLineNumbers(html, 80, null, null, lineRange.from);
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the remainder text of the motion after the last change
|
||||
*
|
||||
* @param {ViewMotion} motion
|
||||
* @param {ViewUnifiedChange[]} changes
|
||||
* @param {number} highlight
|
||||
*/
|
||||
public getTextRemainderAfterLastChange(
|
||||
motion: ViewMotion,
|
||||
changes: ViewUnifiedChange[],
|
||||
highlight?: number
|
||||
): string {
|
||||
let maxLine = 0;
|
||||
changes.forEach((change: ViewUnifiedChange) => {
|
||||
if (change.getLineTo() > maxLine) {
|
||||
maxLine = change.getLineTo();
|
||||
}
|
||||
}, 0);
|
||||
|
||||
const numberedHtml = this.lineNumbering.insertLineNumbers(motion.text, motion.lineLength);
|
||||
let data;
|
||||
|
||||
try {
|
||||
data = this.diff.extractRangeByLineNumbers(numberedHtml, maxLine, null);
|
||||
} catch (e) {
|
||||
// This only happens (as far as we know) when the motion text has been altered (shortened)
|
||||
// without modifying the change recommendations accordingly.
|
||||
// That's a pretty serious inconsistency that should not happen at all,
|
||||
// we're just doing some basic damage control here.
|
||||
const msg =
|
||||
'Inconsistent data. A change recommendation is probably referring to a non-existant line number.';
|
||||
return '<em style="color: red; font-weight: bold;">' + msg + '</em>';
|
||||
}
|
||||
|
||||
let html;
|
||||
if (data.html !== '') {
|
||||
// Add "merge-before"-css-class if the first line begins in the middle of a paragraph. Used for PDF.
|
||||
html =
|
||||
this.diff.addCSSClassToFirstTag(data.outerContextStart + data.innerContextStart, 'merge-before') +
|
||||
data.html +
|
||||
data.innerContextEnd +
|
||||
data.outerContextEnd;
|
||||
html = this.lineNumbering.insertLineNumbers(html, motion.lineLength, highlight, null, maxLine);
|
||||
} else {
|
||||
// Prevents empty lines at the end of the motion
|
||||
html = '';
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a {@link ViewChangeReco} object based on the motion ID and the given lange range.
|
||||
* This object is not saved yet and does not yet have any changed HTML. It's meant to populate the UI form.
|
||||
*
|
||||
* @param {number} motionId
|
||||
* @param {LineRange} lineRange
|
||||
*/
|
||||
public createChangeRecommendationTemplate(motionId: number, lineRange: LineRange): ViewChangeReco {
|
||||
const changeReco = new MotionChangeReco();
|
||||
changeReco.line_from = lineRange.from;
|
||||
changeReco.line_to = lineRange.to;
|
||||
changeReco.type = ModificationType.TYPE_REPLACEMENT;
|
||||
changeReco.text = this.extractMotionLineRange(motionId, lineRange, false);
|
||||
changeReco.rejected = false;
|
||||
changeReco.motion_id = motionId;
|
||||
|
||||
return new ViewChangeReco(changeReco);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the HTML with the changes, optionally with a highlighted line.
|
||||
* The original motion needs to be provided.
|
||||
*
|
||||
* @param {ViewMotion} motion
|
||||
* @param {ViewUnifiedChange} change
|
||||
* @param {number} highlight
|
||||
*/
|
||||
public getChangeDiff(motion: ViewMotion, change: ViewUnifiedChange, highlight?: number): string {
|
||||
const lineLength = motion.lineLength,
|
||||
html = this.lineNumbering.insertLineNumbers(motion.text, lineLength);
|
||||
|
||||
let data, oldText;
|
||||
|
||||
try {
|
||||
data = this.diff.extractRangeByLineNumbers(html, change.getLineFrom(), change.getLineTo());
|
||||
oldText =
|
||||
data.outerContextStart +
|
||||
data.innerContextStart +
|
||||
data.html +
|
||||
data.innerContextEnd +
|
||||
data.outerContextEnd;
|
||||
} catch (e) {
|
||||
// This only happens (as far as we know) when the motion text has been altered (shortened)
|
||||
// without modifying the change recommendations accordingly.
|
||||
// That's a pretty serious inconsistency that should not happen at all,
|
||||
// we're just doing some basic damage control here.
|
||||
const msg =
|
||||
'Inconsistent data. A change recommendation is probably referring to a non-existant line number.';
|
||||
return '<em style="color: red; font-weight: bold;">' + msg + '</em>';
|
||||
}
|
||||
|
||||
oldText = this.lineNumbering.insertLineNumbers(oldText, lineLength, null, null, change.getLineFrom());
|
||||
let diff = this.diff.diff(oldText, change.getChangeNewText());
|
||||
|
||||
// If an insertion makes the line longer than the line length limit, we need two line breaking runs:
|
||||
// - First, for the official line numbers, ignoring insertions (that's been done some lines before)
|
||||
// - Second, another one to prevent the displayed including insertions to exceed the page width
|
||||
diff = this.lineNumbering.insertLineBreaksWithoutNumbers(diff, lineLength, true);
|
||||
|
||||
if (highlight > 0) {
|
||||
diff = this.lineNumbering.highlightLine(diff, highlight);
|
||||
}
|
||||
|
||||
const origBeginning = data.outerContextStart + data.innerContextStart;
|
||||
if (diff.toLowerCase().indexOf(origBeginning.toLowerCase()) === 0) {
|
||||
// Add "merge-before"-css-class if the first line begins in the middle of a paragraph. Used for PDF.
|
||||
diff =
|
||||
this.diff.addCSSClassToFirstTag(origBeginning, 'merge-before') + diff.substring(origBeginning.length);
|
||||
}
|
||||
|
||||
return diff;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user