File input fixes

components/FileInput.vue

@@ -1,13 +1,13 @@
 <template>
-  <label class="button">
+  <label class="button" @drop.prevent="addFile" @dragover.prevent>
     <span>
-      {{ prompt }}
+      {{ text }}
     </span>
     <input
       type="file"
       :multiple="multiple"
       :accept="accept"
-      @change="(files) => $emit('change', files)"
+      @change="onChange"
     />
   </label>
 </template>
@@ -29,6 +29,41 @@ export default {
       default: null,
     },
   },
+  data() {
+    return {
+      text: this.prompt,
+      files: [],
+    }
+  },
+  methods: {
+    onChange(files, shouldNotReset) {
+      if (!shouldNotReset) this.files = files.target.files
+
+      const length = this.files.length
+      if (length === 0) {
+        this.text = this.prompt
+      } else if (length === 1) {
+        this.text = '1 file selected'
+      } else if (length > 1) {
+        this.text = length + ' files selected'
+      }
+      this.$emit('change', this.files)
+    },
+    addFile(e) {
+      const droppedFiles = e.dataTransfer.files
+
+      if (!this.multiple) this.files = []
+
+      if (!droppedFiles) return
+      ;[...droppedFiles].forEach((f) => {
+        this.files.push(f)
+      })
+
+      if (!this.multiple && this.files.length > 0) this.files = [this.files[0]]
+
+      if (this.files.length > 0) this.onChange(null, true)
+    },
+  },
 }
 </script>
 

components/ProjectCard.vue

@@ -95,9 +95,7 @@
       </div>
     </div>
     <div v-if="editMode" class="buttons">
-      <nuxt-link class="button column" :to="'/mod/' + id + '/edit'">
+      <slot />
-        Edit
-      </nuxt-link>
     </div>
   </div>
 </template>

pages/dashboard/moderation.vue

@@ -18,6 +18,7 @@
             Moderation
           </nuxt-link>
         </div>
+        <m-footer class="footer" />
         <client-only>
           <EthicalAd type="image" />
         </client-only>
@@ -44,7 +45,20 @@
           :edit-mode="true"
           :status="mod.status"
           :is-modrinth="true"
-        />
+        >
+          <button
+            class="button column approve"
+            @click="changeModStatus(mod.id, 'approved')"
+          >
+            Approve
+          </button>
+          <button
+            class="button column reject"
+            @click="changeModStatus(mod.id, 'rejected')"
+          >
+            Reject
+          </button>
+        </ModCard>
         <div class="section-header">
           <h3 class="column-grow-1">Versions</h3>
         </div>
@@ -82,11 +96,6 @@ export default {
       config
     )
 
-    res = await axios.get(
-      `https://api.modrinth.com/api/v1/mods?ids=${JSON.stringify(res.data)}`,
-      config
-    )
-
     const mods = res.data
 
     res = await axios.get(
@@ -94,18 +103,32 @@ export default {
       config
     )
 
-    res = await axios.get(
-      `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
-        res.data
-      )}`,
-      config
-    )
-
     return {
       mods,
       versions: res.data,
     }
   },
+  methods: {
+    async changeModStatus(id, status) {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local')
+            ? this.$auth.getToken('local')
+            : '',
+        },
+      }
+
+      await axios.patch(
+        `https://api.modrinth.com/api/v1/mod/${id}`,
+        {
+          status,
+        },
+        config
+      )
+
+      await this.$router.go(0)
+    },
+  },
 }
 </script>
 
@@ -120,4 +143,8 @@ export default {
     font-weight: var(--font-weight-extrabold);
   }
 }
+
+.button {
+  margin: 0.25rem 0;
+}
 </style>

pages/dashboard/projects.vue

@@ -18,6 +18,7 @@
             Moderation
           </nuxt-link>
         </div>
+        <m-footer class="footer" />
         <client-only>
           <EthicalAd type="image" />
         </client-only>
@@ -47,7 +48,11 @@
           :edit-mode="true"
           :status="mod.status"
           :is-modrinth="true"
-        />
+        >
+          <nuxt-link class="button column" :to="'/mod/' + mod.id + '/edit'">
+            Edit
+          </nuxt-link>
+        </ModCard>
       </div>
     </div>
   </div>
@@ -57,6 +62,7 @@
 import axios from 'axios'
 import EthicalAd from '@/components/EthicalAd'
 import ModCard from '@/components/ProjectCard'
+import MFooter from '@/components/MFooter'
 
 import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
 import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
@@ -67,6 +73,7 @@ export default {
     ModCard,
     ModIcon,
     ModerationIcon,
+    MFooter,
   },
   async asyncData(data) {
     const config = {

pages/mod/_id/edit.vue

@@ -393,7 +393,7 @@ export default {
           license_id: this.license.short,
           client_side: this.clientSideType.id,
           server_side: this.serverSideType.id,
-          slug: this.mod.mod_slug,
+          slug: this.mod.slug,
         }
 
         if (this.isProcessing) {
@@ -431,9 +431,9 @@ export default {
       this.$nuxt.$loading.finish()
     },
 
-    showPreviewImage(e) {
+    showPreviewImage(files) {
       const reader = new FileReader()
-      this.icon = e.target.files[0]
+      this.icon = files[0]
       reader.readAsDataURL(this.icon)
 
       reader.onload = (event) => {

pages/mod/_id/versions.vue

@@ -280,12 +280,12 @@ export default {
     }
   },
   methods: {
-    updateVersionFiles(e) {
+    updateVersionFiles(files) {
-      this.createdVersion.raw_files = e.target.files
+      this.createdVersion.raw_files = files
 
       const newFileParts = []
-      for (let i = 0; i < e.target.files.length; i++) {
+      for (let i = 0; i < files.length; i++) {
-        newFileParts.push(e.target.files[i].name.concat('-' + i))
+        newFileParts.push(files[i].name.concat('-' + i))
       }
 
       this.createdVersion.file_parts = newFileParts

pages/mod/create.vue

@@ -434,8 +434,8 @@
               placeholder="Select one"
               track-by="short"
               label="name"
-              :options="availableLicenses"
               :searchable="true"
+              :options="availableLicenses"
               :close-on-select="true"
               :show-labels="false"
             />
@@ -627,9 +627,9 @@ export default {
       this.$nuxt.$loading.finish()
     },
 
-    showPreviewImage(e) {
+    showPreviewImage(files) {
       const reader = new FileReader()
-      this.icon = e.target.files[0]
+      this.icon = files[0]
       reader.readAsDataURL(this.icon)
 
       reader.onload = (event) => {
@@ -637,12 +637,12 @@ export default {
       }
     },
 
-    updateVersionFiles(e) {
+    updateVersionFiles(files) {
-      this.versions[this.currentVersionIndex].raw_files = e.target.files
+      this.versions[this.currentVersionIndex].raw_files = files
 
       const newFileParts = []
-      for (let i = 0; i < e.target.files.length; i++) {
+      for (let i = 0; i < files.length; i++) {
-        newFileParts.push(e.target.files[i].name.concat('-' + i))
+        newFileParts.push(files[i].name.concat('-' + i))
       }
 
       this.versions[this.currentVersionIndex].file_parts = newFileParts