237 lines
10 KiB
Vue
237 lines
10 KiB
Vue
<template>
|
|
<div class="p-4 max-w-4xl mx-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-2xl font-bold text-yellow">🔧 Outils</h1>
|
|
<button @click="openCreate" class="bg-yellow text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">+ Ajouter</button>
|
|
</div>
|
|
|
|
<div v-if="toolsStore.loading" class="text-text-muted text-sm">Chargement...</div>
|
|
<div v-else-if="!toolsStore.tools.length" class="text-text-muted text-sm py-4">Aucun outil enregistré.</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
<div v-for="t in toolsStore.tools" :key="t.id"
|
|
class="bg-bg-soft rounded-lg p-4 border border-bg-hard flex flex-col gap-2">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-text font-semibold">{{ t.nom }}</span>
|
|
<div class="flex gap-2">
|
|
<button @click="startEdit(t)" class="text-yellow text-xs hover:underline">Édit.</button>
|
|
<button @click="removeTool(t.id!)" class="text-red text-xs hover:underline">Suppr.</button>
|
|
</div>
|
|
</div>
|
|
<span v-if="t.categorie" class="text-xs text-yellow bg-yellow/10 rounded-full px-2 py-0.5 w-fit">{{ t.categorie }}</span>
|
|
<p v-if="t.description" class="text-text-muted text-xs">{{ t.description }}</p>
|
|
<p v-if="t.boutique_nom || t.prix_achat != null" class="text-text-muted text-xs">
|
|
<span v-if="t.boutique_nom">🛒 {{ t.boutique_nom }}</span>
|
|
<span v-if="t.prix_achat != null"> · 💶 {{ t.prix_achat }} €</span>
|
|
</p>
|
|
<a v-if="t.boutique_url" :href="t.boutique_url" target="_blank" rel="noopener noreferrer"
|
|
class="text-blue text-xs hover:underline truncate">🔗 Boutique</a>
|
|
<a v-if="t.video_url" :href="t.video_url" target="_blank" rel="noopener noreferrer"
|
|
class="text-aqua text-xs hover:underline truncate">🎬 Vidéo</a>
|
|
<p v-if="t.notice_texte" class="text-text-muted text-xs whitespace-pre-line">{{ t.notice_texte }}</p>
|
|
<a v-else-if="t.notice_fichier_url" :href="t.notice_fichier_url" target="_blank" rel="noopener noreferrer"
|
|
class="text-aqua text-xs hover:underline truncate">📄 Notice (fichier)</a>
|
|
|
|
<div v-if="t.photo_url || t.video_url" class="mt-auto pt-2 space-y-2">
|
|
<img v-if="t.photo_url" :src="t.photo_url" alt="photo outil"
|
|
class="w-full h-28 object-cover rounded border border-bg-hard bg-bg" />
|
|
<video v-if="t.video_url" :src="t.video_url" controls muted
|
|
class="w-full h-36 object-cover rounded border border-bg-hard bg-bg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="showForm" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="closeForm">
|
|
<div class="bg-bg-hard rounded-xl p-6 w-full max-w-md border border-bg-soft">
|
|
<h2 class="text-text font-bold text-lg mb-4">{{ editId ? 'Modifier l\'outil' : 'Nouvel outil' }}</h2>
|
|
<form @submit.prevent="submitTool" class="flex flex-col gap-3">
|
|
<input v-model="form.nom" placeholder="Nom de l'outil *" required
|
|
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
|
|
<select v-model="form.categorie"
|
|
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow">
|
|
<option value="">Catégorie</option>
|
|
<option value="beche">Bêche</option>
|
|
<option value="fourche">Fourche</option>
|
|
<option value="griffe">Griffe/Grelinette</option>
|
|
<option value="arrosage">Arrosage</option>
|
|
<option value="taille">Taille</option>
|
|
<option value="autre">Autre</option>
|
|
</select>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<input v-model="form.boutique_nom" placeholder="Nom boutique"
|
|
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
|
|
<input v-model.number="form.prix_achat" type="number" min="0" step="0.01" placeholder="Prix achat (€)"
|
|
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
|
|
</div>
|
|
<input v-model="form.boutique_url" type="url" placeholder="URL boutique (https://...)"
|
|
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
|
|
<textarea v-model="form.description" placeholder="Description..."
|
|
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow resize-none h-16" />
|
|
<div>
|
|
<label class="text-text-muted text-xs block mb-1">Photo de l'outil</label>
|
|
<input type="file" accept="image/*" @change="onPhotoSelected"
|
|
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
|
|
<img v-if="photoPreview" :src="photoPreview" alt="Prévisualisation photo"
|
|
class="mt-2 w-full h-28 object-cover rounded border border-bg-hard bg-bg" />
|
|
</div>
|
|
<div>
|
|
<label class="text-text-muted text-xs block mb-1">Vidéo de l'outil</label>
|
|
<input type="file" accept="video/*" @change="onVideoSelected"
|
|
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
|
|
<video v-if="videoPreview" :src="videoPreview" controls muted
|
|
class="mt-2 w-full h-36 object-cover rounded border border-bg-hard bg-bg" />
|
|
</div>
|
|
<textarea v-model="form.notice_texte" placeholder="Notice (texte libre)..."
|
|
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow resize-none h-24" />
|
|
<div class="flex gap-2 justify-end">
|
|
<button type="button" @click="closeForm" class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
|
|
<button type="submit" class="bg-yellow text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
|
|
{{ editId ? 'Enregistrer' : 'Créer' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, reactive, ref } from 'vue'
|
|
import axios from 'axios'
|
|
import { useToolsStore } from '@/stores/tools'
|
|
import type { Tool } from '@/api/tools'
|
|
|
|
const toolsStore = useToolsStore()
|
|
const showForm = ref(false)
|
|
const editId = ref<number | null>(null)
|
|
const photoFile = ref<File | null>(null)
|
|
const videoFile = ref<File | null>(null)
|
|
const photoPreview = ref('')
|
|
const videoPreview = ref('')
|
|
const form = reactive({
|
|
nom: '',
|
|
categorie: '',
|
|
description: '',
|
|
boutique_nom: '',
|
|
boutique_url: '',
|
|
prix_achat: undefined as number | undefined,
|
|
photo_url: '',
|
|
video_url: '',
|
|
notice_texte: '',
|
|
notice_fichier_url: '',
|
|
})
|
|
|
|
function resetForm() {
|
|
Object.assign(form, {
|
|
nom: '',
|
|
categorie: '',
|
|
description: '',
|
|
boutique_nom: '',
|
|
boutique_url: '',
|
|
prix_achat: undefined,
|
|
photo_url: '',
|
|
video_url: '',
|
|
notice_texte: '',
|
|
notice_fichier_url: '',
|
|
})
|
|
}
|
|
|
|
function openCreate() {
|
|
editId.value = null
|
|
resetForm()
|
|
photoFile.value = null
|
|
videoFile.value = null
|
|
photoPreview.value = ''
|
|
videoPreview.value = ''
|
|
showForm.value = true
|
|
}
|
|
|
|
function onPhotoSelected(event: Event) {
|
|
const input = event.target as HTMLInputElement
|
|
const file = input.files?.[0] || null
|
|
photoFile.value = file
|
|
if (file) photoPreview.value = URL.createObjectURL(file)
|
|
}
|
|
|
|
function onVideoSelected(event: Event) {
|
|
const input = event.target as HTMLInputElement
|
|
const file = input.files?.[0] || null
|
|
videoFile.value = file
|
|
if (file) videoPreview.value = URL.createObjectURL(file)
|
|
}
|
|
|
|
function startEdit(t: Tool) {
|
|
editId.value = t.id!
|
|
Object.assign(form, {
|
|
nom: t.nom,
|
|
categorie: t.categorie || '',
|
|
description: t.description || '',
|
|
boutique_nom: t.boutique_nom || '',
|
|
boutique_url: t.boutique_url || '',
|
|
prix_achat: t.prix_achat,
|
|
photo_url: t.photo_url || '',
|
|
video_url: t.video_url || '',
|
|
notice_texte: t.notice_texte || '',
|
|
notice_fichier_url: t.notice_fichier_url || '',
|
|
})
|
|
photoFile.value = null
|
|
videoFile.value = null
|
|
photoPreview.value = t.photo_url || ''
|
|
videoPreview.value = t.video_url || ''
|
|
showForm.value = true
|
|
}
|
|
|
|
function closeForm() {
|
|
showForm.value = false
|
|
editId.value = null
|
|
photoFile.value = null
|
|
videoFile.value = null
|
|
photoPreview.value = ''
|
|
videoPreview.value = ''
|
|
}
|
|
|
|
async function uploadFile(file: File): Promise<string> {
|
|
const fd = new FormData()
|
|
fd.append('file', file)
|
|
const { data } = await axios.post('/api/upload', fd)
|
|
return data.url as string
|
|
}
|
|
|
|
async function submitTool() {
|
|
let saved: Tool
|
|
const payload: Partial<Tool> = {
|
|
nom: form.nom,
|
|
categorie: form.categorie || undefined,
|
|
description: form.description || undefined,
|
|
boutique_nom: form.boutique_nom || undefined,
|
|
boutique_url: form.boutique_url || undefined,
|
|
prix_achat: form.prix_achat,
|
|
photo_url: form.photo_url || undefined,
|
|
video_url: form.video_url || undefined,
|
|
notice_texte: form.notice_texte || undefined,
|
|
notice_fichier_url: form.notice_fichier_url || undefined,
|
|
}
|
|
|
|
if (editId.value) {
|
|
saved = await toolsStore.update(editId.value, payload)
|
|
} else {
|
|
saved = await toolsStore.create(payload)
|
|
}
|
|
|
|
if (saved.id && (photoFile.value || videoFile.value)) {
|
|
const patch: Partial<Tool> = {}
|
|
if (photoFile.value) patch.photo_url = await uploadFile(photoFile.value)
|
|
if (videoFile.value) patch.video_url = await uploadFile(videoFile.value)
|
|
if (Object.keys(patch).length) await toolsStore.update(saved.id, patch)
|
|
}
|
|
|
|
resetForm()
|
|
closeForm()
|
|
}
|
|
|
|
async function removeTool(id: number) {
|
|
if (confirm('Supprimer cet outil ?')) await toolsStore.remove(id)
|
|
}
|
|
|
|
onMounted(() => toolsStore.fetchAll())
|
|
</script>
|