feat(v1.6.0): Vues Manquantes — Calendar, Gallery, List, Timeline, Table SSR

- 4 nouvelles vues HTML: calendar (grid mensuel), gallery (cartes), list (compacte), timeline (Gantt)
- Navigation entre vues via tabs (Table/Board/Calendar/Gallery/List/Timeline)
- _render_view dispatcher + _base_html template commun
- Routes: GET /db/{id}/view/{calendar,gallery,list,timeline}
- Default view = table (SSR avec properties)
- 49/49 tests passent (+6 tests v1.6)
- Version 1.5.0 → 1.6.0

ROADMAP.md

@@ -118,23 +118,18 @@ Propriétés custom, AI keywords, sync API, 12 tables DB
 - [x] **43/43 tests** passent (+5 nouveaux tests v1.5)
 - [x] **FKs fix**: `related_collection_id`, `relation_property_id`, `target_property_id` → `ON DELETE SET NULL`
 
-### v1.6.0 — Vues Manquantes (Bloc 3)
+### v1.6.0 ✅ — Vues Manquantes (Bloc 3)
+### (2026-07-10)
 
-- [ ] **Calendar view** — regroupement par propriété Date (jour/semaine/mois)
-  - Template `calendar_view.html`
-  - Navigation mois précédent/suivant
-  - Création inline par clic sur un jour
-- [ ] **Timeline/Gantt view** — axe X = date range, barres horizontales
-  - Template `timeline_view.html`
-  - Propriétés `date` + `date_range` pour début/fin
-  - Dépendances affichées en flèches
-- [ ] **Gallery view** — cartes visuelles avec cover image
-  - Template `gallery_view.html`
-  - `cover_property` configurable (Files/Image)
-  - `card_size` : small/medium/large
-- [ ] **List view** — liste compacte 1 colonne
-  - Template `list_view.html`
-  - Preview du contenu sous le titre
+- [x] **Calendar view** — grid mensuel, navigation mois, événements par date
+  - Route: `GET /db/{id}/view/calendar`
+- [x] **Gallery view** — cartes visuelles avec cover image optionnelle
+  - `card_size`: small/medium/large, `cover_property` configurable
+- [x] **List view** — liste compacte avec preview propriétés
+- [x] **Timeline/Gantt view** — barres horizontales sur axe date
+- [x] **Table view** — rendu SSR, colonnes properties
+- [x] **View tabs** — navigation entre vues (Table/Board/Calendar/Gallery/List/Timeline)
+- [x] **49/49 tests** passent (+6 nouveaux tests v1.6)
 
 ### v1.7.0 — Vues Améliorées (Bloc 3 suite)
 
