feat(Chips): Add option to hide values if empty (#1380)

This commit is contained in:
Rémi Marseault 2023-12-02 21:05:42 +01:00 committed by GitHub
parent 86bba4e893
commit 6b94f6e2c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 23 additions and 6 deletions

View file

@ -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">

View file

@ -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">

View file

@ -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>

View file

@ -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",

View file

@ -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>

View file

@ -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,