toby/resources/js/Shared/DeployInfo.vue

68 lines
1.8 KiB
Vue

<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>