Mikescher/SimpleCloudNotifier
1
0
Fork 0
Code Pull Requests Actions Releases Activity

Simple Managment webapp [LLM]

Browse Source
This commit is contained in:
Mike Schwörer
2025-12-03 19:07:23 +01:00
parent 8306992533
commit 01df2b49f6
6 changed files with 86 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/src/app/core/models/subscription.model.ts
View File

@@ -31,5 +31,6 @@ export interface ConfirmSubscriptionRequest {
export interface SubscriptionListResponse { export interface SubscriptionListResponse {
subscriptions: Subscription[]; subscriptions: Subscription[];
next_page_token?: string; next_page_token?: string;
page_size?: number; page_size: number;
total_count: number;
} }

39
webapp/src/app/features/messages/message-list/message-list.component.html
View File

@@ -45,15 +45,15 @@
</div> </div>
} }
<nz-card> <nz-table
<nz-table #messageTable
#messageTable nzBordered
[nzData]="messages()" [nzData]="messages()"
[nzLoading]="loading()" [nzLoading]="loading()"
[nzShowPagination]="false" [nzShowPagination]="false"
[nzNoResult]="noResultTpl" [nzNoResult]="noResultTpl"
nzSize="middle" nzSize="middle"
> >
<ng-template #noResultTpl></ng-template> <ng-template #noResultTpl></ng-template>
<thead> <thead>
<tr> <tr>
@@ -108,16 +108,15 @@
</tr> </tr>
} }
</tbody> </tbody>
</nz-table> </nz-table>
<div class="pagination-controls"> <div class="pagination-controls">
<nz-pagination <nz-pagination
[nzPageIndex]="currentPage()" [nzPageIndex]="currentPage()"
[nzPageSize]="pageSize" [nzPageSize]="pageSize"
[nzTotal]="totalCount()" [nzTotal]="totalCount()"
[nzDisabled]="loading()" [nzDisabled]="loading()"
(nzPageIndexChange)="goToPage($event)" (nzPageIndexChange)="goToPage($event)"
></nz-pagination> ></nz-pagination>
</div> </div>
</nz-card>
</div> </div>

2
webapp/src/app/features/messages/message-list/message-list.component.ts
View File

@@ -9,7 +9,6 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzEmptyModule } from 'ng-zorro-antd/empty';
import { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzSpinModule } from 'ng-zorro-antd/spin';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { NzPaginationModule } from 'ng-zorro-antd/pagination'; import { NzPaginationModule } from 'ng-zorro-antd/pagination';
import { ApiService } from '../../../core/services/api.service'; import { ApiService } from '../../../core/services/api.service';
@@ -30,7 +29,6 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
NzIconModule, NzIconModule,
NzEmptyModule, NzEmptyModule,
NzSpinModule, NzSpinModule,
NzCardModule,
NzToolTipModule, NzToolTipModule,
NzPaginationModule, NzPaginationModule,
RelativeTimePipe, RelativeTimePipe,

61
webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.html
View File

@@ -13,32 +13,32 @@
</div> </div>
</div> </div>
<nz-card> <nz-tabset (nzSelectedIndexChange)="onTabChange($event)">
<nz-tabset (nzSelectedIndexChange)="onTabChange($event)"> <nz-tab nzTitle="All"></nz-tab>
<nz-tab nzTitle="All"></nz-tab> <nz-tab nzTitle="Own"></nz-tab>
<nz-tab nzTitle="Own"></nz-tab> <nz-tab nzTitle="Deactivated"></nz-tab>
<nz-tab nzTitle="Deactivated"></nz-tab> <nz-tab nzTitle="External"></nz-tab>
<nz-tab nzTitle="External"></nz-tab> <nz-tab nzTitle="Incoming"></nz-tab>
<nz-tab nzTitle="Incoming"></nz-tab> </nz-tabset>
</nz-tabset>
@if (getTabDescription()) { @if (getTabDescription()) {
<nz-alert <nz-alert
nzType="info" nzType="info"
[nzMessage]="getTabDescription()!" [nzMessage]="getTabDescription()!"
nzShowIcon nzShowIcon
style="margin-bottom: 16px;" style="margin-bottom: 16px;"
></nz-alert> ></nz-alert>
} }
<nz-table <nz-table
#subscriptionTable #subscriptionTable
[nzData]="subscriptions()" nzBordered
[nzLoading]="loading()" [nzData]="subscriptions()"
[nzShowPagination]="false" [nzLoading]="loading()"
[nzNoResult]="noResultTpl" [nzShowPagination]="false"
nzSize="middle" [nzNoResult]="noResultTpl"
> nzSize="middle"
>
<ng-template #noResultTpl></ng-template> <ng-template #noResultTpl></ng-template>
<thead> <thead>
<tr> <tr>
@@ -126,8 +126,17 @@
</tr> </tr>
} }
</tbody> </tbody>
</nz-table> </nz-table>
</nz-card>
<div class="pagination-controls">
<nz-pagination
[nzPageIndex]="currentPage()"
[nzPageSize]="pageSize"
[nzTotal]="totalCount()"
[nzDisabled]="loading()"
(nzPageIndexChange)="goToPage($event)"
></nz-pagination>
</div>
</div> </div>
<!-- Create Subscription Modal --> <!-- Create Subscription Modal -->

