From dcbc154caac51780ad3b185704e2d71a2e9e3da2 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 22 Jul 2024 11:17:56 -0300
Subject: [PATCH 1/7] Components creation: AddressDetails, VnForm, VnInput and
 VnSelect

---
 src/components/common/VnForm.vue     | 214 +++++++++++++++++++++++++++
 src/components/common/VnInput.vue    | 124 ++++++++++++++++
 src/components/common/VnSelect.vue   | 188 +++++++++++++++++++++++
 src/i18n/en-US/index.js              |   3 +-
 src/i18n/es-ES/index.js              |   3 +-
 src/pages/Account/AddressDetails.vue | 148 +++++++++++++++++-
 src/router/routes.js                 |   2 +-
 7 files changed, 673 insertions(+), 9 deletions(-)
 create mode 100644 src/components/common/VnForm.vue
 create mode 100644 src/components/common/VnInput.vue
 create mode 100644 src/components/common/VnSelect.vue

diff --git a/src/components/common/VnForm.vue b/src/components/common/VnForm.vue
new file mode 100644
index 00000000..02785dad
--- /dev/null
+++ b/src/components/common/VnForm.vue
@@ -0,0 +1,214 @@
+<script setup>
+import { ref, inject, onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import useNotify from 'src/composables/useNotify.js';
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    table: {
+        type: String,
+        default: ''
+    },
+    schema: {
+        type: String,
+        default: ''
+    },
+    pks: {
+        type: Object,
+        default: () => {} // definidas como key: value, donde key es el nombre de la pk
+    },
+    createModelDefault: {
+        type: Object,
+        default: () => ({
+            field: '',
+            value: ''
+        })
+    },
+    fetchFormDataSql: {
+        type: Object,
+        default: () => ({
+            // Objeto con query y params para obtener los datos iniciales del form
+            query: '',
+            params: {}
+        })
+    },
+    formInitialData: {
+        type: Object,
+        default: () => {} // Objeto con los datos iniciales del form
+    },
+    columnsToIgnoreUpdate: {
+        type: Array,
+        default: () => [] // Array de columnas que no se deben actualizar
+    },
+    autoLoad: {
+        type: Boolean,
+        default: true
+    },
+    mode: {
+        type: String,
+        default: 'update'
+    },
+    defaultActions: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+const jApi = inject('jApi');
+const { notify } = useNotify();
+
+const loading = ref(false);
+const formData = ref({});
+const addressFormRef = ref(null);
+const modelInfo = ref(null);
+// Array de nombre de columnas de la tabla
+const tableColumns = computed(
+    () => modelInfo.value?.columns.map(col => col.name) || []
+);
+// Array de nombre de columnas que fueron actualizadas y no estan en columnsToIgnoreUpdate
+const columnsUpdated = computed(() => {
+    return tableColumns.value.filter(
+        colName =>
+            modelInfo.value?.data[0][colName] !== formData.value[colName] &&
+            !props.columnsToIgnoreUpdate.includes(colName)
+    );
+});
+
+const fetchFormData = async () => {
+    if (!props.fetchFormDataSql.query) return;
+    loading.value = true;
+    const { results } = await jApi.execQuery(
+        props.fetchFormDataSql.query,
+        props.fetchFormDataSql.params
+    );
+
+    modelInfo.value = results[0];
+
+    if (!modelInfo.value.data[0]) {
+        modelInfo.value.data[0] = {};
+        // Si no existen datos iniciales, se inicializan con null, en base a las columnas de la tabla
+        modelInfo.value.columns.forEach(
+            col => (modelInfo.value.data[0][col.name] = null)
+        );
+    }
+
+    formData.value = { ...modelInfo.value.data[0] };
+    loading.value = false;
+    console.log('modelInfo: ', modelInfo.value);
+};
+
+const submit = async () => {
+    try {
+        const sqlQuery = generateSqlQuery(props.table, props.schema, props.pks);
+        await jApi.execQuery(sqlQuery, props.pks);
+        emit('onDataSaved');
+        notify(t('dataSaved'), 'positive');
+    } catch (error) {
+        console.error('Error updating address:', error);
+        notify(t('addressNotUpdated'), 'negative');
+    }
+};
+
+const generateSqlQuery = (table, schema, pks) => {
+    if (props.mode === 'update') {
+        return generateUpdateSqlQuery(table, schema, pks);
+    } else {
+        return generateCreateSqlQuery(table, schema, pks);
+    }
+};
+
+const generateUpdateSqlQuery = (table, schema, pks) => {
+    if (!columnsUpdated.value.length) return '';
+
+    const setClauses = columnsUpdated.value
+        .map(colName => `${colName} = '${formData.value[colName]}'`)
+        .join(', ');
+    const whereClause = Object.keys(props.pks)
+        .map(pk => `${pk} = ${pks[pk]}`)
+        .join(' AND ');
+    return `
+        START TRANSACTION;
+        UPDATE ${schema}.${table} SET ${setClauses} WHERE (${whereClause});
+        SELECT ${columnsUpdated.value.join(', ')} FROM ${schema}.${table} WHERE (${whereClause});
+        COMMIT;
+    `;
+};
+
+const generateCreateSqlQuery = (table, schema) => {
+    if (!columnsUpdated.value.length) return '';
+
+    const columns = [
+        props.createModelDefault.field,
+        ...columnsUpdated.value
+    ].join(', ');
+    const values = [
+        props.createModelDefault.value,
+        ...columnsUpdated.value.map(colName => `'${formData.value[colName]}'`)
+    ].join(', ');
+
+    return `
+        START TRANSACTION;
+        INSERT INTO ${schema}.${table} (${columns}) VALUES (${values});
+        SELECT id, ${columnsUpdated.value.join(', ')} FROM ${schema}.${table} WHERE  ((id = LAST_INSERT_ID()));
+        COMMIT;
+    `;
+};
+
+onMounted(async () => {
+    if (!props.formInitialData && props.autoLoad) {
+        fetchFormData();
+    }
+});
+
+defineExpose({
+    formData,
+    submit
+});
+</script>
+
+<template>
+    <Teleport :to="$actions">
+        <QBtn
+            v-if="defaultActions"
+            :label="t('save')"
+            type="submit"
+            icon="check"
+            rounded
+            no-caps
+            :disabled="!columnsUpdated.length"
+            @click="addressFormRef.submit()"
+        />
+    </Teleport>
+    <QCard class="form-container">
+        <QForm
+            v-if="!loading"
+            ref="addressFormRef"
+            class="column full-width q-gutter-y-xs"
+            @submit="submit()"
+        >
+            <span class="text-h6 text-bold">
+                {{ title }}
+            </span>
+            <slot name="form" :data="formData" />
+        </QForm>
+        <QSpinner v-else color="primary" size="3em" :thickness="2" />
+    </QCard>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+    width: 100%;
+    height: max-content;
+    max-width: 544px;
+    padding: 32px;
+    display: flex;
+    justify-content: center;
+}
+</style>
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
new file mode 100644
index 00000000..62984159
--- /dev/null
+++ b/src/components/common/VnInput.vue
@@ -0,0 +1,124 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits([
+    'update:modelValue',
+    'update:options',
+    'keyup.enter',
+    'remove'
+]);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: null
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false
+    },
+    info: {
+        type: String,
+        default: ''
+    },
+    clearable: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const { t } = useI18n();
+const requiredFieldRule = val => !!val || t('globals.fieldRequired');
+const vnInputRef = ref(null);
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    }
+});
+const hover = ref(false);
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? { dense: true, outlined: true, rounded: true }
+        : {};
+});
+
+const focus = () => {
+    vnInputRef.value.focus();
+};
+
+defineExpose({
+    focus
+});
+
+const inputRules = [
+    val => {
+        const { min } = vnInputRef.value.$attrs;
+        if (min >= 0) {
+            if (Math.floor(val) < min) return t('inputMin', { value: min });
+        }
+    }
+];
+</script>
+
+<template>
+    <div
+        :rules="$attrs.required ? [requiredFieldRule] : null"
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
+    >
+        <QInput
+            ref="vnInputRef"
+            v-model="value"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            :type="$attrs.type"
+            :class="{ required: $attrs.required }"
+            :clearable="false"
+            :rules="inputRules"
+            :lazy-rules="true"
+            hide-bottom-space
+            @keyup.enter="emit('keyup.enter')"
+        >
+            <template v-if="$slots.prepend" #prepend>
+                <slot name="prepend" />
+            </template>
+            <template #append>
+                <slot v-if="$slots.append && !$attrs.disabled" name="append" />
+                <QIcon
+                    v-if="
+                        hover && value && !$attrs.disabled && $props.clearable
+                    "
+                    name="close"
+                    size="xs"
+                    @click="
+                        () => {
+                            value = null;
+                            emit('remove');
+                        }
+                    "
+                />
+                <QIcon v-if="info" name="info">
+                    <QTooltip max-width="350px">
+                        {{ info }}
+                    </QTooltip>
+                </QIcon>
+            </template>
+        </QInput>
+    </div>
+</template>
+
+<i18n lang="yaml">
+en-US:
+    inputMin: Must be more than {value}
+es-ES:
+    inputMin: Must be more than {value}
+ca-ES:
+    inputMin: Ha de ser més gran que {value}
+fr-FR:
+    inputMin: Doit être supérieur à {value}
+pt-PT:
+    inputMin: Deve ser maior que {value}
+</i18n>
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
new file mode 100644
index 00000000..24b82017
--- /dev/null
+++ b/src/components/common/VnSelect.vue
@@ -0,0 +1,188 @@
+<script setup>
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+const emit = defineEmits(['update:modelValue', 'update:options']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null
+    },
+    options: {
+        type: Array,
+        default: () => []
+    },
+    optionLabel: {
+        type: [String],
+        default: 'name'
+    },
+    optionValue: {
+        type: String,
+        default: 'id'
+    },
+    optionFilter: {
+        type: String,
+        default: null
+    },
+    dataQuery: {
+        type: String,
+        default: ''
+    },
+    filterOptions: {
+        type: [Array],
+        default: () => []
+    },
+    isClearable: {
+        type: Boolean,
+        default: true
+    },
+    defaultFilter: {
+        type: Boolean,
+        default: true
+    },
+    fields: {
+        type: Array,
+        default: null
+    },
+    where: {
+        type: Object,
+        default: null
+    },
+    sortBy: {
+        type: String,
+        default: null
+    },
+    limit: {
+        type: [Number, String],
+        default: '30'
+    },
+    focusOnMount: {
+        type: Boolean,
+        default: false
+    },
+    useLike: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const { t } = useI18n();
+const requiredFieldRule = val => val ?? t('globals.fieldRequired');
+
+const { optionLabel, optionValue, options } = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = ref([]);
+const vnSelectRef = ref();
+const lastVal = ref();
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    }
+});
+
+watch(options, newValue => {
+    setOptions(newValue);
+});
+
+onMounted(() => {
+    setOptions(options.value);
+    if ($props.focusOnMount) {
+        setTimeout(() => vnSelectRef.value.showPopup(), 300);
+    }
+});
+
+function setOptions(data) {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+}
+
+function filter(val, options) {
+    const search = val.toString().toLowerCase();
+
+    if (!search) return options;
+
+    return options.filter(row => {
+        if ($props.filterOptions.length) {
+            return $props.filterOptions.some(prop => {
+                const propValue = String(row[prop]).toLowerCase();
+                return propValue.includes(search);
+            });
+        }
+
+        const id = row.id;
+        const optionLabel = String(row[$props.optionLabel]).toLowerCase();
+
+        return id === search || optionLabel.includes(search);
+    });
+}
+
+async function filterHandler(val, update) {
+    if (!val && lastVal.value === val) {
+        lastVal.value = val;
+        return update();
+    }
+    lastVal.value = val;
+
+    if (!$props.defaultFilter) return update();
+    const newOptions = filter(val, myOptionsOriginal.value);
+    update(
+        () => {
+            myOptions.value = newOptions;
+        },
+        ref => {
+            if (val !== '' && ref.options.length > 0) {
+                ref.setOptionIndex(-1);
+                ref.moveOptionSelection(1, true);
+            }
+        }
+    );
+}
+</script>
+
+<template>
+    <QSelect
+        v-model="value"
+        :options="myOptions"
+        :option-label="optionLabel"
+        :option-value="optionValue"
+        v-bind="$attrs"
+        emit-value
+        map-options
+        use-input
+        @filter="filterHandler"
+        hide-selected
+        fill-input
+        ref="vnSelectRef"
+        lazy-rules
+        :class="{ required: $attrs.required }"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
+        virtual-scroll-slice-size="options.length"
+    >
+        <template v-if="isClearable" #append>
+            <QIcon
+                v-show="value"
+                name="close"
+                @click.stop="value = null"
+                class="cursor-pointer"
+                size="xs"
+            />
+        </template>
+        <template
+            v-for="(_, slotName) in $slots"
+            #[slotName]="slotData"
+            :key="slotName"
+        >
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+        </template>
+    </QSelect>
+</template>
+
+<style scoped lang="scss">
+.q-field--outlined {
+    max-width: 100%;
+}
+</style>
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 723cfc3b..ebd6fc58 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -74,5 +74,6 @@ export default {
     user: 'User',
     addresses: 'Addresses',
     addressEdit: 'Edit address',
-    dataSaved: 'Data saved'
+    dataSaved: 'Data saved',
+    save: 'Save'
 };
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index 0ecd8706..bae2d4b5 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -74,5 +74,6 @@ export default {
     user: 'Usuario',
     addresses: 'Direcciones',
     addressEdit: 'Editar dirección',
-    dataSaved: 'Datos guardados'
+    dataSaved: 'Datos guardados',
+    save: 'Guardar'
 };
