Feature/markdown pattern references (#97)

* add button + functionaliaty to reference another pattern in the markdown editor

* refactor getData method

pattern language needs to be loaded first, because we need the pattern language object to load the pattern afterwards

* load pattern language by either ID or URI when creating a pattern

* use id instead of URI for navigation

* refactoring

* refactoring: move markdowneditor logic to its own class

* enable to add href references to pattern when editing a pattern

* fix minor deep code issues + whitespace

* fix more deep code issues

* Bump browserslist from 4.12.0 to 4.16.6

Bumps [browserslist](https://github.com/browserslist/browserslist) from 4.12.0 to 4.16.6.
- [Release notes](https://github.com/browserslist/browserslist/releases)
- [Changelog](https://github.com/browserslist/browserslist/blob/main/CHANGELOG.md)
- [Commits](browserslist/browserslist@4.12.0...4.16.6)

Signed-off-by: dependabot[bot] <[email protected]>

* add css

* fix lint errors

* remove unused tests

* remove unused test

* comply to lint rules

* fix typo

* Changing this.pattern.id to this.patternId to prevent pattern.id does not exist bug

* remove test log

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Martin Beisel <[email protected]>

Author: 3 people

src/app/core/component/cardrenderer/card-renderer.component.ts

@@ -32,7 +32,7 @@ export class CardRendererComponent {
 
   navigate(pattern: UriEntity): void {
     this.zone.run(() => {
-      this.router.navigate([UriConverter.doubleEncodeUri(pattern.uri)], { relativeTo: this.activatedRoute });
+      this.router.navigate([pattern.id], { relativeTo: this.activatedRoute });
     });
   }
 

src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html

@@ -1,8 +1,8 @@
 <h1 mat-dialog-title *ngIf="data?.name">Do you really want to delete {{data.name}}?</h1>
 <h1 mat-dialog-title *ngIf="!data?.name">Do you really want to delete this item?</h1>
 <div mat-dialog-actions>
-  <button mat-button (click)="onNoClick()">Cancle</button>
-  <button [mat-dialog-close]="data" class="pattern-button"  style="margin-left: auto;
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button [mat-dialog-close]="data" class="pattern-button" style="margin-left: auto;
           margin-right: 0;" mat-raised-button color="warn">
     <i class="material-icons">delete</i>
   </button>

src/app/core/component/edit-url-dialog/edit-url-dialog.component.html

@@ -2,14 +2,14 @@ <h1 mat-dialog-title>Edit Title or Icon for {{data.pattern.name}}</h1>
 <div mat-dialog-content>
   <mat-form-field>
     <mat-label>Adjust Pattern Name</mat-label>
-    <input matInput placeholder={{data.pattern.name}} [(ngModel)]="data.name" >
+    <input matInput placeholder={{data.pattern.name}} [(ngModel)]="data.name">
   </mat-form-field>
   <mat-form-field>
     <mat-label>Adjust Icon URL</mat-label>
-    <input matInput placeholder={{data.pattern.iconUrl}} [(ngModel)]="data.icon" >
+    <input matInput placeholder={{data.pattern.iconUrl}} [(ngModel)]="data.icon">
   </mat-form-field>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-button (click)="onNoClick()">Cancle</button>
+  <button mat-button (click)="onNoClick()">Cancel</button>
   <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
 </mat-dialog-actions>

src/app/core/component/markdown-content-container/discuss-dialog/discuss-dialog.component.html

@@ -13,6 +13,6 @@ <h1 mat-dialog-title>{{data.title}}</h1>
 <mat-dialog-actions align="end">
   <button mat-button (click)="deleteComment()">Delete comment</button>
   <div fxFlex></div>
-  <button mat-button (click)="onNoClick()">Cancle</button>
+  <button mat-button (click)="onNoClick()">Cancel</button>
   <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
 </mat-dialog-actions>

src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.ts

@@ -26,6 +26,7 @@ import * as QuantumCircuit from 'quantum-circuit';
 export class MarkdownPatternSectionContentComponent extends DataRenderingComponent implements AfterViewInit {
   data: string;
   renderedData: string;
+  patternLanguageId: string;
   title = '';
   imageModels: ImageModel[] = [];
   svg: Selection<SVGSVGElement, any, any, any>;
@@ -107,7 +108,7 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone
 
   openEditor(): void {
     const dialogRef = this.dialog.open(MdEditorComponent,
-      { data: { content: this.data, field: this.title } });
+      { data: { content: this.data, field: this.title, patternLanguageId: this.patternLanguageId } });
     dialogRef.afterClosed().subscribe(async (result: DialogData) => {
       const previousValue = this.data;
 

src/app/core/component/md-editor/md-editor.component.html

@@ -4,8 +4,22 @@ <h1 mat-dialog-title>Edit '{{data.label}}'</h1>
     <i class="material-icons">close</i>
   </button>
 </div>
-<div mat-dialog-content>
-  <td-text-editor #mdEditor [value]="data.content"></td-text-editor>
+<div mat-dialog-content [formGroup]="selectedPatternForm">
+  <div style="display: flex;     align-items: center;">
+    <mat-form-field appearance="fill" style="flex: 0.625; margin-right: 0.3em">
+      <mat-label>Pattern</mat-label>
+      <mat-select formControlName="selectedPattern">
+        <mat-option *ngFor="let pattern of patterns" [value]="pattern">
+          {{pattern.name}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <button mat-raised-button color="primary" [disabled]="!selectedPatternForm.controls['selectedPattern'].value"
+            (click)="addReference()" matTooltip=" Add Reference to another Pattern">
+      Add Reference
+    </button>
+  </div>
+  <td-text-editor #mdEditor [value]="data.content" [options]="options"></td-text-editor>
 </div>
 <div mat-dialog-actions>
   <button mat-raised-button color="warn"

src/app/core/component/md-editor/md-editor.component.ts

@@ -1,51 +1,89 @@
-import { Component, Inject, ViewChild } from '@angular/core';
+import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { TdTextEditorComponent } from '@covalent/text-editor';
+import { MarkdownEditorUtils } from '../../util/markdown-editor-utils';
+import Pattern from '../../model/hal/pattern.model';
+import { PatternService } from '../../service/pattern.service';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 export class DialogData {
-    field: string;
-    label?: string;
-    content: string;
+
+  field: string;
+  label?: string;
+  content: string;
+  patternLanguageId: string;
 }
 
 @Component({
   selector: 'pp-md-editor',
   templateUrl: './md-editor.component.html',
   styleUrls: ['./md-editor.component.scss']
 })
-export class MdEditorComponent {
+export class MdEditorComponent implements OnInit {
 
-    @ViewChild('mdEditor') private _textEditor: TdTextEditorComponent;
-    private intialContent: string;
+  @ViewChild('mdEditor') private _textEditor: TdTextEditorComponent;
+  private intialContent: string;
+  patterns: Array<Pattern>;
+  selectedPatternForm: FormGroup;
 
-    constructor(public dialogRef: MatDialogRef<MdEditorComponent>,
-                @Inject(MAT_DIALOG_DATA) public data: DialogData) {
-      if (!data.label) {
-        data.label = data.field;
-      }
-      this.intialContent = data.content;
-      // We revert changes and close modal at click on backdrop
-      this.dialogRef.backdropClick().subscribe(() => {
-        this.dialogRef.close({ field: this.data.field, content: this.intialContent });
-      });
-      // We revert changes and close modal at hitting ESC
-      this.dialogRef.keydownEvents().subscribe(event => {
-        if (event.code === 'Escape') {
-          this.dialogRef.close({ field: this.data.field, content: this.intialContent });
-        }
-      });
+  constructor(public dialogRef: MatDialogRef<MdEditorComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: DialogData, private patternService: PatternService,
+              private _fb: FormBuilder) {
+    if (!data.label) {
+      data.label = data.field;
     }
-
-    close(): void {
+    this.intialContent = data.content;
+    // We revert changes and close modal at click on backdrop
+    this.dialogRef.backdropClick().subscribe(() => {
       this.dialogRef.close({ field: this.data.field, content: this.intialContent });
-    }
+    });
+    // We revert changes and close modal at hitting ESC
+    this.dialogRef.keydownEvents().subscribe(event => {
+      if (event.code === 'Escape') {
+        this.dialogRef.close({ field: this.data.field, content: this.intialContent });
+      }
+    });
+  }
 
-    saveChanges(): void {
-      this.dialogRef.close({ field: this.data.field, content: this._textEditor.value });
-    }
+  options: any = {
+    autoDownloadFontAwesome: true,
+    toolbar:
+      [...MarkdownEditorUtils.standardMarkdownEditiorButtons,
+        {
+          name: 'latex-environment',
+          action: (editor) => {
+            MarkdownEditorUtils.insertTextAtCursor(editor, '$', '$');
+          },
+          className: 'fa fa-subscript',
+          title: 'Add Formula',
+        },
+        '|', // Separator
+        MarkdownEditorUtils.helpButton,
+        'preview'
+      ],
+  };
 
-    revert(): void {
-      this._textEditor.value = this.intialContent;
-    }
+  ngOnInit() {
+    this.patternService.getPatternsById(this.data.patternLanguageId).subscribe(res => this.patterns = res);
+    this.selectedPatternForm = this._fb.group({
+      selectedPattern: ['', []]
+    });
+  }
+
+  close(): void {
+    this.dialogRef.close({ field: this.data.field, content: this.intialContent });
+  }
+
+  saveChanges(): void {
+    this.dialogRef.close({ field: this.data.field, content: this._textEditor.value });
+  }
+
+  revert(): void {
+    this._textEditor.value = this.intialContent;
+  }
 
+  addReference() {
+    const pattern = this.selectedPatternForm.controls['selectedPattern'].value;
+    MarkdownEditorUtils.insertTextAtCursor(this._textEditor.simpleMDE, MarkdownEditorUtils.getPatternHrefMarkdown(this.data.patternLanguageId, pattern), '');
+  }
 }

src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.html

@@ -0,0 +1,16 @@
+<h1 mat-dialog-title>Which Pattern do you want to reference? </h1>
+<div mat-dialog-content [formGroup]="selectedPatternForm">
+  <mat-form-field appearance="fill">
+    <mat-label>Pattern</mat-label>
+    <mat-select formControlName="selectedPattern">
+      <mat-option *ngFor="let pattern of data.patterns" [value]="pattern">
+        {{pattern.name}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button mat-button [mat-dialog-close]="selectedPatternForm.controls['selectedPattern'].value" cdkFocusInitial>Ok
+  </button>
+</mat-dialog-actions>

src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.scss

@@ -0,0 +1,31 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'pp-select-pattern-dialog',
+  templateUrl: './select-pattern-dialog.component.html',
+  styleUrls: ['./select-pattern-dialog.component.scss']
+})
+export class SelectPatternDialogComponent implements OnInit {
+
+
+  constructor(
+    public dialogRef: MatDialogRef<SelectPatternDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any, private _fb: FormBuilder) {
+  }
+
+  selectedPatternForm: FormGroup;
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+
+  ngOnInit(): void {
+    this.selectedPatternForm = this._fb.group({
+      selectedPattern: ['', [Validators.required]]
+    });
+  }
+
+}