Skip to content

Commit fb27b7c

Browse files
ilmartyrkilmartyrk
committed
fix: topic participants count is incorrect
1 parent ca4ad0f commit fb27b7c

File tree

5 files changed

+169
-30
lines changed

5 files changed

+169
-30
lines changed

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="info_items_wrap">
2+
<div class="info_header">
3+
<div class="info_title" translate="VIEWS.TOPICS_TOPICID.SECTION_PARTICIPANTS_HEADING"></div>
4+
<a class="manage_link" (click)="manageParticipants(topic)"
5+
*ngIf="canUpdate(topic)"><span translate="VIEWS.TOPICS_TOPICID.LNK_MANAGE"></span></a>
6+
</div>
7+
<div class="participants_count_wrap" *ngIf="members$ | async as members">
8+
<div class="participants_count">
9+
{{ topic.members.users.count || members.length }}
10+
</div>
11+
<div class="avatars_wrap">
12+
<ng-container *ngFor="let index of [0, 1, 2]">
13+
<div class="avatar" *ngIf="members[index]">
14+
<img *ngIf="members[index].imageUrl" [src]="members[index].imageUrl" [alt]="members[index].name || ''" />
15+
<div class="profile_image_filler" *ngIf="!members[index].imageUrl">
16+
<cos-initials *ngIf="members[index].name" [name]="members[index].name">
17+
</cos-initials>
18+
</div>
19+
</div>
20+
</ng-container>
21+
22+
<div class="avatar" *ngIf="members.length > 3">
23+
+ {{ topic.members.users.count - 3 }}
24+
</div>
25+
</div>
26+
</div>
27+
<button *ngIf="TopicService.canDelete(topic)" class="btn_medium_secondary bold"
28+
(click)="inviteMembers(topic)" translate="VIEWS.TOPICS_TOPICID.SECTION_PARTICIPANTS_BTN_SHARE"></button>
29+
</div>
30+

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.info_items_wrap {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 8px;
5+
6+
.info_header {
7+
display: flex;
8+
justify-content: space-between;
9+
10+
.info_title {
11+
font-size: 14px;
12+
font-style: normal;
13+
font-weight: 600;
14+
line-height: 16px;
15+
padding-bottom: 8px;
16+
display: flex;
17+
justify-content: space-between;
18+
align-items: center;
19+
color: var(--color-text);
20+
}
21+
}
22+
23+
.participants_count_wrap {
24+
display: flex;
25+
justify-content: space-between;
26+
27+
.participants_count {
28+
font-size: 40px;
29+
font-style: normal;
30+
font-weight: 600;
31+
line-height: 40px;
32+
}
33+
34+
.avatars_wrap {
35+
display: flex;
36+
37+
.avatar {
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
border-radius: 40px;
42+
width: 40px;
43+
height: 40px;
44+
border: 2px solid #f8fafc;
45+
margin-left: -10px;
46+
background-color: var(--color-secondary);
47+
font-size: 10px;
48+
font-style: normal;
49+
font-weight: 600;
50+
line-height: 16px;
51+
52+
&:first-child {
53+
margin-left: 0;
54+
}
55+
img {
56+
border: 2px solid #f8fafc;
57+
width: inherit;
58+
border-radius: 40px;
59+
aspect-ratio: 1;
60+
object-fit: cover;
61+
}
62+
.profile_image_filler {
63+
width: 100%;
64+
height: 100%;
65+
background-color: var(--color-surfaces);
66+
border-radius: 40px;
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
cos-initials {
71+
font-size: 14px;
72+
}
73+
}
74+
}
75+
}
76+
}
77+
}
78+

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Component, Input } from '@angular/core';
2+
import { Observable } from 'rxjs';
3+
import { Topic } from '@interfaces/topic';
4+
import { TopicService } from '@services/topic.service';
5+
import { DialogService } from '@shared/dialog';
6+
import { TopicParticipantsComponent } from '../topic-participants/topic-participants.component';
7+
import { TopicInviteDialogComponent } from '../topic-invite/topic-invite.component';
8+
9+
@Component({
10+
selector: 'topic-participants-section',
11+
templateUrl: './topic-participants-section.component.html',
12+
styleUrls: ['./topic-participants-section.component.scss'],
13+
standalone: false
14+
})
15+
export class TopicParticipantsSectionComponent {
16+
@Input() topic!: Topic;
17+
@Input() members$!: Observable<any[]>;
18+
19+
constructor(
20+
public TopicService: TopicService,
21+
private readonly DialogService: DialogService
22+
) {}
23+
24+
canUpdate(topic: Topic): boolean {
25+
return this.TopicService.canUpdate(topic);
26+
}
27+
28+
manageParticipants(topic: Topic): void {
29+
const participantsDialog = this.DialogService.open(
30+
TopicParticipantsComponent,
31+
{ data: { topic } }
32+
);
33+
participantsDialog.afterClosed().subscribe({
34+
next: (res) => {
35+
// Handle response if needed
36+
},
37+
error: (error) => {
38+
console.error('Error managing participants', error);
39+
},
40+
});
41+
}
42+
43+
inviteMembers(topic: Topic): void {
44+
const inviteDialog = this.DialogService.open(TopicInviteDialogComponent, {
45+
data: { topic },
46+
});
47+
inviteDialog.afterClosed().subscribe({
48+
next: (res) => {
49+
// Handle response if needed
50+
},
51+
error: (error) => {
52+
console.error('Error inviting members', error);
53+
},
54+
});
55+
}
56+
}
57+