diff --git a/src/pages/Account/AddressDetails.vue b/src/pages/Account/AddressDetails.vue
index 6a68eb78..067a47a5 100644
--- a/src/pages/Account/AddressDetails.vue
+++ b/src/pages/Account/AddressDetails.vue
@@ -1,33 +1,169 @@
 <script setup>
+import { ref, inject, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
 
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnForm from 'src/components/common/VnForm.vue';
+
+const router = useRouter();
+const route = useRoute();
 const { t } = useI18n();
+const jApi = inject('jApi');
+
+const vnFormRef = ref(null);
+const countriesOptions = ref([]);
+const provincesOptions = ref([]);
+const pks = { id: route.params.id };
+const formMode = route.params.id === '0' ? 'create' : 'update';
+const fetchAddressDataSql = {
+    query: `
+        SELECT a.id, a.street, a.nickname, a.city, a.postalCode, a.provinceFk, p.countryFk
+        FROM myAddress a
+        LEFT JOIN vn.province p ON p.id = a.provinceFk
+        WHERE a.id = #address
+    `,
+    params: { address: route.params.id }
+};
+
+watch(
+    () => vnFormRef?.value?.formData?.countryFk,
+    async val => await getProvinces(val)
+);
+
+const goBack = () => router.push({ name: 'AddressesList' });
+
+const getCountries = async () => {
+    countriesOptions.value = await jApi.query(
+        `SELECT id, name FROM vn.country
+        ORDER BY name`
+    );
+};
+
+const getProvinces = async countryFk => {
+    if (!countryFk) return;
+    provincesOptions.value = await jApi.query(
+        `SELECT id, name FROM vn.province
+        WHERE countryFk = #id
+        ORDER BY name`,
+        { id: countryFk }
+    );
+};
+
+onMounted(() => getCountries());
 </script>
 
 <template>
-    <Teleport :to="$actions">
-        <QBtn icon="close" :label="t('back')" rounded no-caps />
-        <QBtn icon="check" :label="t('accept')" rounded no-caps />
-    </Teleport>
-    <QPage>//TODO: VISTA A DESARROLLAR!</QPage>
+    <QPage class="q-pa-md flex justify-center">
+        <Teleport :to="$actions">
+            <QBtn
+                :label="t('back')"
+                icon="close"
+                rounded
+                no-caps
+                @click="goBack()"
+            />
+        </Teleport>
+        <VnForm
+            ref="vnFormRef"
+            :fetchFormDataSql="fetchAddressDataSql"
+            :columnsToIgnoreUpdate="['countryFk']"
+            :createModelDefault="{
+                field: 'clientFk',
+                value: 'account.myUser_getId()'
+            }"
+            :pks="pks"
+            :mode="formMode"
+            :title="t('addEditAddress')"
+            table="myAddress"
+            schema="hedera"
+            @onDataSaved="goBack()"
+        >
+            <template #form="{ data }">
+                <VnInput v-model="data.nickname" :label="t('name')" />
+                <VnInput v-model="data.street" :label="t('address')" />
+                <VnInput v-model="data.city" :label="t('city')" />
+                <VnInput v-model="data.postalCode" :label="t('postalCode')" />
+                <VnSelect
+                    v-model="data.countryFk"
+                    :label="t('country')"
+                    :options="countriesOptions"
+                    @update:modelValue="data.provinceFk = null"
+                />
+                <VnSelect
+                    v-model="data.provinceFk"
+                    :label="t('province')"
+                    :options="provincesOptions"
+                />
+            </template>
+        </VnForm>
+    </QPage>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.form-container {
+    width: 100%;
+    height: max-content;
+    max-width: 544px;
+    padding: 32px;
+}
+</style>
 
 <i18n lang="yaml">
 en-US:
     back: Back
     accept: Accept
