PackageDetail.vue: Add dependencies tab

dmstern · Aug 22, 2018 · da7c829 · da7c829
1 parent bb58d59
commit da7c829
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/src/services/BackendApi.ts b/src/services/BackendApi.ts
@@ -1,6 +1,7 @@
 import axios, { AxiosInstance, AxiosPromise } from 'axios';
 import { PackagesResponse } from '@/model/PackageResponse';
 import Package from '@/model/Package';
+import { PackageMetaDataDTO } from '@/model/package-meta-data';
 
 export default class BackendApi {
 
@@ -25,7 +26,7 @@ export default class BackendApi {
     return this.get('config');
   }
 
-  public getPackageDetail({scope, packageName}): AxiosPromise<Package> {
+  public getPackageDetail({scope, packageName}): AxiosPromise<PackageMetaDataDTO> {
     return this.get(`packageDetail/${scope ? `${scope}/` : ''}${packageName}`);
   }
 

diff --git a/src/services/PackageService.ts b/src/services/PackageService.ts
@@ -46,7 +46,7 @@ export default class PackagesService {
 
     return new Promise<Package>((fulfill, reject) => {
       BackendApi.Instance.getPackageDetail({scope, packageName}).then((response) => {
-        this.packageDetails[key] = response.data;
+        this.packageDetails[key] = new Package(response.data);
         return fulfill(this.packageDetails[key]);
       });
     });

diff --git a/src/views/PackageDetail.vue b/src/views/PackageDetail.vue
@@ -2,23 +2,36 @@
   <v-container>
     <h1 v-if="data.packageDetail">{{ data.packageDetail.name }}</h1>
     <v-tabs v-model="activeTab" v-if="data.packageDetail">
-      <v-tab ripple>README</v-tab>
-      <v-tab ripple v-if="data.packageDetail.mainCode">main code file</v-tab>
+      <v-tab>README</v-tab>
+      <v-tab v-if="data.packageDetail.mainCode">main code file</v-tab>
+      <v-tab>{{data.dependenciesCount}} Dependencies</v-tab>
+      <v-tab>Versions</v-tab>
       <v-tab-item>
-        <v-card flat>
+        <v-card>
           <v-card-text>
             <div v-highlightjs v-if="data.packageDetail.readme" v-html="data.packageDetail.readme"></div>
           </v-card-text>
         </v-card>
       </v-tab-item>
       <v-tab-item v-if="data.packageDetail.mainCode">
-        <v-card flat>
+        <v-card>
           <v-card-text>
-            <h1>{{data.packageDetail.versions[data.packageDetail['dist-tags'].latest].main}}</h1>
+            <h1>{{data.currentPackage.main}}</h1>
             <pre v-highlightjs="data.packageDetail.mainCode"><code></code></pre>
           </v-card-text>
         </v-card>
       </v-tab-item>
+      <v-tab-item>
+        <v-card>
+          <v-card-text>
+            <h3>Dependencies</h3>
+            <v-chip small outline color="primary" v-for="(version, key) in data.currentPackage.dependencies" :key="key">{{key}}</v-chip>
+            <h3>DevDependencies</h3>
+            <v-chip small outline color="primary" v-for="(version, key) in data.currentPackage.devDependencies" :key="key">{{key}}</v-chip>
+          </v-card-text>
+        </v-card>
+      </v-tab-item>
+
     </v-tabs>
     <LoadingSpinner msg="Loading package details..." v-else />
   </v-container>
@@ -30,6 +43,7 @@ import Package from '@/model/Package';
 import PackagesService from '@/services/PackageService';
 import Router from '@/router';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
+import { PackageMetaDataDTO } from '@/model/package-meta-data';
 
 @Component({
   components: {
@@ -38,15 +52,25 @@ import LoadingSpinner from '@/components/LoadingSpinner.vue';
 })
 export default class PackageDetail extends Vue {
 
-  @Prop() private dataProp!: { packageDetail: Package };
-  private data: { packageDetail: Package | null } = this.dataProp;
+  @Prop() private dataProp!: {
+    packageDetail: Package | null,
+    currentPackage: Package | null,
+    dependeciesCount: number,
+  };
+  private data: {
+    packageDetail: Package | null,
+    currentPackage: Package | null,
+    dependeciesCount: number,
+  } = this.dataProp;
   private activeTab: number;
 
   constructor() {
     super();
     this.activeTab = 0;
     this.data = {
       packageDetail: null,
+      currentPackage: null,
+      dependeciesCount: 0,
     };
     this.getPackageDetails();
   }
@@ -57,6 +81,16 @@ export default class PackageDetail extends Vue {
       packageName: Router.currentRoute.params.packageName,
     }).then((response) => {
       this.data.packageDetail = response;
+      const currentVersionObject: string | PackageMetaDataDTO =
+        this.data.packageDetail.versions[this.data.packageDetail['dist-tags'].latest];
+      if (typeof currentVersionObject !== 'string') {
+        this.data.currentPackage = new Package(currentVersionObject);
+        const dependencies = this.data.currentPackage.dependencies;
+        const devDependencies = this.data.currentPackage.devDependencies;
+        if (dependencies && devDependencies) {
+          this.data.dependeciesCount = Object.keys(dependencies).length + Object.keys(devDependencies).length;
+        }
+      }
     });
   }
 }