Merge pull request #3756 from ita-social-projects/Bugfix/6837-No-star-ratings-are-displayed-on-the-event-card

Bugfix/6837 Events rate button enabled and rating is shown

Author: hnativlyubomyr

src/app/greencity/modules/events/components/event-details/event-details.component.html

@@ -81,16 +81,17 @@
               ></div>
             </div>
             <div class="event-participants">
+              <div class="event-stars" *ngIf="!event.isRelevant">
+                <app-rating-display [rate]="event.eventRate" [maxRating]="max"></app-rating-display>
+              </div>
+
+              <span class="event-participants-count">({{ attendees.length }})</span>&nbsp;
+
               <div *ngIf="attendeesAvatars.length" class="event-participants-avatars">
                 <div *ngFor="let avatar of attendeesAvatars" class="event-participants-avatar">
-                  <img [src]="avatar" alt="" />
+                  <img [src]="avatar" alt="avatar" />
                 </div>
               </div>
-              <div class="event-participants-count-container">
-                <span class="event-participants-count">{{ attendees.length }}</span
-                >&nbsp;
-                <span>{{ 'homepage.events.people-joined' | translate }}</span>
-              </div>
             </div>
           </div>
 

src/app/greencity/modules/events/components/event-details/event-details.component.scss

@@ -246,8 +246,9 @@
           }
 
           .event-participants {
-            display: inline-flex;
-            gap: 13px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
 
             .event-participants-avatars {
               padding: 3px 0;
@@ -273,14 +274,9 @@
               }
             }
 
-            .event-participants-count-container {
+            .event-participants-count {
               font-size: 16px;
-              font-weight: 400;
-              line-height: 26px;
-
-              .event-participants-count {
-                font-weight: 500;
-              }
+              font-weight: 500;
             }
           }
         }
@@ -510,6 +506,27 @@
   gap: 24px;
 }
 
+.event-stars {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .star {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    transition: all 0.3s;
+  }
+
+  .fill {
+    background: url('/assets/events-icons/star-filled.svg') no-repeat center;
+  }
+
+  .empty {
+    background: url('/assets/events-icons/star-empthy.svg') no-repeat center;
+  }
+}
+
 .like-wr {
   margin-left: 20px;
   display: flex;

src/app/greencity/modules/events/components/event-details/event-details.component.ts

@@ -29,8 +29,6 @@ import { EventAttender, EventDto, EventForm, PlaceOnline } from '../../models/ev
 import { EventStoreService } from '../../services/event-store.service';
 import { MatSnackBarService } from '@global-service/mat-snack-bar/mat-snack-bar.service';
 
-
-
 @Component({
   selector: 'app-event-details',
   templateUrl: './event-details.component.html',
@@ -63,7 +61,7 @@ export class EventDetailsComponent implements OnInit, OnDestroy {
   isUpdating: boolean;
   currentDate = new Date();
   isPreview = false;
-  max = 5;
+  max = 3;
   rate: number;
   likesType = {
     like: 'assets/img/comments/like.png',

src/app/greencity/shared/components/events-list-item/events-list-item.component.html

@@ -73,7 +73,7 @@
           'primary-global-button': btnName.join === nameBtn
         }"
         (click)="buttonAction(nameBtn)"
-        [disabled]="nameBtn === btnName.requestSent || isDateExpired(event.dates)"
+        [disabled]="nameBtn === btnName.requestSent || (nameBtn === btnName.join && isDateExpired(event.dates))"
       >
         {{ nameBtn | translate }}
       </button>