+    addEditAddress: Add or edit address
+    name: Consignee
+    address: Address
+    city: City
+    postalCode: Zip code
+    country: Country
+    province: Province
+    addressChangedSuccessfully: Address changed successfully
 es-ES:
     back: Volver
     accept: Aceptar
+    addEditAddress: Añadir o modificar dirección
+    name: Consignatario
+    address: Morada
+    city: Ciudad
+    postalCode: Código postal
+    country: País
+    province: Distrito
+    addressChangedSuccessfully: Dirección modificada correctamente
 ca-ES:
     back: Tornar
     accept: Acceptar
+    addEditAddress: Afegir o modificar adreça
+    name: Consignatari
+    address: Direcció
+    city: Ciutat
+    postalCode: Codi postal
+    country: País
+    province: Província
+    addressChangedSuccessfully: Adreça modificada correctament
 fr-FR:
     back: Retour
     accept: Accepter
+    addEditAddress: Ajouter ou modifier l'adresse
+    name: Destinataire
+    address: Numéro Rue
+    city: Ville
+    postalCode: Code postal
+    country: Pays
+    province: Province
+    addressChangedSuccessfully: Adresse modifié avec succès
 pt-PT:
     back: Voltar
     accept: Aceitar
+    addEditAddress: Adicionar ou modificar morada
+    name: Consignatario
+    address: Morada
+    city: Concelho
+    postalCode: Código postal
+    country: País
+    province: Distrito
+    addressChangedSuccessfully: Morada modificada corretamente
 </i18n>
