From 60b9f2566a0d7046c4db62a695296ae4e96117b8 Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Mon, 22 Nov 2021 17:06:04 +0300
Subject: [PATCH] Refactor AppListPage

---
 .../app-list-icon.component.html              |  2 +-
 .../app-list-icon/app-list-icon.component.ts  |  4 ++--
 .../app-list-pkg/app-list-pkg.component.html  | 21 +++++--------------
 .../app-list-pkg/app-list-pkg.component.ts    | 15 ++++++++-----
 .../app-list-reorder.component.scss           |  7 +++++++
 .../app-list-reorder.component.ts             |  1 +
 .../apps-routes/app-list/app-list.page.scss   |  4 ----
 7 files changed, 26 insertions(+), 28 deletions(-)
 create mode 100644 ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.scss

diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.html b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.html
index 22c9c27e5..0bbf17131 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.html
+++ b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.html
@@ -6,5 +6,5 @@
   color="warning"
 ></ion-icon>
 <ng-template #bulb>
-  <div class="bulb" [style.background-color]="getColor(pkg)"></div>
+  <div class="bulb" [style.background-color]="color"></div>
 </ng-template>
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts
index f91967982..bc1ea9184 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts
+++ b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts
@@ -14,9 +14,9 @@ export class AppListIconComponent {
   @Input()
   connectionFailure = false;
 
-  getColor(pkg: PkgInfo): string {
+  get color(): string {
     return this.connectionFailure
       ? "var(--ion-color-dark)"
-      : "var(--ion-color-" + pkg.primaryRendering.color + ")";
+      : "var(--ion-color-" + this.pkg.primaryRendering.color + ")";
   }
 }
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.html b/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.html
index 9da5a2344..7926dbe36 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.html
+++ b/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.html
@@ -1,8 +1,4 @@
-<ion-item
-  button
-  detail="false"
-  [routerLink]="['/services', pkg.entry.manifest.id]"
->
+<ion-item button detail="false" [routerLink]="['/services', manifest.id]">
   <app-list-icon
     slot="start"
     [pkg]="pkg"
@@ -12,8 +8,8 @@
     <img alt="" [src]="pkg.entry['static-files'].icon" />
   </ion-thumbnail>
   <ion-label>
-    <h2>{{ pkg.entry.manifest.title }}</h2>
-    <p>{{ pkg.entry.manifest.version | displayEmver }}</p>
+    <h2>{{ manifest.title }}</h2>
+    <p>{{ manifest.version | displayEmver }}</p>
     <status
       [disconnected]="connectionFailure"
       [rendering]="pkg.primaryRendering"
@@ -23,19 +19,12 @@
     ></status>
   </ion-label>
   <ion-button
-    *ngIf="pkg.entry.manifest.interfaces | hasUi"
+    *ngIf="manifest.interfaces | hasUi"
     slot="end"
     fill="clear"
     color="primary"
     (click)="launchUi(pkg.entry)"
-    [disabled]="
-      !(
-        pkg.entry.state
-        | isLaunchable
-          : pkg.entry.installed?.status.main.status
-          : pkg.entry.manifest.interfaces
-      )
-    "
+    [disabled]="!(pkg.entry.state | isLaunchable: status:manifest.interfaces)"
   >
     <ion-icon slot="icon-only" name="open-outline"></ion-icon>
   </ion-button>
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.ts b/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.ts
index 1cd5089b2..4cc739713 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.ts
+++ b/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.ts
@@ -5,7 +5,10 @@ import {
   Inject,
   Input,
 } from "@angular/core";
-import { PackageDataEntry } from "src/app/services/patch-db/data-model";
+import {
+  PackageMainStatus,
+  PackageDataEntry, Manifest,
+} from "src/app/services/patch-db/data-model";
 import { ConfigService } from "src/app/services/config.service";
 import { PkgInfo } from "src/app/util/get-package-info";
 
@@ -26,10 +29,12 @@ export class AppListPkgComponent {
     private readonly config: ConfigService
   ) {}
 
-  getColor(pkg: PkgInfo): string {
-    return this.connectionFailure
-      ? "var(--ion-color-dark)"
-      : "var(--ion-color-" + pkg.primaryRendering.color + ")";
+  get status(): PackageMainStatus {
+    return this.pkg.entry.installed?.status.main.status;
+  }
+
+  get manifest(): Manifest {
+    return this.pkg.entry.manifest;
   }
 
   launchUi(pkg: PackageDataEntry): void {
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.scss b/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.scss
new file mode 100644
index 000000000..962255efa
--- /dev/null
+++ b/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.scss
@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+.item {
+  --background: var(--ion-color-medium-shade);
+}
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.ts b/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.ts
index 09183b78e..a861ec493 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.ts
+++ b/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.ts
@@ -16,6 +16,7 @@ import {
 @Component({
   selector: "app-list-reorder",
   templateUrl: "app-list-reorder.component.html",
+  styleUrls: ["app-list-reorder.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppListReorderComponent {
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.scss b/ui/src/app/pages/apps-routes/app-list/app-list.page.scss
index ce81e3e2c..8a42dee41 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.scss
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.scss
@@ -1,7 +1,3 @@
 ion-item-divider {
   margin-bottom: 16px;
 }
-
-.item {
-  --background: var(--ion-color-medium-shade);
-}