Init du front
This commit is contained in:
ElPoyo
325
src/views/Texts.vue
Normal file
325
src/views/Texts.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-white py-8">
|
||||
<div class="max-w-6xl mx-auto px-4">
|
||||
<!-- En-tête avec recherche -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-4xl font-bold text-black mb-4">Collection de Textes</h1>
|
||||
<p class="text-gray-600 mb-6">
|
||||
Explorez notre collection de textes en patois franco-provençal
|
||||
</p>
|
||||
|
||||
<!-- Barre de recherche avancée -->
|
||||
<div class="bg-gray-50 rounded-lg p-6 mb-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
@input="performSearch"
|
||||
type="text"
|
||||
placeholder="Rechercher dans les textes..."
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
v-model="selectedCategory"
|
||||
@change="performSearch"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black"
|
||||
>
|
||||
<option value="">Toutes les catégories</option>
|
||||
<option v-for="category in categories" :key="category" :value="category">
|
||||
{{ category }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
v-model="selectedDifficulty"
|
||||
@change="performSearch"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black"
|
||||
>
|
||||
<option value="">Toutes les difficultés</option>
|
||||
<option value="Facile">Facile</option>
|
||||
<option value="Moyen">Moyen</option>
|
||||
<option value="Difficile">Difficile</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtres supplémentaires -->
|
||||
<div class="flex flex-wrap gap-4 mt-4">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
v-model="onlyWithAudio"
|
||||
@change="performSearch"
|
||||
type="checkbox"
|
||||
class="rounded mr-2"
|
||||
/>
|
||||
<span class="text-sm">Seulement avec audio</span>
|
||||
</label>
|
||||
<button
|
||||
@click="clearFilters"
|
||||
class="text-sm text-gray-600 hover:text-black"
|
||||
>
|
||||
Effacer les filtres
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Résultats -->
|
||||
<div class="mb-6">
|
||||
<p style="color: #6b7280" class="mb-6">
|
||||
{{ filteredTexts.length }} texte(s) trouvé(s)
|
||||
<span v-if="searchQuery || selectedCategory || selectedDifficulty || onlyWithAudio">
|
||||
pour vos critères de recherche
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Liste des textes -->
|
||||
<div class="grid gap-6">
|
||||
<div
|
||||
v-for="text in paginatedTexts"
|
||||
:key="text.id"
|
||||
class="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow cursor-pointer"
|
||||
@click="$router.push(`/texte/${text.id}`)"
|
||||
>
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-semibold text-black mb-2">
|
||||
{{ text.metadata.titre_fr }}
|
||||
</h2>
|
||||
<p class="text-lg mb-3" style="color: #6b7280">
|
||||
{{ text.metadata.titre_pt }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-4 text-sm mb-4" style="color: #6b7280">
|
||||
<span v-if="text.metadata.auteur">
|
||||
<strong>Auteur:</strong> {{ text.metadata.auteur }}
|
||||
</span>
|
||||
<span v-if="text.metadata.traducteur">
|
||||
<strong>Traducteur:</strong> {{ text.metadata.traducteur }}
|
||||
</span>
|
||||
<span v-if="text.metadata.categorie">
|
||||
<strong>Catégorie:</strong> {{ text.metadata.categorie }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Aperçu du texte -->
|
||||
<p class="text-sm line-clamp-3" style="color: #6b7280">
|
||||
{{ getTextPreview(text.frenchText) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end ml-4">
|
||||
<!-- Badges -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<span
|
||||
v-if="text.metadata.difficulte"
|
||||
class="px-2 py-1 rounded-full text-xs"
|
||||
:class="getDifficultyClass(text.metadata.difficulte)"
|
||||
>
|
||||
{{ text.metadata.difficulte }}
|
||||
</span>
|
||||
<span v-if="text.hasAudio" class="flex items-center text-xs" style="color: #6b7280">
|
||||
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v6.114A4.369 4.369 0 005 11c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.369 4.369 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"/>
|
||||
</svg>
|
||||
Audio
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div v-if="totalPages > 1" class="mt-8 flex justify-center">
|
||||
<div class="flex space-x-2">
|
||||
<button
|
||||
@click="currentPage = Math.max(1, currentPage - 1)"
|
||||
:disabled="currentPage === 1"
|
||||
class="px-4 py-2 border border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
Précédent
|
||||
</button>
|
||||
|
||||
<span class="px-4 py-2 bg-black text-white rounded-lg">
|
||||
{{ currentPage }} / {{ totalPages }}
|
||||
</span>
|
||||
|
||||
<button
|
||||
@click="currentPage = Math.min(totalPages, currentPage + 1)"
|
||||
:disabled="currentPage === totalPages"
|
||||
class="px-4 py-2 border border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
Suivant
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message si aucun résultat -->
|
||||
<div v-if="filteredTexts.length === 0" class="text-center py-12">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Aucun texte trouvé</h3>
|
||||
<p class="text-gray-500">Essayez de modifier vos critères de recherche.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { textService } from '../services/textService.js'
|
||||
|
||||
export default {
|
||||
name: 'Texts',
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
|
||||
const allTexts = ref([])
|
||||
const searchQuery = ref('')
|
||||
const selectedCategory = ref('')
|
||||
const selectedDifficulty = ref('')
|
||||
const onlyWithAudio = ref(false)
|
||||
const currentPage = ref(1)
|
||||
const textsPerPage = 10
|
||||
|
||||
const categories = computed(() => {
|
||||
const cats = new Set()
|
||||
allTexts.value.forEach(text => {
|
||||
if (text.metadata.categorie) {
|
||||
cats.add(text.metadata.categorie)
|
||||
}
|
||||
})
|
||||
return Array.from(cats).sort()
|
||||
})
|
||||
|
||||
const filteredTexts = computed(() => {
|
||||
let filtered = allTexts.value
|
||||
|
||||
// Recherche textuelle
|
||||
if (searchQuery.value.trim()) {
|
||||
const query = searchQuery.value.toLowerCase().trim()
|
||||
filtered = filtered.filter(text => {
|
||||
return (
|
||||
text.metadata.titre_fr?.toLowerCase().includes(query) ||
|
||||
text.metadata.titre_pt?.toLowerCase().includes(query) ||
|
||||
text.metadata.auteur?.toLowerCase().includes(query) ||
|
||||
text.frenchText?.toLowerCase().includes(query) ||
|
||||
text.patoisText?.toLowerCase().includes(query)
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
// Filtre par catégorie
|
||||
if (selectedCategory.value) {
|
||||
filtered = filtered.filter(text => text.metadata.categorie === selectedCategory.value)
|
||||
}
|
||||
|
||||
// Filtre par difficulté
|
||||
if (selectedDifficulty.value) {
|
||||
filtered = filtered.filter(text => text.metadata.difficulte === selectedDifficulty.value)
|
||||
}
|
||||
|
||||
// Filtre audio seulement
|
||||
if (onlyWithAudio.value) {
|
||||
filtered = filtered.filter(text => text.hasAudio)
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(filteredTexts.value.length / textsPerPage)
|
||||
})
|
||||
|
||||
const paginatedTexts = computed(() => {
|
||||
const start = (currentPage.value - 1) * textsPerPage
|
||||
const end = start + textsPerPage
|
||||
return filteredTexts.value.slice(start, end)
|
||||
})
|
||||
|
||||
const loadTexts = async () => {
|
||||
try {
|
||||
const texts = await textService.loadAllTexts()
|
||||
allTexts.value = texts
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des textes:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const performSearch = () => {
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
const clearFilters = () => {
|
||||
searchQuery.value = ''
|
||||
selectedCategory.value = ''
|
||||
selectedDifficulty.value = ''
|
||||
onlyWithAudio.value = false
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
const getTextPreview = (text) => {
|
||||
if (!text) return ''
|
||||
return text.split('\n').slice(0, 3).join(' ').substring(0, 200) + '...'
|
||||
}
|
||||
|
||||
const getDifficultyClass = (difficulty) => {
|
||||
switch (difficulty?.toLowerCase()) {
|
||||
case 'facile':
|
||||
return 'bg-green-100 text-green-800'
|
||||
case 'moyen':
|
||||
case 'moyenne':
|
||||
return 'bg-yellow-100 text-yellow-800'
|
||||
case 'difficile':
|
||||
return 'bg-red-100 text-red-800'
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800'
|
||||
}
|
||||
}
|
||||
|
||||
// Initialiser la recherche depuis l'URL
|
||||
watch(() => route.query.search, (newSearch) => {
|
||||
if (newSearch) {
|
||||
searchQuery.value = newSearch
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
onMounted(() => {
|
||||
loadTexts()
|
||||
})
|
||||
|
||||
return {
|
||||
allTexts,
|
||||
searchQuery,
|
||||
selectedCategory,
|
||||
selectedDifficulty,
|
||||
onlyWithAudio,
|
||||
currentPage,
|
||||
categories,
|
||||
filteredTexts,
|
||||
totalPages,
|
||||
paginatedTexts,
|
||||
performSearch,
|
||||
clearFilters,
|
||||
getTextPreview,
|
||||
getDifficultyClass
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user