Add search bar / move packages conversion to PackageService

dmstern · Jul 27, 2018 · 3f6702b · 3f6702b
1 parent c9bbd44
commit 3f6702b
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 25 deletions.
diff --git a/server/artifactory-service.js b/server/artifactory-service.js
@@ -11,6 +11,25 @@ const repoKey = config.artifactory.repoKey;
 
 module.exports = {
   fetchPackages: async () => {
-    return await axios.get(`${repoKey}/-/all`);
+    // return await axios.get(`${repoKey}/-/all`);
+    return new Promise((resolve, reject) => {
+      resolve({data: {
+        module1: {
+          name: "hello",
+          description: "Beschreibung",
+          author: "icke eben"
+        },
+        module2: {
+          name: "hello",
+          description: "Beschreibung",
+          author: "icke eben"
+        },
+        module3: {
+          name: "hello",
+          description: "Beschreibung",
+          author: "icke eben"
+        }
+      }});
+    });
   }
 };
diff --git a/src/App.vue b/src/App.vue
@@ -3,10 +3,23 @@
 <div class="page-container">
   <md-app id="app" md-waterfall md-mode="fixed">
     <md-app-toolbar class="md-primary">
-      <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
-        <md-icon>menu</md-icon>
-      </md-button>
-      <span class="md-title">npmFrog - Explore jFrog's Artifactory - the NPM-way</span>
+      <div class="md-toolbar-row">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+            <md-icon>menu</md-icon>
+          </md-button>
+        </div>
+      <!-- <span class="md-title">npmFrog - Explore jFrog's Artifactory - the NPM-way</span> -->
+        <md-autocomplete
+          class="search"
+          v-model="selectedPackage"
+          :md-options="Object.keys(packages)"
+          md-layout="box">
+          <label>Search packages</label>
+        </md-autocomplete>
+        <div class="md-toolbar-section-end">
+        </div>
+      </div>
     </md-app-toolbar>
 
     <md-app-drawer  :md-active.sync="menuVisible">
@@ -62,15 +75,32 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
+import PackageService from '@/services/PackageService';
+import { PackageMetaData } from '@/api/package-meta-data';
+import { PackagesResponse } from '@/api/PackageResponse';
+import PackagesService from '@/services/PackageService';
 
 @Component
 export default class App extends Vue {
   @Prop() private menuVisibleProp!: boolean;
+  @Prop() private packagesProp!: PackagesResponse;
+  @Prop() private selectedPackageProp!: string|null;
   private menuVisible: boolean;
+  private packages: PackagesResponse;
+  private selectedPackage: string|null;
 
   constructor() {
     super();
     this.menuVisible = false;
+    this.packages = {};
+    this.selectedPackage = null;
+    this.loadPackages();
+  }
+
+  private loadPackages(): void {
+    PackagesService.getPackages().then((response) => {
+      this.packages = response;
+    });
   }
 }
 </script>
diff --git a/src/components/Packages.vue b/src/components/Packages.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="packages">
-    <h2>Packages</h2>
+    <h2>Packages {{ packagesProp }}</h2>
     <span v-if="!Object.keys(packages).length">{{startMsg}}</span>
 
     <md-list v-else class="md-triple-line package-list">
@@ -121,6 +121,7 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import PackageService from '@/services/PackageService';
 import { PackagesResponse } from '@/api/PackageResponse';
+import PackagesService from '@/services/PackageService';
 
 @Component
 export default class Packages extends Vue {
@@ -131,25 +132,12 @@ export default class Packages extends Vue {
   constructor() {
     super();
     this.packages = {};
-    this.getPackages();
+    this.loadPackages();
   }
 
-  public async getPackages() {
-    PackageService.fetchPackages().then((response) => {
-      const packagesResponse: PackagesResponse = response.data;
-      const packageNames: any[] = Object.keys(packagesResponse).filter((key) => !key.startsWith('_'));
-
-      this.packages = {};
-      for (const packageName of packageNames) {
-        let displayName: any = '';
-        if (packagesResponse[packageName].author) {
-          displayName = packagesResponse[packageName].author!.name
-            ? packagesResponse[packageName].author!.name
-            : packagesResponse[packageName].author;
-        }
-        Object.assign(packagesResponse[packageName], {displayName});
-        this.packages[packageName] = packagesResponse[packageName];
-      }
+  private loadPackages(): void {
+    PackagesService.getPackages().then((response) => {
+      this.packages = response;
     });
   }
 }

diff --git a/src/services/Api.ts b/src/services/Api.ts
@@ -2,14 +2,20 @@ import axios, { AxiosInstance, AxiosPromise } from 'axios';
 
 export default class Api {
 
+  private static instance: Api;
+
   private axios: AxiosInstance;
 
-  constructor() {
+  private constructor() {
     this.axios = axios.create({
       baseURL: `http://localhost:30001`,
     });
   }
 
+  public static get Instance(): Api {
+    return this.instance || (this.instance = new this());
+  }
+
   public get(route: string): AxiosPromise<any> {
     return this.axios.get(route);
   }

diff --git a/src/services/PackageService.ts b/src/services/PackageService.ts
@@ -5,6 +5,26 @@ import { PackagesResponse } from '@/api/PackageResponse';
 export default class PackagesService {
 
   public static fetchPackages(): AxiosPromise<PackagesResponse> {
-    return new Api().get('packages');
+    return Api.Instance.get('packages');
+  }
+
+  public static async getPackages() {
+    return this.fetchPackages().then((response) => {
+      const packagesResponse: PackagesResponse = response.data;
+      const packageNames: any[] = Object.keys(packagesResponse).filter((key) => !key.startsWith('_'));
+
+      const packages: PackagesResponse = {};
+      for (const packageName of packageNames) {
+        let displayName: any = '';
+        if (packagesResponse[packageName].author) {
+          displayName = packagesResponse[packageName].author!.name
+            ? packagesResponse[packageName].author!.name
+            : packagesResponse[packageName].author;
+        }
+        Object.assign(packagesResponse[packageName], {displayName});
+        packages[packageName] = packagesResponse[packageName];
+      }
+      return packages;
+    });
   }
 }