feat: refs #6321 tags
This commit is contained in:
parent
518dc56eb2
commit
442f74fce0
|
|
@ -30,7 +30,10 @@ const tags = computed(() => {
|
|||
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] ?? '';
|
||||
const val = $props.item[value] ?? '';
|
||||
const match = $props.item[`match${n}`] ?? '';
|
||||
const style = match ? 'color:green' : '';
|
||||
acc[$props.item[key] ?? key] = { val, style, match };
|
||||
return acc;
|
||||
}, {});
|
||||
});
|
||||
|
|
@ -48,15 +51,18 @@ const columnStyle = computed(() => {
|
|||
|
||||
<template>
|
||||
<div class="fetchedTags">
|
||||
<pre>{{ $props.item }}</pre>
|
||||
<div class="wrap" :style="columnStyle">
|
||||
<div
|
||||
v-for="(val, key) in tags"
|
||||
v-for="(tag, key) in tags"
|
||||
:key="key"
|
||||
class="inline-tag"
|
||||
:title="`${key}: ${val}`"
|
||||
:class="{ empty: !val }"
|
||||
:title="`${key}: ${tag.val}`"
|
||||
:class="{ empty: !tag.val }"
|
||||
>
|
||||
<span class="text">{{ val }} </span>
|
||||
<span class="text" :style="tag.style"
|
||||
>{{ tag.val }}// {{ tag.match }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,22 @@ const { t } = useI18n();
|
|||
const primaryColor = '#f5b351';
|
||||
const colorSpacer = '#ecf0f1';
|
||||
const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`;
|
||||
const gradientStyle = (value) =>
|
||||
`linear-gradient(to right, ${primaryColor} ${compatibilityItem(
|
||||
value
|
||||
)}, ${colorSpacer} 10%)`;
|
||||
const gradientStyle = (value) => {
|
||||
let color = 'white';
|
||||
switch (value) {
|
||||
case value >= 0 && value < 33:
|
||||
color = 'orange';
|
||||
break;
|
||||
case value >= 33 && value < 66:
|
||||
color = 'yellow';
|
||||
break;
|
||||
|
||||
default:
|
||||
color = 'green';
|
||||
break;
|
||||
}
|
||||
return color;
|
||||
};
|
||||
|
||||
const $props = defineProps({
|
||||
itemLack: {
|
||||
|
|
@ -207,39 +219,13 @@ const isSelectionAvailable = (itemProposal) => {
|
|||
row-key="id"
|
||||
:is-editable="false"
|
||||
:right-search="false"
|
||||
:without-header="false"
|
||||
:without-header="true"
|
||||
:disable-option="{ card: true, table: true }"
|
||||
:table="{
|
||||
'row-key': 'id',
|
||||
selection: 'single',
|
||||
}"
|
||||
>
|
||||
<template #top-left>
|
||||
<div v-if="$props.replaceAction" class="q-ml-xs" style="display: flex">
|
||||
<QBtn
|
||||
:label="t('globals.replace')"
|
||||
color="primary"
|
||||
:loading="isLoading"
|
||||
@click="confirm"
|
||||
style="padding-block: 8px"
|
||||
:disable="
|
||||
proposalSelected.length < 1 ||
|
||||
quantity === 0 ||
|
||||
quantity > Math.abs(itemLack.lack)
|
||||
"
|
||||
/>
|
||||
<VnInput
|
||||
v-model="quantity"
|
||||
v-if="proposalSelected.length > 0"
|
||||
@update:model-value="(val) => (quantity = val)"
|
||||
min="0"
|
||||
:max="Math.abs(itemLack.lack)"
|
||||
:label="t('proposal.quantityToReplace')"
|
||||
dense
|
||||
autofocus
|
||||
class="q-ml-xs"
|
||||
/></div
|
||||
></template>
|
||||
<template #body-selection="props">
|
||||
<!-- {{ isSelectionAvailable(props) }} -->
|
||||
<QCheckbox
|
||||
|
|
@ -258,7 +244,7 @@ const isSelectionAvailable = (itemProposal) => {
|
|||
</QCheckbox>
|
||||
</template>
|
||||
<template #column-longName="{ row }">
|
||||
<QTd style="max-width: 800px">
|
||||
<QTd style="min-width: 800px">
|
||||
<QTooltip>
|
||||
{{ row.id }}
|
||||
</QTooltip>
|
||||
|
|
@ -267,30 +253,20 @@ const isSelectionAvailable = (itemProposal) => {
|
|||
><span class="link">{{ row.longName }}</span>
|
||||
<ItemDescriptorProxy :id="row.id" />
|
||||
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<!-- -->
|
||||
|
||||
<section id="portraitGrid">
|
||||
<!-- -->
|
||||
<!-- <div id="left">
|
||||
<VnImg
|
||||
:id="row.id"
|
||||
spinner-color="primary"
|
||||
:ratio="1"
|
||||
height="50px"
|
||||
width="50px"
|
||||
class="image remove-bg"
|
||||
/>
|
||||
<!-- <span style="font-size: xx-small">ID:</span> -->
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<FetchedTags :item="row" class="q-mb-xs" />
|
||||
</div> -->
|
||||
<div id="right" style="min-width: 200px">
|
||||
<div
|
||||
id="middle"
|
||||
:style="{
|
||||
background: gradientStyle(
|
||||
statusConditionalValue(row)
|
||||
|
|
@ -301,9 +277,11 @@ const isSelectionAvailable = (itemProposal) => {
|
|||
<QTooltip>
|
||||
{{ compatibilityItem(statusConditionalValue(row)) }}
|
||||
</QTooltip>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<FetchedTags :item="row" class="q-mb-xs" columns="4" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #column-available="{ row }">
|
||||
|
|
@ -367,6 +345,10 @@ const isSelectionAvailable = (itemProposal) => {
|
|||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
#portraitGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 0.5fr);
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -32,16 +32,15 @@ const $props = defineProps({
|
|||
<QBtn icon="close" flat round dense v-close-popup />
|
||||
</QCardSection>
|
||||
<QCardSection class="row items-center">
|
||||
<VnImg :id="itemLack.id" class="rounded image-wrapper"></VnImg>
|
||||
<!-- <VnImg :id="itemLack.id" class="rounded image-wrapper"></VnImg>
|
||||
<QBtn flat class="link text-blue">
|
||||
{{ itemLack.longName }}
|
||||
<ItemDescriptorProxy :id="itemLack.id" />
|
||||
</QBtn>
|
||||
<FetchedTags :item="itemLack" />
|
||||
|
||||
<!-- {{ tickets[0].saleFk }} -->
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pt-none">
|
||||
<QCardSection class="q-pt-none"> -->
|
||||
<ItemProposal
|
||||
v-bind="$props"
|
||||
@item-replaced="(data) => emit('itemReplaced', data)"
|
||||
|
|
|
|||
Loading…
Reference in New Issue