Merge pull request '#6957: FetchedTags refactor template' (!382) from 6957_refactorFetechedTags into dev
gitea/salix-front/pipeline/head This commit looks good Details

Reviewed-on: #382
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
Reviewed-by: Carlos Satorres <carlossa@verdnatura.es>
This commit is contained in:
Javier Segarra 2024-05-24 06:18:24 +00:00
commit 515561b75d
10 changed files with 39 additions and 54 deletions

View File

@ -1,5 +1,7 @@
<script setup>
defineProps({
import { computed } from 'vue';
const $props = defineProps({
maxLength: {
type: Number,
required: true,
@ -8,53 +10,40 @@ defineProps({
type: Object,
required: true,
},
tag: {
type: String,
required: false,
default: 'tag',
},
value: {
type: String,
required: false,
default: 'value',
},
});
const tags = computed(() => {
return Object.keys($props.item)
.filter((i) => i.startsWith(`${$props.tag}`))
.reduce((acc, tag) => {
const n = tag.split(`${$props.tag}`)[1];
const key = `${$props.tag}${n}`;
const value = `${$props.value}${n}`;
acc[$props.item[key] ?? key] = $props.item[value] ?? '';
return acc;
}, {});
});
</script>
<template>
<div class="fetchedTags">
<div class="wrap">
<div
v-for="(val, key) in tags"
:key="key"
class="inline-tag"
:class="{ empty: !$props.item.value5 }"
:title="$props.item.tag5 + ': ' + $props.item.value5"
:title="`${key}: ${val}`"
:class="{ empty: !val }"
>
{{ $props.item.value5 }}
</div>
<div
class="inline-tag"
:class="{ empty: !$props.item.tag6 }"
:title="$props.item.tag6 + ': ' + $props.item.value6"
>
{{ $props.item.value6 }}
</div>
<div
class="inline-tag"
:class="{ empty: !$props.item.value7 }"
:title="$props.item.tag7 + ': ' + $props.item.value7"
>
{{ $props.item.value7 }}
</div>
<div
class="inline-tag"
:class="{ empty: !$props.item.value8 }"
:title="$props.item.tag8 + ': ' + $props.item.value8"
>
{{ $props.item.value8 }}
</div>
<div
class="inline-tag"
:class="{ empty: !$props.item.value9 }"
:title="$props.item.tag9 + ': ' + $props.item.value9"
>
{{ $props.item.value9 }}
</div>
<div
class="inline-tag"
:class="{ empty: !$props.item.value10 }"
:title="$props.item.tag10 + ': ' + $props.item.value10"
>
{{ $props.item.value10 }}
{{ val }}
</div>
</div>
</div>
@ -83,9 +72,8 @@ defineProps({
min-width: 4rem;
max-width: 4rem;
}
.empty {
border: 1px solid $color-spacer-light;
border: 1px solid #2b2b2b;
}
}
</style>

View File

@ -410,7 +410,7 @@ const lockIconType = (groupingMode, mode) => {
<span v-if="props.row.item.subName" class="subName">
{{ props.row.item.subName }}
</span>
<fetched-tags :item="props.row.item" :max-length="5" />
<FetchedTags :item="props.row.item" :max-length="5" />
</QTd>
</QTr>
<!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->

View File

@ -338,7 +338,7 @@ const fetchEntryBuys = async () => {
<span v-if="row.item.subName" class="subName">
{{ row.item.subName }}
</span>
<fetched-tags :item="row.item" :max-length="5" />
<FetchedTags :item="row.item" :max-length="5" />
</QTd>
</QTr>
<!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->

View File

@ -707,7 +707,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</template>
<template #body-cell-tags="{ row }">
<QTd>
<fetched-tags :item="row" :max-length="6" />
<FetchedTags :item="row" :max-length="6" />
</QTd>
</template>
<template #body-cell-entryFk="{ row }">

View File

@ -459,7 +459,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
{{ row.name }}
</span>
<ItemDescriptorProxy :id="row.itemFk" />
<fetched-tags :item="row" :max-length="6" />
<FetchedTags :item="row" :max-length="6" />
</QTd>
</template>
<template #body-cell-groupingPrice="props">

View File

@ -521,7 +521,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
<template #body-cell-description="{ row }">
<QTd class="col">
<span>{{ row.name }} {{ row.subName }}</span>
<fetched-tags :item="row" :max-length="6" />
<FetchedTags :item="row" :max-length="6" />
</QTd>
</template>
<template #body-cell-isActive="{ row }">

View File

@ -176,10 +176,7 @@ const detailsColumns = ref([
{{ props.row.item.subName }}
</span>
</div>
<fetched-tags
:item="props.row.item"
:max-length="5"
/>
<FetchedTags :item="props.row.item" :max-length="5" />
</QTd>
<QTd key="quantity" :props="props">
{{ props.row.quantity }}

View File

@ -160,7 +160,7 @@ async function confirmOrder() {
<span class="text-uppercase subname">
{{ row.item.subName }}
</span>
<fetched-tags :item="row.item" :max-length="5" />
<FetchedTags :item="row.item" :max-length="5" />
</div>
<VnLv :label="t('item')" :value="String(row.item.id)" />
<VnLv

View File

@ -77,7 +77,7 @@ const loadVolumes = async (rows) => {
>
<template #list-items>
<div class="q-mb-sm">
<fetched-tags :item="row.item" :max-length="5" />
<FetchedTags :item="row.item" :max-length="5" />
</div>
<VnLv :label="t('item')" :value="row.item.id" />
<VnLv :label="t('subName')">

View File

@ -204,7 +204,7 @@ onMounted(async () => {
<QTd no-hover>
<span>{{ buy.subName }}</span>
<fetched-tags :item="buy" :max-length="5" />
<FetchedTags :item="buy" :max-length="5" />
</QTd>
<QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
<QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>