Simple Managment webapp [LLM]
This commit is contained in:
@@ -0,0 +1,250 @@
|
||||
<div class="page-content">
|
||||
@if (loading()) {
|
||||
<div class="loading-container">
|
||||
<nz-spin nzSimple nzSize="large"></nz-spin>
|
||||
</div>
|
||||
} @else if (channel()) {
|
||||
<div class="detail-header">
|
||||
<button nz-button (click)="goBack()">
|
||||
<span nz-icon nzType="arrow-left" nzTheme="outline"></span>
|
||||
Back to Channels
|
||||
</button>
|
||||
@if (isOwner()) {
|
||||
<div class="header-actions">
|
||||
<button nz-button (click)="openEditModal()">
|
||||
<span nz-icon nzType="edit"></span>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
nz-button
|
||||
nzType="primary"
|
||||
nzDanger
|
||||
nz-popconfirm
|
||||
nzPopconfirmTitle="Are you sure you want to delete this channel? All messages and subscriptions will be lost."
|
||||
nzPopconfirmPlacement="bottomRight"
|
||||
(nzOnConfirm)="deleteChannel()"
|
||||
[nzLoading]="deleting()"
|
||||
>
|
||||
<span nz-icon nzType="delete"></span>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<nz-card [nzTitle]="channel()!.display_name">
|
||||
<nz-descriptions nzBordered [nzColumn]="2">
|
||||
<nz-descriptions-item nzTitle="Channel ID" [nzSpan]="2">
|
||||
<span class="mono">{{ channel()!.channel_id }}</span>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Internal Name">
|
||||
<span class="mono">{{ channel()!.internal_name }}</span>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Status">
|
||||
<nz-tag [nzColor]="getSubscriptionStatus().color">
|
||||
{{ getSubscriptionStatus().label }}
|
||||
</nz-tag>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Owner" [nzSpan]="2">
|
||||
<span class="mono">{{ channel()!.owner_user_id }}</span>
|
||||
</nz-descriptions-item>
|
||||
@if (channel()!.description_name) {
|
||||
<nz-descriptions-item nzTitle="Description" [nzSpan]="2">
|
||||
{{ channel()!.description_name }}
|
||||
</nz-descriptions-item>
|
||||
}
|
||||
<nz-descriptions-item nzTitle="Messages Sent">
|
||||
{{ channel()!.messages_sent }}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Last Sent">
|
||||
@if (channel()!.timestamp_lastsent) {
|
||||
{{ channel()!.timestamp_lastsent | relativeTime }}
|
||||
} @else {
|
||||
Never
|
||||
}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Created" [nzSpan]="2">
|
||||
{{ channel()!.timestamp_created }}
|
||||
</nz-descriptions-item>
|
||||
</nz-descriptions>
|
||||
</nz-card>
|
||||
|
||||
@if (isOwner()) {
|
||||
<nz-card nzTitle="Keys" class="mt-16">
|
||||
@if (channel()!.subscribe_key) {
|
||||
<div class="key-section">
|
||||
<label>Subscribe Key</label>
|
||||
<nz-input-group [nzSuffix]="subscribeKeySuffix">
|
||||
<input
|
||||
type="text"
|
||||
nz-input
|
||||
[value]="channel()!.subscribe_key"
|
||||
readonly
|
||||
class="mono"
|
||||
/>
|
||||
</nz-input-group>
|
||||
<ng-template #subscribeKeySuffix>
|
||||
<span
|
||||
nz-icon
|
||||
nzType="copy"
|
||||
class="action-icon"
|
||||
nz-tooltip
|
||||
nzTooltipTitle="Copy"
|
||||
[appCopyToClipboard]="channel()!.subscribe_key!"
|
||||
></span>
|
||||
<span
|
||||
nz-icon
|
||||
nzType="qrcode"
|
||||
class="action-icon"
|
||||
nz-tooltip
|
||||
nzTooltipTitle="Show QR Code"
|
||||
(click)="showQrCode()"
|
||||
></span>
|
||||
</ng-template>
|
||||
<div class="key-actions">
|
||||
<button
|
||||
nz-button
|
||||
nzSize="small"
|
||||
nz-popconfirm
|
||||
nzPopconfirmTitle="Regenerate subscribe key? Existing subscribers will need the new key."
|
||||
(nzOnConfirm)="regenerateSubscribeKey()"
|
||||
>
|
||||
Regenerate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (channel()!.send_key) {
|
||||
<nz-divider></nz-divider>
|
||||
<div class="key-section">
|
||||
<label>Send Key</label>
|
||||
<nz-input-group [nzSuffix]="sendKeySuffix">
|
||||
<input
|
||||
type="text"
|
||||
nz-input
|
||||
[value]="channel()!.send_key"
|
||||
readonly
|
||||
class="mono"
|
||||
/>
|
||||
</nz-input-group>
|
||||
<ng-template #sendKeySuffix>
|
||||
<span
|
||||
nz-icon
|
||||
nzType="copy"
|
||||
class="action-icon"
|
||||
nz-tooltip
|
||||
nzTooltipTitle="Copy"
|
||||
[appCopyToClipboard]="channel()!.send_key!"
|
||||
></span>
|
||||
</ng-template>
|
||||
<div class="key-actions">
|
||||
<button
|
||||
nz-button
|
||||
nzSize="small"
|
||||
nz-popconfirm
|
||||
nzPopconfirmTitle="Regenerate send key?"
|
||||
(nzOnConfirm)="regenerateSendKey()"
|
||||
>
|
||||
Regenerate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</nz-card>
|
||||
|
||||
<nz-card nzTitle="Subscriptions" class="mt-16">
|
||||
<nz-table
|
||||
#subscriptionTable
|
||||
[nzData]="subscriptions()"
|
||||
[nzLoading]="loadingSubscriptions()"
|
||||
[nzShowPagination]="false"
|
||||
nzSize="small"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Subscriber</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (sub of subscriptions(); track sub.subscription_id) {
|
||||
<tr>
|
||||
<td>
|
||||
<span class="mono">{{ sub.subscriber_user_id }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<nz-tag [nzColor]="sub.confirmed ? 'green' : 'orange'">
|
||||
{{ sub.confirmed ? 'Confirmed' : 'Pending' }}
|
||||
</nz-tag>
|
||||
</td>
|
||||
<td>{{ sub.timestamp_created | relativeTime }}</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<nz-empty nzNotFoundContent="No subscriptions"></nz-empty>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</nz-table>
|
||||
</nz-card>
|
||||
}
|
||||
} @else {
|
||||
<nz-card>
|
||||
<div class="not-found">
|
||||
<p>Channel not found</p>
|
||||
<button nz-button nzType="primary" (click)="goBack()">
|
||||
Back to Channels
|
||||
</button>
|
||||
</div>
|
||||
</nz-card>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal -->
|
||||
<nz-modal
|
||||
[(nzVisible)]="showEditModal"
|
||||
nzTitle="Edit Channel"
|
||||
(nzOnCancel)="closeEditModal()"
|
||||
(nzOnOk)="saveChannel()"
|
||||
[nzOkLoading]="saving()"
|
||||
>
|
||||
<ng-container *nzModalContent>
|
||||
<nz-form-item>
|
||||
<nz-form-label>Display Name</nz-form-label>
|
||||
<nz-form-control>
|
||||
<input
|
||||
type="text"
|
||||
nz-input
|
||||
[(ngModel)]="editDisplayName"
|
||||
/>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item class="mb-0">
|
||||
<nz-form-label>Description</nz-form-label>
|
||||
<nz-form-control>
|
||||
<textarea
|
||||
nz-input
|
||||
rows="3"
|
||||
[(ngModel)]="editDescription"
|
||||
></textarea>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</ng-container>
|
||||
</nz-modal>
|
||||
|
||||
<!-- QR Code Modal -->
|
||||
<nz-modal
|
||||
[(nzVisible)]="showQrModal"
|
||||
nzTitle="Subscribe QR Code"
|
||||
(nzOnCancel)="closeQrModal()"
|
||||
[nzFooter]="null"
|
||||
>
|
||||
<ng-container *nzModalContent>
|
||||
<app-qr-code-display [data]="qrCodeData()"></app-qr-code-display>
|
||||
<p class="qr-hint">Scan this QR code with the SimpleCloudNotifier app to subscribe to this channel.</p>
|
||||
</ng-container>
|
||||
</nz-modal>
|
||||
@@ -0,0 +1,52 @@
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.key-section {
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.key-actions {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
margin-left: 8px;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.not-found {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
|
||||
p {
|
||||
color: #999;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-hint {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
import { Component, inject, signal, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NzCardModule } from 'ng-zorro-antd/card';
|
||||
import { NzButtonModule } from 'ng-zorro-antd/button';
|
||||
import { NzIconModule } from 'ng-zorro-antd/icon';
|
||||
import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
|
||||
import { NzTagModule } from 'ng-zorro-antd/tag';
|
||||
import { NzSpinModule } from 'ng-zorro-antd/spin';
|
||||
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
|
||||
import { NzDividerModule } from 'ng-zorro-antd/divider';
|
||||
import { NzInputModule } from 'ng-zorro-antd/input';
|
||||
import { NzModalModule } from 'ng-zorro-antd/modal';
|
||||
import { NzFormModule } from 'ng-zorro-antd/form';
|
||||
import { NzTableModule } from 'ng-zorro-antd/table';
|
||||
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
|
||||
import { NzEmptyModule } from 'ng-zorro-antd/empty';
|
||||
import { ApiService } from '../../../core/services/api.service';
|
||||
import { AuthService } from '../../../core/services/auth.service';
|
||||
import { NotificationService } from '../../../core/services/notification.service';
|
||||
import { ChannelWithSubscription, Subscription } from '../../../core/models';
|
||||
import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
|
||||
import { CopyToClipboardDirective } from '../../../shared/directives/copy-to-clipboard.directive';
|
||||
import { QrCodeDisplayComponent } from '../../../shared/components/qr-code-display/qr-code-display.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-channel-detail',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
NzCardModule,
|
||||
NzButtonModule,
|
||||
NzIconModule,
|
||||
NzDescriptionsModule,
|
||||
NzTagModule,
|
||||
NzSpinModule,
|
||||
NzPopconfirmModule,
|
||||
NzDividerModule,
|
||||
NzInputModule,
|
||||
NzModalModule,
|
||||
NzFormModule,
|
||||
NzTableModule,
|
||||
NzToolTipModule,
|
||||
NzEmptyModule,
|
||||
RelativeTimePipe,
|
||||
CopyToClipboardDirective,
|
||||
QrCodeDisplayComponent,
|
||||
],
|
||||
templateUrl: './channel-detail.component.html',
|
||||
styleUrl: './channel-detail.component.scss'
|
||||
})
|
||||
export class ChannelDetailComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private apiService = inject(ApiService);
|
||||
private authService = inject(AuthService);
|
||||
private notification = inject(NotificationService);
|
||||
|
||||
channel = signal<ChannelWithSubscription | null>(null);
|
||||
subscriptions = signal<Subscription[]>([]);
|
||||
loading = signal(true);
|
||||
loadingSubscriptions = signal(false);
|
||||
deleting = signal(false);
|
||||
|
||||
// Edit modal
|
||||
showEditModal = signal(false);
|
||||
editDisplayName = '';
|
||||
editDescription = '';
|
||||
saving = signal(false);
|
||||
|
||||
// QR modal
|
||||
showQrModal = signal(false);
|
||||
qrCodeData = signal('');
|
||||
|
||||
ngOnInit(): void {
|
||||
const channelId = this.route.snapshot.paramMap.get('id');
|
||||
if (channelId) {
|
||||
this.loadChannel(channelId);
|
||||
}
|
||||
}
|
||||
|
||||
loadChannel(channelId: string): void {
|
||||
const userId = this.authService.getUserId();
|
||||
if (!userId) return;
|
||||
|
||||
this.loading.set(true);
|
||||
this.apiService.getChannel(userId, channelId).subscribe({
|
||||
next: (channel) => {
|
||||
this.channel.set(channel);
|
||||
this.loading.set(false);
|
||||
if (this.isOwner()) {
|
||||
this.loadSubscriptions(channelId);
|
||||
}
|
||||
},
|
||||
error: () => {
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadSubscriptions(channelId: string): void {
|
||||
const userId = this.authService.getUserId();
|
||||
if (!userId) return;
|
||||
|
||||
this.loadingSubscriptions.set(true);
|
||||
this.apiService.getChannelSubscriptions(userId, channelId).subscribe({
|
||||
next: (response) => {
|
||||
this.subscriptions.set(response.subscriptions);
|
||||
this.loadingSubscriptions.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.loadingSubscriptions.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
this.router.navigate(['/channels']);
|
||||
}
|
||||
|
||||
isOwner(): boolean {
|
||||
const channel = this.channel();
|
||||
const userId = this.authService.getUserId();
|
||||
return channel?.owner_user_id === userId;
|
||||
}
|
||||
|
||||
// Edit methods
|
||||
openEditModal(): void {
|
||||
const channel = this.channel();
|
||||
if (!channel) return;
|
||||
|
||||
this.editDisplayName = channel.display_name;
|
||||
this.editDescription = channel.description_name || '';
|
||||
this.showEditModal.set(true);
|
||||
}
|
||||
|
||||
closeEditModal(): void {
|
||||
this.showEditModal.set(false);
|
||||
}
|
||||
|
||||
saveChannel(): void {
|
||||
const channel = this.channel();
|
||||
const userId = this.authService.getUserId();
|
||||
if (!channel || !userId) return;
|
||||
|
||||
this.saving.set(true);
|
||||
this.apiService.updateChannel(userId, channel.channel_id, {
|
||||
display_name: this.editDisplayName,
|
||||
description_name: this.editDescription || undefined
|
||||
}).subscribe({
|
||||
next: (updated) => {
|
||||
this.channel.set(updated);
|
||||
this.notification.success('Channel updated');
|
||||
this.closeEditModal();
|
||||
this.saving.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.saving.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Delete channel
|
||||
deleteChannel(): void {
|
||||
const channel = this.channel();
|
||||
const userId = this.authService.getUserId();
|
||||
if (!channel || !userId) return;
|
||||
|
||||
this.deleting.set(true);
|
||||
this.apiService.deleteChannel(userId, channel.channel_id).subscribe({
|
||||
next: () => {
|
||||
this.notification.success('Channel deleted');
|
||||
this.router.navigate(['/channels']);
|
||||
},
|
||||
error: () => {
|
||||
this.deleting.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Regenerate keys
|
||||
regenerateSubscribeKey(): void {
|
||||
const channel = this.channel();
|
||||
const userId = this.authService.getUserId();
|
||||
if (!channel || !userId) return;
|
||||
|
||||
this.apiService.updateChannel(userId, channel.channel_id, {
|
||||
subscribe_key: 'true'
|
||||
}).subscribe({
|
||||
next: (updated) => {
|
||||
this.channel.set(updated);
|
||||
this.notification.success('Subscribe key regenerated');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
regenerateSendKey(): void {
|
||||
const channel = this.channel();
|
||||
const userId = this.authService.getUserId();
|
||||
if (!channel || !userId) return;
|
||||
|
||||
this.apiService.updateChannel(userId, channel.channel_id, {
|
||||
send_key: 'true'
|
||||
}).subscribe({
|
||||
next: (updated) => {
|
||||
this.channel.set(updated);
|
||||
this.notification.success('Send key regenerated');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// QR Code
|
||||
showQrCode(): void {
|
||||
const channel = this.channel();
|
||||
if (!channel || !channel.subscribe_key) return;
|
||||
|
||||
const qrText = [
|
||||
'@scn.channel.subscribe',
|
||||
'v1',
|
||||
channel.display_name,
|
||||
channel.owner_user_id,
|
||||
channel.channel_id,
|
||||
channel.subscribe_key
|
||||
].join('\n');
|
||||
|
||||
this.qrCodeData.set(qrText);
|
||||
this.showQrModal.set(true);
|
||||
}
|
||||
|
||||
closeQrModal(): void {
|
||||
this.showQrModal.set(false);
|
||||
}
|
||||
|
||||
getSubscriptionStatus(): { label: string; color: string } {
|
||||
const channel = this.channel();
|
||||
if (!channel) return { label: 'Unknown', color: 'default' };
|
||||
|
||||
if (this.isOwner()) {
|
||||
if (channel.subscription) {
|
||||
return { label: 'Owned & Subscribed', color: 'green' };
|
||||
}
|
||||
return { label: 'Owned', color: 'blue' };
|
||||
}
|
||||
|
||||
if (channel.subscription) {
|
||||
if (channel.subscription.confirmed) {
|
||||
return { label: 'Subscribed', color: 'green' };
|
||||
}
|
||||
return { label: 'Pending', color: 'orange' };
|
||||
}
|
||||
|
||||
return { label: 'Not Subscribed', color: 'default' };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
<div class="page-content">
|
||||
<div class="page-header">
|
||||
<h2>Channels</h2>
|
||||
<div class="header-actions">
|
||||
<button nz-button (click)="loadChannels()">
|
||||
<span nz-icon nzType="reload"></span>
|
||||
Refresh
|
||||
</button>
|
||||
<button nz-button nzType="primary" (click)="openCreateModal()">
|
||||
<span nz-icon nzType="plus"></span>
|
||||
Create Channel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nz-card class="filter-card">
|
||||
<nz-radio-group [(ngModel)]="selector" (ngModelChange)="onSelectorChange()">
|
||||
<label nz-radio-button nzValue="all">All</label>
|
||||
<label nz-radio-button nzValue="owned">Owned</label>
|
||||
<label nz-radio-button nzValue="subscribed">Subscribed</label>
|
||||
<label nz-radio-button nzValue="subscribed_any">Subscribed (Any)</label>
|
||||
</nz-radio-group>
|
||||
</nz-card>
|
||||
|
||||
<nz-card>
|
||||
<nz-table
|
||||
#channelTable
|
||||
[nzData]="channels()"
|
||||
[nzLoading]="loading()"
|
||||
[nzShowPagination]="false"
|
||||
nzSize="middle"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th nzWidth="25%">Name</th>
|
||||
<th nzWidth="20%">Internal Name</th>
|
||||
<th nzWidth="15%">Status</th>
|
||||
<th nzWidth="15%">Messages</th>
|
||||
<th nzWidth="25%">Last Sent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (channel of channels(); track channel.channel_id) {
|
||||
<tr class="clickable-row" (click)="viewChannel(channel)">
|
||||
<td>
|
||||
<div class="channel-name">{{ channel.display_name }}</div>
|
||||
@if (channel.description_name) {
|
||||
<div class="channel-description">{{ channel.description_name }}</div>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<span class="mono">{{ channel.internal_name }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<nz-tag [nzColor]="getSubscriptionStatus(channel).color">
|
||||
{{ getSubscriptionStatus(channel).label }}
|
||||
</nz-tag>
|
||||
</td>
|
||||
<td>{{ channel.messages_sent }}</td>
|
||||
<td>
|
||||
@if (channel.timestamp_lastsent) {
|
||||
<span nz-tooltip [nzTooltipTitle]="channel.timestamp_lastsent">
|
||||
{{ channel.timestamp_lastsent | relativeTime }}
|
||||
</span>
|
||||
} @else {
|
||||
<span class="text-muted">Never</span>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<nz-empty nzNotFoundContent="No channels found"></nz-empty>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</nz-table>
|
||||
</nz-card>
|
||||
</div>
|
||||
|
||||
<!-- Create Channel Modal -->
|
||||
<nz-modal
|
||||
[(nzVisible)]="showCreateModal"
|
||||
nzTitle="Create Channel"
|
||||
(nzOnCancel)="closeCreateModal()"
|
||||
(nzOnOk)="createChannel()"
|
||||
[nzOkLoading]="creating()"
|
||||
[nzOkDisabled]="!newChannelName.trim()"
|
||||
>
|
||||
<ng-container *nzModalContent>
|
||||
<nz-form-item>
|
||||
<nz-form-label>Channel Name</nz-form-label>
|
||||
<nz-form-control>
|
||||
<input
|
||||
type="text"
|
||||
nz-input
|
||||
placeholder="Enter channel name"
|
||||
[(ngModel)]="newChannelName"
|
||||
/>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
|
||||
<nz-form-item class="mb-0">
|
||||
<label nz-checkbox [(ngModel)]="newChannelSubscribe">
|
||||
Subscribe to this channel
|
||||
</label>
|
||||
</nz-form-item>
|
||||
</ng-container>
|
||||
</nz-modal>
|
||||
@@ -0,0 +1,34 @@
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.channel-name {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.channel-description {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import { Component, inject, signal, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router } from '@angular/router';
|
||||
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 { NzBadgeModule } from 'ng-zorro-antd/badge';
|
||||
import { NzEmptyModule } from 'ng-zorro-antd/empty';
|
||||
import { NzCardModule } from 'ng-zorro-antd/card';
|
||||
import { NzRadioModule } from 'ng-zorro-antd/radio';
|
||||
import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
|
||||
import { NzFormModule } from 'ng-zorro-antd/form';
|
||||
import { NzInputModule } from 'ng-zorro-antd/input';
|
||||
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
|
||||
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 { ChannelWithSubscription, ChannelSelector } from '../../../core/models';
|
||||
import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'app-channel-list',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
NzTableModule,
|
||||
NzButtonModule,
|
||||
NzIconModule,
|
||||
NzTagModule,
|
||||
NzBadgeModule,
|
||||
NzEmptyModule,
|
||||
NzCardModule,
|
||||
NzRadioModule,
|
||||
NzModalModule,
|
||||
NzFormModule,
|
||||
NzInputModule,
|
||||
NzCheckboxModule,
|
||||
NzToolTipModule,
|
||||
RelativeTimePipe,
|
||||
],
|
||||
templateUrl: './channel-list.component.html',
|
||||
styleUrl: './channel-list.component.scss'
|
||||
})
|
||||
export class ChannelListComponent implements OnInit {
|
||||
private apiService = inject(ApiService);
|
||||
private authService = inject(AuthService);
|
||||
private notification = inject(NotificationService);
|
||||
private modal = inject(NzModalService);
|
||||
private router = inject(Router);
|
||||
|
||||
channels = signal<ChannelWithSubscription[]>([]);
|
||||
loading = signal(false);
|
||||
selector: ChannelSelector = 'all';
|
||||
|
||||
// Create channel modal
|
||||
showCreateModal = signal(false);
|
||||
newChannelName = '';
|
||||
newChannelSubscribe = true;
|
||||
creating = signal(false);
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadChannels();
|
||||
}
|
||||
|
||||
loadChannels(): void {
|
||||
const userId = this.authService.getUserId();
|
||||
if (!userId) return;
|
||||
|
||||
this.loading.set(true);
|
||||
this.apiService.getChannels(userId, this.selector).subscribe({
|
||||
next: (response) => {
|
||||
this.channels.set(response.channels);
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onSelectorChange(): void {
|
||||
this.loadChannels();
|
||||
}
|
||||
|
||||
viewChannel(channel: ChannelWithSubscription): void {
|
||||
this.router.navigate(['/channels', channel.channel_id]);
|
||||
}
|
||||
|
||||
openCreateModal(): void {
|
||||
this.newChannelName = '';
|
||||
this.newChannelSubscribe = true;
|
||||
this.showCreateModal.set(true);
|
||||
}
|
||||
|
||||
closeCreateModal(): void {
|
||||
this.showCreateModal.set(false);
|
||||
}
|
||||
|
||||
createChannel(): void {
|
||||
const userId = this.authService.getUserId();
|
||||
if (!userId || !this.newChannelName.trim()) return;
|
||||
|
||||
this.creating.set(true);
|
||||
this.apiService.createChannel(userId, {
|
||||
name: this.newChannelName.trim(),
|
||||
subscribe: this.newChannelSubscribe
|
||||
}).subscribe({
|
||||
next: (channel) => {
|
||||
this.notification.success('Channel created successfully');
|
||||
this.closeCreateModal();
|
||||
this.creating.set(false);
|
||||
this.loadChannels();
|
||||
},
|
||||
error: () => {
|
||||
this.creating.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getSubscriptionStatus(channel: ChannelWithSubscription): { label: string; color: string } {
|
||||
const userId = this.authService.getUserId();
|
||||
|
||||
if (channel.owner_user_id === userId) {
|
||||
if (channel.subscription) {
|
||||
return { label: 'Owned & Subscribed', color: 'green' };
|
||||
}
|
||||
return { label: 'Owned', color: 'blue' };
|
||||
}
|
||||
|
||||
if (channel.subscription) {
|
||||
if (channel.subscription.confirmed) {
|
||||
return { label: 'Subscribed', color: 'green' };
|
||||
}
|
||||
return { label: 'Pending', color: 'orange' };
|
||||
}
|
||||
|
||||
return { label: 'Not Subscribed', color: 'default' };
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user