diff --git a/src/router/routes.js b/src/router/routes.js
index 1ab82dcc..94592ef0 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -60,7 +60,7 @@ const routes = [
                 component: () => import('pages/Account/AccountConf.vue')
             },
             {
-                name: 'Addresses',
+                name: 'AddressesList',
                 path: '/account/address-list',
                 component: () => import('pages/Account/AddressList.vue')
             },

From 07c5f64265e4f391c878fddf4adf2f50dc7acdc7 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 22 Jul 2024 13:51:54 -0300
Subject: [PATCH 2/7] improvements

---
 src/components/common/VnForm.vue     | 87 ++++++++++++----------------
 src/js/db/sqlService.js              | 42 ++++++++++++++
 src/pages/Account/AddressDetails.vue |  4 +-
 3 files changed, 80 insertions(+), 53 deletions(-)
 create mode 100644 src/js/db/sqlService.js

diff --git a/src/components/common/VnForm.vue b/src/components/common/VnForm.vue
index 02785dad..4e5447ba 100644
--- a/src/components/common/VnForm.vue
+++ b/src/components/common/VnForm.vue
@@ -3,6 +3,10 @@ import { ref, inject, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import useNotify from 'src/composables/useNotify.js';
+import {
+    generateUpdateSqlQuery,
+    generateInsertSqlQuery
+} from 'src/js/db/sqlService.js';
 
 const props = defineProps({
     title: {
@@ -17,9 +21,11 @@ const props = defineProps({
         type: String,
         default: ''
     },
+    // Objeto que define las pks de la tabla. Usado para generar las queries sql correspondientes.
+    // Debe ser definido como un objeto de pares key-value, donde la clave es el nombre de la columna de la pk.
     pks: {
         type: Object,
-        default: () => {} // definidas como key: value, donde key es el nombre de la pk
+        default: () => {}
     },
     createModelDefault: {
         type: Object,
@@ -28,29 +34,33 @@ const props = defineProps({
             value: ''
         })
     },
+    // Objeto que contiene la consulta SQL y los parámetros necesarios para obtener los datos iniciales del formulario.
+    // `query` debe ser una cadena de texto que representa la consulta SQL.
+    // `params` es un objeto que mapea los parámetros de la consulta a sus valores.
     fetchFormDataSql: {
         type: Object,
         default: () => ({
-            // Objeto con query y params para obtener los datos iniciales del form
             query: '',
             params: {}
         })
     },
+    // Objeto con los datos iniciales del form, si este objeto es definido, no se ejecuta la query fetchFormDataSql
     formInitialData: {
         type: Object,
-        default: () => {} // Objeto con los datos iniciales del form
+        default: () => {}
     },
+    // Array de columnas que no se deben actualizar
     columnsToIgnoreUpdate: {
         type: Array,
-        default: () => [] // Array de columnas que no se deben actualizar
+        default: () => []
     },
     autoLoad: {
         type: Boolean,
         default: true
     },
-    mode: {
-        type: String,
-        default: 'update'
+    isEditMode: {
+        type: Boolean,
+        default: true
     },
     defaultActions: {
         type: Boolean,
@@ -73,7 +83,7 @@ const tableColumns = computed(
     () => modelInfo.value?.columns.map(col => col.name) || []
 );
 // Array de nombre de columnas que fueron actualizadas y no estan en columnsToIgnoreUpdate
-const columnsUpdated = computed(() => {
+const updatedColumns = computed(() => {
     return tableColumns.value.filter(
         colName =>
             modelInfo.value?.data[0][colName] !== formData.value[colName] &&
@@ -106,7 +116,7 @@ const fetchFormData = async () => {
 
 const submit = async () => {
     try {
-        const sqlQuery = generateSqlQuery(props.table, props.schema, props.pks);
+        const sqlQuery = generateSqlQuery();
         await jApi.execQuery(sqlQuery, props.pks);
         emit('onDataSaved');
         notify(t('dataSaved'), 'positive');
@@ -116,51 +126,26 @@ const submit = async () => {
     }
 };
 
-const generateSqlQuery = (table, schema, pks) => {
-    if (props.mode === 'update') {
-        return generateUpdateSqlQuery(table, schema, pks);
+const generateSqlQuery = () => {
+    if (props.isEditMode) {
+        return generateUpdateSqlQuery(
+            props.schema,
+            props.table,
+            props.pks,
+            updatedColumns.value,
+            formData.value
+        );
     } else {
-        return generateCreateSqlQuery(table, schema, pks);
+        return generateInsertSqlQuery(
+            props.schema,
+            props.table,
+            formData.value,
+            updatedColumns.value,
+            props.createModelDefault
+        );
     }
 };
 
-const generateUpdateSqlQuery = (table, schema, pks) => {
-    if (!columnsUpdated.value.length) return '';
-
-    const setClauses = columnsUpdated.value
-        .map(colName => `${colName} = '${formData.value[colName]}'`)
-        .join(', ');
-    const whereClause = Object.keys(props.pks)
-        .map(pk => `${pk} = ${pks[pk]}`)
-        .join(' AND ');
-    return `
-        START TRANSACTION;
-        UPDATE ${schema}.${table} SET ${setClauses} WHERE (${whereClause});
-        SELECT ${columnsUpdated.value.join(', ')} FROM ${schema}.${table} WHERE (${whereClause});
-        COMMIT;
-    `;
-};
-
-const generateCreateSqlQuery = (table, schema) => {
-    if (!columnsUpdated.value.length) return '';
-
-    const columns = [
-        props.createModelDefault.field,
-        ...columnsUpdated.value
-    ].join(', ');
-    const values = [
-        props.createModelDefault.value,
-        ...columnsUpdated.value.map(colName => `'${formData.value[colName]}'`)
-    ].join(', ');
-
-    return `
-        START TRANSACTION;
-        INSERT INTO ${schema}.${table} (${columns}) VALUES (${values});
-        SELECT id, ${columnsUpdated.value.join(', ')} FROM ${schema}.${table} WHERE  ((id = LAST_INSERT_ID()));
-        COMMIT;
-    `;
-};
-
 onMounted(async () => {
     if (!props.formInitialData && props.autoLoad) {
         fetchFormData();
@@ -182,7 +167,7 @@ defineExpose({
             icon="check"
             rounded
             no-caps
-            :disabled="!columnsUpdated.length"
+            :disabled="!updatedColumns.length"
             @click="addressFormRef.submit()"
         />
     </Teleport>
diff --git a/src/js/db/sqlService.js b/src/js/db/sqlService.js
new file mode 100644
index 00000000..375e2f74
--- /dev/null
+++ b/src/js/db/sqlService.js
@@ -0,0 +1,42 @@
+export const generateUpdateSqlQuery = (
+    schema,
+    table,
+    pks,
+    columnsUpdated,
+    formData
+) => {
+    const setClauses = columnsUpdated
+        .map(colName => `${colName} = '${formData[colName]}'`)
+        .join(', ');
+    const whereClause = Object.keys(pks)
+        .map(pk => `${pk} = ${pks[pk]}`)
+        .join(' AND ');
+
+    return `
+        START TRANSACTION;
+        UPDATE ${schema}.${table} SET ${setClauses} WHERE (${whereClause});
+        SELECT ${columnsUpdated.join(', ')} FROM ${schema}.${table} WHERE (${whereClause});
+        COMMIT;
+    `;
+};
+
+export const generateInsertSqlQuery = (
+    schema,
+    table,
+    formData,
+    columnsUpdated,
+    createModelDefault
+) => {
+    const columns = [createModelDefault.field, ...columnsUpdated].join(', ');
+    const values = [
+        createModelDefault.value,
+        ...columnsUpdated.map(colName => `'${formData[colName]}'`)
+    ].join(', ');
+
+    return `
+        START TRANSACTION;
+        INSERT INTO ${schema}.${table} (${columns}) VALUES (${values});
+        SELECT id, ${columnsUpdated.join(', ')} FROM ${schema}.${table} WHERE (id = LAST_INSERT_ID());
+        COMMIT;
+    `;
+};
diff --git a/src/pages/Account/AddressDetails.vue b/src/pages/Account/AddressDetails.vue
index 067a47a5..c41b47e9 100644
--- a/src/pages/Account/AddressDetails.vue
+++ b/src/pages/Account/AddressDetails.vue
@@ -16,7 +16,7 @@ const vnFormRef = ref(null);
 const countriesOptions = ref([]);
 const provincesOptions = ref([]);
 const pks = { id: route.params.id };
-const formMode = route.params.id === '0' ? 'create' : 'update';
+const isEditMode = route.params.id !== '0';
 const fetchAddressDataSql = {
     query: `
         SELECT a.id, a.street, a.nickname, a.city, a.postalCode, a.provinceFk, p.countryFk
@@ -74,7 +74,7 @@ onMounted(() => getCountries());
                 value: 'account.myUser_getId()'
             }"
             :pks="pks"
-            :mode="formMode"
+            :isEditMode="isEditMode"
             :title="t('addEditAddress')"
             table="myAddress"
             schema="hedera"

From 2cbbaf619c6127b5291e71f291d06b316b4442e4 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 23 Jul 2024 11:02:39 -0300
Subject: [PATCH 3/7] small change

---
 src/components/common/VnForm.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/common/VnForm.vue b/src/components/common/VnForm.vue
index 4e5447ba..e4ff648c 100644
--- a/src/components/common/VnForm.vue
+++ b/src/components/common/VnForm.vue
@@ -111,7 +111,6 @@ const fetchFormData = async () => {
 
     formData.value = { ...modelInfo.value.data[0] };
     loading.value = false;
-    console.log('modelInfo: ', modelInfo.value);
 };
 
 const submit = async () => {

From 61062c1418d353371b54b3f43f0bc6bcd38e3d41 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 23 Jul 2024 11:26:12 -0300
Subject: [PATCH 4/7] Add app.provide api

---
 src/boot/axios.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/boot/axios.js b/src/boot/axios.js
index b5758897..1f384ff3 100644
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@@ -38,6 +38,7 @@ export default boot(({ app }) => {
 
     app.config.globalProperties.$jApi = jApi;
     app.provide('jApi', jApi);
+    app.provide('api', api);
 });
 
 export { api, jApi };

From 83e3e034a82fe90ace2b3f4b6432a1627fd28fc0 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 23 Jul 2024 16:37:24 -0300
Subject: [PATCH 5/7] Show Addresses list actions always

---
 src/pages/Account/AddressList.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 5d39dcda..a5ad2b14 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -128,7 +128,7 @@ onMounted(async () => {
                         </div>
                     </div>
                 </QItemSection>
-                <QItemSection class="actions-wrapper invisible" side>
+                <QItemSection side>
                     <QBtn
                         icon="delete"
                         flat
@@ -153,14 +153,6 @@ onMounted(async () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.address-item:hover {
-    .actions-wrapper {
-        visibility: visible !important;
-    }
-}
-</style>
-
 <i18n lang="yaml">
 en-US:
     addAddress: Add address

From 160552ff2faf3a7efe4166013c798f20bf7bd2d8 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 23 Jul 2024 22:37:22 +0200
Subject: [PATCH 6/7] fix: hover AddressListCardActions

---
 src/pages/Account/AddressList.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 5d39dcda..093c90b7 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -16,8 +16,10 @@ const addresses = ref([]);
 const defaultAddress = ref(null);
 const clientId = ref(null);
 
-const goToAddressDetails = (id = 0) =>
+const goToAddressDetails = (id = 0) => {
+    console.log('asd');
     router.push({ name: 'AddressDetails', params: { id } });
+};
 
 const getDefaultAddress = async () => {
     try {
@@ -128,7 +130,7 @@ onMounted(async () => {
                         </div>
                     </div>
                 </QItemSection>
-                <QItemSection class="actions-wrapper invisible" side>
+                <QItemSection class="actions-wrapper" side>
                     <QBtn
                         icon="delete"
                         flat
@@ -154,9 +156,14 @@ onMounted(async () => {
 </template>
 
 <style lang="scss" scoped>
-.address-item:hover {
+.address-item {
     .actions-wrapper {
-        visibility: visible !important;
+        visibility: hidden;
+    }
+    &:hover {
+        .actions-wrapper {
+            visibility: visible;
+        }
     }
 }
 </style>

From 24a9c130d1a86e9caa441f2e6bd494cafab00be2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 23 Jul 2024 23:07:40 +0200
Subject: [PATCH 7/7] On AddressDetails: Merge branch 'feature/AddressDetails'
 of https://gitea.verdnatura.es/wbuezas/hedera-web-mindshore into
 feature/AddressDetails

---
 src/boot/i18n.js                             |  3 +-
 src/i18n/es-ES/index.js                      |  9 +++
 src/pages/Account/AddressList.vue            |  4 +-
 src/pages/Login/{Login.vue => LoginView.vue} | 82 ++++++++++----------
 src/router/routes.js                         |  2 +-
 5 files changed, 53 insertions(+), 47 deletions(-)
 rename src/pages/Login/{Login.vue => LoginView.vue} (77%)

diff --git a/src/boot/i18n.js b/src/boot/i18n.js
index 4072b024..ebf58b3c 100644
--- a/src/boot/i18n.js
+++ b/src/boot/i18n.js
@@ -4,7 +4,7 @@ import messages from 'src/i18n';
 
 const i18n = createI18n({
     locale: navigator.language || navigator.userLanguage,
-    fallbackLocale: 'en',
+    fallbackLocale: 'en-US',
     globalInjection: true,
     missingWarn: false,
     fallbackWarn: false,
@@ -17,7 +17,6 @@ const i18n = createI18n({
 export default boot(({ app }) => {
     // Set i18n instance on app
     app.use(i18n);
-    window.i18n = i18n.global;
 });
 
 export { i18n };
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index bae2d4b5..a3e09121 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -72,6 +72,15 @@ export default {
     items: 'Artículos',
     config: 'Configuración',
     user: 'Usuario',
+    password: 'Contraseña',
+    remindMe: 'Recuérdame',
+    logInAsGuest: 'Entrar como invitado',
+    logIn: 'Iniciar sesión',
+    loginMail: 'info@verdnatura.es',
+    loginPhone: '+34 963 242 100',
+    haveForgottenPassword: '¿Has olvidado tu contraseña?',
+    notACustomerYet: '¿Todavía no eres cliente?',
+    signUp: 'Registrarme',
     addresses: 'Direcciones',
     addressEdit: 'Editar dirección',
     dataSaved: 'Datos guardados',
diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 093c90b7..3c56b2aa 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -16,10 +16,8 @@ const addresses = ref([]);
 const defaultAddress = ref(null);
 const clientId = ref(null);
 
-const goToAddressDetails = (id = 0) => {
-    console.log('asd');
+const goToAddressDetails = (id = 0) =>
     router.push({ name: 'AddressDetails', params: { id } });
-};
 
 const getDefaultAddress = async () => {
     try {
diff --git a/src/pages/Login/Login.vue b/src/pages/Login/LoginView.vue
similarity index 77%
rename from src/pages/Login/Login.vue
rename to src/pages/Login/LoginView.vue
index 0582489b..13fd981e 100644
--- a/src/pages/Login/Login.vue
+++ b/src/pages/Login/LoginView.vue
@@ -1,3 +1,38 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { userStore } from 'stores/user';
+import { onMounted, ref } from 'vue';
+import useNotify from 'src/composables/useNotify.js';
+import { useRouter, useRoute } from 'vue-router';
+const { notify } = useNotify();
+
+const t = useI18n();
+const user = userStore();
+const route = useRoute();
+const router = useRouter();
+const email = ref(null);
+const password = ref(null);
+const remember = ref(false);
+const showPwd = ref(false);
+
+onMounted(() => {
+    if (route.query.emailConfirmed !== undefined) {
+        notify({
+            message: t('emailConfirmedSuccessfully'),
+            type: 'positive'
+        });
+    }
+    if (route.params.email) {
+        email.value = route.params.email;
+        password.value.focus();
+    }
+});
+async function onLogin() {
+    await user.login(email.value, password.value, remember.value);
+    router.push('/');
+}
+</script>
+
 <template>
     <div class="main">
         <div class="header">
@@ -10,9 +45,8 @@
                 <QInput v-model="email" :label="$t('user')" autofocus />
                 <QInput
                     v-model="password"
-                    ref="password"
                     :label="$t('password')"
-                    :type="showPwd ? 'password' : 'text'"
+                    :type="!showPwd ? 'password' : 'text'"
                 >
                     <template v-slot:append>
                         <QIcon
@@ -69,7 +103,11 @@
                 </a>
             </p>
             <p class="contact">
-                {{ $t('loginPhone') }} · {{ $t('loginMail') }}
+                <a :href="`tel:${$t('loginPhone')}`">
+                    {{ $t('loginPhone') }}
+                </a>
+                ·
+                <a :href="`mailto:${$t('loginMail')}`">{{ $t('loginMail') }}</a>
             </p>
         </div>
     </div>
@@ -121,44 +159,6 @@ a {
 }
 </style>
 
-<script>
-import { userStore } from 'stores/user';
-
-export default {
-    name: 'VnLogin',
-
-    data() {
-        return {
-            user: userStore(),
-            email: '',
-            password: '',
-            remember: false,
-            showPwd: true
-        };
-    },
-
-    mounted() {
-        if (this.$route.query.emailConfirmed !== undefined) {
-            this.$q.notify({
-                message: this.$t('emailConfirmedSuccessfully'),
-                type: 'positive'
-            });
-        }
-        if (this.$route.params.email) {
-            this.email = this.$route.params.email;
-            this.$refs.password.focus();
-        }
-    },
-
-    methods: {
-        async onLogin() {
-            await this.user.login(this.email, this.password, this.remember);
-            this.$router.push('/');
-        }
-    }
-};
-</script>
-
 <i18n lang="yaml">
 en-US:
     user: User
diff --git a/src/router/routes.js b/src/router/routes.js
index 94592ef0..809027d6 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -6,7 +6,7 @@ const routes = [
             {
                 name: 'login',
                 path: '/login/:email?',
-                component: () => import('pages/Login/Login.vue')
+                component: () => import('pages/Login/LoginView.vue')
             },
             {
                 name: 'rememberPassword',