From defe14f8db069c017acfc4ee68d4e4df6fda39eb Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Wed, 24 Mar 2021 14:43:56 +0100 Subject: [PATCH 01/18] add button + functionaliaty to reference another pattern in the markdown editor --- .../select-pattern-dialog.component.html | 16 ++++ .../select-pattern-dialog.component.scss | 0 .../select-pattern-dialog.component.spec.ts | 25 ++++++ .../select-pattern-dialog.component.ts | 31 +++++++ .../default-pl-renderer.component.ts | 24 +++--- .../create-pattern.component.ts | 80 +++++++++++++------ 6 files changed, 141 insertions(+), 35 deletions(-) create mode 100644 src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.html create mode 100644 src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.scss create mode 100644 src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts create mode 100644 src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.ts diff --git a/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.html b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.html new file mode 100644 index 00000000..e6713f0e --- /dev/null +++ b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.html @@ -0,0 +1,16 @@ +

Which Pattern do you want to reference?

+
+ + Pattern + + + {{pattern.name}} + + + +
+ + + + diff --git a/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.scss b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts new file mode 100644 index 00000000..2a374f01 --- /dev/null +++ b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {SelectPatternDialogComponent} from './select-pattern-dialog.component'; + +describe('SelectPatternDialogComponent', () => { + let component: SelectPatternDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [SelectPatternDialogComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SelectPatternDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.ts b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.ts new file mode 100644 index 00000000..a6cad716 --- /dev/null +++ b/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, + @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]] + }); + } + +} diff --git a/src/app/core/default-pl-renderer/default-pl-renderer.component.ts b/src/app/core/default-pl-renderer/default-pl-renderer.component.ts index b73fa35f..fdeef0db 100644 --- a/src/app/core/default-pl-renderer/default-pl-renderer.component.ts +++ b/src/app/core/default-pl-renderer/default-pl-renderer.component.ts @@ -39,7 +39,7 @@ export class DefaultPlRendererComponent implements OnInit, OnDestroy { patterns: Array = []; patternsForCardsView: Array = []; patternLanguage: PatternLanguage; - patternLanguageId: string; + patternLanguageIdOrUri: string; @ViewChild('graphWrapper') graph: ElementRef; @ViewChild('cardsView') cardsView: ElementRef; @ViewChild('searchField') searchField: ElementRef; @@ -158,19 +158,21 @@ export class DefaultPlRendererComponent implements OnInit, OnDestroy { private loadData(): void { this.isLoadingPatternData = true; - this.patternLanguageId = UriConverter.doubleDecodeUri(this.activatedRoute.snapshot.paramMap.get(globals.pathConstants.patternLanguageId)); - if (this.patternLanguageId) { - const loadDataSubscrition = this.patternLanguageService.getPatternLanguageByEncodedUri(this.patternLanguageId) - .pipe( + this.patternLanguageIdOrUri = UriConverter.doubleDecodeUri(this.activatedRoute.snapshot.paramMap.get(globals.pathConstants.patternLanguageId)); + if (this.patternLanguageIdOrUri) { + // load pattern language data by either URI or ID + const loadDataObservable = UriConverter.isURI(this.patternLanguageIdOrUri) ? + this.patternLanguageService.getPatternLanguageByEncodedUri(this.patternLanguageIdOrUri) : + this.patternLanguageService.getPatternLanguageByID(this.patternLanguageIdOrUri).pipe( tap(patternlanguage => this.patternLanguage = patternlanguage), switchMap(() => this.loadPatterns()), switchMap(() => this.getPatternLinks()) - ) - .subscribe(() => { - this.isLoadingLinkData = false; - this.detectChanges(); - }); - this.subscriptions.add(loadDataSubscrition); + ); + let subscription = loadDataObservable.subscribe(() => { + this.isLoadingLinkData = false; + this.detectChanges(); + }); + this.subscriptions.add(subscription); } } diff --git a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts index 1726264b..980b487e 100644 --- a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts +++ b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts @@ -1,21 +1,24 @@ -import { ChangeDetectorRef, Component, NgZone, OnInit, ViewChild } from '@angular/core'; -import { TdTextEditorComponent } from '@covalent/text-editor'; -import { ActivatedRoute, Router } from '@angular/router'; +import {ChangeDetectorRef, Component, NgZone, OnInit, ViewChild} from '@angular/core'; +import {TdTextEditorComponent} from '@covalent/text-editor'; +import {ActivatedRoute, Router} from '@angular/router'; import * as marked from 'marked'; -import { TokensList } from 'marked'; -import Pattern from '../../core/model/pattern.model'; -import { ToasterService } from 'angular2-toaster'; -import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms'; -import { ValidationService } from '../../core/service/validation.service'; -import { PatternLanguageService } from '../../core/service/pattern-language.service'; +import {TokensList} from 'marked'; +import {ToasterService} from 'angular2-toaster'; +import {AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators} from '@angular/forms'; +import {ValidationService} from '../../core/service/validation.service'; +import {PatternLanguageService} from '../../core/service/pattern-language.service'; import PatternLanguage from '../../core/model/hal/pattern-language.model'; import PatternSectionSchema from '../../core/model/hal/pattern-section-schema.model'; import * as MarkdownIt from 'markdown-it'; import * as markdownitKatex from 'markdown-it-katex'; -import { PatternService } from '../../core/service/pattern.service'; -import { debounceTime, distinctUntilChanged } from 'rxjs/internal/operators'; -import { globals } from '../../globals'; -import { UriConverter } from '../../core/util/uri-converter'; +import {PatternService} from '../../core/service/pattern.service'; +import {debounceTime, distinctUntilChanged, tap} from 'rxjs/internal/operators'; +import {globals} from '../../globals'; +import {UriConverter} from '../../core/util/uri-converter'; +import {SelectPatternDialogComponent} from '../../core/component/select-pattern-dialog/select-pattern-dialog.component'; +import {MatDialog} from '@angular/material/dialog'; +import {of} from 'rxjs'; +import Pattern from '../../core/model/hal/pattern.model'; @Component({ @@ -50,7 +53,7 @@ export class CreatePatternComponent implements OnInit { }, { name: 'pattern-link', action: (editor) => { - // TODO: after chosing a pattern in the dialog, insert a link to the chosen pattern in markdown syntax + this.addPatternReference(editor); }, className: 'fa fab fa-product-hunt', title: 'Reference Pattern', @@ -77,7 +80,8 @@ export class CreatePatternComponent implements OnInit { private patternService: PatternService, private router: Router, private zone: NgZone, - private _fb: FormBuilder) { + private _fb: FormBuilder, + private matDialog: MatDialog) { } get iconUrl(): AbstractControl { @@ -178,7 +182,7 @@ export class CreatePatternComponent implements OnInit { () => { this.toastService.pop('success', 'Pattern successfully created'); this.zone.run(() => { - this.router.navigate(['..'], { relativeTo: this.activatedRoute }); + this.router.navigate(['..'], {relativeTo: this.activatedRoute}); }); }, (error) => this.toastService.pop('error', 'Could not create Pattern', error.message) @@ -218,10 +222,10 @@ export class CreatePatternComponent implements OnInit { } this.errorMessages = []; Object.keys(this.patternValuesFormGroup.controls).forEach(key => { - const controlErrors: ValidationErrors = this.patternValuesFormGroup.controls[ key ].errors; + const controlErrors: ValidationErrors = this.patternValuesFormGroup.controls[key].errors; if (controlErrors != null) { Object.keys(controlErrors).forEach(keyError => { - this.errorMessages.push(ValidationService.getMessageForError(key, keyError, controlErrors[ keyError ])); + this.errorMessages.push(ValidationService.getMessageForError(key, keyError, controlErrors[keyError])); }); } }); @@ -252,7 +256,7 @@ export class CreatePatternComponent implements OnInit { private parsePatternInput(): void { const lines = this.parseMarkdownText(); const patternNameIndex = lines.findIndex((it) => it.type === 'heading' && it.depth === 1); - this.patternName = patternNameIndex !== -1 ? lines[ patternNameIndex ][ 'text' ] : ''; + this.patternName = patternNameIndex !== -1 ? lines[patternNameIndex]['text'] : ''; this.patternLanguage.patternSchema.patternSectionSchemas.forEach((schema: PatternSectionSchema) => { const sectionName = schema.name; const sectionIndex = lines.findIndex((sec) => sec.type === 'heading' && sec.depth === 2 && @@ -260,17 +264,17 @@ export class CreatePatternComponent implements OnInit { if (sectionIndex !== -1) { const sectionContent = []; for (let i = sectionIndex + 1; i < lines.length; i++) { - if (lines[ i ].type === 'heading') { + if (lines[i].type === 'heading') { break; } - if (lines[ i ][ 'text' ]) { + if (lines[i]['text']) { // if a list item was parsed before, add it to the text - sectionContent.push(i > 0 && CreatePatternComponent.isListItem(i, sectionIndex, lines) ? '* ' + lines[ i ][ 'text' ] : lines[ i ][ 'text' ]); + sectionContent.push(i > 0 && CreatePatternComponent.isListItem(i, sectionIndex, lines) ? '* ' + lines[i]['text'] : lines[i]['text']); } } if (this.patternValuesFormGroup) { - if (this.patternValuesFormGroup.controls[ sectionName ]) { - this.patternValuesFormGroup.controls[ sectionName ].setValue(sectionContent.join('\n')); + if (this.patternValuesFormGroup.controls[sectionName]) { + this.patternValuesFormGroup.controls[sectionName].setValue(sectionContent.join('\n')); } else { console.log('missing formcontrol:'); console.log(sectionName); @@ -300,4 +304,32 @@ export class CreatePatternComponent implements OnInit { this._textEditor.value = this.previousTextEditorValue; this.onChangeMarkdownText(); } + + private addPatternReference(editor: any) { + // get patterns to select from + let patternsObservable = !this.patterns ? + this.patternService.getPatternsByUrl(this.patternLanguage._links.patterns.href) : of(this.patterns); + patternsObservable.pipe(tap((res) => { + this.patterns = res; + // let the user choose which pattern to reference + this.showAndHandlePatternSelectionDialog(this.patterns, editor); + })).subscribe((res) => { + console.log('show dialog for pattern selection') + }); + } + + private showAndHandlePatternSelectionDialog(patterns: Array, editor: any) { + const dialogRef = this.matDialog.open(SelectPatternDialogComponent, { + data: { + patterns: this.patterns + } + }); + + dialogRef.afterClosed().subscribe((selectedPattern) => { + const patternReferenceUrl = `pattern-languages/${this.patternLanguage.id}/${selectedPattern.id}`; + if (selectedPattern) { // if user did not cancel + this.insertTextAtCursor(editor, `[${selectedPattern.name}](${patternReferenceUrl})`, ''); + } + }); + } } From 6fcb7f9cd2cb37191df5feaf7bb3761a93d7e009 Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Wed, 24 Mar 2021 15:47:36 +0100 Subject: [PATCH 02/18] refactor getData method pattern language needs to be loaded first, because we need the pattern language object to load the pattern afterwards --- .../default-pattern-renderer.component.ts | 90 +++++++++---------- src/app/core/util/uri-converter.ts | 2 +- 2 files changed, 43 insertions(+), 49 deletions(-) diff --git a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts index 376934ad..3c1c241c 100644 --- a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts +++ b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts @@ -6,34 +6,34 @@ import { OnDestroy, ViewChild } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { ToasterService } from 'angular2-toaster'; -import { PatternPropertyDirective } from '../component/markdown-content-container/pattern-property.directive'; -import { MatDialog } from '@angular/material/dialog'; -import { CreatePatternRelationComponent } from '../component/create-pattern-relation/create-pattern-relation.component'; +import {ActivatedRoute, Router} from '@angular/router'; +import {ToasterService} from 'angular2-toaster'; +import {PatternPropertyDirective} from '../component/markdown-content-container/pattern-property.directive'; +import {MatDialog} from '@angular/material/dialog'; +import {CreatePatternRelationComponent} from '../component/create-pattern-relation/create-pattern-relation.component'; import Pattern from '../model/hal/pattern.model'; -import { PatternLanguageService } from '../service/pattern-language.service'; +import {PatternLanguageService} from '../service/pattern-language.service'; import PatternLanguage from '../model/hal/pattern-language.model'; -import { PatternService } from '../service/pattern.service'; -import { MarkdownPatternSectionContentComponent } from '../component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component'; // eslint-disable-line max-len -import { DataChange } from '../component/markdown-content-container/interfaces/DataRenderingComponent.interface'; +import {PatternService} from '../service/pattern.service'; +import {MarkdownPatternSectionContentComponent} from '../component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component'; // eslint-disable-line max-len +import {DataChange} from '../component/markdown-content-container/interfaces/DataRenderingComponent.interface'; import PatternSectionSchema from '../model/hal/pattern-section-schema.model'; -import { map, switchMap, tap } from 'rxjs/operators'; -import { EMPTY, forkJoin, Observable, Subscription } from 'rxjs'; -import { PatternRelationDescriptorService } from '../service/pattern-relation-descriptor.service'; -import { DirectedEdgeModel } from '../model/hal/directed-edge.model'; -import { Embedded } from '../model/hal/embedded'; -import { DirectedEdesResponse } from '../model/hal/directed-edes-response.interface'; -import { UndirectedEdgesResponse } from '../model/hal/undirected-edes-response.interface'; -import { UndirectedEdgeModel } from '../model/hal/undirected-edge.model'; -import { globals } from '../../globals'; -import { UriConverter } from '../util/uri-converter'; -import { EditUrlDialogComponent } from '../component/edit-url-dialog/edit-url-dialog.component'; +import {map, switchMap, tap} from 'rxjs/operators'; +import {EMPTY, forkJoin, Observable, Subscription} from 'rxjs'; +import {PatternRelationDescriptorService} from '../service/pattern-relation-descriptor.service'; +import {DirectedEdgeModel} from '../model/hal/directed-edge.model'; +import {Embedded} from '../model/hal/embedded'; +import {DirectedEdesResponse} from '../model/hal/directed-edes-response.interface'; +import {UndirectedEdgesResponse} from '../model/hal/undirected-edes-response.interface'; +import {UndirectedEdgeModel} from '../model/hal/undirected-edge.model'; +import {globals} from '../../globals'; +import {UriConverter} from '../util/uri-converter'; +import {EditUrlDialogComponent} from '../component/edit-url-dialog/edit-url-dialog.component'; @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 { 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 { 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) { @@ -196,34 +196,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(() => { @@ -236,7 +223,7 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy private showAndHandleLinkDialog() { const dialogRef = this.dialog.open(CreatePatternRelationComponent, - { data: { firstPattern: this.pattern, patterns: this.patterns } } + {data: {firstPattern: this.pattern, patterns: this.patterns}} ); const dialogSubscription = dialogRef.afterClosed().pipe( switchMap((edge) => { @@ -263,7 +250,7 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy editIcon() { const dialogRef = this.dialog.open(EditUrlDialogComponent, { width: '50%', - data: { pattern: this.pattern, icon: this.pattern.iconUrl, name: this.pattern.name } + data: {pattern: this.pattern, icon: this.pattern.iconUrl, name: this.pattern.name} }); dialogRef.afterClosed().subscribe(result => { if (result !== undefined) { @@ -273,4 +260,11 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy } }); } + + private getPatternObservable(): Observable { + return UriConverter.isUUID(this.patternId) ? + this.patternService.getPatternById(this.patternLanguage, this.patternId) : + this.patternService.getPatternByEncodedUri(this.patternId).pipe( + tap(pattern => this.pattern = pattern)); + } } diff --git a/src/app/core/util/uri-converter.ts b/src/app/core/util/uri-converter.ts index 2927a7b1..aa44b020 100644 --- a/src/app/core/util/uri-converter.ts +++ b/src/app/core/util/uri-converter.ts @@ -52,7 +52,7 @@ export class UriConverter { } // this function checks if a given urlParam is a UUID (otherwise the entity is specified via its URI) - static isUUID(urlParam) { + static isUUID(urlParam): boolean { const s = '' + urlParam; const match = s.match('^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$'); From c82405441a9e8f322e88c5f42904f61de679c82c Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Wed, 24 Mar 2021 16:01:01 +0100 Subject: [PATCH 03/18] load pattern language by either ID or URI when creating a pattern --- .../create-pattern/create-pattern.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts index c33e5994..86a1acae 100644 --- a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts +++ b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts @@ -104,7 +104,10 @@ export class CreatePatternComponent implements OnInit { this.markdown = new MarkdownIt(); this.markdown.use(markdownitKatex); - this.patternLanguageService.getPatternLanguageById(this.patternLanguageId).subscribe((pl: PatternLanguage) => { + const patternLanguageObservable = UriConverter.isUUID(this.patternLanguageId) ? + this.patternLanguageService.getPatternLanguageById(this.patternLanguageId) + : this.patternLanguageService.getPatternLanguageByEncodedUri(this.patternLanguageId); + patternLanguageObservable.subscribe((pl) => { this.patternLanguage = pl; this.sections = this.patternLanguage.patternSchema ? this.patternLanguage.patternSchema.patternSectionSchemas.map((schema: PatternSectionSchema) => schema.label) : []; From 058f4a39129a8662b1bbbb740f5a8f1b6e816358 Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Thu, 25 Mar 2021 13:07:03 +0100 Subject: [PATCH 04/18] use id instead of URI for navigation --- .../cardrenderer/card-renderer.component.ts | 2 +- .../default-pl-renderer.component.ts | 9 +-- .../create-pattern.component.ts | 62 ++++++++++--------- 3 files changed, 38 insertions(+), 35 deletions(-) diff --git a/src/app/core/component/cardrenderer/card-renderer.component.ts b/src/app/core/component/cardrenderer/card-renderer.component.ts index 60ef9e88..d4409ff0 100644 --- a/src/app/core/component/cardrenderer/card-renderer.component.ts +++ b/src/app/core/component/cardrenderer/card-renderer.component.ts @@ -30,7 +30,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}); }); } diff --git a/src/app/core/default-pl-renderer/default-pl-renderer.component.ts b/src/app/core/default-pl-renderer/default-pl-renderer.component.ts index a8a0d149..c1db85cb 100644 --- a/src/app/core/default-pl-renderer/default-pl-renderer.component.ts +++ b/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( @@ -303,9 +304,9 @@ export class DefaultPlRendererComponent implements OnInit, OnDestroy { ); } const loadDataSubscrition = loadDataObservable.subscribe(() => { - this.isLoadingLinkData = false; - this.detectChanges(); - }); + this.isLoadingLinkData = false; + this.detectChanges(); + }); this.subscriptions.add(loadDataSubscrition); } diff --git a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts index 86a1acae..fbeea9e3 100644 --- a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts +++ b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts @@ -1,21 +1,20 @@ -import { ChangeDetectorRef, Component, NgZone, OnInit, ViewChild } from '@angular/core'; -import { TdTextEditorComponent } from '@covalent/text-editor'; -import { ActivatedRoute, Router } from '@angular/router'; +import {ChangeDetectorRef, Component, NgZone, OnInit, ViewChild} from '@angular/core'; +import {TdTextEditorComponent} from '@covalent/text-editor'; +import {ActivatedRoute, Router} from '@angular/router'; import * as marked from 'marked'; -import { TokensList } from 'marked'; -import Pattern from '../../core/model/pattern.model'; -import { ToasterService } from 'angular2-toaster'; -import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms'; -import { ValidationService } from '../../core/service/validation.service'; -import { PatternLanguageService } from '../../core/service/pattern-language.service'; +import {TokensList} from 'marked'; +import {ToasterService} from 'angular2-toaster'; +import {AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators} from '@angular/forms'; +import {ValidationService} from '../../core/service/validation.service'; +import {PatternLanguageService} from '../../core/service/pattern-language.service'; import PatternLanguage from '../../core/model/hal/pattern-language.model'; import PatternSectionSchema from '../../core/model/hal/pattern-section-schema.model'; import * as MarkdownIt from 'markdown-it'; import * as markdownitKatex from 'markdown-it-katex'; -import { PatternService } from '../../core/service/pattern.service'; -import { debounceTime, distinctUntilChanged } from 'rxjs/internal/operators'; -import { globals } from '../../globals'; -import { UriConverter } from '../../core/util/uri-converter'; +import {PatternService} from '../../core/service/pattern.service'; +import {debounceTime, distinctUntilChanged, tap} from 'rxjs/internal/operators'; +import {globals} from '../../globals'; +import {UriConverter} from '../../core/util/uri-converter'; import {SelectPatternDialogComponent} from '../../core/component/select-pattern-dialog/select-pattern-dialog.component'; import {MatDialog} from '@angular/material/dialog'; import {of} from 'rxjs'; @@ -109,6 +108,7 @@ export class CreatePatternComponent implements OnInit { : this.patternLanguageService.getPatternLanguageByEncodedUri(this.patternLanguageId); patternLanguageObservable.subscribe((pl) => { this.patternLanguage = pl; + console.log(this.patternLanguage) this.sections = this.patternLanguage.patternSchema ? this.patternLanguage.patternSchema.patternSectionSchemas.map((schema: PatternSectionSchema) => schema.label) : []; this.initTextEditor(); @@ -186,7 +186,7 @@ export class CreatePatternComponent implements OnInit { () => { this.toastService.pop('success', 'Pattern successfully created'); this.zone.run(() => { - this.router.navigate(['..'], { relativeTo: this.activatedRoute }); + this.router.navigate(['..'], {relativeTo: this.activatedRoute}); }); }, (error) => this.toastService.pop('error', 'Could not create Pattern', error.message) @@ -195,7 +195,7 @@ export class CreatePatternComponent implements OnInit { } //Format Input text so MAP Patterns can be directly copied into Pattern Atlas - reformatMapPatternInput(text: string){ + reformatMapPatternInput(text: string) { return text.replace(new RegExp('', 'g'), ' ') .replace(new RegExp('\{#sec:.*}', 'g'), ' ') .replace(new RegExp('#{3,}', 'g'), '##'); @@ -234,10 +234,10 @@ export class CreatePatternComponent implements OnInit { } this.errorMessages = []; Object.keys(this.patternValuesFormGroup.controls).forEach(key => { - const controlErrors: ValidationErrors = this.patternValuesFormGroup.controls[ key ].errors; + const controlErrors: ValidationErrors = this.patternValuesFormGroup.controls[key].errors; if (controlErrors != null) { Object.keys(controlErrors).forEach(keyError => { - this.errorMessages.push(ValidationService.getMessageForError(key, keyError, controlErrors[ keyError ])); + this.errorMessages.push(ValidationService.getMessageForError(key, keyError, controlErrors[keyError])); }); } }); @@ -268,7 +268,7 @@ export class CreatePatternComponent implements OnInit { private parsePatternInput(): void { const lines = this.parseMarkdownText(); const patternNameIndex = lines.findIndex((it) => it.type === 'heading' && it.depth === 1); - this.patternName = patternNameIndex !== -1 ? lines[ patternNameIndex ][ 'text' ] : ''; + this.patternName = patternNameIndex !== -1 ? lines[patternNameIndex]['text'] : ''; this.patternLanguage.patternSchema.patternSectionSchemas.forEach((schema: PatternSectionSchema) => { const sectionName = schema.name; const sectionIndex = lines.findIndex((sec) => sec.type === 'heading' && sec.depth === 2 && @@ -276,21 +276,21 @@ export class CreatePatternComponent implements OnInit { if (sectionIndex !== -1) { const sectionContent = []; for (let i = sectionIndex + 1; i < lines.length; i++) { - if (lines[ i ].type === 'heading') { + if (lines[i].type === 'heading') { break; } - if (lines[ i ].type === 'space') { + if (lines[i].type === 'space') { sectionContent.push('\n'); } - if (lines[ i ][ 'text' ]) { + if (lines[i]['text']) { // if a list item was parsed before, add it to the text - sectionContent.push(i > 0 && CreatePatternComponent.isListItem(i, sectionIndex, lines) ? '* ' + lines[ i ][ 'text' ] : lines[ i ][ 'text' ] ); + sectionContent.push(i > 0 && CreatePatternComponent.isListItem(i, sectionIndex, lines) ? '* ' + lines[i]['text'] : lines[i]['text']); } - console.log('sectioncontent:'+sectionContent) + console.log('sectioncontent:' + sectionContent) } if (this.patternValuesFormGroup) { - if (this.patternValuesFormGroup.controls[ sectionName ]) { - this.patternValuesFormGroup.controls[ sectionName ].setValue(sectionContent.join('\n')); + if (this.patternValuesFormGroup.controls[sectionName]) { + this.patternValuesFormGroup.controls[sectionName].setValue(sectionContent.join('\n')); } else { console.log('missing formcontrol:'); console.log(sectionName); @@ -325,11 +325,12 @@ export class CreatePatternComponent implements OnInit { // get patterns to select from let patternsObservable = !this.patterns ? this.patternService.getPatternsByUrl(this.patternLanguage._links.patterns.href) : of(this.patterns); - patternsObservable.pipe(tap((res) => { - this.patterns = res; - // let the user choose which pattern to reference - this.showAndHandlePatternSelectionDialog(this.patterns, editor); - })).subscribe((res) => { + patternsObservable.pipe( + tap((res) => { + this.patterns = res; + // let the user choose which pattern to reference + this.showAndHandlePatternSelectionDialog(this.patterns, editor); + })).subscribe((res) => { console.log('show dialog for pattern selection') }); } @@ -345,6 +346,7 @@ export class CreatePatternComponent implements OnInit { const patternReferenceUrl = `pattern-languages/${this.patternLanguage.id}/${selectedPattern.id}`; if (selectedPattern) { // if user did not cancel this.insertTextAtCursor(editor, `[${selectedPattern.name}](${patternReferenceUrl})`, ''); + this.onChangeMarkdownText(); } }); } From 9c6c619ae299eb4f25358d7dbeffcd0c744919d4 Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Thu, 25 Mar 2021 13:18:20 +0100 Subject: [PATCH 05/18] refactoring --- .../create-pattern/create-pattern.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts index fbeea9e3..e75c8a1e 100644 --- a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts +++ b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts @@ -108,7 +108,6 @@ export class CreatePatternComponent implements OnInit { : this.patternLanguageService.getPatternLanguageByEncodedUri(this.patternLanguageId); patternLanguageObservable.subscribe((pl) => { this.patternLanguage = pl; - console.log(this.patternLanguage) this.sections = this.patternLanguage.patternSchema ? this.patternLanguage.patternSchema.patternSectionSchemas.map((schema: PatternSectionSchema) => schema.label) : []; this.initTextEditor(); @@ -125,6 +124,8 @@ export class CreatePatternComponent implements OnInit { }); } + // this method is based on the private function _replaceSelection(cm, active, startEnd, url) + // of simpleMDE (see simplemde.debug.js) which our markdowneditor is based on insertTextAtCursor(editor: any, textBeforeCursor, textAfterCursor): void { var cm = editor.codemirror; var stat = editor.getState(cm); From 658a484a7e7e39842705d887c51ad7983072dc68 Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Thu, 25 Mar 2021 13:46:46 +0100 Subject: [PATCH 06/18] refactoring: move markdowneditor logic to its own class --- src/app/core/util/markdown-editor-utils.ts | 72 +++++++++++++++++++ .../create-pattern.component.ts | 59 ++------------- 2 files changed, 77 insertions(+), 54 deletions(-) create mode 100644 src/app/core/util/markdown-editor-utils.ts diff --git a/src/app/core/util/markdown-editor-utils.ts b/src/app/core/util/markdown-editor-utils.ts new file mode 100644 index 00000000..f9de536f --- /dev/null +++ b/src/app/core/util/markdown-editor-utils.ts @@ -0,0 +1,72 @@ +/* + * Copyright (c) 2018 University of Stuttgart. + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0 + * which is available at https://www.apache.org/licenses/LICENSE-2.0. + * + * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0 + */ + + +export class MarkdownEditorUtils { + + public static standardMarkdownEditiorButtons = ['bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', + '|', // Separator + 'link', 'image', + '|', // Separator + 'code'] + + public static helpButton = { + name: 'guide', + action: 'https://pattern-atlas-readthedocs.readthedocs.io/en/latest/user_guide/patterns/#pattern-creation', + className: 'fa fa-question-circle', + }; + + // this method is based on the private function _replaceSelection(cm, active, startEnd, url) + // of simpleMDE (see simplemde.debug.js) which our markdowneditor is based on + public static insertTextAtCursor(editor: any, textBeforeCursor, textAfterCursor): void { + var cm = editor.codemirror; + var stat = editor.getState(cm); + var options = editor.options; + var url = 'http://'; + if (options.promptURLs) { + url = prompt(options.promptTexts.image); + if (!url) { + return; + } + } + var text; + var start = textBeforeCursor; // text to insert before cursor + var end = textAfterCursor; // text to insert after cursor + var startPoint = cm.getCursor('start'); + var endPoint = cm.getCursor('end'); + if (url) { + end = end.replace('#url#', url); + } + if (stat.link) { + text = cm.getLine(startPoint.line); + start = text.slice(0, startPoint.ch); + end = text.slice(startPoint.ch); + cm.replaceRange(start + end, { + line: startPoint.line, + ch: 0 + }); + } else { + text = cm.getSelection(); + cm.replaceSelection(start + text + end); + + startPoint.ch += start.length; + if (startPoint !== endPoint) { + endPoint.ch += start.length; + } + } + cm.setSelection(startPoint, endPoint); + cm.focus(); + } + +} diff --git a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts index e75c8a1e..cf49136f 100644 --- a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts +++ b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts @@ -19,6 +19,7 @@ import {SelectPatternDialogComponent} from '../../core/component/select-pattern- import {MatDialog} from '@angular/material/dialog'; import {of} from 'rxjs'; import Pattern from '../../core/model/hal/pattern.model'; +import {MarkdownEditorUtils} from '../../core/util/markdown-editor-utils'; @Component({ @@ -38,15 +39,11 @@ export class CreatePatternComponent implements OnInit { options: any = { autoDownloadFontAwesome: true, toolbar: - ['bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', - '|', // Separator - 'link', 'image', - '|', // Separator - 'code', + [...MarkdownEditorUtils.standardMarkdownEditiorButtons, { name: 'alert', action: (editor) => { - this.insertTextAtCursor(editor, '$', '$'); + MarkdownEditorUtils.insertTextAtCursor(editor, '$', '$'); }, className: 'fa fa-subscript', title: 'Add Formula', @@ -59,11 +56,7 @@ export class CreatePatternComponent implements OnInit { title: 'Reference Pattern', }, '|', // Separator - { - name: 'guide', - action: 'https://pattern-atlas-readthedocs.readthedocs.io/en/latest/user_guide/patterns/#pattern-creation', - className: 'fa fa-question-circle', - }, + MarkdownEditorUtils.helpButton ], }; errorMessages: Array; @@ -124,48 +117,6 @@ export class CreatePatternComponent implements OnInit { }); } - // this method is based on the private function _replaceSelection(cm, active, startEnd, url) - // of simpleMDE (see simplemde.debug.js) which our markdowneditor is based on - insertTextAtCursor(editor: any, textBeforeCursor, textAfterCursor): void { - var cm = editor.codemirror; - var stat = editor.getState(cm); - var options = editor.options; - var url = 'http://'; - if (options.promptURLs) { - url = prompt(options.promptTexts.image); - if (!url) { - return; - } - } - var text; - var start = textBeforeCursor; // text to insert before cursor - var end = textAfterCursor; // text to insert after cursor - var startPoint = cm.getCursor('start'); - var endPoint = cm.getCursor('end'); - if (url) { - end = end.replace('#url#', url); - } - if (stat.link) { - text = cm.getLine(startPoint.line); - start = text.slice(0, startPoint.ch); - end = text.slice(startPoint.ch); - cm.replaceRange(start + end, { - line: startPoint.line, - ch: 0 - }); - } else { - text = cm.getSelection(); - cm.replaceSelection(start + text + end); - - startPoint.ch += start.length; - if (startPoint !== endPoint) { - endPoint.ch += start.length; - } - } - cm.setSelection(startPoint, endPoint); - cm.focus(); - } - save(): void { this.parsePatternInput(); @@ -346,7 +297,7 @@ export class CreatePatternComponent implements OnInit { dialogRef.afterClosed().subscribe((selectedPattern) => { const patternReferenceUrl = `pattern-languages/${this.patternLanguage.id}/${selectedPattern.id}`; if (selectedPattern) { // if user did not cancel - this.insertTextAtCursor(editor, `[${selectedPattern.name}](${patternReferenceUrl})`, ''); + MarkdownEditorUtils.insertTextAtCursor(editor, `[${selectedPattern.name}](${patternReferenceUrl})`, ''); this.onChangeMarkdownText(); } }); From df7c84264339f89e722fe9ef8acaca7f15e380b1 Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Thu, 25 Mar 2021 15:18:56 +0100 Subject: [PATCH 07/18] enable to add href references to pattern when editing a pattern --- ...kdown-pattern-section-content.component.ts | 53 ++++----- .../md-editor/md-editor.component.html | 16 ++- .../md-editor/md-editor.component.ts | 106 ++++++++++++------ .../default-pattern-renderer.component.ts | 1 + src/app/core/service/pattern.service.ts | 7 ++ src/app/core/util/markdown-editor-utils.ts | 6 + 6 files changed, 128 insertions(+), 61 deletions(-) diff --git a/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.ts b/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.ts index 70ed197a..e2222168 100644 --- a/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.ts +++ b/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.ts @@ -1,20 +1,20 @@ -import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, ViewChild } from '@angular/core'; -import { DataChange, DataRenderingComponent } from '../interfaces/DataRenderingComponent.interface'; -import { MatDialog } from '@angular/material/dialog'; -import { DialogData, MdEditorComponent } from '../../md-editor/md-editor.component'; +import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, ViewChild} from '@angular/core'; +import {DataChange, DataRenderingComponent} from '../interfaces/DataRenderingComponent.interface'; +import {MatDialog} from '@angular/material/dialog'; +import {DialogData, MdEditorComponent} from '../../md-editor/md-editor.component'; import * as MarkdownIt from 'markdown-it'; import * as markdownitKatex from 'markdown-it-katex'; -import { ImageService } from '../../../service/image.service'; +import {ImageService} from '../../../service/image.service'; import * as d3 from 'd3'; -import { MatSnackBar } from '@angular/material/snack-bar'; -import { event, Selection } from 'd3-selection'; -import { Point } from '../../../model/svg-objects.interface'; -import { CommentDialogComponent } from '../comment-dialog/comment-dialog.component'; -import { DiscussDialogComponent } from '../discuss-dialog/discuss-dialog.component'; -import { DiscussionTopic } from '../../../model/discussion-topic'; -import { DiscussionService } from '../../../service/discussion.service'; -import { DiscussionComment } from '../../../model/discussion-comment'; -import { ImageModel } from '../../../model/image-model'; +import {MatSnackBar} from '@angular/material/snack-bar'; +import {event, Selection} from 'd3-selection'; +import {Point} from '../../../model/svg-objects.interface'; +import {CommentDialogComponent} from '../comment-dialog/comment-dialog.component'; +import {DiscussDialogComponent} from '../discuss-dialog/discuss-dialog.component'; +import {DiscussionTopic} from '../../../model/discussion-topic'; +import {DiscussionService} from '../../../service/discussion.service'; +import {DiscussionComment} from '../../../model/discussion-comment'; +import {ImageModel} from '../../../model/image-model'; import * as QuantumCircuit from 'quantum-circuit'; @@ -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; @@ -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; @@ -115,7 +116,7 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone this.data = result.content; this.changeText(this.renderedData); } - this.changeContent.emit({ previousValue: previousValue, currentValue: result.content }); + this.changeContent.emit({previousValue: previousValue, currentValue: result.content}); }); } @@ -174,7 +175,7 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone } commentSVG() { - const snackBarInstruction = this.snackBar.open('Mark area to comment in Picture', null, { duration: 3000 }); + const snackBarInstruction = this.snackBar.open('Mark area to comment in Picture', null, {duration: 3000}); this.isCommentingEnabled = true; @@ -182,7 +183,7 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone this.commentSvg = n[i]; const x = event.x; const y = event.y; - const point = { x, y }; + const point = {x, y}; this.svgCommentMouseDownCoordinate = this.getSVGPointFromClientCoordinates(point); }); @@ -190,10 +191,10 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone if (this.isCommentingEnabled === true) { const x = event.x; const y = event.y; - const point = { x, y }; + const point = {x, y}; this.svgCommentMouseUpCoordinate = this.getSVGPointFromClientCoordinates(point); if (this.svgCommentMouseDownCoordinate !== null && this.svgCommentMouseUpCoordinate !== null) { - const startCoordinates = { x, y }; + const startCoordinates = {x, y}; if (this.svgCommentMouseDownCoordinate.x < this.svgCommentMouseUpCoordinate.x) { startCoordinates.x = this.svgCommentMouseDownCoordinate.x; this.svgCommentWidth = this.svgCommentMouseUpCoordinate.x - this.svgCommentMouseDownCoordinate.x; @@ -262,8 +263,8 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone children[i].id = value.body.id; } } - const data = new Blob([d3.select(this.commentSvg).node().outerHTML], { type: 'image/svg+xml' }); - const image = { id, data }; + const data = new Blob([d3.select(this.commentSvg).node().outerHTML], {type: 'image/svg+xml'}); + const image = {id, data}; this.imageService.updateImage(image).subscribe(); }); @@ -296,8 +297,8 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone const topicId = d3.select(nElement).node().id; const imageId = d3.select(nElement).node().parentNode.parentElement.id; d3.select(nElement).remove(); - const data = new Blob([d3.select('[id="' + imageId + '"').node().outerHTML], { type: 'image/svg+xml' }); - const image = { id: imageId, data }; + const data = new Blob([d3.select('[id="' + imageId + '"').node().outerHTML], {type: 'image/svg+xml'}); + const image = {id: imageId, data}; this.imageService.updateImage(image).subscribe(); this.discussionService.deleteTopicById(topicId).subscribe(); } @@ -308,8 +309,8 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone this.discussionService.addComment(discussionComment, topicId).subscribe(value => { d3.select(nElement).append('comment').attr('id', value.body.id).text(result.response); const id = d3.select(nElement).node().parentNode.parentElement.id; - const data = new Blob([d3.select(nElement).node().parentNode.parentElement.outerHTML], { type: 'image/svg+xml' }); - const image = { id, data }; + const data = new Blob([d3.select(nElement).node().parentNode.parentElement.outerHTML], {type: 'image/svg+xml'}); + const image = {id, data}; this.imageService.updateImage(image).subscribe(); }); } diff --git a/src/app/core/component/md-editor/md-editor.component.html b/src/app/core/component/md-editor/md-editor.component.html index 9c57844d..dd6e4b19 100644 --- a/src/app/core/component/md-editor/md-editor.component.html +++ b/src/app/core/component/md-editor/md-editor.component.html @@ -4,8 +4,20 @@

Edit '{{data.label}}'

close -
- +
+ + Pattern + + + {{pattern.name}} + + + + +
- - Pattern - - - {{pattern.name}} - - - - +
+ + Pattern + + + {{pattern.name}} + + + + +
From 7bdbfb72a12b6857bd491110d8a3decd946ddced Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Tue, 25 May 2021 14:24:37 +0200 Subject: [PATCH 12/18] fix lint errors --- .../cardrenderer/card-renderer.component.ts | 32 ++++++------ ...kdown-pattern-section-content.component.ts | 52 +++++++++---------- .../md-editor/md-editor.component.ts | 24 ++++----- .../select-pattern-dialog.component.spec.ts | 4 +- .../select-pattern-dialog.component.ts | 6 +-- src/app/core/core.module.ts | 2 +- .../default-pattern-renderer.component.ts | 44 ++++++++-------- .../pattern-relation-descriptor.service.ts | 2 +- .../design-model-management.component.ts | 6 +-- .../create-pattern.component.ts | 46 ++++++++-------- .../pattern-language-management.component.ts | 21 ++++---- .../pattern-view-management.component.ts | 26 +++++----- .../pattern-view-renderer.component.ts | 6 +-- 13 files changed, 133 insertions(+), 138 deletions(-) diff --git a/src/app/core/component/cardrenderer/card-renderer.component.ts b/src/app/core/component/cardrenderer/card-renderer.component.ts index d4409ff0..3b245582 100644 --- a/src/app/core/component/cardrenderer/card-renderer.component.ts +++ b/src/app/core/component/cardrenderer/card-renderer.component.ts @@ -6,8 +6,8 @@ import Pattern from '../../model/hal/pattern.model'; import { HalLink } from '../../model/hal/hal-link.interface'; import { PatternService } from '../../service/pattern.service'; import { ToasterService } from 'angular2-toaster'; -import { MatDialog } from "@angular/material/dialog"; -import { DeleteConfirmationDialogComponent } from "../delete-confirmation-dialog/delete-confirmation-dialog.component"; +import { MatDialog } from '@angular/material/dialog'; +import { DeleteConfirmationDialogComponent } from '../delete-confirmation-dialog/delete-confirmation-dialog.component'; @Component({ selector: 'pp-card-renderer', @@ -30,7 +30,7 @@ export class CardRendererComponent { navigate(pattern: UriEntity): void { this.zone.run(() => { - this.router.navigate([pattern.id], {relativeTo: this.activatedRoute}); + this.router.navigate([pattern.id], { relativeTo: this.activatedRoute }); }); } @@ -41,19 +41,19 @@ export class CardRendererComponent { } }) .afterClosed().subscribe(dialoganswer => { - if (dialoganswer) { - this.patternService.deletePattern(pattern._links.self.href) - .subscribe( - value => { - this.handlePatternDelete(pattern); - this.toasterService.pop('success', 'Pattern deleted!'); - }, - error => { - this.toasterService.pop('error', 'Could not delete pattern!', "A Pattern can only be deleted if it is not a part of any Pattern Views"); - } - ); - } - }); + if (dialoganswer) { + this.patternService.deletePattern(pattern._links.self.href) + .subscribe( + value => { + this.handlePatternDelete(pattern); + this.toasterService.pop('success', 'Pattern deleted!'); + }, + error => { + this.toasterService.pop('error', 'Could not delete pattern!', 'A Pattern can only be deleted if it is not a part of any Pattern Views'); + } + ); + } + }); } diff --git a/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.ts b/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.ts index e2222168..13f0e0f8 100644 --- a/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.ts +++ b/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.ts @@ -1,20 +1,20 @@ -import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, ViewChild} from '@angular/core'; -import {DataChange, DataRenderingComponent} from '../interfaces/DataRenderingComponent.interface'; -import {MatDialog} from '@angular/material/dialog'; -import {DialogData, MdEditorComponent} from '../../md-editor/md-editor.component'; +import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, ViewChild } from '@angular/core'; +import { DataChange, DataRenderingComponent } from '../interfaces/DataRenderingComponent.interface'; +import { MatDialog } from '@angular/material/dialog'; +import { DialogData, MdEditorComponent } from '../../md-editor/md-editor.component'; import * as MarkdownIt from 'markdown-it'; import * as markdownitKatex from 'markdown-it-katex'; -import {ImageService} from '../../../service/image.service'; +import { ImageService } from '../../../service/image.service'; import * as d3 from 'd3'; -import {MatSnackBar} from '@angular/material/snack-bar'; -import {event, Selection} from 'd3-selection'; -import {Point} from '../../../model/svg-objects.interface'; -import {CommentDialogComponent} from '../comment-dialog/comment-dialog.component'; -import {DiscussDialogComponent} from '../discuss-dialog/discuss-dialog.component'; -import {DiscussionTopic} from '../../../model/discussion-topic'; -import {DiscussionService} from '../../../service/discussion.service'; -import {DiscussionComment} from '../../../model/discussion-comment'; -import {ImageModel} from '../../../model/image-model'; +import { MatSnackBar } from '@angular/material/snack-bar'; +import { event, Selection } from 'd3-selection'; +import { Point } from '../../../model/svg-objects.interface'; +import { CommentDialogComponent } from '../comment-dialog/comment-dialog.component'; +import { DiscussDialogComponent } from '../discuss-dialog/discuss-dialog.component'; +import { DiscussionTopic } from '../../../model/discussion-topic'; +import { DiscussionService } from '../../../service/discussion.service'; +import { DiscussionComment } from '../../../model/discussion-comment'; +import { ImageModel } from '../../../model/image-model'; import * as QuantumCircuit from 'quantum-circuit'; @@ -108,7 +108,7 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone openEditor(): void { const dialogRef = this.dialog.open(MdEditorComponent, - {data: {content: this.data, field: this.title, patternLanguageId: this.patternLanguageId}}); + { data: { content: this.data, field: this.title, patternLanguageId: this.patternLanguageId } }); dialogRef.afterClosed().subscribe(async (result: DialogData) => { const previousValue = this.data; @@ -116,7 +116,7 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone this.data = result.content; this.changeText(this.renderedData); } - this.changeContent.emit({previousValue: previousValue, currentValue: result.content}); + this.changeContent.emit({ previousValue: previousValue, currentValue: result.content }); }); } @@ -175,7 +175,7 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone } commentSVG() { - const snackBarInstruction = this.snackBar.open('Mark area to comment in Picture', null, {duration: 3000}); + const snackBarInstruction = this.snackBar.open('Mark area to comment in Picture', null, { duration: 3000 }); this.isCommentingEnabled = true; @@ -183,7 +183,7 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone this.commentSvg = n[i]; const x = event.x; const y = event.y; - const point = {x, y}; + const point = { x, y }; this.svgCommentMouseDownCoordinate = this.getSVGPointFromClientCoordinates(point); }); @@ -191,10 +191,10 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone if (this.isCommentingEnabled === true) { const x = event.x; const y = event.y; - const point = {x, y}; + const point = { x, y }; this.svgCommentMouseUpCoordinate = this.getSVGPointFromClientCoordinates(point); if (this.svgCommentMouseDownCoordinate !== null && this.svgCommentMouseUpCoordinate !== null) { - const startCoordinates = {x, y}; + const startCoordinates = { x, y }; if (this.svgCommentMouseDownCoordinate.x < this.svgCommentMouseUpCoordinate.x) { startCoordinates.x = this.svgCommentMouseDownCoordinate.x; this.svgCommentWidth = this.svgCommentMouseUpCoordinate.x - this.svgCommentMouseDownCoordinate.x; @@ -263,8 +263,8 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone children[i].id = value.body.id; } } - const data = new Blob([d3.select(this.commentSvg).node().outerHTML], {type: 'image/svg+xml'}); - const image = {id, data}; + const data = new Blob([d3.select(this.commentSvg).node().outerHTML], { type: 'image/svg+xml' }); + const image = { id, data }; this.imageService.updateImage(image).subscribe(); }); @@ -297,8 +297,8 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone const topicId = d3.select(nElement).node().id; const imageId = d3.select(nElement).node().parentNode.parentElement.id; d3.select(nElement).remove(); - const data = new Blob([d3.select('[id="' + imageId + '"').node().outerHTML], {type: 'image/svg+xml'}); - const image = {id: imageId, data}; + const data = new Blob([d3.select('[id="' + imageId + '"').node().outerHTML], { type: 'image/svg+xml' }); + const image = { id: imageId, data }; this.imageService.updateImage(image).subscribe(); this.discussionService.deleteTopicById(topicId).subscribe(); } @@ -309,8 +309,8 @@ export class MarkdownPatternSectionContentComponent extends DataRenderingCompone this.discussionService.addComment(discussionComment, topicId).subscribe(value => { d3.select(nElement).append('comment').attr('id', value.body.id).text(result.response); const id = d3.select(nElement).node().parentNode.parentElement.id; - const data = new Blob([d3.select(nElement).node().parentNode.parentElement.outerHTML], {type: 'image/svg+xml'}); - const image = {id, data}; + const data = new Blob([d3.select(nElement).node().parentNode.parentElement.outerHTML], { type: 'image/svg+xml' }); + const image = { id, data }; this.imageService.updateImage(image).subscribe(); }); } diff --git a/src/app/core/component/md-editor/md-editor.component.ts b/src/app/core/component/md-editor/md-editor.component.ts index 19ce94aa..c9d5ff9f 100644 --- a/src/app/core/component/md-editor/md-editor.component.ts +++ b/src/app/core/component/md-editor/md-editor.component.ts @@ -1,10 +1,10 @@ -import {Component, Inject, 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 { 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'; +import { PatternService } from '../../service/pattern.service'; +import { FormBuilder, FormGroup } from '@angular/forms'; export class DialogData { @@ -19,14 +19,13 @@ export class DialogData { 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; patterns: Array; selectedPatternForm: FormGroup; - constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: DialogData, private patternService: PatternService, private _fb: FormBuilder) { @@ -36,12 +35,12 @@ export class MdEditorComponent { 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}); + 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}); + this.dialogRef.close({ field: this.data.field, content: this.intialContent }); } }); } @@ -72,18 +71,17 @@ export class MdEditorComponent { } close(): void { - this.dialogRef.close({field: this.data.field, content: this.intialContent}); + this.dialogRef.close({ field: this.data.field, content: this.intialContent }); } saveChanges(): void { - this.dialogRef.close({field: this.data.field, content: this._textEditor.value}); + 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), ''); diff --git a/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts index 2a374f01..796ccd99 100644 --- a/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts +++ b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts @@ -1,6 +1,6 @@ -import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import {SelectPatternDialogComponent} from './select-pattern-dialog.component'; +import { SelectPatternDialogComponent } from './select-pattern-dialog.component'; describe('SelectPatternDialogComponent', () => { let component: SelectPatternDialogComponent; diff --git a/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.ts b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.ts index a6cad716..b616053f 100644 --- a/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.ts +++ b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.ts @@ -1,6 +1,6 @@ -import {Component, Inject, OnInit} from '@angular/core'; -import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; -import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +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', diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 974f8a14..904fb9a8 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -77,7 +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 { 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'; diff --git a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts index e1b60db6..fad35bda 100644 --- a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts +++ b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts @@ -6,29 +6,29 @@ import { OnDestroy, ViewChild } from '@angular/core'; -import {ActivatedRoute, Router} from '@angular/router'; -import {ToasterService} from 'angular2-toaster'; -import {PatternPropertyDirective} from '../component/markdown-content-container/pattern-property.directive'; -import {MatDialog} from '@angular/material/dialog'; -import {CreatePatternRelationComponent} from '../component/create-pattern-relation/create-pattern-relation.component'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ToasterService } from 'angular2-toaster'; +import { PatternPropertyDirective } from '../component/markdown-content-container/pattern-property.directive'; +import { MatDialog } from '@angular/material/dialog'; +import { CreatePatternRelationComponent } from '../component/create-pattern-relation/create-pattern-relation.component'; import Pattern from '../model/hal/pattern.model'; -import {PatternLanguageService} from '../service/pattern-language.service'; +import { PatternLanguageService } from '../service/pattern-language.service'; import PatternLanguage from '../model/hal/pattern-language.model'; -import {PatternService} from '../service/pattern.service'; -import {MarkdownPatternSectionContentComponent} from '../component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component'; // eslint-disable-line max-len -import {DataChange} from '../component/markdown-content-container/interfaces/DataRenderingComponent.interface'; +import { PatternService } from '../service/pattern.service'; +import { MarkdownPatternSectionContentComponent } from '../component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component'; // eslint-disable-line max-len +import { DataChange } from '../component/markdown-content-container/interfaces/DataRenderingComponent.interface'; import PatternSectionSchema from '../model/hal/pattern-section-schema.model'; -import {map, switchMap, tap} from 'rxjs/operators'; -import {EMPTY, forkJoin, Observable, Subscription} from 'rxjs'; -import {PatternRelationDescriptorService} from '../service/pattern-relation-descriptor.service'; -import {DirectedEdgeModel} from '../model/hal/directed-edge.model'; -import {Embedded} from '../model/hal/embedded'; -import {DirectedEdesResponse} from '../model/hal/directed-edes-response.interface'; -import {UndirectedEdgesResponse} from '../model/hal/undirected-edes-response.interface'; -import {UndirectedEdgeModel} from '../model/hal/undirected-edge.model'; -import {globals} from '../../globals'; -import {UriConverter} from '../util/uri-converter'; -import {EditUrlDialogComponent} from '../component/edit-url-dialog/edit-url-dialog.component'; +import { map, switchMap, tap } from 'rxjs/operators'; +import { EMPTY, forkJoin, Observable, Subscription } from 'rxjs'; +import { PatternRelationDescriptorService } from '../service/pattern-relation-descriptor.service'; +import { DirectedEdgeModel } from '../model/hal/directed-edge.model'; +import { Embedded } from '../model/hal/embedded'; +import { DirectedEdesResponse } from '../model/hal/directed-edes-response.interface'; +import { UndirectedEdgesResponse } from '../model/hal/undirected-edes-response.interface'; +import { UndirectedEdgeModel } from '../model/hal/undirected-edge.model'; +import { globals } from '../../globals'; +import { UriConverter } from '../util/uri-converter'; +import { EditUrlDialogComponent } from '../component/edit-url-dialog/edit-url-dialog.component'; @Component({ selector: 'pp-default-pattern-renderer', @@ -224,7 +224,7 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy private showAndHandleLinkDialog() { const dialogRef = this.dialog.open(CreatePatternRelationComponent, - {data: {firstPattern: this.pattern, patterns: this.patterns}} + { data: { firstPattern: this.pattern, patterns: this.patterns } } ); const dialogSubscription = dialogRef.afterClosed().pipe( switchMap((edge) => { @@ -251,7 +251,7 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy editIcon() { const dialogRef = this.dialog.open(EditUrlDialogComponent, { width: '50%', - data: {pattern: this.pattern, icon: this.pattern.iconUrl, name: this.pattern.name} + data: { pattern: this.pattern, icon: this.pattern.iconUrl, name: this.pattern.name } }); dialogRef.afterClosed().subscribe(result => { if (result !== undefined) { diff --git a/src/app/core/service/pattern-relation-descriptor.service.ts b/src/app/core/service/pattern-relation-descriptor.service.ts index 3780f39d..0efc7518 100644 --- a/src/app/core/service/pattern-relation-descriptor.service.ts +++ b/src/app/core/service/pattern-relation-descriptor.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { HttpClient} from '@angular/common/http'; +import { HttpClient } from '@angular/common/http'; import { forkJoin, Observable, of } from 'rxjs'; import { DirectedEdgeModel } from '../model/hal/directed-edge.model'; import { UndirectedEdgeModel } from '../model/hal/undirected-edge.model'; diff --git a/src/app/design-model-module/component/design-model-management/design-model-management.component.ts b/src/app/design-model-module/component/design-model-management/design-model-management.component.ts index 186bbd89..cd9f22a2 100644 --- a/src/app/design-model-module/component/design-model-management/design-model-management.component.ts +++ b/src/app/design-model-module/component/design-model-management/design-model-management.component.ts @@ -12,9 +12,9 @@ import { ToasterService } from 'angular2-toaster'; import { Observable } from 'rxjs'; import { DesignModelService } from '../../service/design-model.service'; import { DesignModelResponse } from '../../model/hal/design-model-response'; -import { ActivatedRoute, Router } from "@angular/router"; -import { DesignModel } from "../../model/hal/design-model"; -import { DeleteConfirmationDialogComponent } from "../../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component"; +import { ActivatedRoute, Router } from '@angular/router'; +import { DesignModel } from '../../model/hal/design-model'; +import { DeleteConfirmationDialogComponent } from '../../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component'; @Component({ diff --git a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts index cf49136f..ce4d82b2 100644 --- a/src/app/pattern-language-management/create-pattern/create-pattern.component.ts +++ b/src/app/pattern-language-management/create-pattern/create-pattern.component.ts @@ -1,25 +1,25 @@ -import {ChangeDetectorRef, Component, NgZone, OnInit, ViewChild} from '@angular/core'; -import {TdTextEditorComponent} from '@covalent/text-editor'; -import {ActivatedRoute, Router} from '@angular/router'; +import { ChangeDetectorRef, Component, NgZone, OnInit, ViewChild } from '@angular/core'; +import { TdTextEditorComponent } from '@covalent/text-editor'; +import { ActivatedRoute, Router } from '@angular/router'; import * as marked from 'marked'; -import {TokensList} from 'marked'; -import {ToasterService} from 'angular2-toaster'; -import {AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators} from '@angular/forms'; -import {ValidationService} from '../../core/service/validation.service'; -import {PatternLanguageService} from '../../core/service/pattern-language.service'; +import { TokensList } from 'marked'; +import { ToasterService } from 'angular2-toaster'; +import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms'; +import { ValidationService } from '../../core/service/validation.service'; +import { PatternLanguageService } from '../../core/service/pattern-language.service'; import PatternLanguage from '../../core/model/hal/pattern-language.model'; import PatternSectionSchema from '../../core/model/hal/pattern-section-schema.model'; import * as MarkdownIt from 'markdown-it'; import * as markdownitKatex from 'markdown-it-katex'; -import {PatternService} from '../../core/service/pattern.service'; -import {debounceTime, distinctUntilChanged, tap} from 'rxjs/internal/operators'; -import {globals} from '../../globals'; -import {UriConverter} from '../../core/util/uri-converter'; -import {SelectPatternDialogComponent} from '../../core/component/select-pattern-dialog/select-pattern-dialog.component'; -import {MatDialog} from '@angular/material/dialog'; -import {of} from 'rxjs'; +import { PatternService } from '../../core/service/pattern.service'; +import { debounceTime, distinctUntilChanged, tap } from 'rxjs/internal/operators'; +import { globals } from '../../globals'; +import { UriConverter } from '../../core/util/uri-converter'; +import { SelectPatternDialogComponent } from '../../core/component/select-pattern-dialog/select-pattern-dialog.component'; +import { MatDialog } from '@angular/material/dialog'; +import { of } from 'rxjs'; import Pattern from '../../core/model/hal/pattern.model'; -import {MarkdownEditorUtils} from '../../core/util/markdown-editor-utils'; +import { MarkdownEditorUtils } from '../../core/util/markdown-editor-utils'; @Component({ @@ -48,13 +48,13 @@ export class CreatePatternComponent implements OnInit { className: 'fa fa-subscript', title: 'Add Formula', }, { - name: 'pattern-link', - action: (editor) => { - this.addPatternReference(editor); + name: 'pattern-link', + action: (editor) => { + this.addPatternReference(editor); + }, + className: 'fa fab fa-product-hunt', + title: 'Reference Pattern', }, - className: 'fa fab fa-product-hunt', - title: 'Reference Pattern', - }, '|', // Separator MarkdownEditorUtils.helpButton ], @@ -138,7 +138,7 @@ export class CreatePatternComponent implements OnInit { () => { this.toastService.pop('success', 'Pattern successfully created'); this.zone.run(() => { - this.router.navigate(['..'], {relativeTo: this.activatedRoute}); + this.router.navigate(['..'], { relativeTo: this.activatedRoute }); }); }, (error) => this.toastService.pop('error', 'Could not create Pattern', error.message) diff --git a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts index 5b0c0d25..2c948c30 100644 --- a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts +++ b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts @@ -20,14 +20,12 @@ import { CookieService } from 'ngx-cookie-service'; import { ToasterService } from 'angular2-toaster'; import { PatternLanguageService } from '../../core/service/pattern-language.service'; import { - CreateEditComponentDialogType, - CreateEditPatternLanguageComponent + CreateEditComponentDialogType, CreateEditPatternLanguageComponent } from '../../core/component/create-edit-pattern-language/create-edit-pattern-language.component'; import { DialogPatternLanguageResult } from '../data/DialogPatternLanguageResult.interface'; import { map } from 'rxjs/operators'; import PatternLanguageModel from '../../core/model/hal/pattern-language-model.model'; -import UriEntity from '../../core/model/hal/uri-entity.model'; -import { DeleteConfirmationDialogComponent } from "../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component"; +import { DeleteConfirmationDialogComponent } from '../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component'; @Component({ selector: 'pp-pattern-language-management', @@ -35,7 +33,6 @@ import { DeleteConfirmationDialogComponent } from "../../core/component/delete-c styleUrls: ['./pattern-language-management.component.scss'] }) - export class PatternLanguageManagementComponent implements OnInit { patternLanguages: Array; @@ -115,15 +112,15 @@ export class PatternLanguageManagementComponent implements OnInit { name: patternLanguage.name, } }).afterClosed().subscribe(dialogAnswer => { - if(dialogAnswer){ - this.patternLanguageService.deletePatternLanguage(patternLanguage.id).subscribe((response) =>{ - this.patternLanguages.splice(this.patternLanguages.indexOf(patternLanguage),1); - this._toasterService.pop('success', 'Pattern Language deleted!'); - },(error) => { - this._toasterService.pop('error', 'Pattern Language could not be deleted!', 'A Pattern Language can only be deleted if it does not contain any patterns.'); + if (dialogAnswer) { + this.patternLanguageService.deletePatternLanguage(patternLanguage.id).subscribe((response) => { + this.patternLanguages.splice(this.patternLanguages.indexOf(patternLanguage), 1); + this._toasterService.pop('success', 'Pattern Language deleted!'); + }, (error) => { + this._toasterService.pop('error', 'Pattern Language could not be deleted!', + 'A Pattern Language can only be deleted if it does not contain any patterns.'); }); - } }) diff --git a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.ts b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.ts index 8f9e1a14..dbb8e9c4 100644 --- a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.ts +++ b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.ts @@ -16,7 +16,7 @@ import { ToasterService } from 'angular2-toaster'; import { UriConverter } from '../../core/util/uri-converter'; import UriEntity from '../../core/model/hal/uri-entity.model'; import { ActivatedRoute, Router } from '@angular/router'; -import { DeleteConfirmationDialogComponent } from "../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component"; +import { DeleteConfirmationDialogComponent } from '../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component'; @Component({ selector: 'pp-solution-language-management', @@ -78,18 +78,18 @@ export class PatternViewManagementComponent implements OnInit { name: patternView.name, } }).afterClosed().subscribe(dialogAnswer => { - if (dialogAnswer) { - this.patternViewService.deletePatternView(patternView).subscribe((response) => { - for (let i = 0; i < this.patternViewResponse._embedded.patternViews.length; i++) { - this.patternViewResponse._embedded.patternViews[i].id === patternView.id ? this.patternViewResponse._embedded.patternViews.splice(i, 1) : null; - } - this.toastService.pop('success', 'Pattern View deleted!'); - }, - (error) => { - this.toastService.pop('error', 'Pattern View could not be deleted!'); - } - ); + if (dialogAnswer) { + this.patternViewService.deletePatternView(patternView).subscribe((response) => { + for (let i = 0; i < this.patternViewResponse._embedded.patternViews.length; i++) { + this.patternViewResponse._embedded.patternViews[i].id === patternView.id ? this.patternViewResponse._embedded.patternViews.splice(i, 1) : null; + } + this.toastService.pop('success', 'Pattern View deleted!'); + }, + (error) => { + this.toastService.pop('error', 'Pattern View could not be deleted!'); } - }) + ); + } + }) } } diff --git a/src/app/pattern-view-management/pattern-view-renderer/pattern-view-renderer.component.ts b/src/app/pattern-view-management/pattern-view-renderer/pattern-view-renderer.component.ts index dcd006c7..9db4d9b5 100644 --- a/src/app/pattern-view-management/pattern-view-renderer/pattern-view-renderer.component.ts +++ b/src/app/pattern-view-management/pattern-view-renderer/pattern-view-renderer.component.ts @@ -179,7 +179,7 @@ export class PatternViewRendererComponent implements OnInit, AfterViewInit { showIngoingEdges(ingoingEdges: HalLink[]) { if (ingoingEdges) { const dialogRef = this.matDialog.open(DeletePatternRelationComponent, { - data: { edges: ingoingEdges, type: 'ingoing'}, + data: { edges: ingoingEdges, type: 'ingoing' }, width: '600px', panelClass: 'delete-relation-dialog' }); @@ -197,7 +197,7 @@ export class PatternViewRendererComponent implements OnInit, AfterViewInit { showOutgoingEdges(outgoingEdges: HalLink[]) { if (outgoingEdges) { const dialogRef = this.matDialog.open(DeletePatternRelationComponent, { - data: { edges: outgoingEdges, type: 'outgoing'}, + data: { edges: outgoingEdges, type: 'outgoing' }, width: '600px', panelClass: 'delete-relation-dialog' }); @@ -425,7 +425,7 @@ export class PatternViewRendererComponent implements OnInit, AfterViewInit { getIndexOfHref(halLinkArray: HalLink[], href: string): number{ let index = -1; for (let i = 0; i < halLinkArray.length; i++ ){ - halLinkArray[i].href === href ? index = i : null; + halLinkArray[i].href === href ? index = i : null; } return index; } From fe11111f680029120b4c2f4ec1b282ade7811411 Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Tue, 25 May 2021 16:58:49 +0200 Subject: [PATCH 13/18] remove unused tests --- ...lete-confirmation-dialog.component.spec.ts | 25 ------------------- .../select-pattern-dialog.component.spec.ts | 25 ------------------- 2 files changed, 50 deletions(-) delete mode 100644 src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.spec.ts delete mode 100644 src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts diff --git a/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.spec.ts b/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.spec.ts deleted file mode 100644 index 10f6909f..00000000 --- a/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DeleteConfirmationDialogComponent } from './delete-confirmation-dialog.component'; - -describe('DeleteConfirmationDialogComponent', () => { - let component: DeleteConfirmationDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ DeleteConfirmationDialogComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DeleteConfirmationDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts b/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts deleted file mode 100644 index 796ccd99..00000000 --- a/src/app/core/component/select-pattern-dialog/select-pattern-dialog.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SelectPatternDialogComponent } from './select-pattern-dialog.component'; - -describe('SelectPatternDialogComponent', () => { - let component: SelectPatternDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [SelectPatternDialogComponent] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(SelectPatternDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); From 62e0adf6debaead293d3878aa7ba145d35475048 Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Tue, 25 May 2021 17:10:05 +0200 Subject: [PATCH 14/18] remove unused test --- .../edit-url-dialog.component.spec.ts | 25 ------------------- 1 file changed, 25 deletions(-) delete mode 100644 src/app/core/component/edit-url-dialog/edit-url-dialog.component.spec.ts diff --git a/src/app/core/component/edit-url-dialog/edit-url-dialog.component.spec.ts b/src/app/core/component/edit-url-dialog/edit-url-dialog.component.spec.ts deleted file mode 100644 index a3cfb508..00000000 --- a/src/app/core/component/edit-url-dialog/edit-url-dialog.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { EditUrlDialogComponent } from './edit-url-dialog.component'; - -describe('EditUrlDialogComponent', () => { - let component: EditUrlDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ EditUrlDialogComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(EditUrlDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); From cd80455bd87b1dfa5c3615b5e486a2970b94c84a Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Wed, 26 May 2021 09:04:33 +0200 Subject: [PATCH 15/18] comply to lint rules --- .../edit-url-dialog/edit-url-dialog.component.scss | 2 +- .../component/graph-display/graph-display.component.scss | 6 +++--- .../default-pattern-renderer.component.scss | 2 +- .../design-model-management.component.scss | 4 ++-- .../pattern-language-management.component.scss | 4 ++-- .../pattern-view-management.component.scss | 4 ++-- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/app/core/component/edit-url-dialog/edit-url-dialog.component.scss b/src/app/core/component/edit-url-dialog/edit-url-dialog.component.scss index 27956b0e..820cdcf6 100644 --- a/src/app/core/component/edit-url-dialog/edit-url-dialog.component.scss +++ b/src/app/core/component/edit-url-dialog/edit-url-dialog.component.scss @@ -1,3 +1,3 @@ -.mat-form-field{ +.mat-form-field { width: 100%; } diff --git a/src/app/core/component/graph-display/graph-display.component.scss b/src/app/core/component/graph-display/graph-display.component.scss index 4a9b8141..0afcbd18 100644 --- a/src/app/core/component/graph-display/graph-display.component.scss +++ b/src/app/core/component/graph-display/graph-display.component.scss @@ -89,9 +89,9 @@ svg { max-width: 30%; } -.edit-icon{ +.edit-icon { margin-left: auto; margin-right: 0; - color:rgb(63, 81, 181); - padding-left: 10px + color: rgb(63, 81, 181); + padding-left: 10px; } diff --git a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.scss b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.scss index 14fc6807..992da13b 100644 --- a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.scss +++ b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.scss @@ -14,6 +14,6 @@ cursor: pointer; } -.mat-stroked-button{ +.mat-stroked-button { margin-top: 12px; } diff --git a/src/app/design-model-module/component/design-model-management/design-model-management.component.scss b/src/app/design-model-module/component/design-model-management/design-model-management.component.scss index 3f53a98e..904c71e7 100644 --- a/src/app/design-model-module/component/design-model-management/design-model-management.component.scss +++ b/src/app/design-model-module/component/design-model-management/design-model-management.component.scss @@ -9,10 +9,10 @@ cursor: pointer; } -.mat-card-image{ +.mat-card-image { cursor: pointer; } -.mat-card-avatar{ +.mat-card-avatar { cursor: pointer; } diff --git a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.scss b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.scss index 13641442..341230fb 100644 --- a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.scss +++ b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.scss @@ -27,10 +27,10 @@ cursor: pointer; } -.mat-card-image{ +.mat-card-image { cursor: pointer; } -.mat-card-avatar{ +.mat-card-avatar { cursor: pointer; } diff --git a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.scss b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.scss index f5e9fc4d..da21bde4 100644 --- a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.scss +++ b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.scss @@ -23,10 +23,10 @@ cursor: pointer; } -.mat-card-image{ +.mat-card-image { cursor: pointer; } -.mat-card-avatar{ +.mat-card-avatar { cursor: pointer; } From 6a6ed367087ca5076547b2e4a86d792026da4d86 Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Mon, 7 Jun 2021 16:02:51 +0200 Subject: [PATCH 16/18] fix typo --- .../delete-confirmation-dialog.component.html | 4 ++-- .../edit-url-dialog/edit-url-dialog.component.html | 6 +++--- .../discuss-dialog/discuss-dialog.component.html | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html b/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html index d6520076..05b27da8 100644 --- a/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html +++ b/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html @@ -1,8 +1,8 @@

Do you really want to delete {{data.name}}?

Do you really want to delete this item?

- - + diff --git a/src/app/core/component/edit-url-dialog/edit-url-dialog.component.html b/src/app/core/component/edit-url-dialog/edit-url-dialog.component.html index d9effe84..b48bf7f0 100644 --- a/src/app/core/component/edit-url-dialog/edit-url-dialog.component.html +++ b/src/app/core/component/edit-url-dialog/edit-url-dialog.component.html @@ -2,14 +2,14 @@

Edit Title or Icon for {{data.pattern.name}}

Adjust Pattern Name - + Adjust Icon URL - +
- + diff --git a/src/app/core/component/markdown-content-container/discuss-dialog/discuss-dialog.component.html b/src/app/core/component/markdown-content-container/discuss-dialog/discuss-dialog.component.html index 7cf083ca..78dbce18 100644 --- a/src/app/core/component/markdown-content-container/discuss-dialog/discuss-dialog.component.html +++ b/src/app/core/component/markdown-content-container/discuss-dialog/discuss-dialog.component.html @@ -13,6 +13,6 @@

{{data.title}}

- + From 1f9d29d92a362ad2840f0acddf7efbc12f374845 Mon Sep 17 00:00:00 2001 From: Martin Beisel Date: Fri, 21 May 2021 10:38:25 +0200 Subject: [PATCH 17/18] Changing this.pattern.id to this.patternId to prevent pattern.id does not exist bug --- .../default-pattern-renderer.component.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts index fad35bda..aec5e560 100644 --- a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts +++ b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts @@ -68,6 +68,7 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy this.viewContainerRef = this.ppPatternProperty.viewContainerRef; this.patternLanguageId = this.activatedRoute.snapshot.paramMap.get(globals.pathConstants.patternLanguageId); this.patternId = this.activatedRoute.snapshot.paramMap.get('patternId'); + console.log(this.activatedRoute.snapshot.paramMap.get('patternId')); this.getData(); } @@ -163,8 +164,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) : []; })); } @@ -175,7 +176,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) : []; })); } From d72b0678b6826d1e771a9d33ecf51238904293e4 Mon Sep 17 00:00:00 2001 From: Manuela Weigold Date: Mon, 7 Jun 2021 16:13:37 +0200 Subject: [PATCH 18/18] remove test log --- .../default-pattern-renderer.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts index aec5e560..bafbe8e5 100644 --- a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts +++ b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.ts @@ -68,7 +68,6 @@ export class DefaultPatternRendererComponent implements AfterViewInit, OnDestroy this.viewContainerRef = this.ppPatternProperty.viewContainerRef; this.patternLanguageId = this.activatedRoute.snapshot.paramMap.get(globals.pathConstants.patternLanguageId); this.patternId = this.activatedRoute.snapshot.paramMap.get('patternId'); - console.log(this.activatedRoute.snapshot.paramMap.get('patternId')); this.getData(); }