Resolve main layout conflicts

README.md

@@ -7,12 +7,12 @@ Hedera is the main web page for Verdnatura.
 Required dependencies.
 
 -   PHP >= 7.0
--   Node.js >= 18.0
+-   Node.js >= 8.0
 
 Launch application for development.
 
 ```
-$ quasar dev
+$ npm run dev
 ```
 
 Launch project backend.

cypress.config.js

@@ -12,9 +12,20 @@ module.exports = defineConfig({
         numTestsKeptInMemory: 0,
         video: false,
         screenshotOnRunFailure: false,
+        reporter: 'cypress-mochawesome-reporter',
+        reporterOptions: {
+            charts: true,
+            reportPageTitle: 'Hedera-Web E2E Reporter',
+            embeddedScreenshots: true,
+            reportDir: 'src/test/cypress/reports',
+            inlineAssets: true
+        },
         setupNodeEvents(on, config) {
+            require('cypress-mochawesome-reporter/plugin')(on);
             on('after:spec', (spec, results) => {
                 console.log('Finished running', spec.relative);
+                console.log('❌spec:', results.stats.failures);
+                console.log('✅spec:', results.stats.passes);
             });
         }
     }

package.json

@@ -5,6 +5,7 @@
     "license": "GPL-3.0",
     "productName": "Salix",
     "author": "Verdnatura",
+    "packageManager": "pnpm@8.15.1",
     "repository": {
         "type": "git",
         "url": "https://git.verdnatura.es/hedera-web"
@@ -18,11 +19,11 @@
         "assets-webpack-plugin": "^7.1.1",
         "babel-loader": "^9.1.0",
         "bundle-loader": "^0.5.6",
-        "css-loader": "^5.2.7",
+        "cypress-mochawesome-reporter": "^3.8.2",
-        "cypress": "^13.15.0",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-config-standard": "^17.0.0",
+        "eslint-plugin-cypress": "^4.1.0",
         "eslint-plugin-import": "^2.19.1",
         "eslint-plugin-n": "^15.0.0",
         "eslint-plugin-prettier": "^5.1.3",
@@ -34,47 +35,28 @@
         "glob": "^8.0.3",
         "html-webpack-plugin": "^5.5.0",
         "json-loader": "^0.5.7",
-        "mini-css-extract-plugin": "^2.7.0",
-        "node-sass": "^7.0.1",
-        "postcss": "^8.4.39",
-        "postcss-import": "^13.0.0",
-        "postcss-loader": "^4.3.0",
-        "postcss-url": "^10.1.3",
-        "raw-loader": "^4.0.2",
-        "sass-loader": "^12.6.0",
-        "style-loader": "^3.3.1",
-        "url-loader": "^4.1.1",
-        "webpack": "^5.75.0",
-        "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "^4.11.1",
-        "webpack-merge": "^5.8.0",
         "yaml-loader": "^0.5.0"
     },
     "dependencies": {
-        "@quasar/extras": "^1.0.0",
+        "@quasar/cli": "^2.3.0",
+        "@quasar/extras": "^1.16.9",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
-        "eslint-plugin-cypress": "^2.13.3",
         "js-yaml": "^3.12.1",
-        "mootools": "^1.5.2",
         "pinia": "^2.0.11",
-        "promise-polyfill": "^8.2.3",
+        "quasar": "^2.14.5",
-        "quasar": "^2.6.0",
         "require-yaml": "0.0.1",
-        "tinymce": "^6.3.0",
         "vue": "^3.3.4",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.0.0"
     },
     "scripts": {
-        "front": "webpack serve --open",
         "back": "cd ../vn-database && myvc start && cd ../salix && gulp backOnly",
         "resetDatabase": "cd ../salix && gulp docker",
         "cy:open": "npm run resetDatabase && cd ../hedera-web && cypress open",
         "test:e2e": "npm run resetDatabase && cd ../hedera-web && cypress run",
         "cy:open-mindshore": "npm run resetDatabase && cd ../hedera-web-mindshore && cypress open",
         "test:e2e-mindshore": "npm run resetDatabase && cd ../hedera-web-mindshore && cypress run",
-        "build": "rm -rf build/ ; webpack",
         "clean": "rm -rf build/",
         "lint": "eslint --ext .js,.vue ./"
     },

src/components/common/VnSelect.vue

@@ -162,10 +162,7 @@ async function filterHandler(val, update) {
         :rules="$attrs.required ? [requiredFieldRule] : null"
         virtual-scroll-slice-size="options.length"
     >
-        <template
+        <template v-if="isClearable" #append>
-            v-if="isClearable"
-            #append
-        >
             <QIcon
                 v-show="value"
                 name="close"
@@ -179,11 +176,7 @@ async function filterHandler(val, update) {
             #[slotName]="slotData"
             :key="slotName"
         >
-            <slot
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
-                :name="slotName"
-                v-bind="slotData ?? {}"
-                :key="slotName"
-            />
         </template>
     </QSelect>
 </template>

src/i18n/ca-ES/index.js

@@ -49,7 +49,7 @@ export default {
         ]
     },
     of: 'de',
-
+    startOrder: 'Començar comanda',
     // Sections titles
     titles: {
         Home: 'Inici',

src/i18n/en-US/index.js

@@ -2,16 +2,6 @@
 // so you can safely delete all default props below
 
 export default {
-    failed: 'Action failed',
-    success: 'Action was successful',
-    internalServerError: 'Internal server error',
-    somethingWentWrong: 'Something went wrong',
-    loginFailed: 'Login failed',
-    authenticationRequired: 'Authentication required',
-    notFound: 'Not found',
-    today: 'Today',
-    yesterday: 'Yesterday',
-    tomorrow: 'Tomorrow',
     language: 'Language',
     langs: {
         en: 'English',
@@ -61,7 +51,17 @@ export default {
             'Dec'
         ]
     },
-
+    startOrder: 'Start order',
+    failed: 'Action failed',
+    success: 'Action was successful',
+    internalServerError: 'Internal server error',
+    somethingWentWrong: 'Something went wrong',
+    loginFailed: 'Login failed',
+    authenticationRequired: 'Authentication required',
+    notFound: 'Not found',
+    today: 'Today',
+    yesterday: 'Yesterday',
+    tomorrow: 'Tomorrow',
     // Sections titles
     titles: {
         Home: 'Home',

src/i18n/es-ES/index.js

@@ -1,14 +1,4 @@
 export default {
-    failed: 'Acción fallida',
-    success: 'Acción exitosa',
-    internalServerError: 'Error interno del servidor',
-    somethingWentWrong: 'Algo salió mal',
-    loginFailed: 'Usuario o contraseña incorrectos',
-    authenticationRequired: 'Autenticación requerida',
-    notFound: 'No encontrado',
-    today: 'Hoy',
-    yesterday: 'Ayer',
-    tomorrow: 'Mañana',
     language: 'Idioma',
     langs: {
         en: 'Inglés',
@@ -58,6 +48,16 @@ export default {
             'Dic'
         ]
     },
+    failed: 'Acción fallida',
+    success: 'Acción exitosa',
+    internalServerError: 'Error interno del servidor',
+    somethingWentWrong: 'Algo salió mal',
+    loginFailed: 'Usuario o contraseña incorrectos',
+    authenticationRequired: 'Autenticación requerida',
+    notFound: 'No encontrado',
+    today: 'Hoy',
+    yesterday: 'Ayer',
+    tomorrow: 'Mañana',
 
     // Sections titles
     titles: {
@@ -128,7 +128,6 @@ export default {
     delete: 'Borrar',
     confirmDelete: '¿Estás seguro de que quieres borrar la línea?',
     emptyList: 'Lista vacía',
-
     orders: 'Pedidos',
     order: 'Pedido pendiente',
     ticket: 'Pedido',
@@ -149,6 +148,7 @@ export default {
     remindMe: 'Recuérdame',
     logInAsGuest: 'Entrar como invitado',
     logIn: 'Iniciar sesión',
+    logOut: 'Cerrar sesión',
     loginMail: "{'info'}{'@'}{'verdnatura.es'}",
     loginPhone: '+34 963 242 100',
     haveForgottenPassword: '¿Has olvidado tu contraseña?',
@@ -161,6 +161,7 @@ export default {
     cancel: 'Cancelar',
     of: 'de',
     modify: 'Modificar',
+    startOrder: 'Empezar pedido',
     shoppingCart: 'Cesta de la compra',
     available: 'Disponible',
     minQuantity: 'Cantidad mínima',

src/i18n/fr-FR/index.js

@@ -49,7 +49,7 @@ export default {
         ]
     },
     of: 'de',
-
+    startOrder: 'Lancer commande',
     // Sections titles
     titles: {
         Home: 'Accueil',

src/i18n/pt-PT/index.js

@@ -49,6 +49,7 @@ export default {
         ]
     },
     of: 'de',
+    startOrder: 'Comece uma encomenda',
     // Sections titles
     titles: {
         Home: 'Início',

src/layouts/MainLayout.vue

@@ -79,7 +79,6 @@ const logoutSupplantedUser = async () => {
                 </QBtn>
             </QToolbar>
         </QHeader>
-
         <QPageContainer :key="refreshContentKey">
             <QDrawer
                 v-model="leftDrawerOpen"
@@ -98,7 +97,9 @@ const logoutSupplantedUser = async () => {
                             alt="_Exit"
                             @click="logout()"
                             data-testid="logoutButton"
-                        />
+                        >
+                            <QTooltip>{{ $t('logOut') }}</QTooltip>
+                        </QBtn>
                     </div>
                     <div
                         v-if="supplantedUser"

src/pages/Cms/Home.vue

@@ -20,8 +20,9 @@
                 icon="add_shopping_cart"
                 color="accent"
                 to="/ecomerce/catalog"
-                :title="$t('startOrder')"
+            >
-            />
+                <QTooltip>{{ $t('startOrder') }}</QTooltip></QBtn
+            >
         </QPageSticky>
     </div>
 </template>
@@ -62,16 +63,3 @@ export default {
     }
 };
 </script>
-
-<i18n lang="yaml">
-en-US:
-    startOrder: Start order
-es-ES:
-    startOrder: Empezar pedido
-ca-ES:
-    startOrder: Començar comanda
-fr-FR:
-    startOrder: Lancer commande
-pt-PT:
-    startOrder: Comece uma encomenda
-</i18n>

src/pages/Cms/HomeView.vue

@@ -20,16 +20,9 @@ onMounted(async () => await fetchData());
 <template>
     <div style="padding: 0">
         <div class="q-pa-sm row items-start">
-            <div
+            <div class="new-card q-pa-sm" v-for="myNew in news" :key="myNew.id">
-                class="new-card q-pa-sm"
-                v-for="myNew in news"
-                :key="myNew.id"
-            >
                 <QCard>
-                    <VnImg
+                    <VnImg :id="myNew.image" storage="news" />
-                        :id="myNew.image"
-                        storage="news"
-                    />
 
                     <QCardSection>
                         <div class="text-h5">
@@ -37,10 +30,7 @@ onMounted(async () => await fetchData());
                         </div>
                     </QCardSection>
                     <QCardSection class="new-body">
-                        <div
+                        <div v-html="myNew.text" class="card-text" />
-                            v-html="myNew.text"
-                            class="card-text"
-                        />
                     </QCardSection>
                 </QCard>
             </div>
@@ -51,14 +41,12 @@ onMounted(async () => await fetchData());
                 icon="add_shopping_cart"
                 color="accent"
                 to="/ecomerce/catalog"
-                :title="$t('startOrder')"
+            >
-            />
+                <QTooltip>{{ $t('startOrder') }}</QTooltip></QBtn
+            >
         </QPageSticky>
     </div>
-    <QDialog
+    <QDialog v-model="showPreview" @hide="selectedImageSrc = ''">
-        v-model="showPreview"
-        @hide="selectedImageSrc = ''"
-    >
         <QImg :src="selectedImageSrc" />
     </QDialog>
 </template>

src/pages/Ecomerce/OrdersView.vue

@@ -118,8 +118,9 @@ const onConfirmPay = async () => {
                 icon="add_shopping_cart"
                 color="accent"
                 :to="{ name: 'catalog' }"
-                :title="t('startOrder')"
+            >
-            />
+                <QTooltip>{{ t('startOrder') }}</QTooltip></QBtn
+            >
         </QPageSticky>
         <VnConfirm
             v-model="showAmountToPayDialog"

webpack.config.js

@@ -5,7 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const merge = require('webpack-merge').merge;
 const wpConfig = require('./webpack.config.json');
 
-let env = process.env.NODE_ENV || 'development';
+const env = process.env.NODE_ENV || 'development';
 const devMode = env === 'development';
 const outputPath = path.join(__dirname, wpConfig.buildDir);
 const publicPath = '/' + wpConfig.buildDir + '/';
@@ -15,7 +15,7 @@ const baseConfig = {
     mode: devMode ? 'development' : 'production',
     output: {
         path: outputPath,
-        publicPath: publicPath
+        publicPath
     },
     module: {
         rules: [
@@ -31,16 +31,16 @@ const baseConfig = {
             },
             {
                 test: /tinymce\/.*\/skin\.css$/i,
-                use: [MiniCssExtractPlugin.loader, 'css-loader']
+                use: [MiniCssExtractPlugin.loader]
             },
             {
                 test: /tinymce\/.*\/content\.css$/i,
-                loader: 'css-loader',
+                url: false,
                 options: { esModule: false }
             },
             {
                 test: /\.css$/,
-                use: ['style-loader', 'css-loader'],
+                use: ['style-loader'],
                 exclude: [/node_modules/]
             },
             {
@@ -59,9 +59,9 @@ const baseConfig = {
                 test: /\.scss$/,
                 use: [
                     'style-loader',
-                    'css-loader',
                     {
                         loader: 'sass-loader',
+                        url: false,
                         options: {
                             sourceMap: true
                         }
@@ -141,7 +141,6 @@ const devConfig = {
         static: __dirname,
         port: wpConfig.devServerPort,
         headers: { 'Access-Control-Allow-Origin': '*' },
-        //stats: { chunks: false },
         proxy: {
             '/api': 'http://localhost:3000',
             '/': {