generated from nhcarrigan/template
feat: add primary badge selection for user profiles
Implements #49 - Allow users to select one primary badge to display on their profile instead of showing all badges at once. Changes: - Add PrimaryBadge enum to Prisma schema and shared types (STAFF, MOD, VIP, DISCORD) - Add primaryBadge field to User model and all user interfaces - Update settings component with badge selection dropdown - Only show badges the user actually has in the dropdown - Update profile component to display only selected badge (or all if none selected) - Add primaryBadge to admin profile edit modal - Update API routes and services to handle primaryBadge - Export PrimaryBadge enum from shared-types (not just as type) Additional fixes: - Fix Angular output naming: rename onEdit/onDelete to edit/delete - Update all parent components using comment-display outputs - Add type casting for Prisma PrimaryBadge enum to shared-types enum
This commit is contained in:
@@ -14,7 +14,7 @@ import { CommentsService } from '../../services/comments.service';
|
||||
import { UserService } from '../../services/user.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { ToastService } from '../../services/toast.service';
|
||||
import { ProfileReportWithUsers, CommentReportWithDetails, ReportStatus, ReportReason } from '@library/shared-types';
|
||||
import { ProfileReportWithUsers, CommentReportWithDetails, ReportStatus, ReportReason, PrimaryBadge } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-admin-reports',
|
||||
@@ -674,6 +674,31 @@ import { ProfileReportWithUsers, CommentReportWithDetails, ReportStatus, ReportR
|
||||
></textarea>
|
||||
<small class="form-help">{{ (profileEditForm.bio.length || 0) }} / 500 characters</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="primaryBadge">Primary Badge</label>
|
||||
<select
|
||||
id="primaryBadge"
|
||||
name="primaryBadge"
|
||||
[(ngModel)]="profileEditForm.primaryBadge"
|
||||
class="form-control"
|
||||
>
|
||||
<option [ngValue]="undefined">None (show all badges)</option>
|
||||
@if (editingProfile()?.profile?.badges.isStaff) {
|
||||
<option [ngValue]="PrimaryBadge.STAFF">Staff</option>
|
||||
}
|
||||
@if (editingProfile()?.profile?.badges.isMod) {
|
||||
<option [ngValue]="PrimaryBadge.MOD">Moderator</option>
|
||||
}
|
||||
@if (editingProfile()?.profile?.badges.isVip) {
|
||||
<option [ngValue]="PrimaryBadge.VIP">VIP</option>
|
||||
}
|
||||
@if (editingProfile()?.profile?.badges.inDiscord) {
|
||||
<option [ngValue]="PrimaryBadge.DISCORD">Discord Member</option>
|
||||
}
|
||||
</select>
|
||||
<small class="form-help">Choose one badge to display on profile, or show all</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
@@ -1462,8 +1487,9 @@ export class AdminReportsComponent implements OnInit {
|
||||
private toastService = inject(ToastService);
|
||||
private router = inject(Router);
|
||||
|
||||
// Make ReportStatus accessible in template
|
||||
// Make ReportStatus and PrimaryBadge accessible in template
|
||||
protected readonly ReportStatus = ReportStatus;
|
||||
protected readonly PrimaryBadge = PrimaryBadge;
|
||||
|
||||
reportType = signal<'profile' | 'comment'>('profile');
|
||||
allProfileReports = signal<ProfileReportWithUsers[]>([]);
|
||||
@@ -1487,6 +1513,7 @@ export class AdminReportsComponent implements OnInit {
|
||||
slug: '',
|
||||
bio: '',
|
||||
profilePublic: true,
|
||||
primaryBadge: undefined as PrimaryBadge | undefined,
|
||||
website: '',
|
||||
discordServer: '',
|
||||
bluesky: '',
|
||||
@@ -1773,6 +1800,7 @@ export class AdminReportsComponent implements OnInit {
|
||||
slug: profile.slug || '',
|
||||
bio: profile.bio || '',
|
||||
profilePublic: true, // We'll get this from the full user object if needed
|
||||
primaryBadge: profile.primaryBadge || undefined,
|
||||
website: profile.website || '',
|
||||
discordServer: profile.discordServer || '',
|
||||
bluesky: profile.bluesky || '',
|
||||
@@ -1798,6 +1826,7 @@ export class AdminReportsComponent implements OnInit {
|
||||
slug: '',
|
||||
bio: '',
|
||||
profilePublic: true,
|
||||
primaryBadge: undefined as PrimaryBadge | undefined,
|
||||
website: '',
|
||||
discordServer: '',
|
||||
bluesky: '',
|
||||
|
||||
@@ -471,8 +471,8 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(art.id)"
|
||||
(onEdit)="handleCommentEdit(art.id, $event)"
|
||||
(onDelete)="deleteComment(art.id, $event)"
|
||||
(edit)="handleCommentEdit(art.id, $event)"
|
||||
(delete)="deleteComment(art.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -658,8 +658,8 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(book.id)"
|
||||
(onEdit)="handleCommentEdit(book.id, $event)"
|
||||
(onDelete)="deleteComment(book.id, $event)"
|
||||
(edit)="handleCommentEdit(book.id, $event)"
|
||||
(delete)="deleteComment(book.id, $event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -42,7 +42,7 @@ import { ReportModalComponent } from '../report-modal/report-modal.component';
|
||||
<button (click)="startEdit(comment)" class="btn btn-secondary btn-xs">Edit</button>
|
||||
}
|
||||
@if (canDeleteComment(comment)) {
|
||||
<button (click)="onDelete.emit(comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
<button (click)="delete.emit(comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
}
|
||||
@if (canReportComment(comment)) {
|
||||
<button (click)="openReportModal(comment)" class="btn btn-warning btn-xs">Report</button>
|
||||
@@ -245,8 +245,8 @@ export class CommentDisplayComponent {
|
||||
readonly sanitizeService = inject(SanitizeService);
|
||||
|
||||
@Input({ required: true }) comments = signal<Comment[]>([]);
|
||||
@Output() onEdit = new EventEmitter<{ commentId: string; content: string }>();
|
||||
@Output() onDelete = new EventEmitter<string>();
|
||||
@Output() edit = new EventEmitter<{ commentId: string; content: string }>();
|
||||
@Output() delete = new EventEmitter<string>();
|
||||
|
||||
editingCommentId = signal<string | null>(null);
|
||||
editCommentContent = '';
|
||||
@@ -289,7 +289,7 @@ export class CommentDisplayComponent {
|
||||
}
|
||||
|
||||
saveEdit(commentId: string): void {
|
||||
this.onEdit.emit({ commentId, content: this.editCommentContent });
|
||||
this.edit.emit({ commentId, content: this.editCommentContent });
|
||||
this.cancelEdit();
|
||||
}
|
||||
|
||||
|
||||
@@ -611,8 +611,8 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(game.id)"
|
||||
(onEdit)="handleCommentEdit(game.id, $event)"
|
||||
(onDelete)="deleteComment(game.id, $event)"
|
||||
(edit)="handleCommentEdit(game.id, $event)"
|
||||
(delete)="deleteComment(game.id, $event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -613,8 +613,8 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(manga.id)"
|
||||
(onEdit)="handleCommentEdit(manga.id, $event)"
|
||||
(onDelete)="deleteComment(manga.id, $event)"
|
||||
(edit)="handleCommentEdit(manga.id, $event)"
|
||||
(delete)="deleteComment(manga.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -689,8 +689,8 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(music.id)"
|
||||
(onEdit)="handleCommentEdit(music.id, $event)"
|
||||
(onDelete)="deleteComment(music.id, $event)"
|
||||
(edit)="handleCommentEdit(music.id, $event)"
|
||||
(delete)="deleteComment(music.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ import { UserService, UserProfileResponse } from '../../services/user.service';
|
||||
import { ToastService } from '../../services/toast.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { ReportModalComponent } from '../report-modal/report-modal.component';
|
||||
import { PrimaryBadge } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-profile',
|
||||
@@ -58,17 +59,34 @@ import { ReportModalComponent } from '../report-modal/report-modal.component';
|
||||
</div>
|
||||
|
||||
<div class="badges-section">
|
||||
@if (profile()!.badges.isStaff) {
|
||||
<span class="badge badge-staff">Staff</span>
|
||||
}
|
||||
@if (profile()!.badges.isMod) {
|
||||
<span class="badge badge-mod">Moderator</span>
|
||||
}
|
||||
@if (profile()!.badges.isVip) {
|
||||
<span class="badge badge-vip">VIP</span>
|
||||
}
|
||||
@if (profile()!.badges.inDiscord) {
|
||||
<span class="badge badge-member">Discord Member</span>
|
||||
@if (profile()!.primaryBadge) {
|
||||
<!-- Show only the selected primary badge -->
|
||||
@if (profile()!.primaryBadge === PrimaryBadge.STAFF && profile()!.badges.isStaff) {
|
||||
<span class="badge badge-staff">Staff</span>
|
||||
}
|
||||
@if (profile()!.primaryBadge === PrimaryBadge.MOD && profile()!.badges.isMod) {
|
||||
<span class="badge badge-mod">Moderator</span>
|
||||
}
|
||||
@if (profile()!.primaryBadge === PrimaryBadge.VIP && profile()!.badges.isVip) {
|
||||
<span class="badge badge-vip">VIP</span>
|
||||
}
|
||||
@if (profile()!.primaryBadge === PrimaryBadge.DISCORD && profile()!.badges.inDiscord) {
|
||||
<span class="badge badge-member">Discord Member</span>
|
||||
}
|
||||
} @else {
|
||||
<!-- Show all badges if no primary badge is selected -->
|
||||
@if (profile()!.badges.isStaff) {
|
||||
<span class="badge badge-staff">Staff</span>
|
||||
}
|
||||
@if (profile()!.badges.isMod) {
|
||||
<span class="badge badge-mod">Moderator</span>
|
||||
}
|
||||
@if (profile()!.badges.isVip) {
|
||||
<span class="badge badge-vip">VIP</span>
|
||||
}
|
||||
@if (profile()!.badges.inDiscord) {
|
||||
<span class="badge badge-member">Discord Member</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -426,6 +444,9 @@ export class ProfileComponent implements OnInit {
|
||||
error = signal<string | null>(null);
|
||||
reportModalOpen = signal(false);
|
||||
|
||||
// Expose PrimaryBadge enum for template
|
||||
readonly PrimaryBadge = PrimaryBadge;
|
||||
|
||||
// Font Awesome icons
|
||||
faGlobe = faGlobe;
|
||||
faGithub = faGithub;
|
||||
|
||||
@@ -10,7 +10,7 @@ import { FormsModule } from '@angular/forms';
|
||||
import { UserService, UpdateUserSettingsRequest } from '../../services/user.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { ToastService } from '../../services/toast.service';
|
||||
import { User } from '@library/shared-types';
|
||||
import { User, PrimaryBadge } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
@@ -69,6 +69,30 @@ import { User } from '@library/shared-types';
|
||||
></textarea>
|
||||
<small class="form-help">{{ (formData.bio?.length || 0) }} / 500 characters</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="primaryBadge">Primary Badge</label>
|
||||
<select
|
||||
id="primaryBadge"
|
||||
name="primaryBadge"
|
||||
[(ngModel)]="formData.primaryBadge"
|
||||
>
|
||||
<option [ngValue]="undefined">None (show all badges)</option>
|
||||
@if (user()!.isStaff) {
|
||||
<option [ngValue]="PrimaryBadge.STAFF">Staff</option>
|
||||
}
|
||||
@if (user()!.isMod) {
|
||||
<option [ngValue]="PrimaryBadge.MOD">Moderator</option>
|
||||
}
|
||||
@if (user()!.isVip) {
|
||||
<option [ngValue]="PrimaryBadge.VIP">VIP</option>
|
||||
}
|
||||
@if (user()!.inDiscord) {
|
||||
<option [ngValue]="PrimaryBadge.DISCORD">Discord Member</option>
|
||||
}
|
||||
</select>
|
||||
<small class="form-help">Choose one badge to display on your profile, or show all</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
@@ -264,7 +288,8 @@ import { User } from '@library/shared-types';
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group textarea {
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid rgba(155, 89, 182, 0.5);
|
||||
@@ -275,8 +300,13 @@ import { User } from '@library/shared-types';
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]:focus,
|
||||
.form-group textarea:focus {
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-colour, #9b59b6);
|
||||
box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.3);
|
||||
@@ -375,11 +405,15 @@ export class SettingsComponent implements OnInit {
|
||||
loading = signal(true);
|
||||
saving = signal(false);
|
||||
|
||||
// Expose PrimaryBadge enum for template
|
||||
readonly PrimaryBadge = PrimaryBadge;
|
||||
|
||||
formData: UpdateUserSettingsRequest & { bio?: string } = {
|
||||
displayName: '',
|
||||
slug: '',
|
||||
bio: '',
|
||||
profilePublic: true,
|
||||
primaryBadge: undefined,
|
||||
website: '',
|
||||
discordServer: '',
|
||||
bluesky: '',
|
||||
@@ -398,6 +432,7 @@ export class SettingsComponent implements OnInit {
|
||||
slug: userData.slug || '',
|
||||
bio: userData.bio || '',
|
||||
profilePublic: userData.profilePublic ?? true,
|
||||
primaryBadge: userData.primaryBadge || undefined,
|
||||
website: userData.website || '',
|
||||
discordServer: userData.discordServer || '',
|
||||
bluesky: userData.bluesky || '',
|
||||
@@ -424,6 +459,7 @@ export class SettingsComponent implements OnInit {
|
||||
slug: this.formData.slug || undefined,
|
||||
bio: this.formData.bio || undefined,
|
||||
profilePublic: this.formData.profilePublic,
|
||||
primaryBadge: this.formData.primaryBadge || undefined,
|
||||
website: this.formData.website || undefined,
|
||||
discordServer: this.formData.discordServer || undefined,
|
||||
bluesky: this.formData.bluesky || undefined,
|
||||
|
||||
@@ -607,8 +607,8 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(show.id)"
|
||||
(onEdit)="handleCommentEdit(show.id, $event)"
|
||||
(onDelete)="deleteComment(show.id, $event)"
|
||||
(edit)="handleCommentEdit(show.id, $event)"
|
||||
(delete)="deleteComment(show.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ApiService } from './api.service';
|
||||
import { User } from '@library/shared-types';
|
||||
import { User, PrimaryBadge } from '@library/shared-types';
|
||||
|
||||
export interface UserProfileResponse {
|
||||
id: string;
|
||||
@@ -16,6 +16,7 @@ export interface UserProfileResponse {
|
||||
avatar?: string;
|
||||
bio?: string;
|
||||
slug?: string;
|
||||
primaryBadge?: PrimaryBadge;
|
||||
website?: string;
|
||||
discordServer?: string;
|
||||
bluesky?: string;
|
||||
@@ -43,6 +44,7 @@ export interface UpdateUserSettingsRequest {
|
||||
displayName?: string;
|
||||
bio?: string;
|
||||
profilePublic?: boolean;
|
||||
primaryBadge?: PrimaryBadge;
|
||||
website?: string;
|
||||
discordServer?: string;
|
||||
bluesky?: string;
|
||||
|
||||
Reference in New Issue
Block a user