feat: debut d'un front vue.js + ajout de cursorrules
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
ca9a74fe69
commit
bee8572dc5
23
assets/vue/app/shared/components/layout/Header.vue
Normal file
23
assets/vue/app/shared/components/layout/Header.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<header class="bg-green-600 h-16 flex items-center fixed w-full z-50">
|
||||
<button
|
||||
@click="$emit('menu-click')"
|
||||
class="ml-4 text-white p-2 md:hidden"
|
||||
>
|
||||
<Bars3Icon class="h-6 w-6" />
|
||||
</button>
|
||||
<div class="flex items-center flex-1">
|
||||
<router-link to="/" class="text-white text-2xl font-bold ml-4">
|
||||
Mangarr
|
||||
</router-link>
|
||||
<SearchBar />
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Bars3Icon } from '@heroicons/vue/24/outline';
|
||||
import SearchBar from './SearchBar.vue';
|
||||
|
||||
defineEmits(['menu-click']);
|
||||
</script>
|
||||
36
assets/vue/app/shared/components/layout/Layout.vue
Normal file
36
assets/vue/app/shared/components/layout/Layout.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<Header
|
||||
@menu-click="toggleSidebar"
|
||||
@manga-click="$emit('manga-click', $event)"
|
||||
@add-manga-click="$emit('add-manga-click', $event)"
|
||||
/>
|
||||
<Sidebar
|
||||
:is-open="isSidebarOpen"
|
||||
@close="closeSidebar"
|
||||
@add-manga-click="$emit('add-manga-click', $event)"
|
||||
/>
|
||||
|
||||
<main class="pt-16 md:ml-60">
|
||||
<slot></slot>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Header from './Header.vue';
|
||||
import Sidebar from './Sidebar.vue';
|
||||
|
||||
const isSidebarOpen = ref(false);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
isSidebarOpen.value = !isSidebarOpen.value;
|
||||
};
|
||||
|
||||
const closeSidebar = () => {
|
||||
isSidebarOpen.value = false;
|
||||
};
|
||||
|
||||
defineEmits(['manga-click', 'add-manga-click']);
|
||||
</script>
|
||||
130
assets/vue/app/shared/components/layout/SearchBar.vue
Normal file
130
assets/vue/app/shared/components/layout/SearchBar.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div ref="searchRef" class="relative flex-1 max-w-xl mx-4">
|
||||
<div class="flex items-center py-1">
|
||||
<MagnifyingGlassIcon class="h-5 w-5 text-white" />
|
||||
<input
|
||||
type="text"
|
||||
v-model="query"
|
||||
@input="handleInput"
|
||||
@focus="isOpen = true"
|
||||
placeholder="Rechercher"
|
||||
class="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isOpen && query.trim()" class="absolute w-full mt-2 bg-gray-800/95 backdrop-blur-sm rounded-lg shadow-lg border border-gray-700 max-h-96 overflow-y-auto z-50">
|
||||
<div v-if="loading" class="p-4 text-center text-gray-400">
|
||||
Chargement...
|
||||
</div>
|
||||
|
||||
<template v-else-if="results.length > 0">
|
||||
<div class="py-2">
|
||||
<h3 class="px-4 py-2 text-sm font-semibold text-gray-400">
|
||||
Mangas existants
|
||||
</h3>
|
||||
<button
|
||||
v-for="manga in results"
|
||||
:key="manga.id"
|
||||
@click="handleMangaClick(manga.slug)"
|
||||
class="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white"
|
||||
>
|
||||
<img
|
||||
:src="manga.imageUrl"
|
||||
:alt="manga.title"
|
||||
class="w-10 h-14 object-cover rounded"
|
||||
/>
|
||||
<div class="text-left">
|
||||
<div class="font-medium">{{ manga.title }}</div>
|
||||
<div class="text-sm text-gray-400">{{ manga.author }} ({{ manga.publicationYear }})</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="hasSearched">
|
||||
<div class="py-2">
|
||||
<button
|
||||
@click="handleAddMangaClick"
|
||||
class="w-full px-4 py-2 flex items-center gap-2 text-green-400 hover:bg-gray-700/50"
|
||||
>
|
||||
<PlusIcon class="h-5 w-5" />
|
||||
<span>Ajouter "{{ query }}"</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/vue/24/outline';
|
||||
import {ApiMangaRepository} from "../../../domain/manga/infrastructure/api/apiMangaRepository";
|
||||
import {SearchMangas} from "../../../domain/manga/application/queries/searchMangas";
|
||||
|
||||
const mangaRepository = new ApiMangaRepository();
|
||||
const searchMangas = new SearchMangas(mangaRepository);
|
||||
|
||||
const router = useRouter();
|
||||
const searchRef = ref(null);
|
||||
const query = ref('');
|
||||
const results = ref([]);
|
||||
const isOpen = ref(false);
|
||||
const loading = ref(false);
|
||||
const hasSearched = ref(false);
|
||||
|
||||
let searchTimeout;
|
||||
|
||||
const handleInput = () => {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(searchManga, 300);
|
||||
};
|
||||
|
||||
const searchManga = async () => {
|
||||
if (!query.value.trim()) {
|
||||
results.value = [];
|
||||
hasSearched.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
results.value = await searchMangas.execute(query.value);
|
||||
hasSearched.value = true;
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMangaClick = (slug) => {
|
||||
router.push(`/manga/${slug}`);
|
||||
isOpen.value = false;
|
||||
query.value = '';
|
||||
hasSearched.value = false;
|
||||
};
|
||||
|
||||
const handleAddMangaClick = () => {
|
||||
router.push(`/add${query.value ? `?q=${encodeURIComponent(query.value)}` : ''}`);
|
||||
isOpen.value = false;
|
||||
query.value = '';
|
||||
hasSearched.value = false;
|
||||
};
|
||||
|
||||
const handleClickOutside = (event) => {
|
||||
if (searchRef.value && !searchRef.value.contains(event.target)) {
|
||||
isOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
clearTimeout(searchTimeout);
|
||||
});
|
||||
</script>
|
||||
155
assets/vue/app/shared/components/layout/Sidebar.vue
Normal file
155
assets/vue/app/shared/components/layout/Sidebar.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<aside
|
||||
:class="[
|
||||
'fixed top-16 bottom-0 left-0 w-60 bg-white transform transition-transform duration-300 ease-in-out z-40',
|
||||
isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
|
||||
]"
|
||||
>
|
||||
<nav class="h-full overflow-y-auto py-4">
|
||||
<div v-for="(item, index) in menuItems" :key="index" class="mb-2">
|
||||
<!-- Menu item with submenu -->
|
||||
<template v-if="item.id">
|
||||
<button
|
||||
@click="toggleMenu(item.id)"
|
||||
class="w-full px-4 py-2 flex items-center justify-between hover:bg-gray-100"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<component :is="item.icon" class="w-5 h-5 mr-3" />
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
<component
|
||||
:is="expandedMenus[item.id] ? ChevronUpIcon : ChevronDownIcon"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<div v-show="expandedMenus[item.id]">
|
||||
<template v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
|
||||
<router-link
|
||||
v-if="subItem.to"
|
||||
:to="subItem.to"
|
||||
class="block px-4 py-2 pl-12 hover:bg-gray-100"
|
||||
>
|
||||
{{ subItem.text }}
|
||||
</router-link>
|
||||
<button
|
||||
v-else
|
||||
@click="subItem.onClick"
|
||||
class="w-full text-left px-4 py-2 pl-12 hover:bg-gray-100"
|
||||
>
|
||||
{{ subItem.text }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Simple menu item -->
|
||||
<router-link
|
||||
v-else
|
||||
:to="item.to"
|
||||
class="block px-4 py-2 hover:bg-gray-100"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<component :is="item.icon" class="w-5 h-5 mr-3" />
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="item.badge"
|
||||
class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"
|
||||
>
|
||||
{{ item.badge }}
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
BookOpenIcon,
|
||||
PlusIcon,
|
||||
ArrowDownTrayIcon,
|
||||
GlobeAltIcon,
|
||||
ArrowsRightLeftIcon,
|
||||
CalendarIcon,
|
||||
ClockIcon,
|
||||
Cog6ToothIcon,
|
||||
ComputerDesktopIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon
|
||||
} from '@heroicons/vue/24/outline';
|
||||
|
||||
const props = defineProps({
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'add-manga-click']);
|
||||
|
||||
const expandedMenus = ref({
|
||||
mangas: true,
|
||||
settings: false,
|
||||
system: false
|
||||
});
|
||||
|
||||
const toggleMenu = (menuId) => {
|
||||
expandedMenus.value[menuId] = !expandedMenus.value[menuId];
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: BookOpenIcon,
|
||||
text: 'Mangas',
|
||||
id: 'mangas',
|
||||
subItems: [
|
||||
{ icon: PlusIcon, text: 'Ajouter un nouveau', onClick: () => emit('add-manga-click') },
|
||||
{ icon: ArrowDownTrayIcon, text: 'Import bibliothèque', to: '/import' },
|
||||
{ icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: ArrowsRightLeftIcon,
|
||||
text: 'Convertir CBR en CBZ',
|
||||
to: '/convert'
|
||||
},
|
||||
{
|
||||
icon: CalendarIcon,
|
||||
text: 'Calendrier',
|
||||
to: '/calendar'
|
||||
},
|
||||
{
|
||||
icon: ClockIcon,
|
||||
text: 'Activité',
|
||||
to: '/activity',
|
||||
badge: '3'
|
||||
},
|
||||
{
|
||||
icon: Cog6ToothIcon,
|
||||
text: 'Paramètres',
|
||||
id: 'settings',
|
||||
subItems: [
|
||||
{ text: 'Général', to: '/settings/general' },
|
||||
{ text: 'Dossiers', to: '/settings/folders' },
|
||||
{ text: 'Scrappers', to: '/settings/scrappers' },
|
||||
{ text: 'UI', to: '/settings/ui' }
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: ComputerDesktopIcon,
|
||||
text: 'Système',
|
||||
id: 'system',
|
||||
subItems: [
|
||||
{ text: 'Status', to: '/system/status' },
|
||||
{ text: 'Backup', to: '/system/backup' },
|
||||
{ text: 'Logs', to: '/system/logs' },
|
||||
{ text: 'Updates', to: '/system/updates' }
|
||||
]
|
||||
},
|
||||
];
|
||||
</script>
|
||||
47
assets/vue/app/shared/components/ui/Toolbar.vue
Normal file
47
assets/vue/app/shared/components/ui/Toolbar.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div :class="['bg-white shadow-sm px-4 py-2', $attrs.class]">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<!-- Left section -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<button
|
||||
v-for="(item, index) in config.leftSection"
|
||||
:key="index"
|
||||
@click="item.onClick"
|
||||
:class="[
|
||||
'p-2 rounded-lg transition-colors',
|
||||
item.active
|
||||
? 'bg-green-100 text-green-600'
|
||||
: 'hover:bg-gray-100'
|
||||
]"
|
||||
>
|
||||
<component :is="item.icon" class="h-5 w-5" />
|
||||
<span v-if="item.label" class="ml-2">{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Right section -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<button
|
||||
v-for="(item, index) in config.rightSection"
|
||||
:key="index"
|
||||
@click="item.onClick"
|
||||
class="p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<component :is="item.icon" class="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (value) => {
|
||||
return value.leftSection && value.rightSection;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user