Simple Managment webapp [LLM]

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

@@ -0,0 +1,186 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+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 { Subscription, SubscriptionFilter } from '../../../core/models';
+import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+
+type TabDirection = 'both' | 'outgoing' | 'incoming';
+
+@Component({
+  selector: 'app-subscription-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    NzTableModule,
+    NzButtonModule,
+    NzIconModule,
+    NzTagModule,
+    NzEmptyModule,
+    NzCardModule,
+    NzTabsModule,
+    NzPopconfirmModule,
+    NzModalModule,
+    NzFormModule,
+    NzInputModule,
+    NzToolTipModule,
+    RelativeTimePipe,
+  ],
+  templateUrl: './subscription-list.component.html',
+  styleUrl: './subscription-list.component.scss'
+})
+export class SubscriptionListComponent implements OnInit {
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private notification = inject(NotificationService);
+
+  subscriptions = signal<Subscription[]>([]);
+  loading = signal(false);
+  direction: TabDirection = 'both';
+
+  // Create subscription modal
+  showCreateModal = signal(false);
+  newChannelOwner = '';
+  newChannelName = '';
+  creating = signal(false);
+
+  ngOnInit(): void {
+    this.loadSubscriptions();
+  }
+
+  loadSubscriptions(): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loading.set(true);
+
+    const filter: SubscriptionFilter = {};
+    if (this.direction !== 'both') {
+      filter.direction = this.direction;
+    }
+
+    this.apiService.getSubscriptions(userId, filter).subscribe({
+      next: (response) => {
+        this.subscriptions.set(response.subscriptions);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  onTabChange(index: number): void {
+    const directions: TabDirection[] = ['both', 'outgoing', 'incoming'];
+    this.direction = directions[index];
+    this.loadSubscriptions();
+  }
+
+  isOutgoing(sub: Subscription): boolean {
+    const userId = this.authService.getUserId();
+    return sub.subscriber_user_id === userId;
+  }
+
+  isOwner(sub: Subscription): boolean {
+    const userId = this.authService.getUserId();
+    return sub.channel_owner_user_id === userId;
+  }
+
+  // Actions
+  acceptSubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { confirmed: true }).subscribe({
+      next: () => {
+        this.notification.success('Subscription accepted');
+        this.loadSubscriptions();
+      }
+    });
+  }
+
+  denySubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.deleteSubscription(userId, sub.subscription_id).subscribe({
+      next: () => {
+        this.notification.success('Subscription denied');
+        this.loadSubscriptions();
+      }
+    });
+  }
+
+  revokeSubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.deleteSubscription(userId, sub.subscription_id).subscribe({
+      next: () => {
+        this.notification.success('Subscription revoked');
+        this.loadSubscriptions();
+      }
+    });
+  }
+
+  // Create subscription
+  openCreateModal(): void {
+    this.newChannelOwner = '';
+    this.newChannelName = '';
+    this.showCreateModal.set(true);
+  }
+
+  closeCreateModal(): void {
+    this.showCreateModal.set(false);
+  }
+
+  createSubscription(): void {
+    const userId = this.authService.getUserId();
+    if (!userId || !this.newChannelOwner.trim() || !this.newChannelName.trim()) return;
+
+    this.creating.set(true);
+    this.apiService.createSubscription(userId, {
+      channel_owner_user_id: this.newChannelOwner.trim(),
+      channel_internal_name: this.newChannelName.trim()
+    }).subscribe({
+      next: () => {
+        this.notification.success('Subscription request sent');
+        this.closeCreateModal();
+        this.creating.set(false);
+        this.loadSubscriptions();
+      },
+      error: () => {
+        this.creating.set(false);
+      }
+    });
+  }
+
+  getStatusInfo(sub: Subscription): { label: string; color: string } {
+    if (sub.confirmed) {
+      return { label: 'Confirmed', color: 'green' };
+    }
+    return { label: 'Pending', color: 'orange' };
+  }
+
+  getDirectionLabel(sub: Subscription): string {
+    if (this.isOutgoing(sub)) {
+      return 'Outgoing';
+    }
+    return 'Incoming';
+  }
+}