Added images to the event feed

src/app/core/mappings/feed.mapping.ts

@@ -48,7 +48,8 @@ export class FeedMapping {
                 i => event.push(<FeedEvent> {
                     id: i.id,
                     title: i.name,
-                    content: i.desc
+                    content: i.desc,
+                    imageUrl: i.image
                 })
             );
         } else if (feed.type === 'info') {

src/app/core/models/feed-event.model.ts

@@ -2,4 +2,5 @@ export interface FeedEvent {
     id: number;
     title: string;
     content: string;
+    imageUrl: string;
 }

src/app/core/store/state/feed.state.ts

@@ -44,6 +44,7 @@ export class FeedState {
     this.feedService
       .info()
       .subscribe((feed: PagedApiResponse<FeedDTO<any>>) => {
+        console.log(feed);
         const feeds = feed.result.map(t => this.feedMapping.fromFeedDTO(t));
         ctx.patchState({
           loading: false,

src/app/modules/dashboard/components/event-card/event-card.component.html

@@ -1,11 +1,16 @@
-<div class="card-container" *ngFor="let event of card.event">
-  <div class="card-title align-left">
-    <span>{{card.cardTitle}}</span>
+<div class="card-wrapper" *ngFor="let event of card.event">
+  <div class="card-icon-container align-center">
+      <img class="event-icon" src="{{event.imageUrl}}"> 
   </div>
-  <div class="event-title align-left wrap-text-more">
-    <span [innerHTML]='event.title'></span>
-  </div>
-  <div class="event-content align-left">
-    <span [innerHTML]='event.content'></span>
+  <div class="card-container">
+    <div class="card-title align-left">
+      <span>{{card.cardTitle}}</span>
+    </div>
+    <div class="event-title align-left wrap-text-more">
+      <span [innerHTML]='event.title'></span>
+    </div>
+    <div class="event-content align-left">
+      <span [innerHTML]='event.content'></span>
+    </div>
   </div>
 </div>

src/app/modules/dashboard/components/event-card/event-card.component.scss

@@ -1,8 +1,8 @@
 @import '../../../../../assets/scss/variables';
-
-.card-container {
+.card-wrapper {
   display: grid;
-  grid-template-columns: auto;
+  grid-template-columns: min-content auto;
+  grid-gap: 5vh;
   background-color: white;
   padding-top: 25px;
   padding-left: 25px;
@@ -12,6 +12,16 @@
   border-radius: 4px;
 }
 
+.event-icon {
+  width: 50px;
+}
+
+.card-container {
+  display: grid;
+  grid-template-columns: auto;
+  
+}
+
 .card-title span {
   font-size: 15px;
   font-weight: bold;