From acb0ed1a4460910d8c9f26d85e6bda58ed94b74b Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 30 Aug 2022 20:50:59 +0200 Subject: [PATCH] Show the name of current owner in the plans overview. --- backend/i18n/frontend_en.json | 3 ++- backend/i18n/frontend_it.json | 1 + backend/i18n/frontend_nl.json | 1 + backend/i18n/frontend_zh.json | 1 + backend/i18n/source/frontend_en.json | 3 ++- .../pages/plans/plans-page.component.html | 2 +- .../pages/plans/plans-page.component.scss | 4 +++ frontend/src/app/shared/components/pipes.ts | 26 ++++++++++++------- frontend/src/app/shared/state/plans.state.ts | 7 +++++ 9 files changed, 35 insertions(+), 13 deletions(-) diff --git a/backend/i18n/frontend_en.json b/backend/i18n/frontend_en.json index a6d887567..4546beb5c 100644 --- a/backend/i18n/frontend_en.json +++ b/backend/i18n/frontend_en.json @@ -624,9 +624,10 @@ "plans.includedTraffic": "Traffic", "plans.loadFailed": "Failed to load plans. Please reload.", "plans.noPlanConfigured": "No plan configured, this app has unlimited usage.", - "plans.notPlanOwner": "You have not created the subscription. Therefore you cannot change the plan.", + "plans.notPlanOwner": "You have not created the subscription, therefore you cannot change the plan.", "plans.perMonth": "Per Month", "plans.perYear": "Per Year", + "plans.planOwner": "Owner", "plans.refreshTooltip": "Refresh Plans", "plans.reloaded": "Plans reloaded.", "plans.selected": "Selected", diff --git a/backend/i18n/frontend_it.json b/backend/i18n/frontend_it.json index ec12d2512..7905dde29 100644 --- a/backend/i18n/frontend_it.json +++ b/backend/i18n/frontend_it.json @@ -627,6 +627,7 @@ "plans.notPlanOwner": "Non hai creato nessun abbonamento, pertanto non è possibile cambiare il piano.", "plans.perMonth": "Al mese", "plans.perYear": "all'anno", + "plans.planOwner": "Owner", "plans.refreshTooltip": "Aggiorna i piani", "plans.reloaded": "Piano aggiornati.", "plans.selected": "Selezionato", diff --git a/backend/i18n/frontend_nl.json b/backend/i18n/frontend_nl.json index 20e6d8b30..1461da72c 100644 --- a/backend/i18n/frontend_nl.json +++ b/backend/i18n/frontend_nl.json @@ -627,6 +627,7 @@ "plans.notPlanOwner": "Je hebt geen abonnement aangemaakt. Daarom kun je het plan niet wijzigen.", "plans.perMonth": "Per maand", "plans.perYear": "Per jaar", + "plans.planOwner": "Owner", "plans.refreshTooltip": "Plannen vernieuwen", "plans.reloaded": "Plans reloaded.", "plans.selected": "Geselecteerd", diff --git a/backend/i18n/frontend_zh.json b/backend/i18n/frontend_zh.json index 3c47f0e10..a153054ff 100644 --- a/backend/i18n/frontend_zh.json +++ b/backend/i18n/frontend_zh.json @@ -627,6 +627,7 @@ "plans.notPlanOwner": "您尚未创建订阅。因此您无法更改计划。", "plans.perMonth": "每月", "plans.perYear": "每年", + "plans.planOwner": "Owner", "plans.refreshTooltip": "刷新计划", "plans.reloaded": "计划重新加载。", "plans.selected": "已选择", diff --git a/backend/i18n/source/frontend_en.json b/backend/i18n/source/frontend_en.json index a6d887567..4546beb5c 100644 --- a/backend/i18n/source/frontend_en.json +++ b/backend/i18n/source/frontend_en.json @@ -624,9 +624,10 @@ "plans.includedTraffic": "Traffic", "plans.loadFailed": "Failed to load plans. Please reload.", "plans.noPlanConfigured": "No plan configured, this app has unlimited usage.", - "plans.notPlanOwner": "You have not created the subscription. Therefore you cannot change the plan.", + "plans.notPlanOwner": "You have not created the subscription, therefore you cannot change the plan.", "plans.perMonth": "Per Month", "plans.perYear": "Per Year", + "plans.planOwner": "Owner", "plans.refreshTooltip": "Refresh Plans", "plans.reloaded": "Plans reloaded.", "plans.selected": "Selected", diff --git a/frontend/src/app/features/settings/pages/plans/plans-page.component.html b/frontend/src/app/features/settings/pages/plans/plans-page.component.html index 46db26e0c..c4a210411 100644 --- a/frontend/src/app/features/settings/pages/plans/plans-page.component.html +++ b/frontend/src/app/features/settings/pages/plans/plans-page.component.html @@ -13,7 +13,7 @@
- {{ 'plans.notPlanOwner' | sqxTranslate }} + {{ 'plans.notPlanOwner' | sqxTranslate }} {{ 'plans.planOwner' |sqxTranslate }}: {{plansState.planOwner | async | sqxUserName}}
diff --git a/frontend/src/app/features/settings/pages/plans/plans-page.component.scss b/frontend/src/app/features/settings/pages/plans/plans-page.component.scss index 5d80523de..10e73029b 100644 --- a/frontend/src/app/features/settings/pages/plans/plans-page.component.scss +++ b/frontend/src/app/features/settings/pages/plans/plans-page.component.scss @@ -8,4 +8,8 @@ .billing-portal-link { padding: 2rem .5rem 0; +} + +.no-wrap { + white-space: nowrap; } \ No newline at end of file diff --git a/frontend/src/app/shared/components/pipes.ts b/frontend/src/app/shared/components/pipes.ts index 228d573d8..79f2b3b26 100644 --- a/frontend/src/app/shared/components/pipes.ts +++ b/frontend/src/app/shared/components/pipes.ts @@ -29,7 +29,11 @@ class UserAsyncPipe { } } - protected transformInternal(userId: string, transform: (users: UsersProviderService) => Observable) { + protected transformInternal(userId: string | undefined | null, transform: (users: UsersProviderService, userId: string) => Observable) { + if (!userId) { + return undefined; + } + if (this.lastUserId !== userId) { this.lastUserId = userId; @@ -37,7 +41,7 @@ class UserAsyncPipe { this.subscription.unsubscribe(); } - const pipe = transform(this.users); + const pipe = transform(this.users, userId); this.subscription = pipe.subscribe(value => { this.lastValue = value || undefined; @@ -67,8 +71,9 @@ export class UserNamePipe extends UserAsyncPipe implements OnDestroy, PipeTransf super.destroy(); } - public transform(userId: string, placeholder = 'Me') { - return super.transformInternal(userId, users => users.getUser(userId, placeholder).pipe(map(u => u.displayName))); + public transform(userId: string | undefined | null, placeholder = 'Me') { + return super.transformInternal(userId, (users, userId) => + users.getUser(userId, placeholder).pipe(map(u => u.displayName))); } } @@ -85,8 +90,8 @@ export class UserNameRefPipe extends UserAsyncPipe implements OnDestroy, PipeTra super.destroy(); } - public transform(userId: string, placeholder: string | null = 'Me') { - return super.transformInternal(userId, users => { + public transform(userId: string | undefined | null, placeholder: string | null = 'Me') { + return super.transformInternal(userId, (users, userId) => { const { type, id } = split(userId); if (type === 'subject') { @@ -145,8 +150,9 @@ export class UserPicturePipe extends UserAsyncPipe implements OnDestroy, PipeTra super.destroy(); } - public transform(userId: string) { - return super.transformInternal(userId, users => users.getUser(userId).pipe(map(u => this.apiUrl.buildUrl(`api/users/${u.id}/picture`)))); + public transform(userId: string | undefined | null) { + return super.transformInternal(userId, (users, userId) => + users.getUser(userId).pipe(map(u => this.apiUrl.buildUrl(`api/users/${u.id}/picture`)))); } } @@ -165,8 +171,8 @@ export class UserPictureRefPipe extends UserAsyncPipe implements OnDestroy, Pipe super.destroy(); } - public transform(userId: string) { - return super.transformInternal(userId, users => { + public transform(userId: string | undefined | null) { + return super.transformInternal(userId, (users, userId) => { const { type, id } = split(userId); if (type === 'subject') { diff --git a/frontend/src/app/shared/state/plans.state.ts b/frontend/src/app/shared/state/plans.state.ts index c3c750904..a32824d7a 100644 --- a/frontend/src/app/shared/state/plans.state.ts +++ b/frontend/src/app/shared/state/plans.state.ts @@ -31,6 +31,9 @@ interface Snapshot { // Indicates if the user is the plan owner. isOwner?: boolean; + // The user, who owns the plan. + planOwner?: string; + // Indicates if the plans are loaded. isLoaded?: boolean; @@ -49,6 +52,9 @@ export class PlansState extends State { public plans = this.project(x => x.plans); + public planOwner = + this.project(x => x.planOwner); + public isOwner = this.project(x => x.isOwner === true); @@ -108,6 +114,7 @@ export class PlansState extends State { isLoaded: true, isLoading: false, isOwner: !payload.planOwner || payload.planOwner === this.userId, + planOwner: payload.planOwner, plans, version, }, 'Loading Success');