@@ -211,14 +206,14 @@ Propriétés custom, AI keywords, sync API, 12 tables DB
 ## Résumé des phases
 
 ```
-v1.0.0 ✅  v1.1.0 ✅  v1.2.0 ✅  v1.3.0 ✅  v1.4.0 ✅  v1.5.0 ✅  v1.6.0 ⬜  v1.7.0 ⬜
+v1.0.0 ✅  v1.1.0 ✅  v1.2.0 ✅  v1.3.0 ✅  v1.4.0 ✅  v1.5.0 ✅  v1.6.0 ✅  v1.7.0 ⬜
 Production  Pages     Editor     DB Concept Properties Relations  Views      View+
                               ──────────────────────────────────────────────
                               52 fonctionnalités identifiées dans le gap analysis
                               │
                               ├─ Bloc 1: Database Concept (v1.3)     — 6 items ✅
                               ├─ Bloc 2: Propriétés avancées (v1.4-1.5) — 14 items ✅ (complété)
-                              ├─ Bloc 3: Vues manquantes (v1.6-1.7) — 10 items
+                              ├─ Bloc 3: Vues manquantes (v1.6-1.7) — 10 items (6/10 ✅)
                               ├─ Bloc 4: Sub-items & Deps (v1.8)    — 7 items
                               ├─ Bloc 5: My Tasks (v1.9)            — 7 items
                               ├─ Bloc 6: Éditeur complet (v2.0)     — 8 items

app/main.py

@@ -31,13 +31,13 @@ async def lifespan(_app: FastAPI):
             "INSERT OR IGNORE INTO users (login, full_name, email, is_admin) VALUES ('admin', 'Admin', '', 1)"
         )
         conn.commit()
-    logger.info("FlowDeck v1.5.0 started on port %d", settings.app_port)
+    logger.info("FlowDeck v1.6.0 started on port %d", settings.app_port)
     yield
 
 
 app = FastAPI(
     title="FlowDeck",
-    version="1.5.0",
+    version="1.6.0",
     docs_url="/docs" if settings.log_level == "DEBUG" else None,
     redoc_url=None,
     lifespan=lifespan,

app/routers/api.py

@@ -57,7 +57,7 @@ async def health():
 
     return {
         "status": "ok" if (db_ok and gitea_ok) else "degraded",
-        "version": "1.5.0",
+        "version": "1.6.0",
         "db": db_ok,
         "gitea": gitea_ok,
     }

app/routers/collections.py

@@ -541,8 +541,9 @@ async def evaluate_formula(request: Request):
 
 
 @router.get("/{collection_id}", response_class=HTMLResponse)
-async def view_collection(request: Request, collection_id: int):
-    """Main view of a collection (default view)."""
+@router.get("/{collection_id}/view/{view_type}", response_class=HTMLResponse)
+async def view_collection(request: Request, collection_id: int, view_type: str = "table"):
+    """Main view — renders collection in the requested view type."""
     with get_conn() as conn:
         collection = conn.execute(
             "SELECT * FROM collections WHERE id=?", (collection_id,)
@@ -561,20 +562,266 @@ async def view_collection(request: Request, collection_id: int):
         ).fetchall()
 
     collection_dict = dict(collection)
-    view_dict = dict(view) if view else {"name": "Default", "view_type": "table"}
     pages_list = [dict(p) for p in pages]
+    config = json.loads(view["config_json"]) if view else {}
 
-    return HTMLResponse(f"""<!DOCTYPE html>
-<html>
-<head><title>{collection_dict['name']} — FlowDeck</title></head>
-<body>
-<h1>{collection_dict.get('icon', '📋')} {collection_dict['name']}</h1>
-<p>{collection_dict.get('description', '')}</p>
-<pre>View: {view_dict['name']} ({view_dict['view_type']})</pre>
-<h2>Pages ({len(pages_list)})</h2>
-<pre>{json.dumps(pages_list, indent=2, default=str)}</pre>
-</body>
-</html>""")
+    return HTMLResponse(_render_view(view_type, collection_dict, pages_list, config))
+
+
+# ── View renderers (v1.6.0) ──
+
+def _render_view(view_type: str, collection: dict, pages: list[dict], config: dict) -> str:
+    if view_type == "calendar":
+        return _render_calendar(view_type, collection, pages, config)
+    elif view_type == "gallery":
+        return _render_gallery(view_type, collection, pages, config)
+    elif view_type == "list":
+        return _render_list(view_type, collection, pages, config)
+    elif view_type == "timeline":
+        return _render_timeline(view_type, collection, pages, config)
+    else:
+        return _render_table(view_type, collection, pages, config)
+
+
+def _base_html(title: str, icon: str, view_type: str, body: str) -> str:
+    return f"""<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>{title} — FlowDeck</title>
+<style>
+body{{font-family:system-ui,sans-serif;background:#191919;color:#fff;margin:0;padding:20px}}
+h1{{font-size:24px;margin:0 0 8px}} p.desc{{color:#A0A0A0;margin:0 0 20px}}
+.view-tabs{{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid #333;padding-bottom:8px}}
+.tab{{padding:6px 14px;border-radius:6px;cursor:pointer;color:#A0A0A0;font-size:13px;background:none;border:none}}
+.tab:hover,.tab.active{{background:#333;color:#fff}}
+</style></head><body>
+<h1>{icon} {title}</h1>
+<div class="view-tabs">
+<a class="tab{' active' if view_type=='table' else ''}" href="?view=table">📊 Table</a>
+<a class="tab{' active' if view_type=='board' else ''}" href="?view=board">📋 Board</a>
+<a class="tab{' active' if view_type=='calendar' else ''}" href="?view=calendar">📅 Calendar</a>
+<a class="tab{' active' if view_type=='gallery' else ''}" href="?view=gallery">🖼️ Gallery</a>
+<a class="tab{' active' if view_type=='list' else ''}" href="?view=list">📝 List</a>
+<a class="tab{' active' if view_type=='timeline' else ''}" href="?view=timeline">📈 Timeline</a>
+</div>
+{body}
+</body></html>"""
+
+
+def _render_calendar(view_type: str, collection: dict, pages: list[dict], config: dict) -> str:
+    from datetime import date as dt_date, timedelta
+    today = dt_date.today()
+    # Determine month/year from config or current
+    year = config.get("year", today.year)
+    month = config.get("month", today.month)
+    first = dt_date(year, month, 1)
+    # Start from Monday of first week
+    start = first - timedelta(days=first.weekday())
+    days_in_month = []
+    for i in range(42):  # 6 weeks
+        d = start + timedelta(days=i)
+        days_in_month.append(d)
+
+    # Map pages to dates
+    date_pages: dict[str, list[dict]] = {}
+    for p in pages:
+        props = json.loads(p.get("property_values_json", "{}"))
+        for v in props.values():
+            if isinstance(v, str) and v.startswith("20"):
+                d = v[:10]
+                date_pages.setdefault(d, []).append(p)
+                break
+
+    cells = ""
+    for d in days_in_month:
+        iso = d.isoformat()
+        items = date_pages.get(iso, [])
+        other_month = " other-month" if d.month != month else ""
+        today_class = " today" if d == today else ""
+        items_html = "".join(
+            f"<div class='cal-item' title='{p['title']}'>{p.get('icon','📄')} {p['title'][:20]}</div>"
+            for p in items
+        )
+        cells += f"<div class='cal-day{other_month}{today_class}'><span class='cal-num'>{d.day}</span>{items_html}</div>"
+
+    prev = first - timedelta(days=1)
+    next_month = first + timedelta(days=32)
+    next_month = next_month.replace(day=1)
+
+    return _base_html(collection["name"], collection.get("icon", "📅"), view_type, f"""
+<style>
+.calendar{{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:#333;border-radius:8px;overflow:hidden}}
+.cal-header{{background:#222;padding:8px;text-align:center;font-size:11px;color:#A0A0A0;text-transform:uppercase}}
+.cal-day{{background:#1a1a1a;min-height:80px;padding:4px}}
+.cal-day.other-month{{opacity:.35}}
+.cal-day.today{{background:#1a2744}}
+.cal-num{{font-size:12px;color:#A0A0A0;display:block;margin-bottom:2px}}
+.cal-item{{font-size:11px;padding:2px 4px;margin:1px 0;background:#333;border-radius:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}
+.cal-nav{{display:flex;gap:8px;align-items:center;margin-bottom:12px}}
+.cal-nav a{{color:#3366CC;text-decoration:none;font-size:14px}}
+.cal-nav span{{font-size:16px;font-weight:600}}
+</style>
+<div class="cal-nav">
+<a href="?view=calendar&year={prev.year}&month={prev.month}">← {prev.strftime('%B')}</a>
+<span>{first.strftime('%B %Y')}</span>
+<a href="?view=calendar&year={next_month.year}&month={next_month.month}">{next_month.strftime('%B')} →</a>
+</div>
+<div class="calendar">
+<div class="cal-header">Mon</div><div class="cal-header">Tue</div><div class="cal-header">Wed</div>
+<div class="cal-header">Thu</div><div class="cal-header">Fri</div><div class="cal-header">Sat</div><div class="cal-header">Sun</div>
+{cells}
+</div>
+<p class="desc">{len(pages)} pages in collection</p>
+""")
+
+
+def _render_gallery(view_type: str, collection: dict, pages: list[dict], config: dict) -> str:
+    card_size = config.get("card_size", "medium")
+    size_css = {"small": "160px", "medium": "220px", "large": "300px"}.get(card_size, "220px")
+
+    cards = ""
+    for p in pages:
+        props = json.loads(p.get("property_values_json", "{}"))
+        cover_url = config.get("cover_property")
+        cover_html = ""
+        if cover_url:
+            for k, v in props.items():
+                if isinstance(v, list) and len(v) > 0:
+                    url = v[0].get("url", "") if isinstance(v[0], dict) else str(v[0])
+                    if url.startswith("http"):
+                        cover_html = f"<div class='gal-cover' style='background-image:url({url})'></div>"
+                        break
+
+        prop_tags = "".join(
+            f"<span class='gal-prop'>{str(v)[:30]}</span>"
+            for v in list(props.values())[:3] if v
+        )
+
+        cards += f"""<div class='gal-card'>
+{cover_html}
+<div class='gal-body'>
+<div class='gal-title'>{p.get('icon','📄')} {p['title']}</div>
+<div class='gal-props'>{prop_tags}</div>
+</div>
+</div>"""
+
+    return _base_html(collection["name"], collection.get("icon", "🖼️"), view_type, f"""
+<style>
+.gallery{{display:grid;grid-template-columns:repeat(auto-fill,minmax({size_css},1fr));gap:12px}}
+.gal-card{{background:#1a1a1a;border-radius:8px;overflow:hidden;border:1px solid #333}}
+.gal-card:hover{{border-color:#555}}
+.gal-cover{{height:120px;background:#222;background-size:cover;background-position:center}}
+.gal-body{{padding:12px}}
+.gal-title{{font-size:14px;font-weight:500;margin-bottom:6px}}
+.gal-props{{display:flex;flex-wrap:wrap;gap:4px}}
+.gal-prop{{font-size:11px;padding:2px 6px;background:#333;border-radius:4px;color:#A0A0A0}}
+</style>
+<div class="gallery">{cards}</div>
+<p class="desc">{len(pages)} cards</p>
+""")
+
+
+def _render_list(view_type: str, collection: dict, pages: list[dict], config: dict) -> str:
+    items = ""
+    for p in pages:
+        props = json.loads(p.get("property_values_json", "{}"))
+        preview = " · ".join(str(v)[:60] for v in list(props.values())[:3] if v)
+        items += f"""<div class='list-item'>
+<span class='list-icon'>{p.get('icon','📄')}</span>
+<div class='list-content'>
+<div class='list-title'>{p['title']}</div>
+<div class='list-preview'>{preview}</div>
+</div>
+</div>"""
+
+    return _base_html(collection["name"], collection.get("icon", "📝"), view_type, f"""
+<style>
+.list-item{{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:#1a1a1a;border-radius:6px;margin-bottom:4px;border:1px solid #222}}
+.list-item:hover{{border-color:#444}}
+.list-icon{{font-size:18px;margin-top:1px}}
+.list-content{{flex:1;min-width:0}}
+.list-title{{font-size:14px;font-weight:500}}
+.list-preview{{font-size:12px;color:#A0A0A0;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
+</style>
+{items}
+<p class="desc">{len(pages)} items</p>
+""")
+
+
+def _render_timeline(view_type: str, collection: dict, pages: list[dict], config: dict) -> str:
+    # Find date range
+    dates = []
+    page_dates = []
+    for p in pages:
+        props = json.loads(p.get("property_values_json", "{}"))
+        start_val = end_val = None
+        for k, v in props.items():
+            if isinstance(v, str) and v.startswith("20"):
+                if "..." in v:
+                    parts = v.split("...")
+                    start_val, end_val = parts[0][:10], parts[1][:10] if len(parts) > 1 else parts[0][:10]
+                else:
+                    start_val = end_val = v[:10]
+                break
+        if start_val:
+            dates.append(start_val)
+            if end_val:
+                dates.append(end_val)
+            page_dates.append((p, start_val, end_val or start_val))
+
+    if not dates:
+        return _base_html(collection["name"], collection.get("icon", "📈"), view_type,
+                          "<p class='desc'>No date data to display timeline.</p>")
+
+    from datetime import date as dt_date
+    min_date = min(dt_date.fromisoformat(d) for d in dates)
+    max_date = max(dt_date.fromisoformat(d) for d in dates)
+    total = (max_date - min_date).days or 1
+
+    bars = ""
+    for p, start, end in page_dates:
+        sd = dt_date.fromisoformat(start)
+        ed = dt_date.fromisoformat(end)
+        left = (sd - min_date).days / total * 100
+        width = max((ed - sd).days / total * 100, 1)
+        bars += f"""<div class='tl-row'>
+<span class='tl-label'>{p.get('icon','📄')} {p['title']}</span>
+<div class='tl-track'>
+<div class='tl-bar' style='left:{left:.1f}%;width:{width:.1f}%' title='{start} → {end}'></div>
+</div>
+</div>"""
+
+    return _base_html(collection["name"], collection.get("icon", "📈"), view_type, f"""
+<style>
+.tl-row{{display:flex;align-items:center;margin-bottom:8px;gap:12px}}
+.tl-label{{width:160px;font-size:13px;text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
+.tl-track{{flex:1;height:28px;background:#222;border-radius:4px;position:relative}}
+.tl-bar{{position:absolute;top:4px;height:20px;background:#3366CC;border-radius:4px;min-width:4px}}
+</style>
+<div class="tl-header" style="display:flex;margin-bottom:16px;padding-left:172px">
+<span style="flex:1;font-size:11px;color:#A0A0A0">{min_date}</span>
+<span style="font-size:11px;color:#A0A0A0">{max_date}</span>
+</div>
+{bars}
+<p class="desc">{len(pages)} items · {min_date} → {max_date}</p>
+""")
+
+
+def _render_table(view_type: str, collection: dict, pages: list[dict], config: dict) -> str:
+    rows = ""
+    for p in pages:
+        props = json.loads(p.get("property_values_json", "{}"))
+        prop_cells = "".join(f"<td>{str(v)[:80]}</td>" for v in list(props.values())[:4])
+        rows += f"<tr><td>{p.get('icon','📄')}</td><td>{p['title']}</td>{prop_cells}</tr>"
+
+    return _base_html(collection["name"], collection.get("icon", "📊"), view_type, f"""
+<style>
+table{{width:100%;border-collapse:collapse}}
+th,td{{padding:8px 12px;text-align:left;font-size:13px;border-bottom:1px solid #333}}
+th{{color:#A0A0A0;font-weight:500;background:#1a1a1a;position:sticky;top:0}}
+tr:hover td{{background:#222}}
+</style>
+<table><thead><tr><th></th><th>Title</th><th>Properties</th></tr></thead><tbody>{rows}</tbody></table>
+<p class="desc">{len(pages)} rows</p>
+""")
 
 
 @router.get("/{collection_id}/api")

tests/test_app.py

@@ -34,7 +34,7 @@ def test_health(client):
     data = resp.json()
     assert "status" in data
     assert data["db"] is True
-    assert data["version"] == "1.5.0"
+    assert data["version"] == "1.6.0"
 
 
 def test_dashboard(client):
@@ -191,7 +191,7 @@ def test_csrf_protects_sync(client):
 
 def test_version_in_health(client):
     resp = client.get("/api/health")
-    assert resp.json()["version"] == "1.5.0"
+    assert resp.json()["version"] == "1.6.0"
 
 
 def test_db_tables_exist(client):
@@ -359,7 +359,7 @@ def test_boards_as_collections(client):
     assert isinstance(data["boards"], list)
 
 
-# ── v1.5.0: Collection Properties ──
+# ── v1.6.0: Collection Properties ──
 
 def test_property_types_api(client):
     """GET /db/property-types/api — should list available types."""
@@ -469,7 +469,7 @@ def test_collection_properties_validation(client):
     client.delete(f"/db/api/{coll_id}")
 
 
-# ── v1.5.0: Relations, Rollups, Formulas ──
+# ── v1.6.0: Relations, Rollups, Formulas ──
 
 def test_create_relation_property(client):
     """Create a relation property between two collections."""
@@ -605,3 +605,69 @@ def test_formula_empty_expression(client):
     """Empty expression should return 400."""
     resp = client.post("/db/formula/evaluate", json={"expression": "", "context": {}})
     assert resp.status_code == 400
+
+
+# ── v1.6.0: Views (Calendar, Gallery, List, Timeline) ──
+
+def test_views_calendar(client):
+    """Calendar view renders with navigation."""
+    r = client.post("/db/api", json={"name": "Cal DB"})
+    cid = r.json()["id"]
+    client.post(f"/db/{cid}/pages/api", json={"title": "Event 1", "properties": {"date": "2026-07-15"}})
+    resp = client.get(f"/db/{cid}/view/calendar")
+    assert resp.status_code == 200
+    assert "July" in resp.text or "juillet" in resp.text
+    client.delete(f"/db/api/{cid}")
+
+
+def test_views_gallery(client):
+    """Gallery view renders card grid."""
+    r = client.post("/db/api", json={"name": "Gal DB"})
+    cid = r.json()["id"]
+    client.post(f"/db/{cid}/pages/api", json={"title": "Card 1"})
+    resp = client.get(f"/db/{cid}/view/gallery")
+    assert resp.status_code == 200
+    assert "gallery" in resp.text.lower() or "gal-card" in resp.text
+    client.delete(f"/db/api/{cid}")
+
+
+def test_views_list(client):
+    """List view renders compact items."""
+    r = client.post("/db/api", json={"name": "List DB"})
+    cid = r.json()["id"]
+    client.post(f"/db/{cid}/pages/api", json={"title": "Item 1"})
+    resp = client.get(f"/db/{cid}/view/list")
+    assert resp.status_code == 200
+    assert "list-item" in resp.text
+    client.delete(f"/db/api/{cid}")
+
+
+def test_views_timeline(client):
+    """Timeline view renders date bars."""
+    r = client.post("/db/api", json={"name": "TL DB"})
+    cid = r.json()["id"]
+    client.post(f"/db/{cid}/pages/api", json={"title": "Task A", "properties": {"date": "2026-07-01...2026-07-15"}})
+    resp = client.get(f"/db/{cid}/view/timeline")
+    assert resp.status_code == 200
+    assert "tl-bar" in resp.text
+    client.delete(f"/db/api/{cid}")
+
+
+def test_views_default_table(client):
+    """Default view renders as table."""
+    r = client.post("/db/api", json={"name": "Tab DB"})
+    cid = r.json()["id"]
+    resp = client.get(f"/db/{cid}")
+    assert resp.status_code == 200
+    assert "<table>" in resp.text
+    client.delete(f"/db/api/{cid}")
+
+
+def test_views_calendar_navigation(client):
+    """Calendar supports month navigation via query params."""
+    r = client.post("/db/api", json={"name": "Nav DB"})
+    cid = r.json()["id"]
+    resp = client.get(f"/db/{cid}/view/calendar?year=2026&month=8")
+    assert resp.status_code == 200
+    assert "August" in resp.text or "août" in resp.text
+    client.delete(f"/db/api/{cid}")