Added PG site search function and enabled site search bar. Added Full Porn network assets.

assets/components/networks/networks.vue

@@ -1,11 +1,39 @@
 <template>
     <div class="networks">
-        <input
-            :placeholder="`Find ${siteCount} sites in ${networks.length} networks`"
+        <form
             class="search"
+            @submit.prevent="searchSites"
         >
+            <input
+                v-model="query"
+                :placeholder="`Find ${siteCount} sites in ${networks.length} networks`"
+                class="query"
+                @input="searchSites"
+            >
 
-        <div class="network-tiles">
+            <button
+                type="submit"
+                class="search-button"
+            ><Icon icon="search" /></button>
+        </form>
+
+        <div
+            v-if="query.length"
+            class="network-tiles"
+        >
+            <Site
+                v-for="site in searchResults"
+                :key="`site-tile-${site.slug}`"
+                :site="site"
+            />
+
+            <span v-if="searchResults.length === 0">No results for "{{ query }}"</span>
+        </div>
+
+        <div
+            v-if="query.length === 0"
+            class="network-tiles"
+        >
             <Network
                 v-for="network in networks"
                 :key="`network-tile-${network.slug}`"
@@ -17,6 +45,16 @@
 
 <script>
 import Network from '../tile/network.vue';
+import Site from '../tile/site.vue';
+
+async function searchSites() {
+    this.searchResults = await this.$store.dispatch('searchSites', {
+        query: this.query,
+        limit: 20,
+    });
+
+    console.log(this.searchResults);
+}
 
 async function mounted() {
     this.networks = await this.$store.dispatch('fetchNetworks');
@@ -30,17 +68,23 @@ function siteCount() {
 export default {
     components: {
         Network,
+        Site,
     },
     data() {
         return {
-            networks: [],
+            query: '',
             pageTitle: null,
+            networks: [],
+            searchResults: [],
         };
     },
     computed: {
         siteCount,
     },
     mounted,
+    methods: {
+        searchSites,
+    },
 };
 </script>
 
@@ -52,8 +96,13 @@ export default {
 }
 
 .search {
+    display: flex;
     width: 100%;
     max-width: 40rem;
+}
+
+.query {
+    flex-grow: 1;
     box-sizing: border-box;
     padding: 1rem;
     border: none;
@@ -68,6 +117,24 @@ export default {
     }
 }
 
+.search-button {
+    padding: 1rem;
+    background: none;
+    border: none;
+
+    .icon {
+        fill: $shadow;
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        .icon {
+            fill: $primary;
+        }
+    }
+}
+
 .network-tiles {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));

assets/js/sites/actions.js

@@ -72,21 +72,37 @@ function initSitesActions(store, _router) {
         return sites;
     }
 
-    /*
-    async function fetchSiteReleases({ _commit }, siteId) {
-        const releases = await get(`/sites/${siteId}/releases`, {
-            filter: store.state.ui.filter,
-            after: store.getters.after,
-            before: store.getters.before,
+    async function searchSites({ _commit }, { query, limit = 20 }) {
+        const { sites } = await graphql(`
+            query SearchSites(
+                $query: String!
+                $limit:Int = 20,
+            ) {
+                sites: searchSites(
+                    search: $query,
+                    first: $limit
+                ) {
+                    name
+                    slug
+                    url
+                    network {
+                        name
+                        slug
+                        url
+                    }
+                }
+            }
+        `, {
+            query,
+            limit,
         });
 
-        return releases;
+        return sites;
     }
-    */
 
     return {
         fetchSites,
-        // fetchSiteReleases,
+        searchSites,
     };
 }