fix(duration): Values greater than a month weren't displayed (#1381)

src/components/Dashboard/DashboardItems/ItemDateTime.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import dayjs from '@/plugins/dayjs.ts'
+import dayjs from '@/plugins/dayjs'
 import { useVueTorrentStore } from '@/stores'
 import { Torrent } from '@/types/vuetorrent'
 

src/components/Dashboard/DashboardItems/ItemDuration.vue

@@ -1,10 +1,34 @@
 <script setup lang="ts">
+import dayjs from '@/plugins/dayjs'
 import { Torrent } from '@/types/vuetorrent'
-import dayjs from '@/plugins/dayjs.ts'
+import { computed } from 'vue'
 
-defineProps<{ torrent: Torrent; title: string; value: string }>()
+const props = defineProps<{ torrent: Torrent; title: string; value: string }>()
 
-const durationFormat = 'D[d] H[h] m[m] s[s]'
+const formattedDuration = computed(() => {
+  const duration = dayjs.duration(props.torrent[props.value], 'seconds')
+
+  const durationValues = [
+    duration.years(),
+    duration.months(),
+    duration.days(),
+    duration.hours(),
+    duration.minutes(),
+    duration.seconds()
+  ]
+  const durationLabels = ['Y', 'M', 'd', 'h', 'm', 's']
+
+  let flag = false
+  return durationValues
+  .map((value, index) => {
+    if (flag || value) {
+      flag = true
+      return `${ value }${ durationLabels[index] }`
+    }
+  })
+  .filter((value) => value)
+  .join(' ')
+})
 </script>
 
 <template>
@@ -14,7 +38,7 @@ const durationFormat = 'D[d] H[h] m[m] s[s]'
     </div>
     <div>
       <span v-if="torrent[value] > 0">
-        {{ dayjs.duration(torrent[value], 'seconds').format(durationFormat) }}
+        {{ formattedDuration }}
       </span>
       <span v-else>{{ $t('dashboard.not_complete') }}</span>
     </div>

src/components/Dashboard/DashboardItems/ItemRelativeTime.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Torrent } from '@/types/vuetorrent'
-import dayjs from '@/plugins/dayjs.ts'
+import dayjs from '@/plugins/dayjs'
 
 defineProps<{ torrent: Torrent; title: string; value: string }>()
 </script>

src/components/Dashboard/Views/Grid/GridView.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import GridTorrent from '@/components/Dashboard/Views/Grid/GridTorrent.vue'
-import { useDashboardStore } from '@/stores/dashboard.ts'
+import { useDashboardStore } from '@/stores'
 import { Torrent as TorrentType } from '@/types/vuetorrent'
 import { useDisplay } from 'vuetify'
 

src/components/Dashboard/Views/Table/DashboardItems/ItemDateTime.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import dayjs from '@/plugins/dayjs.ts'
+import dayjs from '@/plugins/dayjs'
 import { useVueTorrentStore } from '@/stores'
 import { Torrent } from '@/types/vuetorrent'
 

src/components/Dashboard/Views/Table/DashboardItems/ItemDuration.vue

@@ -1,15 +1,39 @@
 <script setup lang="ts">
-import dayjs from '@/plugins/dayjs.ts'
+import dayjs from '@/plugins/dayjs'
 import { Torrent } from '@/types/vuetorrent'
+import { computed } from 'vue'
 
-defineProps<{ torrent: Torrent; title: string; value: string }>()
+const props = defineProps<{ torrent: Torrent; title: string; value: string }>()
 
-const durationFormat = 'D[d] H[h] m[m] s[s]'
+const formattedDuration = computed(() => {
+  const duration = dayjs.duration(props.torrent[props.value], 'seconds')
+
+  const durationValues = [
+    duration.years(),
+    duration.months(),
+    duration.days(),
+    duration.hours(),
+    duration.minutes(),
+    duration.seconds()
+  ]
+  const durationLabels = ['Y', 'M', 'd', 'h', 'm', 's']
+
+  let flag = false
+  return durationValues
+  .map((value, index) => {
+    if (flag || value) {
+      flag = true
+      return `${ value }${ durationLabels[index] }`
+    }
+  })
+  .filter((value) => value)
+  .join(' ')
+})
 </script>
 
 <template>
   <td v-if="torrent[value] > 0">
-    {{ dayjs.duration(torrent[value], 'seconds').format(durationFormat) }}
+    {{ formattedDuration }}
   </td>
   <td v-else>{{ $t('dashboard.not_complete') }}</td>
 </template>

src/components/Dashboard/Views/Table/TableView.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import TableTorrent from '@/components/Dashboard/Views/Table/TableTorrent.vue'
-import { useVueTorrentStore } from '@/stores'
-import { useDashboardStore } from '@/stores/dashboard.ts'
+import { useDashboardStore, useVueTorrentStore } from '@/stores'
 import { Torrent as TorrentType } from '@/types/vuetorrent'
 import { computed } from 'vue'
 

src/services/qbit.ts

@@ -1,4 +1,4 @@
-import { NetworkInterface } from '@/types/qbit/models/AppPreferences.ts'
+import { NetworkInterface } from '@/types/qbit/models/AppPreferences'
 import type { AxiosInstance } from 'axios'
 import axios from 'axios'
 import type {