verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 78 Releases Wiki Activity

refactor: refs #7347 reorganize imports, clean up and header style

This commit is contained in:
Javier Segarra 2025-04-30 17:15:57 +02:00
parent 253b30822c
commit f6d23fc8bf
1 changed files with 28 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
src/pages/Supplier/Card/SupplierConsumption.vue
View File

@ -1,24 +1,20 @@
<script setup>
import { useRoute } from 'vue-router';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useQuasar } from 'quasar';
import FetchedTags from 'components/ui/FetchedTags.vue';
import SendEmailDialog from 'components/common/SendEmailDialog.vue';
import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
import { dateRange, toCurrency, toNumber, toDate } from 'src/filters';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import axios from 'axios';
import { dateRange, toCurrency, toNumber, toDateHourMin } from 'src/filters';
import { usePrintService } from 'composables/usePrintService';
import useNotify from 'src/composables/useNotify';
import axios from 'axios';
import { useStateStore } from 'stores/useStateStore';
import { useState } from 'src/composables/useState';
import { useArrayData } from 'composables/useArrayData';
import SendEmailDialog from 'components/common/SendEmailDialog.vue';
import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import { toDateHourMin } from 'src/filters';
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
const state = useState();
const stateStore = useStateStore();
@ -208,21 +204,11 @@ const totalEntryPrice = (rows) => {
);
return rows;
};
const tableRef = ref(null);
onMounted(async () => {
stateStore.rightDrawer = true;
await getSupplierConsumptionData();
});
const lastAction = ref(null);
const expanded = ref([]);
const actions = (action) => {
if (action === 'expand_all') {
expanded.value = rows.value.map((r) => r.id);
} else if (action === 'unfold_all') {
expanded.value = [];
}
lastAction.value = action;
};
</script>
<template>
@ -274,28 +260,9 @@ const actions = (action) => {
</template>
</RightMenu>
<QCard class="full-width q-pa-md">
<div class="row">
<QBtn
v-if="lastAction && lastAction === 'expand_all'"
name="expand_all"
flat
color="primary"
icon="expand_all"
@click.stop="actions('expand_all')"
/>
<QBtn
v-if="lastAction && lastAction === 'unfold_all'"
name="unfold_all"
flat
color="primary"
icon="unfold_less"
@click.stop="actions('unfold_all')"
/>
</div>
<QTable
flat
bordered
ref="tableRef"
:rows="rows"
:columns="headerColumns"
row-key="id"
@ -307,28 +274,16 @@ const actions = (action) => {
<QTh auto-width />
<QTh v-for="col in props.cols" :key="col.name" :props="props">
<span v-text="col.label" />
<span v-text="col.label" class="tr-header" />
</QTh>
</QTr>
</template>
<!-- Template especial para la columna 'id' -->
<template #body-cell-id="{ value }">
<div class="custom-id"><strong>ID:</strong> {{ value }}</div>
</template>
<!-- Template especial para la columna 'invoiceNumber' -->
<template #body-cell-invoiceNumber="{ value }">
<div class="custom-invoice">
<span class="label">Invoice:</span>
<span class="value">{{ value }}</span>
</div>
</template>
<template #body="props">
<QTr
:props="props"
:key="`movement_${props.row.id}`"
class="bg-travel cursor-pointer"
class="bg-vn-page cursor-pointer"
@click="props.expand = !props.expand"
>
<QTd auto-width>
@ -357,31 +312,27 @@ const actions = (action) => {
<QTd colspan="12" style="padding: 1px 0">
<QTable
color="secondary"
card-class="bg-travel text-white "
card-class="bg-vn-page text-white "
style-class="height: 30px"
table-header-class=" text-white"
ref="tableRef"
table-header-class="text-white"
:rows="props.row.buys"
:columns="columns"
hide-header
row-key="id"
virtual-scroll
v-model:expanded="expanded"
>
<template #body="props">
<!-- <QTr
v-if="props.rowIndex === 0"
:key="`rowHeader_${props.row.id}`"
:props="props"
>
<QTd
<template #header="props">
<QTr :props="props">
<QTh
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span v-text="col.label" />
</QTd>
</QTr> -->
<span v-text="col.label" class="tr-header" />
</QTh>
</QTr>
</template>
<template #body="props">
<QTr :props="props" :key="`m_${props.row.id}`">
<QTd
v-for="col in props.cols"
@ -389,17 +340,15 @@ const actions = (action) => {
:title="col.label"
:props="props"
>
<!-- <div class="grid-container">
<div class="grid-item name" :title="col.name">
{{ col.name }}
</div>
<div
class="grid-item value"
v-text="col.value"
></div>
</div> -->
<span v-text="col.value"></span>
<span
@click.stop
class="link"
v-if="col.name === 'itemName'"
>
{{ col.value }}
<ItemDescriptorProxy :id="props.row.itemFk" />
</span>
<span v-else v-text="col.value" />
</QTd>
</QTr>
</template>
@ -409,120 +358,8 @@ const actions = (action) => {
</template>
</QTable>
</QCard>
<!-- <QTable
:rows="rows"
row-key="id"
hide-header
class="full-width q-mt-md"
:no-data-label="t('No results')"
>
<template #body="{ row }">
<QTr>
<QTd no-hover>
</QTd>
<QTd no-hover>
</QTd
>
<QTd colspan="6" no-hover>
</QTd>
</QTr>
<QTh>
<QTd no-hover>
<span class="label">ItemFk </span>
</QTd>
<QTd no-hover>
<span class="header">subName </span>
</QTd>
<QTd no-hover>
<span class="label"> Quanitity : </span>
</QTd>
</QTh>
<QTr v-for="(buy, index) in row.buys" :key="index">
<QTd no-hover>
<QBtn flat color="blue" dense no-caps>{{ buy.itemName }}</QBtn>
<ItemDescriptorProxy :id="buy.itemFk" />
</QTd>
<QTd no-hover>
<span>{{ buy.subName }}</span>
<FetchedTags :item="buy" />
</QTd>
<QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
<QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>
<QTd colspan="2" no-hover> {{ dashIfEmpty(buy.total) }}</QTd>
</QTr>
<QTr>
<QTd colspan="5" no-hover>
<span class="label">{{ t('Total entry') }}: </span>
<span>{{ row.total }} €</span>
</QTd>
<QTd no-hover>
<span class="label">{{ t('Total stems') }}: </span>
<span>{{ row.quantity }}</span>
</QTd>
</QTr>
</template>
</QTable> -->
</template>
<style lang="scss">
.QTable__top {
padding: 0;
}
.QTable__bottom.row.items-center {
padding: 0;
}
</style>
<style scoped lang="scss">
.label {
padding-right: 5px;
color: var(--vn-label-color);
}
.header {
flex: 1 0 33%;
display: flex;
align-items: center;
padding-left: 8px;
height: 35px;
border-bottom: 1px solid $primary;
background-color: var(--vn-page-color);
font-size: 19px;
font-weight: bold;
text-transform: uppercase;
}
.footer {
flex: 1 0 33%;
display: flex;
align-items: center;
padding-left: 8px;
height: 35px;
border-bottom: 1px solid $primary;
background-color: var(--vn-page-color);
font-size: 19px;
font-weight: bold;
text-transform: uppercase;
}
.bg-travel {
background-color: var(--vn-page-color);
border-bottom: 2px solid $primary;
}
.grid-container {
display: grid;
grid-template-rows: auto auto; /* Dos filas: una para el nombre y otra para el valor */
gap: 4px; /* Espaciado entre filas */
}
.grid-item.name {
font-weight: bold; /* Estilo para el nombre */
color: var(--vn-label-color); /* Cambia el color según tu diseño */
}
.grid-item.value {
color: var(--vn-text-color); /* Estilo para el valor */
}
.q-table thead tr,
.q-table tbody td {
height: 30px;