diff --git a/src/app/topic/components/topic-participants-section/topic-participants-section.component.html b/src/app/topic/components/topic-participants-section/topic-participants-section.component.html new file mode 100644 index 000000000..8d83c7ba5 --- /dev/null +++ b/src/app/topic/components/topic-participants-section/topic-participants-section.component.html @@ -0,0 +1,30 @@ +
+
+
+ +
+
+
+ {{ topic.members.users.count || members.length }} +
+
+ +
+ +
+ + +
+
+ + +
+ + {{ topic.members.users.count - 3 }} +
+
+
+ +
+ diff --git a/src/app/topic/components/topic-participants-section/topic-participants-section.component.scss b/src/app/topic/components/topic-participants-section/topic-participants-section.component.scss new file mode 100644 index 000000000..a15bed4b1 --- /dev/null +++ b/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; + } + } + } + } + } +} + diff --git a/src/app/topic/components/topic-participants-section/topic-participants-section.component.ts b/src/app/topic/components/topic-participants-section/topic-participants-section.component.ts new file mode 100644 index 000000000..6c47d4bd3 --- /dev/null +++ b/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; + + 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); + }, + }); + } +} + diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html index cff37ea64..1089ab035 100644 --- a/src/app/topic/topic.component.html +++ b/src/app/topic/topic.component.html @@ -1095,35 +1095,7 @@ index: 4, position: wWidth <= 1024 ? 'bottom' : 'left' }"> -
-
-
- -
-
-
- {{ members.length || topic.members.users.count }} -
-
- -
- -
- - -
-
- - -
- + {{ topic.members.users.count - 3 }} -
-
-
- -
+
diff --git a/src/app/topic/topic.module.ts b/src/app/topic/topic.module.ts index 008e9a3a2..31356ebd6 100644 --- a/src/app/topic/topic.module.ts +++ b/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,