- content improvement

* #5 - (js) Bump vue from 3.2.21 to 3.2.37

Bumps [vue](https://github.com/vuejs/core) from 3.2.21 to 3.2.37.
- [Release notes](https://github.com/vuejs/core/releases)
- [Changelog](https://github.com/vuejs/core/blob/main/CHANGELOG.md)
- [Commits](https://github.com/vuejs/core/compare/v3.2.21...v3.2.37)

---
updated-dependencies:
- dependency-name: vue
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* - npm dependencies update July 2022

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

.env.example

@@ -67,3 +67,9 @@ SLACK_ENABLED=true
 SLACK_CLIENT_TOKEN=
 SLACK_SIGNING_SECRET=
 SLACK_DEFAULT_CHANNEL="#general"
+
+HEROKU_RELEASE_VERSION=v01
+HEROKU_SLUG_DESCRIPTION="Dev 643f546"
+HEROKU_RELEASE_CREATED_AT=2022-07-04T18:05:46Z
+HEROKU_SLUG_COMMIT=643f546142b8a2db342f0ae46f01e61dce03e97c
+GITHUB_REPO_URL=https://github.com/blumilksoftware/toby/

app/Infrastructure/Http/Middleware/HandleInertiaRequests.php

@@ -25,6 +25,7 @@ class HandleInertiaRequests extends Middleware
             "flash" => $this->getFlashData($request),
             "years" => $this->getYearsData($request),
             "vacationRequestsCount" => $this->getVacationRequestsCount($request),
+            "deployInformation" => $this->getDeployInformation(),
         ]);
     }
 
@@ -71,4 +72,15 @@ class HandleInertiaRequests extends Middleware
             ->count()
         : null;
     }
+
+    protected function getDeployInformation(): Closure
+    {
+        return fn() => [
+            "release_version" => config("heroku.release_version"),
+            "slug_description" => config("heroku.slug_description"),
+            "release_created_at" => config("heroku.release_created_at"),
+            "slug_commit" => config("heroku.slug_commit"),
+            "github_url" => preg_replace("/\/$/i", "", config("heroku.github_url", "")),
+        ];
+    }
 }

composer.json

@@ -9,7 +9,7 @@
         "ext-pdo": "*",
         "ext-redis": "*",
         "azuyalabs/yasumi": "^2.4",
-        "barryvdh/laravel-dompdf": "^1.0",
+        "barryvdh/laravel-dompdf": "^2.0",
         "fruitcake/laravel-cors": "^3.0",
         "guzzlehttp/guzzle": "^7.0.1",
         "inertiajs/inertia-laravel": "^0.6.2",

config/heroku.php

@@ -0,0 +1,11 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+    "release_version" => env("HEROKU_RELEASE_VERSION"),
+    "slug_description" => env("HEROKU_SLUG_DESCRIPTION"),
+    "release_created_at" => env("HEROKU_RELEASE_CREATED_AT"),
+    "slug_commit" => env("HEROKU_SLUG_COMMIT"),
+    "github_url" => env("GITHUB_REPO_URL"),
+];

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   web:
-    image: nginx:1.21-alpine
+    image: nginx:1.23-alpine
     container_name: toby-web
     working_dir: /application
     volumes:
@@ -76,7 +76,7 @@ services:
     restart: unless-stopped
 
   node:
-    image: node:18.1.0-alpine3.14
+    image: node:18.4.0-alpine3.16
     container_name: toby-node
     working_dir: /application
     volumes:

package.json

@@ -13,7 +13,7 @@
         "lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.6.4",
+        "@headlessui/vue": "^1.6.5",
         "@heroicons/vue": "^1.0.6",
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
@@ -21,27 +21,27 @@
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/line-clamp": "^0.4.0",
         "@tailwindcss/typography": "^0.5.2",
-        "@vue/compiler-sfc": "^3.2.31",
+        "@vue/compiler-sfc": "^3.2.37",
         "autoprefixer": "^10.4.7",
         "axios": "^0.27.2",
-        "echarts": "^5.3.2",
+        "echarts": "^5.3.3",
         "flatpickr": "^4.6.13",
-        "laravel-mix": "^6.0.44",
+        "laravel-mix": "^6.0.49",
         "lodash": "^4.17.21",
-        "luxon": "^2.3.2",
+        "luxon": "^2.4.0",
         "postcss": "^8.4.14",
-        "tailwindcss": "^3.0.24",
+        "tailwindcss": "^3.1.4",
-        "vue": "3.2.21",
+        "vue": "3.2.37",
-        "vue-echarts": "^6.0.2",
+        "vue-echarts": "^6.1.0",
         "vue-flatpickr-component": "^9.0.6",
         "vue-loader": "^17.0.0",