‎src/app/topic/topic.component.html‎

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1095,35 +1095,7 @@
10951095
index: 4,
10961096
position: wWidth <= 1024 ? 'bottom' : 'left'
10971097
}">
1098-
<div class="info_items_wrap">
1099-
<div class="info_header">
1100-
<div class="info_title" translate="VIEWS.TOPICS_TOPICID.SECTION_PARTICIPANTS_HEADING"></div>
1101-
<a class="manage_link" (click)="manageParticipants(topic)" translate="VIEWS.TOPICS_TOPICID.LNK_MANAGE"
1102-
*ngIf="canUpdate(topic)"></a>
1103-
</div>
1104-
<div class="participants_count_wrap" *ngIf="members$ | async as members">
1105-
<div class="participants_count">
1106-
{{ members.length || topic.members.users.count }}
1107-
</div>
1108-
<div class="avatars_wrap">
1109-
<ng-container *ngFor="let index of [0, 1, 2]">
1110-
<div class="avatar" *ngIf="members[index]">
1111-
<img *ngIf="members[index].imageUrl" [src]="members[index].imageUrl" />
1112-
<div class="profile_image_filler" *ngIf="!members[index].imageUrl">
1113-
<cos-initials *ngIf="members[index].name" [name]="members[index].name">
1114-
</cos-initials>
1115-
</div>
1116-
</div>
1117-
</ng-container>
1118-
1119-
<div class="avatar" *ngIf="members.length > 3">
1120-
+ {{ topic.members.users.count - 3 }}
1121-
</div>
1122-
</div>
1123-
</div>
1124-
<button *ngIf="TopicService.canDelete(topic)" class="btn_medium_secondary bold"
1125-
(click)="inviteMembers(topic)" translate="VIEWS.TOPICS_TOPICID.SECTION_PARTICIPANTS_BTN_SHARE"></button>
1126-
</div>
1098+
<topic-participants-section [topic]="topic" [members$]="members$"></topic-participants-section>
11271099
</div>
11281100
<div class="info_section notifications" *ngIf="auth.loggedIn$ | async">
11291101
<div class="info_items_wrap">

‎src/app/topic/topic.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ import { TopicSettingsLockedComponent } from './components/topic-settings-locked
112112
import { AnonymousDraftDialogComponent } from '../ideation/components/anonymous-draft-dialog/anonymous-draft-dialog.component';
113113
import { CloseWithoutSavingDialogComponent } from '../ideation/components/close-without-saving-dialog/close-without-saving-dialog.component';
114114
import { TopicVoteCastComponent } from './components/topic-vote-cast/topic-vote-cast.component';
115+
import { TopicParticipantsSectionComponent } from './components/topic-participants-section/topic-participants-section.component';
115116

116117
@NgModule({
117118
declarations: [
@@ -195,7 +196,8 @@ import { TopicVoteCastComponent } from './components/topic-vote-cast/topic-vote-
195196
CloseVotingComponent,
196197
TopicTabsComponent,
197198
TopicSettingsLockedComponent,
198-
TopicVoteCastComponent
199+
TopicVoteCastComponent,
200+
TopicParticipantsSectionComponent
199201
],
200202
imports: [
201203
LinkyModule,

0 commit comments

Comments
 (0)