feat: remove app

Change-Id: I32b25471ff4c9ee3e47cb9301b4e62368ee15cd2

src/web/src/app/components/side-nav/side-nav.component.html

@@ -140,9 +140,9 @@
                <div class="title"
                     i18n="uninstall-app|Uninstall applications">Uninstall</div>
           </div>
-          <!-- <div class="navItem"
+          <div class="navItem"
                [routerLink]="['/my','app']">
                <div class="title">My App</div>
-          </div> -->
+          </div>
      </ng-container>
 </div>

src/web/src/app/modules/client/models/installed.ts

@@ -3,4 +3,5 @@ export interface InstalledApp {
   version: string;
   size: number;
   time: number;
+  dpk: string;
 }

src/web/src/app/modules/my-app/components/local-app/local-app.component.html

@@ -9,9 +9,13 @@
             routerLinkActive="active"
             i18n>Remote App</button>
   </dstore-center-title>
-
-  <ng-container *ngIf="installedList$|async as installedList">
-    <ng-container *ngFor="let installed of installedList[pageIndex$|async]">
+  <ng-template #loadingContainer>
+    <div class="loadingContainer">
+      <app-wait></app-wait>
+    </div>
+  </ng-template>
+  <ng-container *ngIf="installedList$|async as installedPage; else loadingContainer">
+    <ng-container *ngFor="let installed of installedPage.list">
       <div class="installedApp">
         <img class="icon"
              [routerLink]="['/app',installed.name]"
@@ -20,27 +24,49 @@
           <span>{{installed.app.localInfo.description.name}}</span>
           <span>{{installed.size|sizeHuman}}</span>
         </div>
-        <div class="installed">
-          <div class="time">
-            <span i18n>Date installed:</span>
-            {{installed.time*1000|date:'yyyy-MM-dd'}}
+        <ng-container *ngIf="removingList$|async as removingList">
+          <div class="installed">
+            <ng-template #confirm>
+              <div class="confirm"
+                   i18n>Are you sure to uninstall this application?</div>
+            </ng-template>
+            <ng-container *ngIf="select != installed.app.name;else confirm">
+              <div class="time">
+                <span i18n>Date installed:</span>
+                {{installed.time*1000|date:'yyyy-MM-dd'}}
+              </div>
+              <div class="version">
+                <span i18n>Version:</span>
+                {{installed.version}}
+              </div>
+            </ng-container>
           </div>
-          <div class="version">
-            <span i18n>Version:</span>
-            {{installed.version}}
+          <div class="control">
+            <ng-template #confirmBtn>
+              <button (click)="select=null"
+                      i18n>Cancel</button>
+              <button class="primary"
+                      (click)="remove(installed)"
+                      i18n>Confirm</button>
+            </ng-template>
+            <ng-container *ngIf="select != installed.app.name;else confirmBtn">
+              <ng-template #uninstall>
+                <button (click)="select=installed.app.name"
+                        i18n>Uninstall</button>
+              </ng-template>
+              <button *ngIf="removingList.includes(installed.app.name);else uninstall"
+                      disabled
+                      i18n>Uninstalling</button>
+
+            </ng-container>
           </div>
-        </div>
-        <div class="control">
-          <ng-container>
-            <button>Uninstall</button>
-          </ng-container>
-        </div>
+        </ng-container>
       </div>
     </ng-container>
     <div class="paginator">
-      <app-paginator [count]="installedList.length"
-                     [pageIndex]="pageIndex$|async"
-                     (pageIndexChange)="gotoPage($event+1)"></app-paginator>
+      <app-paginator [count]="installedPage.total"
+                     [pageIndex]="installedPage.page"
+                     (pageIndexChange)="gotoPage($event)"></app-paginator>
     </div>
   </ng-container>
 </div>

src/web/src/app/modules/my-app/components/local-app/local-app.component.scss

@@ -29,13 +29,21 @@
       align-items: center;
       color: gray;
     }
