salix-front/src/components/EditTableCellValueForm.vue

<script setup>
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';

import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';

import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';

const emit = defineEmits(['onDataSaved']);

const $props = defineProps({
    rows: {
        type: Array,
        default: () => [],
    },
    fieldsOptions: {
        type: Array,
        default: () => [],
    },
    editUrl: {
        type: String,
        default: '',
    },
});

const { t } = useI18n();
const { notify } = useNotify();

const formData = reactive({
    field: null,
    newValue: null,
});

const closeButton = ref(null);
const isLoading = ref(false);

const onDataSaved = () => {
    notify('globals.dataSaved', 'positive');
    emit('onDataSaved');
    closeForm();
};

const submitData = async () => {
    try {
        isLoading.value = true;
        const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
        const payload = {
            field: formData.field,
            newValue: formData.newValue,
            lines: rowsToEdit,
        };

        await axios.post($props.editUrl, payload);
        onDataSaved();
        isLoading.value = false;
    } catch (err) {
        console.error('Error submitting table cell edit');
    }
};

const closeForm = () => {
    if (closeButton.value) closeButton.value.click();
};
</script>

<template>
    <QForm @submit="submitData()" class="all-pointer-events">
        <QCard class="q-pa-lg">
            <span ref="closeButton" class="close-icon" v-close-popup>
                <QIcon name="close" size="sm" />
            </span>
            <h1 class="title">
                {{
                    t('editBuyTitle', {
                        buysAmount: rows.length,
                    })
                }}
            </h1>
            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnSelectFilter
                        :label="t('Field to edit')"
                        :options="fieldsOptions"
                        hide-selected
                        option-label="label"
                        option-value="field"
                        v-model="formData.field"
                    />
                </div>
                <div class="col">
                    <VnInput :label="t('Value')" v-model="formData.newValue" />
                </div>
            </VnRow>
            <div class="q-mt-lg row justify-end">
                <QBtn
                    :label="t('globals.save')"
                    type="submit"
                    color="primary"
                    :disabled="isLoading"
                    :loading="isLoading"
                />
                <QBtn
                    :label="t('globals.cancel')"
                    type="reset"
                    color="primary"
                    flat
                    class="q-ml-sm"
                    :disabled="isLoading"
                    :loading="isLoading"
                    v-close-popup
                />
            </div>
        </QCard>
    </QForm>
</template>

<style lang="scss" scoped>
.title {
    font-size: 17px;
    font-weight: bold;
    line-height: 20px;
}

.close-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
</style>

<i18n>
    en:
        editBuyTitle: Edit {buysAmount} buy(s)
    es:
        editBuyTitle: Editar {buysAmount} compra(s)
        Field to edit: Campo a editar
        Value: Valor
    </i18n>