Compare commits
1 Commits
style/simp
...
b7f4ee9082
| Author | SHA1 | Date | |
|---|---|---|---|
|
b7f4ee9082 |
@@ -1,251 +0,0 @@
|
||||
---
|
||||
name: vue-frontend
|
||||
description: Architecture Vue.js du projet Mangarr — structure DDD front (domain/application/infrastructure/presentation), patterns Pinia store, TanStack Query composables, API repositories, conventions de nommage. Utiliser quand on crée ou modifie un composant Vue, une page, un store Pinia, un composable, ou un repository API dans assets/vue/app/.
|
||||
allowed-tools: Read, Grep, Glob
|
||||
---
|
||||
|
||||
# Architecture Vue.js — Mangarr Frontend
|
||||
|
||||
## Structure des dossiers
|
||||
|
||||
```
|
||||
assets/vue/app/
|
||||
index.js # Point d'entrée : Vue + Pinia + Router + VueQuery
|
||||
App.vue # Root : <router-view> + <NotificationToast>
|
||||
router/index.js # Routes imbriquées sous Layout, base /vue/
|
||||
domain/
|
||||
{DomainName}/
|
||||
domain/
|
||||
entities/ # Classes entités JS
|
||||
constants/ # Constantes du domaine
|
||||
application/
|
||||
store/ # Stores Pinia
|
||||
infrastructure/
|
||||
api/ # Clients HTTP (ApiXxxRepository)
|
||||
presentation/
|
||||
pages/ # Composants pleine page
|
||||
components/ # Composants réutilisables
|
||||
composables/ # Logique Vue (useXxx)
|
||||
shared/
|
||||
components/
|
||||
layout/ # Layout, Header, Sidebar
|
||||
ui/ # Composants UI génériques
|
||||
composables/ # useNotifications, etc.
|
||||
stores/ # headerStore, menuStore
|
||||
plugin/ # vueQuery.js config
|
||||
```
|
||||
|
||||
**Domaines existants :** `manga`, `reader`, `import`, `conversion`, `activity`, `setting`
|
||||
|
||||
## Conventions de nommage
|
||||
|
||||
| Couche | Pattern | Exemple |
|
||||
|--------|---------|---------|
|
||||
| Entité | `PascalCase` | `Manga`, `ImportFile`, `Job` |
|
||||
| Store Pinia | `use{Domain}Store()` | `useMangaStore()` |
|
||||
| Composable | `use{Feature}()` | `useMangaDetails()`, `useNotifications()` |
|
||||
| Repository API | `Api{Domain}Repository` | `ApiMangaRepository` |
|
||||
| Page | `{Domain}{Action}.vue` | `MangaDetails.vue`, `NewImportPage.vue` |
|
||||
| Composant | `{Domain}{Feature}.vue` | `MangaCard.vue`, `StatusBadge.vue` |
|
||||
| Modal | `{Feature}Modal.vue` | `MangaDeleteModal.vue` |
|
||||
|
||||
## Pattern Store Pinia
|
||||
|
||||
```javascript
|
||||
// application/store/xyzStore.js
|
||||
export const useXyzStore = defineStore('xyz', {
|
||||
state: () => ({
|
||||
data: null,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
isReady: (state) => state.data && !state.isLoading,
|
||||
},
|
||||
|
||||
actions: {
|
||||
async load() {
|
||||
this.isLoading = true
|
||||
try {
|
||||
const repo = new ApiXyzRepository()
|
||||
this.data = await repo.getAll()
|
||||
} catch (err) {
|
||||
this.error = err.message
|
||||
throw err
|
||||
} finally {
|
||||
this.isLoading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## Pattern Composable avec TanStack Query
|
||||
|
||||
Préférer TanStack Query pour les lectures (queries), le store Pinia pour les mutations et l'état global.
|
||||
|
||||
```javascript
|
||||
// presentation/composables/useXyzDetails.js
|
||||
export function useXyzDetails(xyzId) {
|
||||
const repo = new ApiXyzRepository()
|
||||
|
||||
return useQuery({
|
||||
queryKey: ['xyz', xyzId],
|
||||
queryFn: () => repo.getById(xyzId.value),
|
||||
enabled: computed(() => !!xyzId.value),
|
||||
staleTime: 5 * 60 * 1000,
|
||||
refetchOnWindowFocus: true,
|
||||
})
|
||||
}
|
||||
|
||||
// Mutation
|
||||
export function useXyzEdit() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (data) => new ApiXyzRepository().edit(data),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['xyz'] }),
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## Pattern Repository API
|
||||
|
||||
```javascript
|
||||
// infrastructure/api/apiXyzRepository.js
|
||||
export class ApiXyzRepository {
|
||||
async getAll() {
|
||||
const response = await fetch('/api/xyz')
|
||||
if (!response.ok) throw new Error(await this.#extractError(response))
|
||||
const data = await response.json()
|
||||
return data.items.map(Xyz.fromApiData)
|
||||
}
|
||||
|
||||
async getById(id) {
|
||||
const response = await fetch(`/api/xyz/${id}`)
|
||||
if (!response.ok) throw new Error(await this.#extractError(response))
|
||||
return Xyz.fromApiData(await response.json())
|
||||
}
|
||||
|
||||
async create(payload) {
|
||||
const response = await fetch('/api/xyz', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
if (!response.ok) throw new Error(await this.#extractError(response))
|
||||
return Xyz.fromApiData(await response.json())
|
||||
}
|
||||
|
||||
async #extractError(response) {
|
||||
try {
|
||||
const data = await response.json()
|
||||
return data.error || data.detail || `HTTP ${response.status}`
|
||||
} catch {
|
||||
return `HTTP ${response.status}`
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Pattern Entité
|
||||
|
||||
```javascript
|
||||
// domain/entities/xyz.js
|
||||
export class Xyz {
|
||||
constructor({ id, name, status }) {
|
||||
this.id = id
|
||||
this.name = name
|
||||
this.status = status
|
||||
}
|
||||
|
||||
static fromApiData(data) {
|
||||
return new Xyz(data)
|
||||
}
|
||||
|
||||
isActive() { return this.status === 'active' }
|
||||
isCompleted() { return this.status === 'completed' }
|
||||
}
|
||||
```
|
||||
|
||||
## Pattern Page
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<Toolbar :config="toolbarConfig" />
|
||||
<LoadingSpinner v-if="isLoading" />
|
||||
<div v-else-if="error">{{ error }}</div>
|
||||
<ChildComponent v-else :data="data" @action="handleAction" />
|
||||
<FeatureModal :is-open="isModalOpen" @close="closeModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useFeatureComposable } from '../composables/useFeature'
|
||||
|
||||
const route = useRoute()
|
||||
const { data, isLoading, error } = useFeatureComposable(
|
||||
computed(() => route.params.id)
|
||||
)
|
||||
|
||||
const isModalOpen = ref(false)
|
||||
const closeModal = () => (isModalOpen.value = false)
|
||||
</script>
|
||||
```
|
||||
|
||||
## Système de notifications (global)
|
||||
|
||||
```javascript
|
||||
import { useNotifications } from '@/shared/composables/useNotifications'
|
||||
|
||||
const { showSuccess, showError, showWarning, showInfo } = useNotifications()
|
||||
|
||||
showSuccess('Manga ajouté avec succès')
|
||||
showError('Erreur lors du chargement')
|
||||
```
|
||||
|
||||
## Configuration VueQuery (shared/plugin/vueQuery.js)
|
||||
|
||||
- `staleTime`: 5 minutes
|
||||
- `gcTime`: 10 minutes
|
||||
- `retry`: 1
|
||||
- `refetchOnWindowFocus`: true
|
||||
|
||||
## Upload de fichiers (FormData)
|
||||
|
||||
Ne pas définir `Content-Type` manuellement — le navigateur le gère automatiquement avec le boundary correct.
|
||||
|
||||
```javascript
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('mangaId', mangaId)
|
||||
|
||||
const response = await fetch('/api/xyz/import', {
|
||||
method: 'POST',
|
||||
body: formData, // pas de Content-Type header
|
||||
})
|
||||
```
|
||||
|
||||
## Commandes utiles
|
||||
|
||||
```bash
|
||||
make npm-run # Build dev one-shot — vérifie qu'il n'y a pas d'erreur de compilation
|
||||
make npm-watch # Watch + rebuild automatique pendant le développement
|
||||
make npm-add p=pkg # Ajouter une dépendance npm
|
||||
```
|
||||
|
||||
Après toute modification de composants Vue, stores ou repositories, lancer `make npm-run` pour valider le build.
|
||||
|
||||
## Règles à respecter
|
||||
|
||||
- **Domain** : entités JS pures, aucune dépendance Vue/fetch
|
||||
- **Application** : stores Pinia uniquement, pas d'appels fetch directs (passer par Infrastructure)
|
||||
- **Infrastructure** : repositories API, aucune logique Vue
|
||||
- **Presentation** : composants + composables, import uniquement depuis Application et Infrastructure
|
||||
- **Shared** : composants/composables transversaux, pas de dépendances vers les domaines
|
||||
- Préférer `useQuery`/`useMutation` (TanStack) pour les données serveur, Pinia pour l'état UI global
|
||||
- Un composable = une responsabilité, nommé `use{FeatureVerb}` (ex: `useMangaDelete`, `useMangaEdit`)
|
||||
@@ -1,4 +1,4 @@
|
||||
name: Deploy
|
||||
name: Build and Deploy
|
||||
|
||||
on:
|
||||
push:
|
||||
@@ -9,34 +9,63 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup SSH
|
||||
- name: Install tools
|
||||
run: |
|
||||
mkdir -p ~/.ssh
|
||||
echo "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/id_ed25519
|
||||
chmod 600 ~/.ssh/id_ed25519
|
||||
ssh-keyscan -H "${{ secrets.DEPLOY_HOST }}" >> ~/.ssh/known_hosts
|
||||
apt-get update && apt-get install -y docker.io curl jq
|
||||
|
||||
- name: Deploy via Deployer
|
||||
- name: Build production image
|
||||
run: |
|
||||
docker build --target frankenphp_prod -t mangarr:latest .
|
||||
|
||||
- name: Redeploy via Portainer API
|
||||
env:
|
||||
DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
|
||||
GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
|
||||
PORTAINER_USER: ${{ secrets.PORTAINER_USER }}
|
||||
PORTAINER_PASSWORD: ${{ secrets.PORTAINER_PASSWORD }}
|
||||
run: |
|
||||
# Créer le container sans le démarrer (évite le problème DinD avec les volumes)
|
||||
CONTAINER=$(docker create \
|
||||
-e DEPLOY_HOST \
|
||||
-e GITEA_TOKEN \
|
||||
-w /app \
|
||||
deployphp/deployer:v7 \
|
||||
-f /app/deploy.php deploy production -vvv)
|
||||
JWT=$(curl -s -X POST http://portainer:9000/api/auth \
|
||||
-H "Content-Type: application/json" \
|
||||
-d "{\"Username\":\"$PORTAINER_USER\",\"Password\":\"$PORTAINER_PASSWORD\"}" | jq -r '.jwt')
|
||||
|
||||
# Copier les sources et les clés SSH dans le container
|
||||
docker cp "$PWD/." "$CONTAINER:/app/"
|
||||
docker cp "$HOME/.ssh/." "$CONTAINER:/root/.ssh/"
|
||||
if [ -z "$JWT" ] || [ "$JWT" = "null" ]; then
|
||||
echo "Erreur: authentification Portainer echouee"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Démarrer et attendre la fin
|
||||
docker start -a "$CONTAINER"
|
||||
EXIT_CODE=$?
|
||||
docker rm "$CONTAINER" || true
|
||||
exit $EXIT_CODE
|
||||
STACK_INFO=$(curl -s http://portainer:9000/api/stacks \
|
||||
-H "Authorization: Bearer $JWT")
|
||||
STACK_ID=$(echo "$STACK_INFO" | jq '.[] | select(.Name=="mangarr") | .Id')
|
||||
ENDPOINT_ID=$(echo "$STACK_INFO" | jq '.[] | select(.Name=="mangarr") | .EndpointId')
|
||||
|
||||
if [ -z "$STACK_ID" ] || [ "$STACK_ID" = "null" ]; then
|
||||
echo "Erreur: stack mangarr non trouvee"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "Stack ID: $STACK_ID, Endpoint ID: $ENDPOINT_ID"
|
||||
|
||||
STACK_FILE=$(curl -s "http://portainer:9000/api/stacks/$STACK_ID/file" \
|
||||
-H "Authorization: Bearer $JWT" | jq -r '.StackFileContent')
|
||||
STACK_ENV=$(curl -s "http://portainer:9000/api/stacks/$STACK_ID" \
|
||||
-H "Authorization: Bearer $JWT" | jq '.Env')
|
||||
|
||||
HTTP_CODE=$(curl -s -o /tmp/deploy_result.json -w "%{http_code}" -X PUT \
|
||||
"http://portainer:9000/api/stacks/$STACK_ID?endpointId=$ENDPOINT_ID" \
|
||||
-H "Authorization: Bearer $JWT" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d "{\"stackFileContent\":$(echo "$STACK_FILE" | jq -Rs .),\"env\":$STACK_ENV,\"prune\":true,\"pullImage\":false}")
|
||||
|
||||
echo "Portainer redeploy: HTTP $HTTP_CODE"
|
||||
if [ "$HTTP_CODE" -ge 300 ]; then
|
||||
cat /tmp/deploy_result.json
|
||||
exit 1
|
||||
fi
|
||||
|
||||
- name: Run migrations
|
||||
run: |
|
||||
echo "Attente du demarrage de Mangarr..."
|
||||
sleep 15
|
||||
docker exec mangarr php bin/console doctrine:migrations:migrate --no-interaction || echo "Rien a migrer"
|
||||
docker exec mangarr php bin/console cache:clear --env=prod || true
|
||||
echo "Deploy termine avec succes"
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -38,4 +38,3 @@ yarn-error.log
|
||||
/public/images/
|
||||
src/Controller/TestController.php
|
||||
.phpunit.cache/test-results
|
||||
/tests/Fixtures/pages/
|
||||
|
||||
13
Dockerfile
13
Dockerfile
@@ -68,19 +68,6 @@ ENTRYPOINT ["docker-entrypoint"]
|
||||
HEALTHCHECK --start-period=60s CMD curl -f http://localhost:2019/metrics || exit 1
|
||||
CMD [ "frankenphp", "run", "--config", "/etc/caddy/Caddyfile" ]
|
||||
|
||||
# Runtime FrankenPHP image (sans code baked-in)
|
||||
# Le code vient du bind mount /srv/mangarr/current:/app (géré par Deployer)
|
||||
# Builder une seule fois : docker build --target frankenphp_runtime -t mangarr:runtime .
|
||||
FROM frankenphp_base AS frankenphp_runtime
|
||||
|
||||
ENV APP_ENV=prod
|
||||
ENV FRANKENPHP_CONFIG="import worker.Caddyfile"
|
||||
|
||||
RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"
|
||||
|
||||
COPY --link frankenphp/conf.d/app.prod.ini $PHP_INI_DIR/conf.d/
|
||||
COPY --link frankenphp/worker.Caddyfile /etc/caddy/worker.Caddyfile
|
||||
|
||||
# Dev FrankenPHP image
|
||||
FROM frankenphp_base AS frankenphp_dev
|
||||
|
||||
|
||||
7
Makefile
7
Makefile
@@ -145,13 +145,6 @@ twig-extension: ## Create a new twig extension
|
||||
stimulus: ## Create a new stimulus controller
|
||||
@$(SYMFONY) make:stimulus-controller
|
||||
|
||||
notify-test: ## Envoie les 4 types de notifications de test avec 2s d'intervalle
|
||||
@for type in info success error warning; do \
|
||||
$(SYMFONY) app:notify:test --type=$$type --message="Test $$type depuis Mangarr"; \
|
||||
echo "[$$type] envoyé"; \
|
||||
sleep 2; \
|
||||
done
|
||||
|
||||
consume-commands: ## Consume commands messages
|
||||
@$(SYMFONY) messenger:consume commands -vv
|
||||
|
||||
|
||||
@@ -3,11 +3,6 @@
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
html, body {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
@@ -87,33 +82,6 @@ body {
|
||||
@apply bg-gray-700;
|
||||
}
|
||||
|
||||
/* Firefox uniquement — évite le conflit avec les pseudo-éléments webkit sur Chrome 121+ */
|
||||
@supports (-moz-appearance: none) {
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #16a34a transparent;
|
||||
}
|
||||
|
||||
.dark * {
|
||||
scrollbar-color: #16a34a #1f2937;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode — webkit track */
|
||||
.dark ::-webkit-scrollbar-track {
|
||||
@apply bg-gray-800;
|
||||
}
|
||||
|
||||
/* Supprime les flèches de la scrollbar */
|
||||
::-webkit-scrollbar-button:start:decrement,
|
||||
::-webkit-scrollbar-button:end:increment,
|
||||
::-webkit-scrollbar-button:start:increment,
|
||||
::-webkit-scrollbar-button:end:decrement {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
///* Custom styles for the scrollbar buttons */
|
||||
//::-webkit-scrollbar-button {
|
||||
// @apply bg-gray-700;
|
||||
|
||||
@@ -5,9 +5,6 @@
|
||||
|
||||
<script setup>
|
||||
import NotificationToast from './shared/components/ui/NotificationToast.vue';
|
||||
import { useMercureNotifications } from './shared/composables/useMercureNotifications';
|
||||
|
||||
useMercureNotifications();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -7,12 +7,8 @@ export class Job {
|
||||
payload = {},
|
||||
result = null,
|
||||
error = null,
|
||||
failureReason = null,
|
||||
createdAt = new Date().toISOString(),
|
||||
updatedAt = new Date().toISOString(),
|
||||
attempts = 0,
|
||||
maxAttempts = 1,
|
||||
context = {}
|
||||
updatedAt = new Date().toISOString()
|
||||
}) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
@@ -20,12 +16,9 @@ export class Job {
|
||||
this.progress = progress;
|
||||
this.payload = payload;
|
||||
this.result = result;
|
||||
this.error = failureReason ?? error;
|
||||
this.error = error;
|
||||
this.createdAt = createdAt;
|
||||
this.updatedAt = updatedAt;
|
||||
this.attempts = attempts;
|
||||
this.maxAttempts = maxAttempts;
|
||||
this.context = context;
|
||||
}
|
||||
|
||||
static create(data) {
|
||||
|
||||
@@ -23,6 +23,8 @@ export class ApiJobRepository extends JobRepositoryInterface {
|
||||
url += `&status=${status.join(',')}`;
|
||||
}
|
||||
|
||||
console.log('Fetching jobs from URL:', url);
|
||||
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
@@ -30,6 +32,7 @@ export class ApiJobRepository extends JobRepositoryInterface {
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('API Response:', data);
|
||||
|
||||
// Gérer différents formats de réponse API
|
||||
let jobs, total, currentPage, limit_returned, hasNext, hasPrev;
|
||||
@@ -60,6 +63,15 @@ export class ApiJobRepository extends JobRepositoryInterface {
|
||||
hasPrev = !!data.hasPreviousPage;
|
||||
}
|
||||
|
||||
console.log('Processed data:', {
|
||||
jobs: jobs.length,
|
||||
total,
|
||||
currentPage,
|
||||
limit_returned,
|
||||
hasNext,
|
||||
hasPrev
|
||||
});
|
||||
|
||||
return new JobCollection(
|
||||
jobs,
|
||||
total,
|
||||
@@ -69,6 +81,7 @@ export class ApiJobRepository extends JobRepositoryInterface {
|
||||
hasPrev
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('API Error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
@@ -89,6 +102,7 @@ export class ApiJobRepository extends JobRepositoryInterface {
|
||||
const data = await response.json();
|
||||
return Job.create(data);
|
||||
} catch (error) {
|
||||
console.error('API Error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
@@ -110,6 +124,7 @@ export class ApiJobRepository extends JobRepositoryInterface {
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('API Error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
@@ -143,6 +158,7 @@ export class ApiJobRepository extends JobRepositoryInterface {
|
||||
const data = await response.json();
|
||||
return data.deleted || 0;
|
||||
} catch (error) {
|
||||
console.error('API Error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,56 +1,39 @@
|
||||
<template>
|
||||
<tr
|
||||
class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition duration-150 ease-in-out"
|
||||
class="border-b border-gray-200 hover:bg-gray-50 transition duration-150 ease-in-out"
|
||||
:class="{
|
||||
'bg-yellow-50 dark:bg-yellow-900/20': job.status === 'pending',
|
||||
'bg-blue-50 dark:bg-blue-900/20': job.status === 'in_progress',
|
||||
'bg-green-50 dark:bg-green-900/20': job.status === 'completed',
|
||||
'bg-red-50 dark:bg-red-900/20': job.status === 'failed'
|
||||
'bg-yellow-50': job.status === 'pending',
|
||||
'bg-blue-50': job.status === 'in_progress',
|
||||
'bg-green-50': job.status === 'completed',
|
||||
'bg-red-50': job.status === 'failed'
|
||||
}">
|
||||
<td class="py-4 px-4 text-center">
|
||||
<input type="checkbox" class="form-checkbox h-5 w-5 text-green-600" />
|
||||
</td>
|
||||
<td class="py-4 px-4 font-medium">
|
||||
<div>{{ jobTypeLabel }}</div>
|
||||
<div v-if="job.context?.mangaTitle" class="text-xs text-gray-500 mt-0.5">
|
||||
{{ job.context.mangaTitle }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-4 font-medium">{{ job.type }}</td>
|
||||
<td class="py-4 px-4">
|
||||
<span
|
||||
class="px-2 py-1 text-xs rounded-full"
|
||||
:class="{
|
||||
'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300': job.status === 'pending',
|
||||
'bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300': job.status === 'in_progress',
|
||||
'bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300': job.status === 'completed',
|
||||
'bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300': job.status === 'failed'
|
||||
'bg-yellow-100 text-yellow-800': job.status === 'pending',
|
||||
'bg-blue-100 text-blue-800': job.status === 'in_progress',
|
||||
'bg-green-100 text-green-800': job.status === 'completed',
|
||||
'bg-red-100 text-red-800': job.status === 'failed'
|
||||
}">
|
||||
{{ job.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-4 px-4">
|
||||
<div v-if="job.error" class="text-sm text-red-600 dark:text-red-400">
|
||||
<div v-if="job.error" class="text-sm text-red-600">
|
||||
{{ job.error }}
|
||||
</div>
|
||||
<div v-else-if="job.context?.mangaTitle || job.context?.chapterNumber !== undefined || job.context?.sourceId"
|
||||
class="text-sm text-gray-700 dark:text-gray-300 space-y-0.5">
|
||||
<div v-if="job.context.mangaTitle" class="font-medium">
|
||||
{{ job.context.mangaTitle }}
|
||||
</div>
|
||||
<div v-if="job.context.chapterNumber !== undefined" class="text-gray-500 dark:text-gray-400">
|
||||
Chapitre {{ job.context.chapterNumber }}
|
||||
</div>
|
||||
<div v-if="job.context.sourceId" class="text-xs text-gray-400 dark:text-gray-500">
|
||||
Source : {{ job.context.sourceId }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-sm text-gray-600 dark:text-gray-400">
|
||||
<div v-else class="text-sm text-gray-600">
|
||||
{{ formatDate(job.createdAt) }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-4">
|
||||
<div v-if="job.status === 'in_progress'" class="mt-2">
|
||||
<div class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
|
||||
<div class="relative bg-gray-200 rounded-full h-6 overflow-hidden">
|
||||
<div
|
||||
class="absolute top-0 left-0 h-full bg-green-400 transition-all duration-300 ease-out"
|
||||
:style="{ width: `${job.progress}%` }"></div>
|
||||
@@ -59,7 +42,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="job.status === 'completed'" class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
|
||||
<div v-else-if="job.status === 'completed'" class="relative bg-gray-200 rounded-full h-6 overflow-hidden">
|
||||
<div
|
||||
class="absolute top-0 left-0 h-full bg-green-400 transition-all duration-300 ease-out"
|
||||
style="width: 100%"></div>
|
||||
@@ -67,7 +50,7 @@
|
||||
100%
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="job.status === 'failed'" class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
|
||||
<div v-else-if="job.status === 'failed'" class="relative bg-gray-200 rounded-full h-6 overflow-hidden">
|
||||
<div
|
||||
class="absolute top-0 left-0 h-full bg-red-400 transition-all duration-300 ease-out"
|
||||
style="width: 100%"></div>
|
||||
@@ -75,19 +58,14 @@
|
||||
Erreur
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
|
||||
<div v-else class="relative bg-gray-200 rounded-full h-6 overflow-hidden">
|
||||
<div
|
||||
class="absolute top-0 left-0 h-full bg-yellow-400 transition-all duration-300 ease-out"
|
||||
style="width: 0%"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-gray-600 dark:text-gray-300">
|
||||
<div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-gray-600">
|
||||
En attente
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="job.maxAttempts > 1 || job.attempts > 0"
|
||||
class="text-xs text-gray-400 dark:text-gray-500 mt-1 text-center">
|
||||
{{ job.attempts }} / {{ job.maxAttempts }} tentative{{ job.maxAttempts > 1 ? 's' : '' }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-4">
|
||||
<button
|
||||
@@ -101,33 +79,24 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { TrashIcon } from '@heroicons/vue/24/outline';
|
||||
import { computed, defineEmits, defineProps } from 'vue';
|
||||
import { TrashIcon } from '@heroicons/vue/24/outline';
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
job: {
|
||||
type: Object,
|
||||
required: true
|
||||
const props = defineProps({
|
||||
job: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['delete']);
|
||||
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['delete']);
|
||||
|
||||
const JOB_TYPE_LABELS = {
|
||||
scraping_job: 'Scraping',
|
||||
conversion_job: 'Conversion',
|
||||
};
|
||||
|
||||
const jobTypeLabel = computed(() =>
|
||||
JOB_TYPE_LABELS[props.job.type] ?? props.job.type
|
||||
);
|
||||
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
function onDelete() {
|
||||
emit('delete', props.job.id);
|
||||
}
|
||||
function onDelete() {
|
||||
emit('delete', props.job.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,21 +1,31 @@
|
||||
<template>
|
||||
<div class="overflow-y-auto h-full">
|
||||
<div>
|
||||
<Toolbar :config="toolbarConfig" class="mb-6" />
|
||||
|
||||
<div v-if="activityStore.loading" class="flex justify-center py-8">
|
||||
<div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-indigo-500"></div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="activityStore.error" class="bg-red-100 dark:bg-red-900/20 border-l-4 border-red-500 text-red-700 dark:text-red-400 p-4 mb-6">
|
||||
<div v-else-if="activityStore.error" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6">
|
||||
<p>{{ activityStore.error }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="container mx-auto p-2">
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
|
||||
<!-- Debug pagination - À supprimer plus tard -->
|
||||
<div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4" v-if="true">
|
||||
<strong>Debug Pagination:</strong>
|
||||
Total: {{ activityStore.total }},
|
||||
Limit: {{ activityStore.limit }},
|
||||
Pages: {{ activityStore.totalPages }},
|
||||
Page courante: {{ activityStore.currentPage }},
|
||||
Condition: {{ activityStore.total > activityStore.limit }}
|
||||
</div>
|
||||
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full bg-white dark:bg-gray-800">
|
||||
<table class="min-w-full bg-white">
|
||||
<thead>
|
||||
<tr class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
|
||||
<tr class="bg-gray-200 text-gray-800">
|
||||
<th class="w-1/12 py-3 px-4 text-left">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -29,14 +39,14 @@
|
||||
<th class="w-1/12 py-3 px-4 text-left">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-700 dark:text-gray-300">
|
||||
<tbody class="text-gray-700">
|
||||
<template v-if="activityStore.jobs.length === 0">
|
||||
<tr>
|
||||
<td colspan="6" class="py-8 px-4 text-center text-gray-500">
|
||||
<div class="flex flex-col items-center">
|
||||
<ClockIcon class="h-12 w-12 text-gray-300 dark:text-gray-600 mb-4" />
|
||||
<p class="text-lg font-medium dark:text-gray-300">Aucune activité trouvée</p>
|
||||
<p class="text-sm dark:text-gray-400">Aucune activité ne correspond aux filtres actuels.</p>
|
||||
<ClockIcon class="h-12 w-12 text-gray-300 mb-4" />
|
||||
<p class="text-lg font-medium">Aucune activité trouvée</p>
|
||||
<p class="text-sm">Aucune activité ne correspond aux filtres actuels.</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -24,10 +24,10 @@
|
||||
|
||||
<!-- Message de statut -->
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ statusMessage }}
|
||||
</p>
|
||||
<p v-if="fileName" class="text-xs text-gray-500 dark:text-gray-400">
|
||||
<p v-if="fileName" class="text-xs text-gray-500">
|
||||
{{ fileName }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -35,11 +35,11 @@
|
||||
|
||||
<!-- Barre de progression -->
|
||||
<div v-if="showProgress" class="space-y-2">
|
||||
<div class="flex justify-between text-xs text-gray-600 dark:text-gray-400">
|
||||
<div class="flex justify-between text-xs text-gray-600">
|
||||
<span>Progression</span>
|
||||
<span>{{ Math.round(progress) }}%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
class="bg-blue-500 h-2 rounded-full transition-all duration-300 ease-out"
|
||||
:style="{ width: `${progress}%` }"
|
||||
@@ -48,7 +48,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Détails de la conversion -->
|
||||
<div v-if="showDetails && (originalSize || convertedSize)" class="text-xs text-gray-500 dark:text-gray-400 space-y-1">
|
||||
<div v-if="showDetails && (originalSize || convertedSize)" class="text-xs text-gray-500 space-y-1">
|
||||
<div v-if="originalSize" class="flex justify-between">
|
||||
<span>Taille originale:</span>
|
||||
<span>{{ formatFileSize(originalSize) }}</span>
|
||||
@@ -77,7 +77,7 @@
|
||||
<button
|
||||
v-if="canReset"
|
||||
@click="$emit('reset')"
|
||||
class="flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
|
||||
class="flex items-center space-x-2 px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
|
||||
>
|
||||
<ArrowPathIcon class="w-4 h-4" />
|
||||
<span>Convertir un autre fichier</span>
|
||||
@@ -85,14 +85,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Message d'erreur détaillé -->
|
||||
<div v-if="hasError && errorMessage" class="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
|
||||
<div v-if="hasError && errorMessage" class="p-3 bg-red-50 border border-red-200 rounded-md">
|
||||
<div class="flex">
|
||||
<ExclamationTriangleIcon class="w-5 h-5 text-red-400 flex-shrink-0" />
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800 dark:text-red-300">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
Erreur de conversion
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-red-700 dark:text-red-400">
|
||||
<p class="mt-1 text-sm text-red-700">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
:class="[
|
||||
'border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200',
|
||||
isDragOver
|
||||
? 'border-green-400 bg-green-50 dark:bg-green-900/20'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
|
||||
? 'border-green-400 bg-green-50'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
]"
|
||||
>
|
||||
<!-- Zone d'upload -->
|
||||
@@ -28,13 +28,13 @@
|
||||
|
||||
<!-- Message principal -->
|
||||
<div class="space-y-2">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
<h3 class="text-lg font-medium text-gray-900">
|
||||
{{ isDragOver ? 'Déposez votre fichier ici' : 'Sélectionnez un fichier CBR ou CBZ' }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p class="text-sm text-gray-500">
|
||||
Glissez-déposez votre fichier ou cliquez pour le sélectionner
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500">
|
||||
<p class="text-xs text-gray-400">
|
||||
Fichiers supportés: .cbr, .cbz (max. 150MB)
|
||||
</p>
|
||||
</div>
|
||||
@@ -63,20 +63,20 @@
|
||||
</div>
|
||||
|
||||
<!-- Informations du fichier sélectionné -->
|
||||
<div v-if="selectedFile" class="mt-6 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div v-if="selectedFile" class="mt-6 p-4 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center space-x-3">
|
||||
<DocumentIcon class="w-8 h-8 text-gray-600 dark:text-gray-400" />
|
||||
<DocumentIcon class="w-8 h-8 text-gray-600" />
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
<p class="text-sm font-medium text-gray-900 truncate">
|
||||
{{ selectedFile.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ formatFileSize(selectedFile.size) }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@click="clearFile"
|
||||
class="p-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||
class="p-1 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
title="Supprimer le fichier"
|
||||
>
|
||||
<XMarkIcon class="w-5 h-5" />
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<!-- En-tête -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center space-x-3 mb-4">
|
||||
<ArrowPathIcon class="w-8 h-8 text-green-600" />
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">
|
||||
<h1 class="text-3xl font-bold text-gray-900">
|
||||
Convertir CBR en CBZ
|
||||
</h1>
|
||||
</div>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
<p class="text-lg text-gray-600">
|
||||
Convertissez vos fichiers CBR (Comic Book RAR) en CBZ (Comic Book ZIP) pour une meilleure compatibilité.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Zone principale -->
|
||||
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
|
||||
<div class="bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<!-- En-tête de la carte -->
|
||||
<div class="bg-gray-800 text-white p-6">
|
||||
<div class="flex items-center space-x-3">
|
||||
@@ -75,14 +75,14 @@
|
||||
/>
|
||||
|
||||
<!-- Message d'information -->
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div class="flex">
|
||||
<InformationCircleIcon class="w-5 h-5 text-blue-500 flex-shrink-0" />
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-blue-800 dark:text-blue-300">
|
||||
<h3 class="text-sm font-medium text-blue-800">
|
||||
À propos de la conversion
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-blue-700 dark:text-blue-400 space-y-1">
|
||||
<div class="mt-2 text-sm text-blue-700 space-y-1">
|
||||
<p>• Les fichiers CBZ sont plus largement supportés par les lecteurs de bandes dessinées</p>
|
||||
<p>• La compression ZIP permet généralement une meilleure accessibilité</p>
|
||||
<p>• Aucune perte de qualité lors de la conversion</p>
|
||||
@@ -95,34 +95,34 @@
|
||||
<!-- Historique des conversions -->
|
||||
<div v-if="conversionStore.conversionCount > 0" class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
<h3 class="text-lg font-medium text-gray-900">
|
||||
Historique des conversions
|
||||
</h3>
|
||||
<button
|
||||
@click="handleClearHistory"
|
||||
class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
|
||||
class="text-sm text-gray-500 hover:text-gray-700 transition-colors"
|
||||
>
|
||||
Effacer l'historique
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="(conversion, index) in conversionStore.conversionHistory"
|
||||
:key="index"
|
||||
class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-600 last:border-b-0"
|
||||
class="flex items-center justify-between py-2 border-b border-gray-200 last:border-b-0"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ conversion.originalName }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
<p class="text-xs text-gray-500">
|
||||
{{ formatDate(conversion.timestamp) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
<p class="text-sm text-gray-600">
|
||||
{{ formatFileSize(conversion.originalSize) }} → {{ formatFileSize(conversion.convertedSize) }}
|
||||
</p>
|
||||
<p class="text-xs text-green-600">
|
||||
@@ -150,7 +150,7 @@
|
||||
<XMarkIcon class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-6">
|
||||
<div class="bg-white rounded-lg shadow-sm border p-6">
|
||||
<div class="flex items-start space-x-4">
|
||||
<!-- File Icon and Info -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
</div>
|
||||
@@ -13,7 +13,7 @@
|
||||
<!-- File Details -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
<h3 class="text-lg font-medium text-gray-900 truncate">
|
||||
{{ file.filename }}
|
||||
</h3>
|
||||
|
||||
@@ -23,29 +23,29 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
{{ file.getFormattedSize() }} • {{ file.getFileExtension().toUpperCase() }}
|
||||
</p>
|
||||
|
||||
<!-- Extracted Info -->
|
||||
<div v-if="file.isAnalyzed()" class="mt-2 flex gap-3 text-sm">
|
||||
<span v-if="file.getExtractedChapterNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
|
||||
<span v-if="file.getExtractedChapterNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-blue-50 text-blue-700">
|
||||
Chapitre {{ file.getExtractedChapterNumber() }}
|
||||
</span>
|
||||
<span v-if="file.getExtractedVolumeNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
|
||||
<span v-if="file.getExtractedVolumeNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-purple-50 text-purple-700">
|
||||
Volume {{ file.getExtractedVolumeNumber() }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Error Display -->
|
||||
<div v-if="file.hasError()" class="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
|
||||
<div v-if="file.hasError()" class="mt-3 p-3 bg-red-50 border border-red-200 rounded-md">
|
||||
<div class="flex">
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800 dark:text-red-300">Erreur</h3>
|
||||
<div class="mt-2 text-sm text-red-700 dark:text-red-400">{{ file.errorMessage }}</div>
|
||||
<h3 class="text-sm font-medium text-red-800">Erreur</h3>
|
||||
<div class="mt-2 text-sm text-red-700">{{ file.errorMessage }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,7 +53,7 @@
|
||||
<!-- Manga Selection -->
|
||||
<div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-4 space-y-3">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-3">
|
||||
Sélectionner un manga ({{ file.getMatches().length }} correspondance(s) trouvée(s))
|
||||
</label>
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Selected Manga Preview -->
|
||||
<div v-if="file.selectedManga" class="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
|
||||
<div v-if="file.selectedManga" class="flex items-center gap-3 p-3 bg-blue-50 border border-blue-200 rounded-md">
|
||||
<img
|
||||
v-if="file.selectedManga.thumbnailUrl"
|
||||
:src="file.selectedManga.thumbnailUrl"
|
||||
@@ -78,9 +78,9 @@
|
||||
class="w-12 h-16 object-cover rounded"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-900 dark:text-gray-100">{{ file.selectedManga.title }}</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">{{ file.selectedManga.slug }}</p>
|
||||
<p class="text-xs text-blue-600 dark:text-blue-400 mt-1">Score: {{ file.selectedManga.matchScore }}%</p>
|
||||
<p class="font-medium text-gray-900">{{ file.selectedManga.title }}</p>
|
||||
<p class="text-sm text-gray-500">{{ file.selectedManga.slug }}</p>
|
||||
<p class="text-xs text-blue-600 mt-1">Score: {{ file.selectedManga.matchScore }}%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
<div v-if="file.selectedManga" class="grid grid-cols-2 gap-3">
|
||||
<!-- Chapter Number -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Numéro de chapitre
|
||||
</label>
|
||||
<input
|
||||
@@ -97,14 +97,14 @@
|
||||
:value="file.selectedChapterNumber ?? ''"
|
||||
@input="handleChapterNumberInput"
|
||||
:disabled="file.selectedVolumeNumber !== null"
|
||||
class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600"
|
||||
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100"
|
||||
placeholder="Ex: 1, 1.5, 2..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Volume Number -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Numéro de volume
|
||||
</label>
|
||||
<input
|
||||
@@ -113,7 +113,7 @@
|
||||
:value="file.selectedVolumeNumber ?? ''"
|
||||
@input="handleVolumeNumberInput"
|
||||
:disabled="file.selectedChapterNumber !== null"
|
||||
class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600"
|
||||
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100"
|
||||
placeholder="Ex: 1, 1.5, 2..."
|
||||
/>
|
||||
</div>
|
||||
@@ -121,14 +121,14 @@
|
||||
</div>
|
||||
|
||||
<!-- No Matches Message -->
|
||||
<div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
|
||||
<div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
|
||||
<div class="flex">
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-300">Aucun manga trouvé</h3>
|
||||
<div class="mt-2 text-sm text-yellow-700 dark:text-yellow-400">
|
||||
<h3 class="text-sm font-medium text-yellow-800">Aucun manga trouvé</h3>
|
||||
<div class="mt-2 text-sm text-yellow-700">
|
||||
Aucun manga ne correspond à ce fichier. Vérifiez le nom du fichier.
|
||||
</div>
|
||||
</div>
|
||||
@@ -138,7 +138,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="mt-6 flex justify-between items-center border-t dark:border-gray-700 pt-4">
|
||||
<div class="mt-6 flex justify-between items-center">
|
||||
<div class="flex space-x-3">
|
||||
<!-- Import Button -->
|
||||
<button
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-6">
|
||||
<div class="bg-white rounded-lg shadow-sm border p-6">
|
||||
<div class="text-center mb-6">
|
||||
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/40 mb-4">
|
||||
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
|
||||
<svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Import terminé</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Import terminé</h3>
|
||||
<p class="text-sm text-gray-500">
|
||||
Voici le résumé de votre session d'import
|
||||
</p>
|
||||
</div>
|
||||
@@ -16,7 +16,7 @@
|
||||
<div class="grid grid-cols-3 gap-4 mb-6">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-green-600">{{ importedCount }}</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">Importés</div>
|
||||
<div class="text-sm text-gray-500">Importés</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-red-600">{{ errorCount }}</div>
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
<!-- Success Files List -->
|
||||
<div v-if="importedFiles.length > 0" class="mb-6">
|
||||
<h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-3">
|
||||
Fichiers importés avec succès ({{ importedFiles.length }})
|
||||
</h4>
|
||||
<ul class="space-y-2">
|
||||
@@ -42,8 +42,8 @@
|
||||
<svg class="flex-shrink-0 h-4 w-4 text-green-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-gray-900 dark:text-gray-100">{{ file.filename }}</span>
|
||||
<span v-if="file.selectedManga" class="ml-2 text-gray-500 dark:text-gray-400">
|
||||
<span class="text-gray-900">{{ file.filename }}</span>
|
||||
<span v-if="file.selectedManga" class="ml-2 text-gray-500">
|
||||
→ {{ file.selectedManga.title }}
|
||||
</span>
|
||||
</li>
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
<!-- Error Files List -->
|
||||
<div v-if="errorFiles.length > 0" class="mb-6">
|
||||
<h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-3">
|
||||
Fichiers en erreur ({{ errorFiles.length }})
|
||||
</h4>
|
||||
<ul class="space-y-2">
|
||||
@@ -65,15 +65,15 @@
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<div class="text-gray-900 dark:text-gray-100">{{ file.filename }}</div>
|
||||
<div class="text-red-600 dark:text-red-400 text-xs mt-1">{{ file.errorMessage }}</div>
|
||||
<div class="text-gray-900">{{ file.filename }}</div>
|
||||
<div class="text-red-600 text-xs mt-1">{{ file.errorMessage }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-center space-x-4 pt-6 border-t dark:border-gray-700">
|
||||
<div class="flex justify-center space-x-4 pt-6 border-t">
|
||||
<button
|
||||
@click="startNewImport"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div
|
||||
class="border rounded-lg p-4 cursor-pointer transition-all duration-200 hover:shadow-md"
|
||||
:class="{
|
||||
'border-blue-500 bg-blue-50 dark:bg-blue-900/20': isSelected,
|
||||
'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-500': !isSelected
|
||||
'border-blue-500 bg-blue-50': isSelected,
|
||||
'border-gray-200 hover:border-gray-300': !isSelected
|
||||
}"
|
||||
@click="$emit('select-match', match)"
|
||||
>
|
||||
@@ -17,7 +17,7 @@
|
||||
'bg-gray-300': !isSelected
|
||||
}"
|
||||
></div>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Score: {{ match.matchScore }}</span>
|
||||
<span class="text-sm font-medium text-gray-700">Score: {{ match.matchScore }}</span>
|
||||
</div>
|
||||
<div v-if="isSelected" class="text-blue-600">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
@@ -37,9 +37,9 @@
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="w-16 h-20 bg-gray-200 dark:bg-gray-700 rounded border dark:border-gray-600 flex items-center justify-center"
|
||||
class="w-16 h-20 bg-gray-200 rounded border flex items-center justify-center"
|
||||
>
|
||||
<svg class="w-8 h-8 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
@@ -47,27 +47,27 @@
|
||||
|
||||
<!-- Manga Info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" :title="match.title">
|
||||
<h4 class="text-sm font-medium text-gray-900 truncate" :title="match.title">
|
||||
{{ match.title }}
|
||||
</h4>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate" :title="match.slug">
|
||||
<p class="text-xs text-gray-500 mt-1 truncate" :title="match.slug">
|
||||
{{ match.slug }}
|
||||
</p>
|
||||
|
||||
<!-- Alternative Slugs -->
|
||||
<div v-if="match.alternativeSlugs && match.alternativeSlugs.length > 0" class="mt-2">
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500">Autres titres:</p>
|
||||
<p class="text-xs text-gray-400">Autres titres:</p>
|
||||
<div class="flex flex-wrap gap-1 mt-1">
|
||||
<span
|
||||
v-for="altSlug in match.alternativeSlugs.slice(0, 2)"
|
||||
:key="altSlug"
|
||||
class="text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 px-2 py-1 rounded"
|
||||
class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded"
|
||||
>
|
||||
{{ altSlug }}
|
||||
</span>
|
||||
<span
|
||||
v-if="match.alternativeSlugs.length > 2"
|
||||
class="text-xs text-gray-400 dark:text-gray-500"
|
||||
class="text-xs text-gray-400"
|
||||
>
|
||||
+{{ match.alternativeSlugs.length - 2 }} autres
|
||||
</span>
|
||||
@@ -78,11 +78,11 @@
|
||||
|
||||
<!-- Score Bar -->
|
||||
<div class="mt-3">
|
||||
<div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
|
||||
<div class="flex items-center justify-between text-xs text-gray-500 mb-1">
|
||||
<span>Correspondance</span>
|
||||
<span>{{ match.matchScore }}%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
class="h-2 rounded-full transition-all duration-300"
|
||||
:class="{
|
||||
|
||||
@@ -49,22 +49,22 @@ const badgeClasses = computed(() => {
|
||||
const baseClasses = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium';
|
||||
|
||||
if (props.isImporting || props.isAnalyzing) {
|
||||
return `${baseClasses} bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300`;
|
||||
return `${baseClasses} bg-blue-100 text-blue-800`;
|
||||
}
|
||||
|
||||
switch (props.status) {
|
||||
case 'pending':
|
||||
return `${baseClasses} bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300`;
|
||||
return `${baseClasses} bg-gray-100 text-gray-800`;
|
||||
case 'analyzed':
|
||||
return `${baseClasses} bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300`;
|
||||
return `${baseClasses} bg-yellow-100 text-yellow-800`;
|
||||
case 'importing':
|
||||
return `${baseClasses} bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300`;
|
||||
return `${baseClasses} bg-blue-100 text-blue-800`;
|
||||
case 'imported':
|
||||
return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
|
||||
return `${baseClasses} bg-green-100 text-green-800`;
|
||||
case 'error':
|
||||
return `${baseClasses} bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300`;
|
||||
return `${baseClasses} bg-red-100 text-red-800`;
|
||||
default:
|
||||
return `${baseClasses} bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300`;
|
||||
return `${baseClasses} bg-gray-100 text-gray-800`;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8">
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Import de Bibliothèque</h1>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
<h1 class="text-3xl font-bold text-gray-900 mb-2">Import de Bibliothèque</h1>
|
||||
<p class="text-gray-600">
|
||||
Importez vos fichiers CBZ/CBR dans votre bibliothèque Mangarr
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar (if files are being processed) -->
|
||||
<div v-if="store.hasFiles && !store.allFilesProcessed" class="mb-8">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Progression</span>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">{{ store.progressPercentage }}%</span>
|
||||
<span class="text-sm font-medium text-gray-700">Progression</span>
|
||||
<span class="text-sm text-gray-500">{{ store.progressPercentage }}%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
class="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
||||
:style="{ width: store.progressPercentage + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||||
<div class="flex justify-between text-xs text-gray-500 mt-2">
|
||||
<span>{{ store.importedCount }} importés</span>
|
||||
<span>{{ store.errorCount }} erreurs</span>
|
||||
<span>{{ store.totalFiles }} total</span>
|
||||
@@ -92,7 +92,7 @@
|
||||
<div v-if="store.allFilesProcessed" class="mt-8">
|
||||
<ImportResults />
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -5,32 +5,32 @@
|
||||
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="handleClose"></div>
|
||||
|
||||
<!-- Modal avec style Material Design -->
|
||||
<div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full border border-gray-100 dark:border-gray-700">
|
||||
<div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full border border-gray-100">
|
||||
<!-- Header Material Design -->
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<FolderIcon class="h-5 w-5 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-gray-100 leading-6">
|
||||
<h3 class="text-xl font-medium text-gray-900 leading-6">
|
||||
Gérer les chapitres
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ manga?.title }}</p>
|
||||
<p class="text-sm text-gray-600 mt-1">{{ manga?.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="handleClose"
|
||||
class="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center transition-colors duration-200"
|
||||
class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors duration-200"
|
||||
>
|
||||
<XMarkIcon class="h-5 w-5 text-gray-600 dark:text-gray-300" />
|
||||
<XMarkIcon class="h-5 w-5 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content avec style Material Design -->
|
||||
<div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-8">
|
||||
<div class="bg-white px-6 py-6 sm:px-8 sm:py-8">
|
||||
<div v-if="isLoading" class="flex justify-center items-center h-32">
|
||||
<div class="relative">
|
||||
<div class="w-8 h-8 border-4 border-green-200 rounded-full"></div>
|
||||
@@ -38,7 +38,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded-xl mb-6 flex items-center space-x-2">
|
||||
<div v-else-if="error" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl mb-6 flex items-center space-x-2">
|
||||
<div class="w-5 h-5 bg-red-100 rounded-full flex items-center justify-center">
|
||||
<XMarkIcon class="h-3 w-3 text-red-600" />
|
||||
</div>
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
<div v-else class="space-y-6">
|
||||
<!-- Actions avec style Material Design -->
|
||||
<div class="flex items-center justify-between bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between bg-gray-50 rounded-xl p-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<button
|
||||
@click="showCreateVolumeModal = true"
|
||||
@@ -58,7 +58,7 @@
|
||||
</button>
|
||||
<button
|
||||
@click="showUnassignedChapters = !showUnassignedChapters"
|
||||
class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700 px-3 py-2 rounded-lg transition-colors duration-200"
|
||||
class="text-gray-600 hover:text-gray-800 text-sm font-medium hover:bg-gray-100 px-3 py-2 rounded-lg transition-colors duration-200"
|
||||
>
|
||||
{{ showUnassignedChapters ? 'Masquer' : 'Afficher' }} les chapitres non assignés
|
||||
</button>
|
||||
@@ -88,17 +88,17 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600">
|
||||
<div class="text-sm text-gray-500 bg-white px-3 py-1.5 rounded-lg border border-gray-200">
|
||||
{{ totalChapters }} chapitres, {{ volumes.length }} volumes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arborescence avec style Material Design -->
|
||||
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden shadow-sm">
|
||||
<div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
|
||||
<!-- Chapitres non assignés -->
|
||||
<div v-if="showUnassignedChapters && unassignedChapters.length > 0" class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700/50 dark:to-gray-700/30 border-b border-gray-200 dark:border-gray-600">
|
||||
<div v-if="showUnassignedChapters && unassignedChapters.length > 0" class="bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">
|
||||
<div class="px-6 py-4">
|
||||
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center space-x-2">
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center space-x-2">
|
||||
<DocumentIcon class="h-4 w-4 text-gray-500" />
|
||||
<span>Chapitres non assignés ({{ unassignedChapters.length }})</span>
|
||||
</h4>
|
||||
@@ -119,11 +119,11 @@
|
||||
/>
|
||||
</div>
|
||||
<DocumentIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300 w-12 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-center">{{ chapter.number }}</span>
|
||||
<span class="text-sm font-medium text-gray-700 w-12 bg-gray-100 px-2 py-1 rounded text-center">{{ chapter.number }}</span>
|
||||
<div class="flex-1">
|
||||
<div v-if="!chapter.isEditing" class="flex items-center">
|
||||
<span
|
||||
class="text-sm text-gray-900 dark:text-gray-100 cursor-pointer hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200"
|
||||
class="text-sm text-gray-900 cursor-pointer hover:text-green-600 transition-colors duration-200"
|
||||
@click="startEditingTitle(chapter)"
|
||||
>
|
||||
{{ chapter.title || 'Sans titre' }}
|
||||
@@ -173,22 +173,22 @@
|
||||
</div>
|
||||
|
||||
<!-- Volumes avec style Material Design -->
|
||||
<div class="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
<div class="divide-y divide-gray-100">
|
||||
<div
|
||||
v-for="volume in volumes"
|
||||
:key="volume.number"
|
||||
class="bg-white dark:bg-gray-800"
|
||||
class="bg-white"
|
||||
>
|
||||
<!-- En-tête du volume Material Design -->
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-b border-green-100 dark:border-green-900/30">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50 border-b border-green-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<FolderIcon class="h-4 w-4 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-semibold text-green-900 dark:text-green-300">Volume {{ volume.number }}</span>
|
||||
<span class="text-xs text-green-600 dark:text-green-400 ml-2">({{ volume.chapters.length }} chapitres)</span>
|
||||
<span class="text-sm font-semibold text-green-900">Volume {{ volume.number }}</span>
|
||||
<span class="text-xs text-green-600 ml-2">({{ volume.chapters.length }} chapitres)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
@@ -211,10 +211,10 @@
|
||||
|
||||
<!-- Chapitres du volume -->
|
||||
<div v-if="volume.isExpanded" class="px-6 py-4">
|
||||
<div v-if="volume.chapters.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<DocumentIcon class="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
|
||||
<div v-if="volume.chapters.length === 0" class="text-center py-8 text-gray-500">
|
||||
<DocumentIcon class="h-12 w-12 text-gray-300 mx-auto mb-3" />
|
||||
<p class="text-sm">Aucun chapitre assigné à ce volume.</p>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Utilisez le bouton "Assigner" sur les chapitres non assignés pour les ajouter.</p>
|
||||
<p class="text-xs text-gray-400 mt-1">Utilisez le bouton "Assigner" sur les chapitres non assignés pour les ajouter.</p>
|
||||
</div>
|
||||
<div v-else class="space-y-2">
|
||||
<div
|
||||
@@ -233,11 +233,11 @@
|
||||
/>
|
||||
</div>
|
||||
<DocumentIcon class="h-5 w-5 text-gray-400" />
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300 w-12 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-center">{{ chapter.number }}</span>
|
||||
<span class="text-sm font-medium text-gray-700 w-12 bg-gray-100 px-2 py-1 rounded text-center">{{ chapter.number }}</span>
|
||||
<div class="flex-1">
|
||||
<div v-if="!chapter.isEditing" class="flex items-center">
|
||||
<span
|
||||
class="text-sm text-gray-900 dark:text-gray-100 cursor-pointer hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200"
|
||||
class="text-sm text-gray-900 cursor-pointer hover:text-green-600 transition-colors duration-200"
|
||||
@click="startEditingTitle(chapter)"
|
||||
>
|
||||
{{ chapter.title || 'Sans titre' }}
|
||||
@@ -291,12 +291,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Footer Material Design -->
|
||||
<div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="bg-gray-50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
|
||||
<button
|
||||
@click="handleClose"
|
||||
:disabled="isSaving"
|
||||
class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-6 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-sm hover:shadow-md"
|
||||
class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-sm hover:shadow-md"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
@@ -320,24 +320,24 @@
|
||||
<div v-if="showCreateVolumeModal" class="fixed inset-0 z-60 overflow-y-auto">
|
||||
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showCreateVolumeModal = false"></div>
|
||||
<div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100 dark:border-gray-700">
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
|
||||
<div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100">
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<PlusIcon class="h-5 w-5 text-green-600" />
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Créer un nouveau volume</h3>
|
||||
<h3 class="text-lg font-medium text-gray-900">Créer un nouveau volume</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
|
||||
<div class="bg-white px-6 py-6 sm:px-8 sm:py-6">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Numéro du volume</label>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Numéro du volume</label>
|
||||
<input
|
||||
v-model="newVolumeNumber"
|
||||
type="number"
|
||||
min="1"
|
||||
class="block w-full border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
|
||||
class="block w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
|
||||
placeholder="Ex: 1"
|
||||
/>
|
||||
</div>
|
||||
@@ -351,7 +351,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="bg-gray-50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
|
||||
<button
|
||||
@click="showCreateVolumeModal = false"
|
||||
@@ -376,8 +376,8 @@
|
||||
<div v-if="showAssignModal" class="fixed inset-0 z-60 overflow-y-auto">
|
||||
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showAssignModal = false"></div>
|
||||
<div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100 dark:border-gray-700">
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
|
||||
<div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100">
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<DocumentIcon class="h-5 w-5 text-green-600" />
|
||||
@@ -385,7 +385,7 @@
|
||||
<h3 class="text-lg font-medium text-gray-900">Assigner le chapitre {{ selectedChapter?.number }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
|
||||
<div class="bg-white px-6 py-6 sm:px-8 sm:py-6">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Volume</label>
|
||||
@@ -401,7 +401,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="bg-gray-50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
|
||||
<button
|
||||
@click="showAssignModal = false"
|
||||
@@ -426,8 +426,8 @@
|
||||
<div v-if="showMoveToVolumeModal" class="fixed inset-0 z-60 overflow-y-auto">
|
||||
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showMoveToVolumeModal = false"></div>
|
||||
<div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100 dark:border-gray-700">
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
|
||||
<div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100">
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<ArrowPathIcon class="h-5 w-5 text-green-600" />
|
||||
@@ -435,7 +435,7 @@
|
||||
<h3 class="text-lg font-medium text-gray-900">Déplacer {{ selectedChapters.length }} chapitre(s)</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
|
||||
<div class="bg-white px-6 py-6 sm:px-8 sm:py-6">
|
||||
<div class="space-y-4">
|
||||
<div class="bg-green-50 p-4 rounded-lg border border-green-200">
|
||||
<p class="text-sm text-green-800 font-medium">
|
||||
@@ -457,7 +457,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="bg-gray-50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
|
||||
<button
|
||||
@click="showMoveToVolumeModal = false"
|
||||
@@ -491,7 +491,7 @@
|
||||
<h3 class="text-lg font-medium text-gray-900">Séparer le volume 00</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
|
||||
<div class="bg-white px-6 py-6 sm:px-8 sm:py-6">
|
||||
<div class="space-y-4">
|
||||
<div class="bg-green-50 p-4 rounded-lg border border-green-200">
|
||||
<p class="text-sm text-green-800 font-medium">
|
||||
@@ -517,7 +517,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="bg-gray-50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
|
||||
<button
|
||||
@click="showSplitVolumeZeroModal = false"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<RouterLink
|
||||
:to="{ name: 'manga-details', params: { id: manga.id } }"
|
||||
class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105 block">
|
||||
class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105 block">
|
||||
<div class="relative pb-[150%]">
|
||||
<img
|
||||
:src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
|
||||
@@ -9,11 +9,11 @@
|
||||
class="absolute inset-0 w-full h-full object-cover bg-gray-100" />
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">{{ manga.title }}</h3>
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-1">{{ manga.title }}</h3>
|
||||
<div class="flex items-center">
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
|
||||
<span class="text-sm text-gray-500">{{ manga.publicationYear }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-500 dark:text-gray-400"> Added: {{ formatDate(manga.createdAt) }} </div>
|
||||
<div class="mt-1 text-sm text-gray-500"> Added: {{ formatDate(manga.createdAt) }} </div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<tr class="border-t dark:border-gray-700 hover:bg-green-100 dark:hover:bg-green-900/20">
|
||||
<td class="px-4 py-2 text-gray-900 dark:text-gray-100" :class="{ 'text-green-500 dark:text-green-400': chapter.isAvailable }">
|
||||
<tr class="border-t hover:bg-green-100">
|
||||
<td class="px-4 py-2" :class="{ 'text-green-500': chapter.isAvailable }">
|
||||
{{ String(chapter.number).padStart(2, '0') }}
|
||||
</td>
|
||||
<td class="px-4 py-2 w-full text-left text-gray-900 dark:text-gray-100">
|
||||
<td class="px-4 py-2 w-full text-left">
|
||||
<router-link
|
||||
v-if="chapter.isAvailable"
|
||||
class="hover:text-green-500 dark:hover:text-green-400"
|
||||
:to="{
|
||||
name: 'reader',
|
||||
params: {
|
||||
@@ -15,7 +14,7 @@
|
||||
}">
|
||||
{{ chapter.title || 'Sans titre' }}
|
||||
</router-link>
|
||||
<span v-else class="text-gray-500 dark:text-gray-400">{{ chapter.title || 'Sans titre' }}</span>
|
||||
<span v-else>{{ chapter.title || 'Sans titre' }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-2 flex justify-end gap-2">
|
||||
<button v-if="!chapter.isAvailable" @click="handleSearch" :class="buttonClass">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="p-2 border-t dark:border-gray-700">
|
||||
<div class="p-2 border-t">
|
||||
<table class="min-w-full table-auto">
|
||||
<thead>
|
||||
<tr class="text-gray-700 dark:text-gray-300">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left">#</th>
|
||||
<th class="px-4 py-2 text-left">Titre</th>
|
||||
<th class="px-4 py-2 text-right">Actions</th>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" />
|
||||
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 z-10 overflow-y-auto">
|
||||
@@ -24,15 +24,15 @@
|
||||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<DialogPanel class="relative transform overflow-hidden rounded-lg bg-white px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<div class="mb-6">
|
||||
<DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100">
|
||||
<DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900">
|
||||
Supprimer le manga
|
||||
</DialogTitle>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-if="error" class="mb-6 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
|
||||
<div v-if="error" class="mb-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
||||
{{ error.message || 'Une erreur est survenue lors de la suppression.' }}
|
||||
</div>
|
||||
|
||||
@@ -40,19 +40,19 @@
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<ExclamationTriangleIcon class="h-6 w-6 text-red-500 mr-3" />
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">Action irréversible</span>
|
||||
<span class="text-sm font-medium text-gray-900">Action irréversible</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Êtes-vous sûr de vouloir supprimer le manga <strong>"{{ manga?.title }}"</strong> ?
|
||||
</p>
|
||||
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-md p-4">
|
||||
<div class="bg-yellow-50 border border-yellow-200 rounded-md p-4">
|
||||
<div class="flex">
|
||||
<ExclamationTriangleIcon class="h-5 w-5 text-yellow-400" />
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-300">
|
||||
<h3 class="text-sm font-medium text-yellow-800">
|
||||
Attention
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-yellow-700 dark:text-yellow-400">
|
||||
<div class="mt-2 text-sm text-yellow-700">
|
||||
<p>Cette action supprimera définitivement :</p>
|
||||
<ul class="list-disc list-inside mt-1 space-y-1">
|
||||
<li>Le manga et toutes ses métadonnées</li>
|
||||
@@ -69,7 +69,7 @@
|
||||
<div class="mt-6 flex justify-end space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
class="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
@click="closeModal"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" />
|
||||
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 z-10 overflow-y-auto">
|
||||
@@ -24,15 +24,15 @@
|
||||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl">
|
||||
<DialogPanel class="relative transform overflow-hidden rounded-lg bg-white px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl">
|
||||
<div class="mb-6">
|
||||
<DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100">
|
||||
<DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900">
|
||||
Edit Manga
|
||||
</DialogTitle>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-if="error" class="mb-6 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
|
||||
<div v-if="error" class="mb-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
||||
{{ error.message || 'Une erreur est survenue lors de la sauvegarde.' }}
|
||||
</div>
|
||||
|
||||
@@ -41,49 +41,49 @@
|
||||
<!-- Titre et Slug -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Titre</label>
|
||||
<label for="title" class="block text-sm font-medium text-gray-700 mb-2">Titre</label>
|
||||
<input
|
||||
id="title"
|
||||
v-model="formData.title"
|
||||
type="text"
|
||||
class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
||||
placeholder="Titre du manga"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Slug</label>
|
||||
<label for="slug" class="block text-sm font-medium text-gray-700 mb-2">Slug</label>
|
||||
<input
|
||||
id="slug"
|
||||
:value="manga?.slug || ''"
|
||||
type="text"
|
||||
disabled
|
||||
class="block w-full rounded-md border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-600 shadow-sm sm:text-sm text-gray-500 dark:text-gray-400"
|
||||
class="block w-full rounded-md border-gray-300 bg-gray-50 shadow-sm sm:text-sm text-gray-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Année de publication -->
|
||||
<div>
|
||||
<label for="publicationYear" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Année de publication</label>
|
||||
<label for="publicationYear" class="block text-sm font-medium text-gray-700 mb-2">Année de publication</label>
|
||||
<input
|
||||
id="publicationYear"
|
||||
v-model.number="formData.publicationYear"
|
||||
type="number"
|
||||
min="1900"
|
||||
:max="new Date().getFullYear()"
|
||||
class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
||||
placeholder="2023"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
|
||||
<label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
v-model="formData.description"
|
||||
rows="4"
|
||||
class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
||||
placeholder="Description du manga"
|
||||
/>
|
||||
</div>
|
||||
@@ -91,22 +91,22 @@
|
||||
<!-- Auteur et Statut -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="author" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Auteur</label>
|
||||
<label for="author" class="block text-sm font-medium text-gray-700 mb-2">Auteur</label>
|
||||
<input
|
||||
id="author"
|
||||
v-model="formData.author"
|
||||
type="text"
|
||||
class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
||||
placeholder="Auteur du manga"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Statut</label>
|
||||
<label for="status" class="block text-sm font-medium text-gray-700 mb-2">Statut</label>
|
||||
<input
|
||||
id="status"
|
||||
v-model="formData.status"
|
||||
type="text"
|
||||
class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
||||
placeholder="ongoing"
|
||||
/>
|
||||
</div>
|
||||
@@ -114,7 +114,7 @@
|
||||
|
||||
<!-- Note -->
|
||||
<div>
|
||||
<label for="rating" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Note</label>
|
||||
<label for="rating" class="block text-sm font-medium text-gray-700 mb-2">Note</label>
|
||||
<input
|
||||
id="rating"
|
||||
v-model.number="formData.rating"
|
||||
@@ -122,20 +122,20 @@
|
||||
min="0"
|
||||
max="10"
|
||||
step="0.001"
|
||||
class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
||||
placeholder="9.541"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Slugs alternatifs -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Slugs alternatifs</label>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Slugs alternatifs</label>
|
||||
<div class="space-y-2">
|
||||
<div v-if="formData.alternativeSlugs.length > 0" class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="(slug, index) in formData.alternativeSlugs"
|
||||
:key="index"
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300"
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
|
||||
>
|
||||
{{ slug }}
|
||||
<button
|
||||
@@ -158,7 +158,7 @@
|
||||
<input
|
||||
v-model="newAlternativeSlug"
|
||||
type="text"
|
||||
class="flex-1 rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||
class="flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
||||
placeholder="Nouveau slug alternatif"
|
||||
@keyup.enter="addAlternativeSlug"
|
||||
/>
|
||||
@@ -175,19 +175,19 @@
|
||||
|
||||
<!-- Genres -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Genres</label>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Genres</label>
|
||||
<div class="space-y-3">
|
||||
<div v-if="formData.genres.length > 0" class="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
<span
|
||||
v-for="(genre, index) in formData.genres"
|
||||
:key="index"
|
||||
class="inline-flex items-center justify-between px-3 py-1 rounded-md text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
|
||||
class="inline-flex items-center justify-between px-3 py-1 rounded-md text-sm font-medium bg-gray-100 text-gray-800"
|
||||
>
|
||||
{{ genre }}
|
||||
<button
|
||||
type="button"
|
||||
@click="removeGenre(index)"
|
||||
class="ml-2 inline-flex items-center justify-center w-4 h-4 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
class="ml-2 inline-flex items-center justify-center w-4 h-4 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<XMarkIcon class="w-3 h-3" />
|
||||
</button>
|
||||
@@ -204,7 +204,7 @@
|
||||
<input
|
||||
v-model="newGenre"
|
||||
type="text"
|
||||
class="flex-1 rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
||||
class="flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
||||
placeholder="Nouveau genre"
|
||||
@keyup.enter="addGenre"
|
||||
/>
|
||||
@@ -224,7 +224,7 @@
|
||||
<div class="mt-8 flex justify-end space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
|
||||
@click="closeModal"
|
||||
:disabled="isSaving"
|
||||
>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
@click="$emit('manga-click', manga)">
|
||||
<!-- Cover Image -->
|
||||
<div class="flex-shrink-0">
|
||||
<img :src="manga.imageUrl || '/placeholder-cover.png'" alt="" class="h-48 w-32 object-cover rounded" referrerpolicy="no-referrer" />
|
||||
<img :src="manga.imageUrl || '/placeholder-cover.png'" alt="" class="h-48 w-32 object-cover rounded" />
|
||||
<!-- TODO: Add placeholder image -->
|
||||
</div>
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" />
|
||||
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 z-10 overflow-y-auto">
|
||||
@@ -24,17 +24,17 @@
|
||||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
|
||||
<DialogPanel class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
|
||||
<div>
|
||||
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
|
||||
<Cog6ToothIcon class="h-6 w-6 text-blue-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-5">
|
||||
<DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">
|
||||
<DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
|
||||
Sources préférées
|
||||
</DialogTitle>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p class="text-sm text-gray-500">
|
||||
Configurez l'ordre de priorité des sources pour ce manga. Glissez-déposez les sources pour les réorganiser.
|
||||
</p>
|
||||
</div>
|
||||
@@ -47,13 +47,13 @@
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-else-if="error" class="mt-5 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
|
||||
<div v-else-if="error" class="mt-5 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
||||
{{ error.message || 'Une erreur est survenue lors du chargement des sources.' }}
|
||||
</div>
|
||||
|
||||
<!-- Sources list -->
|
||||
<div v-else class="mt-5">
|
||||
<div v-if="localSources.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<div v-if="localSources.length === 0" class="text-center py-8 text-gray-500">
|
||||
Aucune source disponible
|
||||
</div>
|
||||
<div v-else class="space-y-3">
|
||||
@@ -63,10 +63,10 @@
|
||||
:class="[
|
||||
'group relative flex items-center p-4 rounded-lg border-2 transition-all duration-200 cursor-grab active:cursor-grabbing select-none',
|
||||
{
|
||||
'bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-300 dark:border-blue-700 shadow-md': index === 0,
|
||||
'bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-green-300 dark:border-green-700': index === 1,
|
||||
'bg-gradient-to-r from-yellow-50 to-amber-50 dark:from-yellow-900/20 dark:to-amber-900/20 border-yellow-300 dark:border-yellow-700': index === 2,
|
||||
'bg-gray-50 dark:bg-gray-700/50 border-gray-200 dark:border-gray-600': index > 2,
|
||||
'bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-300 shadow-md': index === 0,
|
||||
'bg-gradient-to-r from-green-50 to-emerald-50 border-green-300': index === 1,
|
||||
'bg-gradient-to-r from-yellow-50 to-amber-50 border-yellow-300': index === 2,
|
||||
'bg-gray-50 border-gray-200': index > 2,
|
||||
'scale-105 shadow-lg border-blue-400': draggedIndex === index,
|
||||
'opacity-50': dragOverIndex === index && draggedIndex !== index,
|
||||
'scale-95 active:scale-95': isPressed === index
|
||||
@@ -102,10 +102,10 @@
|
||||
<div :class="[
|
||||
'flex items-center space-x-1 px-3 py-1 rounded-full text-xs font-semibold',
|
||||
{
|
||||
'bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300': index === 0,
|
||||
'bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300': index === 1,
|
||||
'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300': index === 2,
|
||||
'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300': index > 2
|
||||
'bg-blue-100 text-blue-800': index === 0,
|
||||
'bg-green-100 text-green-800': index === 1,
|
||||
'bg-yellow-100 text-yellow-800': index === 2,
|
||||
'bg-gray-100 text-gray-600': index > 2
|
||||
}
|
||||
]">
|
||||
<span v-if="index === 0">🥇 Priorité haute</span>
|
||||
@@ -117,14 +117,14 @@
|
||||
|
||||
<!-- Informations de la source -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-semibold text-gray-900 dark:text-gray-100 truncate">{{ source.name }}</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400 truncate">
|
||||
<div class="font-semibold text-gray-900 truncate">{{ source.name }}</div>
|
||||
<div class="text-sm text-gray-600 truncate">
|
||||
<a :href="source.baseUrl" target="_blank" class="hover:text-blue-600 hover:underline">{{ source.baseUrl }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Indicateur de drag -->
|
||||
<div class="ml-4 text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-200">
|
||||
<div class="ml-4 text-gray-400 group-hover:text-gray-600 transition-colors duration-200">
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9h8M8 15h8" />
|
||||
</svg>
|
||||
@@ -148,7 +148,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 sm:col-start-1 sm:mt-0"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
|
||||
@click="closeModal"
|
||||
:disabled="isSaving"
|
||||
>
|
||||
|
||||
@@ -1,208 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="border-t border-gray-200 dark:border-gray-700">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
<th class="w-10 px-4 py-3"></th>
|
||||
<th class="py-3 pr-4 text-left font-medium">Titre</th>
|
||||
<th class="py-3 pr-4 text-left font-medium w-44">Source préférée</th>
|
||||
<th class="py-3 pr-4 text-left font-medium w-44">Chapitres</th>
|
||||
<th class="py-3 px-4 text-right font-medium w-28">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
<tr
|
||||
v-for="manga in mangas"
|
||||
:key="manga.id"
|
||||
class="hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors">
|
||||
|
||||
<!-- Monitoring -->
|
||||
<td class="px-4 py-3 text-center">
|
||||
<button
|
||||
:title="manga.monitored ? 'Monitoring actif — cliquer pour désactiver' : 'Monitoring inactif — cliquer pour activer'"
|
||||
:class="manga.monitored
|
||||
? 'text-green-500 hover:text-green-600'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-400 dark:hover:text-gray-500'"
|
||||
class="transition-colors"
|
||||
@click="doToggleMonitoring(manga)">
|
||||
<component
|
||||
:is="manga.monitored ? BookmarkIcon : BookmarkSlashIcon"
|
||||
class="w-4 h-4" />
|
||||
</button>
|
||||
</td>
|
||||
|
||||
<!-- Titre -->
|
||||
<td class="py-3 pr-4">
|
||||
<RouterLink
|
||||
:to="{ name: 'manga-details', params: { id: manga.id } }"
|
||||
class="font-medium text-gray-900 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400 transition-colors">
|
||||
{{ manga.title }}
|
||||
</RouterLink>
|
||||
</td>
|
||||
|
||||
<!-- Source préférée -->
|
||||
<td class="py-3 pr-4">
|
||||
<MangaPreferredSourceCell :manga-id="manga.id" />
|
||||
</td>
|
||||
|
||||
<!-- Chapitres — barre de progression -->
|
||||
<td class="py-3 pr-4">
|
||||
<div v-if="manga.chaptersTotal > 0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-xs tabular-nums text-gray-500 dark:text-gray-400">
|
||||
{{ manga.chaptersScraped }} / {{ manga.chaptersTotal }}
|
||||
</span>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">
|
||||
{{ progressPercent(manga) }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 dark:bg-gray-600 rounded-full h-1.5">
|
||||
<div
|
||||
class="h-1.5 rounded-full transition-all"
|
||||
:class="progressPercent(manga) >= 100
|
||||
? 'bg-green-500'
|
||||
: 'bg-blue-500'"
|
||||
:style="{ width: progressPercent(manga) + '%' }" />
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="text-gray-400 dark:text-gray-600 text-xs">—</span>
|
||||
</td>
|
||||
|
||||
<!-- Actions -->
|
||||
<td class="py-3 px-4">
|
||||
<div class="flex items-center justify-end gap-0.5">
|
||||
<button
|
||||
class="p-1.5 rounded-md text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
|
||||
title="Éditer"
|
||||
@click="openEdit(manga)">
|
||||
<PencilIcon class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 rounded-md text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
|
||||
title="Sources préférées"
|
||||
@click="openSources(manga)">
|
||||
<Cog6ToothIcon class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 rounded-md transition-colors"
|
||||
:class="refreshingId === manga.id
|
||||
? 'text-blue-400 cursor-not-allowed'
|
||||
: 'text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600'"
|
||||
title="Rafraîchir"
|
||||
:disabled="refreshingId === manga.id"
|
||||
@click="doRefresh(manga)">
|
||||
<ArrowPathIcon
|
||||
class="w-4 h-4"
|
||||
:class="{ 'animate-spin': refreshingId === manga.id }" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Modales -->
|
||||
<MangaEditModal
|
||||
:is-open="isEditModalOpen"
|
||||
:manga="selectedManga"
|
||||
:is-saving="editIsLoading"
|
||||
:error="editError"
|
||||
@close="closeEditModal"
|
||||
@save="handleSaveEdit" />
|
||||
|
||||
<MangaPreferredSourcesModal
|
||||
:is-open="isSourcesModalOpen"
|
||||
:sources="preferredSources"
|
||||
:is-loading="sourcesIsLoading"
|
||||
:error="sourcesError"
|
||||
:is-saving="sourcesIsSaving"
|
||||
@close="isSourcesModalOpen = false"
|
||||
@save="handleSaveSources" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ArrowPathIcon, BookmarkIcon, BookmarkSlashIcon, Cog6ToothIcon, PencilIcon } from '@heroicons/vue/24/outline';
|
||||
import { computed, ref } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import { useMangaEdit } from '../composables/useMangaEdit';
|
||||
import { useMangaMonitoring } from '../composables/useMangaMonitoring';
|
||||
import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';
|
||||
import { useMangaRefresh } from '../composables/useMangaRefresh';
|
||||
import MangaEditModal from './MangaEditModal.vue';
|
||||
import MangaPreferredSourceCell from './MangaPreferredSourceCell.vue';
|
||||
import MangaPreferredSourcesModal from './MangaPreferredSourcesModal.vue';
|
||||
|
||||
const props = defineProps({
|
||||
mangas: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
function progressPercent(manga) {
|
||||
if (!manga.chaptersTotal) return 0;
|
||||
return Math.round((manga.chaptersScraped / manga.chaptersTotal) * 100);
|
||||
}
|
||||
|
||||
// ── Monitoring ────────────────────────────────────────────
|
||||
const { toggleMonitoring } = useMangaMonitoring();
|
||||
|
||||
async function doToggleMonitoring(manga) {
|
||||
await toggleMonitoring(manga.id, !manga.monitored);
|
||||
manga.monitored = !manga.monitored;
|
||||
}
|
||||
|
||||
// ── Selected manga ────────────────────────────────────────
|
||||
const selectedManga = ref(null);
|
||||
const isSourcesModalOpen = ref(false);
|
||||
|
||||
// ── Edit ──────────────────────────────────────────────────
|
||||
const { isEditModalOpen, openEditModal, closeEditModal, editManga, isLoading: editIsLoading, error: editError } = useMangaEdit();
|
||||
|
||||
function openEdit(manga) {
|
||||
selectedManga.value = manga;
|
||||
openEditModal();
|
||||
}
|
||||
|
||||
async function handleSaveEdit(data) {
|
||||
if (!selectedManga.value) return;
|
||||
await editManga(selectedManga.value.id, data);
|
||||
}
|
||||
|
||||
// ── Sources préférées ─────────────────────────────────────
|
||||
const selectedMangaId = computed(() => selectedManga.value?.id ?? null);
|
||||
const {
|
||||
sources: preferredSources,
|
||||
isLoading: sourcesIsLoading,
|
||||
error: sourcesError,
|
||||
isSaving: sourcesIsSaving,
|
||||
savePreferredSources
|
||||
} = useMangaPreferredSources(selectedMangaId);
|
||||
|
||||
function openSources(manga) {
|
||||
selectedManga.value = manga;
|
||||
isSourcesModalOpen.value = true;
|
||||
}
|
||||
|
||||
function handleSaveSources(sourceIds) {
|
||||
savePreferredSources(sourceIds);
|
||||
isSourcesModalOpen.value = false;
|
||||
}
|
||||
|
||||
// ── Refresh ───────────────────────────────────────────────
|
||||
const { refreshMetadata } = useMangaRefresh();
|
||||
const refreshingId = ref(null);
|
||||
|
||||
async function doRefresh(manga) {
|
||||
if (refreshingId.value) return;
|
||||
refreshingId.value = manga.id;
|
||||
try {
|
||||
await refreshMetadata(manga.id);
|
||||
} finally {
|
||||
refreshingId.value = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-sm shadow mb-2">
|
||||
<div class="bg-white rounded-sm shadow mb-2">
|
||||
<!-- En-tête du volume -->
|
||||
<div class="relative bg-white dark:bg-gray-800 p-3 sm:p-4 rounded-t-sm">
|
||||
<div class="relative bg-white p-3 sm:p-4 rounded-t-sm">
|
||||
<!-- Layout mobile/desktop -->
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Partie gauche -->
|
||||
<div class="flex items-center space-x-1 sm:space-x-4 flex-1 min-w-0">
|
||||
<BookmarkIcon class="h-6 w-6 sm:h-8 sm:w-8 text-gray-500 dark:text-gray-400 flex-shrink-0" />
|
||||
<h2 class="text-lg sm:text-xl font-semibold w-20 sm:w-28 flex-shrink-0 dark:text-gray-100">Vol {{ String(volume.number).padStart(2, '0') }}</h2>
|
||||
<BookmarkIcon class="h-6 w-6 sm:h-8 sm:w-8 text-gray-500 flex-shrink-0" />
|
||||
<h2 class="text-lg sm:text-xl font-semibold w-20 sm:w-28 flex-shrink-0">Vol {{ String(volume.number).padStart(2, '0') }}</h2>
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
:class="[
|
||||
@@ -65,7 +65,7 @@
|
||||
<MangaChapterList v-show="isOpen" :chapters="volume.chapters" :manga-slug="mangaSlug" :manga-id="mangaId" />
|
||||
|
||||
<!-- Chevron de fermeture -->
|
||||
<div v-show="isOpen" class="flex justify-center p-2 bg-white dark:bg-gray-800 rounded-b-sm">
|
||||
<div v-show="isOpen" class="flex justify-center p-2 bg-white rounded-b-sm">
|
||||
<button @click="toggleVolume" class="w-8 h-8 flex items-center justify-center">
|
||||
<ChevronUpIcon
|
||||
class="h-5 w-5 sm:h-6 sm:w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
v-model="searchQuery"
|
||||
@keyup.enter="performSearch"
|
||||
placeholder="Rechercher un manga..."
|
||||
class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
|
||||
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
|
||||
<button
|
||||
@click="performSearch"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
||||
@@ -20,27 +20,27 @@
|
||||
<!-- État de chargement -->
|
||||
<div v-if="loading" class="text-center py-8">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
|
||||
<p class="mt-4 text-gray-600 dark:text-gray-400">Recherche en cours...</p>
|
||||
<p class="mt-4 text-gray-600">Recherche en cours...</p>
|
||||
</div>
|
||||
|
||||
<!-- Message d'erreur -->
|
||||
<div v-if="error" class="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded relative mb-6">
|
||||
<div v-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Résultats de recherche -->
|
||||
<div class="max-w-full overflow-hidden">
|
||||
<MangaList v-if="searchResults.length > 0" :mangas="searchResults" @manga-click="openMangaModal" />
|
||||
<p v-else-if="!loading && searchQuery" class="text-center text-gray-600 dark:text-gray-400">Aucun résultat trouvé</p>
|
||||
<p v-else-if="!loading && searchQuery" class="text-center text-gray-600">Aucun résultat trouvé</p>
|
||||
</div>
|
||||
|
||||
<!-- Modal de confirmation -->
|
||||
<Dialog :open="isModalOpen" @close="closeModal" class="relative z-50">
|
||||
<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" aria-hidden="true" />
|
||||
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" />
|
||||
|
||||
<div class="fixed inset-0 flex items-center justify-center p-4">
|
||||
<DialogPanel class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
|
||||
<DialogTitle class="text-lg mb-4 text-gray-900 dark:text-gray-100"> Ajouter à la bibliothèque </DialogTitle>
|
||||
<DialogPanel class="w-full max-w-lg bg-white rounded-xl shadow-xl p-6">
|
||||
<DialogTitle class="text-lg mb-4"> Ajouter à la bibliothèque </DialogTitle>
|
||||
|
||||
<div v-if="selectedManga">
|
||||
<div class="flex gap-4">
|
||||
@@ -49,8 +49,8 @@
|
||||
:alt="selectedManga.title"
|
||||
class="h-48 w-32 object-cover" />
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="text-lg text-gray-900 dark:text-gray-100">{{ selectedManga.title }}</h4>
|
||||
<p class="mt-2 text-gray-700 dark:text-gray-300">
|
||||
<h4 class="text-lg">{{ selectedManga.title }}</h4>
|
||||
<p class="mt-2">
|
||||
{{ truncatedDescription }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -61,7 +61,7 @@
|
||||
<button
|
||||
type="button"
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 dark:bg-gray-800">
|
||||
class="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
|
||||
@@ -1,30 +1,18 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full">
|
||||
<Toolbar :config="toolbarConfig" />
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<div class="w-full">
|
||||
<MangaGrid v-if="viewMode === 'grid'" :mangas="pagedItems" />
|
||||
<div>
|
||||
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
|
||||
<div class="container mx-auto px-4">
|
||||
<MangaGrid v-if="viewMode === 'grid'" :mangas="collection?.items || []" />
|
||||
<MangaList
|
||||
v-else-if="viewMode === 'list'"
|
||||
:mangas="pagedItems"
|
||||
:mangas="collection?.items || []"
|
||||
@manga-click="handleMangaClick" />
|
||||
<MangaTable v-else-if="viewMode === 'table'" :mangas="pagedItems" />
|
||||
<Pagination
|
||||
v-if="totalPages > 1"
|
||||
:current-page="currentPage"
|
||||
:total-pages="totalPages"
|
||||
:total="sortedCollection.length"
|
||||
:limit="prefs.itemsPerPage"
|
||||
:has-next-page="currentPage < totalPages"
|
||||
:has-previous-page="currentPage > 1"
|
||||
@page-change="currentPage = $event" />
|
||||
<div
|
||||
v-if="isBackgroundLoading"
|
||||
class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg">
|
||||
Mise à jour en cours...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -38,19 +26,15 @@
|
||||
MagnifyingGlassIcon
|
||||
} from '@heroicons/vue/24/outline';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useUserPreferencesStore } from '../../../../domain/setting/application/store/userPreferencesStore';
|
||||
import Pagination from '../../../../shared/components/ui/Pagination.vue';
|
||||
import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
|
||||
import { useMangaStore } from '../../application/store/mangaStore';
|
||||
import MangaGrid from '../components/MangaGrid.vue';
|
||||
import MangaList from '../components/MangaList.vue';
|
||||
import MangaTable from '../components/MangaTable.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const mangaStore = useMangaStore();
|
||||
const prefs = useUserPreferencesStore();
|
||||
|
||||
const {
|
||||
collection,
|
||||
@@ -59,8 +43,7 @@ import MangaTable from '../components/MangaTable.vue';
|
||||
isBackgroundLoadingCollection: isBackgroundLoading
|
||||
} = storeToRefs(mangaStore);
|
||||
|
||||
const viewMode = ref(prefs.defaultView);
|
||||
const currentPage = ref(1);
|
||||
const viewMode = ref('grid');
|
||||
|
||||
onMounted(() => {
|
||||
mangaStore.loadCollection();
|
||||
@@ -70,27 +53,6 @@ import MangaTable from '../components/MangaTable.vue';
|
||||
router.push({ name: 'manga-details', params: { id: manga.id } });
|
||||
};
|
||||
|
||||
const sortedCollection = computed(() => {
|
||||
const items = [...(collection.value?.items || [])];
|
||||
if (prefs.sortBy === 'title') {
|
||||
items.sort((a, b) => a.title.localeCompare(b.title));
|
||||
} else if (prefs.sortBy === 'addedAt') {
|
||||
items.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
|
||||
}
|
||||
return items;
|
||||
});
|
||||
|
||||
const pagedItems = computed(() => {
|
||||
const start = (currentPage.value - 1) * prefs.itemsPerPage;
|
||||
return sortedCollection.value.slice(start, start + prefs.itemsPerPage);
|
||||
});
|
||||
|
||||
const totalPages = computed(() => Math.ceil(sortedCollection.value.length / prefs.itemsPerPage));
|
||||
|
||||
watch(() => prefs.itemsPerPage, () => {
|
||||
currentPage.value = 1;
|
||||
});
|
||||
|
||||
const toolbarConfig = {
|
||||
leftSection: [
|
||||
{
|
||||
@@ -109,9 +71,8 @@ import MangaTable from '../components/MangaTable.vue';
|
||||
type: 'dropdown',
|
||||
label: 'View',
|
||||
items: [
|
||||
{ label: 'Overview', onClick: () => { viewMode.value = 'list'; prefs.setDefaultView('list'); } },
|
||||
{ label: 'Grid', onClick: () => { viewMode.value = 'grid'; prefs.setDefaultView('grid'); } },
|
||||
{ label: 'Table', onClick: () => { viewMode.value = 'table'; prefs.setDefaultView('table'); } }
|
||||
{ label: 'List', onClick: () => (viewMode.value = 'list') },
|
||||
{ label: 'Grid', onClick: () => (viewMode.value = 'grid') }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -119,9 +80,10 @@ import MangaTable from '../components/MangaTable.vue';
|
||||
type: 'dropdown',
|
||||
label: 'Sort',
|
||||
items: [
|
||||
{ label: 'Title', onClick: () => prefs.setSortBy('title') },
|
||||
{ label: "Date d'ajout", onClick: () => prefs.setSortBy('addedAt') },
|
||||
{ label: 'Progression', onClick: () => prefs.setSortBy('progress') }
|
||||
{ label: 'Title', onClick: () => {} },
|
||||
{ label: 'Author', onClick: () => {} },
|
||||
{ label: 'Status', onClick: () => {} },
|
||||
{ label: 'Year', onClick: () => {} }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<!-- Notifications Toast -->
|
||||
<NotificationToast />
|
||||
|
||||
<Toolbar v-if="currentManga" :config="toolbarConfig" />
|
||||
|
||||
<div class="overflow-y-auto flex-1">
|
||||
|
||||
<div v-if="errorDetails" class="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded mx-4 mt-4">
|
||||
<div v-if="errorDetails" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mx-4 mt-4">
|
||||
{{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
|
||||
</div>
|
||||
|
||||
@@ -15,7 +11,9 @@
|
||||
<!-- Composant invisible qui écoute les mises à jour Mercure -->
|
||||
<MercureListener :manga-id="String(mangaId)" />
|
||||
|
||||
<div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500 dark:text-gray-400 z-20">
|
||||
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
|
||||
|
||||
<div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500 z-20">
|
||||
<ArrowPathIcon class="h-5 w-5 animate-spin" />
|
||||
</div>
|
||||
|
||||
@@ -26,7 +24,7 @@
|
||||
<div v-if="isLoadingVolumes" class="flex justify-center items-center h-32">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
<div v-else-if="errorVolumes" class="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
|
||||
<div v-else-if="errorVolumes" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
||||
{{ errorVolumes.message || 'Une erreur est survenue lors du chargement des volumes.' }}
|
||||
</div>
|
||||
<MangaVolumeList
|
||||
@@ -86,11 +84,9 @@
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-center text-gray-500 dark:text-gray-400 py-10 px-4">
|
||||
<div v-else class="text-center text-gray-500 py-10 px-4">
|
||||
Aucun manga sélectionné ou trouvé.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { useUserPreferencesStore } from '../../../setting/application/store/userPreferencesStore';
|
||||
import { Chapter } from '../../domain/entities/Chapter';
|
||||
import { ApiChapterRepository } from '../../infrastructure/repository/ApiChapterRepository';
|
||||
|
||||
@@ -14,6 +13,7 @@ export const useReaderStore = defineStore('reader', {
|
||||
error: null,
|
||||
pages: [],
|
||||
totalPages: 0,
|
||||
loadedPages: new Set(), // Garder une trace des pages déjà chargées
|
||||
|
||||
// Paramètres pour les doubles pages
|
||||
doublePageSettings: {
|
||||
@@ -32,6 +32,7 @@ export const useReaderStore = defineStore('reader', {
|
||||
|
||||
// Getters pour les doubles pages
|
||||
effectiveDoublePageMode: (state) => {
|
||||
// Si la détection automatique est désactivée, retourner 'normal'
|
||||
if (!state.doublePageSettings.autoDetect) {
|
||||
return 'normal';
|
||||
}
|
||||
@@ -54,20 +55,28 @@ export const useReaderStore = defineStore('reader', {
|
||||
try {
|
||||
const repository = new ApiChapterRepository();
|
||||
|
||||
const [chapterData, pagesData] = await Promise.all([
|
||||
repository.getChapter(chapterId),
|
||||
repository.getChapterPages(chapterId, 1, 9999),
|
||||
]);
|
||||
|
||||
// Charger les informations du chapitre
|
||||
const chapterData = await repository.getChapter(chapterId);
|
||||
this.currentChapter = Chapter.create(chapterData);
|
||||
this.pages = pagesData.pages.map(p => ({
|
||||
id: p.id,
|
||||
pageNumber: p.pageNumber,
|
||||
url: p.url,
|
||||
dimensions: p.dimensions,
|
||||
}));
|
||||
|
||||
// Charger la liste des pages
|
||||
const pagesData = await repository.getChapterPages(chapterId);
|
||||
|
||||
// Initialiser le tableau avec des placeholders
|
||||
this.pages = new Array(pagesData.totalItems).fill(null);
|
||||
this.totalPages = pagesData.totalItems;
|
||||
this.currentPage = 0;
|
||||
this.loadedPages.clear();
|
||||
|
||||
// Charger la première page
|
||||
if (this.totalPages > 0) {
|
||||
this.currentPage = 0;
|
||||
await this.loadPageData(0);
|
||||
|
||||
// En mode infini, précharger les premières pages
|
||||
if (this.readingMode === 'infinite') {
|
||||
await this.preloadNextPages(0);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
this.error = error.message;
|
||||
} finally {
|
||||
@@ -75,28 +84,100 @@ export const useReaderStore = defineStore('reader', {
|
||||
}
|
||||
},
|
||||
|
||||
handlePageVisible(pageIndex) {
|
||||
async loadPageData(pageIndex) {
|
||||
if (!this.currentChapter || pageIndex < 0 || pageIndex >= this.totalPages) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Si la page est déjà chargée, ne rien faire
|
||||
if (this.loadedPages.has(pageIndex)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pageNumber = pageIndex + 1; // Convertir en 1-based pour l'API
|
||||
|
||||
// Marquer la page comme en cours de chargement
|
||||
const newPages = [...this.pages];
|
||||
newPages[pageIndex] = { loading: true };
|
||||
this.pages = newPages;
|
||||
|
||||
try {
|
||||
const repository = new ApiChapterRepository();
|
||||
const pageData = await repository.getChapterPage(this.currentChapter.id, pageNumber);
|
||||
|
||||
// Vérifier que les données sont valides
|
||||
if (!pageData || !pageData.base64Content) {
|
||||
throw new Error("Données de page invalides reçues de l'API");
|
||||
}
|
||||
|
||||
// Mettre à jour la page
|
||||
const updatedPages = [...this.pages];
|
||||
updatedPages[pageIndex] = {
|
||||
id: pageData.id,
|
||||
pageNumber: pageData.pageNumber,
|
||||
base64Content: pageData.base64Content,
|
||||
mimeType: pageData.mimeType,
|
||||
dimensions: pageData.dimensions
|
||||
};
|
||||
this.pages = updatedPages;
|
||||
this.loadedPages.add(pageIndex);
|
||||
} catch (error) {
|
||||
console.error(`Erreur lors du chargement de la page ${pageNumber}:`, error);
|
||||
// Marquer la page comme en erreur
|
||||
const errorPages = [...this.pages];
|
||||
errorPages[pageIndex] = { error: error.message };
|
||||
this.pages = errorPages;
|
||||
}
|
||||
},
|
||||
|
||||
async preloadNextPages(startIndex, count = 3) {
|
||||
const promises = [];
|
||||
for (let i = 1; i <= count; i++) {
|
||||
const pageIndex = startIndex + i;
|
||||
if (pageIndex < this.totalPages) {
|
||||
promises.push(this.loadPageData(pageIndex));
|
||||
}
|
||||
}
|
||||
await Promise.all(promises);
|
||||
},
|
||||
|
||||
async handlePageVisible(pageIndex) {
|
||||
if (pageIndex !== this.currentPage) {
|
||||
this.currentPage = pageIndex;
|
||||
// Précharger les pages suivantes
|
||||
if (this.readingMode === 'infinite') {
|
||||
await this.preloadNextPages(pageIndex);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
nextPage() {
|
||||
async nextPage() {
|
||||
if (!this.isLastPage) {
|
||||
this.currentPage++;
|
||||
await this.loadPageData(this.currentPage);
|
||||
}
|
||||
},
|
||||
|
||||
previousPage() {
|
||||
async previousPage() {
|
||||
if (!this.isFirstPage) {
|
||||
this.currentPage--;
|
||||
await this.loadPageData(this.currentPage);
|
||||
}
|
||||
},
|
||||
|
||||
async setReadingMode(mode) {
|
||||
if (mode === this.readingMode) return;
|
||||
|
||||
this.readingMode = mode;
|
||||
this.savePreferences();
|
||||
|
||||
// S'assurer que la page courante est chargée
|
||||
await this.loadPageData(this.currentPage);
|
||||
|
||||
// Si on passe en mode infini, précharger les pages suivantes
|
||||
if (mode === 'infinite') {
|
||||
await this.preloadNextPages(this.currentPage);
|
||||
}
|
||||
},
|
||||
|
||||
setReadingDirection(direction) {
|
||||
@@ -109,6 +190,7 @@ export const useReaderStore = defineStore('reader', {
|
||||
this.savePreferences();
|
||||
},
|
||||
|
||||
// Nouvelles actions pour les doubles pages
|
||||
setDoublePageMode(mode) {
|
||||
if (['rotate', 'scroll', 'normal'].includes(mode)) {
|
||||
this.doublePageSettings.mobileMode = mode;
|
||||
@@ -143,10 +225,16 @@ export const useReaderStore = defineStore('reader', {
|
||||
async goToPreviousChapter() {
|
||||
if (this.currentChapter?.navigation?.previousChapter) {
|
||||
await this.loadChapter(this.currentChapter.navigation.previousChapter);
|
||||
// Aller à la dernière page du chapitre précédent
|
||||
this.currentPage = Math.max(0, this.totalPages - 1);
|
||||
// S'assurer que la page est chargée
|
||||
if (this.totalPages > 0) {
|
||||
await this.loadPageData(this.currentPage);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Gestion de la persistance des préférences
|
||||
savePreferences() {
|
||||
try {
|
||||
const preferences = {
|
||||
@@ -164,19 +252,10 @@ export const useReaderStore = defineStore('reader', {
|
||||
loadPreferences() {
|
||||
try {
|
||||
const stored = localStorage.getItem('mangarr-reader-preferences');
|
||||
if (!stored) {
|
||||
const userPrefs = useUserPreferencesStore();
|
||||
this.readingDirection = userPrefs.readingDirection;
|
||||
const modeMap = { scroll: 'infinite', single: 'single', double: 'single' };
|
||||
this.readingMode = modeMap[userPrefs.readingMode] ?? 'single';
|
||||
if (userPrefs.readingMode === 'double') {
|
||||
this.doublePageSettings.autoDetect = true;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (stored) {
|
||||
const preferences = JSON.parse(stored);
|
||||
|
||||
// Appliquer les préférences sauvegardées
|
||||
if (preferences.readingMode) this.readingMode = preferences.readingMode;
|
||||
if (preferences.readingDirection) this.readingDirection = preferences.readingDirection;
|
||||
if (typeof preferences.zoom === 'number') this.zoom = preferences.zoom;
|
||||
@@ -198,6 +277,7 @@ export const useReaderStore = defineStore('reader', {
|
||||
}
|
||||
},
|
||||
|
||||
// Réinitialiser les préférences
|
||||
resetPreferences() {
|
||||
this.readingMode = 'single';
|
||||
this.readingDirection = 'ltr';
|
||||
|
||||
@@ -9,7 +9,7 @@ export class ApiChapterRepository extends ChapterRepositoryInterface {
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async getChapterPages(chapterId, page = 1, itemsPerPage = 9999) {
|
||||
async getChapterPages(chapterId, page = 1, itemsPerPage = 20) {
|
||||
const response = await fetch(
|
||||
`/api/reader/chapter/${chapterId}/pages?page=${page}&itemsPerPage=${itemsPerPage}`
|
||||
);
|
||||
@@ -18,4 +18,12 @@ export class ApiChapterRepository extends ChapterRepositoryInterface {
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async getChapterPage(chapterId, pageNumber) {
|
||||
const response = await fetch(`/api/reader/chapter/${chapterId}/page/${pageNumber}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch chapter page');
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,7 +65,6 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useHeaderStore } from '../../../../shared/stores/headerStore';
|
||||
import { useUserPreferencesStore } from '../../../../domain/setting/application/store/userPreferencesStore';
|
||||
import { useReaderStore } from '../../application/store/readerStore';
|
||||
import InfiniteReader from './InfiniteReader.vue';
|
||||
import ReaderControls from './ReaderControls.vue';
|
||||
@@ -85,7 +84,6 @@ import SingleModeReader from './SingleModeReader.vue';
|
||||
|
||||
const store = useReaderStore();
|
||||
const headerStore = useHeaderStore();
|
||||
const prefs = useUserPreferencesStore();
|
||||
|
||||
// Référence vers InfiniteReader pour accéder à ses méthodes
|
||||
const infiniteReaderRef = ref(null);
|
||||
@@ -99,7 +97,6 @@ import SingleModeReader from './SingleModeReader.vue';
|
||||
const toggleReadingMode = () => {
|
||||
const newMode = store.readingMode === 'single' ? 'infinite' : 'single';
|
||||
store.setReadingMode(newMode);
|
||||
prefs.setReadingMode(newMode === 'infinite' ? 'scroll' : 'single');
|
||||
|
||||
// Gérer la visibilité selon le mode
|
||||
if (newMode === 'single') {
|
||||
@@ -114,9 +111,7 @@ import SingleModeReader from './SingleModeReader.vue';
|
||||
};
|
||||
|
||||
const toggleReadingDirection = () => {
|
||||
const newDir = store.readingDirection === 'ltr' ? 'rtl' : 'ltr';
|
||||
store.setReadingDirection(newDir);
|
||||
prefs.setReadingDirection(newDir);
|
||||
store.setReadingDirection(store.readingDirection === 'ltr' ? 'rtl' : 'ltr');
|
||||
resetButtonsTimer();
|
||||
};
|
||||
|
||||
@@ -227,16 +222,6 @@ import SingleModeReader from './SingleModeReader.vue';
|
||||
|
||||
window.addEventListener('keydown', handleKeyPress);
|
||||
|
||||
// Auto-hide header si activé dans les préférences
|
||||
if (prefs.autoHideHeaderReader) {
|
||||
headerStore.enableAutoHide();
|
||||
}
|
||||
|
||||
// Auto-fullscreen si activé dans les préférences
|
||||
if (prefs.autoFullscreen && document.documentElement.requestFullscreen) {
|
||||
document.documentElement.requestFullscreen().catch(() => {});
|
||||
}
|
||||
|
||||
// Afficher les boutons au démarrage
|
||||
showButtonsWithTimer();
|
||||
});
|
||||
|
||||
@@ -6,10 +6,13 @@
|
||||
</div>
|
||||
|
||||
<div v-for="(page, index) in pages" :key="index" class="page-wrapper">
|
||||
<div v-if="!page?.url" class="loading">
|
||||
<div v-if="page?.loading" class="loading">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
<ReaderPage v-else :page-data="page" :page-number="index + 1" :zoom="zoom" :double-page-mode="doublePageMode" loading="lazy" />
|
||||
<div v-else-if="page?.error" class="error">
|
||||
{{ page.error }}
|
||||
</div>
|
||||
<ReaderPage v-else-if="page?.base64Content" :page-data="page" :page-number="index + 1" :zoom="zoom" :double-page-mode="doublePageMode" />
|
||||
</div>
|
||||
|
||||
<!-- Navigation en bas -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container" :style="{ transform: `scale(${zoom})` }">
|
||||
<div v-if="!pageData" class="error">Aucune donnée d'image disponible</div>
|
||||
<div v-else-if="!pageData.url" class="error">URL de l'image manquante</div>
|
||||
<div v-else-if="!pageData.base64Content" class="error">Contenu de l'image manquant</div>
|
||||
|
||||
<!-- Affichage spécial pour les doubles pages sur mobile -->
|
||||
<div v-else-if="isDoublePage && isMobile && doublePageMode !== 'normal'" class="double-page-mobile">
|
||||
@@ -88,7 +88,10 @@ import { useReaderStore } from '../../application/store/readerStore';
|
||||
const imageLoaded = ref(false);
|
||||
|
||||
const imageSource = computed(() => {
|
||||
return props.pageData?.url ?? '';
|
||||
if (!props.pageData?.base64Content || !props.pageData?.mimeType) {
|
||||
return '';
|
||||
}
|
||||
return `data:${props.pageData.mimeType};base64,${props.pageData.base64Content}`;
|
||||
});
|
||||
|
||||
// Détection des doubles pages basée sur le ratio largeur/hauteur et les dimensions API
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
const STORAGE_KEY = 'mangarr_preferences';
|
||||
|
||||
const defaultState = {
|
||||
theme: 'system',
|
||||
language: 'fr',
|
||||
defaultView: 'grid',
|
||||
itemsPerPage: 20,
|
||||
sortBy: 'title',
|
||||
readingDirection: 'ltr',
|
||||
readingMode: 'scroll',
|
||||
autoFullscreen: false,
|
||||
autoHideHeaderReader: true,
|
||||
toastDuration: 5000,
|
||||
};
|
||||
|
||||
function loadFromStorage() {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored) {
|
||||
return { ...defaultState, ...JSON.parse(stored) };
|
||||
}
|
||||
} catch {
|
||||
// ignore parse errors
|
||||
}
|
||||
return { ...defaultState };
|
||||
}
|
||||
|
||||
let mediaQueryUnsubscribe = null;
|
||||
|
||||
export const useUserPreferencesStore = defineStore('userPreferences', {
|
||||
state: () => loadFromStorage(),
|
||||
|
||||
actions: {
|
||||
applyTheme() {
|
||||
// Nettoyer le listener précédent
|
||||
if (mediaQueryUnsubscribe) {
|
||||
mediaQueryUnsubscribe();
|
||||
mediaQueryUnsubscribe = null;
|
||||
}
|
||||
|
||||
const html = document.documentElement;
|
||||
|
||||
if (this.theme === 'dark') {
|
||||
html.classList.add('dark');
|
||||
} else if (this.theme === 'light') {
|
||||
html.classList.remove('dark');
|
||||
} else {
|
||||
// mode 'system'
|
||||
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const handler = (e) => {
|
||||
if (e.matches) {
|
||||
html.classList.add('dark');
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
}
|
||||
};
|
||||
handler(mq);
|
||||
mq.addEventListener('change', handler);
|
||||
mediaQueryUnsubscribe = () => mq.removeEventListener('change', handler);
|
||||
}
|
||||
},
|
||||
|
||||
setTheme(theme) {
|
||||
this.theme = theme;
|
||||
this.persist();
|
||||
this.applyTheme();
|
||||
},
|
||||
|
||||
setLanguage(language) {
|
||||
this.language = language;
|
||||
this.persist();
|
||||
},
|
||||
|
||||
setDefaultView(view) {
|
||||
this.defaultView = view;
|
||||
this.persist();
|
||||
},
|
||||
|
||||
setItemsPerPage(count) {
|
||||
this.itemsPerPage = count;
|
||||
this.persist();
|
||||
},
|
||||
|
||||
setSortBy(sort) {
|
||||
this.sortBy = sort;
|
||||
this.persist();
|
||||
},
|
||||
|
||||
setReadingDirection(direction) {
|
||||
this.readingDirection = direction;
|
||||
this.persist();
|
||||
},
|
||||
|
||||
setReadingMode(mode) {
|
||||
this.readingMode = mode;
|
||||
this.persist();
|
||||
},
|
||||
|
||||
setAutoFullscreen(value) {
|
||||
this.autoFullscreen = value;
|
||||
this.persist();
|
||||
},
|
||||
|
||||
setAutoHideHeaderReader(value) {
|
||||
this.autoHideHeaderReader = value;
|
||||
this.persist();
|
||||
},
|
||||
|
||||
setToastDuration(duration) {
|
||||
this.toastDuration = duration;
|
||||
this.persist();
|
||||
},
|
||||
|
||||
resetToDefaults() {
|
||||
Object.assign(this, defaultState);
|
||||
this.persist();
|
||||
this.applyTheme();
|
||||
},
|
||||
|
||||
persist() {
|
||||
try {
|
||||
const data = {
|
||||
theme: this.theme,
|
||||
language: this.language,
|
||||
defaultView: this.defaultView,
|
||||
itemsPerPage: this.itemsPerPage,
|
||||
sortBy: this.sortBy,
|
||||
readingDirection: this.readingDirection,
|
||||
readingMode: this.readingMode,
|
||||
autoFullscreen: this.autoFullscreen,
|
||||
autoHideHeaderReader: this.autoHideHeaderReader,
|
||||
toastDuration: this.toastDuration,
|
||||
};
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
|
||||
} catch {
|
||||
// ignore storage errors
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full">
|
||||
<Toolbar :config="toolbarConfig" />
|
||||
<div>
|
||||
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
|
||||
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
@@ -72,7 +71,6 @@
|
||||
Configuration exportée !
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Modal -->
|
||||
<div v-if="showImportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full">
|
||||
<Toolbar :config="toolbarConfig" />
|
||||
<div>
|
||||
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
|
||||
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<!-- Back Navigation -->
|
||||
<div class="mb-6">
|
||||
@@ -181,7 +180,6 @@
|
||||
Configuration {{ isEditing ? 'mise à jour' : 'créée' }} avec succès !
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,242 +0,0 @@
|
||||
<template>
|
||||
<div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8 max-w-3xl">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('preferences.title') }}</h1>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('preferences.subtitle') }}</p>
|
||||
</div>
|
||||
<button
|
||||
class="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||
@click="handleReset">
|
||||
{{ t('preferences.reset') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Apparence -->
|
||||
<section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
|
||||
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
|
||||
{{ t('preferences.sections.appearance') }}
|
||||
</h2>
|
||||
<div class="space-y-1">
|
||||
<!-- Thème -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.theme.label') }}</label>
|
||||
<select
|
||||
:value="store.theme"
|
||||
class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
@change="store.setTheme($event.target.value)">
|
||||
<option value="light">{{ t('preferences.theme.light') }}</option>
|
||||
<option value="dark">{{ t('preferences.theme.dark') }}</option>
|
||||
<option value="system">{{ t('preferences.theme.system') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Langue -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.language.label') }}</label>
|
||||
<select
|
||||
:value="store.language"
|
||||
class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
@change="handleLanguageChange($event.target.value)">
|
||||
<option value="fr">{{ t('preferences.language.fr') }}</option>
|
||||
<option value="en">{{ t('preferences.language.en') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Affichage collection -->
|
||||
<section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
|
||||
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
|
||||
{{ t('preferences.sections.collection') }}
|
||||
</h2>
|
||||
<div class="space-y-1">
|
||||
<!-- Vue par défaut -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.defaultView.label') }}</label>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
:class="viewButtonClass('grid')"
|
||||
@click="store.setDefaultView('grid')">
|
||||
{{ t('preferences.defaultView.grid') }}
|
||||
</button>
|
||||
<button
|
||||
:class="viewButtonClass('list')"
|
||||
@click="store.setDefaultView('list')">
|
||||
{{ t('preferences.defaultView.list') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mangas par page -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.itemsPerPage.label') }}</label>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
v-for="n in [12, 20, 40]"
|
||||
:key="n"
|
||||
:class="countButtonClass(n)"
|
||||
@click="store.setItemsPerPage(n)">
|
||||
{{ n }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tri par défaut -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.sortBy.label') }}</label>
|
||||
<select
|
||||
:value="store.sortBy"
|
||||
class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
@change="store.setSortBy($event.target.value)">
|
||||
<option value="title">{{ t('preferences.sortBy.title') }}</option>
|
||||
<option value="addedAt">{{ t('preferences.sortBy.addedAt') }}</option>
|
||||
<option value="progress">{{ t('preferences.sortBy.progress') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lecture -->
|
||||
<section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
|
||||
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
|
||||
{{ t('preferences.sections.reading') }}
|
||||
</h2>
|
||||
<div class="space-y-1">
|
||||
<!-- Direction de lecture -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.readingDirection.label') }}</label>
|
||||
<select
|
||||
:value="store.readingDirection"
|
||||
class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
@change="store.setReadingDirection($event.target.value)">
|
||||
<option value="ltr">{{ t('preferences.readingDirection.ltr') }}</option>
|
||||
<option value="rtl">{{ t('preferences.readingDirection.rtl') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Mode d'affichage -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.readingMode.label') }}</label>
|
||||
<select
|
||||
:value="store.readingMode"
|
||||
class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
@change="store.setReadingMode($event.target.value)">
|
||||
<option value="scroll">{{ t('preferences.readingMode.scroll') }}</option>
|
||||
<option value="single">{{ t('preferences.readingMode.single') }}</option>
|
||||
<option value="double">{{ t('preferences.readingMode.double') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Auto plein écran -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.autoFullscreen.label') }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ t('preferences.autoFullscreen.description') }}</p>
|
||||
</div>
|
||||
<button
|
||||
:class="toggleClass(store.autoFullscreen)"
|
||||
role="switch"
|
||||
:aria-checked="store.autoFullscreen"
|
||||
@click="store.setAutoFullscreen(!store.autoFullscreen)">
|
||||
<span :class="toggleKnobClass(store.autoFullscreen)" />
|
||||
</button>
|
||||
</div>
|
||||
<!-- Auto-hide header -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.autoHideHeaderReader.label') }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ t('preferences.autoHideHeaderReader.description') }}</p>
|
||||
</div>
|
||||
<button
|
||||
:class="toggleClass(store.autoHideHeaderReader)"
|
||||
role="switch"
|
||||
:aria-checked="store.autoHideHeaderReader"
|
||||
@click="store.setAutoHideHeaderReader(!store.autoHideHeaderReader)">
|
||||
<span :class="toggleKnobClass(store.autoHideHeaderReader)" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Notifications -->
|
||||
<section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
|
||||
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
|
||||
{{ t('preferences.sections.notifications') }}
|
||||
</h2>
|
||||
<div class="space-y-1">
|
||||
<!-- Durée des toasts -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.toastDuration.label') }}</label>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
v-for="[val, label] in toastOptions"
|
||||
:key="val"
|
||||
:class="countButtonClass(val, store.toastDuration)"
|
||||
@click="store.setToastDuration(val)">
|
||||
{{ t(label) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useUserPreferencesStore } from '../../application/store/userPreferencesStore';
|
||||
import { i18n } from '../../../../shared/i18n';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const store = useUserPreferencesStore();
|
||||
|
||||
const toastOptions = [
|
||||
[3000, 'preferences.toastDuration.3s'],
|
||||
[5000, 'preferences.toastDuration.5s'],
|
||||
[10000, 'preferences.toastDuration.10s'],
|
||||
];
|
||||
|
||||
function handleLanguageChange(lang) {
|
||||
store.setLanguage(lang);
|
||||
i18n.global.locale.value = lang;
|
||||
locale.value = lang;
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
if (confirm(t('preferences.resetConfirm'))) {
|
||||
store.resetToDefaults();
|
||||
i18n.global.locale.value = store.language;
|
||||
locale.value = store.language;
|
||||
}
|
||||
}
|
||||
|
||||
function viewButtonClass(view) {
|
||||
const active = store.defaultView === view;
|
||||
return [
|
||||
'px-3 py-1.5 text-sm rounded-lg border transition-colors',
|
||||
active
|
||||
? 'bg-blue-600 text-white border-blue-600'
|
||||
: 'border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700',
|
||||
];
|
||||
}
|
||||
|
||||
function countButtonClass(val, current = store.itemsPerPage) {
|
||||
const active = current === val;
|
||||
return [
|
||||
'px-3 py-1.5 text-sm rounded-lg border transition-colors',
|
||||
active
|
||||
? 'bg-blue-600 text-white border-blue-600'
|
||||
: 'border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700',
|
||||
];
|
||||
}
|
||||
|
||||
function toggleClass(active) {
|
||||
return [
|
||||
'relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
||||
active ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-600',
|
||||
];
|
||||
}
|
||||
|
||||
function toggleKnobClass(active) {
|
||||
return [
|
||||
'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
|
||||
active ? 'translate-x-6' : 'translate-x-1',
|
||||
];
|
||||
}
|
||||
</script>
|
||||
@@ -4,9 +4,6 @@ import App from './App.vue';
|
||||
import { router } from './router';
|
||||
import '../../styles/app.scss';
|
||||
import { installVueQuery } from './shared/plugin/vueQuery';
|
||||
import { i18n } from './shared/i18n';
|
||||
import { useUserPreferencesStore } from './domain/setting/application/store/userPreferencesStore';
|
||||
|
||||
// Création du store
|
||||
const pinia = createPinia();
|
||||
|
||||
@@ -17,12 +14,5 @@ const app = createApp(App);
|
||||
app.use(router);
|
||||
app.use(pinia);
|
||||
app.use(installVueQuery);
|
||||
app.use(i18n);
|
||||
|
||||
// Appliquer le thème et la langue sauvegardés
|
||||
const prefs = useUserPreferencesStore();
|
||||
prefs.applyTheme();
|
||||
i18n.global.locale.value = prefs.language;
|
||||
|
||||
// Montage de l'application
|
||||
app.mount('#vue-app');
|
||||
|
||||
@@ -8,7 +8,6 @@ import MangaDetails from '../domain/manga/presentation/pages/MangaDetails.vue';
|
||||
import ChapterPage from '../domain/reader/presentation/pages/ChapterPage.vue';
|
||||
import ScrapperConfigurations from '../domain/setting/presentation/pages/ScrapperConfigurations.vue';
|
||||
import ScrapperEdit from '../domain/setting/presentation/pages/ScrapperEdit.vue';
|
||||
import UserPreferencesPage from '../domain/setting/presentation/pages/UserPreferencesPage.vue';
|
||||
import Layout from '../shared/components/layout/Layout.vue';
|
||||
|
||||
// Placeholder component for new routes
|
||||
@@ -130,7 +129,8 @@ const routes = [
|
||||
{
|
||||
path: '/settings/ui',
|
||||
name: 'settings-ui',
|
||||
component: UserPreferencesPage
|
||||
component: PlaceholderComponent,
|
||||
props: { title: "Paramètres de l'interface" }
|
||||
},
|
||||
// Système
|
||||
{
|
||||
@@ -168,6 +168,6 @@ const routes = [
|
||||
];
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory('/'),
|
||||
history: createWebHistory('/vue/'),
|
||||
routes
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="h-screen overflow-hidden bg-gray-50 dark:bg-gray-900 flex">
|
||||
<div class="min-h-screen bg-gray-50 flex">
|
||||
<Header
|
||||
:show-menu-button="isReaderMode"
|
||||
@menu-click="toggleSidebar"
|
||||
@@ -12,7 +12,7 @@
|
||||
@add-manga-click="$emit('add-manga-click', $event)" />
|
||||
|
||||
<main :class="[
|
||||
'flex-1 mt-16 flex flex-col overflow-hidden',
|
||||
'flex-1 pt-16',
|
||||
isReaderMode ? '' : 'md:ml-60'
|
||||
]">
|
||||
<RouterView></RouterView>
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
<template>
|
||||
<div class="fixed bottom-4 left-4 z-50 flex flex-col-reverse gap-2">
|
||||
<div class="fixed top-4 right-4 z-50 space-y-2">
|
||||
<TransitionGroup
|
||||
name="notification"
|
||||
tag="div"
|
||||
class="flex flex-col-reverse gap-2"
|
||||
class="space-y-2"
|
||||
>
|
||||
<div
|
||||
v-for="notification in notifications"
|
||||
:key="notification.id"
|
||||
:class="[
|
||||
'max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden',
|
||||
'max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden',
|
||||
getNotificationClass(notification.type)
|
||||
]"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 mr-3">
|
||||
<button
|
||||
@click="removeNotification(notification.id)"
|
||||
class="bg-white dark:bg-gray-800 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<XMarkIcon class="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 pt-0.5 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 dark:text-gray-100 break-words">
|
||||
{{ notification.message }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ml-3">
|
||||
<div class="flex-shrink-0">
|
||||
<component :is="getIcon(notification.type)" :class="[
|
||||
'h-6 w-6',
|
||||
getIconClass(notification.type)
|
||||
]" />
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ notification.message }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0 flex">
|
||||
<button
|
||||
@click="removeNotification(notification.id)"
|
||||
class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<XMarkIcon class="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,10 +66,10 @@ const getIcon = (type) => {
|
||||
|
||||
const getNotificationClass = (type) => {
|
||||
const classes = {
|
||||
success: 'border-r-4 border-green-400',
|
||||
error: 'border-r-4 border-red-400',
|
||||
warning: 'border-r-4 border-yellow-400',
|
||||
info: 'border-r-4 border-blue-400'
|
||||
success: 'border-l-4 border-green-400',
|
||||
error: 'border-l-4 border-red-400',
|
||||
warning: 'border-l-4 border-yellow-400',
|
||||
info: 'border-l-4 border-blue-400'
|
||||
};
|
||||
return classes[type] || classes.info;
|
||||
};
|
||||
@@ -93,11 +93,11 @@ const getIconClass = (type) => {
|
||||
|
||||
.notification-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.notification-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div v-if="totalPages > 1" class="flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
|
||||
<div v-if="totalPages > 1" class="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200">
|
||||
<!-- Informations de pagination -->
|
||||
<div class="flex items-center text-sm text-gray-700 dark:text-gray-300">
|
||||
<div class="flex items-center text-sm text-gray-700">
|
||||
<span>
|
||||
Affichage de
|
||||
<span class="font-medium">{{ startItem }}</span>
|
||||
@@ -22,8 +22,8 @@
|
||||
:class="[
|
||||
'relative inline-flex items-center px-2 py-2 text-sm font-medium rounded-md',
|
||||
hasPreviousPage
|
||||
? 'text-gray-500 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'
|
||||
: 'text-gray-300 dark:text-gray-600 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 cursor-not-allowed'
|
||||
? 'text-gray-500 bg-white border border-gray-300 hover:bg-gray-50'
|
||||
: 'text-gray-300 bg-gray-100 border border-gray-200 cursor-not-allowed'
|
||||
]">
|
||||
<span class="sr-only">Précédent</span>
|
||||
<ChevronLeftIcon class="h-5 w-5" />
|
||||
@@ -38,14 +38,14 @@
|
||||
:class="[
|
||||
'relative inline-flex items-center px-3 py-2 text-sm font-medium rounded-md',
|
||||
currentPage === 1
|
||||
? 'z-10 bg-indigo-50 dark:bg-indigo-900/30 border-indigo-500 text-indigo-600 dark:text-indigo-400'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
|
||||
? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600'
|
||||
: 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
|
||||
]">
|
||||
1
|
||||
</button>
|
||||
|
||||
<!-- Points de suspension gauche -->
|
||||
<span v-if="showLeftDots" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<span v-if="showLeftDots" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700">
|
||||
...
|
||||
</span>
|
||||
|
||||
@@ -57,14 +57,14 @@
|
||||
:class="[
|
||||
'relative inline-flex items-center px-3 py-2 text-sm font-medium rounded-md',
|
||||
currentPage === page
|
||||
? 'z-10 bg-indigo-50 dark:bg-indigo-900/30 border-indigo-500 text-indigo-600 dark:text-indigo-400'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
|
||||
? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600'
|
||||
: 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
|
||||
]">
|
||||
{{ page }}
|
||||
</button>
|
||||
|
||||
<!-- Points de suspension droite -->
|
||||
<span v-if="showRightDots" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<span v-if="showRightDots" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700">
|
||||
...
|
||||
</span>
|
||||
|
||||
@@ -75,8 +75,8 @@
|
||||
:class="[
|
||||
'relative inline-flex items-center px-3 py-2 text-sm font-medium rounded-md',
|
||||
currentPage === totalPages
|
||||
? 'z-10 bg-indigo-50 dark:bg-indigo-900/30 border-indigo-500 text-indigo-600 dark:text-indigo-400'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
|
||||
? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600'
|
||||
: 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
|
||||
]">
|
||||
{{ totalPages }}
|
||||
</button>
|
||||
@@ -84,7 +84,7 @@
|
||||
|
||||
<!-- Pagination mobile -->
|
||||
<div class="md:hidden flex items-center space-x-2">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">
|
||||
<span class="text-sm text-gray-700">
|
||||
{{ currentPage }} / {{ totalPages }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -96,8 +96,8 @@
|
||||
:class="[
|
||||
'relative inline-flex items-center px-2 py-2 text-sm font-medium rounded-md',
|
||||
hasNextPage
|
||||
? 'text-gray-500 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'
|
||||
: 'text-gray-300 dark:text-gray-600 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 cursor-not-allowed'
|
||||
? 'text-gray-500 bg-white border border-gray-300 hover:bg-gray-50'
|
||||
: 'text-gray-300 bg-gray-100 border border-gray-200 cursor-not-allowed'
|
||||
]">
|
||||
<span class="sr-only">Suivant</span>
|
||||
<ChevronRightIcon class="h-5 w-5" />
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: value => {
|
||||
// Vérifie que leftSection et rightSection sont des tableaux
|
||||
return Array.isArray(value.leftSection) && Array.isArray(value.rightSection);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
import { onMounted, onBeforeUnmount } from 'vue';
|
||||
import { useNotifications } from './useNotifications';
|
||||
|
||||
export function useMercureNotifications() {
|
||||
const { showSuccess, showError, showInfo, showWarning } = useNotifications();
|
||||
let eventSource = null;
|
||||
|
||||
const handleNotification = data => {
|
||||
const message = data.message ?? 'Notification';
|
||||
switch (data.status) {
|
||||
case 'success': showSuccess(message); break;
|
||||
case 'error': showError(message); break;
|
||||
case 'warning': showWarning(message); break;
|
||||
default: showInfo(message);
|
||||
}
|
||||
};
|
||||
|
||||
const setup = () => {
|
||||
const url = new URL('/.well-known/mercure', window.location.origin);
|
||||
url.searchParams.append('topic', 'notifications');
|
||||
|
||||
eventSource = new EventSource(url, { withCredentials: true });
|
||||
|
||||
eventSource.onmessage = event => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
handleNotification(data);
|
||||
} catch (e) {
|
||||
console.error('useMercureNotifications: erreur de parsing', e);
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = () => {
|
||||
eventSource?.close();
|
||||
setTimeout(setup, 5000);
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(setup);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
eventSource?.close();
|
||||
eventSource = null;
|
||||
});
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import { ref } from 'vue';
|
||||
import { useUserPreferencesStore } from '../../domain/setting/application/store/userPreferencesStore';
|
||||
|
||||
const notifications = ref([]);
|
||||
let nextId = 1;
|
||||
@@ -37,24 +36,20 @@ export function useNotifications() {
|
||||
notifications.value = [];
|
||||
};
|
||||
|
||||
const showSuccess = (message, duration) => {
|
||||
const prefs = useUserPreferencesStore();
|
||||
return addNotification(message, 'success', duration ?? prefs.toastDuration);
|
||||
const showSuccess = (message, duration = 4000) => {
|
||||
return addNotification(message, 'success', duration);
|
||||
};
|
||||
|
||||
const showError = (message, duration) => {
|
||||
const prefs = useUserPreferencesStore();
|
||||
return addNotification(message, 'error', duration ?? prefs.toastDuration);
|
||||
const showError = (message, duration = 6000) => {
|
||||
return addNotification(message, 'error', duration);
|
||||
};
|
||||
|
||||
const showWarning = (message, duration) => {
|
||||
const prefs = useUserPreferencesStore();
|
||||
return addNotification(message, 'warning', duration ?? prefs.toastDuration);
|
||||
const showWarning = (message, duration = 5000) => {
|
||||
return addNotification(message, 'warning', duration);
|
||||
};
|
||||
|
||||
const showInfo = (message, duration) => {
|
||||
const prefs = useUserPreferencesStore();
|
||||
return addNotification(message, 'info', duration ?? prefs.toastDuration);
|
||||
const showInfo = (message, duration = 4000) => {
|
||||
return addNotification(message, 'info', duration);
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import { createI18n } from 'vue-i18n';
|
||||
import fr from './locales/fr.json';
|
||||
import en from './locales/en.json';
|
||||
|
||||
export const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: 'fr',
|
||||
fallbackLocale: 'fr',
|
||||
messages: { fr, en },
|
||||
});
|
||||
@@ -1,67 +0,0 @@
|
||||
{
|
||||
"nav": {
|
||||
"preferences": "Preferences"
|
||||
},
|
||||
"preferences": {
|
||||
"title": "Preferences",
|
||||
"subtitle": "Customize the interface to your liking",
|
||||
"reset": "Reset",
|
||||
"resetConfirm": "Reset to default values?",
|
||||
"sections": {
|
||||
"appearance": "Appearance",
|
||||
"collection": "Collection display",
|
||||
"reading": "Reading",
|
||||
"notifications": "Notifications"
|
||||
},
|
||||
"theme": {
|
||||
"label": "Theme",
|
||||
"light": "Light",
|
||||
"dark": "Dark",
|
||||
"system": "System (automatic)"
|
||||
},
|
||||
"language": {
|
||||
"label": "Language",
|
||||
"fr": "Français",
|
||||
"en": "English"
|
||||
},
|
||||
"defaultView": {
|
||||
"label": "Default view",
|
||||
"grid": "Grid",
|
||||
"list": "List"
|
||||
},
|
||||
"itemsPerPage": {
|
||||
"label": "Mangas per page"
|
||||
},
|
||||
"sortBy": {
|
||||
"label": "Default sort",
|
||||
"title": "Title",
|
||||
"addedAt": "Date added",
|
||||
"progress": "Progress"
|
||||
},
|
||||
"readingDirection": {
|
||||
"label": "Reading direction",
|
||||
"ltr": "Left → Right (western)",
|
||||
"rtl": "Right → Left (manga)"
|
||||
},
|
||||
"readingMode": {
|
||||
"label": "Display mode",
|
||||
"scroll": "Vertical scroll",
|
||||
"single": "Single page",
|
||||
"double": "Double page"
|
||||
},
|
||||
"autoFullscreen": {
|
||||
"label": "Auto fullscreen",
|
||||
"description": "Enter fullscreen when starting the reader"
|
||||
},
|
||||
"autoHideHeaderReader": {
|
||||
"label": "Auto-hide header",
|
||||
"description": "Hide the navigation bar in reading mode"
|
||||
},
|
||||
"toastDuration": {
|
||||
"label": "Notification duration",
|
||||
"3s": "3 seconds",
|
||||
"5s": "5 seconds",
|
||||
"10s": "10 seconds"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
{
|
||||
"nav": {
|
||||
"preferences": "Préférences"
|
||||
},
|
||||
"preferences": {
|
||||
"title": "Préférences",
|
||||
"subtitle": "Personnalisez l'interface selon vos goûts",
|
||||
"reset": "Réinitialiser",
|
||||
"resetConfirm": "Remettre les valeurs par défaut ?",
|
||||
"sections": {
|
||||
"appearance": "Apparence",
|
||||
"collection": "Affichage de la collection",
|
||||
"reading": "Lecture",
|
||||
"notifications": "Notifications"
|
||||
},
|
||||
"theme": {
|
||||
"label": "Thème",
|
||||
"light": "Clair",
|
||||
"dark": "Sombre",
|
||||
"system": "Système (automatique)"
|
||||
},
|
||||
"language": {
|
||||
"label": "Langue",
|
||||
"fr": "Français",
|
||||
"en": "English"
|
||||
},
|
||||
"defaultView": {
|
||||
"label": "Vue par défaut",
|
||||
"grid": "Grille",
|
||||
"list": "Liste"
|
||||
},
|
||||
"itemsPerPage": {
|
||||
"label": "Mangas par page"
|
||||
},
|
||||
"sortBy": {
|
||||
"label": "Tri par défaut",
|
||||
"title": "Titre",
|
||||
"addedAt": "Date d'ajout",
|
||||
"progress": "Progression"
|
||||
},
|
||||
"readingDirection": {
|
||||
"label": "Direction de lecture",
|
||||
"ltr": "Gauche → Droite (occidental)",
|
||||
"rtl": "Droite → Gauche (manga)"
|
||||
},
|
||||
"readingMode": {
|
||||
"label": "Mode d'affichage",
|
||||
"scroll": "Défilement vertical",
|
||||
"single": "Page unique",
|
||||
"double": "Double page"
|
||||
},
|
||||
"autoFullscreen": {
|
||||
"label": "Plein écran automatique",
|
||||
"description": "Passer en plein écran au démarrage du lecteur"
|
||||
},
|
||||
"autoHideHeaderReader": {
|
||||
"label": "Masquer automatiquement l'en-tête",
|
||||
"description": "Masquer la barre de navigation en mode lecture"
|
||||
},
|
||||
"toastDuration": {
|
||||
"label": "Durée des notifications",
|
||||
"3s": "3 secondes",
|
||||
"5s": "5 secondes",
|
||||
"10s": "10 secondes"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -26,7 +26,6 @@
|
||||
"runtime/frankenphp-symfony": "^0.2.0",
|
||||
"symfony/asset": "7.0.*",
|
||||
"symfony/console": "7.0.*",
|
||||
"symfony/css-selector": "7.0.*",
|
||||
"symfony/doctrine-messenger": "7.0.*",
|
||||
"symfony/dotenv": "7.0.*",
|
||||
"symfony/expression-language": "7.0.*",
|
||||
@@ -118,6 +117,7 @@
|
||||
"phpmd/phpmd": "^2.15",
|
||||
"phpunit/phpunit": "^10.5",
|
||||
"symfony/browser-kit": "7.0.*",
|
||||
"symfony/css-selector": "7.0.*",
|
||||
"symfony/maker-bundle": "^1.52",
|
||||
"symfony/phpunit-bridge": "^7.0",
|
||||
"symfony/stopwatch": "7.0.*",
|
||||
|
||||
198
composer.lock
generated
198
composer.lock
generated
@@ -4,7 +4,7 @@
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "0fc13b604085c0e8bcdf062505a21389",
|
||||
"content-hash": "1ec83e325be6f57ff404050f1ad58e2d",
|
||||
"packages": [
|
||||
{
|
||||
"name": "api-platform/core",
|
||||
@@ -196,16 +196,16 @@
|
||||
},
|
||||
{
|
||||
"name": "brick/math",
|
||||
"version": "0.14.8",
|
||||
"version": "0.14.7",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/brick/math.git",
|
||||
"reference": "63422359a44b7f06cae63c3b429b59e8efcc0629"
|
||||
"reference": "07ff363b16ef8aca9692bba3be9e73fe63f34e50"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/brick/math/zipball/63422359a44b7f06cae63c3b429b59e8efcc0629",
|
||||
"reference": "63422359a44b7f06cae63c3b429b59e8efcc0629",
|
||||
"url": "https://api.github.com/repos/brick/math/zipball/07ff363b16ef8aca9692bba3be9e73fe63f34e50",
|
||||
"reference": "07ff363b16ef8aca9692bba3be9e73fe63f34e50",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@@ -244,7 +244,7 @@
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/brick/math/issues",
|
||||
"source": "https://github.com/brick/math/tree/0.14.8"
|
||||
"source": "https://github.com/brick/math/tree/0.14.7"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@@ -252,7 +252,7 @@
|
||||
"type": "github"
|
||||
}
|
||||
],
|
||||
"time": "2026-02-10T14:33:43+00:00"
|
||||
"time": "2026-02-07T10:57:35+00:00"
|
||||
},
|
||||
{
|
||||
"name": "doctrine/cache",
|
||||
@@ -527,16 +527,16 @@
|
||||
},
|
||||
{
|
||||
"name": "doctrine/dbal",
|
||||
"version": "3.10.5",
|
||||
"version": "3.10.4",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/doctrine/dbal.git",
|
||||
"reference": "95d84866bf3c04b2ddca1df7c049714660959aef"
|
||||
"reference": "63a46cb5aa6f60991186cc98c1d1b50c09311868"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/doctrine/dbal/zipball/95d84866bf3c04b2ddca1df7c049714660959aef",
|
||||
"reference": "95d84866bf3c04b2ddca1df7c049714660959aef",
|
||||
"url": "https://api.github.com/repos/doctrine/dbal/zipball/63a46cb5aa6f60991186cc98c1d1b50c09311868",
|
||||
"reference": "63a46cb5aa6f60991186cc98c1d1b50c09311868",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@@ -557,9 +557,9 @@
|
||||
"jetbrains/phpstorm-stubs": "2023.1",
|
||||
"phpstan/phpstan": "2.1.30",
|
||||
"phpstan/phpstan-strict-rules": "^2",
|
||||
"phpunit/phpunit": "9.6.34",
|
||||
"slevomat/coding-standard": "8.27.1",
|
||||
"squizlabs/php_codesniffer": "4.0.1",
|
||||
"phpunit/phpunit": "9.6.29",
|
||||
"slevomat/coding-standard": "8.24.0",
|
||||
"squizlabs/php_codesniffer": "4.0.0",
|
||||
"symfony/cache": "^5.4|^6.0|^7.0|^8.0",
|
||||
"symfony/console": "^4.4|^5.4|^6.0|^7.0|^8.0"
|
||||
},
|
||||
@@ -621,7 +621,7 @@
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/doctrine/dbal/issues",
|
||||
"source": "https://github.com/doctrine/dbal/tree/3.10.5"
|
||||
"source": "https://github.com/doctrine/dbal/tree/3.10.4"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@@ -637,7 +637,7 @@
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2026-02-24T08:03:57+00:00"
|
||||
"time": "2025-11-29T10:46:08+00:00"
|
||||
},
|
||||
{
|
||||
"name": "doctrine/deprecations",
|
||||
@@ -1223,16 +1223,16 @@
|
||||
},
|
||||
{
|
||||
"name": "doctrine/migrations",
|
||||
"version": "3.9.6",
|
||||
"version": "3.9.5",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/doctrine/migrations.git",
|
||||
"reference": "ffd8355cdd8505fc650d9604f058bf62aedd80a1"
|
||||
"reference": "1b823afbc40f932dae8272574faee53f2755eac5"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/doctrine/migrations/zipball/ffd8355cdd8505fc650d9604f058bf62aedd80a1",
|
||||
"reference": "ffd8355cdd8505fc650d9604f058bf62aedd80a1",
|
||||
"url": "https://api.github.com/repos/doctrine/migrations/zipball/1b823afbc40f932dae8272574faee53f2755eac5",
|
||||
"reference": "1b823afbc40f932dae8272574faee53f2755eac5",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@@ -1306,7 +1306,7 @@
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/doctrine/migrations/issues",
|
||||
"source": "https://github.com/doctrine/migrations/tree/3.9.6"
|
||||
"source": "https://github.com/doctrine/migrations/tree/3.9.5"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@@ -1322,7 +1322,7 @@
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2026-02-11T06:46:11+00:00"
|
||||
"time": "2025-11-20T11:15:36+00:00"
|
||||
},
|
||||
{
|
||||
"name": "doctrine/orm",
|
||||
@@ -1971,16 +1971,16 @@
|
||||
},
|
||||
{
|
||||
"name": "intervention/image",
|
||||
"version": "3.11.7",
|
||||
"version": "3.11.6",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Intervention/image.git",
|
||||
"reference": "2159bcccff18f09d2a392679b81a82c5a003f9bb"
|
||||
"reference": "5f6d27d9fd56312c47f347929e7ac15345c605a1"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/Intervention/image/zipball/2159bcccff18f09d2a392679b81a82c5a003f9bb",
|
||||
"reference": "2159bcccff18f09d2a392679b81a82c5a003f9bb",
|
||||
"url": "https://api.github.com/repos/Intervention/image/zipball/5f6d27d9fd56312c47f347929e7ac15345c605a1",
|
||||
"reference": "5f6d27d9fd56312c47f347929e7ac15345c605a1",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@@ -2027,7 +2027,7 @@
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/Intervention/image/issues",
|
||||
"source": "https://github.com/Intervention/image/tree/3.11.7"
|
||||
"source": "https://github.com/Intervention/image/tree/3.11.6"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@@ -2043,7 +2043,7 @@
|
||||
"type": "ko_fi"
|
||||
}
|
||||
],
|
||||
"time": "2026-02-19T13:11:17+00:00"
|
||||
"time": "2025-12-17T13:38:29+00:00"
|
||||
},
|
||||
{
|
||||
"name": "jms/metadata",
|
||||
@@ -3972,71 +3972,6 @@
|
||||
],
|
||||
"time": "2024-07-26T12:31:22+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/css-selector",
|
||||
"version": "v7.0.8",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/symfony/css-selector.git",
|
||||
"reference": "63b9f8c9b3c28c43ad06764c67fe092af2576d17"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/symfony/css-selector/zipball/63b9f8c9b3c28c43ad06764c67fe092af2576d17",
|
||||
"reference": "63b9f8c9b3c28c43ad06764c67fe092af2576d17",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"php": ">=8.2"
|
||||
},
|
||||
"type": "library",
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Symfony\\Component\\CssSelector\\": ""
|
||||
},
|
||||
"exclude-from-classmap": [
|
||||
"/Tests/"
|
||||
]
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Fabien Potencier",
|
||||
"email": "fabien@symfony.com"
|
||||
},
|
||||
{
|
||||
"name": "Jean-François Simon",
|
||||
"email": "jeanfrancois.simon@sensiolabs.com"
|
||||
},
|
||||
{
|
||||
"name": "Symfony Community",
|
||||
"homepage": "https://symfony.com/contributors"
|
||||
}
|
||||
],
|
||||
"description": "Converts CSS selectors to XPath expressions",
|
||||
"homepage": "https://symfony.com",
|
||||
"support": {
|
||||
"source": "https://github.com/symfony/css-selector/tree/v7.0.8"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://symfony.com/sponsor",
|
||||
"type": "custom"
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fabpot",
|
||||
"type": "github"
|
||||
},
|
||||
{
|
||||
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2024-05-31T14:55:39+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/dependency-injection",
|
||||
"version": "v7.0.10",
|
||||
@@ -13106,6 +13041,71 @@
|
||||
],
|
||||
"time": "2023-02-07T11:34:05+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/css-selector",
|
||||
"version": "v7.0.8",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/symfony/css-selector.git",
|
||||
"reference": "63b9f8c9b3c28c43ad06764c67fe092af2576d17"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/symfony/css-selector/zipball/63b9f8c9b3c28c43ad06764c67fe092af2576d17",
|
||||
"reference": "63b9f8c9b3c28c43ad06764c67fe092af2576d17",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"php": ">=8.2"
|
||||
},
|
||||
"type": "library",
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Symfony\\Component\\CssSelector\\": ""
|
||||
},
|
||||
"exclude-from-classmap": [
|
||||
"/Tests/"
|
||||
]
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Fabien Potencier",
|
||||
"email": "fabien@symfony.com"
|
||||
},
|
||||
{
|
||||
"name": "Jean-François Simon",
|
||||
"email": "jeanfrancois.simon@sensiolabs.com"
|
||||
},
|
||||
{
|
||||
"name": "Symfony Community",
|
||||
"homepage": "https://symfony.com/contributors"
|
||||
}
|
||||
],
|
||||
"description": "Converts CSS selectors to XPath expressions",
|
||||
"homepage": "https://symfony.com",
|
||||
"support": {
|
||||
"source": "https://github.com/symfony/css-selector/tree/v7.0.8"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://symfony.com/sponsor",
|
||||
"type": "custom"
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fabpot",
|
||||
"type": "github"
|
||||
},
|
||||
{
|
||||
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2024-05-31T14:55:39+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/maker-bundle",
|
||||
"version": "v1.62.1",
|
||||
@@ -13200,16 +13200,16 @@
|
||||
},
|
||||
{
|
||||
"name": "symfony/phpunit-bridge",
|
||||
"version": "v7.4.7",
|
||||
"version": "v7.4.3",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/symfony/phpunit-bridge.git",
|
||||
"reference": "53c5a606cb4ae19c9466a5f8ffe60f61b0c93b5f"
|
||||
"reference": "f933e68bb9df29d08077a37e1515a23fea8562ab"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/symfony/phpunit-bridge/zipball/53c5a606cb4ae19c9466a5f8ffe60f61b0c93b5f",
|
||||
"reference": "53c5a606cb4ae19c9466a5f8ffe60f61b0c93b5f",
|
||||
"url": "https://api.github.com/repos/symfony/phpunit-bridge/zipball/f933e68bb9df29d08077a37e1515a23fea8562ab",
|
||||
"reference": "f933e68bb9df29d08077a37e1515a23fea8562ab",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@@ -13261,7 +13261,7 @@
|
||||
"testing"
|
||||
],
|
||||
"support": {
|
||||
"source": "https://github.com/symfony/phpunit-bridge/tree/v7.4.7"
|
||||
"source": "https://github.com/symfony/phpunit-bridge/tree/v7.4.3"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@@ -13281,7 +13281,7 @@
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2026-03-04T13:54:41+00:00"
|
||||
"time": "2025-12-09T15:33:45+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/web-profiler-bundle",
|
||||
|
||||
@@ -29,7 +29,7 @@ framework:
|
||||
'App\Domain\Manga\Application\Command\RefreshMangaChapters': commands
|
||||
|
||||
# Events spécifiques (pour compatibilité, peuvent être supprimés si tous implémentent AsyncDomainEvent)
|
||||
# ChapterScrapingStarted est synchrone pour que la notif "démarrage" arrive AVANT le scraping
|
||||
'App\Domain\Scraping\Domain\Event\ChapterScrapingStarted': events
|
||||
'App\Domain\Scraping\Domain\Event\ChapterScrapingCompleted': events
|
||||
'App\Domain\Scraping\Domain\Event\ChapterScrapingFailed': events
|
||||
'App\Domain\Manga\Domain\Event\ChapterReadyForScraping': events
|
||||
|
||||
@@ -34,11 +34,11 @@ framework:
|
||||
assets:
|
||||
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
|
||||
|
||||
when@prod:
|
||||
webpack_encore:
|
||||
# Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
|
||||
# Available in version 1.2
|
||||
cache: true
|
||||
#when@prod:
|
||||
# webpack_encore:
|
||||
# # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
|
||||
# # Available in version 1.2
|
||||
# cache: true
|
||||
|
||||
#when@test:
|
||||
# webpack_encore:
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
vue_app:
|
||||
path: /{req}
|
||||
controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
|
||||
defaults:
|
||||
template: 'vue/index.html.twig'
|
||||
req: ''
|
||||
requirements:
|
||||
req: "^(?!api/|legacy).*"
|
||||
|
||||
controllers:
|
||||
resource:
|
||||
path: ../src/Controller/
|
||||
namespace: App\Controller
|
||||
type: attribute
|
||||
|
||||
vue_app:
|
||||
path: /vue/{req}
|
||||
controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
|
||||
defaults:
|
||||
template: 'vue/index.html.twig'
|
||||
req: ''
|
||||
requirements:
|
||||
req: ".*"
|
||||
|
||||
@@ -131,7 +131,7 @@ services:
|
||||
|
||||
App\Domain\Scraping\Infrastructure\Service\LocalImageStorage:
|
||||
arguments:
|
||||
$storagePath: '%kernel.project_dir%/public/images'
|
||||
$storagePath: '%env(MANGA_DATA_PATH)%'
|
||||
|
||||
# Shared Manga Path/File Manager
|
||||
App\Domain\Shared\Domain\Contract\MangaPathManagerInterface:
|
||||
|
||||
151
deploy.php
151
deploy.php
@@ -2,135 +2,38 @@
|
||||
namespace Deployer;
|
||||
|
||||
require 'recipe/symfony.php';
|
||||
// require 'contrib/webpack_encore.php';
|
||||
require 'contrib/npm.php';
|
||||
|
||||
// GITEA_TOKEN injecté depuis le secret Gitea (scope: read:repository)
|
||||
$giteaToken = getenv('GITEA_TOKEN') ?: throw new \RuntimeException('GITEA_TOKEN secret is required');
|
||||
set('repository', "https://{$giteaToken}@git.homelab.nestor-server.fr/colgora/Mangarr.git");
|
||||
set('keep_releases', 3);
|
||||
set('composer_options', '--no-dev --optimize-autoloader --no-interaction --prefer-dist --ignore-platform-reqs --no-scripts');
|
||||
// Config
|
||||
set('nodejs_version', 'node_22.x');
|
||||
set('keep_releases', '3');
|
||||
set('repository', 'gitea@git.test.nestor-server.fr:Colgora/Mangarr.git');
|
||||
set('webpack_encore/env', 'production');
|
||||
set('composer_options', '--verbose --prefer-dist --no-progress --no-interaction --optimize-autoloader');
|
||||
|
||||
// Copier vendor/ depuis la release précédente (hard links, quasi instantané)
|
||||
// node_modules est géré par le shared mount /srv/mangarr/shared/node_modules
|
||||
set('copy_dirs', ['vendor']);
|
||||
set('shared_files', ['.env.local','var/log/prod.log']);
|
||||
set('shared_dirs', ['config/secrets','public/cbz','public/tmp','public/images']);
|
||||
// add('writable_dirs', []);
|
||||
|
||||
// Pas de shared_files ni shared_dirs : tout est géré par les volumes Docker
|
||||
set('shared_files', []);
|
||||
set('shared_dirs', []);
|
||||
set('writable_dirs', []);
|
||||
desc('Runs webpack encore build');
|
||||
task('webpack_encore:build', function () {
|
||||
run("cd {{release_path}} && npm run build");
|
||||
});
|
||||
|
||||
host('production')
|
||||
->set('hostname', getenv('DEPLOY_HOST')) // Injecté depuis le secret Gitea
|
||||
->set('remote_user', 'deploy') // User avec accès docker group
|
||||
->set('deploy_path', '/srv/mangarr')
|
||||
desc('Run messenger consume');
|
||||
task('messenger:consume', function () {
|
||||
run("sudo supervisorctl restart messenger-consume:*");
|
||||
});
|
||||
|
||||
host('mangarr.test.nestor-server.fr')
|
||||
->set('remote_user', 'colgora')
|
||||
->set('deploy_path', '/var/www/mangarr')
|
||||
->set('branch', 'main');
|
||||
|
||||
// Créer les dossiers que Docker doit monter comme volumes (gitignorés, absents de la release)
|
||||
task('deploy:prepare_dirs', function () {
|
||||
run('mkdir -p {{release_path}}/var {{release_path}}/public/images {{release_path}}/public/cbz {{release_path}}/public/tmp');
|
||||
});
|
||||
|
||||
// composer install via container éphémère (pas de PHP sur l'hôte requis)
|
||||
// --user assure que vendor/ appartient au user deploy et non root
|
||||
// Skip si composer.lock inchangé et vendor/ déjà populé (hard-linké depuis la release précédente)
|
||||
task('deploy:vendors', function () {
|
||||
$releaseDir = get('release_path');
|
||||
$previousDir = get('previous_release');
|
||||
|
||||
if ($previousDir !== null) {
|
||||
$lockUnchanged = test("diff -q $previousDir/composer.lock $releaseDir/composer.lock > /dev/null 2>&1");
|
||||
$vendorPopulated = test("[ -d $releaseDir/vendor/composer ]");
|
||||
|
||||
if ($lockUnchanged && $vendorPopulated) {
|
||||
writeln('<info>deploy:vendors skipped — composer.lock unchanged</info>');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
run('docker run --rm --user $(id -u):$(id -g) -v {{release_path}}:/app -w /app composer:2 install {{composer_options}}');
|
||||
});
|
||||
|
||||
// Build assets via container node éphémère
|
||||
// 3 couches d'optimisation :
|
||||
// 1. Skip total si aucun fichier front-end n'a changé (hard-link public/build/)
|
||||
// 2. Skip npm install si package-lock.json inchangé (node_modules partagé persistant)
|
||||
// 3. Cache npm et webpack persistants entre les releases
|
||||
desc('Build Webpack Encore assets');
|
||||
task('webpack_encore:build', function () {
|
||||
$sharedDir = '/srv/mangarr/shared';
|
||||
$sharedWebpackCache = "$sharedDir/webpack_cache";
|
||||
$sharedNodeModules = "$sharedDir/node_modules";
|
||||
$sharedNpmCache = "$sharedDir/npm_cache";
|
||||
|
||||
run("mkdir -p $sharedWebpackCache $sharedNodeModules $sharedNpmCache");
|
||||
|
||||
$releaseDir = get('release_path');
|
||||
$previousDir = get('previous_release'); // null au 1er déploiement
|
||||
|
||||
// --- COUCHE 1 : skip total si aucun fichier front-end n'a changé ---
|
||||
if ($previousDir !== null) {
|
||||
$watchList = ['assets', 'templates', 'package.json', 'package-lock.json',
|
||||
'webpack.config.js', 'postcss.config.js', 'tailwind.config.js'];
|
||||
|
||||
$diffChecks = implode(' && ', array_map(
|
||||
fn($p) => "diff -rq --no-dereference $previousDir/$p $releaseDir/$p > /dev/null 2>&1",
|
||||
$watchList
|
||||
));
|
||||
|
||||
$hasPreviousBuild = test("[ -d $previousDir/public/build ] && [ -f $previousDir/public/build/manifest.json ]");
|
||||
|
||||
if ($hasPreviousBuild && test("($diffChecks)")) {
|
||||
run("cp -al $previousDir/public/build $releaseDir/public/build");
|
||||
writeln('<info>webpack_encore:build skipped — no front-end files changed</info>');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// --- COUCHE 2 : skip npm install si package-lock.json inchangé ---
|
||||
$needsNpmInstall = true;
|
||||
if ($previousDir !== null) {
|
||||
$lockUnchanged = test("diff -q $previousDir/package-lock.json $releaseDir/package-lock.json > /dev/null 2>&1");
|
||||
$nmPopulated = test("[ -d $sharedNodeModules/.bin ]");
|
||||
if ($lockUnchanged && $nmPopulated) {
|
||||
$needsNpmInstall = false;
|
||||
}
|
||||
}
|
||||
|
||||
// --- COUCHE 3 : build docker avec caches persistants ---
|
||||
$installCmd = $needsNpmInstall
|
||||
? 'npm install --prefer-offline && npm run build'
|
||||
: 'npm run build';
|
||||
|
||||
run("docker run --rm \
|
||||
--user \$(id -u):\$(id -g) \
|
||||
-v $releaseDir:/app \
|
||||
-v $sharedNodeModules:/app/node_modules \
|
||||
-v $sharedWebpackCache:/app/node_modules/.cache \
|
||||
-v $sharedNpmCache:/npm_cache \
|
||||
-e npm_config_cache=/npm_cache \
|
||||
-e PUPPETEER_SKIP_DOWNLOAD=1 \
|
||||
-w /app \
|
||||
node:22-alpine \
|
||||
sh -c '$installCmd'");
|
||||
});
|
||||
|
||||
// Restart Docker containers (entrypoint gère les migrations automatiquement)
|
||||
// Le cache:clear est fait APRÈS le restart : Docker résout le bind mount au démarrage
|
||||
// du container, pas dynamiquement. Avant restart, docker exec voit encore l'ancienne release.
|
||||
desc('Restart Docker containers');
|
||||
task('docker:restart', function () {
|
||||
run('docker restart mangarr-worker-commands mangarr-worker-events mangarr-worker-scheduler');
|
||||
run('docker restart mangarr');
|
||||
run('docker exec mangarr php bin/console cache:clear --env=prod');
|
||||
});
|
||||
|
||||
// Pas de PHP sur l'hôte : désactiver les tâches Symfony qui en ont besoin
|
||||
// Le cache et les migrations sont gérés par l'entrypoint.sh au démarrage du container
|
||||
task('deploy:cache:clear', function () {});
|
||||
task('deploy:cache:warmup', function () {});
|
||||
|
||||
// Hooks
|
||||
after('deploy:update_code', 'deploy:prepare_dirs');
|
||||
after('deploy:prepare_dirs', 'deploy:copy_dirs');
|
||||
after('deploy:vendors', 'webpack_encore:build');
|
||||
after('deploy:symlink', 'docker:restart');
|
||||
after('deploy:vendors', 'npm:install');
|
||||
after('npm:install', 'webpack_encore:build');
|
||||
after('deploy:vendors', 'database:migrate');
|
||||
after('deploy:symlink', 'messenger:consume');
|
||||
after('deploy:failed', 'deploy:unlock');
|
||||
|
||||
1963
package-lock.json
generated
1963
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -52,7 +52,6 @@
|
||||
"react-router-dom": "^7.1.5",
|
||||
"sortablejs": "^1.15.2",
|
||||
"tailwindcss": "^3.2.7",
|
||||
"vue-i18n": "^11.3.0",
|
||||
"vuedraggable": "^2.24.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Command;
|
||||
|
||||
use App\Domain\Shared\Domain\Contract\NotificationInterface;
|
||||
use Symfony\Component\Console\Attribute\AsCommand;
|
||||
use Symfony\Component\Console\Command\Command;
|
||||
use Symfony\Component\Console\Input\InputInterface;
|
||||
use Symfony\Component\Console\Input\InputOption;
|
||||
use Symfony\Component\Console\Output\OutputInterface;
|
||||
|
||||
#[AsCommand(
|
||||
name: 'app:notify:test',
|
||||
description: 'Envoie une notification de test via Mercure (utile en dev/prod pour vérifier le système)',
|
||||
)]
|
||||
class SendTestNotificationCommand extends Command
|
||||
{
|
||||
public function __construct(
|
||||
private readonly NotificationInterface $notification
|
||||
) {
|
||||
parent::__construct();
|
||||
}
|
||||
|
||||
protected function configure(): void
|
||||
{
|
||||
$this
|
||||
->addOption('type', 't', InputOption::VALUE_REQUIRED, 'Type de notification : info, success, error, warning', 'info')
|
||||
->addOption('message', 'm', InputOption::VALUE_REQUIRED, 'Message à envoyer', 'Notification de test depuis Mangarr');
|
||||
}
|
||||
|
||||
protected function execute(InputInterface $input, OutputInterface $output): int
|
||||
{
|
||||
$type = $input->getOption('type');
|
||||
$message = $input->getOption('message');
|
||||
|
||||
$allowed = ['info', 'success', 'error', 'warning'];
|
||||
if (!in_array($type, $allowed, true)) {
|
||||
$output->writeln(sprintf('<error>Type invalide "%s". Valeurs acceptées : %s</error>', $type, implode(', ', $allowed)));
|
||||
return Command::FAILURE;
|
||||
}
|
||||
|
||||
match ($type) {
|
||||
'success' => $this->notification->sendSuccess($message),
|
||||
'error' => $this->notification->sendError($message),
|
||||
'warning' => $this->notification->sendWarning($message),
|
||||
default => $this->notification->sendInfo($message),
|
||||
};
|
||||
|
||||
$output->writeln(sprintf('<info>[%s] Notification envoyée : %s</info>', strtoupper($type), $message));
|
||||
|
||||
return Command::SUCCESS;
|
||||
}
|
||||
}
|
||||
@@ -53,7 +53,7 @@ class MangaController extends AbstractController
|
||||
$this->imageManager = new ImageManager(new Driver());
|
||||
}
|
||||
|
||||
#[Route('/legacy', name: 'app_legacy')]
|
||||
#[Route('/', name: 'app_manga')]
|
||||
public function index(Request $request): Response
|
||||
{
|
||||
$sort = $request->query->get('sort', 'title');
|
||||
|
||||
@@ -15,7 +15,7 @@ class SecurityController extends AbstractController
|
||||
#[Route('/login', name: 'app_login', methods: ['GET', 'POST'])]
|
||||
public function login(IriConverterInterface $iriConverter, #[CurrentUser] User $user = null): Response
|
||||
{
|
||||
if (!$user) {
|
||||
if(!$user) {
|
||||
return $this->json([
|
||||
'error' => 'Invalid credentials'
|
||||
], 401);
|
||||
|
||||
@@ -8,6 +8,7 @@ use App\Form\ContentSourceType;
|
||||
use App\Manager\AppSettingsManager;
|
||||
use App\Manager\Toolbar\Factory\ToolbarFactory;
|
||||
use App\Repository\ContentSourceRepository;
|
||||
|
||||
use App\Service\NotificationService;
|
||||
use App\Service\Scraper\MangaScraperService;
|
||||
use Doctrine\ORM\EntityManagerInterface;
|
||||
|
||||
@@ -46,7 +46,7 @@ class TestController extends AbstractController
|
||||
$changed = 0;
|
||||
foreach ($mangas as $manga) {
|
||||
//si getImageUrl() retourne un lien sous la forme d'une URL (https ou http)
|
||||
if ($manga->getImageUrl()) {
|
||||
if($manga->getImageUrl()) {
|
||||
$imageUrls = $this->processAndSaveImage($manga->getImageUrl());
|
||||
$manga->setThumbnailUrl($imageUrls['thumbnail']);
|
||||
$this->mangaRepository->save($manga, true);
|
||||
|
||||
@@ -8,6 +8,5 @@ final readonly class ConvertFileCommand
|
||||
public string $filePath,
|
||||
public string $originalFilename,
|
||||
public int $fileSize
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -14,8 +14,7 @@ final readonly class ConvertFileCommandHandler
|
||||
|
||||
public function __construct(
|
||||
private ConversionServiceInterface $conversionService
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(ConvertFileCommand $command): ConversionResponse
|
||||
{
|
||||
|
||||
@@ -11,8 +11,7 @@ final readonly class ConversionResponse
|
||||
public string $outputFilename,
|
||||
public int $originalFileSize,
|
||||
public int $convertedFileSize
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public static function fromConversionResult(ConversionResult $result): self
|
||||
{
|
||||
|
||||
@@ -8,8 +8,7 @@ final readonly class ConversionRequest
|
||||
private string $filePath,
|
||||
private string $originalFilename,
|
||||
private int $fileSize
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function getFilePath(): string
|
||||
{
|
||||
|
||||
@@ -9,8 +9,7 @@ final readonly class ConversionResult
|
||||
private string $outputFilename,
|
||||
private int $originalFileSize,
|
||||
private int $convertedFileSize
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function getConvertedFilePath(): string
|
||||
{
|
||||
|
||||
@@ -17,8 +17,7 @@ final class ConvertFileController extends AbstractController
|
||||
{
|
||||
public function __construct(
|
||||
private readonly ConvertFileCommandHandler $commandHandler
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function __invoke(Request $request): Response
|
||||
{
|
||||
@@ -48,7 +47,6 @@ final class ConvertFileController extends AbstractController
|
||||
|
||||
// Retourner le fichier converti
|
||||
$fileContent = file_get_contents($response->convertedFilePath);
|
||||
@unlink($response->convertedFilePath);
|
||||
|
||||
return new Response(
|
||||
content: $fileContent,
|
||||
|
||||
@@ -8,6 +8,5 @@ readonly class ChapterEditData
|
||||
public string $id,
|
||||
public ?string $title = null,
|
||||
public ?int $volume = null
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,5 @@ readonly class CheckMonitoredMangas
|
||||
{
|
||||
public function __construct(
|
||||
public ?DateTimeImmutable $since = null
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -15,6 +15,5 @@ readonly class CreateManga
|
||||
public ?string $externalId,
|
||||
public ?string $imageUrl,
|
||||
public ?float $rating
|
||||
) {
|
||||
}
|
||||
}
|
||||
) {}
|
||||
}
|
||||
@@ -6,6 +6,5 @@ readonly class CreateMangaFromMangadex
|
||||
{
|
||||
public function __construct(
|
||||
public string $externalId
|
||||
) {
|
||||
}
|
||||
}
|
||||
) {}
|
||||
}
|
||||
@@ -8,6 +8,5 @@ readonly class DeleteCbz implements CommandInterface
|
||||
{
|
||||
public function __construct(
|
||||
public string $chapterId
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,5 @@ readonly class DeleteChapter implements CommandInterface
|
||||
{
|
||||
public function __construct(
|
||||
public string $chapterId
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,5 @@ readonly class DeleteManga implements CommandInterface
|
||||
{
|
||||
public function __construct(
|
||||
public string $mangaId
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,5 @@ readonly class EditManga
|
||||
public ?string $status = null,
|
||||
public ?float $rating = null,
|
||||
public ?array $alternativeSlugs = null
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,5 @@ readonly class EditMultipleChapters
|
||||
*/
|
||||
public function __construct(
|
||||
public array $chapters
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,5 @@ readonly class FetchMangaChapters
|
||||
{
|
||||
public function __construct(
|
||||
public MangaId $mangaId
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,5 @@ readonly class ImportChapter
|
||||
public string $mangaId,
|
||||
public float $chapterNumber,
|
||||
public string $fileBinary
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,9 @@ readonly class ImportVolume
|
||||
public string $mangaId,
|
||||
public int $volumeNumber,
|
||||
public string $fileBinary
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -8,6 +8,5 @@ readonly class RefreshMangaChapters
|
||||
{
|
||||
public function __construct(
|
||||
public MangaId $mangaId
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,5 @@ readonly class ToggleMangaMonitoring
|
||||
public function __construct(
|
||||
public MangaId $mangaId,
|
||||
public bool $enabled
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
}
|
||||
|
||||
@@ -14,8 +14,7 @@ readonly class CheckMonitoredMangasHandler
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository,
|
||||
private MessageBusInterface $commandBus
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(CheckMonitoredMangas $command): void
|
||||
{
|
||||
|
||||
@@ -20,8 +20,7 @@ readonly class CreateMangaFromMangadexHandler
|
||||
private MangaRepositoryInterface $mangaRepository,
|
||||
private ImageProcessorInterface $imageProcessor,
|
||||
private EventDispatcherInterface $eventDispatcher
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(CreateMangaFromMangadex $command): void
|
||||
{
|
||||
|
||||
@@ -21,8 +21,7 @@ readonly class CreateMangaHandler
|
||||
private MangaRepositoryInterface $mangaRepository,
|
||||
private ImageProcessorInterface $imageProcessor,
|
||||
private MessageBusInterface $messageBus
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(CreateManga $command): void
|
||||
{
|
||||
|
||||
@@ -15,8 +15,7 @@ readonly class DeleteCbzHandler implements CommandHandlerInterface
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository,
|
||||
private FileServiceInterface $fileService
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(CommandInterface $command): void
|
||||
{
|
||||
|
||||
@@ -12,8 +12,7 @@ readonly class DeleteChapterHandler implements CommandHandlerInterface
|
||||
{
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(CommandInterface $command): void
|
||||
{
|
||||
|
||||
@@ -12,8 +12,7 @@ readonly class DeleteMangaHandler implements CommandHandlerInterface
|
||||
{
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(CommandInterface $command): void
|
||||
{
|
||||
|
||||
@@ -11,8 +11,7 @@ readonly class EditMangaHandler
|
||||
{
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(EditManga $command): void
|
||||
{
|
||||
|
||||
@@ -10,8 +10,7 @@ readonly class EditMultipleChaptersHandler
|
||||
{
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(EditMultipleChapters $command): void
|
||||
{
|
||||
|
||||
@@ -13,8 +13,7 @@ readonly class FetchMangaChaptersHandler
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository,
|
||||
private ChapterSynchronizationServiceInterface $chapterSynchronizationService
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(FetchMangaChapters $command): void
|
||||
{
|
||||
@@ -24,7 +23,7 @@ readonly class FetchMangaChaptersHandler
|
||||
throw new MangaNotFoundException();
|
||||
}
|
||||
|
||||
if ($manga->getExternalId() === null) {
|
||||
if($manga->getExternalId() === null){
|
||||
throw new MangadexApiException("Manga has no external_id");
|
||||
}
|
||||
|
||||
|
||||
@@ -13,8 +13,7 @@ readonly class ImportChapterHandler
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository,
|
||||
private MangaPathManagerInterface $pathManager
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(ImportChapter $command): void
|
||||
{
|
||||
|
||||
@@ -12,8 +12,7 @@ readonly class ImportVolumeHandler
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository,
|
||||
private MangaPathManagerInterface $pathManager
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(ImportVolume $command): void
|
||||
{
|
||||
|
||||
@@ -16,8 +16,7 @@ readonly class RefreshMangaChaptersHandler
|
||||
private MangaRepositoryInterface $mangaRepository,
|
||||
private ChapterSynchronizationServiceInterface $chapterSynchronizationService,
|
||||
private MessageBusInterface $eventBus
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(RefreshMangaChapters $command): void
|
||||
{
|
||||
|
||||
@@ -10,8 +10,7 @@ readonly class ToggleMangaMonitoringHandler
|
||||
{
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function handle(ToggleMangaMonitoring $command): void
|
||||
{
|
||||
|
||||
@@ -12,8 +12,7 @@ readonly class ChapterImportedEventListener
|
||||
{
|
||||
public function __construct(
|
||||
private MangaRepositoryInterface $mangaRepository,
|
||||
) {
|
||||
}
|
||||
) {}
|
||||
|
||||
public function __invoke(ChapterImported $event): void
|
||||
{
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user