#2358

src/app/topic/components/topic-participants-section/topic-participants-section.component.html

@@ -0,0 +1,30 @@
+<div class="info_items_wrap">
+  <div class="info_header">
+    <div class="info_title" translate="VIEWS.TOPICS_TOPICID.SECTION_PARTICIPANTS_HEADING"></div>
+    <a class="manage_link" (click)="manageParticipants(topic)"
+      *ngIf="canUpdate(topic)"><span translate="VIEWS.TOPICS_TOPICID.LNK_MANAGE"></span></a>
+  </div>
+  <div class="participants_count_wrap" *ngIf="members$ | async as members">
+    <div class="participants_count">
+      {{ topic.members.users.count || members.length }}
+    </div>
+    <div class="avatars_wrap">
+      <ng-container *ngFor="let index of [0, 1, 2]">
+        <div class="avatar" *ngIf="members[index]">
+          <img *ngIf="members[index].imageUrl" [src]="members[index].imageUrl" [alt]="members[index].name || ''" />
+          <div class="profile_image_filler" *ngIf="!members[index].imageUrl">
+            <cos-initials *ngIf="members[index].name" [name]="members[index].name">
+            </cos-initials>
+          </div>
+        </div>
+      </ng-container>
+
+      <div class="avatar" *ngIf="members.length > 3">
+        + {{ topic.members.users.count - 3 }}
+      </div>
+    </div>
+  </div>
+  <button *ngIf="TopicService.canDelete(topic)" class="btn_medium_secondary bold"
+    (click)="inviteMembers(topic)" translate="VIEWS.TOPICS_TOPICID.SECTION_PARTICIPANTS_BTN_SHARE"></button>
+</div>
+

src/app/topic/components/topic-participants-section/topic-participants-section.component.scss

@@ -0,0 +1,78 @@
+.info_items_wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .info_header {
+    display: flex;
+    justify-content: space-between;
+
+    .info_title {
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 16px;
+      padding-bottom: 8px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: var(--color-text);
+    }
+  }
+
+  .participants_count_wrap {
+    display: flex;
+    justify-content: space-between;
+
+    .participants_count {
+      font-size: 40px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 40px;
+    }
+
+    .avatars_wrap {
+      display: flex;
+
+      .avatar {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 40px;
+        width: 40px;
+        height: 40px;
+        border: 2px solid #f8fafc;
+        margin-left: -10px;
+        background-color: var(--color-secondary);
+        font-size: 10px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 16px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+        img {
+          border: 2px solid #f8fafc;
+          width: inherit;
+          border-radius: 40px;
+          aspect-ratio: 1;
+          object-fit: cover;
+        }
+        .profile_image_filler {
+          width: 100%;
+          height: 100%;
+          background-color: var(--color-surfaces);
+          border-radius: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cos-initials {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+

src/app/topic/components/topic-participants-section/topic-participants-section.component.ts

@@ -0,0 +1,57 @@
+import { Component, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Topic } from '@interfaces/topic';
+import { TopicService } from '@services/topic.service';
+import { DialogService } from '@shared/dialog';
+import { TopicParticipantsComponent } from '../topic-participants/topic-participants.component';
+import { TopicInviteDialogComponent } from '../topic-invite/topic-invite.component';
+
+@Component({
+  selector: 'topic-participants-section',
+  templateUrl: './topic-participants-section.component.html',
+  styleUrls: ['./topic-participants-section.component.scss'],
+  standalone: false
+})
+export class TopicParticipantsSectionComponent {
+  @Input() topic!: Topic;
+  @Input() members$!: Observable<any[]>;
+
+  constructor(
+    public TopicService: TopicService,
+    private readonly DialogService: DialogService
+  ) {}
+
+  canUpdate(topic: Topic): boolean {
+    return this.TopicService.canUpdate(topic);
+  }
+
+  manageParticipants(topic: Topic): void {
+    const participantsDialog = this.DialogService.open(
+      TopicParticipantsComponent,
+      { data: { topic } }
+    );
+    participantsDialog.afterClosed().subscribe({
+      next: (res) => {
+        // Handle response if needed
+      },
+      error: (error) => {
+        console.error('Error managing participants', error);
+      },
+    });
+  }
+
+  inviteMembers(topic: Topic): void {
+    const inviteDialog = this.DialogService.open(TopicInviteDialogComponent, {
+      data: { topic },
+    });
+    inviteDialog.afterClosed().subscribe({
+      next: (res) => {
+        // Handle response if needed
+      },
+      error: (error) => {
+        console.error('Error inviting members', error);
+      },
+    });
+  }
+}
+

src/app/topic/topic.component.html

@@ -1095,35 +1095,7 @@
               index: 4,
               position: wWidth <= 1024 ? 'bottom' : 'left'
             }">
-            <div class="info_items_wrap">
-              <div class="info_header">
-                <div class="info_title" translate="VIEWS.TOPICS_TOPICID.SECTION_PARTICIPANTS_HEADING"></div>
-                <a class="manage_link" (click)="manageParticipants(topic)" translate="VIEWS.TOPICS_TOPICID.LNK_MANAGE"
-                  *ngIf="canUpdate(topic)"></a>
-              </div>
-              <div class="participants_count_wrap" *ngIf="members$ | async as members">
-                <div class="participants_count">
-                  {{ members.length || topic.members.users.count }}
-                </div>
-                <div class="avatars_wrap">
-                  <ng-container *ngFor="let index of [0, 1, 2]">
-                    <div class="avatar" *ngIf="members[index]">
-                      <img *ngIf="members[index].imageUrl" [src]="members[index].imageUrl" />
-                      <div class="profile_image_filler" *ngIf="!members[index].imageUrl">
-                        <cos-initials *ngIf="members[index].name" [name]="members[index].name">
-                        </cos-initials>
-                      </div>
-                    </div>
-                  </ng-container>
-
-                  <div class="avatar" *ngIf="members.length > 3">
-                    + {{ topic.members.users.count - 3 }}
-                  </div>
-                </div>
-              </div>
-              <button *ngIf="TopicService.canDelete(topic)" class="btn_medium_secondary bold"
-                (click)="inviteMembers(topic)" translate="VIEWS.TOPICS_TOPICID.SECTION_PARTICIPANTS_BTN_SHARE"></button>
-            </div>
+            <topic-participants-section [topic]="topic" [members$]="members$"></topic-participants-section>
           </div>
           <div class="info_section notifications" *ngIf="auth.loggedIn$ | async">
             <div class="info_items_wrap">

src/app/topic/topic.module.ts

@@ -112,6 +112,7 @@ import { TopicSettingsLockedComponent } from './components/topic-settings-locked
 import { AnonymousDraftDialogComponent } from '../ideation/components/anonymous-draft-dialog/anonymous-draft-dialog.component';
 import { CloseWithoutSavingDialogComponent } from '../ideation/components/close-without-saving-dialog/close-without-saving-dialog.component';
 import { TopicVoteCastComponent } from './components/topic-vote-cast/topic-vote-cast.component';
+import { TopicParticipantsSectionComponent } from './components/topic-participants-section/topic-participants-section.component';
 
 @NgModule({
   declarations: [
@@ -195,7 +196,8 @@ import { TopicVoteCastComponent } from './components/topic-vote-cast/topic-vote-
     CloseVotingComponent,
     TopicTabsComponent,
     TopicSettingsLockedComponent,
-    TopicVoteCastComponent
+    TopicVoteCastComponent,
+    TopicParticipantsSectionComponent
   ],
   imports: [
     LinkyModule,