From f80276cd57049c55534cf7b4003b7175e665ff9d Mon Sep 17 00:00:00 2001
From: lcdr <lcdr@users.noreply.github.com>
Date: Sat, 4 Nov 2023 11:08:37 +0100
Subject: [PATCH] Use SQL query API in item spotlight page

---
 .../whats-cool-items.component.html           | 31 ++++++++++++++-----
 .../whats-cool-items.component.ts             | 26 ++--------------
 2 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/src/app/objects/whats-cool-items/whats-cool-items.component.html b/src/app/objects/whats-cool-items/whats-cool-items.component.html
index 878cca0..b3a3410 100644
--- a/src/app/objects/whats-cool-items/whats-cool-items.component.html
+++ b/src/app/objects/whats-cool-items/whats-cool-items.component.html
@@ -4,23 +4,38 @@
 </ul>
 <section>
     <h2>What's cool: Item Spotlight</h2>
-    <section *ngIf="$list | async; let list; else loading">
-        <lux-gate-version-toc [list]="list | paramset:'gate_version' | as_array"></lux-gate-version-toc>
+    <section *ngIf="'
+      select
+        gate_version,
+        itemID,
+        icon_asset,
+        description_en_US as description
+      from
+        WhatsCoolItemSpotlight w
+        join ComponentsRegistry c on c.id = w.itemID
+        join RenderComponent r on r.id = c.component_id
+      where
+        component_type = 2
+      order by w.id
+      ' | query | group:'gate_version';
+      let groups;
+      else loading">
+        <lux-gate-version-toc [list]="groups | keyset | as_array"></lux-gate-version-toc>
 
-        <section [id]="v.key | toc:'fg'" *ngFor="let v of list | group:'gate_version' | keys">
+        <section [id]="v.key | toc:'fg'" *ngFor="let v of groups | keys">
             <h3 *ngIf="v.key === ''">No Feature Gate</h3>
             <h3 *ngIf="v.key !== ''">Feature Gate <small><lux-gate-version-tag [gate_version]="v.key"
                         [float]="false"></lux-gate-version-tag></small>
             </h3>
-            <div class="item" *ngFor="let item of v.value">
+            <div class="item" *ngFor="let row of v.value">
                 <span class="left">
-                    <lux-slot [luxFetchItem]="item.itemID"></lux-slot>
+                    <lux-slot link="/objects/{{row.itemID}}" [icon]="row.icon_asset | icon" [luxItemTooltip]="row.itemID"></lux-slot>
                 </span>
-                <blockquote class="cool">{{(loc(item.id) | async).description}}</blockquote>
+                <blockquote class="cool" luxTooltip="description">{{row.description}}</blockquote>
             </div>
         </section>
     </section>
     <ng-template #loading>
-        Loading&ell;
+        Loading&mldr;
     </ng-template>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/app/objects/whats-cool-items/whats-cool-items.component.ts b/src/app/objects/whats-cool-items/whats-cool-items.component.ts
index 78c7efa..a9d5205 100644
--- a/src/app/objects/whats-cool-items/whats-cool-items.component.ts
+++ b/src/app/objects/whats-cool-items/whats-cool-items.component.ts
@@ -1,30 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { DB_WhatsCoolItemSpotlight } from '../../../defs/cdclient';
-import { Locale_WhatsCoolItemSpotlight } from '../../../defs/locale';
-import { LuCoreDataService } from '../../util/services/lu-core-data.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'lux-whats-cool-items',
   templateUrl: './whats-cool-items.component.html',
   styleUrls: ['./whats-cool-items.component.css']
 })
-export class WhatsCoolItemsComponent implements OnInit {
-
-  $list: Observable<DB_WhatsCoolItemSpotlight[]>;
-  $loc: Observable<{ [key: string]: Locale_WhatsCoolItemSpotlight }>;
-
-  constructor(private luCoreData: LuCoreDataService) { }
-
-  ngOnInit(): void {
-    const TABLE = "WhatsCoolItemSpotlight";
-    this.$list = this.luCoreData.getTableEntry(TABLE, 'all');
-    this.$loc = this.luCoreData.getLocaleSubtree<Locale_WhatsCoolItemSpotlight>(TABLE);
-  }
-
-  loc(key: number): Observable<Locale_WhatsCoolItemSpotlight> {
-    return this.$loc.pipe(map(x => { return x[String(key)]; }));
-  }
-
-}
+export class WhatsCoolItemsComponent {}