Feature/markdown pattern references

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.ts

@@ -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]]
+    });
+  }
+
+}

src/app/core/core.module.ts

@@ -77,6 +77,7 @@ import { CandidateManagementService } from './candidate-management/_services/can
 import { CandidateManagementStore } from './candidate-management';
 import { MatTreeModule } from '@angular/material/tree';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { SelectPatternDialogComponent } from './component/select-pattern-dialog/select-pattern-dialog.component';
 import { DeleteConfirmationDialogComponent } from './component/delete-confirmation-dialog/delete-confirmation-dialog.component';
 import { EditUrlDialogComponent } from './component/edit-url-dialog/edit-url-dialog.component';
 import { FeatureToggleDialogComponent } from './component/feature-toggle-dialog/feature-toggle-dialog.component';
@@ -167,6 +168,7 @@ import { PatternAtlasUiFeatureToggleModule } from './directives/pattern-atlas-ui
     CreativeLicenseFooterComponent,
     CommentDialogComponent,
     DiscussDialogComponent,
+    SelectPatternDialogComponent,
     DeleteConfirmationDialogComponent,
     EditUrlDialogComponent,
     FeatureToggleDialogComponent

src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts

@@ -33,7 +33,7 @@ import { EditUrlDialogComponent } from '../component/edit-url-dialog/edit-url-di
 @Component({
   selector: 'pp-default-pattern-renderer',
   templateUrl: './default-pattern-renderer.component.html',
-  styleUrls: [ './default-pattern-renderer.component.scss' ]
+  styleUrls: ['./default-pattern-renderer.component.scss']
 })
 export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy {
   @ViewChild(PatternPropertyDirective) ppPatternProperty: PatternPropertyDirective;
@@ -105,7 +105,7 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy
   getPatternSectionContent(): Observable<Pattern> {
     const content = this.patternService.getPatternContentByPattern(this.pattern);
     const renderedContent = this.patternService.getPatternRenderedContentByPattern(this.pattern);
-    return forkJoin([ content, renderedContent ]).pipe(
+    return forkJoin([content, renderedContent]).pipe(
       map((patternContent) => {
         this.pattern.renderedContent = patternContent[1].renderedContent;
         return this.pattern.content = patternContent[0].content;
@@ -115,7 +115,7 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy
   getPatternLanguageLinks(): Observable<any> {
     const $getDirectedEdges = this.getDirectedEdges();
     const $getUndirectedEdges = this.getUndirectedEdges();
-    return forkJoin([ $getDirectedEdges, $getUndirectedEdges ]).pipe(tap(() => this.isLoadingLinks = false));
+    return forkJoin([$getDirectedEdges, $getUndirectedEdges]).pipe(tap(() => this.isLoadingLinks = false));
   }
 
   getPatternByLink(edge: DirectedEdgeModel | UndirectedEdgeModel, res: any) {
@@ -146,6 +146,7 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy
     instance.renderedData = renderedContent;
     instance.data = content;
     instance.title = section;
+    instance.patternLanguageId = this.patternLanguageId;
     instance.isEditingEnabled = this.isEditingEnabled;
     const changeSubscription = instance.changeContent.subscribe((dataChange: DataChange) => {
       this.pattern.content[section] = dataChange.currentValue;
@@ -162,8 +163,8 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy
     return this.patternLanguageService.getDirectedEdges(this.patternLanguage).pipe(
       tap((edges) => {
         this.directedPatternRelations = edges && edges._embedded ?
-          edges._embedded.directedEdgeModels.filter(edge => edge.sourcePatternId === this.pattern.id ||
-            edge.targetPatternId === this.pattern.id) : [];
+          edges._embedded.directedEdgeModels.filter(edge => edge.sourcePatternId === this.patternId ||
+            edge.targetPatternId === this.patternId) : [];
       }));
   }
 
@@ -174,7 +175,7 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy
     return this.patternLanguageService.getUndirectedEdges(this.patternLanguage).pipe(
       tap((edges) => {
         this.undirectedPatternRelations = edges && edges._embedded ?
-          edges._embedded.undirectedEdgeModels.filter(edge => edge.pattern1Id === this.pattern.id || edge.pattern2Id === this.pattern.id) : [];
+          edges._embedded.undirectedEdgeModels.filter(edge => edge.pattern1Id === this.patternId || edge.pattern2Id === this.patternId) : [];
       }));
   }
 
@@ -196,34 +197,21 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy
   }
 
   private getData(): void {
-    //initialize pattern to get ID etc for future requests
-    let getPatternObservable;
-    if (UriConverter.isUUID(this.patternId)) {
-      getPatternObservable = this.patternService.getPatternById(this.patternLanguage, this.patternId).pipe(
-        tap(pattern => this.pattern = pattern));
-    } else {
-      getPatternObservable = this.patternService.getPatternByEncodedUri(this.patternId).pipe(tap(pattern => this.pattern = pattern));
-    }
-    // get pattern language object with all the hal links that we need
-    let dataObservable;
-    if (UriConverter.isUUID(this.patternLanguageId)) {
-      dataObservable = this.patternLanguageService.getPatternLanguageByID(this.patternLanguageId).pipe(
-        tap((patternLanguage) => this.patternLanguage = patternLanguage),
-        // get our individual pattern and the links in parallel
-        switchMap(() => forkJoin([ this.fillPatternSectionData(), this.getPatternLanguageLinks() ])));
-    } else {
-      this.patternLanguageService.getPatternLanguageByEncodedUri(this.patternLanguageId).pipe(
-        tap((patternLanguage) => this.patternLanguage = patternLanguage),
-        // get our individual pattern and the links in parallel
-        switchMap(() => forkJoin([ this.fillPatternSectionData(), this.getPatternLanguageLinks() ])));
-    }
-    const dataSubscription = forkJoin([getPatternObservable, dataObservable]).subscribe(() => this.cdr.detectChanges());
-    this.subscriptions.add(dataSubscription);
 
+    // first load pattern language object with all the hal links / ids that we may need
+    let dataObservable = UriConverter.isUUID(this.patternLanguageId) ? this.patternLanguageService.getPatternLanguageByID(this.patternLanguageId)
+      : this.patternLanguageService.getPatternLanguageByEncodedUri(this.patternLanguageId);
+    let subscription = dataObservable.pipe(
+      tap((patternLanguage) => this.patternLanguage = patternLanguage),
+      // load the rest: get our individual pattern and the links in parallel
+      switchMap(() => forkJoin([this.getPatternObservable(), this.fillPatternSectionData(), this.getPatternLanguageLinks()])))
+      .subscribe(res => this.cdr.detectChanges());
+    this.subscriptions.add(subscription);
 
 
   }
 
+
   private fillPatternSectionData() {
     return this.getPatternData().pipe(
       tap(() => {
@@ -273,4 +261,11 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy
       }
     });
   }
+
+  private getPatternObservable(): Observable<Pattern> {
+    return UriConverter.isUUID(this.patternId) ?
+      this.patternService.getPatternById(this.patternLanguage, this.patternId) :
+      this.patternService.getPatternByEncodedUri(this.patternId).pipe(
+        tap(pattern => this.pattern = pattern));
+  }
 }

src/app/core/default-pl-renderer/default-pl-renderer.component.ts

@@ -288,7 +288,8 @@ export class DefaultPlRendererComponent implements OnInit, OnDestroy {
     }
 
     let loadDataObservable;
-    // check if patternlanguage is specified via UUIID or URI and load it accordingly
+    console.log(this.patternLanguageId)
+    // check if patternlanguage is specified via UUID or URI and load it accordingly
     if (UriConverter.isUUID(this.patternLanguageId)) {
       loadDataObservable = this.patternLanguageService.getPatternLanguageByID(this.patternLanguageId)
         .pipe(