salix-front/src/components/EditTableCellValueForm.vue

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

import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnRow from 'components/ui/VnRow.vue';
import { QCheckbox } from 'quasar';

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 inputs = {
    input: markRaw(VnInput),
    number: markRaw(VnInput),
    date: markRaw(VnInputDate),
    checkbox: markRaw(QCheckbox),
    select: markRaw(VnSelectFilter),
};

const newValue = ref(null);
const selectedField = ref(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: selectedField.value.field,
            newValue: newValue.value,
            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>
            <span class="title">{{ t('Edit') }}</span>
            <span class="countLines">{{ ` ${rows.length} ` }}</span>
            <span class="title">{{ t('buy(s)') }}</span>
            <VnRow class="row q-gutter-md q-mb-md">
                <VnSelect
                    :label="t('Field to edit')"
                    :options="fieldsOptions"
                    hide-selected
                    option-label="label"
                    v-model="selectedField"
                />
                <component
                    :is="inputs[selectedField?.component || 'input']"
                    v-bind="selectedField?.attrs || {}"
                    v-model="newValue"
                    :label="t('Value')"
                    style="width: 200px"
                />
            </VnRow>
            <div class="q-mt-lg row justify-end">
                <QBtn
                    :label="t('globals.cancel')"
                    type="reset"
                    color="primary"
                    flat
                    :disabled="isLoading"
                    :loading="isLoading"
                    v-close-popup
                />
                <QBtn
                    :label="t('globals.save')"
                    type="submit"
                    color="primary"
                    class="q-ml-sm"
                    :disabled="isLoading"
                    :loading="isLoading"
                />
            </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;
}

.countLines {
    font-size: 24px;
    color: $primary;
    font-weight: bold;
}
</style>

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