forked from verdnatura/salix-front
Merge pull request '#6957: FetchedTags refactor template' (!382) from 6957_refactorFetechedTags into dev
Reviewed-on: verdnatura/salix-front#382 Reviewed-by: Alex Moreno <alexm@verdnatura.es> Reviewed-by: Carlos Satorres <carlossa@verdnatura.es>
This commit is contained in:
commit
515561b75d
|
@ -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>
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 }">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 }">
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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')">
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue