feat: add tag field

Change-Id: I2b2cc904406ff19a8615dc49d1d6f1e3027bdd9a

src/web/src/app/modules/details/app-detail.component.html

@@ -1,25 +1,22 @@
 <div *ngIf="app; else: $loading">
   <div class="appInfo">
     <div class="info-left">
-      <img class="icon" [src]="app | icon" /> <br />
+      <img class="icon"
+           [src]="app | icon" /> <br />
       <ng-container *ngIf="app.version">
         <ng-container *ngIf="(job$ | async) as job; else: cltButton">
-          <dstore-progress-button
-            [job]="job.job"
-            [type]="job.type"
-            [status]="job.status"
-            [progress]="job.progress"
-            [disabled]="!job.cancelable || job.status === StoreJobStatus.failed"
-          ></dstore-progress-button>
+          <dstore-progress-button [job]="job.job"
+                                  [type]="job.type"
+                                  [status]="job.status"
+                                  [progress]="job.progress"
+                                  [disabled]="!job.cancelable || job.status === StoreJobStatus.failed"></dstore-progress-button>
         </ng-container>
         <ng-template #cltButton>
-          <dstore-job-button
-            class="jobButton"
-            [version]="app.version"
-            [appName]="app.name"
-            [localName]="app.localInfo.description.name"
-            [openType]="app.extra['open']"
-          ></dstore-job-button>
+          <dstore-job-button class="jobButton"
+                             [version]="app.version"
+                             [appName]="app.name"
+                             [localName]="app.localInfo.description.name"
+                             [openType]="app.extra['open']"></dstore-job-button>
         </ng-template>
       </ng-container>
     </div>
@@ -34,32 +31,49 @@
             <div i18n>Size:</div>
           </ng-container>
           <div i18n>Updated Date:</div>
-          <div *ngIf="app.homePage" i18n>Website:</div>
+          <div *ngIf="app.homePage"
+               i18n>Website:</div>
+          <div *ngIf="app.localInfo.tags.length>0"
+               i18n>Tags:</div>
           <div i18n>Description:</div>
         </div>
         <div class="info">
           <div class="rate">
             <dstore-star [rate]="app.rate"></dstore-star>
             <span class="details">{{ app.rate.toFixed(1) }}</span>
-            <span class="details" i18n>{{ app.downloads }} downloads</span>
-            <span class="details" i18n>{{ app.ratings }} ratings</span>
+            <span class="details"
+                  i18n>{{ app.downloads }} downloads</span>
+            <span class="details"
+                  i18n>{{ app.ratings }} ratings</span>
           </div>
           <div>{{ app.localCategory }}</div>
           <ng-container *ngIf="app.version">
             <div>{{ app.version.remoteVersion || app.version.localVersion }}</div>
             <div>
-              <ng-container *ngIf="size === null" i18n>Calculating</ng-container>
-              <ng-container *ngIf="size === 0" i18n>Downloaded</ng-container>
+              <ng-container *ngIf="size === null"
+                            i18n>Calculating</ng-container>
+              <ng-container *ngIf="size === 0"
+                            i18n>Downloaded</ng-container>
               <ng-container *ngIf="size > 0">{{ size | sizeHuman }}</ng-container>
             </div>
           </ng-container>
           <div>
             {{ app.updateTime | date: 'yyyy-MM-dd HH:mm' }} <span class="toRight">&lt;</span>
-            <button class="reminder" (click)="reminder(app.name)" i18n>Ask for update</button>
+            <button class="reminder"
+                    (click)="reminder(app.name)"
+                    i18n>Ask for update</button>
           </div>
-          <div class="webSite" *ngIf="app.homePage" (click)="openURL(app.homePage)">
+          <div class="webSite"
+               *ngIf="app.homePage"
+               (click)="openURL(app.homePage)">
             {{ app.homePage }}
           </div>
+          <div class="tags"
+               *ngIf="app.localInfo.tags.length>0">
+            <span class="tag"
+                  *ngFor="let tag of app.localInfo.tags"
+                  [routerLink]="['/tag',tag]">{{tag}}</span>
+          </div>
           <div class="pre selectable">{{ app.localInfo.description.description }}</div>
         </div>
       </div>
@@ -68,32 +82,36 @@
   <br />
   <br />
 
-  <app-screenshot
-    [screenshotList]="
+  <app-screenshot [screenshotList]="
       [app.localInfo.images.screenshot, app.localInfo.images.screenshotHD] | fitImage
-    "
-  ></app-screenshot>
+    "></app-screenshot>
 
   <ng-container *ngIf="app.version">
     <app-donate [appName]="app.name"></app-donate>
     <div class="hr"></div>
     <br />
-    <dstore-app-comment
-      [appName]="app.name"
-      [version]="app.version.remoteVersion || app.version.localVersion"
-    ></dstore-app-comment>
-    <div class="ad" *ngIf="(adVisible | async)" i18n>CDN supported by UPYUN</div>
+    <dstore-app-comment [appName]="app.name"
+                        [version]="app.version.remoteVersion || app.version.localVersion"></dstore-app-comment>
+    <div class="ad"
+         *ngIf="(adVisible | async)"
+         i18n>CDN supported by UPYUN</div>
   </ng-container>
 </div>
 
