From 908b1e4becbca81f4b3a397cee57058211fbf52c Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 1 Aug 2023 18:13:45 +0200
Subject: [PATCH] - wip

---
 .env.example                          |  3 ++
 app/Http/Resources/FullCVResource.php |  2 +
 docker-compose.yml                    |  2 +-
 resources/js/Pages/CV/Edit.vue        |  9 +++-
 resources/js/Pages/CV/Index.vue       |  2 +-
 resources/js/Pages/CV/Show.vue        | 29 ++++++++---
 vite.config.js                        | 71 ++++++++++++++-------------
 7 files changed, 75 insertions(+), 43 deletions(-)

diff --git a/.env.example b/.env.example
index c7a9d97..68cdeff 100644
--- a/.env.example
+++ b/.env.example
@@ -14,3 +14,6 @@ DB_PASSWORD=password
 EXTERNAL_WEBSERVER_PORT=80
 CURRENT_UID=1000
 XDG_CONFIG_HOME=/tmp
+
+VITE_CV_APP_URL=https://cv.kamilcraft.com
+VITE_PORT=3001
diff --git a/app/Http/Resources/FullCVResource.php b/app/Http/Resources/FullCVResource.php
index 99187bf..53b1791 100644
--- a/app/Http/Resources/FullCVResource.php
+++ b/app/Http/Resources/FullCVResource.php
@@ -24,6 +24,8 @@ class FullCVResource extends JsonResource
             'mission' => explode(PHP_EOL, $this->mission ?? '', 5),
             'rodo' => $this->rodo,
             'position' => $this->position,
+            'created' => $this->created_at->format('d-m-Y H:i:s'),
+            'updated' => $this->updated_at->format('d-m-Y H:i:s'),
         ];
     }
 }
diff --git a/docker-compose.yml b/docker-compose.yml
index b458682..4477eae 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -39,7 +39,7 @@ services:
       entrypoint: [ 'npm' ]
       ports:
           - '3000:3000'
-          - '3001:3001'
+          - '${VITE_PORT:-3001}:${VITE_PORT:-3001}'
       volumes:
           - .:/application
       networks:
