Add show snapshots to URL + Add snapshot checkbox (#210)

* Add show snapshots to URL + Add snapshot checkbox

* Revert spacing changes

* Make checkbox more reusable

* Use new checkbox for team permissions

* Remove XMLNS from imags/utils SVGs

pages/mod/_id/settings.vue

@@ -104,115 +104,85 @@
         </div>
         <h3>Permissions</h3>
         <div class="permissions">
-          <label>
-            <input
-              type="checkbox"
-              :checked="
-                (member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION
-              "
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & UPLOAD_VERSION) !== UPLOAD_VERSION
-              "
-              @change="members[index].permissions ^= UPLOAD_VERSION"
-            />
-            Upload Version
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="
-                (member.permissions & DELETE_VERSION) === DELETE_VERSION
-              "
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & DELETE_VERSION) !== DELETE_VERSION
-              "
-              @change="members[index].permissions ^= DELETE_VERSION"
-            />
-            Delete Version
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="(member.permissions & EDIT_DETAILS) === EDIT_DETAILS"
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS
-              "
-              @change="members[index].permissions ^= EDIT_DETAILS"
-            />
-            Edit Details
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="(member.permissions & EDIT_BODY) === EDIT_BODY"
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & EDIT_BODY) !== EDIT_BODY
-              "
-              @change="members[index].permissions ^= EDIT_BODY"
-            />
-            Edit Body
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="
-                (member.permissions & MANAGE_INVITES) === MANAGE_INVITES
-              "
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & MANAGE_INVITES) !== MANAGE_INVITES
-              "
-              @change="members[index].permissions ^= MANAGE_INVITES"
-            />
-            Manage Invites
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="(member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER"
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & REMOVE_MEMBER) !== REMOVE_MEMBER
-              "
-              @change="members[index].permissions ^= REMOVE_MEMBER"
-            />
-            Remove Member
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="(member.permissions & EDIT_MEMBER) === EDIT_MEMBER"
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
-              "
-              @change="members[index].permissions ^= EDIT_MEMBER"
-            />
-            Edit Member
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="(member.permissions & DELETE_MOD) === DELETE_MOD"
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & DELETE_MOD) !== DELETE_MOD
-              "
-              @change="members[index].permissions ^= DELETE_MOD"
-            />
-            Delete Mod
-          </label>
+          <Checkbox
+            :checked="(member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & UPLOAD_VERSION) !== UPLOAD_VERSION
+            "
+            label="Upload Version"
+            @input="members[index].permissions ^= UPLOAD_VERSION"
+          />
+          <Checkbox
+            :checked="(member.permissions & DELETE_VERSION) === DELETE_VERSION"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & DELETE_VERSION) !== DELETE_VERSION
+            "
+            label="Delete Version"
+            @input="members[index].permissions ^= DELETE_VERSION"
+          />
+          <Checkbox
+            :checked="(member.permissions & EDIT_DETAILS) === EDIT_DETAILS"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS
+            "
+            label="Edit Details"
+            @input="members[index].permissions ^= EDIT_DETAILS"
+          />
+          <Checkbox
+            :checked="(member.permissions & EDIT_BODY) === EDIT_BODY"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & EDIT_BODY) !== EDIT_BODY
+            "
+            label="Edit Body"
+            @input="members[index].permissions ^= EDIT_BODY"
+          />
+          <Checkbox
+            :checked="(member.permissions & MANAGE_INVITES) === MANAGE_INVITES"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & MANAGE_INVITES) !== MANAGE_INVITES
+            "
+            label="Manage Invites"
+            @input="members[index].permissions ^= MANAGE_INVITES"
+          />
+          <Checkbox
+            :checked="(member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & REMOVE_MEMBER) !== REMOVE_MEMBER
+            "
+            label="Remove Member"
+            @input="members[index].permissions ^= REMOVE_MEMBER"
+          />
+          <Checkbox
+            :checked="(member.permissions & EDIT_MEMBER) === EDIT_MEMBER"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
+            "
+            label="Edit Member"
+            @input="members[index].permissions ^= EDIT_MEMBER"
+          />
+          <Checkbox
+            :checked="(member.permissions & DELETE_MOD) === DELETE_MOD"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & DELETE_MOD) !== DELETE_MOD
+            "
+            label="Delete Mod"
+            @input="members[index].permissions ^= DELETE_MOD"
+          />
         </div>
         <div class="actions">
           <button
