Skip to content

Commit

Permalink
Update Marketplace (#2742)
Browse files Browse the repository at this point in the history 
* update abstract marketplace for usage accuracy andrename store to registry

* use new abstract functions

* fix(marketplace): get rid of `AbstractMarketplaceService`

* bump shared marketplace lib

* update marketplace to use query params for registry url; comment out updates page - will be refactored

* cleanup

* cleanup duplicate

* cleanup unused imports

* rework setting registry url when loading marketplace

* cleanup marketplace service

* fix background

---------

Co-authored-by: Matt Hill <[email protected]>
Co-authored-by: waterplea <[email protected]>
Co-authored-by: Matt Hill <[email protected]>
  • Loading branch information
@elvece @MattDHill @waterplea
4 people authored Oct 9, 2024
1 parent a9569d0 commit dfda2f7
Show file tree
Hide file tree
Showing 26 changed files with 686 additions and 805 deletions.
1 change: 1 addition & 0 deletions web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"check:setup": "tsc --project projects/setup-wizard/tsconfig.json --noEmit --skipLibCheck",
"check:ui": "tsc --project projects/ui/tsconfig.json --noEmit --skipLibCheck",
"build:deps": "rm -rf .angular/cache && (cd ../patch-db/client && npm ci && npm run build) && (cd ../sdk && make bundle)",
"build:deps:win": "rimraf .angular/cache && (cd ../sdk && npm ci && npm run build) && (cd ../patch-db/client && npm ci && npm run build)",
"build:install": "ng run install-wizard:build",
"build:setup": "ng run setup-wizard:build",
"build:ui": "ng run ui:build",
Expand Down
2 changes: 1 addition & 1 deletion web/projects/marketplace/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@start9labs/marketplace",
"version": "0.3.32",
"version": "0.3.36",
"peerDependencies": {
"@angular/common": ">=13.2.0",
"@angular/core": ">=13.2.0",
Expand Down
203 changes: 99 additions & 104 deletions web/projects/marketplace/src/components/menu/menu.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,108 @@
<header>
<ng-container *tuiLet="store$ | async as store">
<div class="title">
<store-icon
[class.tui-skeleton]="!store"
[class.tui-skeleton_rounded]="!store"
size="60px"
[url]="store?.url || ''"
[marketplace]="iconConfig"
<div class="title">
<store-icon
[class.tui-skeleton]="!registry"
[class.tui-skeleton_rounded]="!registry"
size="60px"
[url]="registry?.url || ''"
[marketplace]="iconConfig"
/>
<h1 [class.tui-skeleton]="!registry">
{{ registry?.info?.name || 'Unnamed Registry' }}
</h1>
<!-- change registry modal -->
<ng-content select="[slot=desktop]"></ng-content>
</div>
<!-- mobile nav -->
<div class="nav-mobile">
<div class="nav-mobile-bar">
<!-- mobile search -->
<marketplace-search
[(query)]="query"
(queryChange)="onQueryChange($event)"
/>
<h1 [class.tui-skeleton]="!store">
{{ store?.info?.name || 'Loading store...' }}
</h1>
<!-- change registry modal -->
<ng-content select="[slot=desktop]"></ng-content>
</div>
<!-- mobile nav -->
<div class="nav-mobile">
<div class="nav-mobile-bar">
<!-- mobile search -->
<marketplace-search
[(query)]="query"
(queryChange)="onQueryChange($event)"
<button
tuiButton
type="button"
appearance="link"
(click)="toggleMenu(true)"
(tuiActiveZoneChange)="toggleMenu($event)"
[style.--tui-padding]="'1.2rem'"
>
<store-icon
size="42px"
[style.height]="'42px'"
[style.border-radius]="'100%'"
[url]="registry?.url || ''"
[marketplace]="iconConfig"
[class.tui-skeleton]="!registry"
[class.tui-skeleton_rounded]="!registry"
/>
<button
tuiButton
type="button"
appearance="link"
(click)="toggleMenu(true)"
(tuiActiveZoneChange)="toggleMenu($event)"
[style.--tui-padding]="'1.2rem'"
<nav
*tuiSidebar="open; direction: 'right'; autoWidth: true"
class="nav-mobile-sidebar divide-bar"
>
<store-icon
size="42px"
[style.height]="'42px'"
[style.border-radius]="'100%'"
[url]="store?.url || ''"
[marketplace]="iconConfig"
[class.tui-skeleton]="!store"
[class.tui-skeleton_rounded]="!store"
/>
<nav
*tuiSidebar="open; direction: 'right'; autoWidth: true"
class="nav-mobile-sidebar divide-bar"
>
<div class="nav-mobile-sidebar-top">
<h1 [class.tui-skeleton]="!store">
{{ store?.info?.name }}
</h1>
<button
[style.--tui-padding]="0"
tuiButton
type="button"
appearance="icon"
iconStart="@tui.x"
(tuiActiveZoneChange)="toggleMenu($event)"
(click)="toggleMenu(false)"
></button>
<div class="nav-mobile-sidebar-top">
<h1 [class.tui-skeleton]="!registry">
{{ registry?.info?.name }}
</h1>
<button
[style.--tui-padding]="0"
tuiButton
type="button"
appearance="icon"
iconStart="@tui.x"
(tuiActiveZoneChange)="toggleMenu($event)"
(click)="toggleMenu(false)"
></button>
</div>
<!-- change registry modal -->
<ng-content select="[slot=mobile]"></ng-content>
<div class="nav-mobile-sidebar-bottom divide-bar">
<marketplace-categories
[categories]="registry?.info?.categories"
[category]="query ? '' : category"
(categoryChange)="onCategoryChange($event); toggleMenu(false)"
/>
<div>
<!-- link to store for brochure -->
<ng-content select="[slot=store-mobile]" />
<a
target="_blank"
rel="noreferrer"
href="https://docs.start9.com/0.3.5.x/developer-docs/"
>
<span>Package a service</span>
<tui-icon tuiAppearance="icon" icon="@tui.external-link" />
</a>
</div>
<!-- change registry modal -->
<ng-content select="[slot=mobile]"></ng-content>
<div class="nav-mobile-sidebar-bottom divide-bar">
<marketplace-categories
[categories]="store?.info?.categories"
[category]="query ? '' : category"
(categoryChange)="onCategoryChange($event); toggleMenu(false)"
/>
<div>
<!-- link to store for brochure -->
<ng-content select="[slot=store-mobile]" />
<a
target="_blank"
rel="noreferrer"
href="https://docs.start9.com/0.3.5.x/developer-docs/"
>
<span>Package a service</span>
<tui-icon tuiAppearance="icon" icon="@tui.external-link" />
</a>
</div>
</div>
</nav>
</button>
</div>
</div>
</nav>
</button>
</div>
<!-- desktop nav -->
<nav class="nav-desktop">
<!-- desktop search -->
<marketplace-search
[query]="query"
(queryChange)="onQueryChange($event)"
</div>
<!-- desktop nav -->
<nav class="nav-desktop">
<!-- desktop search -->
<marketplace-search [query]="query" (queryChange)="onQueryChange($event)" />
<div class="nav-desktop-container">
<marketplace-categories
[categories]="registry?.info?.categories"
[category]="query ? '' : category"
(categoryChange)="onCategoryChange($event)"
/>
<div class="nav-desktop-container">
<marketplace-categories
[categories]="store?.info?.categories"
[category]="query ? '' : category"
(categoryChange)="onCategoryChange($event)"
/>
<div>
<!-- link to store for brochure -->
<ng-content select="[slot=store]" />
<a
target="_blank"
rel="noreferrer"
href="https://docs.start9.com/0.3.5.x/developer-docs/"
>
<span>Package a service</span>
<tui-icon tuiAppearance="icon" icon="@tui.external-link" />
</a>
</div>
<div>
<!-- link to store for brochure -->
<ng-content select="[slot=store]" />
<a
target="_blank"
rel="noreferrer"
href="https://docs.start9.com/0.3.5.x/developer-docs/"
>
<span>Package a service</span>
<tui-icon tuiAppearance="icon" icon="@tui.external-link" />
</a>
</div>
</nav>
</ng-container>
</div>
</nav>
</header>
29 changes: 6 additions & 23 deletions web/projects/marketplace/src/components/menu/menu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ import {
Input,
OnDestroy,
} from '@angular/core'
import { combineLatest, map, Subject, takeUntil } from 'rxjs'
import { StoreIdentity } from '../../types'
import { AbstractMarketplaceService } from '../../services/marketplace.service'
import { AbstractCategoryService } from '../../services/category.service'
import { MarketplaceConfig } from '@start9labs/shared'
import { Subject, takeUntil } from 'rxjs'
import { AbstractCategoryService } from '../../services/category.service'
import { StoreDataWithUrl } from '../../types'

@Component({
selector: 'menu',
Expand All @@ -21,19 +20,11 @@ export class MenuComponent implements OnDestroy {
@Input({ required: true })
iconConfig!: MarketplaceConfig

@Input({ required: true })
registry!: StoreDataWithUrl | null

private destroy$ = new Subject<void>()
private readonly marketplaceService = inject(AbstractMarketplaceService)
private readonly categoryService = inject(AbstractCategoryService)
readonly store$ = this.marketplaceService.getSelectedStoreWithCategories$()
readonly alt$ = combineLatest([
this.marketplaceService.getKnownHosts$(),
this.marketplaceService.getSelectedHost$(),
]).pipe(
map(([stores, selected]) =>
stores.filter(({ url }) => url != selected.url),
),
)
private hosts?: StoreIdentity[]
category = ''
query = ''
open = false
Expand All @@ -52,21 +43,13 @@ export class MenuComponent implements OnDestroy {
.subscribe(val => {
this.category = val
})

this.marketplaceService
.getKnownHosts$()
.pipe(takeUntil(this.destroy$))
.subscribe(hosts => {
this.hosts = hosts
})
}

onCategoryChange(category: string): void {
this.category = category
this.query = ''
this.categoryService.resetQuery()
this.categoryService.changeCategory(category)
this.categoryService.handleNavigation()
}

onQueryChange(query: string): void {
Expand Down
60 changes: 24 additions & 36 deletions web/projects/marketplace/src/modals/release-notes.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,27 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { MarketplacePkg } from '../../src/types'
import { Exver, MarkdownPipeModule } from '@start9labs/shared'
import { TuiButton, TuiDialogContext, TuiLoader } from '@taiga-ui/core'
import { TuiAccordion } from '@taiga-ui/kit'
import {
POLYMORPHEUS_CONTEXT,
PolymorpheusComponent,
} from '@taiga-ui/polymorpheus'
import { map } from 'rxjs'
import { AbstractMarketplaceService } from '../services/marketplace.service'
import { MarketplacePkg } from '../../src/types'

@Component({
standalone: true,
template: `
@if (notes$ | async; as notes) {
<tui-accordion>
@for (note of notes | keyvalue: asIsOrder; track $index) {
<tui-accordion-item>
{{ note.key }}
<ng-template tuiAccordionItemContent>
<div [innerHTML]="note.value | markdown"></div>
</ng-template>
</tui-accordion-item>
}
</tui-accordion>
} @else {
<tui-loader textContent="Loading Release Notes" />
}
<tui-accordion>
@for (note of notes | keyvalue: asIsOrder; track $index) {
<tui-accordion-item>
{{ note.key }}
<ng-template tuiAccordionItemContent>
<div [innerHTML]="note.value | markdown"></div>
</ng-template>
</tui-accordion-item>
}
</tui-accordion>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
Expand All @@ -43,26 +37,20 @@ export class ReleaseNotesComponent {
private readonly pkg =
inject<TuiDialogContext<void, MarketplacePkg>>(POLYMORPHEUS_CONTEXT).data

readonly notes$ = inject(AbstractMarketplaceService)
.getSelectedStore$()
.pipe(
map(s => {
return Object.entries(this.pkg.otherVersions)
.filter(
([v, _]) =>
this.exver.getFlavor(v) === this.pkg.flavor &&
this.exver.compareExver(this.pkg.version, v) === 1,
)
.reduce(
(obj, [version, info]) => ({
...obj,
[version]: info.releaseNotes,
}),
{
[`${this.pkg.version} (current)`]: this.pkg.releaseNotes,
},
)
readonly notes = Object.entries(this.pkg.otherVersions)
.filter(
([v, _]) =>
this.exver.getFlavor(v) === this.pkg.flavor &&
this.exver.compareExver(this.pkg.version, v) === 1,
)
.reduce(
(obj, [version, info]) => ({
...obj,
[version]: info.releaseNotes,
}),
{
[`${this.pkg.version} (current)`]: this.pkg.releaseNotes,
},
)

asIsOrder(a: any, b: any) {
Expand Down
4 changes: 2 additions & 2 deletions web/projects/marketplace/src/pages/show/additional/additional.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@ <h2 class="additional-detail-title">Information</h2>
</ng-template>
<!-- license -->
<marketplace-additional-item
(click)="presentModalMd('License')"
(click)="static.emit('License')"
[data]="pkg.license"
label="License"
icon="@tui.chevron-right"
class="item-pointer"
/>
<!-- instructions -->
<marketplace-additional-item
(click)="presentModalMd('Instructions')"
(click)="static.emit('Instructions')"
data="Click to view instructions"
label="Instructions"
icon="@tui.chevron-right"
Expand Down
Loading

0 comments on commit dfda2f7

Please sign in to comment.