Add packagist requirement suggestions (#53)

Added requirement suggestions from Packagist.org

Author: antonkomarev

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to `cybercog/laravel-paket` will be documented in this file.
 - ([#48]) Added repositories tab
 - ([#51]) Added refetch data button in top menu
 - ([#52]) Added polling to get realtime job output
+- ([#53]) Added requirement suggestions from Packagist.org
 
 ## [1.4.0]
 
@@ -59,6 +60,7 @@ All notable changes to `cybercog/laravel-paket` will be documented in this file.
 [1.2.0]: https://github.com/cybercog/laravel-paket/compare/1.1.0...1.2.0
 [1.1.0]: https://github.com/cybercog/laravel-paket/compare/1.0.0...1.1.0
 
+[#53]: https://github.com/cybercog/laravel-paket/pull/53
 [#52]: https://github.com/cybercog/laravel-paket/pull/52
 [#51]: https://github.com/cybercog/laravel-paket/pull/51
 [#48]: https://github.com/cybercog/laravel-paket/pull/48

resources/js/components/Requirement/InstallForm.vue

@@ -1,29 +1,40 @@
 <template>
-    <div class="flex">
-        <input
-            type="text"
-            :class="getInputClass()"
-            :readonly="isDisabled()"
-            v-model="command"
-            v-on:keyup.enter="install()"
-            placeholder="Type in vendor/package OR composer require vendor/package"
-        />
-        <button
-            type="submit"
-            :class="getButtonClass()"
-            :disabled="isDisabled()"
-            v-text="getButtonText()"
-            v-on:click="install()"
-        ></button>
+    <div class="relative">
+        <div class="flex">
+            <input
+                type="text"
+                :class="getInputClass()"
+                :readonly="isDisabled()"
+                v-model="command"
+                v-on:keyup.enter="install()"
+                placeholder="Type in vendor/package OR composer require vendor/package"
+            />
+            <button
+                type="submit"
+                :class="getButtonClass()"
+                :disabled="isDisabled()"
+                v-text="getButtonText()"
+                v-on:click="install()"
+            ></button>
+        </div>
+        <div class="border absolute w-full" v-if="getSuggestions().length > 0">
+            <div v-for="suggestion in getSuggestions()" class="bg-white hover:bg-gray-200 p-2 cursor-pointer" v-on:click="suggestionSelect(suggestion)">
+                <div v-text="suggestion.name"></div>
+                <div v-text="suggestion.description" class="text-xs text-gray-600"></div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+    import debounce from 'lodash/debounce';
+
     export default {
         data() {
             return {
                 buttonText: 'Install',
                 command: '',
+                selectedSuggestion: null,
                 requirement: {
                     name: '',
                     version: null,
@@ -34,6 +45,23 @@
             };
         },
 
+        watch: {
+            command(value, oldValue) {
+                if (this.selectedSuggestion !== null) {
+                    this.selectedSuggestion = null;
+                    return;
+                }
+
+                if (oldValue.trim() !== value.trim()) {
+                    this.debouncedSearchSuggestions(value);
+                }
+            },
+        },
+
+        created() {
+            this.debouncedSearchSuggestions = debounce(this.searchSuggestions, 500);
+        },
+
         methods: {
             async install() {
                 this.sanitizeInput();
@@ -60,6 +88,47 @@
                 this.forgetInput();
             },
 
+            async searchSuggestions(query) {
+                if (query === '') {
+                    await this.$store.dispatch('clearRequirementSuggestions');
+                    return;
+                }
+
+                // Ignore search if fully qualified console command
+                if (query.includes('composer require')) {
+                    return;
+                }
+
+                // Ignore search if version already specified
+                if (query.includes(':')) {
+                    return;
+                }
+
+                // Ignore search if adding flags like --dev
+                if (query.includes('--')) {
+                    return;
+                }
+
+                await this.$store.dispatch('collectRequirementSuggestions', {
+                    query: query,
+                });
+            },
+
+            suggestionSelect(suggestion) {
+                this.selectedSuggestion = suggestion;
+                this.command = suggestion.name;
+                this.$store.dispatch('clearRequirementSuggestions');
+            },
+
+            getSuggestions() {
+                // Need to avoid bug with quick full delete command with holding backspace button
+                if (this.command === '') {
+                    return [];
+                }
+
+                return this.$store.state.requirementSuggestions;
+            },
+
             isDisabled() {
                 return this.$store.state.isInstallerLocked
                     || this.$store.getters.getActiveJobs().length > 0;

resources/js/store.js

@@ -9,6 +9,7 @@ const state = {
     isInstallerLocked: false,
     installerCurrentJob: null,
     requirements: [],
+    requirementSuggestions: [],
     repositories: [],
     jobs: [],
     protectedRequirements: [
@@ -103,6 +104,16 @@ const actions = {
             }
         }, 1000);
     },
+
+    async collectRequirementSuggestions(context, payload) {
+        const response = await Axios.get(`https://packagist.org/search.json?q=${payload.query}`);
+
+        context.state.requirementSuggestions = response.data.results;
+    },
+
+    clearRequirementSuggestions(context) {
+        context.state.requirementSuggestions = [];
+    },
 };
 
 const getters = {