@@ -243,11 +213,12 @@
 import axios from 'axios'
 
 import ConfirmPopup from '~/components/ui/ConfirmPopup'
+import Checkbox from '~/components/ui/Checkbox'
 
 import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
 
 export default {
-  components: { DropdownIcon, ConfirmPopup },
+  components: { DropdownIcon, ConfirmPopup, Checkbox },
   props: {
     mod: {
       type: Object,

pages/mods.vue

@@ -267,12 +267,12 @@
               <ServerSide />
             </SearchFilter>
             <h3>Minecraft Versions</h3>
-            <SearchFilter
-              :active-filters="showVersions"
-              display-name="Include snapshots"
-              facet-name="snapshots"
-              style="margin-bottom: 10px"
-              @toggle="fillInitialVersions"
+            <Checkbox
+              v-model="showSnapshots"
+              label="Include snapshots"
+              style="margin-bottom: 0.5rem"
+              :border="false"
+              @input="reloadVersions"
             />
           </section>
           <multiselect
@@ -318,6 +318,7 @@ import axios from 'axios'
 import SearchResult from '~/components/ui/ProjectCard'
 import Pagination from '~/components/ui/Pagination'
 import SearchFilter from '~/components/ui/search/SearchFilter'
+import Checkbox from '~/components/ui/Checkbox'
 
 import MFooter from '~/components/layout/MFooter'
 import TechCategory from '~/assets/images/categories/tech.svg?inline'
@@ -353,6 +354,7 @@ export default {
     Pagination,
     Multiselect,
     SearchFilter,
+    Checkbox,
     TechCategory,
     AdventureCategory,
     CursedCategory,
@@ -381,6 +383,7 @@ export default {
     }
     if (this.$route.query.v)
       this.selectedVersions = this.$route.query.v.split(',')
+    if (this.$route.query.h) this.showSnapshots = this.$route.query.h === 'true'
     if (this.$route.query.e)
       this.selectedEnvironments = this.$route.query.e.split(',')
     if (this.$route.query.s) {
@@ -411,7 +414,7 @@ export default {
       this.currentPage = Math.ceil(this.$route.query.o / this.maxResults) + 1
 
     await Promise.all([
-      this.fillInitialVersions(),
+      this.fillVersions(),
       this.fillInitialLicenses(),
       this.onSearchChange(this.currentPage),
     ])
@@ -424,7 +427,7 @@ export default {
       selectedLicense: '',
       licenses: [],
 
-      showVersions: [],
+      showSnapshots: false,
       selectedVersions: [],
       versions: [],
 
@@ -445,34 +448,27 @@ export default {
       sortType: { display: 'Relevance', name: 'relevance' },
 
       maxResults: 20,
-      firstRun: true,
     }
   },
   methods: {
-    async fillInitialVersions(x) {
+    async fillVersions() {
       try {
-        let url =
-          'https://api.modrinth.com/api/v1/tag/game_version?type=release'
-
-        if (x !== null) {
-          if (!this.showVersions.length > 0 && !this.firstRun) {
-            this.showVersions.push('snapshots')
-
-            url = 'https://api.modrinth.com/api/v1/tag/game_version'
-          } else {
-            this.showVersions = []
-          }
-        }
+        const url = this.showSnapshots
+          ? 'https://api.modrinth.com/api/v1/tag/game_version'
+          : 'https://api.modrinth.com/api/v1/tag/game_version?type=release'
 
         const res = await axios.get(url)
 
         this.versions = res.data
-        this.firstRun = false
       } catch (err) {
         // eslint-disable-next-line no-console
         console.error(err)
       }
     },
+    async reloadVersions() {
+      this.fillVersions()
+      await this.onSearchChange(1)
+    },
     async fillInitialLicenses() {
       const licences = (
         await axios.get('https://api.modrinth.com/api/v1/tag/license')
@@ -648,6 +644,7 @@ export default {
             url += `&f=${encodeURIComponent(this.facets)}`
           if (this.selectedVersions.length > 0)
             url += `&v=${encodeURIComponent(this.selectedVersions)}`
+          if (this.showSnapshots) url += `&h=true`
           if (this.selectedEnvironments.length > 0)
             url += `&e=${encodeURIComponent(this.selectedEnvironments)}`
           if (this.sortType.name !== 'relevance')