florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Extract publication edition into a separated component.

Browse Source
This commit is contained in:
Florian THIERRY
2024-09-05 17:28:30 +02:00
parent 5610bd170a
commit 5804d8cc9f
12 changed files with 394 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/src/app/components/publication-edition/publication-edition.component.html Normal file
View File

@@ -0,0 +1,87 @@
<form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
<header>
<h1>Modification de l'article {{ publication.title }}</h1>
</header>
<mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
<mat-tab label="Edition">
<div class="form-content">
<div class="first-part">
<div>
<mat-form-field>
<mat-label>Title</mat-label>
<input matInput type="text" formControlName="title" />
</mat-form-field>
<mat-form-field>
<mat-label>Description</mat-label>
<input matInput type="text" formControlName="description" />
</mat-form-field>
</div>
<div class="picture-container">
<img src="/api/pictures/{{publication.illustrationId}}" (click)="displayPictureSectionDialog()" matTooltip="Click to change illustration"/>
</div>
</div>
<div class="actions">
<button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(1)">
H1
</button>
<button type="button" matTooltip="Click to insert a title 2 section" (click)="insertTitle(2)">
H2
</button>
<button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(3)">
H3
</button>
<button type="button" matTooltip="Click to insert a picture" (click)="selectAPicture()">
<mat-icon>image</mat-icon>
</button>
<button type="button" matTooltip="Click to insert a link" (click)="insertLink()">
<mat-icon>link</mat-icon>
</button>
<button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()">
<mat-icon>code</mat-icon>
</button>
<button type="button" disabled matTooltip="Click to display editor help">
<mat-icon>help</mat-icon>
</button>
</div>
<mat-form-field class="example-form-field">
<mat-label>Content</mat-label>
<textarea
#textArea
matInput
formControlName="text"
class="text-input"
(keyup)="updateCursorPosition($event)"
(click)="updateCursorPosition($event)">
</textarea>
</mat-form-field>
</div>
</mat-tab>
<mat-tab label="Previewing">
<div class="preview">
@if ((isPreviewing$ | async) === true) {
<div class="preview-loading">
<h2>Preview is loading...</h2>
<mat-spinner></mat-spinner>
</div>
} @else {
<img class="illustration" src="/pictures/{{ publication.illustrationId }}" />
<header>
<h1>{{ publication.title }}</h1>
<h2>{{ publication.description }}</h2>
</header>
<main [innerHTML]="publication.parsedText"></main>
}
</div>
</mat-tab>
</mat-tab-group>
<footer>
<app-submit-button label="Save" [requestPending]="!!(isSaving$ | async)"></app-submit-button>
<button type="button" class="secondary" (click)="goPreviousLocation()">
Cancel
</button>
</footer>
</form>