diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue index a0edf85f8..481e3a475 100644 --- a/src/components/ui/FetchedTags.vue +++ b/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 {}; +}); + - + { :title="`${key}: ${val}`" :class="{ empty: !val }" > - {{ val }} + {{ val }} @@ -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 $color-spacer; + border: 1px solid var(--vn-label-color); 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); } } diff --git a/src/css/app.scss b/src/css/app.scss index 2ed5d3c86..9124feaf1 100644 --- a/src/css/app.scss +++ b/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); } diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue index 8bf5d33bd..4e57d18ca 100644 --- a/src/pages/Item/ItemFixedPrice.vue +++ b/src/pages/Item/ItemFixedPrice.vue @@ -469,7 +469,7 @@ function handleOnDataSave({ CrudModelRef }) { {{ row.subName }} - + diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue index caccb9949..128bb5c2b 100644 --- a/src/pages/Item/ItemList.vue +++ b/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)); - (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)); + + + {{ row.typeName }} + {{ row.typeFk }} + + + {{ row.userName }} @@ -386,11 +365,10 @@ onUnmounted(() => (stateStore.rightDrawer = false)); {{ row?.subName.toUpperCase() }} - + -