Add PDF for paragraph based amendments

Also add some more pdf fixes

client/src/app/core/ui-services/html-to-pdf.service.ts

@@ -75,7 +75,8 @@ export class HtmlToPdfService {
      */
     private classStyles = {
         delete: ['color:red', 'text-decoration:line-through'],
-        insert: ['color:green', 'text-decoration:underline']
+        insert: ['color:green', 'text-decoration:underline'],
+        paragraphcontext: ['color:grey']
     };
 
     /**
@@ -125,7 +126,6 @@ export class HtmlToPdfService {
             const parsedElement = this.parseElement(child);
             docDef.push(parsedElement);
         }
-
         return docDef;
     }
 
@@ -185,7 +185,11 @@ export class HtmlToPdfService {
                 const children = this.parseChildren(element, styles);
 
                 // this introduces a bug with rendering sub-lists in PDF
-                if (this.lineNumberingMode === LineNumberingMode.Outside && !this.isInsideAList(element)) {
+                if (
+                    this.lineNumberingMode === LineNumberingMode.Outside &&
+                    !this.isInsideAList(element) &&
+                    !classes.includes('insert')
+                ) {
                     newParagraph = this.create('stack');
                     newParagraph.stack = children;
                 } else {
@@ -193,20 +197,28 @@ export class HtmlToPdfService {
                     newParagraph.text = children;
                 }
 
+                newParagraph.margin = [0, 0, 0, 0];
+                if (this.lineNumberingMode === LineNumberingMode.Outside) {
+                    // that is usually the case for inserted change which should appear
+                    // under a set of line numbers with correct alignment
+                    if (classes.includes('insert')) {
+                        newParagraph.margin[0] = 20;
+                        newParagraph.margin[1] = this.P_MARGIN_BOTTOM;
+                        newParagraph.margin[3] = this.P_MARGIN_BOTTOM;
+                    }
+                }
+
                 if (classes.includes('os-split-before')) {
                     newParagraph.listType = 'none';
-                } else {
+                } else if (this.isInsideAList(element)) {
-                    newParagraph.marginBottom = this.getMarginBottom(nodeName);
+                    newParagraph.margin[3] = this.getMarginBottom(nodeName);
                 }
 
                 newParagraph.lineHeight = this.LINE_HEIGHT;
-
-                const implicitStyles = this.computeStyle(this.elementStyles[nodeName]);
-
                 newParagraph = {
                     ...newParagraph,
                     ...this.computeStyle(styles),
-                    ...implicitStyles
+                    ...this.computeStyle(this.elementStyles[nodeName])
                 };
                 break;
             }
@@ -477,7 +489,7 @@ export class HtmlToPdfService {
      * Recursive helper function to determine if the element is inside a list
      *
      * @param element the current html node
-     * @returns wheater the element is inside a list or not
+     * @returns wether the element is inside a list or not
      */
     private isInsideAList(element: Element): boolean {
         let parent = element.parentNode;

client/src/app/site/motions/components/motion-detail/motion-detail.component.html

@@ -765,6 +765,7 @@
             [class.line-numbers-outside]="isLineNumberingOutside()"
             [class.amendment-context]="showAmendmentContext"
         >
+            <!-- TODO: everything here is required for PDF as well. Should be in a service -->
             <div class="amendment-context" *ngIf="showAmendmentContext">
                 <div [innerHTML]="getParentMotionRange(1, paragraph.paragraphLineFrom)" class="context"></div>
             </div>
@@ -782,9 +783,9 @@
                 <span translate>Line</span> {{ paragraph.diffLineFrom }} - {{ paragraph.diffLineTo - 1 }}:
             </h3>
 
-            <div class="paragraph-context" [innerHtml]="sanitizedText(paragraph.textPre)"></div>
+            <div class="paragraphcontext" [innerHtml]="sanitizedText(paragraph.textPre)"></div>
             <div [innerHtml]="sanitizedText(paragraph.text)"></div>
-            <div class="paragraph-context" [innerHtml]="sanitizedText(paragraph.textPost)"></div>
+            <div class="paragraphcontext" [innerHtml]="sanitizedText(paragraph.textPost)"></div>
 
             <div class="amendment-context" *ngIf="showAmendmentContext">
                 <div [innerHtml]="getParentMotionRange(paragraph.paragraphLineTo, null)"></div>

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

@@ -274,10 +274,10 @@ span {
     .os-split-before {
         margin-top: 0;
     }
-    .paragraph-context {
+    .paragraphcontext {
         opacity: 0.5;
     }
-    &.amendment-context .paragraph-context {
+    &.amendment-context .paragraphcontext {
         opacity: 1;
     }
 }

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

@@ -476,6 +476,10 @@ export class MotionDetailComponent extends BaseViewComponent implements OnInit {
     /**
      * Merges amendments and change recommendations and sorts them by the line numbers.
      * Called each time one of these arrays changes.
+     *
+     * TODO: 1. Having logic in a service is bad practice
+     *       2. Manipulating class parameters without an subscription should
+     *          be avoided. It's safer and simpler to return values than to manipulate the scope
      */
     private recalcUnifiedChanges(): void {
         this.allChangingObjects = [];

client/src/app/site/motions/services/motion-pdf.service.ts

@@ -455,7 +455,24 @@ export class MotionPdfService {
         const lineLength = this.configService.instant<number>('motions_line_length');
 
         if (motion.isParagraphBasedAmendment()) {
-            // TODO: special docs for special amendment
+            motionText = '';
+            // this is logically redundant with the formation of amendments in the motion-detail html.
+            // Should be refactored in a way that a service returns the correct html for both cases
+            for (const paragraph of this.motionRepo.getAmendedParagraphs(motion, lineLength)) {
+                if (paragraph.diffLineTo === paragraph.diffLineFrom + 1) {
+                    motionText += `<h3>
+                        ${this.translate.instant('Line')} ${paragraph.diffLineFrom}:
+                    </h3>`;
+                } else {
+                    motionText += `<h3>
+                        ${this.translate.instant('Line')} ${paragraph.diffLineFrom} - ${paragraph.diffLineTo - 1}:
+                    </h3>`;
+                }
+
+                motionText += `<div class="paragraphcontext">${paragraph.textPre}</div>`;
+                motionText += paragraph.text;
+                motionText += `<div class="paragraphcontext">${paragraph.textPost}</div>`;
+            }
         } else if (motion.isStatuteAmendment()) {
             // statute amendments
             const statutes = this.statureRepo.getViewModelList();