feat(series): manage-view redesign — big pages, editable Part #, slide-over picker (FC-6.4)
Operator feedback: thumbnails too small to judge order, no obvious way to mark
'this installment is Part 2', and the permanent two-pane picker was busy and
competed with the ordering work.
- Full-width parts, each a card with a big page grid (150px, contain so whole
pages are visible) and drag-to-reorder; positional page number as a badge.
- Editable Part # (hero field) backed by new series_chapter.stated_part —
separate from the auto-managed chapter_number, mirroring the page_number vs
stated_page split so reorder/delete renumbering can't wipe a hand-set part.
Missing-Part hints when consecutive parts' stated_part jump >1.
- Each part labels its source post (derived from pages' primary_post_id) and
shows the printed-page range with clear labels.
- Picker demoted to an on-demand right slide-over ('Add pages') with a target-
part selector; part actions (move/merge/delete) collapsed into an overflow ⋮.
alembic 0042 adds series_chapter.stated_part (nullable int).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
"""series chapter stated_part: operator-facing Part N label (FC-6.4)
|
||||
|
||||
Revision ID: 0042
|
||||
Revises: 0041
|
||||
Create Date: 2026-06-07
|
||||
|
||||
A chapter's positional chapter_number is auto-managed (rewritten 1..N on
|
||||
reorder/delete), so it can't double as the installment number the operator wants
|
||||
to type (e.g. a series authored from a post that is Part 2). Add a nullable
|
||||
stated_part alongside it — the same split as series_page.page_number (order) vs
|
||||
series_page.stated_page (printed number). Nullable; the UI falls back to
|
||||
chapter_number when unset.
|
||||
"""
|
||||
from typing import Sequence, Union
|
||||
|
||||
import sqlalchemy as sa
|
||||
from alembic import op
|
||||
|
||||
revision: str = "0042"
|
||||
down_revision: Union[str, None] = "0041"
|
||||
branch_labels: Union[str, Sequence[str], None] = None
|
||||
depends_on: Union[str, Sequence[str], None] = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.add_column(
|
||||
"series_chapter", sa.Column("stated_part", sa.Integer, nullable=True)
|
||||
)
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.drop_column("series_chapter", "stated_part")
|
||||
@@ -528,6 +528,11 @@ async def series_chapter_update(tag_id: int, chapter_id: int):
|
||||
if body["title"] is not None and not isinstance(body["title"], str):
|
||||
return jsonify({"error": "title must be a string"}), 400
|
||||
kwargs.update(set_title=True, title=body["title"])
|
||||
if "stated_part" in body:
|
||||
part, perr = _opt_int(body, "stated_part")
|
||||
if perr:
|
||||
return perr
|
||||
kwargs.update(set_part=True, stated_part=part)
|
||||
if "stated_page_start" in body:
|
||||
start, serr = _opt_int(body, "stated_page_start")
|
||||
if serr:
|
||||
|
||||
@@ -12,6 +12,12 @@ A chapter may be a placeholder (is_placeholder=True) — a reserved empty slot f
|
||||
a section the operator doesn't have yet; it holds no pages and shows as a gap in
|
||||
the reader. stated_page_start/end carry the page range parsed from the source
|
||||
post (FC-6.2), used to flag missing-page gaps; both are nullable when unknown.
|
||||
|
||||
stated_part is the operator-facing "Part N" label (FC-6.4), separate from the
|
||||
positional chapter_number: chapter_number is auto-managed ordering (rewritten
|
||||
1..N on reorder/delete), while stated_part is the real installment number the
|
||||
operator types — e.g. a series authored from a post that is Part 2 of a story.
|
||||
Nullable when unset (the UI then falls back to showing chapter_number).
|
||||
"""
|
||||
|
||||
from datetime import datetime
|
||||
@@ -30,6 +36,7 @@ class SeriesChapter(Base):
|
||||
ForeignKey("tag.id", ondelete="CASCADE"), nullable=False, index=True
|
||||
)
|
||||
chapter_number: Mapped[int] = mapped_column(Integer, nullable=False)
|
||||
stated_part: Mapped[int | None] = mapped_column(Integer, nullable=True)
|
||||
title: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
is_placeholder: Mapped[bool] = mapped_column(
|
||||
Boolean, nullable=False, server_default="false"
|
||||
|
||||
@@ -131,6 +131,29 @@ class SeriesService:
|
||||
prev = ch
|
||||
return out
|
||||
|
||||
@staticmethod
|
||||
def _part_gaps(chapters: list[dict]) -> list[dict]:
|
||||
"""Missing-Part gaps between consecutive chapters whose stated_part
|
||||
numbers jump by more than 1 (e.g. a series with Part 1 and Part 3, or one
|
||||
authored straight from a Part 2 post). Mirrors _gaps but on stated_part —
|
||||
only chapters that actually carry a stated_part participate."""
|
||||
out: list[dict] = []
|
||||
prev = None
|
||||
for ch in chapters:
|
||||
cur = ch["stated_part"]
|
||||
if cur is None:
|
||||
continue
|
||||
if prev is not None and cur > prev["stated_part"] + 1:
|
||||
out.append(
|
||||
{
|
||||
"after_chapter_id": prev["id"],
|
||||
"start": prev["stated_part"] + 1,
|
||||
"end": cur - 1,
|
||||
}
|
||||
)
|
||||
prev = ch
|
||||
return out
|
||||
|
||||
async def list_pages(self, series_tag_id: int) -> dict:
|
||||
tag = await self._require_series(series_tag_id)
|
||||
rows = (
|
||||
@@ -138,6 +161,7 @@ class SeriesService:
|
||||
select(
|
||||
SeriesChapter.id.label("chapter_id"),
|
||||
SeriesChapter.chapter_number,
|
||||
SeriesChapter.stated_part,
|
||||
SeriesChapter.title,
|
||||
SeriesChapter.is_placeholder,
|
||||
SeriesChapter.stated_page_start,
|
||||
@@ -149,10 +173,13 @@ class SeriesService:
|
||||
ImageRecord.mime,
|
||||
ImageRecord.path,
|
||||
ImageRecord.thumbnail_path,
|
||||
ImageRecord.primary_post_id,
|
||||
Post.post_title,
|
||||
)
|
||||
.select_from(SeriesChapter)
|
||||
.outerjoin(SeriesPage, SeriesPage.chapter_id == SeriesChapter.id)
|
||||
.outerjoin(ImageRecord, ImageRecord.id == SeriesPage.image_id)
|
||||
.outerjoin(Post, Post.id == ImageRecord.primary_post_id)
|
||||
.where(SeriesChapter.series_tag_id == series_tag_id)
|
||||
.order_by(
|
||||
SeriesChapter.chapter_number.asc(),
|
||||
@@ -164,22 +191,30 @@ class SeriesService:
|
||||
chapters: list[dict] = []
|
||||
flat: list[dict] = []
|
||||
by_id: dict[int, dict] = {}
|
||||
# chapter_id -> {post_id: title} seen across its pages, so we can label a
|
||||
# chapter with its source post when all its pages come from one post.
|
||||
posts_seen: dict[int, dict[int, str | None]] = {}
|
||||
for r in rows:
|
||||
ch = by_id.get(r.chapter_id)
|
||||
if ch is None:
|
||||
ch = {
|
||||
"id": r.chapter_id,
|
||||
"chapter_number": r.chapter_number,
|
||||
"stated_part": r.stated_part,
|
||||
"title": r.title,
|
||||
"is_placeholder": r.is_placeholder,
|
||||
"stated_page_start": r.stated_page_start,
|
||||
"stated_page_end": r.stated_page_end,
|
||||
"source_post": None,
|
||||
"pages": [],
|
||||
}
|
||||
by_id[r.chapter_id] = ch
|
||||
posts_seen[r.chapter_id] = {}
|
||||
chapters.append(ch)
|
||||
if r.image_id is None:
|
||||
continue # placeholder / empty chapter
|
||||
if r.primary_post_id is not None:
|
||||
posts_seen[r.chapter_id][r.primary_post_id] = r.post_title
|
||||
page = {
|
||||
"image_id": r.image_id,
|
||||
"chapter_id": r.chapter_id,
|
||||
@@ -191,11 +226,21 @@ class SeriesService:
|
||||
ch["pages"].append(page)
|
||||
flat.append(page)
|
||||
|
||||
# A chapter's source_post is set only when every page shares one post —
|
||||
# the common case (a series authored from a post). Mixed chapters stay
|
||||
# null rather than guessing.
|
||||
for ch in chapters:
|
||||
seen = posts_seen.get(ch["id"], {})
|
||||
if len(seen) == 1:
|
||||
pid, title = next(iter(seen.items()))
|
||||
ch["source_post"] = {"id": pid, "title": title}
|
||||
|
||||
return {
|
||||
"series": {"id": tag.id, "name": tag.name},
|
||||
"chapters": chapters,
|
||||
"pages": flat, # back-compat: flat reading order across chapters
|
||||
"gaps": self._gaps(chapters),
|
||||
"part_gaps": self._part_gaps(chapters),
|
||||
}
|
||||
|
||||
# ---- pages ------------------------------------------------------------
|
||||
@@ -353,19 +398,23 @@ class SeriesService:
|
||||
chapter_id: int,
|
||||
*,
|
||||
title: str | None = None,
|
||||
stated_part: int | None = None,
|
||||
stated_page_start: int | None = None,
|
||||
stated_page_end: int | None = None,
|
||||
set_title: bool = False,
|
||||
set_part: bool = False,
|
||||
set_start: bool = False,
|
||||
set_end: bool = False,
|
||||
) -> None:
|
||||
"""Partial chapter edit. The set_* flags say which fields to write (so
|
||||
None can be written explicitly, e.g. clearing a stated page)."""
|
||||
None can be written explicitly, e.g. clearing a stated page or part)."""
|
||||
await self._require_series(series_tag_id)
|
||||
await self._require_chapter(series_tag_id, chapter_id)
|
||||
values: dict = {}
|
||||
if set_title:
|
||||
values["title"] = title
|
||||
if set_part:
|
||||
values["stated_part"] = stated_part
|
||||
if set_start:
|
||||
values["stated_page_start"] = stated_page_start
|
||||
if set_end:
|
||||
|
||||
@@ -16,8 +16,9 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
|
||||
|
||||
const tagId = ref(null)
|
||||
const series = ref(null)
|
||||
const chapters = ref([]) // [{id, chapter_number, title, is_placeholder, stated_page_start/end, pages:[...]}]
|
||||
const gaps = ref([]) // [{after_chapter_id, start, end}]
|
||||
const chapters = ref([]) // [{id, chapter_number, stated_part, title, is_placeholder, stated_page_start/end, source_post, pages:[...]}]
|
||||
const gaps = ref([]) // missing-page gaps: [{after_chapter_id, start, end}]
|
||||
const partGaps = ref([]) // missing-Part gaps: [{after_chapter_id, start, end}]
|
||||
const pageCount = ref(0)
|
||||
const targetChapterId = ref(null) // which chapter the picker adds into
|
||||
const picker = ref([]) // gallery scroll results
|
||||
@@ -33,6 +34,7 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
|
||||
series.value = body.series
|
||||
chapters.value = body.chapters || []
|
||||
gaps.value = body.gaps || []
|
||||
partGaps.value = body.part_gaps || []
|
||||
pageCount.value = (body.pages || []).length
|
||||
// Keep a valid add-target: the selected chapter, else the first one.
|
||||
const ids = chapters.value.map(c => c.id)
|
||||
@@ -52,6 +54,10 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
|
||||
return gaps.value.find(g => g.after_chapter_id === chapterId) || null
|
||||
}
|
||||
|
||||
function partGapAfter(chapterId) {
|
||||
return partGaps.value.find(g => g.after_chapter_id === chapterId) || null
|
||||
}
|
||||
|
||||
// ---- chapters ----
|
||||
async function createChapter({ title = null, isPlaceholder = false } = {}) {
|
||||
await api.post(`/api/series/${tagId.value}/chapters`, {
|
||||
@@ -67,6 +73,13 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
|
||||
await refresh()
|
||||
}
|
||||
|
||||
async function setChapterPart(chapterId, part) {
|
||||
await api.patch(`/api/series/${tagId.value}/chapters/${chapterId}`, {
|
||||
body: { stated_part: part }
|
||||
})
|
||||
await refresh()
|
||||
}
|
||||
|
||||
async function setChapterStated(chapterId, start, end) {
|
||||
await api.patch(`/api/series/${tagId.value}/chapters/${chapterId}`, {
|
||||
body: { stated_page_start: start, stated_page_end: end }
|
||||
@@ -151,11 +164,11 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
|
||||
}
|
||||
|
||||
return {
|
||||
tagId, series, chapters, gaps, pageCount, targetChapterId,
|
||||
tagId, series, chapters, gaps, partGaps, pageCount, targetChapterId,
|
||||
picker, pickerCursor, pickerSelection, loading,
|
||||
load, refresh, gapAfter,
|
||||
createChapter, renameChapter, setChapterStated, reorderChapters,
|
||||
moveChapter, deleteChapter, mergeChapter, reorderPages,
|
||||
load, refresh, gapAfter, partGapAfter,
|
||||
createChapter, renameChapter, setChapterPart, setChapterStated,
|
||||
reorderChapters, moveChapter, deleteChapter, mergeChapter, reorderPages,
|
||||
loadPicker, togglePick, addSelected, remove, setCover
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,129 +1,178 @@
|
||||
<template>
|
||||
<v-container fluid class="pt-2 pb-6">
|
||||
<v-container fluid class="pt-2 pb-10 fc-series">
|
||||
<div class="fc-series__head">
|
||||
<span class="fc-series__name">{{ store.series?.name || 'Series' }}</span>
|
||||
<span class="fc-series__count">
|
||||
{{ store.chapters.length }} chapter(s) · {{ store.pageCount }} page(s)
|
||||
{{ store.chapters.length }} part(s) · {{ store.pageCount }} page(s)
|
||||
</span>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
v-if="store.pageCount > 0"
|
||||
size="small" variant="tonal" color="accent"
|
||||
prepend-icon="mdi-book-open"
|
||||
class="fc-series__read"
|
||||
@click="$router.push({ name: 'series-read', params: { tagId: store.tagId } })"
|
||||
>Read</v-btn>
|
||||
</div>
|
||||
|
||||
<div class="fc-series__body">
|
||||
<!-- Chapters column -->
|
||||
<div class="fc-series__chapters">
|
||||
<p class="fc-series__hint">
|
||||
Each part is one installment — drag pages to set their order, and set the
|
||||
<strong>Part #</strong> to mark where it falls in the story. Use
|
||||
<strong>Add pages</strong> to pull images from the gallery into the part
|
||||
you're working on.
|
||||
</p>
|
||||
|
||||
<!-- Parts, full width -->
|
||||
<div class="fc-parts">
|
||||
<template v-for="(ch, ci) in store.chapters" :key="ch.id">
|
||||
<section
|
||||
class="fc-chapter"
|
||||
:class="{ 'fc-chapter--target': ch.id === store.targetChapterId }"
|
||||
<section class="fc-part">
|
||||
<header class="fc-part__head">
|
||||
<label class="fc-part__partfield" :title="'Part number for this installment'">
|
||||
<span class="fc-part__partlabel">Part</span>
|
||||
<input
|
||||
class="fc-part__partnum" type="number" min="1"
|
||||
:value="partDraft[ch.id] ?? ''"
|
||||
:placeholder="String(ch.chapter_number)"
|
||||
@input="partDraft[ch.id] = $event.target.value"
|
||||
@keydown.enter.prevent="commitPart(ch)"
|
||||
@blur="commitPart(ch)"
|
||||
>
|
||||
<header class="fc-chapter__head">
|
||||
<span class="fc-chapter__num">{{ ch.chapter_number }}</span>
|
||||
</label>
|
||||
|
||||
<v-text-field
|
||||
v-model="titleDraft[ch.id]"
|
||||
:placeholder="`Chapter ${ch.chapter_number}`"
|
||||
:placeholder="`Untitled — Part ${ch.stated_part ?? ch.chapter_number}`"
|
||||
density="compact" variant="plain" hide-details
|
||||
class="fc-chapter__title"
|
||||
class="fc-part__title"
|
||||
@keydown.enter="commitTitle(ch)"
|
||||
@blur="commitTitle(ch)"
|
||||
/>
|
||||
<span v-if="ch.is_placeholder" class="fc-chapter__ph">placeholder</span>
|
||||
<span v-else class="fc-chapter__pc">{{ ch.pages.length }} pg</span>
|
||||
|
||||
<div class="fc-chapter__stated">
|
||||
<input
|
||||
class="fc-chapter__num-in" type="number" min="0"
|
||||
:value="ch.stated_page_start ?? ''" placeholder="–"
|
||||
title="Stated first page"
|
||||
@change="onStated(ch, 'start', $event)"
|
||||
<span
|
||||
v-if="ch.source_post?.title" class="fc-part__src"
|
||||
:title="ch.source_post.title"
|
||||
>
|
||||
<span>–</span>
|
||||
<input
|
||||
class="fc-chapter__num-in" type="number" min="0"
|
||||
:value="ch.stated_page_end ?? ''" placeholder="–"
|
||||
title="Stated last page"
|
||||
@change="onStated(ch, 'end', $event)"
|
||||
>
|
||||
</div>
|
||||
<v-icon size="x-small">mdi-link-variant</v-icon>
|
||||
{{ ch.source_post.title }}
|
||||
</span>
|
||||
|
||||
<span v-if="ch.is_placeholder" class="fc-part__badge">placeholder</span>
|
||||
<span v-else class="fc-part__pc">{{ ch.pages.length }} pg</span>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<div class="fc-chapter__actions">
|
||||
<v-btn
|
||||
size="x-small" variant="text" icon="mdi-chevron-up"
|
||||
title="Move chapter up" :disabled="ci === 0"
|
||||
v-if="!ch.is_placeholder"
|
||||
size="small" variant="tonal" color="accent"
|
||||
prepend-icon="mdi-image-plus"
|
||||
@click="openPicker(ch.id)"
|
||||
>Add pages</v-btn>
|
||||
|
||||
<v-menu location="bottom end">
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props" size="small" variant="text"
|
||||
icon="mdi-dots-vertical" title="Part actions"
|
||||
/>
|
||||
</template>
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
prepend-icon="mdi-chevron-up" title="Move up"
|
||||
:disabled="ci === 0"
|
||||
@click="store.moveChapter(ch.id, -1)"
|
||||
/>
|
||||
<v-btn
|
||||
size="x-small" variant="text" icon="mdi-chevron-down"
|
||||
title="Move chapter down"
|
||||
<v-list-item
|
||||
prepend-icon="mdi-chevron-down" title="Move down"
|
||||
:disabled="ci === store.chapters.length - 1"
|
||||
@click="store.moveChapter(ch.id, 1)"
|
||||
/>
|
||||
<v-btn
|
||||
size="x-small" variant="text" icon="mdi-arrow-collapse-up"
|
||||
title="Merge into previous chapter" :disabled="ci === 0"
|
||||
<v-list-item
|
||||
prepend-icon="mdi-arrow-collapse-up" title="Merge into previous"
|
||||
:disabled="ci === 0"
|
||||
@click="store.mergeChapter(ch.id, store.chapters[ci - 1].id)"
|
||||
/>
|
||||
<v-btn
|
||||
size="x-small" variant="text" icon="mdi-target"
|
||||
:color="ch.id === store.targetChapterId ? 'accent' : undefined"
|
||||
title="Add picked images here"
|
||||
@click="store.targetChapterId = ch.id"
|
||||
<v-divider />
|
||||
<v-list-item
|
||||
prepend-icon="mdi-delete-outline" title="Delete part"
|
||||
base-color="error"
|
||||
@click="confirmDelete(ch)"
|
||||
/>
|
||||
<v-btn
|
||||
size="x-small" variant="text" icon="mdi-delete-outline"
|
||||
title="Delete chapter (removes its pages from the series)"
|
||||
@click="store.deleteChapter(ch.id)"
|
||||
/>
|
||||
</div>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</header>
|
||||
|
||||
<div v-if="ch.is_placeholder" class="fc-chapter__reserved">
|
||||
Reserved slot — a section you don't have yet.
|
||||
<div class="fc-part__statedrow">
|
||||
<span class="fc-part__statedlabel">Printed pages</span>
|
||||
<input
|
||||
class="fc-part__statedin" type="number" min="0"
|
||||
:value="ch.stated_page_start ?? ''" placeholder="start"
|
||||
@change="onStated(ch, 'start', $event)"
|
||||
>
|
||||
<span class="fc-part__dash">–</span>
|
||||
<input
|
||||
class="fc-part__statedin" type="number" min="0"
|
||||
:value="ch.stated_page_end ?? ''" placeholder="end"
|
||||
@change="onStated(ch, 'end', $event)"
|
||||
>
|
||||
<span class="fc-part__statedhelp">
|
||||
optional — the page numbers printed in this installment
|
||||
</span>
|
||||
</div>
|
||||
<div v-else-if="ch.pages.length === 0" class="fc-chapter__empty">
|
||||
No pages — pick this chapter (◎) then add from the right.
|
||||
|
||||
<div v-if="ch.is_placeholder" class="fc-part__reserved">
|
||||
Reserved slot — a part you don't have yet.
|
||||
</div>
|
||||
<div v-else class="fc-chapter__pages">
|
||||
<div v-else-if="ch.pages.length === 0" class="fc-part__empty">
|
||||
No pages yet.
|
||||
<v-btn
|
||||
size="small" variant="text" color="accent"
|
||||
prepend-icon="mdi-image-plus" @click="openPicker(ch.id)"
|
||||
>Add pages</v-btn>
|
||||
</div>
|
||||
<div v-else class="fc-part__pages">
|
||||
<div
|
||||
v-for="(p, pi) in ch.pages" :key="p.image_id"
|
||||
class="fc-page" draggable="true"
|
||||
:class="{ 'fc-page--dragging': drag && drag.chapterId === ch.id && drag.idx === pi }"
|
||||
@dragstart="drag = { chapterId: ch.id, idx: pi }"
|
||||
@dragend="drag = null"
|
||||
@dragover.prevent
|
||||
@drop="onPageDrop(ch, pi)"
|
||||
>
|
||||
<span class="fc-page__pn">{{ p.page_number }}</span>
|
||||
<img :src="p.thumbnail_url" alt="" loading="lazy" />
|
||||
<div class="fc-page__actions">
|
||||
<v-btn size="x-small" variant="text" icon="mdi-image-frame"
|
||||
title="Make cover" @click="store.setCover(p.image_id)" />
|
||||
<v-btn size="x-small" variant="text" icon="mdi-close"
|
||||
title="Remove" @click="store.remove(p.image_id)" />
|
||||
<v-btn size="x-small" variant="flat" icon="mdi-image-frame"
|
||||
title="Make series cover" @click="store.setCover(p.image_id)" />
|
||||
<v-btn size="x-small" variant="flat" icon="mdi-close"
|
||||
title="Remove from series" @click="store.remove(p.image_id)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div
|
||||
v-if="store.gapAfter(ch.id)"
|
||||
class="fc-gap"
|
||||
>
|
||||
<div v-if="store.partGapAfter(ch.id)" class="fc-gap">
|
||||
<v-icon size="x-small">mdi-alert-outline</v-icon>
|
||||
Gap: pages {{ store.gapAfter(ch.id).start }}–{{ store.gapAfter(ch.id).end }} missing
|
||||
Missing
|
||||
<template v-if="store.partGapAfter(ch.id).start === store.partGapAfter(ch.id).end">
|
||||
Part {{ store.partGapAfter(ch.id).start }}
|
||||
</template>
|
||||
<template v-else>
|
||||
Parts {{ store.partGapAfter(ch.id).start }}–{{ store.partGapAfter(ch.id).end }}
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="store.gapAfter(ch.id)" class="fc-gap">
|
||||
<v-icon size="x-small">mdi-alert-outline</v-icon>
|
||||
Gap: printed pages {{ store.gapAfter(ch.id).start }}–{{ store.gapAfter(ch.id).end }} missing
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="store.chapters.length === 0" class="fc-series__empty">
|
||||
No chapters yet — add one, then add images from the right.
|
||||
No parts yet — add one, then add pages from the gallery.
|
||||
</div>
|
||||
|
||||
<div class="fc-series__chapter-add">
|
||||
<div class="fc-parts__add">
|
||||
<v-btn size="small" variant="tonal" prepend-icon="mdi-plus"
|
||||
@click="store.createChapter()">Add chapter</v-btn>
|
||||
@click="store.createChapter()">Add part</v-btn>
|
||||
<v-btn size="small" variant="text" prepend-icon="mdi-bookmark-outline"
|
||||
@click="store.createChapter({ isPlaceholder: true })">
|
||||
Add placeholder
|
||||
@@ -131,29 +180,48 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Picker column -->
|
||||
<div class="fc-series__picker">
|
||||
<div class="fc-series__pickerhead">
|
||||
<!-- Picker slide-over -->
|
||||
<v-navigation-drawer
|
||||
v-model="pickerOpen" location="right" temporary width="420"
|
||||
class="fc-picker"
|
||||
>
|
||||
<div class="fc-picker__head">
|
||||
<div class="fc-picker__title">
|
||||
<span>Add pages</span>
|
||||
<v-btn size="x-small" variant="text" icon="mdi-close"
|
||||
@click="pickerOpen = false" />
|
||||
</div>
|
||||
<v-select
|
||||
v-model="store.targetChapterId"
|
||||
:items="chapterItems" item-title="label" item-value="id"
|
||||
density="compact" variant="outlined" hide-details
|
||||
label="Add to part" class="mt-2"
|
||||
/>
|
||||
<div class="fc-picker__bar">
|
||||
<span>{{ store.pickerSelection.length }} selected</span>
|
||||
<v-btn
|
||||
size="small" color="accent" variant="flat"
|
||||
:disabled="store.pickerSelection.length === 0"
|
||||
@click="store.addSelected()"
|
||||
>Add to {{ targetLabel }}</v-btn>
|
||||
>Add to part</v-btn>
|
||||
</div>
|
||||
<div class="fc-series__pickergrid">
|
||||
</div>
|
||||
<div class="fc-picker__grid">
|
||||
<div
|
||||
v-for="img in store.picker" :key="img.id"
|
||||
class="fc-series__pick"
|
||||
class="fc-picker__pick"
|
||||
:class="{ on: store.pickerSelection.includes(img.id) }"
|
||||
@click="store.togglePick(img.id)"
|
||||
>
|
||||
<img :src="img.thumbnail_url" alt="" loading="lazy" />
|
||||
<v-icon
|
||||
v-if="store.pickerSelection.includes(img.id)"
|
||||
class="fc-picker__check" color="accent" size="small"
|
||||
>mdi-check-circle</v-icon>
|
||||
</div>
|
||||
<div ref="sentinel" class="fc-picker__sentinel" />
|
||||
</div>
|
||||
<div ref="sentinel" class="fc-series__sentinel" />
|
||||
</div>
|
||||
</div>
|
||||
</v-navigation-drawer>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@@ -167,20 +235,29 @@ const route = useRoute()
|
||||
const store = useSeriesManageStore()
|
||||
const sentinel = ref(null)
|
||||
const drag = ref(null) // { chapterId, idx }
|
||||
const titleDraft = reactive({}) // chapterId -> draft string
|
||||
const titleDraft = reactive({}) // chapterId -> draft title
|
||||
const partDraft = reactive({}) // chapterId -> draft stated_part (string)
|
||||
const pickerOpen = ref(false)
|
||||
|
||||
// Keep local title drafts in sync with the loaded chapters. Edits commit on
|
||||
// blur/Enter, which refreshes and resets the draft to the saved value.
|
||||
// Keep local drafts in sync with loaded chapters. Edits commit on blur/Enter,
|
||||
// which refreshes and resets the draft to the saved value.
|
||||
watch(() => store.chapters, (chs) => {
|
||||
Object.keys(titleDraft).forEach(k => delete titleDraft[k])
|
||||
for (const c of chs) titleDraft[c.id] = c.title || ''
|
||||
for (const k of Object.keys(titleDraft)) delete titleDraft[k]
|
||||
for (const k of Object.keys(partDraft)) delete partDraft[k]
|
||||
for (const c of chs) {
|
||||
titleDraft[c.id] = c.title || ''
|
||||
partDraft[c.id] = c.stated_part == null ? '' : String(c.stated_part)
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
const targetLabel = computed(() => {
|
||||
const ch = store.chapters.find(c => c.id === store.targetChapterId)
|
||||
if (!ch) return 'chapter'
|
||||
return ch.title || `Chapter ${ch.chapter_number}`
|
||||
})
|
||||
const chapterItems = computed(() =>
|
||||
store.chapters.map(c => ({
|
||||
id: c.id,
|
||||
label: `Part ${c.stated_part ?? c.chapter_number}` +
|
||||
(c.title ? ` — ${c.title}` : '') +
|
||||
(c.is_placeholder ? ' (placeholder)' : ` · ${c.pages.length} pg`),
|
||||
}))
|
||||
)
|
||||
|
||||
function commitTitle(ch) {
|
||||
const v = (titleDraft[ch.id] || '').trim()
|
||||
@@ -188,6 +265,17 @@ function commitTitle(ch) {
|
||||
store.renameChapter(ch.id, v || null)
|
||||
}
|
||||
|
||||
function commitPart(ch) {
|
||||
const raw = (partDraft[ch.id] ?? '').trim()
|
||||
const next = raw === '' ? null : parseInt(raw, 10)
|
||||
if (raw !== '' && (Number.isNaN(next) || next < 1)) {
|
||||
partDraft[ch.id] = ch.stated_part == null ? '' : String(ch.stated_part)
|
||||
return
|
||||
}
|
||||
if (next === (ch.stated_part ?? null)) return
|
||||
store.setChapterPart(ch.id, next)
|
||||
}
|
||||
|
||||
function onStated(ch, which, ev) {
|
||||
const raw = ev.target.value
|
||||
const n = raw === '' ? null : parseInt(raw, 10)
|
||||
@@ -206,6 +294,20 @@ function onPageDrop(chapter, toIdx) {
|
||||
store.reorderPages(chapter.id, ordered)
|
||||
}
|
||||
|
||||
function confirmDelete(ch) {
|
||||
const label = `Part ${ch.stated_part ?? ch.chapter_number}`
|
||||
const n = ch.pages.length
|
||||
const msg = n
|
||||
? `Delete ${label} and remove its ${n} page(s) from the series?`
|
||||
: `Delete ${label}?`
|
||||
if (window.confirm(msg)) store.deleteChapter(ch.id)
|
||||
}
|
||||
|
||||
function openPicker(chapterId) {
|
||||
store.targetChapterId = chapterId
|
||||
pickerOpen.value = true
|
||||
}
|
||||
|
||||
useInfiniteScroll(sentinel, () => store.loadPicker())
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -216,91 +318,146 @@ onMounted(async () => {
|
||||
|
||||
<style scoped>
|
||||
.fc-series__head {
|
||||
display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
|
||||
display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px;
|
||||
}
|
||||
.fc-series__name { font-family: 'Fraunces', Georgia, serif; font-size: 22px; }
|
||||
.fc-series__name { font-family: 'Fraunces', Georgia, serif; font-size: 24px; }
|
||||
.fc-series__count {
|
||||
font-size: 13px; color: rgb(var(--v-theme-on-surface-variant));
|
||||
}
|
||||
.fc-series__body { display: flex; gap: 16px; align-items: flex-start; }
|
||||
.fc-series__chapters {
|
||||
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px;
|
||||
.fc-series__hint {
|
||||
font-size: 13px; color: rgb(var(--v-theme-on-surface-variant));
|
||||
margin-bottom: 18px; max-width: 760px;
|
||||
}
|
||||
|
||||
.fc-chapter {
|
||||
/* Parts — full width, stacked */
|
||||
.fc-parts { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
|
||||
.fc-part {
|
||||
border: 1px solid rgb(var(--v-theme-surface-light));
|
||||
border-radius: 8px; padding: 8px 10px;
|
||||
border-radius: 10px; padding: 12px 14px;
|
||||
background: rgb(var(--v-theme-surface));
|
||||
}
|
||||
.fc-chapter--target { border-color: rgb(var(--v-theme-accent), 0.7); }
|
||||
.fc-chapter__head { display: flex; align-items: center; gap: 8px; }
|
||||
.fc-chapter__num {
|
||||
flex: 0 0 auto; min-width: 22px; height: 22px; border-radius: 4px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-variant-numeric: tabular-nums;
|
||||
background: rgb(var(--v-theme-accent), 0.16);
|
||||
.fc-part__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
||||
|
||||
.fc-part__partfield {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
background: rgb(var(--v-theme-accent), 0.12);
|
||||
border: 1px solid rgb(var(--v-theme-accent), 0.35);
|
||||
border-radius: 8px; padding: 4px 8px;
|
||||
}
|
||||
.fc-part__partlabel {
|
||||
font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
|
||||
color: rgb(var(--v-theme-accent));
|
||||
}
|
||||
.fc-chapter__title { flex: 1; min-width: 0; }
|
||||
.fc-chapter__ph {
|
||||
.fc-part__partnum {
|
||||
width: 46px; text-align: center; font-size: 18px; font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
background: transparent; border: none; color: rgb(var(--v-theme-on-surface));
|
||||
}
|
||||
.fc-part__partnum:focus { outline: none; }
|
||||
.fc-part__partnum::placeholder { color: rgb(var(--v-theme-on-surface-variant)); opacity: 0.6; }
|
||||
|
||||
.fc-part__title { flex: 1 1 180px; min-width: 120px; font-size: 15px; }
|
||||
.fc-part__src {
|
||||
display: inline-flex; align-items: center; gap: 4px; max-width: 240px;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
font-size: 12px; color: rgb(var(--v-theme-on-surface-variant));
|
||||
}
|
||||
.fc-part__badge {
|
||||
font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
}
|
||||
.fc-chapter__pc {
|
||||
.fc-part__pc {
|
||||
font-size: 12px; color: rgb(var(--v-theme-on-surface-variant));
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.fc-chapter__stated { display: inline-flex; align-items: center; gap: 4px; }
|
||||
.fc-chapter__num-in {
|
||||
width: 42px; text-align: center; font-size: 12px;
|
||||
|
||||
.fc-part__statedrow {
|
||||
display: flex; align-items: center; gap: 6px; margin: 8px 0 2px;
|
||||
font-size: 12px; color: rgb(var(--v-theme-on-surface-variant));
|
||||
}
|
||||
.fc-part__statedlabel { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
|
||||
.fc-part__statedin {
|
||||
width: 56px; text-align: center; font-size: 12px;
|
||||
background: rgb(var(--v-theme-surface-light));
|
||||
border: 1px solid transparent; border-radius: 4px; padding: 2px 4px;
|
||||
color: rgb(var(--v-theme-on-surface));
|
||||
}
|
||||
.fc-chapter__num-in:focus { outline: none; border-color: rgb(var(--v-theme-accent)); }
|
||||
.fc-chapter__actions { flex: 0 0 auto; display: inline-flex; }
|
||||
.fc-chapter__reserved, .fc-chapter__empty {
|
||||
padding: 14px; text-align: center; font-size: 13px;
|
||||
.fc-part__statedin:focus { outline: none; border-color: rgb(var(--v-theme-accent)); }
|
||||
.fc-part__dash { opacity: 0.6; }
|
||||
.fc-part__statedhelp { font-size: 11px; opacity: 0.7; }
|
||||
|
||||
.fc-part__reserved, .fc-part__empty {
|
||||
padding: 18px; text-align: center; font-size: 13px;
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
}
|
||||
.fc-chapter__pages { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
|
||||
|
||||
/* Big page grid */
|
||||
.fc-part__pages {
|
||||
display: grid; gap: 10px; margin-top: 10px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
.fc-page {
|
||||
display: flex; align-items: center; gap: 10px; padding: 6px;
|
||||
background: rgb(var(--v-theme-surface-light)); border-radius: 6px; cursor: grab;
|
||||
position: relative; border-radius: 8px; overflow: hidden; cursor: grab;
|
||||
background: rgb(var(--v-theme-surface-light));
|
||||
border: 1px solid rgb(var(--v-theme-surface-light));
|
||||
}
|
||||
.fc-page--dragging { opacity: 0.4; }
|
||||
.fc-page img {
|
||||
width: 100%; aspect-ratio: 3 / 4; object-fit: contain;
|
||||
display: block; background: rgb(var(--v-theme-background));
|
||||
}
|
||||
.fc-page img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
|
||||
.fc-page__pn {
|
||||
width: 26px; text-align: center; font-variant-numeric: tabular-nums;
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
position: absolute; top: 6px; left: 6px; z-index: 2;
|
||||
min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
|
||||
background: rgb(var(--v-theme-accent)); color: rgb(var(--v-theme-on-accent, 0 0 0));
|
||||
}
|
||||
.fc-page__actions { margin-left: auto; }
|
||||
.fc-page__actions {
|
||||
position: absolute; top: 4px; right: 4px; z-index: 2;
|
||||
display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s;
|
||||
}
|
||||
.fc-page:hover .fc-page__actions, .fc-page:focus-within .fc-page__actions { opacity: 1; }
|
||||
.fc-page__actions :deep(.v-btn) {
|
||||
background: rgba(0, 0, 0, 0.55); color: #fff;
|
||||
}
|
||||
|
||||
.fc-gap {
|
||||
display: flex; align-items: center; gap: 6px; padding: 4px 10px;
|
||||
display: flex; align-items: center; gap: 6px; padding: 2px 10px;
|
||||
font-size: 12px; color: rgb(var(--v-theme-warning, var(--v-theme-accent)));
|
||||
}
|
||||
.fc-series__chapter-add { display: flex; gap: 8px; margin-top: 4px; }
|
||||
.fc-parts__add { display: flex; gap: 8px; margin-top: 4px; }
|
||||
.fc-series__empty {
|
||||
padding: 32px; text-align: center; color: rgb(var(--v-theme-on-surface-variant));
|
||||
padding: 40px; text-align: center; color: rgb(var(--v-theme-on-surface-variant));
|
||||
}
|
||||
|
||||
.fc-series__picker { flex: 1; min-width: 0; }
|
||||
.fc-series__pickerhead {
|
||||
/* Picker slide-over */
|
||||
.fc-picker__head {
|
||||
position: sticky; top: 0; z-index: 1; padding: 12px 14px;
|
||||
background: rgb(var(--v-theme-surface));
|
||||
border-bottom: 1px solid rgb(var(--v-theme-surface-light));
|
||||
}
|
||||
.fc-picker__title {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'Fraunces', Georgia, serif; font-size: 18px;
|
||||
}
|
||||
.fc-series__pickergrid {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 6px;
|
||||
.fc-picker__bar {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-top: 10px; font-size: 13px;
|
||||
}
|
||||
.fc-series__pick {
|
||||
cursor: pointer; aspect-ratio: 1; overflow: hidden;
|
||||
border-radius: 4px; outline: 2px solid transparent;
|
||||
.fc-picker__grid {
|
||||
display: grid; gap: 6px; padding: 12px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
||||
}
|
||||
.fc-series__pick img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.fc-series__pick.on { outline-color: rgb(var(--v-theme-accent)); }
|
||||
.fc-series__sentinel { height: 40px; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.fc-series__body { flex-direction: column; }
|
||||
.fc-picker__pick {
|
||||
position: relative; cursor: pointer; aspect-ratio: 1; overflow: hidden;
|
||||
border-radius: 6px; outline: 2px solid transparent;
|
||||
}
|
||||
.fc-picker__pick img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.fc-picker__pick.on { outline-color: rgb(var(--v-theme-accent)); }
|
||||
.fc-picker__check {
|
||||
position: absolute; top: 4px; right: 4px;
|
||||
background: rgba(0, 0, 0, 0.5); border-radius: 50%;
|
||||
}
|
||||
.fc-picker__sentinel { grid-column: 1 / -1; height: 40px; }
|
||||
</style>
|
||||
|
||||
@@ -75,6 +75,33 @@ describe('seriesManage', () => {
|
||||
expect(r.body).toEqual({ chapter_ids: [2, 1, 3] })
|
||||
})
|
||||
|
||||
it('setChapterPart patches stated_part on the chapter', async () => {
|
||||
const s = useSeriesManageStore()
|
||||
s.tagId = 7
|
||||
const calls = []
|
||||
stubFetch((url, init) => {
|
||||
calls.push({ url, method: init.method, body: init.body ? JSON.parse(init.body) : null })
|
||||
if (init.method === 'PATCH') return { status: 200, body: { ok: true } }
|
||||
return { status: 200, body: SERIES_BODY }
|
||||
})
|
||||
await s.setChapterPart(1, 2)
|
||||
const p = calls.find(c => c.method === 'PATCH')
|
||||
expect(p.url).toContain('/api/series/7/chapters/1')
|
||||
expect(p.body).toEqual({ stated_part: 2 })
|
||||
})
|
||||
|
||||
it('load surfaces part_gaps and partGapAfter looks them up', async () => {
|
||||
const s = useSeriesManageStore()
|
||||
stubFetch(() => ({
|
||||
status: 200,
|
||||
body: { ...SERIES_BODY, part_gaps: [{ after_chapter_id: 1, start: 2, end: 2 }] }
|
||||
}))
|
||||
await s.load(7)
|
||||
expect(s.partGaps).toHaveLength(1)
|
||||
expect(s.partGapAfter(1)).toEqual({ after_chapter_id: 1, start: 2, end: 2 })
|
||||
expect(s.partGapAfter(99)).toBeNull()
|
||||
})
|
||||
|
||||
it('addSelected posts selection + target chapter then clears', async () => {
|
||||
const s = useSeriesManageStore()
|
||||
s.tagId = 7
|
||||
|
||||
@@ -113,3 +113,52 @@ async def test_list_series_cards(db):
|
||||
# artist filter keeps it; a different artist id drops it.
|
||||
assert any(r["id"] == out["series_tag_id"] for r in await svc.list_series(artist_id=artist.id))
|
||||
assert all(r["id"] != out["series_tag_id"] for r in await svc.list_series(artist_id=artist.id + 99999))
|
||||
|
||||
|
||||
# --- FC-6.4: stated_part, part_gaps, source_post label ---------------------
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_update_chapter_sets_and_clears_stated_part(db):
|
||||
svc = SeriesService(db)
|
||||
sid = (await TagService(db).find_or_create("Part Series", TagKind.series)).id
|
||||
ch = await svc.create_chapter(sid)
|
||||
# Set the installment to Part 2 (chapter_number stays its positional value).
|
||||
await svc.update_chapter(sid, ch["id"], stated_part=2, set_part=True)
|
||||
data = await svc.list_pages(sid)
|
||||
assert data["chapters"][0]["stated_part"] == 2
|
||||
assert data["chapters"][0]["chapter_number"] == 1
|
||||
# Clearing it writes NULL back.
|
||||
await svc.update_chapter(sid, ch["id"], stated_part=None, set_part=True)
|
||||
data = await svc.list_pages(sid)
|
||||
assert data["chapters"][0]["stated_part"] is None
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_part_gaps_flagged_from_stated_part(db):
|
||||
svc = SeriesService(db)
|
||||
sid = (await TagService(db).find_or_create("Gappy Series", TagKind.series)).id
|
||||
c1 = await svc.create_chapter(sid)
|
||||
c3 = await svc.create_chapter(sid)
|
||||
await svc.update_chapter(sid, c1["id"], stated_part=1, set_part=True)
|
||||
await svc.update_chapter(sid, c3["id"], stated_part=3, set_part=True)
|
||||
data = await svc.list_pages(sid)
|
||||
assert len(data["part_gaps"]) == 1
|
||||
gap = data["part_gaps"][0]
|
||||
assert gap["after_chapter_id"] == c1["id"]
|
||||
assert gap["start"] == 2
|
||||
assert gap["end"] == 2
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_source_post_label_when_pages_share_one_post(db):
|
||||
svc = SeriesService(db)
|
||||
artist = await _artist(db, "Src Artist")
|
||||
post = await _post(db, artist, "Source Comic pages 1-2", "pp5")
|
||||
await _post_images(db, post, artist, 2)
|
||||
out = await svc.promote_post_to_series(post.id)
|
||||
data = await svc.list_pages(out["series_tag_id"])
|
||||
sp = data["chapters"][0]["source_post"]
|
||||
assert sp is not None
|
||||
assert sp["id"] == post.id
|
||||
assert sp["title"] == "Source Comic pages 1-2"
|
||||
|
||||
Reference in New Issue
Block a user