89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
|
import { Component } from '@angular/core';
|
||
|
|
import { CommonModule } from '@angular/common';
|
||
|
|
import { FormsModule } from '@angular/forms';
|
||
|
|
import { Store } from '@ngrx/store';
|
||
|
|
import { ApiService } from '../../api-service';
|
||
|
|
import { ActionTypes, StateInterface } from '../../reducers';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-feedback-button',
|
||
|
|
imports: [CommonModule, FormsModule],
|
||
|
|
templateUrl: './feedback-button.html',
|
||
|
|
styleUrl: './feedback-button.scss'
|
||
|
|
})
|
||
|
|
export class FeedbackButton {
|
||
|
|
isModalOpen: boolean = false;
|
||
|
|
feedbackText: string = '';
|
||
|
|
isSubmitting: boolean = false;
|
||
|
|
submitSuccess: boolean = false;
|
||
|
|
submitError: boolean = false;
|
||
|
|
|
||
|
|
constructor(
|
||
|
|
private store: Store<StateInterface>,
|
||
|
|
private apiService: ApiService
|
||
|
|
) {}
|
||
|
|
|
||
|
|
toggleModal() {
|
||
|
|
this.isModalOpen = !this.isModalOpen;
|
||
|
|
|
||
|
|
// Reset state when opening modal
|
||
|
|
if (this.isModalOpen) {
|
||
|
|
this.feedbackText = '';
|
||
|
|
this.submitSuccess = false;
|
||
|
|
this.submitError = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update app state to show/hide feedback panel
|
||
|
|
this.store.dispatch({
|
||
|
|
type: ActionTypes.UPDATE_APP,
|
||
|
|
payload: {
|
||
|
|
displayFeedBackPanel: this.isModalOpen,
|
||
|
|
feedBackInput: this.feedbackText
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async submitFeedback() {
|
||
|
|
if (!this.feedbackText.trim()) {
|
||
|
|
return; // Don't submit empty feedback
|
||
|
|
}
|
||
|
|
|
||
|
|
this.isSubmitting = true;
|
||
|
|
this.submitSuccess = false;
|
||
|
|
this.submitError = false;
|
||
|
|
|
||
|
|
try {
|
||
|
|
// Update Redux state with feedback text
|
||
|
|
this.store.dispatch({
|
||
|
|
type: ActionTypes.UPDATE_APP,
|
||
|
|
payload: {
|
||
|
|
feedBackInput: this.feedbackText
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Dispatch action to send feedback
|
||
|
|
this.store.dispatch({
|
||
|
|
type: ActionTypes.SEND_USER_FEEDBACK,
|
||
|
|
payload: {
|
||
|
|
feedback: this.feedbackText
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Call API service directly
|
||
|
|
await this.apiService.sendUserFeedback(this.feedbackText);
|
||
|
|
|
||
|
|
this.submitSuccess = true;
|
||
|
|
|
||
|
|
// Close modal after a short delay
|
||
|
|
setTimeout(() => {
|
||
|
|
this.toggleModal();
|
||
|
|
}, 2000);
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error submitting feedback:', error);
|
||
|
|
this.submitError = true;
|
||
|
|
} finally {
|
||
|
|
this.isSubmitting = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|