+    .confirm {
+      display: flex;
+      align-items: center;
+    }
   }
   .control {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     padding-right: 0.5rem;
+    button {
+      width: 5rem;
+      margin: 0 0.5rem;
+    }
   }
 }
 .paginator {

src/web/src/app/modules/my-app/components/local-app/local-app.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { chunk } from 'lodash';
+import { chunk, get } from 'lodash';
 import { BehaviorSubject, combineLatest } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, tap, shareReplay } from 'rxjs/operators';
 
-import { LocalAppService } from '../../services/local-app.service';
+import { LocalAppService, LocalAppInfo } from '../../services/local-app.service';
 import { BrowserService } from 'app/modules/share/services/browser.service';
 
 @Component({
@@ -19,20 +19,47 @@ export class LocalAppComponent implements OnInit {
     private localAppService: LocalAppService,
     private browserService: BrowserService,
   ) {}
+  select: string;
   installedList$ = this.chunkList();
-  removeList$ = this.localAppService.RemoveList();
-  pageIndex$ = this.route.queryParamMap.pipe(map(query => Number(query.get('page') || 1) - 1));
-  ngOnInit() {}
-  gotoPage(page: number) {
-    this.router.navigate([], { queryParams: { page: page } });
+  removing: string[] = [];
+  removingList$ = this.localAppService.RemovingList().pipe(
+    tap(list => {
+      if (list.includes(this.select)) {
+        this.select = null;
+      }
+    }),
+    map(list => list.concat(this.removing)),
+    shareReplay(),
+  );
+
+  gotoPage(pageIndex: number) {
+    this.router.navigate([], { queryParams: { page: pageIndex + 1 } });
   }
+
   chunkList() {
-    return combineLatest(this.browserService.windowSize$, this.localAppService.LocalAppList()).pipe(
-      map(([size, list]) => {
+    return combineLatest(
+      this.browserService.windowSize$,
+      this.localAppService.LocalAppList(),
+      this.route.queryParamMap,
+    ).pipe(
+      map(([size, list, query]) => {
+        const pageIndex = Number(query.get('page') || 1) - 1;
         // 使用窗口高度减去标题和分页宽度,再除于列表元素高度,计算出分页大小
         const pageSize = Math.floor((size.height - 64 - 20) / 64);
-        return chunk(list, pageSize);
+        const chunks = chunk(list, pageSize);
+        return {
+          list: chunks[pageIndex] || chunks[chunks.length - 1],
+          page: pageIndex,
+          total: chunks.length,
+        };
       }),
     );
   }
+
+  remove(app: LocalAppInfo) {
+    this.removing.push(app.app.name);
+    this.localAppService.RemoveLocalApp(app);
+  }
+
+  ngOnInit() {}
 }

src/web/src/app/modules/my-app/services/local-app.service.ts

@@ -24,15 +24,21 @@ export class LocalAppService {
       switchMap(
         installed => this.appService.getApps(installed.map(app => app.name)),
         (installed: LocalAppInfo[], appInfos) => {
-          installed.forEach(app => {
-            app.app = appInfos.find(info => info.name === app.name);
-          });
+          installed = installed
+            .reduce((acc: LocalAppInfo[], app) => {
+              app.app = appInfos.find(info => info.packageURI.includes(app.dpk));
+              if (app.app) {
+                acc.push(app);
+              }
+              return acc;
+            }, [])
+            .sort((a, b) => b.time - a.time);
           return installed;
         },
       ),
     );
   }
-  RemoveList() {
+  RemovingList() {
     return this.jobService.jobsInfo().pipe(
       map(jobs => {
         return jobs
@@ -45,8 +51,10 @@ export class LocalAppService {
       }),
     );
   }
-  RemoveLocalApp() {}
+  RemoveLocalApp(app: LocalAppInfo) {
+    this.storeService.removePackage(app.name, app.app.localInfo.description.name);
+  }
 }
-interface LocalAppInfo extends InstalledApp {
+export interface LocalAppInfo extends InstalledApp {
   app: App;
 }