Edit in grid mode
gitea/salix-front/pipeline/head There was a failure building this commit Details

This commit is contained in:
Joan Sanchez 2023-03-28 14:58:04 +02:00
parent 9a7be5f217
commit 438ee55b50
3 changed files with 93 additions and 26 deletions

View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted, onUnmounted, ref, computed } from 'vue';
import { onMounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'filters/index';

View File

@ -53,7 +53,7 @@ async function confirm() {
<template>
<q-dialog ref="dialogRef" persistent>
<q-card class="q-pa-sm">
<q-card-section class="row items-center q-pb-none q-gutter-md">
<q-card-section class="row items-center q-pb-none">
<q-avatar
:icon="icon"
color="primary"

View File

@ -190,9 +190,9 @@ function showImportDialog() {
}
</script>
<template>
<q-page-sticky position="top" :offset="[0, 0]" expand>
<q-page-sticky class="z-top" position="top" :offset="[0, 0]" expand>
<q-toolbar class="bg-dark text-white">
<q-toolbar-title> Lines </q-toolbar-title>
<q-toolbar-title> {{ t('Claimed lines') }} </q-toolbar-title>
<q-space />
<div class="row q-gutter-md">
<div>
@ -240,7 +240,7 @@ function showImportDialog() {
:grid="$q.screen.lt.md"
>
<template #body-cell-claimed="{ row, value }">
<q-td auto-width align="right" class="dimmed">
<q-td auto-width align="right" class="text-primary">
<span>{{ value }}</span>
<q-popup-edit
@ -248,6 +248,7 @@ function showImportDialog() {
v-slot="scope"
:title="t('Claimed quantity')"
@update:model-value="updateQuantity(row)"
buttons
>
<q-input
v-model="scope.value"
@ -257,31 +258,12 @@ function showImportDialog() {
@keyup.enter="scope.set"
@focus="($event) => $event.target.select()"
/>
<q-card-actions
class="q-px-none q-mt-sm"
align="right"
>
<q-btn
:label="t('Cancel')"
color="primary"
flat
@click="cancel(scope)"
/>
<q-btn
:label="t('Update')"
color="primary"
:loading="isLoading"
unelevated
@click="save(scope)"
/>
</q-card-actions>
</q-popup-edit>
</q-td>
</template>
<template #body-cell-discount="{ row, value, rowIndex }">
<q-td auto-width align="right" class="dimmed">
<q-td auto-width align="right" class="text-primary">
{{ value }}
<VnDiscount
:quantity="row.quantity"
@ -294,6 +276,88 @@ function showImportDialog() {
/>
</q-td>
</template>
<!-- View for grid mode -->
<template #item="props">
<div
class="q-mb-md col-12 grid-style-transition"
:style="props.selected ? 'transform: scale(0.95);' : ''"
>
<q-card>
<q-card-section>
<q-checkbox v-model="props.selected" />
</q-card-section>
<q-separator inset />
<q-list dense>
<q-item
v-for="column of props.cols"
:key="column.name"
>
<q-item-section>
<q-item-label caption>
{{ column.label }}
</q-item-label>
</q-item-section>
<q-item-section side>
<template
v-if="column.name === 'claimed'"
>
<q-item-label class="text-primary">
{{ column.value }}
<q-popup-edit
v-model="props.row.quantity"
v-slot="scope"
:title="t('Claimed quantity')"
@update:model-value="
updateQuantity(props.row)
"
buttons
>
<q-input
v-model="scope.value"
type="number"
dense
autofocus
@keyup.enter="scope.set"
@focus="
($event) =>
$event.target.select()
"
/>
</q-popup-edit>
</q-item-label>
</template>
<template
v-else-if="column.name === 'discount'"
>
<q-item-label class="text-primary">
{{ column.value }}
<VnDiscount
:quantity="props.row.quantity"
:price="props.row.sale.price"
:discount="
props.row.sale.discount
"
:mana="mana"
:promise="updateDiscount"
:data="{
saleFk: props.row.sale.id,
rowIndex: props.rowIndex,
}"
@on-update="onUpdateDiscount"
/>
</q-item-label>
</template>
<template v-else>
<q-item-label>
{{ column.value }}
</q-item-label>
</template>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</q-table>
</template>
</VnPaginate>
@ -352,6 +416,9 @@ function showImportDialog() {
max-width: 900px;
width: 100%;
}
.grid-style-transition {
transition: transform 0.28s, background-color 0.28s;
}
</style>
<i18n>
@ -360,6 +427,7 @@ en:
You are about to remove <strong>{count}</strong> row |
You are about to remove <strong>{count}</strong> rows'
es:
Claimed lines: Líneas reclamadas
Delivered: Entregado
Quantity: Cantidad
Claimed: Reclamada
@ -372,7 +440,6 @@ es:
Delete claimed sales: Eliminar ventas reclamadas
Discount updated: Descuento actualizado
Claimed quantity: Cantidad reclamada
row: 'línea | líneas'
You are about to remove {count} rows: '
Vas a eliminar <strong>{count}</strong> línea |
Vas a eliminar <strong>{count}</strong> líneas'