6
webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.scss
View File

@@ -30,3 +30,9 @@
font-size: 13px; font-size: 13px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.pagination-controls {
display: flex;
justify-content: center;
padding: 16px 0;
}

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

@@ -6,7 +6,6 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzTagModule } from 'ng-zorro-antd/tag'; import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzEmptyModule } from 'ng-zorro-antd/empty';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzTabsModule } from 'ng-zorro-antd/tabs'; import { NzTabsModule } from 'ng-zorro-antd/tabs';
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
import { NzModalModule } from 'ng-zorro-antd/modal'; import { NzModalModule } from 'ng-zorro-antd/modal';
@@ -14,6 +13,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input'; import { NzInputModule } from 'ng-zorro-antd/input';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { NzAlertModule } from 'ng-zorro-antd/alert'; import { NzAlertModule } from 'ng-zorro-antd/alert';
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
import { ApiService } from '../../../core/services/api.service'; import { ApiService } from '../../../core/services/api.service';
import { AuthService } from '../../../core/services/auth.service'; import { AuthService } from '../../../core/services/auth.service';
import { NotificationService } from '../../../core/services/notification.service'; import { NotificationService } from '../../../core/services/notification.service';
@@ -46,7 +46,6 @@ const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
NzIconModule, NzIconModule,
NzTagModule, NzTagModule,
NzEmptyModule, NzEmptyModule,
NzCardModule,
NzTabsModule, NzTabsModule,
NzPopconfirmModule, NzPopconfirmModule,
NzModalModule, NzModalModule,
@@ -54,6 +53,7 @@ const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
NzInputModule, NzInputModule,
NzToolTipModule, NzToolTipModule,
NzAlertModule, NzAlertModule,
NzPaginationModule,
RelativeTimePipe, RelativeTimePipe,
], ],
templateUrl: './subscription-list.component.html', templateUrl: './subscription-list.component.html',
@@ -70,6 +70,11 @@ export class SubscriptionListComponent implements OnInit {
loading = signal(false); loading = signal(false);
activeTab: SubscriptionTab = 'all'; activeTab: SubscriptionTab = 'all';
// Pagination
currentPage = signal(1);
pageSize = 50;
totalCount = signal(0);
// Create subscription modal // Create subscription modal
showCreateModal = signal(false); showCreateModal = signal(false);
newChannelOwner = ''; newChannelOwner = '';
@@ -86,11 +91,21 @@ export class SubscriptionListComponent implements OnInit {
this.loading.set(true); this.loading.set(true);
const filter = TAB_CONFIGS[this.activeTab].filter; const filter: SubscriptionFilter = {
...TAB_CONFIGS[this.activeTab].filter,
page_size: this.pageSize,
};
// Use page-index based pagination: $1 = page 1, $2 = page 2, etc.
const page = this.currentPage();
if (page > 1) {
filter.next_page_token = `$${page}`;
}
this.apiService.getSubscriptions(userId, filter).subscribe({ this.apiService.getSubscriptions(userId, filter).subscribe({
next: (response) => { next: (response) => {
this.subscriptions.set(response.subscriptions); this.subscriptions.set(response.subscriptions);
this.totalCount.set(response.total_count);
this.loading.set(false); this.loading.set(false);
this.resolveUserNames(response.subscriptions); this.resolveUserNames(response.subscriptions);
}, },
@@ -121,6 +136,12 @@ export class SubscriptionListComponent implements OnInit {
onTabChange(index: number): void { onTabChange(index: number): void {
const tabs: SubscriptionTab[] = ['all', 'own', 'deactivated', 'external', 'incoming']; const tabs: SubscriptionTab[] = ['all', 'own', 'deactivated', 'external', 'incoming'];
this.activeTab = tabs[index]; this.activeTab = tabs[index];
this.currentPage.set(1);
this.loadSubscriptions();
}
goToPage(page: number): void {
this.currentPage.set(page);
this.loadSubscriptions(); this.loadSubscriptions();
} }