Use lux-table in objects by type page

Author: lcdr

src/app/objects/by-type/by-type.component.html

@@ -6,19 +6,16 @@
 
 <h2>Objects <small>Type: "{{type}}"</small></h2>
 
-<div class="table-responsive">
-  <table>
-    <tr>
-      <th>ID</th>
-      <th>Name</th>
-      <th>Localized Name</th>
-    </tr>
-    <tr *ngFor="let object of objects | async">
-      <td>{{object.id}}</td>
-      <td><a routerLink="/objects/{{object.id}}">{{object.name ? object.name : '[Unnamed]'}}</a></td>
-      <td>{{object.id | loc:"Objects" | async | elem:"name" }}</td>
-    </tr>
-  </table>
-</div>
-
-<app-pagination [prefix]="'/objects/types/' + type" [count]="page_count" [current]="page"></app-pagination>
+<lux-table
+  select="id as ID, name as Name, name_en_US as 'Localized Name'"
+  from="Objects"
+  where="type = '{{type}}'"
+  order-by="ID"
+  [limit]="100"
+  [page]="page" #table>
+  <tr *ngFor="let row of table.rows">
+    <td>{{row.ID}}</td>
+    <td><a routerLink="/objects/{{row.ID}}">{{row.Name}}</a></td>
+    <td>{{row["Localized Name"]}}</td>
+  </tr>
+</lux-table>

src/app/objects/by-type/by-type.component.ts

@@ -1,89 +1,19 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map, switchMap, tap } from 'rxjs/operators';
-
-import { LuCoreDataService } from '../../services';
-import { DB_ObjectRef_ByType } from '../../../defs/cdclient';
-
-interface ObjectsByTypeEmbedded {
-  objects: {[key: number]: {id: number, name: number}};
-}
-
-interface ObjectsByType {
-  object_ids: number[];
-  _embedded: ObjectsByTypeEmbedded;
-}
 
 @Component({
   selector: 'app-by-type',
   templateUrl: './by-type.component.html',
   styleUrls: ['./by-type.component.css']
 })
-export class ObjectsByTypeComponent implements OnInit {
-
-  page_size: number = 100;
-  page: number = -1;
-  page_count: number = -1;
+export class ObjectsByTypeComponent {
   type: string = "";
-  objects: Observable<DB_ObjectRef_ByType[]>;
-  count: Observable<number[]>;
-
-  constructor(
-    private luCoreData: LuCoreDataService,
-    private route: ActivatedRoute,
-    private cd: ChangeDetectorRef,
-  ) { }
-
-  ngOnInit() {
-    this.objects = this.route.paramMap
-      .pipe(map(this.mapRouteInfo), tap(this.tapRef.bind(this)), switchMap(this.loadDataObservable.bind(this)))
-    this.objects.subscribe(x => this.cd.detectChanges());
-  }
-
-  mapRouteInfo(map) {
-    let type = map.get('type');
-    if (map.has('page')) {
-      let page = map.get('page');
-      return { type: type, page: +page };
-    } else {
-      return { type: type, page: 0 };
-    }
-  }
+  page: number = 0;
 
-  tapRef(ref) {
-    this.type = ref.type;
-    this.page = ref.page;
-    this.cd.detectChanges();
+  constructor(private route: ActivatedRoute) {
+    this.route.params.subscribe(p => {
+      this.type = p.type;
+      this.page = Number(p.page);
+    });
   }
-
-  loadDataObservable(ref) {
-    return this.luCoreData.getRevEntry<ObjectsByType>('object_types', ref.type)
-      .pipe(
-        map((v: ObjectsByType) => v.object_ids.map(id => {
-          return { id, name: v._embedded.objects[id].name };
-        })),
-        tap(this.setPageCounters.bind(this, ref)),
-        map(this.processData.bind(this, ref))
-      );
-  }
-
-  setPageCounters(ref, data) {
-    this.page_count = Math.ceil(data.length / this.page_size);
-  }
-
-  processData(ref, data) {
-    let sorted = data.sort(this.sortObjectTypeRefs);
-    let from = this.page_size * ref.page;
-    let to = from + this.page_size;
-    let page = sorted.slice(from, to);
-    return page;
-  }
-
-  sortObjectTypeRefs(a, b) {
-    return a.id - b.id;
-  }
-
-
-
 }

src/app/objects/objects-routing.module.ts

@@ -35,11 +35,7 @@ const objectsRoutes: Routes = [
   { path: 'loot/table/:id', component: LootTableComponent, data: { title: params => `LootTable #${params.id}` } },
   { path: 'loot/matrix/:id', component: LootMatrixComponent, data: { title: params => `LootMatrix #${params.id}` } },
   { path: 'search', component: ObjectsSearchComponent, data: { title: "Search" } },
-  {
-    path: 'types/:type', component: ObjectsByTypeComponent, data: {
-      title: params => `Objects (${params['type']})`
-    }
-  },
+  { path: 'types/:type', redirectTo: "/objects/types/:type/page/0", pathMatch: "full" },
   {
     path: 'types/:type/page/:page', component: ObjectsByTypeComponent, data: {
       title: params => `Objects (${params['type']}; Page ${params['page']})`