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> <script setup>
import { useRoute } from 'vue-router';
import { computed, onMounted, onUnmounted, ref } from 'vue'; import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import FetchedTags from 'components/ui/FetchedTags.vue'; import axios from 'axios';
import SendEmailDialog from 'components/common/SendEmailDialog.vue'; import { dateRange, toCurrency, toNumber, toDateHourMin } from 'src/filters';
import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
import { dateRange, toCurrency, toNumber, toDate } from 'src/filters';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import { usePrintService } from 'composables/usePrintService'; import { usePrintService } from 'composables/usePrintService';
import useNotify from 'src/composables/useNotify'; import useNotify from 'src/composables/useNotify';
import axios from 'axios';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import { useArrayData } from 'composables/useArrayData'; 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 RightMenu from 'src/components/common/RightMenu.vue';
import { toDateHourMin } from 'src/filters'; import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue'; import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
const state = useState(); const state = useState();
const stateStore = useStateStore(); const stateStore = useStateStore();
@ -208,21 +204,11 @@ const totalEntryPrice = (rows) => {
); );
return rows; return rows;
}; };
const tableRef = ref(null);
onMounted(async () => { onMounted(async () => {
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
await getSupplierConsumptionData(); await getSupplierConsumptionData();
}); });
const lastAction = ref(null);
const expanded = ref([]); 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> </script>
<template> <template>
@ -274,28 +260,9 @@ const actions = (action) => {
</template> </template>
</RightMenu> </RightMenu>
<QCard class="full-width q-pa-md"> <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 <QTable
flat flat
bordered bordered
ref="tableRef"
:rows="rows" :rows="rows"
:columns="headerColumns" :columns="headerColumns"
row-key="id" row-key="id"
@ -307,28 +274,16 @@ const actions = (action) => {
<QTh auto-width /> <QTh auto-width />
<QTh v-for="col in props.cols" :key="col.name" :props="props"> <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> </QTh>
</QTr> </QTr>
</template> </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"> <template #body="props">
<QTr <QTr
:props="props" :props="props"
:key="`movement_${props.row.id}`" :key="`movement_${props.row.id}`"
class="bg-travel cursor-pointer" class="bg-vn-page cursor-pointer"
@click="props.expand = !props.expand" @click="props.expand = !props.expand"
> >
<QTd auto-width> <QTd auto-width>
@ -357,31 +312,27 @@ const actions = (action) => {
<QTd colspan="12" style="padding: 1px 0"> <QTd colspan="12" style="padding: 1px 0">
<QTable <QTable
color="secondary" color="secondary"
card-class="bg-travel text-white " card-class="bg-vn-page text-white "
style-class="height: 30px" style-class="height: 30px"
table-header-class=" text-white" table-header-class="text-white"
ref="tableRef"
:rows="props.row.buys" :rows="props.row.buys"
:columns="columns" :columns="columns"
hide-header
row-key="id" row-key="id"
virtual-scroll virtual-scroll
v-model:expanded="expanded" v-model:expanded="expanded"
> >
<template #body="props"> <template #header="props">
<!-- <QTr <QTr :props="props">
v-if="props.rowIndex === 0" <QTh
:key="`rowHeader_${props.row.id}`"
:props="props"
>
<QTd
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
:props="props" :props="props"
> >
<span v-text="col.label" /> <span v-text="col.label" class="tr-header" />
</QTd> </QTh>
</QTr> --> </QTr>
</template>
<template #body="props">
<QTr :props="props" :key="`m_${props.row.id}`"> <QTr :props="props" :key="`m_${props.row.id}`">
<QTd <QTd
v-for="col in props.cols" v-for="col in props.cols"
@ -389,17 +340,15 @@ const actions = (action) => {
:title="col.label" :title="col.label"
:props="props" :props="props"
> >
<!-- <div class="grid-container"> <span
<div class="grid-item name" :title="col.name"> @click.stop
{{ col.name }} class="link"
</div> v-if="col.name === 'itemName'"
<div >
class="grid-item value" {{ col.value }}
v-text="col.value" <ItemDescriptorProxy :id="props.row.itemFk" />
></div> </span>
</div> --> <span v-else v-text="col.value" />
<span v-text="col.value"></span>
</QTd> </QTd>
</QTr> </QTr>
</template> </template>
@ -409,120 +358,8 @@ const actions = (action) => {
</template> </template>
</QTable> </QTable>
</QCard> </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> </template>
<style lang="scss">
.QTable__top {
padding: 0;
}
.QTable__bottom.row.items-center {
padding: 0;
}
</style>
<style scoped lang="scss"> <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 thead tr,
.q-table tbody td { .q-table tbody td {
height: 30px; height: 30px;