Add project selector (#4)

* Move the project ID out of the GitLabService

* Add ability to select a project

* Change the format of the deployment datetime

* Sort the projects alphabetically

* Add ability to search a project

src/GitLabEnvironments.vue

@@ -1,50 +1,58 @@
 <template>
-  <v-app>
-    <v-content>
-      <v-container>
-        <v-card>
-          <v-card-title>
-            GitLab Environments Status
-            <v-spacer/>
-            <v-text-field
-                    v-model="search"
-                    append-icon="search"
-                    label="Search"
-                    single-line
-                    hide-details
-            />
-          </v-card-title>
-          <v-data-table
-                  :headers="headers"
-                  :items=environments()
-                  :search="search"
-                  :loading="isLoading"
-          >
-            <template v-slot:body="{ items }">
-              <tbody>
-              <Environment v-for="item in items" :key="item.name" :environment="item"/>
-              </tbody>
-            </template>
-          </v-data-table>
-        </v-card>
-      </v-container>
-    </v-content>
-  </v-app>
+    <v-app>
+        <v-content>
+            <v-container>
+                <v-card>
+                    <v-card-title>
+                        <div class="mt-4">GitLab Environments Status</div>
+                        <v-spacer/>
+                        <v-autocomplete :items="projects"
+                                  item-text="name_with_namespace"
+                                  item-value="id"
+                                  label="Project"
+                                  class="mt-7"
+                                  @change="loadEnvironments()"
+                                  v-model="projectId"
+                                  :loading="loadingProjects"
+                        />
+                        <v-spacer/>
+                        <v-text-field
+                                v-model="search"
+                                append-icon="search"
+                                label="Search"
+                                single-line
+                                hide-details
+                        />
+                    </v-card-title>
+                    <v-data-table
+                            :headers="headers"
+                            :items=environments()
+                            :search="search"
+                            :loading="loadingEnvironments"
+                    >
+                        <template v-slot:item="{ item }">
+                            <Environment :key="item.name" :environment="item"/>
+                        </template>
+                    </v-data-table>
+                </v-card>
+            </v-container>
+        </v-content>
+    </v-app>
 </template>
 
 <script>
-import Environment from "./components/Environment";
+  import Environment from "./components/Environment";
 
   export default {
     name      : "GitLabEnvironments",
     components: {Environment},
     data() {
       return {
-        overlay() {
-          return this.$store.state.isLoading;
-        },
-        search : '',
-        headers: [
+        loadingProjects    : false,
+        loadingEnvironments: false,
+        projectId          : null,
+        search             : '',
+        headers            : [
           {
             text    : 'Name',
             align   : 'left',
@@ -55,18 +63,37 @@ import Environment from "./components/Environment";
           {text: 'Status'},
           {text: 'Deployment'},
         ],
+        projects: [],
         environments() {
           return this.$store.state.environments
         },
       }
     },
-    computed : {
-      isLoading() {
-        return this.$store.state.isLoading;
-      }
+    methods   : {
+      loadEnvironments() {
+        this.loadingEnvironments = true;
+        this.$store.dispatch("fetchEnvironments", {
+          projectId: this.projectId,
+        }).then(() => {
+          this.loadingEnvironments = false;
+        });
+      },
     },
     created() {
-      this.$store.dispatch("fetchEnvironments");
+      this.loadingProjects = true;
+      this.$store.dispatch("fetchProjects").then(() => {
+        let projects = this.$store.state.projects;
+        projects.sort(function (a, b) {
+          if (a.name_with_namespace < b.name_with_namespace) {
+            return -1;
+          } else if (a.name_with_namespace > b.name_with_namespace) {
+            return 1;
+          }
+          return 0;
+        });
+        this.projects = projects;
+        this.loadingProjects = false;
+      });
     },
   }
 </script>

src/components/Environment.vue

@@ -2,7 +2,7 @@
     <tr>
         <td>
             <v-row>
-                <v-switch inset :disabled="disabled" @change="loadEnvironment(environment.id)" class="d-inline"/>
+                <v-switch inset :disabled="disabled" @change="loadEnvironment(environment)" class="d-inline ml-2"/>
                 <p class="d-inline my-auto">{{ environment.name }}</p>
             </v-row>
         </td>
@@ -39,7 +39,6 @@
         disabled: false,
         loading : false,
         environmentRef: null,
-        environmentId: null,
         deployableStatus: null,
         userAvatarUrl: null,
         deployableFinishedAt: null,
@@ -60,12 +59,13 @@
       }
     },
     methods   : {
-      loadEnvironment(environmentId) {
+      loadEnvironment(environment) {
         this.disabled = true;
         this.loading = true;
 
         this.$store.dispatch("fetchEnvironment", {
-          environmentId: environmentId
+          projectId: environment.project.id,
+          environmentId: environment.id
         }).then(response => {
           let lastDeployment = response.data.last_deployment;
 

src/components/EnvironmentDeployment.vue

@@ -31,7 +31,7 @@
     data() {
       return {
         readableDate(date) {
-          return moment(date).format('Do MMM Y @ HH:mm');
+          return moment(date).format('dddd, MMMM Do YYYY, h:mm:ss a');
         }
       }
     }

src/services/GitLabService.js

@@ -10,10 +10,26 @@ const apiClient = axios.create({
   }
 });
 
-const projectId = 39
-
 export default {
-  async getEnvironments() {
+  async getProjects() {
+    let projects = []
+    let page = 1
+
+    try {
+      let response
+      do {
+        response = await apiClient.get("/projects?archived=false&page=" + page++)
+
+        projects = projects.concat(response.data)
+      } while ('x-next-page' in response.headers && response.headers['x-next-page'].length)
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log(e)
+    }
+
+    return projects
+  },
+  async getEnvironments(projectId) {
     let environments = []
     let page = 1
 
@@ -31,7 +47,7 @@ export default {
 
     return environments
   },
-  getEnvironment(environmentId) {
+  getEnvironment(projectId, environmentId) {
     return apiClient.get("/projects/" + projectId + "/environments/" + environmentId);
   }
 };

src/store.js

@@ -6,41 +6,51 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state    : {
+    projects     : [],
     environments     : [],
-    isLoading        : true,
   },
   mutations: {
+    SET_PROJECTS(state, projects) {
+      state.projects = projects;
+    },
     SET_ENVIRONMENTS(state, environments) {
       state.environments = environments;
     },
-    SET_LOADING(state, isLoading) {
-      state.isLoading = isLoading
-    }
   },
   actions  : {
-    fetchEnvironments({commit}) {
-      commit("SET_LOADING", true);
+    fetchProjects({commit}) {
+      commit("SET_PROJECTS", []);
+      return GitLabService.getProjects()
+        .then(projects => {
+          projects = projects.filter((project) => {
+            return project['empty_repo'] === false
+          });
+          commit("SET_PROJECTS", projects);
+          return this;
+        })
+        .catch(error => {
+          // eslint-disable-next-line no-console
+          console.log('There was an error: ', error);
+        });
+    },
+    fetchEnvironments({commit}, {projectId}) {
       commit("SET_ENVIRONMENTS", []);
-      return GitLabService.getEnvironments()
+      return GitLabService.getEnvironments(projectId)
         .then(environments => {
           environments = environments.filter((environment) => {
             return environment.state === 'available'
           });
           commit("SET_ENVIRONMENTS", environments);
-          commit("SET_LOADING", false);
           return this;
         })
         .catch(error => {
           // eslint-disable-next-line no-console
           console.log('There was an error: ', error);
-          commit("SET_LOADING", false)
         });
     },
-    fetchEnvironment({commit}, {environmentId}) {
-      commit("SET_LOADING", true);
-      return GitLabService.getEnvironment(environmentId)
+    fetchEnvironment({commit}, {projectId, environmentId}) {
+      return GitLabService.getEnvironment(projectId, environmentId)
         .then(response => {
-          commit("SET_LOADING", false);
           return response
         })
         .catch(error => {