From 438ee55b50b6d659ed8daf08a2a16ab89eeb43c8 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 28 Mar 2023 14:58:04 +0200
Subject: [PATCH] Edit in grid mode

---
 src/components/common/vnDiscount.vue |   2 +-
 src/components/ui/VnConfirm.vue      |   2 +-
 src/pages/Claim/Card/ClaimLines.vue  | 115 +++++++++++++++++++++------
 3 files changed, 93 insertions(+), 26 deletions(-)

diff --git a/src/components/common/vnDiscount.vue b/src/components/common/vnDiscount.vue
index 49f95d51c..97d5ace39 100644
--- a/src/components/common/vnDiscount.vue
+++ b/src/components/common/vnDiscount.vue
@@ -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';
 
diff --git a/src/components/ui/VnConfirm.vue b/src/components/ui/VnConfirm.vue
index 00db77b5c..d73357c3d 100644
--- a/src/components/ui/VnConfirm.vue
+++ b/src/components/ui/VnConfirm.vue
@@ -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"
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index cc1ac1213..0b90a2bab 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -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'