More webapp changes+fixes

webapp/src/app/features/subscriptions/subscription-detail/subscription-detail.component.ts

@@ -0,0 +1,178 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
+import { NotificationService } from '../../../core/services/notification.service';
+import { ChannelCacheService, ResolvedChannel } from '../../../core/services/channel-cache.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { Subscription } from '../../../core/models';
+import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
+
+@Component({
+  selector: 'app-subscription-detail',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DatePipe,
+    RouterLink,
+    NzCardModule,
+    NzButtonModule,
+    NzIconModule,
+    NzTagModule,
+    NzSpinModule,
+    NzPopconfirmModule,
+    NzToolTipModule,
+    RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
+  ],
+  templateUrl: './subscription-detail.component.html',
+  styleUrl: './subscription-detail.component.scss'
+})
+export class SubscriptionDetailComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private notification = inject(NotificationService);
+  private channelCacheService = inject(ChannelCacheService);
+  private userCacheService = inject(UserCacheService);
+
+  subscription = signal<Subscription | null>(null);
+  loading = signal(true);
+  resolvedChannel = signal<ResolvedChannel | null>(null);
+  resolvedSubscriber = signal<ResolvedUser | null>(null);
+  resolvedOwner = signal<ResolvedUser | null>(null);
+
+  ngOnInit(): void {
+    const subscriptionId = this.route.snapshot.paramMap.get('id');
+    if (subscriptionId) {
+      this.loadSubscription(subscriptionId);
+    }
+  }
+
+  loadSubscription(subscriptionId: string): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loading.set(true);
+    this.apiService.getSubscription(userId, subscriptionId).subscribe({
+      next: (subscription) => {
+        this.subscription.set(subscription);
+        this.loading.set(false);
+        this.resolveChannel(subscription.channel_id);
+        this.resolveSubscriber(subscription.subscriber_user_id);
+        this.resolveOwner(subscription.channel_owner_user_id);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  private resolveChannel(channelId: string): void {
+    this.channelCacheService.resolveChannel(channelId).subscribe(resolved => {
+      this.resolvedChannel.set(resolved);
+    });
+  }
+
+  private resolveSubscriber(userId: string): void {
+    this.userCacheService.resolveUser(userId).subscribe(resolved => {
+      this.resolvedSubscriber.set(resolved);
+    });
+  }
+
+  private resolveOwner(userId: string): void {
+    this.userCacheService.resolveUser(userId).subscribe(resolved => {
+      this.resolvedOwner.set(resolved);
+    });
+  }
+
+  goBack(): void {
+    this.router.navigate(['/subscriptions']);
+  }
+
+  isOutgoing(): boolean {
+    const sub = this.subscription();
+    if (!sub) return false;
+    const userId = this.authService.getUserId();
+    return sub.subscriber_user_id === userId;
+  }
+
+  isOwner(): boolean {
+    const sub = this.subscription();
+    if (!sub) return false;
+    const userId = this.authService.getUserId();
+    return sub.channel_owner_user_id === userId;
+  }
+
+  getStatusInfo(): { label: string; color: string } {
+    const sub = this.subscription();
+    if (!sub) return { label: 'Unknown', color: 'default' };
+    if (sub.confirmed) {
+      return { label: 'Confirmed', color: 'green' };
+    }
+    return { label: 'Pending', color: 'orange' };
+  }
+
+  getTypeLabel(): { label: string; color: string } {
+    const sub = this.subscription();
+    if (!sub) return { label: 'Unknown', color: 'default' };
+    const userId = this.authService.getUserId();
+    if (sub.subscriber_user_id === sub.channel_owner_user_id) {
+      return { label: 'Own', color: 'green' };
+    }
+    if (sub.subscriber_user_id === userId) {
+      return { label: 'External', color: 'blue' };
+    }
+    return { label: 'Incoming', color: 'purple' };
+  }
+
+  acceptSubscription(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { confirmed: true }).subscribe({
+      next: (updated) => {
+        this.subscription.set(updated);
+        this.notification.success('Subscription accepted');
+      }
+    });
+  }
+
+  deactivateSubscription(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { confirmed: false }).subscribe({
+      next: (updated) => {
+        this.subscription.set(updated);
+        this.notification.success('Subscription deactivated');
+      }
+    });
+  }
+
+  deleteSubscription(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.deleteSubscription(userId, sub.subscription_id).subscribe({
+      next: () => {
+        this.notification.success('Subscription deleted');
+        this.router.navigate(['/subscriptions']);
+      }
+    });
+  }
+}