-        "vue-material-design-icons": "^5.0.0",
+        "vue-material-design-icons": "^5.1.1",
         "vue-toastification": "^2.0.0-rc.5",
         "vue3-popper": "^1.5.0",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "eslint": "^8.16.0",
+        "eslint": "^8.19.0",
-        "eslint-plugin-vue": "^9.1.0"
+        "eslint-plugin-vue": "^9.1.1"
     }
 }

resources/js/Pages/VacationRequest/Create.vue

@@ -297,8 +297,8 @@
               <button
                 type="submit"
                 class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                :class="[form.processing || !isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                :disabled="form.processing || !form.isDirty"
+                :disabled="form.processing || !isDirty"
               >
                 Zapisz
               </button>
@@ -359,6 +359,13 @@ const form = useForm({
   flowSkipped: false,
 })
 
+let isDirty = ref(false)
+
+watch(form, formData => {
+  const { from, to } = formData.data()
+  isDirty.value = formData.isDirty || from !== null || to !== null
+}, { immediate: true, deep: true })
+
 refreshEstimatedDays(form.from, form.to)
 
 const estimatedDays = ref([])

resources/js/Shared/DeployInfo.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    :class="{ 'flex-col': isVertical(), 'flex-row': isHorizontal() }"
+    class="min-w-full p-4 text-xs text-gray-500 flex gap-x-1"
+  >
+    <p class="flex flex-row gap-x-1">
+      <strong>Wersja:</strong>
+      <span
+        :title="`Commit: ${deployInformation.slug_commit ?? 'unset'}`"
+      >
+        {{ deployInformation.slug_description ?? 'unset' }} ({{ deployInformation.release_version ?? 'unset' }})
+      </span>
+    </p>
+    <p
+      v-if="deployInformation.release_created_at"
+      class="flex flex-row gap-x-1"
+      :class="{ 'border-l-2 border-gray-300 pl-1': isHorizontal() }"
+    >
+      <strong>Ostatnio zbudowano:</strong>
+      <span>{{ getDate() }}</span>
+    </p>
+    <p
+      v-if="deployInformation.github_url"
+      :class="{ 'border-l-2 border-gray-300 pl-1': isHorizontal(), 'flex flex-row gap-x-1': isVertical() }"
+    >
+      <strong v-if="isVertical()">Repozytorium:</strong>
+      <a
+        v-if="deployInformation.github_url"
+        class="text-gray-800 underline hover:no-underline hover:text-blumilk-600"
+        :href="deployInformation.github_url"
+        target="_blank"
+        rel="noopener nofollow noreferrer"
+      >GitHub</a>
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { DateTime } from 'luxon'
+
+let props = defineProps({
+  deployInformation: Object,
+  layout: {
+    type: String,
+    default: 'horizontal',
+  },
+})
+
+function isVertical() {
+  return props.layout === 'vertical'
+}
+
+function isHorizontal() {
+  return props.layout === 'horizontal'
+}
+
+function getDate() {
+  return DateTime.fromISO(props.deployInformation.release_created_at)
+    .toLocaleString({
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+}
+</script>

resources/js/Shared/Layout/AppLayout.vue

@@ -9,6 +9,9 @@
       <div class="lg:px-4">
         <slot />
       </div>
+      <DeployInfo
+        :deploy-information="deployInformation"
+      />
     </main>
   </div>
 </template>
@@ -17,12 +20,14 @@
 import MainMenu from '@/Shared/MainMenu'
 import { useToast } from 'vue-toastification'
 import { watch } from 'vue'
+import DeployInfo from '@/Shared/DeployInfo'
 
 const props = defineProps({
   flash: Object,
   auth: Object,
   years: Object,
   vacationRequestsCount: Number,
+  deployInformation: Object,
 })
 
 const toast = useToast()

resources/js/Shared/Layout/GuestLayout.vue

@@ -1,5 +1,18 @@
 <template>
-  <div class="flex flex-col justify-center py-12 min-h-screen bg-blumilk-25 sm:px-6 lg:px-8">
+  <div class="relative flex flex-col justify-center py-12 min-h-screen bg-blumilk-25 sm:px-6 lg:px-8">
     <slot />
+    <DeployInfo
+      :deploy-information="deployInformation"
+      layout="vertical"
+      class="absolute right-0 bottom-0"
+    />
   </div>
 </template>
+
+<script setup>
+import DeployInfo from '@/Shared/DeployInfo'
+
+defineProps({
+  deployInformation: Object,
+})
+</script>