Added discount component

src/components/common/vnDiscount.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { onMounted, onUnmounted, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { toCurrency } from 'filters/index';
+
+const { t } = useI18n();
+
+const props = defineProps({
+    quantity: {
+        type: Number,
+        required: true,
+    },
+    price: {
+        type: Number,
+        required: true,
+    },
+    discount: {
+        type: Number,
+        required: false,
+        default: 0,
+    },
+    mana: {
+        type: Number,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+    data: {
+        type: Object,
+        required: false,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['onUpdate']);
+
+const discount = ref(0);
+let canceller;
+
+onMounted(() => {
+    if (props.discount) {
+        discount.value = props.discount;
+    }
+});
+
+const total = computed(() => {
+    const amount = props.price * props.quantity;
+    const appliedDiscount = (discount.value * amount) / 100;
+
+    return amount - appliedDiscount;
+});
+
+const newAmount = computed(() => `${t('New amount')}: ${toCurrency(total.value)}`);
+
+const isLoading = ref(false);
+async function save({ set }) {
+    isLoading.value = true;
+    const response = {
+        ...props.data,
+        ...{
+            discount: parseInt(discount.value),
+        },
+    };
+    if (props.promise) {
+        canceller = new AbortController();
+        Object.assign(response, { canceller });
+
+        await props.promise(response);
+    }
+
+    if (set) set();
+    emit('onUpdate', response);
+    isLoading.value = false;
+}
+
+function cancel({ cancel }) {
+    if (canceller) {
+        canceller.abort();
+        canceller = null;
+    }
+
+    discount.value = props.discount;
+    if (isLoading.value === true) isLoading.value = false;
+    if (cancel) cancel();
+}
+</script>
+
+<template>
+    <q-popup-edit
+        v-model="discount"
+        v-slot="scope"
+        :title="t('Update discount')"
+        @cancel="cancel"
+    >
+        <q-banner class="bg-primary text-center q-mb-md" rounded dense>
+            {{ t('Mana') }} {{ toCurrency(props.mana) }}
+        </q-banner>
+        <q-input
+            v-model="scope.value"
+            type="number"
+            dense
+            autofocus
+            @keyup.enter="save(scope)"
+            @update:model-value="discount = scope.value"
+            @focus="($event) => $event.target.select()"
+            min="0"
+            max="100"
+            :disable="isLoading"
+            :hint="newAmount"
+            :rules="[
+                (value) => value.length > 0 || t('Enter a value'),
+                (value) => (value >= 0 && value <= 100) || t('Invalid discount amount'),
+            ]"
+        />
+        <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>
+</template>
+
+<i18n>
+es:
+    New amount: Nuevo importe
+    Update discount: Actualizar descuento
+    Mana: Maná
+    Enter a value: Introduce un valor
+    Invalid discount amount: Cantidad de descuento incorrecta
+    Cancel: Cancelar
+    Update: Actualizar
+</i18n>

src/pages/Claim/Card/ClaimLines.vue

@@ -11,6 +11,7 @@ import FetchData from 'components/FetchData.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 import { toDate, toCurrency, toPercentage } from 'src/filters';
+import VnDiscount from 'components/common/vnDiscount.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -90,13 +91,18 @@ const columns = computed(() => [
         name: 'discount',
         label: t('Discount'),
         field: ({ sale }) => sale.discount,
-        format: (value) => toPercentage(value),
+        format: (value) => toPercentage(value / 100),
         sortable: true,
     },
     {
         name: 'total',
         label: t('Total'),
-        field: ({ sale }) => sale.price * sale.quantity,
+        field: ({ sale }) => {
+            const amount = sale.price * sale.quantity;
+            const appliedDiscount = (sale.discount * amount) / 100;
+
+            return amount - appliedDiscount;
+        },
         format: (value) => toCurrency(value),
         sortable: true,
     },
@@ -106,6 +112,7 @@ const columns = computed(() => [
     },
 ]);
 
+const selected = ref([]);
 const mana = ref(0);
 async function fetchMana() {
     const ticketId = claim.value.ticketFk;
@@ -118,7 +125,25 @@ async function updateQuantity({ id, quantity }) {
     await axios.patch(`ClaimBeginnings/${id}`, { quantity });
 }
 
-async function updateDiscount({ id, discount }) {}
+async function updateDiscount({ saleFk, discount, canceller }) {
+    const body = { salesIds: [saleFk], newDiscount: discount };
+    const claimId = claim.value.ticketFk;
+    const query = `Tickets/${claimId}/updateDiscount`;
+
+    await axios.post(query, body, {
+        signal: canceller.signal,
+    });
+}
+
+function onUpdateDiscount(response) {
+    const row = store.data[response.rowIndex];
+    row.sale.discount = response.discount;
+    //store.data[response.rowIndex].sale.discount = response.discount;
+    quasar.notify({
+        message: t('Discount updated'),
+        type: 'positive',
+    });
+}
 
 async function confirmRemove(id, index) {
     quasar
@@ -141,9 +166,6 @@ async function remove({ id }) {
         message: t('globals.rowRemoved'),
     });
 }
-
-const manaTitle = computed(() => `${t('Mana')} ${toCurrency(mana.value)}`);
-const totalClaimed = 0;
 </script>
 <template>
     <q-page-sticky position="top" :offset="[0, 0]" expand>
@@ -184,6 +206,8 @@ const totalClaimed = 0;
                         :dense="$q.screen.lt.md"
                         :pagination="{ rowsPerPage: 0 }"
                         row-key="id"
+                        selection="multiple"
+                        v-model:selected="selected"
                         hide-pagination
                     >
                         <template #body-cell-claimed="{ row, value }">
@@ -209,16 +233,32 @@ const totalClaimed = 0;
                             </q-td>
                         </template>
 
-                        <template #body-cell-discount="{ row, value }">
+                        <template #body-cell-discount="{ row, value, rowIndex }">
                             <q-td auto-width align="right" class="dimmed">
                                 {{ value }}
+                                <VnDiscount
+                                    :quantity="row.quantity"
+                                    :price="row.sale.price"
+                                    :discount="row.sale.discount"
+                                    :mana="mana"
+                                    :promise="updateDiscount"
+                                    :data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
+                                    @on-update="onUpdateDiscount"
+                                />
 
-                                <q-popup-edit
+                                <!-- <q-popup-edit
                                     v-model="row.sale.discount"
                                     v-slot="scope"
-                                    :title="manaTitle"
+                                    title="Update discount"
                                     buttons
                                 >
+                                    <q-banner
+                                        class="bg-primary text-center q-mb-md"
+                                        rounded
+                                        dense
+                                    >
+                                        {{ t('Mana') }} {{ toCurrency(mana) }}
+                                    </q-banner>
                                     <q-input
                                         v-model="scope.value"
                                         type="number"
@@ -227,7 +267,8 @@ const totalClaimed = 0;
                                         @keyup.enter="scope.set"
                                         @focus="($event) => $event.target.select()"
                                     />
-                                </q-popup-edit>
+                                    <span>New amount:</span>
+                                </q-popup-edit> -->
                             </q-td>
                         </template>
                         <template #body-cell-actions="{ row, rowIndex }">
@@ -295,5 +336,5 @@ es:
     Amount: Total
     Amount Claimed: Cantidad reclamada
     Delete claimed sale: Eliminar venta reclamada
-    Mana: Maná
+    Discount updated: Descuento actualizado
 </i18n>