mirror of
https://github.com/VueTorrent/VueTorrent.git
synced 2025-02-18 00:02:02 +03:00
feat(Chips): Add option to hide values if empty (#1380)
This commit is contained in:
parent
86bba4e893
commit
6b94f6e2c2
6 changed files with 23 additions and 6 deletions
|
@ -1,9 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { useVueTorrentStore } from '@/stores'
|
||||
import { Torrent } from '@/types/vuetorrent'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{ torrent: Torrent; title: string; value: string; color: string }>()
|
||||
|
||||
const vueTorrentStore = useVueTorrentStore()
|
||||
|
||||
const values = computed(() => {
|
||||
const val = props.torrent[props.value]
|
||||
const type = typeof val
|
||||
|
@ -11,15 +14,17 @@ const values = computed(() => {
|
|||
if (type === 'string') return val.length > 0 ? [val] : []
|
||||
else if (type === 'object' /* array */) return val
|
||||
})
|
||||
|
||||
const emptyValue = computed(() => values.value.length < 1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column">
|
||||
<div class="d-flex flex-column" v-if="!(vueTorrentStore.hideChipIfUnset && emptyValue)">
|
||||
<div class="text-caption text-grey">
|
||||
{{ $t(`torrent.properties.${title}`) }}
|
||||
</div>
|
||||
<div class="d-flex flex-row gap">
|
||||
<v-chip v-if="!values || values.length < 1" :color="color.replace('$1', torrent[value])" variant="flat">
|
||||
<v-chip v-if="!values || emptyValue" :color="color.replace('$1', torrent[value])" variant="flat">
|
||||
{{ $t(`torrent.properties.empty_${value}`) }}
|
||||
</v-chip>
|
||||
<v-chip v-else v-for="val in values" :color="color.replace('$1', torrent.state)" variant="flat">
|
||||
|
|
|
@ -1,9 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { useVueTorrentStore } from '@/stores'
|
||||
import { Torrent } from '@/types/vuetorrent'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{ torrent: Torrent; title: string; value: string; color: string }>()
|
||||
|
||||
const vueTorrentStore = useVueTorrentStore()
|
||||
|
||||
const values = computed(() => {
|
||||
const val = props.torrent[props.value]
|
||||
const type = typeof val
|
||||
|
@ -11,12 +14,14 @@ const values = computed(() => {
|
|||
if (type === 'string') return val.length > 0 ? [val] : []
|
||||
else if (type === 'object' /* array */) return val
|
||||
})
|
||||
|
||||
const emptyValue = computed(() => values.value.length < 1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<td>
|
||||
<div class="d-flex flex-row gap">
|
||||
<v-chip v-if="!values || values.length < 1" :color="color.replace('$1', torrent[value])" variant="flat">
|
||||
<div class="d-flex flex-row gap" v-if="!(vueTorrentStore.hideChipIfUnset && emptyValue)">
|
||||
<v-chip v-if="!values || emptyValue" :color="color.replace('$1', torrent[value])" variant="flat">
|
||||
{{ $t(`torrent.properties.empty_${value}`) }}
|
||||
</v-chip>
|
||||
<v-chip v-else v-for="val in values" :color="color.replace('$1', torrent.state)" variant="flat">
|
||||
|
|
|
@ -116,6 +116,10 @@ onBeforeMount(() => {
|
|||
<v-checkbox v-model="vueTorrentStore.isPaginationOnTop" hide-details density="compact" :label="t('settings.vuetorrent.general.isPaginationOnTop')" />
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-checkbox v-model="vueTorrentStore.hideChipIfUnset" hide-details density="compact" :label="t('settings.vuetorrent.general.hideChipIfUnset')" />
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-checkbox v-model="vueTorrentStore.openSideBarOnStart" hide-details density="compact" :label="t('settings.vuetorrent.general.openSideBarOnStart')" />
|
||||
</v-col>
|
||||
|
|
|
@ -906,6 +906,7 @@
|
|||
"dateFormat": "Date Format",
|
||||
"exportSettings": "Export Settings",
|
||||
"fileContentInterval": "Torrent file content refresh interval",
|
||||
"hideChipIfUnset": "Hide chips if unset",
|
||||
"historySize": "History size on eligible fields",
|
||||
"importSettings": "Import Settings",
|
||||
"isDrawerRight": "Right Drawer",
|
||||
|
|
|
@ -380,7 +380,7 @@ onBeforeUnmount(() => {
|
|||
<p class="text-grey">{{ t('common.emptyList') }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="vuetorrentStore.isPaginationOnTop && !vuetorrentStore.isInfiniteScrollActive">
|
||||
<div v-if="vuetorrentStore.isPaginationOnTop && !vuetorrentStore.isInfiniteScrollActive && pageCount > 1">
|
||||
<v-pagination v-model="currentPage" :length="pageCount"
|
||||
next-icon="mdi-menu-right" prev-icon="mdi-menu-left" @input="scrollToTop" />
|
||||
</div>
|
||||
|
@ -398,7 +398,7 @@ onBeforeUnmount(() => {
|
|||
@onCheckboxClick="onCheckboxClick" @onTorrentRightClick="onTorrentRightClick"
|
||||
@startPress="startPress" @endPress="endPress" />
|
||||
|
||||
<div v-if="!vuetorrentStore.isPaginationOnTop && !vuetorrentStore.isInfiniteScrollActive">
|
||||
<div v-if="!vuetorrentStore.isPaginationOnTop && !vuetorrentStore.isInfiniteScrollActive && pageCount > 1">
|
||||
<v-pagination v-model="currentPage" :length="pageCount"
|
||||
next-icon="mdi-menu-right" prev-icon="mdi-menu-left" @input="scrollToTop" />
|
||||
</div>
|
||||
|
|
|
@ -25,6 +25,7 @@ export const useVueTorrentStore = defineStore(
|
|||
const uiTitleCustom = ref('')
|
||||
const isDrawerRight = ref(false)
|
||||
const isPaginationOnTop = ref(false)
|
||||
const hideChipIfUnset = ref(false)
|
||||
const paginationSize = ref(15)
|
||||
const dateFormat = ref('YYYY-MM-DD HH:mm:ss')
|
||||
const openSideBarOnStart = ref(true)
|
||||
|
@ -215,6 +216,7 @@ export const useVueTorrentStore = defineStore(
|
|||
fileContentInterval,
|
||||
isDrawerRight,
|
||||
isPaginationOnTop,
|
||||
hideChipIfUnset,
|
||||
isShutdownButtonVisible,
|
||||
language,
|
||||
matchSystemTheme,
|
||||
|
|
Loading…
Add table
Reference in a new issue