Merge pull request #60 from DongreJaipal/my-fix-branch

feat(component): add new feature If it is a team blog,then display group of author profile images.

Author: esthersoftwaredev

angular-primeng-app/src/app/components/post-details/post-details.component.html

@@ -5,9 +5,18 @@ <h1 class="title">{{ post.title }}</h1>
       <img class="cover-image" [src]="post.coverImage.url" alt="Cover image for {{ post.title }}">
       <div class="post-details">
         <div class="author-info">
-          <img class="author-image" [src]="post.author.profilePicture" alt="{{ post.author.name}}">
+          @if (isTeam) {
+            <p-avatarGroup styleClass="mb-3" >
+               <p-avatar [image]="post.author.profilePicture" size="large" shape="circle" title="{{ post.author.name}}"></p-avatar>
+               @for (coAuthor of post.coAuthors; track coAuthor.username) {
+                 <p-avatar [image]="coAuthor.profilePicture" size="large"  shape="circle" title="{{ coAuthor.username}}"></p-avatar>
+                }
+            </p-avatarGroup>
+          } @else {
+             <p-avatar [image]="coAuthor.profilePicture" size="large"  shape="circle" title="{{ coAuthor.username}}"></p-avatar>
+            }
           <div class="author-text">
-            <span class="author-name">{{post.author.name}}</span>
+            <span class="author-name">{{post.author.name}} {{isTeam && post.coAuthors.length > 0 ? 'with ' +post.coAuthors.length + ' co-author' + (post.coAuthors.length > 1 ? 's' : '') : ''}}</span>
             <div class="post-meta">
               <p-tag value="{{post.publishedAt | date: 'MMM dd, yyyy' }}"><i
                   class="tag-icon pi pi-calendar"></i></p-tag>

angular-primeng-app/src/app/components/post-details/post-details.component.ts

@@ -18,6 +18,8 @@ import { InputSwitchModule } from "primeng/inputswitch";
 import { SanitizerHtmlPipe } from "../../pipes/sanitizer-html.pipe";
 import { YoutubeVideoEmbedDirective } from "../../directives/youtube-video-embed.directive";
 import { ViewportScroller } from "@angular/common";
+import { AvatarModule } from 'primeng/avatar';
+import { AvatarGroupModule } from 'primeng/avatargroup';
 
 @Component({
 	selector: "app-post-details",
@@ -36,12 +38,15 @@ import { ViewportScroller } from "@angular/common";
 		ButtonModule,
 		InputSwitchModule,
 		SearchDialogComponent,
+		AvatarGroupModule,
+		AvatarModule,
 	],
 	templateUrl: "./post-details.component.html",
 	styleUrl: "./post-details.component.scss",
 })
 export class PostDetailsComponent implements OnInit, OnDestroy {
 	checked: boolean = true;
+	isTeam: boolean = false;
 	selectedTheme: string = "dark";
   blogURL!: string;
 	blogInfo!: BlogInfo;
@@ -68,6 +73,7 @@ export class PostDetailsComponent implements OnInit, OnDestroy {
 				this.blogName = this.blogInfo.title;
         const { __typename, ...links } = data.links;
         this.blogSocialLinks = links;
+		    this.isTeam = this.blogInfo.isTeam ? true : false;
 			});
 		this.post$ = this.blogService.getSinglePost(this.blogURL, this.postSlug);
 		this.querySubscription = this.blogService

angular-primeng-app/src/app/graphql.operations.ts

@@ -139,6 +139,10 @@ export const GET_SINGLE_POST = gql`
 					name
 					profilePicture
 				}
+				coAuthors {
+					username
+					profilePicture
+				}
 				coverImage {
 					url
 				}

angular-primeng-app/src/app/models/post.ts

@@ -5,6 +5,7 @@ export type Post = {
   readTimeInMinutes: number;
   tags: Tag[];
   author: Author;
+  coAuthors: coAuthor[];
   coverImage: CoverImage;
   content: Content;
   publishedAt: string;
@@ -28,6 +29,11 @@ export interface Author {
   socialMediaLinks: SocialMediaLinks;
 }
 
+export interface coAuthor {
+  username: string;
+  profilePicture: string;
+}
+
 export interface SocialMediaLinks {
   facebook: string;
   github: string;