43 lines
1.9 KiB
HTML
43 lines
1.9 KiB
HTML
<ng-container *transloco="let t; read:'review-modal'">
|
|
<div>
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>
|
|
<button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()">
|
|
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form [formGroup]="reviewGroup">
|
|
|
|
<!--Not in sync with one at the top of the detail page, bad UX for now -->
|
|
<!--<ngx-stars [initialStars]="review.rating" (ratingOutput)="updateRating($event)" [size]="2"
|
|
[maxStars]="5" [color]="starColor"></ngx-stars>-->
|
|
|
|
<div class="row g-0 mt-2">
|
|
<label for="review" class="form-label">{{t('review-label')}}</label>
|
|
<textarea id="review" class="form-control" formControlName="reviewBody" rows="3" [minlength]="minLength"
|
|
[class.is-invalid]="reviewGroup.get('reviewBody')?.invalid && reviewGroup.get('reviewBody')?.touched" aria-describedby="body-validations"
|
|
></textarea>
|
|
@if (reviewGroup.dirty || reviewGroup.touched) {
|
|
<div id="body-validations" class="invalid-feedback">
|
|
@if (reviewGroup.get('reviewBody')?.errors?.required) {
|
|
<div>{{t('required')}}</div>
|
|
}
|
|
@if (reviewGroup.get('reviewBody')?.errors?.minlength) {
|
|
<div>{{t('min-length', {count: minLength})}}</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-danger" (click)="delete()">{{t('delete')}}</button>
|
|
<button class="btn btn-secondary" (click)="close()">{{t('close')}}</button>
|
|
<button type="submit" class="btn btn-primary" (click)="save()">{{t('save')}}</button>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
|