createproject: improve remote repos selection

Use a select to choose the remote source and fetch remote repos only for that
remote source

src/components/createproject.vue

@@ -15,17 +15,38 @@
       </label>
     </div>
 
-    <h4 class="text-xl">Available remote repositories</h4>
+    <div class="mb-3 flex items-center">
-    <div v-for="remoteSource in remoteSources" v-bind:key="remoteSource.id">
+      <div class="flex relative w-64">
-      <remoterepos
+        <select
-        class="remoterepos"
+          class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
-        :remotesource="remoteSource"
+          v-model="selectedRemoteSourceIndex"
-        :selected="selectedRemoteSource && selectedRemoteSource.id == remoteSource.id"
+        >
-        v-on:reposelected="repoSelected(remoteSource, $event)"
+          <option :value="null" disabled>Select the remote source</option>
-      />
+          <option
+            v-for="(rs, index) in remoteSources"
+            v-bind:key="rs.id"
+            :value="index"
+          >{{ rs.name }}</option>
+        </select>
+        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
+          </svg>
+        </div>
       </div>
       <button
-      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        class="ml-3 btn btn-blue"
+        v-bind:class="{ 'spinner': fetchRemoteReposLoading }"
+        :disabled="selectedRemoteSourceIndex == null"
+        @click="fetchRemoteRepos()"
+      >Fetch remote repositories</button>
+    </div>
+
+    <div v-if="remoteRepos.length">
+      <h4 class="text-xl">Available remote repositories</h4>
+      <remoterepos :remoterepos="remoteRepos" v-on:reposelected="repoSelected($event)"/>
+      <button
+        class="btn btn-blue"
         v-bind:class="{ 'spinner': createProjectLoading }"
         :disabled="!createProjectButtonEnabled"
         @click="createProject()"
@@ -38,13 +59,15 @@
         <span class="block sm:inline">{{ createProjectError }}</span>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
 import {
   fetchCurrentUser,
   fetchRemoteSources,
-  createProject
+  createProject,
+  userRemoteRepos
 } from "@/util/data.js";
 
 import { projectLink } from "@/util/link.js";
@@ -62,26 +85,38 @@ export default {
   data() {
     return {
       createProjectError: null,
+      fetchRemoteReposLoading: false,
+      fetchRemoteReposLoadingTimeout: false,
       createProjectLoading: false,
       createProjectLoadingTimeout: null,
       user: null,
       remoteSources: null,
       remoteRepos: [],
+      selectedRemoteSourceIndex: null,
       projectName: "",
       projectIsPrivate: false,
-      remoteRepoPath: null,
+      remoteRepoPath: null
-      selectedRemoteSource: null
     };
   },
   computed: {
     createProjectButtonEnabled: function() {
-      return this.projectName.length && this.selectedRemoteSource;
+      return this.projectName.length && this.remoteRepoPath;
     }
   },
+  watch: {},
   methods: {
     resetErrors() {
       this.createProjectError = null;
     },
+    startFetchRemoteReposLoading() {
+      this.fetchRemoteReposLoadingTimeout = setTimeout(() => {
+        this.fetchRemoteReposLoading = true;
+      }, 300);
+    },
+    stopFetchRemoteReposLoading() {
+      clearTimeout(this.fetchRemoteReposLoadingTimeout);
+      this.fetchRemoteReposLoading = false;
+    },
     startProjectLoading() {
       this.createProjectLoadingTimeout = setTimeout(() => {
         this.createProjectLoading = true;
@@ -91,10 +126,23 @@ export default {
       clearTimeout(this.createProjectLoadingTimeout);
       this.createProjectLoading = false;
     },
-    repoSelected(remoteSource, repoPath) {
+    repoSelected(repoPath) {
-      this.selectedRemoteSource = remoteSource;
       this.remoteRepoPath = repoPath;
     },
+    async fetchRemoteRepos() {
+      this.remoteRepos = [];
+      this.remoteRepoPath = null;
+
+      this.startFetchRemoteReposLoading();
+      let remoteSource = this.remoteSources[this.selectedRemoteSourceIndex];
+      let { data, error } = await userRemoteRepos(remoteSource.id);
+      this.stopFetchRemoteReposLoading();
+      if (error) {
+        this.$store.dispatch("setError", error);
+        return;
+      }
+      this.remoteRepos = data;
+    },
     async createProject() {
       this.resetErrors();
 
@@ -109,12 +157,14 @@ export default {
         visibility = "private";
       }
 
+      let remoteSource = this.remoteSources[this.selectedRemoteSourceIndex];
+
       this.startProjectLoading();
       let { error } = await createProject(
         parentref,
         this.projectName,
         visibility,
-        this.selectedRemoteSource.name,
+        remoteSource.name,
         this.remoteRepoPath
       );
       this.stopProjectLoading();

src/components/remoterepos.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="mb-2 border-solid border-gray-300 rounded border shadow-sm">
-    <p class="bg-gray-200 px-4 py-3 border-solid border-gray-300 border-b">
-      repositories from
-      <strong>{{ remotesource.name }}</strong>
-    </p>
     <div v-if="remoterepos.length > 0">
       <label
         class="block px-4 py-2 border-b"
@@ -11,7 +7,7 @@
         v-bind:key="repo.id"
         @click="select(index)"
       >
-        <input type="radio" :checked="selectedrepo == index && selected">
+        <input type="radio" :checked="selectedrepo == index">
         {{repo.path}}
       </label>
     </div>
@@ -20,37 +16,22 @@
 </template>
 
 <script>
-import { userRemoteRepos } from "@/util/data.js";
-
 export default {
   components: {},
   name: "remoterepos",
   props: {
-    remotesource: Object,
+    remoterepos: Array
-    selected: Boolean
   },
   data() {
     return {
-      selectedrepo: null,
+      selectedrepo: null
-      remoterepos: []
     };
   },
   methods: {
     select(index) {
       this.selectedrepo = index;
       this.$emit("reposelected", this.remoterepos[index].path);
-    },
-    async fetchRemoteRepos(remotesourceid) {
-      let { data, error } = await userRemoteRepos(remotesourceid);
-      if (error) {
-        this.$store.dispatch("setError", error);
-        return;
     }
-      this.remoterepos = data;
-    }
-  },
-  created: function() {
-    this.fetchRemoteRepos(this.remotesource.id);
   }
 };
 </script>