Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div class="message-feedback-container">
<div class="feedback-buttons">
<button mat-icon-button [matTooltip]="i18n.goodResponseTooltip" (click)="sendFeedback('up')">
@if (selectedFeedback() === 'up') {
@if (feedbackDirection() === 'up') {
<mat-icon>thumb_up_filled</mat-icon>
} @else {
<mat-icon>thumb_up</mat-icon>
}
</button>
<button mat-icon-button [matTooltip]="i18n.badResponseTooltip" (click)="sendFeedback('down')">
@if (selectedFeedback() === 'down') {
@if (feedbackDirection() === 'down') {
<mat-icon>thumb_down_filled</mat-icon>
} @else {
<mat-icon>thumb_down</mat-icon>
Expand Down
27 changes: 20 additions & 7 deletions src/app/components/message-feedback/message-feedback.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
*/

import {CommonModule} from '@angular/common';
import {Component, computed, inject, input, signal} from '@angular/core';
import {Component, computed, effect, inject, input, resource, signal} from '@angular/core';
import {rxResource, toSignal} from '@angular/core/rxjs-interop';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import {MatFormFieldModule} from '@angular/material/form-field';
Expand Down Expand Up @@ -50,23 +51,35 @@ export class MessageFeedbackComponent {
protected readonly i18n = inject(MessageFeedbackMessagesInjectionToken);
private readonly feedbackService = inject(FEEDBACK_SERVICE);

readonly isDetailedFeedbackVisible = signal(false);
readonly selectedFeedback =
private readonly existingFeedback = rxResource({
params: () => ({
sessionName: this.sessionName(),
eventId: this.eventId(),
}),
stream: ({params}) =>
this.feedbackService.getFeedback(params.sessionName, params.eventId)
});
private readonly selectedFeedbackDirection =
signal<Feedback['direction']|undefined>(undefined);

readonly feedbackDirection = computed(
() => this.selectedFeedbackDirection() ??
this.existingFeedback.value()?.direction);
readonly isDetailedFeedbackVisible = signal(false);
readonly feedbackPlaceholder = computed(() => {
return this.selectedFeedback() === 'up' ?
return this.feedbackDirection() === 'up' ?
this.i18n.feedbackCommentPlaceholderUp :
this.i18n.feedbackCommentPlaceholderDown;
});
readonly comment = new FormControl('');

sendFeedback(direction: Feedback['direction']) {
this.isDetailedFeedbackVisible.set(true);
this.selectedFeedback.set(direction);
this.selectedFeedbackDirection.set(direction);
}

onDetailedFeedbackSubmitted() {
const direction = this.selectedFeedback();
const direction = this.feedbackDirection();
if (!direction) return;

this.feedbackService.sendFeedback(this.sessionName(), this.eventId(), {
Expand All @@ -77,7 +90,7 @@ export class MessageFeedbackComponent {
}

onDetailedFeedbackCancelled() {
this.selectedFeedback.set(undefined);
this.selectedFeedbackDirection.set(undefined);
this.resetDetailedFeedback();
}

Expand Down
6 changes: 6 additions & 0 deletions src/app/core/services/feedback.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
import {Injectable} from '@angular/core';

import {Feedback, FeedbackService as FeedbackServiceInterface} from './interfaces/feedback';
import {Observable, of} from 'rxjs';

@Injectable({providedIn: 'root'})
export class FeedbackService implements FeedbackServiceInterface {
Expand All @@ -26,4 +27,9 @@ export class FeedbackService implements FeedbackServiceInterface {
eventId: string,
feedback: Partial<Feedback>,
): void {}

getFeedback(sessionId: string, eventId: string):
Observable<Feedback|undefined> {
return of(undefined);
}
}
3 changes: 3 additions & 0 deletions src/app/core/services/interfaces/feedback.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
*/

import {InjectionToken} from '@angular/core';
import {Observable} from 'rxjs';

/**
* Feedback metadata.
Expand All @@ -36,6 +37,8 @@ export declare abstract class FeedbackService {
eventId: string,
feedback: Partial<Feedback>,
): void;
abstract getFeedback(sessionId: string, eventId: string):
Observable<Feedback|undefined>;
}

/**
Expand Down
6 changes: 5 additions & 1 deletion src/app/core/services/testing/mock-feedback.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,15 @@
* limitations under the License.
*/

import {of} from 'rxjs';

import {FeedbackService} from '../interfaces/feedback';

/**
* Mock feedback service for testing.
*/
export class MockFeedbackService implements Partial<FeedbackService> {
sendFeedback = jasmine.createSpy('sendFeedback');
sendFeedback =
jasmine.createSpy('sendFeedback').and.returnValue(of(undefined));
getFeedback = jasmine.createSpy('getFeedback').and.returnValue(of(undefined));
}
Loading