v2 : les 14 écrans — le tour complet de la démocratie d'exercice
- Aujourd'hui (Fil 13 sections + capture sticky) + Le chemin (tunnel 2 gestes, Q0 inline, 3 chips, dérogation asymétrique, alternatives réglage/consignation) - Registre + fiche décision (timeline, périmètre premier/second lieu auditable, affluence non-ignorable, S'instruire condensé, éléments + cartographie de clôture, épreuve du réel, Remettre en question, PV A4, gravure) - Salle de vote 5 modalités (consentement, nuancé+histogramme, binaire hérité avec jauge inertielle, Réglage collectif complet — faisceau, médiane basse, Pour moi, Explorer, cristallisation-geste —, élection à départage humain) - Textes (Pacte en clair, document vivant, diff, vue projetée, Atelier des formules porté du v1 sur le moteur unique) + Mandats (faits comptés, feux de la rampe, wizard 3 étapes) + Observatoire (consigner→observer→protocoliser) - Onboarding 7 gabarits + Données locales (export/import, attributs, atelier) - voting→framing gardé (Reformuler d'un réglage figé non cristallisé) - Pages v1 supprimées (login, documents, mandates, protocols, sanctuary, tools, decisions/new) — 342 tests verts, build zéro erreur Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Yvv
@@ -0,0 +1,221 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* /donnees §2 — importer un collectif : fichier ou glisser-déposer.
|
||||
* Issues en français (bloquantes / avertissements), lignée « essaimé de … ».
|
||||
*/
|
||||
import { useCollectiveStore } from '~/stores/collective'
|
||||
import type { ImportIssue } from '~/data/persistence'
|
||||
import { LINEAGE_PREFIX } from '~/lexicon'
|
||||
|
||||
const store = useCollectiveStore()
|
||||
|
||||
const dragging = ref(false)
|
||||
const busy = ref(false)
|
||||
const issues = ref<ImportIssue[]>([])
|
||||
const importedName = ref<string | null>(null)
|
||||
const importedLineage = ref<string | null>(null)
|
||||
|
||||
const errors = computed(() => issues.value.filter(i => i.level === 'error'))
|
||||
const warnings = computed(() => issues.value.filter(i => i.level === 'warning'))
|
||||
|
||||
async function importFile(file: File | null | undefined) {
|
||||
if (!file || busy.value) return
|
||||
busy.value = true
|
||||
importedName.value = null
|
||||
importedLineage.value = null
|
||||
const text = await file.text()
|
||||
const result = await store.importJson(text)
|
||||
issues.value = result.issues
|
||||
if (result.state && !result.collided) {
|
||||
importedName.value = result.state.collective.name
|
||||
importedLineage.value = result.state.collective.lineage?.sourceSlug ?? null
|
||||
}
|
||||
busy.value = false
|
||||
}
|
||||
|
||||
function onDrop(ev: DragEvent) {
|
||||
dragging.value = false
|
||||
importFile(ev.dataTransfer?.files?.[0])
|
||||
}
|
||||
|
||||
function onPick(ev: Event) {
|
||||
const input = ev.target as HTMLInputElement
|
||||
importFile(input.files?.[0])
|
||||
input.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ld-v2 -->
|
||||
<section class="ld-card data-card">
|
||||
<h2 class="data-card__title">
|
||||
<UIcon name="i-lucide-file-down" /> Importer un collectif
|
||||
</h2>
|
||||
|
||||
<label
|
||||
class="dropzone"
|
||||
:class="{ 'dropzone--over': dragging, 'dropzone--busy': busy }"
|
||||
@dragover.prevent="dragging = true"
|
||||
@dragleave="dragging = false"
|
||||
@drop.prevent="onDrop"
|
||||
>
|
||||
<UIcon name="i-lucide-upload" class="dropzone__icon" />
|
||||
<span class="dropzone__text">
|
||||
Dépose un fichier .json ici, ou <span class="dropzone__link">choisis-le</span>
|
||||
</span>
|
||||
<span class="dropzone__sub">Un export libreDecision, d'ici ou d'ailleurs.</span>
|
||||
<input
|
||||
type="file"
|
||||
accept=".json,application/json"
|
||||
class="dropzone__input"
|
||||
:disabled="busy"
|
||||
@change="onPick"
|
||||
>
|
||||
</label>
|
||||
|
||||
<ul v-if="errors.length" class="issues issues--error">
|
||||
<li v-for="issue in errors" :key="issue.message">
|
||||
<UIcon name="i-lucide-circle-alert" /> {{ issue.message }}
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="warnings.length" class="issues issues--warning">
|
||||
<li v-for="issue in warnings" :key="issue.message">
|
||||
<UIcon name="i-lucide-triangle-alert" /> {{ issue.message }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div v-if="importedName" class="imported">
|
||||
<p class="imported__line">
|
||||
<UIcon name="i-lucide-circle-check" /> « {{ importedName }} » est arrivé sur cette machine — c'est maintenant le collectif actif.
|
||||
</p>
|
||||
<p v-if="importedLineage" class="imported__lineage">
|
||||
<UIcon name="i-lucide-sprout" /> {{ LINEAGE_PREFIX }} {{ importedLineage }}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.data-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: clamp(1rem, 3vw, 1.5rem);
|
||||
}
|
||||
|
||||
.data-card__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 800;
|
||||
color: var(--mood-text);
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: clamp(1.25rem, 4vw, 2rem);
|
||||
border-radius: var(--r-input);
|
||||
background: var(--mood-bg);
|
||||
box-shadow: inset 0 0 0 1.5px var(--mood-input-border);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: box-shadow 0.12s ease, background 0.12s ease;
|
||||
}
|
||||
.dropzone--over {
|
||||
background: var(--mood-accent-soft);
|
||||
box-shadow: inset 0 0 0 2px var(--mood-accent);
|
||||
}
|
||||
.dropzone--busy {
|
||||
opacity: 0.6;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.dropzone__icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--mood-accent);
|
||||
}
|
||||
|
||||
.dropzone__text {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--mood-text);
|
||||
}
|
||||
|
||||
.dropzone__link {
|
||||
color: var(--mood-accent);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.dropzone__sub {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--mood-text-muted);
|
||||
}
|
||||
|
||||
.dropzone__input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.issues {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
margin: 0;
|
||||
padding: 0.75rem 1rem;
|
||||
list-style: none;
|
||||
border-radius: var(--r-input);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.issues li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
.issues--error {
|
||||
background: color-mix(in srgb, var(--mood-error) 10%, transparent);
|
||||
color: var(--mood-error);
|
||||
}
|
||||
.issues--warning {
|
||||
background: var(--mood-status-fenetre-bg);
|
||||
color: var(--mood-status-fenetre);
|
||||
}
|
||||
|
||||
.imported {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--r-input);
|
||||
background: var(--mood-status-vigueur-bg);
|
||||
}
|
||||
|
||||
.imported__line {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.45rem;
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--mood-status-vigueur);
|
||||
}
|
||||
|
||||
.imported__lineage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
margin: 0;
|
||||
font-size: 0.8125rem;
|
||||
font-style: italic;
|
||||
color: var(--mood-tertiary);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user