fix marketplace search and better category disabling

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,14 +1,11 @@
 import { NgModule, Pipe, PipeTransform } from '@angular/core'
-import { Emver } from '@start9labs/shared'
 import { MarketplacePkg } from '../types'
 import Fuse from 'fuse.js'
 
 @Pipe({
   name: 'filterPackages',
 })
 export class FilterPackagesPipe implements PipeTransform {
-  constructor(private readonly emver: Emver) {}
-
   transform(
     packages: MarketplacePkg[],
     query: string,
@@ -19,29 +16,51 @@ export class FilterPackagesPipe implements PipeTransform {
       let options: Fuse.IFuseOptions<MarketplacePkg> = {
         includeScore: true,
         includeMatches: true,
-        ignoreLocation: true,
-        useExtendedSearch: true,
-        keys: [
-          {
-            name: 'manifest.title',
-            weight: 1,
-          },
-          {
-            name: 'manifest.id',
-            weight: 0.5,
-          },
-          {
-            name: 'manifest.description.short',
-            weight: 0.4,
-          },
-          {
-            name: 'manifest.description.long',
-            weight: 0.1,
-          },
-        ],
       }
 
-      query = `'${query}`
+      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: [
+            {
+              name: 'manifest.title',
+              weight: 1,
+            },
+            {
+              name: 'manifest.id',
+              weight: 0.5,
+            },
+            {
+              name: 'manifest.description.short',
+              weight: 0.4,
+            },
+            {
+              name: 'manifest.description.long',
+              weight: 0.1,
+            },
+          ],
+        }
+        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 @@ <h1 class="montserrat">{{ details.name }}</h1>
           <ng-container *ngIf="store$ | async as store; else loading">
             <marketplace-categories
               [categories]="store.categories"
-              [category]="category"
-              [disableCategories]="!!query"
+              [category]="query ? '' : category"
               (categoryChange)="onCategoryChange($event)"
             ></marketplace-categories>
 
@@ -48,22 +47,30 @@ <h1 class="montserrat">{{ details.name }}</h1>
             <ion-grid
               *ngIf="store.packages | filterPackages: query:category as filtered"
             >
-              <ion-row *ngIf="localPkgs$ | async as localPkgs">
-                <ion-col
-                  *ngFor="let pkg of filtered"
-                  sizeXs="12"
-                  sizeSm="12"
-                  sizeMd="6"
-                >
-                  <marketplace-item [pkg]="pkg">
-                    <marketplace-status
-                      class="status"
-                      [version]="pkg.manifest.version"
-                      [localPkg]="localPkgs[pkg.manifest.id]"
-                    ></marketplace-status>
-                  </marketplace-item>
-                </ion-col>
-              </ion-row>
+              <ng-container *ngIf="filtered.length; else empty">
+                <ion-row *ngIf="localPkgs$ | async as localPkgs">
+                  <ion-col
+                    *ngFor="let pkg of filtered"
+                    sizeXs="12"
+                    sizeSm="12"
+                    sizeMd="6"
+                  >
+                    <marketplace-item [pkg]="pkg">
+                      <marketplace-status
+                        class="status"
+                        [version]="pkg.manifest.version"
+                        [localPkg]="localPkgs[pkg.manifest.id]"
+                      ></marketplace-status>
+                    </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>