feat: [torrust#278] show torrent fields creation date created by encoding

    Torrent details page now displays the creation date, created by and encoding fields.

Author: MMelchor

components/torrent/TorrentCreatedByTab.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="torrent-created-by" class="flex flex-col gap-6">
+    <div class="flex flex-row items-center justify-between">
+      <h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
+        Created by
+      </h2>
+      <button
+        class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
+        @click="collapsed = !collapsed"
+      >
+        <ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
+      </button>
+    </div>
+    <template v-if="!collapsed">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
+        <template v-if="torrent.created_by">
+          <Markdown :source="torrent.created_by" />
+        </template>
+        <template v-else>
+          <span class="italic text-neutral-content">No created by field provided.</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/24/solid";
+import { TorrentResponse } from "torrust-index-types-lib";
+import { PropType } from "vue";
+import { ref } from "#imports";
+import Markdown from "~/components/Markdown.vue";
+
+const collapsed = ref(false);
+
+const props = defineProps({
+  torrent: {
+    type: Object as PropType<TorrentResponse>,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+
+</style>

components/torrent/TorrentCreationDateTab.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="torrent-creation-date" class="flex flex-col gap-6">
+    <div class="flex flex-row items-center justify-between">
+      <h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
+        Creation Date
+      </h2>
+      <button
+        class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
+        @click="collapsed = !collapsed"
+      >
+        <ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
+      </button>
+    </div>
+    <template v-if="!collapsed">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
+        <template v-if="torrent.creation_date">
+          <!--<Markdown :source="torrent.name" />-->
+          {{ convertedDate }}
+        </template>
+        <template v-else>
+          <span class="italic text-neutral-content">No creation date provided.</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/24/solid";
+import { TorrentResponse } from "torrust-index-types-lib";
+import { PropType } from "vue";
+import { ref } from "#imports";
+import Markdown from "~/components/Markdown.vue";
+import { epochToUtc } from "~/src/helpers/DateConverter";
+
+const collapsed = ref(false);
+
+const props = defineProps({
+  torrent: {
+    type: Object as PropType<TorrentResponse>,
+    required: true
+  }
+});
+
+// Takes the date in milliseconds/Epoch Time and converts it to human readable format
+const convertedDate = epochToUtc(props.torrent.creation_date);
+
+</script>
+
+<style scoped>
+
+</style>

components/torrent/TorrentDetails.vue

@@ -17,6 +17,9 @@
               <div v-if="torrent" class="flex flex-col flex-auto w-full gap-6">
                 <TorrentDescriptionTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentCommentTab :torrent="torrent" @updated="reloadTorrent" />
+                <TorrentCreationDateTab :torrent="torrent" @updated="reloadTorrent" />
+                <TorrentCreatedByTab :torrent="torrent" @updated="reloadTorrent" />
+                <TorrentEncodingTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentFilesTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentTrackersTab :torrent="torrent" @updated="reloadTorrent" />
               </div>

components/torrent/TorrentEncodingTab.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="torrent-encoding" class="flex flex-col gap-6">
+    <div class="flex flex-row items-center justify-between">
+      <h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
+        Encoding
+      </h2>
+      <button
+        class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
+        @click="collapsed = !collapsed"
+      >
+        <ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
+      </button>
+    </div>
+    <template v-if="!collapsed">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
+        <template v-if="torrent.encoding">
+          <Markdown :source="torrent.encoding" />
+        </template>
+        <template v-else>
+          <span class="italic text-neutral-content">No encoding provided.</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/24/solid";
+import { TorrentResponse } from "torrust-index-types-lib";
+import { PropType } from "vue";
+import { ref } from "#imports";
+import Markdown from "~/components/Markdown.vue";
+
+const collapsed = ref(false);
+
+const props = defineProps({
+  torrent: {
+    type: Object as PropType<TorrentResponse>,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+
+</style>

src/helpers/DateConverter.ts

@@ -0,0 +1,4 @@
+export function epochToUtc (date: number) {
+  const convertedDate = new Date(date * 1000);
+  return convertedDate.toDateString();
+}