Convert observables to signals.
This commit is contained in:
Florian THIERRY
@@ -1,132 +1,133 @@
|
||||
<form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
|
||||
<header>
|
||||
<h1>{{title}}</h1>
|
||||
</header>
|
||||
<header>
|
||||
<h1>{{ title() }}</h1>
|
||||
</header>
|
||||
|
||||
<mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
|
||||
<mat-tab label="Edition" i18n-label>
|
||||
<div class="form-content">
|
||||
<div class="first-part">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Title</mat-label>
|
||||
<input matInput type="text" formControlName="title" />
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Description</mat-label>
|
||||
<input matInput type="text" formControlName="description" />
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Category</mat-label>
|
||||
<mat-select formControlName="categoryId">
|
||||
@for (category of categories$ | async; track category) {
|
||||
<mat-option [value]="category.id">
|
||||
{{ category.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="picture-container">
|
||||
<img [src]="publication.illustrationId.length ? '/api/pictures/' + publication.illustrationId : '/assets/images/default-picture.png'"
|
||||
(click)="displayPictureSectionDialog()"
|
||||
matTooltip="Click to change illustration"
|
||||
i18n-matTooltip/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button type="button"
|
||||
(click)="insertTitle(1)"
|
||||
matTooltip="Click to insert a title 1 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H1
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertTitle(2)"
|
||||
matTooltip="Click to insert a title 2 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H2
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertTitle(3)"
|
||||
matTooltip="Click to insert a title 3 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H3
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertLink()"
|
||||
matTooltip="Click to insert a link"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="selectAPicture()"
|
||||
matTooltip="Click to insert a picture"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>image</mat-icon>
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="displayCodeBlockDialog()"
|
||||
matTooltip="Click to insert a code block"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>code</mat-icon>
|
||||
</button>
|
||||
<button type="button"
|
||||
matTooltip="Click to display editor help"
|
||||
disabled
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>help</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>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" i18n-label>
|
||||
<div class="preview">
|
||||
@if ((isPreviewing$ | async) === true) {
|
||||
<div class="preview-loading">
|
||||
<h2 i18n>Preview is loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
} @else {
|
||||
<img class="illustration" src="/api/pictures/{{ publication.illustrationId }}" />
|
||||
<header>
|
||||
<h1>{{ publication.title }}</h1>
|
||||
<h2>{{ publication.description }}</h2>
|
||||
</header>
|
||||
<main [innerHTML]="publicationInEdition.parsedText"></main>
|
||||
<mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
|
||||
<mat-tab label="Edition" i18n-label>
|
||||
<div class="form-content">
|
||||
<div class="first-part">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Title</mat-label>
|
||||
<input matInput type="text" formControlName="title"/>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Description</mat-label>
|
||||
<input matInput type="text" formControlName="description"/>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Category</mat-label>
|
||||
<mat-select formControlName="categoryId">
|
||||
@for (category of categories$ | async; track category) {
|
||||
<mat-option [value]="category.id">
|
||||
{{ category.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
<footer>
|
||||
<app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
|
||||
<button type="button"
|
||||
class="cod-button secondary"
|
||||
(click)="goPreviousLocation()"
|
||||
matRipple
|
||||
i18n>
|
||||
Cancel
|
||||
</button>
|
||||
</footer>
|
||||
</form>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="picture-container">
|
||||
<img
|
||||
[src]="publication().illustrationId.length ? '/api/pictures/' + publication().illustrationId : '/assets/images/default-picture.png'"
|
||||
(click)="displayPictureSectionDialog()"
|
||||
matTooltip="Click to change illustration"
|
||||
i18n-matTooltip/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button type="button"
|
||||
(click)="insertTitle(1)"
|
||||
matTooltip="Click to insert a title 1 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H1
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertTitle(2)"
|
||||
matTooltip="Click to insert a title 2 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H2
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertTitle(3)"
|
||||
matTooltip="Click to insert a title 3 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H3
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertLink()"
|
||||
matTooltip="Click to insert a link"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="selectAPicture()"
|
||||
matTooltip="Click to insert a picture"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>image</mat-icon>
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="displayCodeBlockDialog()"
|
||||
matTooltip="Click to insert a code block"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>code</mat-icon>
|
||||
</button>
|
||||
<button type="button"
|
||||
matTooltip="Click to display editor help"
|
||||
disabled
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>help</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>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" i18n-label>
|
||||
<div class="preview">
|
||||
@if (isPreviewing()) {
|
||||
<div class="preview-loading">
|
||||
<h2 i18n>Preview is loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
} @else {
|
||||
<img class="illustration" src="/api/pictures/{{ publication().illustrationId }}"/>
|
||||
<header>
|
||||
<h1>{{ publication().title }}</h1>
|
||||
<h2>{{ publication().description }}</h2>
|
||||
</header>
|
||||
<main [innerHTML]="publicationInEdition().parsedText"></main>
|
||||
}
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
<footer>
|
||||
<app-submit-button [requestPending]="isSaving()" i18n>Save</app-submit-button>
|
||||
<button type="button"
|
||||
class="cod-button secondary"
|
||||
(click)="goPreviousLocation()"
|
||||
matRipple
|
||||
i18n>
|
||||
Cancel
|
||||
</button>
|
||||
</footer>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user