Home view adjustments

.eslintrc.js

@@ -7,12 +7,12 @@ module.exports = {
     parserOptions: {
         parser: '@babel/eslint-parser',
         ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
-        sourceType: 'module', // Allows for the use of imports
+        sourceType: 'module' // Allows for the use of imports
     },
 
     env: {
         browser: true,
-        'vue/setup-compiler-macros': true,
+        'vue/setup-compiler-macros': true
     },
 
     extends: [
@@ -26,7 +26,7 @@ module.exports = {
         // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
         // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
 
-        'standard',
+        'standard'
     ],
 
     plugins: ['vue', 'prettier'],
@@ -41,7 +41,7 @@ module.exports = {
         __QUASAR_SSR_PWA__: 'readonly',
         process: 'readonly',
         Capacitor: 'readonly',
-        chrome: 'readonly',
+        chrome: 'readonly'
     },
 
     // add your custom rules here
@@ -66,7 +66,7 @@ module.exports = {
         'prefer-promise-reject-errors': 'off',
         semi: 'off',
         // allow debugger during development only
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
     },
     overrides: [
         {
@@ -75,8 +75,8 @@ module.exports = {
             rules: {
                 semi: 'off',
                 indent: ['error', 4, { SwitchCase: 1 }],
-                'space-before-function-paren': 'off',
-            },
-        },
-    ],
+                'space-before-function-paren': 'off'
+            }
+        }
+    ]
 };

README.md

@@ -5,17 +5,26 @@ Hedera is the main web page for Verdnatura.
 ## Getting Started
 
 Required dependencies.
- * PHP >= 7.0
- * Node.js >= 8.0
+
+-   PHP >= 7.0
+-   Node.js >= 8.0
 
 Launch application for development.
+
 ```
-$ npm run dev 
+$ npm run dev
 ```
 
+Launch project backend.
+
+```
+$ php -S 127.0.0.1:3002 -t . index.php
+
 Run server side method from command line.
 ```
-$ php hedera-web.php -m method_path 
+
+$ php hedera-web.php -m method_path
+
 ```
 
 ## Built with
@@ -23,3 +32,4 @@ $ php hedera-web.php -m method_path
  * [Webpack](https://webpack.js.org/)
  * [MooTools](https://mootools.net/)
  * [TinyMCE](https://www.tinymce.com/)
+```

quasar.config.js

@@ -111,7 +111,7 @@ module.exports = configure(function (ctx) {
       proxy: {
         '/api': 'http://localhost:3000',
         '/': {
-          target: 'http://localhost:3001',
+          target: 'http://localhost:3002',
           bypass: (req) => req.path !== '/' ? req.path : null
         }
       }

src/boot/axios.js

@@ -1,7 +1,7 @@
-import { boot } from 'quasar/wrappers'
-import { Connection } from '../js/db/connection'
-import { userStore } from 'stores/user'
-import axios from 'axios'
+import { boot } from 'quasar/wrappers';
+import { Connection } from '../js/db/connection';
+import { userStore } from 'stores/user';
+import axios from 'axios';
 
 // Be careful when using SSR for cross-request state pollution
 // due to creating a Singleton instance here;
@@ -11,32 +11,33 @@ import axios from 'axios'
 // for each client)
 const api = axios.create({
     baseURL: `//${location.hostname}:${location.port}/api/`
-})
+});
 
-const jApi = new Connection()
+const jApi = new Connection();
 
 export default boot(({ app }) => {
-    const user = userStore()
-    function addToken (config) {
+    const user = userStore();
+    function addToken(config) {
         if (user.token) {
-            config.headers.Authorization = user.token
+            config.headers.Authorization = user.token;
         }
-        return config
+        return config;
     }
-    api.interceptors.request.use(addToken)
-    jApi.use(addToken)
+    api.interceptors.request.use(addToken);
+    jApi.use(addToken);
 
     // for use inside Vue files (Options API) through this.$axios and this.$api
 
-    app.config.globalProperties.$axios = axios
+    app.config.globalProperties.$axios = axios;
     // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
     //       so you won't necessarily have to import axios in each vue file
 
-    app.config.globalProperties.$api = api
+    app.config.globalProperties.$api = api;
     // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
     //       so you can easily perform requests against your app's API
 
-    app.config.globalProperties.$jApi = jApi
-})
+    app.config.globalProperties.$jApi = jApi;
+    app.provide('jApi', jApi);
+});
 
-export { api, jApi }
+export { api, jApi };

src/pages/Cms/HomeView.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { ref, onMounted, inject } from 'vue';
+
+const jApi = inject('jApi');
+const news = ref([]);
+const showPreview = ref(false);
+const selectedImageSrc = ref('');
+
+const fetchData = async () => {
+    news.value = await jApi.query(
+        `SELECT title, text, image, id
+        FROM news
+        ORDER BY priority, created DESC`
+    );
+};
+
+const showImagePreview = src => {
+    showPreview.value = true;
+    selectedImageSrc.value = src;
+};
+
+onMounted(async () => await fetchData());
+</script>
+
+<template>
+    <div style="padding: 0">
+        <div class="q-pa-sm row items-start">
+            <div class="new-card q-pa-sm" v-for="myNew in news" :key="myNew.id">
+                <QCard>
+                    <QImg
+                        :src="`${$app.imageUrl}/news/full/${myNew.image}`"
+                        @click="
+                            showImagePreview(
+                                `${$app.imageUrl}/news/full/${myNew.image}`
+                            )
+                        "
+                        class="cursor-pointer"
+                    />
+                    <QCardSection>
+                        <div class="text-h5">{{ myNew.title }}</div>
+                    </QCardSection>
+                    <QCardSection class="new-body">
+                        <div v-html="myNew.text" class="card-text" />
+                    </QCardSection>
+                </QCard>
+            </div>
+        </div>
+        <QPageSticky>
+            <QBtn
+                fab
+                icon="add_shopping_cart"
+                color="accent"
+                to="/ecomerce/catalog"
+                :title="$t('startOrder')"
+            />
+        </QPageSticky>
+    </div>
+    <QDialog v-model="showPreview" @hide="selectedImageSrc = ''">
+        <QImg :src="selectedImageSrc" />
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.new-card {
+    width: 100%;
+
+    @media screen and (min-width: 800px) and (max-width: 1400px) {
+        width: 50%;
+    }
+    @media screen and (min-width: 1401px) and (max-width: 1920px) {
+        width: 33.33%;
+    }
+    @media screen and (min-width: 19021) {
+        width: 25%;
+    }
+}
+.new-body {
+    font-family: 'Open Sans';
+}
+
+.card-text {
+    :deep(a) {
+        color: $accent;
+    }
+}
+</style>
+
+<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/router/routes.js

@@ -27,12 +27,12 @@ const routes = [
             {
                 name: '',
                 path: '',
-                component: () => import('src/pages/Cms/Home.vue')
+                component: () => import('src/pages/Cms/HomeView.vue')
             },
             {
                 name: 'home',
                 path: '/cms/home',
-                component: () => import('src/pages/Cms/Home.vue')
+                component: () => import('src/pages/Cms/HomeView.vue')
             },
             {
                 name: 'orders',
@@ -63,6 +63,6 @@ const routes = [
         path: '/:catchAll(.*)*',
         component: () => import('pages/ErrorNotFound.vue')
     }
-]
+];
 
-export default routes
+export default routes;