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
This commit is contained in:
2026-07-09 23:03:51 -04:00
parent b8647f1a19
commit 2a4a904b9e
5 changed files with 347 additions and 39 deletions
+13 -18
View File
@@ -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
+2 -2
View File
@@ -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,
+1 -1
View File
@@ -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,
}
+261 -14
View File
@@ -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")
+70 -4
View File
@@ -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}")