ng-implementation/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.html
2025-10-06 17:31:01 +02:00

97 lines
2.7 KiB
HTML

<button (click)="toggleModal()" [ngClass]="{
'is-active': isModalOpen
}" class="feedback-button">
<span class="text">
Feedback
</span>
<i class="ri-message-2-line"></i>
</button>
<!-- Feedback Modal -->
@if (isModalOpen) {
<div class="feedback-modal-overlay">
<div class="feedback-modal">
<button (click)="toggleModal()" [ngClass]="{
'is-active': isModalOpen
}" class="feedback-button">
<span class="text">
Feedback
</span>
<i class="ri-message-2-line"></i>
</button>
<div class="modal-header">
<div class="side">
<h3>Share us your feedback !</h3>
<div class="star-row">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</div>
</div>
<div class="side">
<sae-m-button (click)="toggleModal()" [kind]="'secondary'" [label]="'retour'"
[size]="'medium'"></sae-m-button>
<sae-m-button (click)="submitFeedback()" [kind]="'primary'" [label]="'Soumettre'"
[size]="'medium'"></sae-m-button>
</div>
<!-- <button class="close-button" (click)="toggleModal()">-->
<!-- <i class="ri-close-line"></i>-->
<!-- </button>-->
</div>
<div class="modal-body">
<textarea
[(ngModel)]="feedbackText"
[disabled]="isSubmitting"
placeholder="Enter your feedback here..."
rows="5"
></textarea>
@if (submitSuccess) {
<div class="success-message">
<i class="ri-check-line"></i> Thank you for your feedback!
</div>
}
@if (submitError) {
<div class="error-message">
<i class="ri-error-warning-line"></i> Failed to submit feedback. Please try again.
</div>
}
</div>
<div class="modal-footer">
<!-- <button-->
<!-- class="cancel-button"-->
<!-- (click)="toggleModal()"-->
<!-- [disabled]="isSubmitting"-->
<!-- >-->
<!-- Cancel-->
<!-- </button>-->
<!-- <button-->
<!-- class="submit-button"-->
<!-- (click)="submitFeedback()"-->
<!-- [disabled]="isSubmitting || !feedbackText.trim()"-->
<!-- >-->
<!-- -->
<!-- </button>-->
@if (isSubmitting) {
<i class="ri-loader-4-line spinning"></i> Sending...
} @else {
<!-- Send Feedback-->
}
</div>
</div>
</div>
}