- wip

.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

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'),
         ];
     }
 }

docker-compose.yml

@@ -39,7 +39,7 @@ services:
       entrypoint: [ 'npm' ]
       ports:
           - '3000:3000'
-          - '3001:3001'
+          - '${VITE_PORT:-3001}:${VITE_PORT:-3001}'
       volumes:
           - .:/application
       networks:

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>

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>

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"
+                    class="flex items-center gap-2 px-2 py-1 text-blue-600 hover:text-blue-800"
-                    :href="`https://cv.kamilcraft.com/show/${cv.token}`"
+                    :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>

vite.config.js

@@ -1,12 +1,14 @@
-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({
+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: 3001,
+            port: parseInt(env.VITE_PORT ?? 3001),
             hmr: {
                 host: 'localhost',
             },
@@ -37,4 +39,5 @@ export default defineConfig({
                 '@vue/runtime-dom'
             ],
         },
+    }
 });