Merge #121: Redirect to the torrent list after deleting a torrent

3d5f39a fix: [#118] redirect to the torrent list after deleting a torrent (Jose Celano)

Pull request description:

  Redirect to the torrent list after deleting a torrent.

Top commit has no ACKs.

Tree-SHA512: 98a4af585beb5679cda7ef5c7bf2ce4335ad40e6a72457aa418bfc7801b9e16b993fc69e9085a66d84d94ce75d5f352a5c446aac3b0355f097f48da944fba3b5

components/FilterCategory.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-click-outside="() => (dropdownOpened = false)" class="relative inline-block text-left">
-    <button class="filter relative" @click="dropdownOpened = !dropdownOpened">
+    <button class="relative filter" @click="dropdownOpened = !dropdownOpened">
       <AdjustmentsHorizontalIcon size="16" class="mr-1 opacity-50" />
       Categories
     </button>
-    <div class="origin-top-left absolute left-0 mt-2 z-10" :class="{hidden: !dropdownOpened}">
-      <div class="py-2 px-2 w-48 flex flex-col bg-slate-800 text-sm rounded-md shadow-lg">
+    <div class="absolute left-0 z-10 mt-2 origin-top-left" :class="{hidden: !dropdownOpened}">
+      <div class="flex flex-col w-48 px-2 py-2 text-sm rounded-md shadow-lg bg-slate-800">
         <ul v-if="$route.name === 'Browse Torrents'" id="category-filters" class="">
           <li
             v-for="category in categories"

components/torrent/TorrentActionCard.vue

@@ -147,37 +147,23 @@
 </template>
 
 <script setup lang="ts">
-import { CheckIcon, PencilIcon, XMarkIcon, LinkIcon, CalendarIcon, CircleStackIcon, UserCircleIcon, HashtagIcon, TagIcon } from "@heroicons/vue/24/solid";
-import { Ref, PropType } from "vue";
+import { LinkIcon, CalendarIcon, CircleStackIcon, UserCircleIcon, HashtagIcon, TagIcon } from "@heroicons/vue/24/solid";
+import { PropType } from "vue";
 import { TorrentResponse } from "torrust-index-types-lib";
-import { useRuntimeConfig } from "#app";
 import {
   fileSize,
   downloadTorrent,
-  ref,
   useRestApi,
-  useSettings,
-  useUser,
   isUserLoggedIn,
   isTrackerPublic, navigateTo
 } from "#imports";
 import { canEditThisTorrent } from "~/composables/helpers";
 
-enum State {
-  Viewing,
-  Editing
-}
-
-const config = useRuntimeConfig();
 const rest = useRestApi();
-const settings = useSettings();
-const user = useUser();
-
-const state: Ref<State> = ref(State.Viewing);
-const updatedTitle: Ref<String> = ref(null);
 
 const emit = defineEmits([
-  "updated"
+  "updated",
+  "deleted"
 ]);
 
 const props = defineProps({
@@ -212,7 +198,7 @@ function editTorrent () {
 function deleteTorrent () {
   rest.value.torrent.deleteTorrent(props.torrent.info_hash)
     .then(() => {
-      emit("updated");
+      emit("deleted");
     });
 }
 </script>

composables/states.ts

@@ -7,7 +7,7 @@ export const useCategories = () => useState<Array<Category>>("categories", () =>
 export const useTags = () => useState<Array<TorrentTag>>("tags", () => new Array<TorrentTag>());
 export const useAuthenticationModal = () => useState<boolean>("authentication-modal", () => false);
 export const useSettings = () => useState<PublicSettings>("public-settings", () => null);
-export const useUser = () => useState<User>("user", () => null);
+export const useUser = () => useState<TokenResponse>("user", () => null);
 
 export function getSettings () {
   useRestApi().value.settings.getPublicSettings()

pages/admin/settings/tags.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="mx-auto flex flex-col gap-2 max-w-md">
+  <div class="flex flex-col max-w-md gap-2 mx-auto">
     <div class="flex flex-col gap-2">
       <template v-for="tag in tags">
-        <div class="p-2 flex justify-between bg-base-100 rounded">
+        <div class="flex justify-between p-2 rounded bg-base-100">
           <span class="text-base-content">{{ tag.name }}</span>
           <button class="text-error-content hover:text-error" @click="deleteTag(tag)">
             Delete
@@ -11,7 +11,7 @@
       </template>
     </div>
     <div class="flex gap-2">
-      <input v-model="newTag" class="input input-bordered w-full" type="text">
+      <input v-model="newTag" class="w-full input input-bordered" type="text">
       <button class="btn btn-primary" :class="{ 'loading': addingTag }" :disabled="addingTag || !newTag" @click="addTag">
         Add tag
       </button>
@@ -21,8 +21,8 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { TorrentTag } from "torrust-index-types-lib";
 import { computed, getTags, useRestApi, useTags } from "#imports";
-import { TorrentTag } from "~/torrust-index-types-lib";
 
 const tags = useTags();
 const rest = useRestApi().value;

pages/torrent/[infoHash].vue

@@ -22,7 +22,7 @@
             </div>
           </div>
         </div>
-        <TorrentActionCard class="max-w-md top-8 md:sticky" :torrent="torrent" @updated="reloadTorrent" />
+        <TorrentActionCard 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"
@@ -82,6 +82,10 @@ function getTorrentFromApi (infoHash: string) {
 function reloadTorrent () {
   getTorrentFromApi(torrent.value.info_hash);
 }
+
+function navigateToTorrentList () {
+  navigateTo("/torrents", { replace: true });
+}
 </script>
 
 <style scoped>

pages/torrent/edit/[infoHash].vue

@@ -92,7 +92,7 @@ import { useCategories } from "~/composables/states";
 type FormEditTorrent = {
   title: string;
   description: string;
-  tags: Array<string>;
+  tags: Array<number>;
 }
 
 const config = useRuntimeConfig();

project-words.txt

@@ -1,3 +1,7 @@
+composables
+heroicons
+notiwind
 Nuxt
 nuxtjs
 proxied
+vuex