fix marketplace search and better category disabling (#1991)

* fix marketplace search and better category disabling

* bump marketplace version

* fix issue with marketplace settings and absent community reg

frontend/projects/marketplace/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@start9labs/marketplace",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "peerDependencies": {
     "@angular/common": ">=13.2.0",
     "@angular/core": ">=13.2.0",

frontend/projects/marketplace/src/pages/list/categories/categories.component.html

@@ -2,7 +2,7 @@
   *ngFor="let cat of categories"
   fill="clear"
   class="category"
-  [class.category_selected]="cat === category && !disableCategories"
+  [class.category_selected]="cat === category"
   (click)="switchCategory(cat)"
 >
   {{ cat }}

frontend/projects/marketplace/src/pages/list/categories/categories.component.ts

@@ -22,9 +22,6 @@ export class CategoriesComponent {
   @Input()
   category = ''
 
-  @Input()
-  disableCategories = false
-
   @Output()
   readonly categoryChange = new EventEmitter<string>()
 

frontend/projects/marketplace/src/pipes/filter-packages.pipe.ts

@@ -1,5 +1,4 @@
 import { NgModule, Pipe, PipeTransform } from '@angular/core'
-import { Emver } from '@start9labs/shared'
 import { MarketplacePkg } from '../types'
 import Fuse from 'fuse.js'
 
@@ -7,8 +6,6 @@ import Fuse from 'fuse.js'
   name: 'filterPackages',
 })
 export class FilterPackagesPipe implements PipeTransform {
-  constructor(private readonly emver: Emver) {}
-
   transform(
     packages: MarketplacePkg[],
     query: string,
@@ -19,6 +16,28 @@ export class FilterPackagesPipe implements PipeTransform {
       let options: Fuse.IFuseOptions<MarketplacePkg> = {
         includeScore: true,
         includeMatches: true,
+      }
+
+      if (query.length < 4) {
+        options = {
+          ...options,
+          threshold: 0.2,
+          location: 0,
+          distance: 16,
+          keys: [
+            {
+              name: 'manifest.title',
+              weight: 1,
+            },
+            {
+              name: 'manifest.id',
+              weight: 0.5,
+            },
+          ],
+        }
+      } else {
+        options = {
+          ...options,
           ignoreLocation: true,
           useExtendedSearch: true,
           keys: [
@@ -40,8 +59,8 @@ export class FilterPackagesPipe implements PipeTransform {
             },
           ],
         }
-
         query = `'${query}`
+      }
 
       const fuse = new Fuse(packages, options)
       return fuse.search(query).map(p => p.item)

frontend/projects/ui/src/app/modals/marketplace-settings/marketplace-settings.page.ts

@@ -29,14 +29,14 @@ export class MarketplaceSettingsPage {
     this.marketplaceService.getSelectedHost$(),
   ]).pipe(
     map(([stores, selected]) => {
-      const hmmm = stores.map(s => ({
+      const toSlice = stores.map(s => ({
         ...s,
         selected: s.url === selected.url,
       }))
       // 0 and 1 are prod and community
-      const standard = hmmm.slice(0, 2)
+      const standard = toSlice.slice(0, 1)
       // 2 and beyond are alts
-      const alt = hmmm.slice(2)
+      const alt = toSlice.slice(1)
 
       return { standard, alt }
     }),

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html

@@ -38,8 +38,7 @@
           <ng-container *ngIf="store$ | async as store; else loading">
             <marketplace-categories
               [categories]="store.categories"
-              [category]="category"
+              [category]="query ? '' : category"
-              [disableCategories]="!!query"
               (categoryChange)="onCategoryChange($event)"
             ></marketplace-categories>
 
@@ -48,6 +47,7 @@
             <ion-grid
               *ngIf="store.packages | filterPackages: query:category as filtered"
             >
+              <ng-container *ngIf="filtered.length; else empty">
                 <ion-row *ngIf="localPkgs$ | async as localPkgs">
                   <ion-col
                     *ngFor="let pkg of filtered"
@@ -64,6 +64,13 @@
                     </marketplace-item>
                   </ion-col>
                 </ion-row>
+              </ng-container>
+
+              <ng-template #empty>
+                <div class="ion-padding">
+                  <h2>No results</h2>
+                </div>
+              </ng-template>
             </ion-grid>
           </ng-container>