EHV/decision
7
0
Fork 0
forked from yvv/decision
Code Pull Requests Activity

Menu : Boîte à outils en premier + sidebar collapsible icônes

Browse Source 
- Boîte à outils (/tools) en 1ère position dans la nav (desktop + mobile)
- Sidebar desktop repliable (toggle pictos-only, 14rem → 3.75rem)
  - labels masqués par transition CSS fluide (max-width + opacity)
  - état persisté en localStorage (libred-sidebar-collapsed)
- Page document : toggle Vue structurée / Aperçu document
  - sous-toggle En vigueur / Selon les votes
  - composant DocumentPreview (rendu PDF-like)
    - filigrane discret, items ordonnés par sort_order
    - mode projection : proposed_text substitu + encadrement orange
    - footer horodaté, print-friendly

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-03-17 04:21:21 +01:00
parent 73c5bf148c
commit feaf4de7e0
4 changed files with 671 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
frontend/app/components/documents/DocumentPreview.vue Normal file
View File

@@ -0,0 +1,347 @@
<script setup lang="ts">
/**
* DocumentPreview — clean "PDF-like" viewer for a reference document.
*
* Two modes:
* - current: shows current_text for every item (document en vigueur)
* - projected: applies latest "vote" or "proposed" version per item,
* highlighting changed clauses (document tel qu'il serait si les
* votes en cours passaient)
*/
import type { Document, DocumentItem, ItemVersion } from '~/stores/documents'
const props = defineProps<{
document: Document
items: DocumentItem[]
mode: 'current' | 'projected'
versionMap: Record<string, ItemVersion | null>
}>()
const sortedItems = computed(() =>
[...props.items].sort((a, b) => a.sort_order - b.sort_order),
)
const changedCount = computed(() =>
props.mode === 'projected'
? Object.values(props.versionMap).filter(Boolean).length
: 0,
)
function getDisplayText(item: DocumentItem): string {
if (props.mode === 'projected' && props.versionMap[item.id]) {
return props.versionMap[item.id]!.proposed_text
}
return item.current_text
}
function isChanged(item: DocumentItem): boolean {
return props.mode === 'projected' && !!props.versionMap[item.id]
}
function itemTypeLabel(type: string): string {
switch (type) {
case 'clause': return 'Engagement'
case 'rule': return 'Variable'
case 'verification': return 'Application'
case 'preamble': return 'Préambule'
default: return ''
}
}
const today = new Date().toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'long',
year: 'numeric',
})
</script>
<template>
<div class="doc-preview">
<!-- ══ Document header ══ -->
<div class="doc-preview__header">
<div class="doc-preview__watermark" aria-hidden="true">
{{ mode === 'projected' ? 'PROJECTION' : 'EN VIGUEUR' }}
</div>
<h1 class="doc-preview__title">{{ document.title }}</h1>
<div class="doc-preview__meta">
<span>Version {{ document.version }}</span>
<span class="doc-preview__sep">·</span>
<span>{{ document.items_count }} items</span>
<span v-if="mode === 'projected'" class="doc-preview__proj-badge">
<UIcon name="i-lucide-flask-conical" class="text-xs" />
{{ changedCount }} modification{{ changedCount > 1 ? 's' : '' }} projetée{{ changedCount > 1 ? 's' : '' }}
</span>
<span v-else class="doc-preview__current-badge">
<UIcon name="i-lucide-circle-check" class="text-xs" />
Texte officiel
</span>
</div>
</div>
<!-- ══ Items ══ -->
<div class="doc-preview__body">
<template v-for="item in sortedItems" :key="item.id">
<!-- Section heading -->
<div v-if="item.item_type === 'section'" class="doc-preview__section">
<h2 class="doc-preview__section-title">
<UIcon name="i-lucide-bookmark" class="text-sm" style="color: var(--mood-accent)" />
{{ item.title || item.current_text }}
</h2>
</div>
<!-- Preamble -->
<div v-else-if="item.item_type === 'preamble'" class="doc-preview__preamble">
<MarkdownRenderer :content="getDisplayText(item)" />
</div>
<!-- Regular clause / rule / verification -->
<div
v-else
class="doc-preview__item"
:class="{ 'doc-preview__item--changed': isChanged(item) }"
>
<div class="doc-preview__item-head">
<span class="doc-preview__item-pos">{{ item.position }}</span>
<span v-if="item.title" class="doc-preview__item-title">{{ item.title }}</span>
<span v-if="itemTypeLabel(item.item_type)" class="doc-preview__item-type">
{{ itemTypeLabel(item.item_type) }}
</span>
<span v-if="isChanged(item)" class="doc-preview__change-chip">
<UIcon name="i-lucide-git-branch" class="text-xs" />
Vote en cours
</span>
</div>
<div class="doc-preview__item-text">
<MarkdownRenderer :content="getDisplayText(item)" />
</div>
</div>
</template>
</div>
<!-- ══ Footer ══ -->
<div class="doc-preview__footer">
<div class="doc-preview__footer-main">
<span>ğ(Decision) · {{ document.title }} · v{{ document.version }}</span>
</div>
<div v-if="mode === 'projected'" class="doc-preview__footer-note">
Projection non officielle — texte simulé selon {{ changedCount }} vote{{ changedCount > 1 ? 's' : '' }} en cours au {{ today }}
</div>
</div>
</div>
</template>
<style scoped>
.doc-preview {
position: relative;
background: var(--mood-surface);
border-radius: 16px;
padding: clamp(1.5rem, 4vw, 3rem);
box-shadow: 0 4px 32px var(--mood-shadow);
line-height: 1.75;
overflow: hidden;
}
/* ── Watermark ── */
.doc-preview__watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
font-size: clamp(2rem, 8vw, 5rem);
font-weight: 900;
letter-spacing: 0.15em;
color: var(--mood-accent);
opacity: 0.03;
pointer-events: none;
user-select: none;
white-space: nowrap;
}
/* ── Header ── */
.doc-preview__header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid color-mix(in srgb, var(--mood-accent) 20%, transparent);
}
.doc-preview__title {
font-size: clamp(1.25rem, 3vw, 1.875rem);
font-weight: 900;
color: var(--mood-text);
letter-spacing: -0.03em;
margin-bottom: 0.625rem;
}
.doc-preview__meta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--mood-text-muted);
flex-wrap: wrap;
}
.doc-preview__sep { opacity: 0.3; }
.doc-preview__proj-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 2px 0.625rem;
background: color-mix(in srgb, var(--mood-warning, #f59e0b) 15%, transparent);
color: var(--mood-warning, #d97706);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
}
.doc-preview__current-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 2px 0.625rem;
background: color-mix(in srgb, var(--mood-success, #16a34a) 12%, transparent);
color: var(--mood-success, #16a34a);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
}
/* ── Body ── */
.doc-preview__body {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
/* Section heading */
.doc-preview__section {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.doc-preview__section-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 800;
color: var(--mood-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 1px solid color-mix(in srgb, var(--mood-accent) 15%, transparent);
padding-bottom: 0.375rem;
}
/* Preamble */
.doc-preview__preamble {
padding: 1rem 1.25rem;
background: color-mix(in srgb, var(--mood-accent) 5%, transparent);
border-radius: 12px;
font-style: italic;
font-size: 0.9375rem;
color: var(--mood-text-muted);
}
/* Item */
.doc-preview__item {
padding: 0.875rem 1rem;
border-radius: 12px;
background: color-mix(in srgb, var(--mood-bg) 35%, transparent);
transition: background 0.15s;
}
.doc-preview__item--changed {
background: color-mix(in srgb, var(--mood-warning, #f59e0b) 8%, var(--mood-surface));
border-left: 3px solid var(--mood-warning, #f59e0b);
}
.doc-preview__item-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.375rem;
flex-wrap: wrap;
}
.doc-preview__item-pos {
font-size: 0.6875rem;
font-weight: 800;
font-family: monospace;
color: var(--mood-accent);
background: color-mix(in srgb, var(--mood-accent) 12%, transparent);
padding: 1px 6px;
border-radius: 6px;
min-width: 2rem;
text-align: center;
}
.doc-preview__item-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--mood-text);
}
.doc-preview__item-type {
font-size: 0.6875rem;
font-weight: 600;
color: var(--mood-text-muted);
opacity: 0.65;
}
.doc-preview__change-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 1px 0.5rem;
background: color-mix(in srgb, var(--mood-warning, #f59e0b) 18%, transparent);
color: var(--mood-warning, #d97706);
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 700;
margin-left: auto;
}
.doc-preview__item-text {
font-size: 0.9rem;
color: var(--mood-text);
}
/* ── Footer ── */
.doc-preview__footer {
margin-top: 3rem;
padding-top: 1rem;
border-top: 1px solid color-mix(in srgb, var(--mood-accent) 12%, transparent);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
text-align: center;
}
.doc-preview__footer-main {
font-size: 0.75rem;
color: var(--mood-text-muted);
font-weight: 600;
}
.doc-preview__footer-note {
font-size: 0.6875rem;
color: var(--mood-text-muted);
font-style: italic;
opacity: 0.7;
}
/* ── Print ── */
@media print {
.doc-preview {
box-shadow: none;
padding: 2rem;
background: white;
color: black;
}
.doc-preview__watermark { opacity: 0.05; }
}
</style>