src/app/core/feedback/feedback-flyout/feedback-flyout.component.html
<app-flyout label="Feedback">
<div
class="feedback-form feedback-{{ status() }} d-flex flex-column flex-grow-1 h-100"
#flyoutContent
>
@if (status() === 'ready') {
<form #form="ngForm">
<h2 class="pb-2">What's on your mind?</h2>
<div class="form-check">
<input
class="form-check-input"
id="fo-type-option-1"
name="type-option-radio"
type="radio"
value="general feedback"
required
[(ngModel)]="feedback.type"
/>
<label class="form-check-label mb-2" for="fo-type-option-1"
>Ask a question or make a comment</label
>
</div>
@if (feedback.type === 'general feedback') {
<ng-container *ngTemplateOutlet="textInput" />
}
<div class="form-check">
<input
class="form-check-input"
id="fo-type-option-2"
name="type-option-radio"
type="radio"
value="feature request"
required
[(ngModel)]="feedback.type"
/>
<label class="form-check-label mb-2" for="fo-type-option-2"
>Suggest a new feature</label
>
</div>
@if (feedback.type === 'feature request') {
<ng-container *ngTemplateOutlet="textInput" />
}
<div class="form-check">
<input
class="form-check-input"
id="fo-type-option-3"
name="type-option-radio"
type="radio"
value="bug report"
required
[(ngModel)]="feedback.type"
/>
<label class="form-check-label mb-2" for="fo-type-option-3"
>Report a bug/error</label
>
</div>
@if (feedback.type === 'bug report') {
<h3 class="pt-3 pb-2">What's the bug/error type?</h3>
<div class="form-check">
<input
class="form-check-input"
id="fo-subtype-option-1"
name="subtype-option-radio"
type="radio"
value="Content or data"
required
[(ngModel)]="feedback.subType"
/>
<label class="form-check-label mb-2" for="fo-subtype-option-1"
>Content or data</label
>
</div>
<div class="form-check">
<input
class="form-check-input"
id="fo-subtype-option-2"
name="subtype-option-radio"
type="radio"
value="Styling"
required
[(ngModel)]="feedback.subType"
/>
<label class="form-check-label mb-2" for="fo-subtype-option-2"
>Styling</label
>
</div>
<div class="form-check">
<input
class="form-check-input"
id="fo-subtype-option-3"
name="subtype-option-radio"
type="radio"
value="Technical"
required
[(ngModel)]="feedback.subType"
/>
<label class="form-check-label mb-2" for="fo-subtype-option-3"
>Technical</label
>
</div>
<div class="form-check">
<input
class="form-check-input"
id="fo-subtype-option-4"
name="subtype-option-radio"
type="radio"
value="Other"
required
[(ngModel)]="feedback.subType"
/>
<label class="form-check-label mb-2" for="fo-subtype-option-4">Other</label>
</div>
@if (feedback.subType === 'Other') {
<div class="mb-2">
<input
class="form-control"
name="other-description"
required
[(ngModel)]="feedback.otherText"
/>
</div>
}
<div class="form-check">
<input
class="form-check-input"
id="fo-subtype-option-5"
name="subtype-option-radio"
type="radio"
value="Unsure"
required
[(ngModel)]="feedback.subType"
/>
<label class="form-check-label mb-2" for="fo-subtype-option-5"
>Unsure</label
>
</div>
<h3 class="pt-2">What happened?</h3>
<ng-container *ngTemplateOutlet="textInput" />
}
<ng-template #textInput>
@if (classificationOptions().length > 0) {
<div class="mb-3 pt-2">
<ng-select
name="classification"
bindLabel="level"
dropdownPosition="bottom"
placeholder="Select Classification"
required
[(ngModel)]="feedback.classification"
[clearable]="false"
[items]="classificationOptions()"
/>
</div>
}
<div
[class.mb-0]="feedback.type === 'bug report'"
[class.mb-3]="feedback.type !== 'bug report'"
>
<textarea
class="form-control"
name="text"
placeholder="Enter Feedback"
required
style="height: 8rem"
[(ngModel)]="feedback.body"
>
</textarea>
</div>
</ng-template>
</form>
<div class="d-flex justify-content-center p-3 border-top">
<button class="btn btn-link me-2" type="button" (click)="closeForm()">
Cancel
</button>
<button
class="btn btn-primary"
id="submit"
type="button"
[disabled]="!form.valid"
(click)="submit()"
>
Send Feedback
</button>
</div>
} @else if (status() === 'submitting') {
<div class="d-flex p-5">
<span class="fa-solid fa-spinner fa-pulse fa-3x fa-fw me-3 flex-shrink-0"></span>
<div class="flex-grow-1">
<h1 class="mt-0">Submitting</h1>
</div>
</div>
} @else if (status() === 'success') {
<div class="d-flex p-5">
<span
class="fa-solid fa-check-circle text-highlight fa-3x fa-fw me-3 flex-shrink-0"
></span>
<div class="flex-grow-1">
<h1 class="mt-0">Thanks!</h1>
We got your feedback.
</div>
</div>
} @else if (status() === 'failure') {
<div class="p-5">
<div class="d-flex">
<span
class="fa-solid fa-exclamation-triangle text-danger fa-3x fa-fw me-3 flex-shrink-0"
></span>
<div class="flex-grow-1">
<h1 class="mt-0">Unable To send feedback</h1>
Something went wrong and we didn't get your feedback.
</div>
</div>
<div class="d-flex justify-content-center mt-4">
<button
class="btn btn-outline-primary me-2"
type="button"
(click)="backToForm()"
>
Back to Feedback Form
</button>
<button class="btn btn-primary" type="button" (click)="submit()">
Resend Feedback
</button>
</div>
</div>
}
</div>
</app-flyout>