Client-side/server-side filters (#204)

* Add client and server side categories

* Quick fix for mistyped facet

* Get rid of console.logs used for debugging

* Re-add eslint overrides

* Optimize SVG

* Simplify .includes() checks

assets/images/categories/client.svg

@@ -0,0 +1,4 @@
+<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+	<rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+	<path d="M8 21h8M12 17v4" />
+</svg>  

assets/images/categories/server.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="12" x2="2" y2="12"></line><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>

pages/mods.vue

@@ -244,6 +244,23 @@
             >
               <ForgeLoader />
             </SearchFilter>
+            <h3>Environments</h3>
+            <SearchFilter
+              :active-filters="selectedEnvironments"
+              display-name="Client"
+              facet-name="client"
+              @toggle="toggleEnv"
+            >
+              <ClientSide />
+            </SearchFilter>
+            <SearchFilter
+              :active-filters="selectedEnvironments"
+              display-name="Server"
+              facet-name="server"
+              @toggle="toggleEnv"
+            >
+              <ServerSide />
+            </SearchFilter>
             <h3>Minecraft Versions</h3>
             <SearchFilter
               :active-filters="showVersions"
@@ -314,6 +331,9 @@ import WorldGenCategory from '~/assets/images/categories/worldgen.svg?inline'
 import ForgeLoader from '~/assets/images/categories/forge.svg?inline'
 import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
 
+import ClientSide from '~/assets/images/categories/client.svg?inline'
+import ServerSide from '~/assets/images/categories/server.svg?inline'
+
 import SearchIcon from '~/assets/images/utils/search.svg?inline'
 import ExitIcon from '~/assets/images/utils/exit.svg?inline'
 
@@ -342,6 +362,8 @@ export default {
     WorldGenCategory,
     ForgeLoader,
     FabricLoader,
+    ClientSide,
+    ServerSide,
     SearchIcon,
     ExitIcon,
   },
@@ -354,6 +376,8 @@ export default {
     }
     if (this.$route.query.v)
       this.selectedVersions = this.$route.query.v.split(',')
+    if (this.$route.query.e)
+      this.selectedEnvironments = this.$route.query.e.split(',')
     if (this.$route.query.s) {
       this.sortType.name = this.$route.query.s
 
@@ -399,6 +423,8 @@ export default {
       selectedVersions: [],
       versions: [],
 
+      selectedEnvironments: [],
+
       facets: [],
       results: null,
       pages: [],
@@ -476,11 +502,11 @@ export default {
       this.displayLicense = null
       this.selectedLicense = null
       this.selectedVersions = []
+      this.selectedEnvironments = []
       await this.onSearchChange(1)
     },
     async toggleFacet(elementName, sendRequest) {
       const index = this.facets.indexOf(elementName)
-
       if (index !== -1) {
         this.facets.splice(index, 1)
       } else {
@@ -489,6 +515,16 @@ export default {
 
       if (!sendRequest) await this.onSearchChange(1)
     },
+    async toggleEnv(environment, sendRequest) {
+      const index = this.selectedEnvironments.indexOf(environment)
+      if (index !== -1) {
+        this.selectedEnvironments.splice(index, 1)
+      } else {
+        this.selectedEnvironments.push(environment)
+      }
+
+      if (!sendRequest) await this.onSearchChange(1)
+    },
     async onSearchChangeToTop(newPageNumber) {
       if (process.client) window.scrollTo({ top: 0, behavior: 'smooth' })
 
@@ -507,8 +543,12 @@ export default {
           params.push(`query=${this.query.replace(/ /g, '+')}`)
         }
 
-        if (this.facets.length > 0 || this.selectedVersions.length > 0) {
+        if (
-          const formattedFacets = []
+          this.facets.length > 0 ||
+          this.selectedVersions.length > 0 ||
+          this.selectedEnvironments.length > 0
+        ) {
+          let formattedFacets = []
           for (const facet of this.facets) {
             formattedFacets.push([facet])
           }
@@ -521,6 +561,34 @@ export default {
             formattedFacets.push(versionFacets)
           }
 
+          if (this.selectedEnvironments.length > 0) {
+            let environmentFacets = []
+
+            const includesClient = this.selectedEnvironments.includes('client')
+            const includesServer = this.selectedEnvironments.includes('server')
+            if (includesClient && includesServer) {
+              environmentFacets = [
+                ['client_side:required'],
+                ['server_side:required'],
+              ]
+            } else {
+              if (includesClient) {
+                environmentFacets = [
+                  ['client_side:optional', 'client_side:required'],
+                  ['server_side:optional', 'server_side:unsupported'],
+                ]
+              }
+              if (includesServer) {
+                environmentFacets = [
+                  ['client_side:optional', 'client_side:unsupported'],
+                  ['server_side:optional', 'server_side:required'],
+                ]
+              }
+            }
+
+            formattedFacets = [...formattedFacets, ...environmentFacets]
+          }
+
           params.push(`facets=${JSON.stringify(formattedFacets)}`)
         }
 
@@ -575,6 +643,8 @@ export default {
             url += `&f=${encodeURIComponent(this.facets)}`
           if (this.selectedVersions.length > 0)
             url += `&v=${encodeURIComponent(this.selectedVersions)}`
+          if (this.selectedEnvironments.length > 0)
+            url += `&e=${encodeURIComponent(this.selectedEnvironments)}`
           if (this.sortType.name !== 'relevance')
             url += `&s=${encodeURIComponent(this.sortType.name)}`
           if (this.maxResults > 20)