diff --git a/resources/js/Pages/CV/Edit.vue b/resources/js/Pages/CV/Edit.vue
index e00d84c..8c03c99 100644
--- a/resources/js/Pages/CV/Edit.vue
+++ b/resources/js/Pages/CV/Edit.vue
@@ -119,7 +119,14 @@ function updateCV() {
                     v-model="form.rodo"
                     :error="form.errors.rodo"
                 />
-                <button class="px-0.5 py-1 rounded-lg bg-[#436da7] border-4 border-[#436da7] text-white text-lg hover:bg-transparent hover:text-[#436da7]">Edytuj CV</button>
+                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 sm:gap-2 items-center">
+                    <InertiaLink
+                        as="button"
+                        :href="`/dashboard/cv/${cv.token}`"
+                        class="col-span-1 flex justify-center items-center gap-3 w-full px-2 py-1 border-t-4 border-b-4 border-transparent hover:border-b-black"
+                        ><FontAwesomeIcon :icon="['fas', 'backward']" />Anuluj</InertiaLink>
+                    <button class="col-span-1 md:col-span-2 px-0.5 py-1 rounded-lg bg-[#436da7] border-4 border-[#436da7] text-white text-lg hover:bg-transparent hover:text-[#436da7]">Edytuj CV</button>
+                </div>
             </form>
         </div>
     </div>
diff --git a/resources/js/Pages/CV/Index.vue b/resources/js/Pages/CV/Index.vue
index 3824e76..2a01cb0 100644
--- a/resources/js/Pages/CV/Index.vue
+++ b/resources/js/Pages/CV/Index.vue
@@ -39,7 +39,7 @@ function copySlug(slug) {
                 ><FontAwesomeIcon :icon="['fas', 'plus']" /></InertiaLink>
         </header>
         <div class="overflow-x-auto">
-            <table v-if="cvs.data.length" class="w-full min-w-[600px] border-separate border-spacing-y-2">
+            <table v-if="cvs.data.length" class="w-full min-w-[600px] border-separate border-spacing-y-2 cursor-pointer">
                 <colgroup>
                     <col class="w-min" />
                 </colgroup>
diff --git a/resources/js/Pages/CV/Show.vue b/resources/js/Pages/CV/Show.vue
index c72e25b..c3bc1bf 100644
--- a/resources/js/Pages/CV/Show.vue
+++ b/resources/js/Pages/CV/Show.vue
@@ -9,6 +9,8 @@ defineProps({
         required: true,
     },
 });
+
+const CV_URL = import.meta.env.VITE_CV_APP_URL;
 </script>
 
 <template>
@@ -23,25 +25,25 @@ defineProps({
                     title="Wróć do listy CV"><FontAwesomeIcon :icon="['fas', 'caret-left']" /></InertiaLink>
                 <h1 class="text-3xl font-roboto font-light">Szczegóły CV</h1>
             </div>
-            <div class="flex gap-2">
+            <div class="flex gap-3 sm:gap-2">
                 <a
-                    class="px-2 py-1 text-blue-600 hover:text-blue-800"
-                    :href="`https://cv.kamilcraft.com/show/${cv.token}`"
+                    class="flex items-center gap-2 px-2 py-1 text-blue-600 hover:text-blue-800"
+                    :href="`${CV_URL}/show/${cv.token}`"
                     target="_blank"
                     rel="noopener noreferrer"
-                    title="Przekieruj do CV"><FontAwesomeIcon :icon="['fas', 'arrow-up-right-from-square']" /></a>
+                    title="Przekieruj do CV"><FontAwesomeIcon :icon="['fas', 'arrow-up-right-from-square']" /><span class="hidden sm:inline-block">Przejdź do CV</span></a>
                 <InertiaLink
                     as="button"
                     :href="`/dashboard/cv/${cv.token}/edit`"
                     class="flex items-center gap-2 px-2 py-1 text-lime-600 hover:text-white hover:bg-lime-600 rounded-md"
                     title="Usuń CV"
-                    ><FontAwesomeIcon :icon="['fas', 'pen-to-square']" />Edytuj</InertiaLink>
+                    ><FontAwesomeIcon :icon="['fas', 'pen-to-square']" /><span class="hidden sm:inline-block">Edytuj</span></InertiaLink>
                 <InertiaLink
                     as="button"
                     :href="`/dashboard/cv/${cv.token}/delete`"
                     class="flex items-center gap-2 px-2 py-1 text-red-600 hover:text-white hover:bg-red-600 rounded-md"
                     title="Usuń CV"
-                    ><FontAwesomeIcon :icon="['fas', 'trash']" />Usuń</InertiaLink>
+                    ><FontAwesomeIcon :icon="['fas', 'trash']" /><span class="hidden sm:inline-block">Usuń</span></InertiaLink>
             </div>
         </header>
         <div class="mb-4">
@@ -73,6 +75,21 @@ defineProps({
                     <div class="text-gray-500 pb-0.5">Lokalizacje</div>
                     <p class="w-full min-w-full max-w-full px-2.5 py-2 border-b-2 rounded-md bg-white">{{ cv.locations.join(' / ') }}</p>
                 </div>
+            </div>
+        </div>
+        <div class="mb-4">
+            <header>
+                <h2 class="text-2xl font-roboto font-light pb-3">Statystyka</h2>
+            </header>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                    <div class="text-gray-500 pb-0.5">Utworzono</div>
+                    <p class="w-full min-w-full max-w-full px-2.5 py-2 border-b-2 rounded-md bg-white">{{ cv.created }}</p>
+                </div>
+                <div>
+                    <div class="text-gray-500 pb-0.5">Zmodyfikowano</div>
+                    <p class="w-full min-w-full max-w-full px-2.5 py-2 border-b-2 rounded-md bg-white">{{ cv.updated }}</p>
+                </div>
                 <div>
                     <div class="text-gray-500 pb-0.5">Zachowane wyświetlenia</div>
                     <p class="w-full min-w-full max-w-full px-2.5 py-2 border-b-2 rounded-md bg-white">{{ cv.views }}</p>
diff --git a/vite.config.js b/vite.config.js
index 1386a56..df53ccd 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,40 +1,43 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import laravel from 'laravel-vite-plugin';
-import { networkInterfaces } from 'os'
+import { networkInterfaces } from 'os';
 
-export default defineConfig({
-    server: {
-        host: Object.values(networkInterfaces()).flat().find(i => i.family === 'IPv4' && !i.internal).address,
-        port: 3001,
-        hmr: {
-            host: 'localhost',
-        },
-    },
-    resolve: {
-        alias: {
-            '@': '/resources/js',
-        },
-    },
-    plugins: [
-        vue({
-            template: {
-                transformAssetUrls: {
-                    base: null,
-                    includeAbsolute: false,
-                },
+export default defineConfig((mode) => {
+    const env = loadEnv(mode, process.cwd(), "");
+    return {
+        server: {
+            host: Object.values(networkInterfaces()).flat().find(i => i.family === 'IPv4' && !i.internal).address,
+            port: parseInt(env.VITE_PORT ?? 3001),
+            hmr: {
+                host: 'localhost',
             },
-        }),
-        laravel({
-            input: 'resources/js/app.js',
-            ssr: 'resources/js/ssr.js',
-            refresh: true,
-        }),
-    ],
-    ssr: {
-        noExternal: [
-            '@inertiajs/server',
-            '@vue/runtime-dom'
+        },
+        resolve: {
+            alias: {
+                '@': '/resources/js',
+            },
+        },
+        plugins: [
+            vue({
+                template: {
+                    transformAssetUrls: {
+                        base: null,
+                        includeAbsolute: false,
+                    },
+                },
+            }),
+            laravel({
+                input: 'resources/js/app.js',
+                ssr: 'resources/js/ssr.js',
+                refresh: true,
+            }),
         ],
-    },
+        ssr: {
+            noExternal: [
+                '@inertiajs/server',
+                '@vue/runtime-dom'
+            ],
+        },
+    }
 });