Use SQL query API in mission index view, redesign it for better space…

… usage
LUDevNet · Mar 31, 2024 · 153c4cf · 153c4cf
1 parent 04c2949
commit 153c4cf
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 29 deletions.
diff --git a/src/app/missions/index/index.component.css b/src/app/missions/index/index.component.css
@@ -0,0 +1,14 @@
+#sections {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+
+section {
+  width: 300px;
+}
+
+section li {
+  line-height: 1.5rem;
+}
diff --git a/src/app/missions/index/index.component.html b/src/app/missions/index/index.component.html
@@ -6,18 +6,28 @@ <h2>Missions
   <small><a routerLink="/missions/search">[Search]</a></small>
 </h2>
 
-<section *ngFor="let declared_type of $mission_types | async | keys">
-  <app-group-icon [name]="declared_type.key"></app-group-icon>
-  <h3><a routerLink="/missions/type/{{declared_type.key}}">{{declared_type.key}}</a></h3>
+<div id="sections" *ngIf="'
+  select distinct
+    defined_type,
+    ifnull(defined_subtype, \'\') subtype
+  from Missions
+  order by
+    defined_type,
+    subtype
+  ' | query; let types">
+  <section *ngFor="let declared_type of types | group:'defined_type' | keys">
+    <app-group-icon [name]="declared_type.key"></app-group-icon>
+    <h3><a routerLink="/missions/type/{{declared_type.key}}">{{declared_type.key}}</a></h3>
 
-  <ul>
-    <li *ngFor="let declared_subtype of declared_type.value">
-      <a *ngIf="declared_subtype != ''" routerLink="/missions/type/{{declared_type.key}}/subtype/{{declared_subtype}}">
-        {{declared_subtype}}
-      </a>
-      <a *ngIf="declared_subtype == ''" routerLink="/missions/type/{{declared_type.key}}">
-        General
-      </a>
-    </li>
-  </ul>
-</section>
+    <ul>
+      <li *ngFor="let declared_subtype of declared_type.value">
+        <a *ngIf="declared_subtype.subtype != ''" routerLink="/missions/type/{{declared_type.key}}/subtype/{{declared_subtype.subtype}}">
+          {{declared_subtype.subtype}}
+        </a>
+        <a *ngIf="declared_subtype.subtype == ''" routerLink="/missions/type/{{declared_type.key}}">
+          General
+        </a>
+      </li>
+    </ul>
+  </section>
+</div>
diff --git a/src/app/missions/index/index.component.ts b/src/app/missions/index/index.component.ts
@@ -1,21 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { LuCoreDataService } from '../../util/services/lu-core-data.service';
+import { Component } from '@angular/core';
 
-type MissionTypes = { [key: string]: string[] };
 @Component({
   selector: 'app-index',
   templateUrl: './index.component.html',
   styleUrls: ['./index.component.css']
 })
-export class MissionIndexComponent implements OnInit {
-
-  missions: any = {};
-  $mission_types: Observable<MissionTypes>;
-
-  constructor(private luCoreDataService: LuCoreDataService) { }
-
-  ngOnInit() {
-    this.$mission_types = this.luCoreDataService.getRev<MissionTypes>('mission_types')
-  }
-}
+export class MissionIndexComponent {}