refactor: changed the way the ratings are presented

frontend/src/views/member/InstitutionActivityEnrollmentsView.vue

@@ -360,7 +360,8 @@ export default class InstitutionActivityEnrollmentsView extends Vue {
     ) {
       return '';
     }
-    return `${participation.memberReview}\nRating: ${participation.memberRating}/5`;
+    const stars = this.convertToStars(participation.memberRating);
+    return `${participation.memberReview}\nRating: ${stars}`;
   }
   getVolunteerReview(enrollment: Enrollment): string {
     let activityId = enrollment.activityId;
@@ -377,7 +378,14 @@ export default class InstitutionActivityEnrollmentsView extends Vue {
     ) {
       return '';
     }
-    return `${participation.volunteerReview}\nRating: ${participation.volunteerRating}/5`;
+    const stars = this.convertToStars(participation.volunteerRating);
+    return `${participation.volunteerReview}\nRating: ${stars}`;
+  }
+
+  convertToStars(rating: number): string {
+    const fullStars = '★'.repeat(Math.floor(rating));
+    const emptyStars = '☆'.repeat(Math.floor(5 - rating));
+    return `${fullStars}${emptyStars} ${rating}/5`;
   }
 
   async getActivities() {

frontend/src/views/volunteer/VolunteerEnrollmentsView.vue

@@ -300,7 +300,8 @@ export default class VolunteerEnrollmentsView extends Vue {
     ) {
       return '';
     }
-    return `${participation.memberReview}\nRating: ${participation.memberRating}/5`;
+    const stars = this.convertToStars(participation.memberRating);
+    return `${participation.memberReview}\nRating: ${stars}`;
   }
   getVolunteerReview(activity: Activity): string {
     const participation = this.participations.find(
@@ -313,9 +314,19 @@ export default class VolunteerEnrollmentsView extends Vue {
     ) {
       return '';
     }
-    return `${participation.volunteerReview}\nRating: ${participation.volunteerRating}/5`;
+    const stars = this.convertToStars(participation.volunteerRating);
+    return `${participation.volunteerReview}\nRating: ${stars}`;
   }
 
+
+ convertToStars(rating: number): string {
+   const fullStars = '★'.repeat(Math.floor(rating));
+   const emptyStars = '☆'.repeat(Math.floor(5 - rating));
+   return `${fullStars}${emptyStars} ${rating}/5`;
+  }
+
+
+
   async deleteEnrollmentForActivity(activity: Activity) {
     const index = this.enrollments.findIndex(
       (e: Enrollment) => e.activityId == activity.id,

frontend/tests/e2e/specs/participation/participation.js

@@ -136,7 +136,10 @@ describe('Participation', () => {
       .children()
       .eq(2)
       .invoke('text')
-      .should('equal','The volunteer did an okay job\nRating: 3/5');
+      .should('include', 'The volunteer did an okay job')
+      .and('include', 'Rating: ')
+      .and('match', /★{3}☆{2} 3\/5/);
+
 
 
     // open edit participation dialog
@@ -160,9 +163,12 @@ describe('Participation', () => {
     cy.get('[data-cy="activityEnrollmentsTable"] tbody tr')
       .eq(0)
       .children()
-      .eq(2)
+      .eq(2)  // Assuming this is the correct index for the rating column
       .invoke('text')
-      .should('equal','The volunteer did a good job\nRating: 5/5');
+      .should('include', 'The volunteer did a good job')
+      .and('include', 'Rating: ')
+      .and('match', /★{5} 5\/5/);
+
 
     // verify participation status
     cy.get('[data-cy="activityEnrollmentsTable"] tbody tr')
@@ -197,17 +203,23 @@ describe('Participation', () => {
     cy.get('[data-cy="volunteerEnrollmentsTable"] tbody tr')
       .eq(0)
       .children()
-      .eq(6)
+      .eq(6)  // Assuming this is the correct index for the rating column
       .invoke('text')
-      .should('equal','The volunteer did a good job\nRating: 5/5');
+      .should('include', 'The volunteer did a good job')
+      .and('include', 'Rating: ')
+      .and('match', /★{5} 5\/5/);
+
 
     // Verify the member review
     cy.get('[data-cy="volunteerEnrollmentsTable"] tbody tr')
       .eq(0)
       .children()
       .eq(7)
       .invoke('text')
-      .should('equal','The activity was well organized\nRating: 3/5');
+      .should('include', 'The activity was well organized')
+      .and('include', 'Rating: ')
+      .and('match', /★{3}☆{2} 3\/5/);
+
 
     cy.logout();
 
@@ -234,20 +246,27 @@ describe('Participation', () => {
     cy.wait('@enrollments');
 
     // Check if rating was updated
+    // Update the assertion to match the new format with stars
     cy.get('[data-cy="activityEnrollmentsTable"] tbody tr')
       .eq(0)
       .children()
-      .eq(2)
+      .eq(2)  // Assuming this is the correct index for the rating column
       .invoke('text')
-      .should('equal','The volunteer did a good job\nRating: 5/5');
+      .should('include', 'The volunteer did a good job')
+      .and('include', 'Rating: ')
+      .and('match', /★{5} 5\/5/);
+
 
     // Verify the member review
     cy.get('[data-cy="activityEnrollmentsTable"] tbody tr')
       .eq(0)
       .children()
       .eq(3)
       .invoke('text')
-      .should('equal','The activity was well organized\nRating: 3/5');
+      .should('include', 'The activity was well organized')
+      .and('include', 'Rating: ')
+      .and('match', /★{3}☆{2} 3\/5/);
+
 
     cy.logout();