Merge #122: Allow editing torrent category

cb0456a fix: [#117] allow editing torrent category (Jose Celano) Pull request description: This depends on a backend issue to work: torrust/torrust-index#216 Top commit has no ACKs. Tree-SHA512: 7121b33c2d473c6e3a3151a95b3d1beab03ecfe879a3698b39ef5c6dd098fdb36e333df5984087022836d50fd7249bf8e28cc6d8a89667a8279540fb467874e5
torrust · Jun 26, 2023 · 224cc2c · 224cc2c
2 parents 27583de + cb0456a
commit 224cc2c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 27 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -3,14 +3,17 @@ import eslintPlugin from "vite-plugin-eslint";
 
 export default defineNuxtConfig({
   ssr: false,
+
   runtimeConfig: {
     public: {
       apiBase: process.env.API_BASE_URL
     }
   },
+
   modules: [
     "@nuxtjs/tailwindcss"
   ],
+
   vite: {
     server: {
       fs: {
@@ -21,5 +24,9 @@ export default defineNuxtConfig({
     plugins: [
       eslintPlugin()
     ]
+  },
+
+  devtools: {
+    enabled: true
   }
 });
diff --git a/pages/torrent/[infoHash].vue b/pages/torrent/[infoHash].vue
@@ -22,7 +22,7 @@
             </div>
           </div>
         </div>
-        <TorrentActionCard class="max-w-md top-8 md:sticky" :torrent="torrent" @updated="reloadTorrent" @deleted="navigateToTorrentList" />
+        <TorrentActionCard v-if="torrent" class="max-w-md top-8 md:sticky" :torrent="torrent" @updated="reloadTorrent" @deleted="navigateToTorrentList" />
         <div class="block md:hidden">
           <button
             class="border-none btn bg-base-200"

diff --git a/pages/torrent/edit/[infoHash].vue b/pages/torrent/edit/[infoHash].vue
@@ -33,18 +33,18 @@
           </div>
         </template>
       </div>
-      <!--      <template v-if="categories?.length > 0">-->
-      <!--        <div>-->
-      <!--          <label for="category" class="px-2">Category</label>-->
-      <!--          <select id="category" v-model="form.category" class="mt-1">-->
-      <!--            <template v-for="option in categories">-->
-      <!--              <option :value="option.name">-->
-      <!--                {{ option.name }}-->
-      <!--              </option>-->
-      <!--            </template>-->
-      <!--          </select>-->
-      <!--        </div>-->
-      <!--      </template>-->
+      <template v-if="categories?.length > 0">
+        <div>
+          <label for="category" class="px-2">Category</label>
+          <select id="category" v-model="form.category" class="mt-1">
+            <template v-for="option in categories">
+              <option :value="option.category_id">
+                {{ option.name }}
+              </option>
+            </template>
+          </select>
+        </div>
+      </template>
       <div>
         <label for="tags" class="px-2">Tags</label>
         <TorrustSelect
@@ -78,12 +78,10 @@ import { Ref } from "vue";
 import { notify } from "notiwind-ts";
 import { TorrentResponse } from "torrust-index-types-lib";
 import {
-  computed,
   navigateTo,
   onMounted,
-  ref, toRaw,
+  ref,
   useRestApi, useRoute,
-  useRuntimeConfig,
   useTags,
   useUser
 } from "#imports";
@@ -92,10 +90,10 @@ import { useCategories } from "~/composables/states";
 type FormEditTorrent = {
   title: string;
   description: string;
+  category: number;
   tags: Array<number>;
 }
 
-const config = useRuntimeConfig();
 const categories = useCategories();
 const tags = useTags();
 const user = useUser();
@@ -112,6 +110,7 @@ const descriptionView = ref("edit");
 const form: Ref<FormEditTorrent> = ref({
   title: "",
   description: "",
+  category: null,
   tags: []
 });
 
@@ -132,6 +131,7 @@ function getTorrentFromApi (infoHash: string) {
 
       form.value.title = data.title;
       form.value.description = data.description;
+      form.value.category = data.category.category_id;
       form.value.tags = data.tags.map((tag) => {
         if (typeof tag === "object" && "tag_id" in tag) {
           return tag.tag_id;
@@ -154,19 +154,16 @@ function formValid () {
 function submitForm () {
   updatingTorrent.value = true;
 
-  const uploadTorrent = {
+  const updateTorrentInfo = {
     title: form.value.title,
     description: form.value.description,
+    category: form.value.category,
     tags: form.value.tags.map((tag) => {
-      if (typeof tag === "object" && "tag_id" in tag) {
-        return tag.tag_id;
-      } else {
-        return tag;
-      }
+      return tag;
     })
   };
 
-  rest.value.torrent.updateTorrent(infoHash, uploadTorrent)
+  rest.value.torrent.updateTorrent(infoHash, updateTorrentInfo)
     .then((torrentResponse) => {
       notify({
         group: "success",

diff --git a/pages/upload.vue b/pages/upload.vue
@@ -45,7 +45,7 @@
           </select>
         </div>
       </template>
-      <template v-if="categories?.length > 0">
+      <template v-if="tags?.length > 0">
         <div>
           <label for="tags" class="px-2">Tags</label>
           <TorrustSelect
@@ -114,8 +114,8 @@ const uploading: Ref<boolean> = ref(false);
 const descriptionView = ref("edit");
 const form: Ref<FormUploadTorrent> = ref({
   title: "",
-  category: "",
   description: "",
+  category: "",
   tags: [],
   torrentFile: ""
 });
@@ -145,8 +145,8 @@ function submitForm () {
   rest.value.torrent.uploadTorrent(
     {
       title: form.value.title,
-      category: form.value.category,
       description: form.value.description,
+      category: form.value.category,
       tags: form.value.tags,
       file: form.value.torrentFile
     }