feat: refs #8004 enhance FetchedTags component with column support and styling updates

src/components/ui/FetchedTags.vue

@@ -16,7 +16,13 @@ const $props = defineProps({
         required: false,
         default: 'value',
     },
+    columns: {
+        type: Number,
+        required: false,
+        default: null,
+    },
 });
+
 const tags = computed(() => {
     return Object.keys($props.item)
         .filter((i) => i.startsWith(`${$props.tag}`))
@@ -28,10 +34,21 @@ const tags = computed(() => {
             return acc;
         }, {});
 });
+
+const columnStyle = computed(() => {
+    if ($props.columns) {
+        return {
+            'grid-template-columns': `repeat(${$props.columns}, 1fr)`,
+            'max-width': `${$props.columns * 4}rem`,
+        };
+    }
+    return {};
+});
 </script>
+
 <template>
     <div class="fetchedTags">
-        <div class="wrap">
+        <div class="wrap" :style="columnStyle">
             <div
                 v-for="(val, key) in tags"
                 :key="key"
@@ -39,7 +56,7 @@ const tags = computed(() => {
                 :title="`${key}: ${val}`"
                 :class="{ empty: !val }"
             >
-                {{ val }}
+                <span class="text">{{ val }} </span>
             </div>
         </div>
     </div>
@@ -49,27 +66,33 @@ const tags = computed(() => {
 .fetchedTags {
     align-items: center;
     .wrap {
-        width: 100%;
         flex-wrap: wrap;
-        display: flex;
+        display: grid;
     }
 
     .inline-tag {
         height: 1rem;
         margin: 0.05rem;
-        color: $color-font-secondary;
+        color: var(--vn-label-color);
         text-align: center;
         font-size: smaller;
         padding: 1px;
-        flex: 1;
+        border: 1px solid var(--vn-label-color);
-        border: 1px solid $color-spacer;
         text-overflow: ellipsis;
         overflow: hidden;
         min-width: 4rem;
         max-width: 4rem;
     }
+
+    .text {
+        vertical-align: middle;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: smaller;
+    }
     .empty {
-        border: 1px solid #2b2b2b;
+        border: 1px solid var(--vn-empty-tag);
     }
 }
 </style>

src/css/app.scss

@@ -11,6 +11,7 @@ body.body--light {
     --vn-text-color: var(--font-color);
     --vn-label-color: #5f5f5f;
     --vn-accent-color: #e7e3e3;
+    --vn-empty-tag: #acacac;
 
     background-color: var(--vn-page-color);
 
@@ -26,6 +27,7 @@ body.body--dark {
     --vn-text-color: white;
     --vn-label-color: #a8a8a8;
     --vn-accent-color: #424242;
+    --vn-empty-tag: #2d2d2d;
 
     background-color: var(--vn-page-color);
 }

src/pages/Item/ItemFixedPrice.vue

@@ -469,7 +469,7 @@ function handleOnDataSave({ CrudModelRef }) {
                 </span>
                 <span class="subName">{{ row.subName }}</span>
                 <ItemDescriptorProxy :id="row.itemFk" />
-                <FetchedTags :item="row" />
+                <FetchedTags :item="row" :columns="3" />
             </template>
             <template #column-rate2="props">
                 <QTd class="col">

src/pages/Item/ItemList.vue

@@ -11,6 +11,7 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import ItemSummary from '../Item/Card/ItemSummary.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
+import ItemTypeDescriptorProxy from './ItemType/Card/ItemTypeDescriptorProxy.vue';
 import { cloneItem } from 'src/pages/Item/composables/cloneItem';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import ItemListFilter from './ItemListFilter.vue';
@@ -67,7 +68,6 @@ const columns = computed(() => [
             },
         },
         columnFilter: false,
-        cardVisible: true,
     },
     {
         label: t('item.list.id'),
@@ -105,7 +105,7 @@ const columns = computed(() => [
         columnFilter: {
             name: 'search',
         },
-        cardVisible: true,
+        columnClass: 'expand',
     },
     {
         label: t('item.list.stems'),
@@ -143,10 +143,13 @@ const columns = computed(() => [
                 fields: ['id', 'name'],
             },
         },
-        columnField: {
-            component: null,
-        },
         create: true,
+        visible: false,
+    },
+    {
+        label: t('item.list.typeName'),
+        name: 'typeName',
+        align: 'left',
     },
     {
         label: t('item.list.category'),
@@ -230,7 +233,6 @@ const columns = computed(() => [
     {
         label: t('item.list.weightByPiece'),
         name: 'weightByPiece',
-        align: 'left',
         component: 'input',
         columnField: {
             component: null,
@@ -305,36 +307,7 @@ const columns = computed(() => [
         ],
     },
 ]);
-
-const redirectToItemCreate = () => {
-    router.push({ name: 'ItemCreate' });
-};
-
-const redirectToItemSummary = (id) => {
-    router.push({ name: 'ItemSummary', params: { id } });
-};
-
-const cloneItem = async (itemFk) => {
-    try {
-        const { data } = await axios.post(`Items/${itemFk}/clone`);
-        if (!data) return;
-        router.push({ name: 'ItemTags', params: { id: data.id } });
-    } catch (err) {
-        console.error('Error cloning item', err);
-    }
-};
-
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-    const filteredColumns = columns.value.filter(
-        (col) => col.name !== 'picture' && col.name !== 'actions'
-    );
-    allColumnNames.value = filteredColumns.map((col) => col.name);
-});
-
-onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
-
 <template>
     <VnSearchbar
         data-key="ItemList"
@@ -361,7 +334,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         }"
         :order="['isActive DESC', 'name', 'id']"
         :columns="columns"
-        auto-load
         redirect="Item"
         :is-editable="false"
         :right-search="false"
@@ -373,6 +345,13 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <ItemDescriptorProxy :id="row.id" />
             </span>
         </template>
+        <template #column-typeName="{ row }">
+            <span class="link" @click.stop>
+                {{ row.typeName }}
+                {{ row.typeFk }}
+                <ItemTypeDescriptorProxy :id="row.typeFk" />
+            </span>
+        </template>
         <template #column-userName="{ row }">
             <span class="link" @click.stop>
                 {{ row.userName }}
@@ -386,11 +365,10 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     {{ row?.subName.toUpperCase() }}
                 </div>
             </div>
-            <FetchedTags :item="row" :max-length="6" />
+            <FetchedTags :item="row" :columns="3" />
         </template>
     </VnTable>
 </template>
-
 <style lang="scss" scoped>
 .subName {
     text-transform: uppercase;

src/pages/Item/ItemType/Card/ItemTypeDescriptor.vue

@@ -6,13 +6,11 @@ import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-
 import useCardDescription from 'src/composables/useCardDescription';
 
 const $props = defineProps({
     id: {
         type: Number,
-        required: false,
         default: null,
     },
     summary: {
@@ -24,6 +22,10 @@ const $props = defineProps({
 const route = useRoute();
 const { t } = useI18n();
 
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
 const itemTypeFilter = {
     include: [
         { relation: 'worker' },
@@ -33,10 +35,6 @@ const itemTypeFilter = {
     ],
 };
 
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
-
 const data = ref(useCardDescription());
 const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
 </script>
@@ -48,8 +46,8 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         :filter="itemTypeFilter"
         :title="data.title"
         :subtitle="data.subtitle"
+        data-key="itemTypeDescriptor"
         @on-fetch="setData"
-        data-key="entry"
     >
         <template #body="{ entity }">
             <VnLv :label="t('shared.code')" :value="entity.code" />

src/pages/Item/ItemType/Card/ItemTypeDescriptorProxy.vue

@@ -0,0 +1,17 @@
+<script setup>
+import ItemTypeDescriptor from './ItemTypeDescriptor.vue';
+import ItemTypeSummary from './ItemTypeSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <ItemTypeDescriptor v-if="$props.id" :id="$props.id" :summary="ItemTypeSummary" />
+    </QPopupProxy>
+</template>

src/pages/Item/locale/en.yml

@@ -124,7 +124,7 @@ item:
         size: Size
         origin: Origin
         userName: Buyer
-        weightByPiece: Weight/Piece
+        weightByPiece: Weight/stem
         stemMultiplier: Multiplier
         producer: Producer
         landed: Landed

src/pages/Item/locale/es.yml

@@ -125,7 +125,7 @@ item:
         isActive: Activo
         size: Medida
         origin: Origen
-        weightByPiece: Peso (gramos)/tallo
+        weightByPiece: Peso/tallo
         userName: Comprador
         stemMultiplier: Multiplicador
         producer: Productor