Resolve conflicts

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

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',

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 isEditMode = route.params.id !== '0';
+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"
+            :isEditMode="isEditMode"
+            :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>

src/pages/Account/AddressList.vue

@@ -128,7 +128,7 @@ onMounted(async () => {
                         </div>
                     </div>
                 </QItemSection>
-                <QItemSection class="actions-wrapper invisible" side>
+                <QItemSection class="actions-wrapper" side>
                     <QBtn
                         icon="delete"
                         flat
@@ -154,9 +154,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>

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

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',