Browse Source

Task/improve coupon management in admin control panel (#6794)

* Improve coupon management
pull/6802/head
Thomas Kaul 2 days ago
committed by GitHub
parent
commit
404ef252c7
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 4
      apps/client/src/app/components/access-table/access-table.component.html
  2. 4
      apps/client/src/app/components/admin-jobs/admin-jobs.html
  3. 4
      apps/client/src/app/components/admin-market-data/admin-market-data.html
  4. 66
      apps/client/src/app/components/admin-overview/admin-overview.component.ts
  5. 220
      apps/client/src/app/components/admin-overview/admin-overview.html
  6. 4
      apps/client/src/app/components/admin-users/admin-users.html

4
apps/client/src/app/components/access-table/access-table.component.html

@ -53,9 +53,9 @@
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
<th *matHeaderCellDef class="px-1 text-right" mat-header-cell></th>
<td *matCellDef="let element" class="px-1 text-center" mat-cell>
<td *matCellDef="let element" class="px-1 text-right" mat-cell>
<button
class="mx-1 no-min-width px-2"
mat-button

4
apps/client/src/app/components/admin-jobs/admin-jobs.html

@ -188,7 +188,7 @@
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
<th *matHeaderCellDef class="px-1 py-2 text-right" mat-header-cell>
<button
class="mx-1 no-min-width px-2"
mat-button
@ -203,7 +203,7 @@
</button>
</mat-menu>
</th>
<td *matCellDef="let element" class="px-1 py-2" mat-cell>
<td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
<button
class="mx-1 no-min-width px-2"
mat-button

4
apps/client/src/app/components/admin-market-data/admin-market-data.html

@ -206,7 +206,7 @@
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
<th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
<button
class="mx-1 no-min-width px-2"
mat-button
@ -243,7 +243,7 @@
</button>
</mat-menu>
</th>
<td *matCellDef="let element" class="px-1 text-center" mat-cell>
<td *matCellDef="let element" class="px-1 text-right" mat-cell>
<button
class="mx-1 no-min-width px-2"
mat-button

66
apps/client/src/app/components/admin-overview/admin-overview.component.ts

@ -24,6 +24,7 @@ import { NotificationService } from '@ghostfolio/ui/notifications';
import { AdminService, DataService } from '@ghostfolio/ui/services';
import { GfValueComponent } from '@ghostfolio/ui/value';
import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
import { CommonModule } from '@angular/common';
import {
ChangeDetectorRef,
@ -42,6 +43,7 @@ import {
MatSlideToggleModule
} from '@angular/material/slide-toggle';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { RouterModule } from '@angular/router';
import { IonIcon } from '@ionic/angular/standalone';
import {
@ -62,6 +64,7 @@ import ms, { StringValue } from 'ms';
@Component({
imports: [
ClipboardModule,
CommonModule,
FormsModule,
GfValueComponent,
@ -72,6 +75,7 @@ import ms, { StringValue } from 'ms';
MatSelectModule,
MatSnackBarModule,
MatSlideToggleModule,
MatTableModule,
ReactiveFormsModule,
RouterModule
],
@ -82,7 +86,8 @@ import ms, { StringValue } from 'ms';
export class GfAdminOverviewComponent implements OnInit {
public activitiesCount: number;
public couponDuration: StringValue = '14 days';
public coupons: Coupon[];
public couponsDataSource = new MatTableDataSource<Coupon>();
public couponsDisplayedColumns = ['code', 'duration', 'actions'];
public hasPermissionForSubscription: boolean;
public hasPermissionForSystemMessage: boolean;
public hasPermissionToSyncDemoUserAccount: boolean;
@ -99,6 +104,7 @@ export class GfAdminOverviewComponent implements OnInit {
private adminService: AdminService,
private cacheService: CacheService,
private changeDetectorRef: ChangeDetectorRef,
private clipboard: Clipboard,
private dataService: DataService,
private destroyRef: DestroyRef,
private notificationService: NotificationService,
@ -188,14 +194,14 @@ export class GfAdminOverviewComponent implements OnInit {
}
public onAddCoupon() {
const coupons = [
...this.coupons,
{
code: `${ghostfolioPrefix}${this.generateCouponCode(14)}`,
duration: this.couponDuration
}
];
this.putAdminSetting({ key: PROPERTY_COUPONS, value: coupons });
const newCoupon: Coupon = {
code: `${ghostfolioPrefix}${this.generateCouponCode(14)}`,
duration: this.couponDuration
};
const coupons = [...this.couponsDataSource.data, newCoupon];
this.saveCoupons({ coupons, codeToCopy: newCoupon.code });
}
public onChangeCouponDuration(aCouponDuration: StringValue) {
@ -205,10 +211,11 @@ export class GfAdminOverviewComponent implements OnInit {
public onDeleteCoupon(aCouponCode: string) {
this.notificationService.confirm({
confirmFn: () => {
const coupons = this.coupons.filter((coupon) => {
return coupon.code !== aCouponCode;
const coupons = this.couponsDataSource.data.filter(({ code }) => {
return code !== aCouponCode;
});
this.putAdminSetting({ key: PROPERTY_COUPONS, value: coupons });
this.saveCoupons({ coupons });
},
confirmType: ConfirmationDialogType.Warn,
title: $localize`Do you really want to delete this coupon?`
@ -307,9 +314,13 @@ export class GfAdminOverviewComponent implements OnInit {
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(({ activitiesCount, settings, userCount, version }) => {
this.activitiesCount = activitiesCount;
this.coupons = (settings[PROPERTY_COUPONS] as Coupon[]) ?? [];
this.couponsDataSource.data =
(settings[PROPERTY_COUPONS] as Coupon[]) ?? [];
this.isDataGatheringEnabled =
settings[PROPERTY_IS_DATA_GATHERING_ENABLED] === false ? false : true;
this.systemMessage = settings[PROPERTY_SYSTEM_MESSAGE] as SystemMessage;
this.userCount = userCount;
this.version = version;
@ -343,4 +354,33 @@ export class GfAdminOverviewComponent implements OnInit {
}, 300);
});
}
private saveCoupons({
codeToCopy,
coupons
}: {
codeToCopy?: string;
coupons: Coupon[];
}) {
this.dataService
.putAdminSetting(PROPERTY_COUPONS, {
value: JSON.stringify(coupons)
})
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => {
this.couponsDataSource.data = coupons;
if (codeToCopy) {
this.clipboard.copy(codeToCopy);
this.snackBar.open(
'✅ ' + $localize`${codeToCopy} has been copied to the clipboard`,
undefined,
{ duration: ms('3 seconds') }
);
}
this.changeDetectorRef.markForCheck();
});
}
}

220
apps/client/src/app/components/admin-overview/admin-overview.html

@ -113,95 +113,6 @@
</div>
</div>
}
@if (hasPermissionForSubscription) {
<div class="d-flex my-3 subscription">
<div class="w-50" i18n>Coupons</div>
<div class="w-50">
<table>
@for (coupon of coupons; track coupon) {
<tr>
<td>
<gf-value
class="text-monospace"
[enableCopyToClipboardButton]="true"
[value]="coupon.code"
/>
</td>
<td class="pl-2 text-right">
{{ formatStringValue(coupon.duration) }}
</td>
<td>
<button
class="mx-1 no-min-width px-2"
mat-button
[matMenuTriggerFor]="couponActionsMenu"
(click)="$event.stopPropagation()"
>
<ion-icon name="ellipsis-horizontal" />
</button>
<mat-menu
#couponActionsMenu="matMenu"
class="h-100 mx-1 no-min-width px-2"
xPosition="before"
>
<button
mat-menu-item
(click)="onDeleteCoupon(coupon.code)"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="trash-outline" />
<span i18n>Delete</span>
</span>
</button>
</mat-menu>
</td>
</tr>
}
</table>
<div class="mt-2">
<form #couponForm="ngForm" class="align-items-center d-flex">
<mat-form-field
appearance="outline"
class="mr-2 without-hint"
>
<mat-select
name="duration"
[value]="couponDuration"
(selectionChange)="onChangeCouponDuration($event.value)"
>
<mat-option value="7 days">{{
formatStringValue('7 days')
}}</mat-option>
<mat-option value="14 days">{{
formatStringValue('14 days')
}}</mat-option>
<mat-option value="30 days">{{
formatStringValue('30 days')
}}</mat-option>
<mat-option value="90 days">{{
formatStringValue('90 days')
}}</mat-option>
<mat-option value="180 days">{{
formatStringValue('180 days')
}}</mat-option>
<mat-option value="1 year">{{
formatStringValue('1 year')
}}</mat-option>
</mat-select>
</mat-form-field>
<button
class="mt-1"
color="primary"
mat-flat-button
(click)="onAddCoupon()"
>
<span i18n>Add</span>
</button>
</form>
</div>
</div>
</div>
}
<div class="d-flex my-3">
<div class="w-50" i18n>Housekeeping</div>
<div class="w-50">
@ -228,4 +139,135 @@
</mat-card>
</div>
</div>
@if (hasPermissionForSubscription) {
<div class="row">
<div class="col">
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title i18n>Coupons</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="overflow-x-auto">
<table
class="gf-table w-100"
mat-table
[dataSource]="couponsDataSource"
>
<ng-container matColumnDef="code">
<th *matHeaderCellDef class="px-1" mat-header-cell>
<ng-container i18n>Code</ng-container>
</th>
<td *matCellDef="let element" class="px-1" mat-cell>
<gf-value
class="text-monospace"
[enableCopyToClipboardButton]="true"
[value]="element.code"
/>
</td>
</ng-container>
<ng-container matColumnDef="duration">
<th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
<ng-container i18n>Duration</ng-container>
</th>
<td
*matCellDef="let element"
class="px-1 text-right"
mat-cell
>
{{ formatStringValue(element.duration) }}
</td>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<th
*matHeaderCellDef
class="px-1 text-right"
mat-header-cell
></th>
<td
*matCellDef="let element"
class="px-1 text-right"
mat-cell
>
<button
class="mx-1 no-min-width px-2"
mat-button
[matMenuTriggerFor]="couponActionsMenu"
(click)="$event.stopPropagation()"
>
<ion-icon name="ellipsis-horizontal" />
</button>
<mat-menu
#couponActionsMenu="matMenu"
class="no-max-width"
xPosition="before"
>
<button
mat-menu-item
(click)="onDeleteCoupon(element.code)"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="trash-outline" />
<span i18n>Delete</span>
</span>
</button>
</mat-menu>
</td>
</ng-container>
<tr
*matHeaderRowDef="couponsDisplayedColumns"
mat-header-row
></tr>
<tr
*matRowDef="let row; columns: couponsDisplayedColumns"
mat-row
></tr>
</table>
</div>
</mat-card-content>
<mat-card-actions align="end">
<form #couponForm="ngForm" class="align-items-stretch d-flex">
<mat-form-field appearance="outline" class="mr-1 without-hint">
<mat-select
name="duration"
[value]="couponDuration"
(selectionChange)="onChangeCouponDuration($event.value)"
>
<mat-option value="7 days">{{
formatStringValue('7 days')
}}</mat-option>
<mat-option value="14 days">{{
formatStringValue('14 days')
}}</mat-option>
<mat-option value="30 days">{{
formatStringValue('30 days')
}}</mat-option>
<mat-option value="90 days">{{
formatStringValue('90 days')
}}</mat-option>
<mat-option value="180 days">{{
formatStringValue('180 days')
}}</mat-option>
<mat-option value="1 year">{{
formatStringValue('1 year')
}}</mat-option>
</mat-select>
</mat-form-field>
<button
class="h-auto rounded"
color="primary"
mat-flat-button
(click)="onAddCoupon()"
>
<ng-container i18n>Add</ng-container>
</button>
</form>
</mat-card-actions>
</mat-card>
</div>
</div>
}
</div>

4
apps/client/src/app/components/admin-users/admin-users.html

@ -198,12 +198,12 @@
<ng-container matColumnDef="actions" stickyEnd>
<th
*matHeaderCellDef
class="mat-mdc-header-cell px-1 py-2"
class="mat-mdc-header-cell px-1 py-2 text-right"
mat-header-cell
></th>
<td
*matCellDef="let element"
class="mat-mdc-cell px-1 py-2"
class="mat-mdc-cell px-1 py-2 text-right"
mat-cell
>
<button

Loading…
Cancel
Save