WIP

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 };

src/components/common/VnForm.vue

@@ -0,0 +1,207 @@
+<script setup>
+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: {
+        type: String,
+        default: ''
+    },
+    table: {
+        type: String,
+        default: ''
+    },
+    schema: {
+        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: () => {}
+    },
+    createModelDefault: {
+        type: Object,
+        default: () => ({
+            field: '',
+            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: () => ({
+            query: '',
+            params: {}
+        })
+    },
+    // Objeto con los datos iniciales del form, si este objeto es definido, no se ejecuta la query fetchFormDataSql
+    formInitialData: {
+        type: Object,
+        default: () => {}
+    },
+    // Array de columnas que no se deben actualizar
+    columnsToIgnoreUpdate: {
+        type: Array,
+        default: () => []
+    },
+    autoLoad: {
+        type: Boolean,
+        default: true
+    },
+    isEditMode: {
+        type: Boolean,
+        default: true
+    },
+    defaultActions: {
+        type: Boolean,
+        default: true
+    },
+    saveFn: {
+        type: Function,
+        default: () => {}
+    }
+});
+
+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 updatedColumns = 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;
+};
+
+const submit = async () => {
+    try {
+        if (props.saveFn) {
+            await props.saveFn();
+        } else {
+            const sqlQuery = generateSqlQuery();
+            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 = () => {
+    if (props.isEditMode) {
+        return generateUpdateSqlQuery(
+            props.schema,
+            props.table,
+            props.pks,
+            updatedColumns.value,
+            formData.value
+        );
+    } else {
+        return generateInsertSqlQuery(
+            props.schema,
+            props.table,
+            formData.value,
+            updatedColumns.value,
+            props.createModelDefault
+        );
+    }
+};
+
+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="!updatedColumns.length"
+            @click="addressFormRef.submit()"
+        />
+    </Teleport>
+    <QCard class="form-container" v-bind="$attrs">
+        <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>

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>

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>

src/components/ui/ChangePasswordForm.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref, inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnInput from 'src/components/common/VnInput.vue';
+import VnForm from 'src/components/common/VnForm.vue';
+
+import { userStore as useUserStore } from 'stores/user';
+
+const { t } = useI18n();
+const api = inject('api');
+const vnFormRef = ref(null);
+const userStore = useUserStore();
+
+const repeatPassword = ref('');
+
+const formData = ref({
+    userId: userStore.id,
+    oldPassword: '',
+    newPassword: ''
+});
+
+const changePassword = async () => {
+    try {
+        // TODO: Add validation
+        await api.patch('Accounts/change-password', formData.value);
+    } catch (error) {
+        console.error(error);
+    }
+};
+</script>
+<template>
+    <VnForm
+        ref="vnFormRef"
+        :title="t('changePassword')"
+        :formInitialData="formData"
+        :defaultActions="false"
+        style="max-width: 300px"
+    >
+        <template #form>
+            <VnInput
+                v-model="formData.oldPassword"
+                :label="t('oldPassword')"
+                type="password"
+            />
+            <VnInput
+                v-model="formData.newPassword"
+                :label="t('newPassword')"
+                type="password"
+            />
+            <VnInput
+                v-model="repeatPassword"
+                :label="t('repeatPassword')"
+                type="password"
+            />
+            <QBtn @click="changePassword" label="saveeeee" />
+        </template>
+    </VnForm>
+</template>
+
+<i18n lang="yaml">
+en-US:
+    changePassword: Change password
+    newPassword: New password
+    oldPassword: Old password
+    repeatPassword: Repeat password
+es-ES:
+    changePassword: Cambiar contraseña
+    newPassword: Nueva contraseña
+    oldPassword: Contraseña antigua
+    repeatPassword: Repetir contraseña
+ca-ES:
+    changePassword: Canviar contrasenya
+    newPassword: Nova contrasenya
+    oldPassword: Contrasenya antiga
+    repeatPassword: Repetir contrasenya
+fr-FR:
+    changePassword: Changer le mot de passe
+    newPassword: Nouveau mot de passe
+    oldPassword: Ancien mot de passe
+    repeatPassword: Répéter le mot de passe
+pt-PT:
+    changePassword: Alterar palavra-passe
+    newPassword: Nova palavra-passe
+    oldPassword: Palavra-passe antiga
+    repeatPassword: Repetir palavra-passe
+</i18n>

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;
+    `;
+};

src/pages/Account/AccountConf.vue

@@ -1,9 +0,0 @@
-<script setup></script>
-
-<template>
-    <QPage> // TODO: VISTA A DESARROLLAR! </QPage>
-</template>
-
-<style lang="scss" scoped></style>
-
-<i18n lang="yaml"></i18n>

src/pages/Account/AccountConfig.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { ref, inject, onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnForm from 'src/components/common/VnForm.vue';
+import ChangePasswordForm from 'src/components/ui/ChangePasswordForm.vue';
+
+import { userStore as useUserStore } from 'stores/user';
+
+const userStore = useUserStore();
+const { t } = useI18n();
+const jApi = inject('jApi');
+
+const vnFormRef = ref(null);
+const changePasswordFormDialog = ref(null);
+const showChangePasswordForm = ref(false);
+const langOptions = ref([]);
+const pks = computed(() => ({ id: userStore.id }));
+const fetchConfigDataSql = {
+    query: `
+        SELECT u.id, u.name, u.email, u.nickname,
+        u.lang, c.isToBeMailed, c.id clientFk
+        FROM account.myUser u
+        LEFT JOIN myClient c
+        ON u.id = c.id`,
+    params: {}
+};
+
+const fetchLanguagesSql = async () => {
+    try {
+        const data = await jApi.query(
+            'SELECT code, name FROM language WHERE isActive'
+        );
+        langOptions.value = data;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(() => fetchLanguagesSql());
+</script>
+
+<template>
+    <QPage>
+        <QPage class="q-pa-md flex justify-center">
+            <Teleport :to="$actions">
+                <QBtn
+                    :label="t('addresses')"
+                    icon="location_on"
+                    rounded
+                    no-caps
+                    :to="{ name: 'AddressesList' }"
+                />
+                <QBtn
+                    :label="t('changePassword')"
+                    icon="lock_reset"
+                    rounded
+                    no-caps
+                    @click="showChangePasswordForm = true"
+                />
+            </Teleport>
+            <VnForm
+                ref="vnFormRef"
+                :title="t('personalInformation')"
+                :fetchFormDataSql="fetchConfigDataSql"
+                :pks="pks"
+                table="myUser"
+                schema="account"
+                :defaultActions="false"
+            >
+                <template #form="{ data }">
+                    <VnInput
+                        v-model="data.name"
+                        :label="t('name')"
+                        disable
+                        :clearable="false"
+                    />
+                    <VnInput v-model="data.email" :label="t('email')" />
+                    <VnInput v-model="data.nickname" :label="t('nickname')" />
+                    <VnSelect
+                        v-model="data.lang"
+                        :label="t('lang')"
+                        option-label="name"
+                        option-value="code"
+                        :options="langOptions"
+                    />
+                </template>
+            </VnForm>
+        </QPage>
+        <QDialog
+            ref="changePasswordFormDialog"
+            v-model="showChangePasswordForm"
+        >
+            <ChangePasswordForm />
+        </QDialog>
+    </QPage>
+</template>
+
+<style lang="scss" scoped></style>
+
+<i18n lang="yaml">
+en-US:
+    personalInformation: Personal Information
+    name: Name
+    email: Email
+    nickname: Display name
+    lang: Language
+    receiveInvoicesByMail: Receive invoices by mail
+    addresses: Addresses
+    changePassword: Change password
+es-ES:
+    personalInformation: Datos personales
+    name: Nombre
+    email: Correo electrónico
+    nickname: Nombre a mostrar
+    lang: Idioma
+    receiveInvoicesByMail: Recibir facturas por correo
+    addresses: Direcciones
+    changePassword: Cambiar contraseña
+ca-ES:
+    personalInformation: Dades personals
+    name: Nom
+    email: Correu electrònic
+    nickname: Nom a mostrar
+    lang: Idioma
+    receiveInvoicesByMail: Rebre factures per correu
+    addresses: Adreces
+    changePassword: Canviar contrasenya
+fr-FR:
+    personalInformation: Informations personnelles
+    name: Nom
+    email: E-mail
+    nickname: Nom à afficher
+    lang: Langue
+    receiveInvoicesByMail: Recevoir des factures par courrier
+    addresses: Adresses
+    changePassword: Changer le mot de passe
+pt-PT:
+    personalInformation: Dados pessoais
+    name: Nome
+    email: E-mail
+    nickname: Nom à afficher
+    lang: Língua
+    receiveInvoicesByMail: Receber faturas por correio
+    addresses: Endereços
+    changePassword: Alterar palavra-passe
+</i18n>

src/router/routes.js

@@ -57,10 +57,10 @@ const routes = [
             {
                 name: 'Account',
                 path: '/account/conf',
-                component: () => import('pages/Account/AccountConf.vue')
+                component: () => import('pages/Account/AccountConfig.vue')
             },
             {
-                name: 'Addresses',
+                name: 'AddressesList',
                 path: '/account/address-list',
                 component: () => import('pages/Account/AddressList.vue')
             },