feat: VnImg

quasar.config.js

@@ -8,10 +8,10 @@
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js
 
-const ESLintPlugin = require('eslint-webpack-plugin')
-const path = require('path')
+const ESLintPlugin = require('eslint-webpack-plugin');
+const path = require('path');
 
-const { configure } = require('quasar/wrappers')
+const { configure } = require('quasar/wrappers');
 
 module.exports = configure(function (ctx) {
     return {
@@ -24,19 +24,10 @@ module.exports = configure(function (ctx) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://v2.quasar.dev/quasar-cli-webpack/boot-files
-    boot: [
-      'i18n',
-      'axios',
-      'error-handler',
-      'app'
-    ],
+        boot: ['i18n', 'axios', 'error-handler', 'app'],
 
         // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
-    css: [
-      'app.scss',
-      'width.scss',
-      'responsive.scss'
-    ],
+        css: ['app.scss', 'width.scss', 'responsive.scss'],
 
         // https://github.com/quasarframework/quasar/tree/dev/extras
         extras: [
@@ -77,8 +68,9 @@ module.exports = configure(function (ctx) {
             // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
 
             chainWebpack(chain) {
-        chain.plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }])
+                chain
+                    .plugin('eslint-webpack-plugin')
+                    .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
 
                 chain.module
                     .rule('i18n-resource')
@@ -87,15 +79,14 @@ module.exports = configure(function (ctx) {
                     .end()
                     .type('javascript/auto')
                     .use('i18n-resource')
-          .loader('@intlify/vue-i18n-loader')
+                    .loader('@intlify/vue-i18n-loader');
                 chain.module
                     .rule('i18n')
                     .resourceQuery(/blockType=i18n/)
                     .type('javascript/auto')
                     .use('i18n')
-          .loader('@intlify/vue-i18n-loader')
+                    .loader('@intlify/vue-i18n-loader');
             }
-
         },
 
         // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
@@ -111,8 +102,8 @@ module.exports = configure(function (ctx) {
             proxy: {
                 '/api': 'http://localhost:3000',
                 '/': {
-          target: 'http://localhost:3002',
-          bypass: (req) => req.path !== '/' ? req.path : null
+                    target: 'http://localhost:3001',
+                    bypass: req => (req.path !== '/' ? req.path : null)
                 }
             }
         },
@@ -132,9 +123,7 @@ module.exports = configure(function (ctx) {
             // directives: [],
 
             // Quasar plugins
-      plugins: [
-        'Notify'
-      ]
+            plugins: ['Notify']
         },
 
         // animations: 'all', // --- includes all animations
@@ -155,8 +144,9 @@ module.exports = configure(function (ctx) {
             // Tell browser when a file from the server should expire from cache (in ms)
 
             chainWebpackWebserver(chain) {
-        chain.plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }])
+                chain
+                    .plugin('eslint-webpack-plugin')
+                    .use(ESLintPlugin, [{ extensions: ['js'] }]);
             },
 
             middlewares: [
@@ -174,14 +164,15 @@ module.exports = configure(function (ctx) {
             // if using workbox in InjectManifest mode
 
             chainWebpackCustomSW(chain) {
-        chain.plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }])
+                chain
+                    .plugin('eslint-webpack-plugin')
+                    .use(ESLintPlugin, [{ extensions: ['js'] }]);
             },
 
             manifest: {
                 name: 'Hedera',
                 short_name: 'Hedera',
-        description: 'Verdnatura\'s webshop',
+                description: "Verdnatura's webshop",
                 display: 'standalone',
                 orientation: 'portrait',
                 background_color: '#ffffff',
@@ -232,13 +223,11 @@ module.exports = configure(function (ctx) {
 
             packager: {
                 // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
-
                 // OS X / Mac App Store
                 // appBundleId: '',
                 // appCategoryType: '',
                 // osxSign: '',
                 // protocol: 'myapp://path',
-
                 // Windows only
                 // win32metadata: { ... }
             },
@@ -252,15 +241,16 @@ module.exports = configure(function (ctx) {
             // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
 
             chainWebpackMain(chain) {
-        chain.plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }])
+                chain
+                    .plugin('eslint-webpack-plugin')
+                    .use(ESLintPlugin, [{ extensions: ['js'] }]);
             },
 
             chainWebpackPreload(chain) {
-        chain.plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }])
-      }
-
+                chain
+                    .plugin('eslint-webpack-plugin')
+                    .use(ESLintPlugin, [{ extensions: ['js'] }]);
             }
         }
-})
+    };
+});

src/components/ui/VnImg.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { appStore } from 'stores/app';
+
+const $props = defineProps({
+    baseURL: {
+        type: String,
+        default: null
+    },
+    storage: {
+        type: [String, Number],
+        default: 'Images'
+    },
+    size: {
+        type: String,
+        default: 'full'
+    },
+    zoomSize: {
+        type: String,
+        required: false,
+        default: 'lg'
+    },
+    id: {
+        type: Number,
+        required: true
+    }
+});
+const app = appStore();
+const show = ref(false);
+const url = computed(() => {
+    return `${$props.baseURL ?? app.imageUrl}/${$props.storage}/${$props.size}/${$props.id}`;
+});
+</script>
+<template>
+    <QImg
+        :class="{ zoomIn: $props.zoomSize }"
+        :src="url"
+        v-bind="$attrs"
+        @click="show = !show"
+        spinner-color="primary"
+    />
+    <QDialog v-model="show" v-if="$props.zoomSize">
+        <QImg
+            :src="url"
+            size="full"
+            class="img_zoom"
+            v-bind="$attrs"
+            spinner-color="primary"
+        />
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.q-img {
+    &.zoomIn {
+        cursor: zoom-in;
+    }
+    min-width: 50px;
+}
+.rounded {
+    border-radius: 50%;
+}
+.img_zoom {
+    border-radius: 0%;
+}
+</style>

src/pages/Cms/HomeView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted, inject } from 'vue';
-
+import VnImg from 'src/components/ui/VnImg.vue';
 const jApi = inject('jApi');
 const news = ref([]);
 const showPreview = ref(false);
@@ -14,11 +14,6 @@ const fetchData = async () => {
     );
 };
 
-const showImagePreview = src => {
-    showPreview.value = true;
-    selectedImageSrc.value = src;
-};
-
 onMounted(async () => await fetchData());
 </script>
 
@@ -27,15 +22,8 @@ onMounted(async () => await fetchData());
         <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"
-                    />
+                    <VnImg :id="myNew.image" storage="news" />
+
                     <QCardSection>
                         <div class="text-h5">{{ myNew.title }}</div>
                     </QCardSection>