tristan
3a3a46992c
- Remove max-width constraint, use responsive padding (px-4 sm:px-8 lg:px-16) - Replace heavy border cards with bg-tertiary-500 backgrounds - Use primary-500 colored titles like SIRH - Use neutral color palette instead of m-* custom colors - Auto-fill grid for responsive card layout - Consistent button styles with SIRH/Lesstime patterns Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
375 lines
18 KiB
Vue
375 lines
18 KiB
Vue
<script setup lang="ts">
|
|
import type { Application, ApplicationWrite, Environment, EnvironmentWrite } from '~/services/dto/application'
|
|
import { getApplication, updateApplication, deleteApplication } from '~/services/applications'
|
|
import { createEnvironment, updateEnvironment, deleteEnvironment, toggleMaintenance } from '~/services/environments'
|
|
|
|
const { t } = useI18n()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const slug = route.params.slug as string
|
|
|
|
const application = ref<Application | null>(null)
|
|
const loading = ref(true)
|
|
const editingApp = ref(false)
|
|
const editForm = ref<ApplicationWrite>({ name: '', slug: '', registryImage: '', description: '', giteaUrl: '' })
|
|
const isSubmitting = ref(false)
|
|
|
|
// Environment form
|
|
const showEnvForm = ref(false)
|
|
const editingEnvId = ref<number | null>(null)
|
|
const envForm = ref<EnvironmentWrite>({
|
|
name: '',
|
|
containerName: '',
|
|
deployScriptPath: '',
|
|
maintenanceFilePath: '',
|
|
appUrl: '',
|
|
logFiles: [],
|
|
})
|
|
const isSubmittingEnv = ref(false)
|
|
const pendingMaintenanceByEnvId = ref<Record<number, boolean>>({})
|
|
|
|
async function loadApplication() {
|
|
loading.value = true
|
|
try {
|
|
application.value = await getApplication(slug)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// Application edit
|
|
function startEditApp() {
|
|
if (!application.value) return
|
|
editForm.value = {
|
|
name: application.value.name,
|
|
slug: application.value.slug,
|
|
registryImage: application.value.registryImage,
|
|
description: application.value.description ?? '',
|
|
giteaUrl: application.value.giteaUrl ?? '',
|
|
}
|
|
editingApp.value = true
|
|
}
|
|
|
|
async function saveApp() {
|
|
isSubmitting.value = true
|
|
try {
|
|
application.value = await updateApplication(slug, editForm.value)
|
|
editingApp.value = false
|
|
if (editForm.value.slug !== slug) {
|
|
router.replace(`/applications/${editForm.value.slug}`)
|
|
}
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
async function handleDeleteApp() {
|
|
if (!confirm(t('applications.detail.deleteConfirm'))) return
|
|
await deleteApplication(slug)
|
|
router.push('/applications')
|
|
}
|
|
|
|
// Environment CRUD
|
|
function startCreateEnv() {
|
|
editingEnvId.value = null
|
|
envForm.value = { name: '', containerName: '', deployScriptPath: '', maintenanceFilePath: '', appUrl: '', logFiles: [] }
|
|
showEnvForm.value = true
|
|
}
|
|
|
|
function startEditEnv(env: Environment) {
|
|
editingEnvId.value = env.id!
|
|
envForm.value = {
|
|
name: env.name,
|
|
containerName: env.containerName,
|
|
deployScriptPath: env.deployScriptPath,
|
|
maintenanceFilePath: env.maintenanceFilePath,
|
|
appUrl: env.appUrl ?? '',
|
|
logFiles: env.logFiles.map(lf => ({ label: lf.label, path: lf.path })),
|
|
}
|
|
showEnvForm.value = true
|
|
}
|
|
|
|
async function saveEnv() {
|
|
isSubmittingEnv.value = true
|
|
try {
|
|
if (editingEnvId.value) {
|
|
await updateEnvironment(editingEnvId.value, envForm.value)
|
|
} else {
|
|
await createEnvironment(slug, envForm.value)
|
|
}
|
|
showEnvForm.value = false
|
|
await loadApplication()
|
|
} finally {
|
|
isSubmittingEnv.value = false
|
|
}
|
|
}
|
|
|
|
async function handleDeleteEnv(envId: number) {
|
|
if (!confirm(t('environments.deleteConfirm'))) return
|
|
await deleteEnvironment(envId)
|
|
await loadApplication()
|
|
}
|
|
|
|
async function handleToggleMaintenance(env: Environment) {
|
|
const envId = env.id!
|
|
pendingMaintenanceByEnvId.value[envId] = true
|
|
try {
|
|
await toggleMaintenance(envId, !env.maintenance)
|
|
await loadApplication()
|
|
} finally {
|
|
delete pendingMaintenanceByEnvId.value[envId]
|
|
}
|
|
}
|
|
|
|
function addLogFile() {
|
|
envForm.value.logFiles.push({ label: '', path: '' })
|
|
}
|
|
|
|
function removeLogFile(index: number) {
|
|
envForm.value.logFiles.splice(index, 1)
|
|
}
|
|
|
|
onMounted(loadApplication)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="px-4 py-8 sm:px-8 lg:px-16">
|
|
<!-- Back link -->
|
|
<NuxtLink to="/applications" class="text-neutral-400 hover:text-primary-500 text-sm mb-6 inline-flex items-center gap-1">
|
|
<Icon name="mdi:arrow-left" size="16" />
|
|
{{ t('applications.title') }}
|
|
</NuxtLink>
|
|
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="animate-pulse mt-4">
|
|
<div class="h-10 bg-neutral-200 rounded w-1/3 mb-4" />
|
|
<div class="h-4 bg-neutral-200 rounded w-2/3 mb-2" />
|
|
<div class="h-4 bg-neutral-200 rounded w-1/2" />
|
|
</div>
|
|
|
|
<template v-else-if="application">
|
|
<!-- Application header -->
|
|
<div class="flex items-start justify-between pb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-primary-500 sm:text-4xl">{{ application.name }}</h1>
|
|
<p v-if="application.description" class="text-neutral-500 mt-2">{{ application.description }}</p>
|
|
</div>
|
|
<div class="flex gap-2" v-if="!editingApp">
|
|
<button
|
|
class="rounded-lg border border-neutral-300 px-3 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
|
|
@click="startEditApp"
|
|
>
|
|
{{ t('applications.detail.editButton') }}
|
|
</button>
|
|
<button
|
|
class="rounded-lg border border-red-300 px-3 py-2 text-sm font-semibold text-red-600 hover:bg-red-50"
|
|
@click="handleDeleteApp"
|
|
>
|
|
{{ t('applications.detail.deleteButton') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Application info -->
|
|
<div v-if="!editingApp" class="rounded-lg bg-tertiary-500 p-5 mb-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span class="text-neutral-400">{{ t('applications.detail.registryImage') }} :</span>
|
|
<span class="text-neutral-800 ml-1 font-mono">{{ application.registryImage }}</span>
|
|
</div>
|
|
<div v-if="application.giteaUrl">
|
|
<span class="text-neutral-400">{{ t('applications.detail.giteaUrl') }} :</span>
|
|
<a :href="application.giteaUrl" target="_blank" class="text-primary-500 hover:underline ml-1">
|
|
{{ application.giteaUrl }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit form -->
|
|
<div v-else class="rounded-lg border border-neutral-200 bg-white p-6 mb-8">
|
|
<form @submit.prevent="saveApp" class="space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.name') }}</label>
|
|
<MalioInputText v-model="editForm.name" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.slug') }}</label>
|
|
<MalioInputText v-model="editForm.slug" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.registryImage') }}</label>
|
|
<MalioInputText v-model="editForm.registryImage" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.giteaUrl') }}</label>
|
|
<MalioInputText v-model="editForm.giteaUrl" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.description') }}</label>
|
|
<textarea
|
|
v-model="editForm.description"
|
|
class="w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:ring-2 focus:ring-secondary-500/20"
|
|
rows="2"
|
|
/>
|
|
</div>
|
|
<div class="flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
|
|
@click="editingApp = false"
|
|
>
|
|
{{ t('applications.form.cancel') }}
|
|
</button>
|
|
<MalioButton type="submit" :loading="isSubmitting">
|
|
{{ t('applications.form.save') }}
|
|
</MalioButton>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Environments section -->
|
|
<div>
|
|
<div class="flex items-center justify-between pb-4">
|
|
<h2 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ t('environments.title') }}</h2>
|
|
<button
|
|
class="rounded-lg bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
|
|
@click="startCreateEnv"
|
|
>
|
|
+ {{ t('environments.addButton') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Environment form -->
|
|
<div v-if="showEnvForm" class="rounded-lg border border-neutral-200 bg-white p-6 mb-6">
|
|
<form @submit.prevent="saveEnv" class="space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('environments.form.name') }}</label>
|
|
<MalioInputText v-model="envForm.name" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('environments.form.containerName') }}</label>
|
|
<MalioInputText v-model="envForm.containerName" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('environments.form.deployScriptPath') }}</label>
|
|
<MalioInputText v-model="envForm.deployScriptPath" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('environments.form.maintenanceFilePath') }}</label>
|
|
<MalioInputText v-model="envForm.maintenanceFilePath" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('environments.form.appUrl') }}</label>
|
|
<MalioInputText v-model="envForm.appUrl" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log files -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<label class="text-sm font-semibold text-neutral-700">{{ t('environments.logFiles.title') }}</label>
|
|
<button type="button" @click="addLogFile" class="text-primary-500 hover:underline text-sm font-semibold">
|
|
+ {{ t('environments.logFiles.addButton') }}
|
|
</button>
|
|
</div>
|
|
<div v-for="(lf, index) in envForm.logFiles" :key="index" class="flex gap-2 mb-2 items-center">
|
|
<MalioInputText v-model="lf.label" :placeholder="t('environments.logFiles.label')" class="flex-1" required />
|
|
<MalioInputText v-model="lf.path" :placeholder="t('environments.logFiles.path')" class="flex-[2]" required />
|
|
<button type="button" @click="removeLogFile(index)" class="text-red-500 hover:text-red-700 p-1">
|
|
<Icon name="mdi:close" size="18" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
|
|
@click="showEnvForm = false"
|
|
>
|
|
{{ t('environments.form.cancel') }}
|
|
</button>
|
|
<MalioButton type="submit" :loading="isSubmittingEnv">
|
|
{{ t('environments.form.save') }}
|
|
</MalioButton>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Environments list -->
|
|
<div v-if="!application.environments?.length && !showEnvForm" class="rounded-lg border border-neutral-200 bg-white p-6 text-center text-neutral-500">
|
|
{{ t('applications.card.noEnvironments') }}
|
|
</div>
|
|
|
|
<div v-for="env in application.environments" :key="env.id" class="rounded-lg bg-tertiary-500 p-5 mb-4">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-3">
|
|
<h3 class="text-lg font-semibold text-neutral-900">{{ env.name }}</h3>
|
|
<span
|
|
class="inline-block rounded-full px-3 py-1 text-xs font-semibold"
|
|
:class="env.maintenance
|
|
? 'bg-orange-100 text-orange-700'
|
|
: 'bg-green-100 text-green-700'"
|
|
>
|
|
{{ env.maintenance ? t('environments.maintenance.active') : t('environments.maintenance.inactive') }}
|
|
</span>
|
|
</div>
|
|
<p class="text-neutral-400 text-sm mt-1 font-mono">{{ env.containerName }}</p>
|
|
<a
|
|
v-if="env.appUrl"
|
|
:href="env.appUrl"
|
|
target="_blank"
|
|
class="text-primary-500 hover:underline text-sm mt-1 inline-flex items-center gap-1"
|
|
>
|
|
{{ env.appUrl }}
|
|
<Icon name="mdi:open-in-new" size="14" />
|
|
</a>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button
|
|
class="rounded-lg px-3 py-2 text-xs font-semibold text-white hover:opacity-90"
|
|
:class="env.maintenance ? 'bg-green-600 hover:bg-green-700' : 'bg-orange-500 hover:bg-orange-600'"
|
|
:disabled="!!pendingMaintenanceByEnvId[env.id!]"
|
|
@click="handleToggleMaintenance(env)"
|
|
>
|
|
{{ pendingMaintenanceByEnvId[env.id!]
|
|
? t('environments.maintenance.pending')
|
|
: env.maintenance
|
|
? t('environments.maintenance.deactivate')
|
|
: t('environments.maintenance.activate')
|
|
}}
|
|
</button>
|
|
<button
|
|
class="rounded-lg border border-neutral-300 px-3 py-2 text-xs font-semibold text-neutral-600 hover:bg-white"
|
|
@click="startEditEnv(env)"
|
|
>
|
|
{{ t('environments.editButton') }}
|
|
</button>
|
|
<button
|
|
class="rounded-lg border border-red-300 px-3 py-2 text-xs font-semibold text-red-600 hover:bg-red-50"
|
|
@click="handleDeleteEnv(env.id!)"
|
|
>
|
|
{{ t('environments.deleteButton') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log files -->
|
|
<div v-if="env.logFiles.length" class="mt-4 border-t border-neutral-200 pt-3">
|
|
<p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-2">{{ t('environments.logFiles.title') }}</p>
|
|
<div v-for="lf in env.logFiles" :key="lf.id" class="text-sm text-neutral-700 flex gap-2">
|
|
<span class="font-medium">{{ lf.label }} :</span>
|
|
<span class="font-mono text-neutral-400">{{ lf.path }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|