From e1c30a918b5dcc13e7383055fcc378f79592f9f4 Mon Sep 17 00:00:00 2001 From: Matt Hill Date: Mon, 15 Aug 2022 11:03:11 -0600 Subject: [PATCH] highlight instructions if not viewed (#1731) --- .../apps-routes/app-actions/app-actions.page.ts | 4 ++++ .../pages/apps-routes/app-list/app-list.page.ts | 17 +++++------------ .../app-show-menu/app-show-menu.component.html | 1 + .../app-show-menu/app-show-menu.component.scss | 6 ++++++ .../app-show-menu/app-show-menu.component.ts | 1 + .../app-show/pipes/to-buttons.pipe.ts | 13 ++++++++++++- .../ui/src/app/services/api/mock-patch.ts | 1 + .../ui/src/app/services/patch-db/data-model.ts | 1 + .../projects/ui/src/app/util/get-server-info.ts | 1 - .../ui/src/app/util/parse-data-model.ts | 8 ++++---- 10 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.scss diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts index 8a93d69a0..cc899d7d9 100644 --- a/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts +++ b/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts @@ -158,6 +158,10 @@ export class AppActionsPage { try { await this.embassyApi.uninstallPackage({ id: this.pkgId }) + this.embassyApi.setDbValue({ + pointer: `/ack-instructions/${this.pkgId}`, + value: false, + }) this.navCtrl.navigateRoot('/services') } catch (e: any) { this.errToast.present(e) diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts index 75c88504e..79d2d537c 100644 --- a/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts +++ b/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core' import { PatchDbService } from 'src/app/services/patch-db/patch-db.service' import { PackageDataEntry } from 'src/app/services/patch-db/data-model' import { Observable } from 'rxjs' -import { filter, map, switchMapTo, take, takeUntil, tap } from 'rxjs/operators' +import { filter, map, switchMap, take, takeUntil, tap } from 'rxjs/operators' import { isEmptyObject, exists, DestroyService } from '@start9labs/shared' import { ApiService } from 'src/app/services/api/embassy-api.service' import { parseDataModel, RecoveredInfo } from 'src/app/util/parse-data-model' @@ -16,7 +16,6 @@ import { parseDataModel, RecoveredInfo } from 'src/app/util/parse-data-model' export class AppListPage { pkgs: readonly PackageDataEntry[] = [] recoveredPkgs: readonly RecoveredInfo[] = [] - order: readonly string[] = [] reordering = false readonly connected$ = this.patch.connected$ @@ -38,17 +37,11 @@ export class AppListPage { filter(data => exists(data) && !isEmptyObject(data)), take(1), map(parseDataModel), - tap(({ order, pkgs, recoveredPkgs }) => { + tap(({ pkgs, recoveredPkgs }) => { this.pkgs = pkgs this.recoveredPkgs = recoveredPkgs - this.order = order - - // set order in UI DB if there were unknown packages - if (order.length < pkgs.length) { - this.setOrder() - } }), - switchMapTo(this.watchNewlyRecovered()), + switchMap(() => this.watchNewlyRecovered()), takeUntil(this.destroy$), ) .subscribe() @@ -88,7 +81,7 @@ export class AppListPage { } private setOrder(): void { - this.order = this.pkgs.map(pkg => pkg.manifest.id) - this.api.setDbValue({ pointer: '/pkg-order', value: this.order }) + const order = this.pkgs.map(pkg => pkg.manifest.id) + this.api.setDbValue({ pointer: '/pkg-order', value: order }) } } diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.html b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.html index 0be9b2258..d872fdd52 100644 --- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.html +++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.html @@ -5,6 +5,7 @@ detail (click)="button.action()" [disabled]="button.disabled" + [ngClass]="{ highlighted: button.highlighted$ | async }" > diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.scss b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.scss new file mode 100644 index 000000000..f31b84ed5 --- /dev/null +++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.scss @@ -0,0 +1,6 @@ +.highlighted { + * { + color: var(--ion-color-dark); + font-weight: bold; + } +} \ No newline at end of file diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.ts index 39d16b236..866d3e01f 100644 --- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.ts +++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.ts @@ -4,6 +4,7 @@ import { Button } from '../../pipes/to-buttons.pipe' @Component({ selector: 'app-show-menu', templateUrl: './app-show-menu.component.html', + styleUrls: ['./app-show-menu.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class AppShowMenuComponent { diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts index 007a99c19..cd7d7296e 100644 --- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts +++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts @@ -13,14 +13,16 @@ import { } from 'src/app/services/patch-db/data-model' import { ModalService } from 'src/app/services/modal.service' import { ApiService } from 'src/app/services/api/embassy-api.service' -import { from } from 'rxjs' +import { from, map, Observable } from 'rxjs' import { Marketplace } from '@start9labs/marketplace' import { ActionMarketplaceComponent } from 'src/app/modals/action-marketplace/action-marketplace.component' +import { PatchDbService } from 'src/app/services/patch-db/patch-db.service' export interface Button { title: string description: string icon: string action: Function + highlighted$?: Observable disabled?: boolean } @@ -36,6 +38,7 @@ export class ToButtonsPipe implements PipeTransform { private readonly modalCtrl: ModalController, private readonly modalService: ModalService, private readonly apiService: ApiService, + private readonly patch: PatchDbService, ) {} transform( @@ -52,6 +55,9 @@ export class ToButtonsPipe implements PipeTransform { title: 'Instructions', description: `Understand how to use ${pkgTitle}`, icon: 'list-outline', + highlighted$: this.patch + .watch$('ui', 'ack-instructions', pkg.manifest.id) + .pipe(map(seen => !seen)), }, // config { @@ -111,6 +117,11 @@ export class ToButtonsPipe implements PipeTransform { } private async presentModalInstructions(pkg: PackageDataEntry) { + this.apiService.setDbValue({ + pointer: `/ack-instructions/${pkg.manifest.id}`, + value: true, + }) + const modal = await this.modalCtrl.create({ componentProps: { title: 'Instructions', diff --git a/frontend/projects/ui/src/app/services/api/mock-patch.ts b/frontend/projects/ui/src/app/services/api/mock-patch.ts index 91adda519..d97e9d591 100644 --- a/frontend/projects/ui/src/app/services/api/mock-patch.ts +++ b/frontend/projects/ui/src/app/services/api/mock-patch.ts @@ -23,6 +23,7 @@ export const mockPatchData: DataModel = { }, }, }, + 'ack-instructions': {}, }, 'server-info': { id: 'abcdefgh', diff --git a/frontend/projects/ui/src/app/services/patch-db/data-model.ts b/frontend/projects/ui/src/app/services/patch-db/data-model.ts index c289736d0..9c728a65f 100644 --- a/frontend/projects/ui/src/app/services/patch-db/data-model.ts +++ b/frontend/projects/ui/src/app/services/patch-db/data-model.ts @@ -22,6 +22,7 @@ export interface UIData { 'high-score': number } } + 'ack-instructions': Record } export interface UIMarketplaceData { diff --git a/frontend/projects/ui/src/app/util/get-server-info.ts b/frontend/projects/ui/src/app/util/get-server-info.ts index 4d14f1613..c0cb6f7e9 100644 --- a/frontend/projects/ui/src/app/util/get-server-info.ts +++ b/frontend/projects/ui/src/app/util/get-server-info.ts @@ -1,4 +1,3 @@ -import { first } from 'rxjs/operators' import { PatchDbService } from 'src/app/services/patch-db/patch-db.service' import { ServerInfo } from 'src/app/services/patch-db/data-model' import { firstValueFrom } from 'rxjs' diff --git a/frontend/projects/ui/src/app/util/parse-data-model.ts b/frontend/projects/ui/src/app/util/parse-data-model.ts index 21fdc91ba..d24fd9803 100644 --- a/frontend/projects/ui/src/app/util/parse-data-model.ts +++ b/frontend/projects/ui/src/app/util/parse-data-model.ts @@ -9,8 +9,7 @@ export function parseDataModel(data: DataModel): ParsedData { JSON.stringify(data['package-data']), ) - const order = [...(data.ui['pkg-order'] || [])] - const pkgs: PackageDataEntry[] = [] + // recovered packages (0.2.x) const recoveredPkgs = Object.entries(data['recovered-packages']) .filter(([id, _]) => !all[id]) .map(([id, val]) => ({ @@ -18,6 +17,9 @@ export function parseDataModel(data: DataModel): ParsedData { id, })) + // installed packages + const order = [...(data.ui['pkg-order'] || [])] + const pkgs: PackageDataEntry[] = [] // add known packages in preferential order order.forEach(id => { if (all[id]) { @@ -33,7 +35,6 @@ export function parseDataModel(data: DataModel): ParsedData { }) return { - order, pkgs, recoveredPkgs, } @@ -44,7 +45,6 @@ export interface RecoveredInfo extends RecoveredPackageDataEntry { } interface ParsedData { - order: string[] pkgs: PackageDataEntry[] recoveredPkgs: RecoveredInfo[] }