Merge pull request #5565 from CatoTH/bugfix/show-changed-amendment-in-slides

Fix changed amendment in slides

client/src/app/core/repositories/motions/motion-repository.service.ts

@@ -1121,4 +1121,20 @@ export class MotionRepositoryService extends BaseIsAgendaItemAndListOfSpeakersCo
             }
         });
     }
+
+    public changeHasCollissions(change: ViewUnifiedChange, changes: ViewUnifiedChange[]): boolean {
+        return (
+            changes.filter((otherChange: ViewUnifiedChange) => {
+                return (
+                    otherChange.getChangeId() !== change.getChangeId() &&
+                    ((otherChange.getLineFrom() >= change.getLineFrom() &&
+                        otherChange.getLineFrom() < change.getLineTo()) ||
+                        (otherChange.getLineTo() > change.getLineFrom() &&
+                            otherChange.getLineTo() <= change.getLineTo()) ||
+                        (otherChange.getLineFrom() < change.getLineFrom() &&
+                            otherChange.getLineTo() > change.getLineTo()))
+                );
+            }).length > 0
+        );
+    }
 }

client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss

@@ -3,13 +3,15 @@
 @mixin os-motion-detail-diff-style($theme) {
     $background: map-get($theme, background);
 
-    .change-recommendation-overview,
-    .diff-box {
-        background-color: mat-color($background, background);
-        border: 1px solid mat-color($background, selected-button);
-    }
+    .motion-text-with-diffs {
+        .change-recommendation-overview,
+        .diff-box {
+            background-color: mat-color($background, background);
+            border: 1px solid mat-color($background, selected-button);
+        }
 
-    .diff-box:hover {
-        background-color: mat-color($background, selected-button);
+        .diff-box:hover {
+            background-color: mat-color($background, selected-button);
+        }
     }
 }

client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
@@ -54,7 +54,8 @@ import { ViewMotionAmendedParagraph } from '../../../../models/view-motion-amend
 @Component({
     selector: 'os-motion-detail-diff',
     templateUrl: './motion-detail-diff.component.html',
-    styleUrls: ['./motion-detail-diff.component.scss']
+    styleUrls: ['./motion-detail-diff.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class MotionDetailDiffComponent extends BaseViewComponent implements AfterViewInit {
     /**
@@ -155,19 +156,7 @@ export class MotionDetailDiffComponent extends BaseViewComponent implements Afte
      * @param {ViewUnifiedChange[]} changes
      */
     public hasCollissions(change: ViewUnifiedChange, changes: ViewUnifiedChange[]): boolean {
-        return (
-            changes.filter((otherChange: ViewUnifiedChange) => {
-                return (
-                    otherChange.getChangeId() !== change.getChangeId() &&
-                    ((otherChange.getLineFrom() >= change.getLineFrom() &&
-                        otherChange.getLineFrom() < change.getLineTo()) ||
-                        (otherChange.getLineTo() > change.getLineFrom() &&
-                            otherChange.getLineTo() <= change.getLineTo()) ||
-                        (otherChange.getLineFrom() < change.getLineFrom() &&
-                            otherChange.getLineTo() > change.getLineTo()))
-                );
-            }).length > 0
-        );
+        return this.motionRepo.changeHasCollissions(change, changes);
     }
 
     /**

client/src/app/slides/motions/motion/motion-slide.component.html

@@ -105,7 +105,7 @@
             ></div>
 
             <!-- Amendment text -->
-            <section class="text-holder" *ngIf="isParagraphBasedAmendment()">
+            <section class="text-holder" *ngIf="isParagraphBasedAmendment() && crMode !== 'diff'">
                 <div class="alert alert-info" *ngIf="getAmendedParagraphs().length === 0">
                     <span>{{ 'No changes at the text.' | translate }}</span>
                 </div>
@@ -127,6 +127,51 @@
                 </div>
             </section>
 
+            <!-- The actual diff view of an amendment. This logic is based on the os-motion-detail-diff component -->
+            <section class="text-holder" *ngIf="isParagraphBasedAmendment() && crMode === 'diff'">
+                <div *ngIf="getTitleChangingObject() as changedTitle">
+                    <div class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
+                        <div class="status-row" *ngIf="changedTitle.isRejected()">
+                            <i class="grey">{{ 'Rejected' | translate }}</i>
+                        </div>
+
+                        <div
+                            class="motion-text motion-text-diff"
+                            [class.line-numbers-none]="isLineNumberingNone()"
+                            [class.line-numbers-inline]="isLineNumberingInline()"
+                            [class.line-numbers-outside]="isLineNumberingOutside()"
+                            [attr.data-change-id]="changedTitle.getChangeId()"
+                        >
+                            <div class="bold">{{ 'Changed title' | translate }}:</div>
+                            <div [innerHTML]="getFormattedTitleDiff() | trust: 'html'"></div>
+                        </div>
+                    </div>
+                </div>
+                <div *ngFor="let change of getAllTextChangingObjects(); let i = index">
+                    <div
+                        class="diff-box diff-box-{{ change.getChangeId() }} clearfix"
+                        [class.collides]="hasCollissions(change, getAllTextChangingObjects())"
+                    >
+                        <div class="status-row" *ngIf="isChangeRecommendation(change) && change.isRejected()">
+                            <i class="grey">{{ 'Rejected' | translate }}</i>
+                        </div>
+
+                        <div class="status-row" *ngIf="isAmendment(change) && showAllAmendments">
+                            <i class="grey">{{ change.amendment.identifier }} - {{ change.amendment.state.name | translate }}</i>
+                        </div>
+
+                        <div
+                            class="motion-text motion-text-diff"
+                            [class.line-numbers-none]="isLineNumberingNone()"
+                            [class.line-numbers-inline]="isLineNumberingInline()"
+                            [class.line-numbers-outside]="isLineNumberingOutside()"
+                            [attr.data-change-id]="change.getChangeId()"
+                            [innerHTML]="getAmendmentDiff(change) | trust: 'html'"
+                        ></div>
+                    </div>
+                </div>
+            </section>
+
             <!-- Reason -->
             <div *ngIf="data.data.reason">
                 <h3>{{ 'Reason' | translate }}</h3>

client/src/app/slides/motions/motion/motion-slide.component.scss

@@ -67,8 +67,8 @@
     &.line-numbers-outside {
         .os-line-number {
             &:after {
-                top: 17px;
-                font-size: 16px;
+                top: 17px !important;
+                font-size: 16px !important;
             }
         }
     }

client/src/app/slides/motions/motion/motion-slide.component.ts

@@ -446,4 +446,42 @@ export class MotionSlideComponent extends BaseMotionSlideComponent<MotionSlideDa
         const diffHtml = this.diff.diff(this.data.data.base_statute.text, this.data.data.text);
         return this.lineNumbering.insertLineBreaksWithoutNumbers(diffHtml, this.lineLength, true);
     }
+
+    /**
+     * Returns true if this change is colliding with another change
+     * @param {ViewUnifiedChange} change
+     * @param {ViewUnifiedChange[]} changes
+     */
+    public hasCollissions(change: ViewUnifiedChange, changes: ViewUnifiedChange[]): boolean {
+        return this.motionRepo.changeHasCollissions(change, changes);
+    }
+
+    /**
+     * 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;
+    }
+
+    /**
+     * Returns the diff string from the motion to the change
+     * @param {ViewUnifiedChange} change
+     */
+    public getAmendmentDiff(change: ViewUnifiedChange): string {
+        const motion = this.data.data;
+        const baseHtml = this.lineNumbering.insertLineNumbers(motion.base_motion?.text, this.lineLength);
+
+        return this.diff.getChangeDiff(baseHtml, change, this.lineLength, this.highlightedLine);
+    }
 }