-<ng-template #$loading let-$app>
-  <div class="loadingContainer" *ngIf="app === null; else: $DropOff"><app-wait></app-wait></div>
+<ng-template #$loading
+             let-$app>
+  <div class="loadingContainer"
+       *ngIf="app === null; else: $DropOff">
+    <app-wait></app-wait>
+  </div>
 
   <ng-template #$DropOff>
     <div class="dropOff">
-      <img class="tips_bg" src="/assets/icons/tips_bg.svg" /> <span i18n>Sorry</span>
+      <img class="tips_bg"
+           src="/assets/icons/tips_bg.svg" /> <span i18n>Sorry</span>
       <span i18n>It's in adjustment, you can return to</span>
-      <a href="javascript:history.go(-1)" i18n>Previous</a>
+      <a href="javascript:history.go(-1)"
+         i18n>Previous</a>
     </div>
   </ng-template>
 
@@ -107,4 +125,4 @@
   <ng-template>
     <div><span i18n>Sorry</span> <span i18n>Something goes wrong.</span></div>
   </ng-template>
-</ng-template>
+</ng-template>

src/web/src/app/modules/details/app-detail.component.scss

@@ -123,3 +123,14 @@
   align-items: center;
   color: gray;
 }
+
+.tags {
+  .tag {
+    color: white;
+    padding: 0 0.5rem;
+    background-color: coral;
+    border-radius: 4px;
+    margin-right: 0.5rem;
+    cursor: pointer;
+  }
+}

src/web/src/app/modules/share/components/app-list/app-list.component.html

@@ -7,7 +7,7 @@
      [hidden]="loading"
      *ngIf="apps as $apps">
   <div class="app"
-       [routerLink]="$app.name"
+       [routerLink]="routePrefix?[routePrefix,$app.name]:$app.name"
        [class.index]="rankIndex"
        [class.job]="jobs[$app.name] || jobNames.has($app.name)"
        *ngFor="let $app of $apps;index as $index">

src/web/src/app/modules/share/components/app-list/app-list.component.ts

@@ -49,6 +49,10 @@ export class AppListComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   apps$: Observable<App[]>;
   @Input()
+  appList: App[];
+  @Input()
+  routePrefix: string;
+  @Input()
   sortBy: SortOrder;
   @Input()
   maxCount: number;
@@ -72,6 +76,9 @@ export class AppListComponent implements OnInit, OnChanges, OnDestroy {
   openApp = this.storeService.openApp;
 
   ngOnInit() {
+    if (this.appList) {
+      this.apps = this.appList;
+    }
     this.jobs$ = this.jobService.jobsInfo().subscribe(jobInfos => {
       const jobs: { [key: string]: StoreJobInfo } = {};
       jobInfos.forEach(job => {
@@ -95,7 +102,9 @@ export class AppListComponent implements OnInit, OnChanges, OnDestroy {
     });
   }
   ngOnDestroy() {
-    this.jobs$.unsubscribe();
+    if (this.jobs$) {
+      this.jobs$.unsubscribe();
+    }
   }
 
   ngOnChanges() {

src/web/src/app/modules/tags/components/tag-apps/tag-apps.component.html

@@ -0,0 +1,11 @@
+<ng-container *ngIf="(list$ | async) as list; else: loading">
+  <app-app-title #$title>包含"{{ list.tag }}"的应用</app-app-title>
+  <app-app-list [appList]="list.apps"
+                [sortBy]="$title.sortBy"
+                [routePrefix]="'/app'"></app-app-list>
+</ng-container>
+<ng-template #loading>
+  <div class="loadingContainer">
+    <app-wait></app-wait>
+  </div>
+</ng-template>

src/web/src/app/modules/tags/components/tag-apps/tag-apps.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map, switchMap } from 'rxjs/operators';
+
+import { AppService } from 'app/services/app.service';
+
+@Component({
+  selector: 'dstore-tag-apps',
+  templateUrl: './tag-apps.component.html',
+  styleUrls: ['./tag-apps.component.scss'],
+})
+export class TagAppsComponent implements OnInit {
+  constructor(private appService: AppService, private route: ActivatedRoute) {}
+  list$ = this.route.paramMap.pipe(
+    map(param => param.get('tag')),
+    switchMap(
+      () => this.appService.list(),
+      (tag, apps) => {
+        apps = apps.filter(app => app.localInfo.tags.includes(tag));
+        return { tag, apps };
+      },
+    ),
+  );
+  ngOnInit() {}
+}

src/web/src/app/modules/tags/tags-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { TagAppsComponent } from './components/tag-apps/tag-apps.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TagAppsComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TagsRoutingModule {}

src/web/src/app/modules/tags/tags.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ShareModule } from 'app/modules/share/share.module';
+import { TagsRoutingModule } from './tags-routing.module';
+import { TagAppsComponent } from './components/tag-apps/tag-apps.component';
+
+@NgModule({
+  declarations: [TagAppsComponent],
+  imports: [CommonModule, TagsRoutingModule, ShareModule],
+})
+export class TagsModule {}

src/web/src/app/routing/routing.module.ts

@@ -54,6 +54,10 @@ const routes: Routes = [
     path: 'search',
     loadChildren: 'app/modules/search/search.module#SearchModule',
   },
+  {
+    path: 'tag/:tag',
+    loadChildren: 'app/modules/tags/tags.module#TagsModule',
+  },
 ];
 @NgModule({
   imports: [