feat(postcard): split create into sent/received, add pending status and mark-sent flow

This commit is contained in:
2026-07-15 19:04:54 +08:00
parent d79aaea4ae
commit de29f5445e
7 changed files with 172 additions and 91 deletions

View File

@@ -5,11 +5,15 @@
<div class="detail-title-row">
<a href="/profiles/{{ postcard.profile_id }}/postcards" class="btn btn-back"></a>
<h1>{{ postcard.card_number }}</h1>
<span class="badge badge-{{ postcard.status }}">{{ {'sent':'已寄出','delivered':'已送达','received':'已收到'}.get(postcard.status, postcard.status) if user.language=='zh' else {'sent':'Sent','delivered':'Delivered','received':'Received'}.get(postcard.status, postcard.status) }}</span>
<span class="badge badge-{{ postcard.status }}">{{ {'pending':'待寄出','sent':'已寄出','delivered':'已送达','received':'已收到'}.get(postcard.status, postcard.status) if user.language=='zh' else {'pending':'Pending','sent':'Sent','delivered':'Delivered','received':'Received'}.get(postcard.status, postcard.status) }}</span>
</div>
<div class="detail-actions">
<a href="/postcards/{{ postcard.id }}/edit" class="btn">{{ 'pc_detail.edit'|t(user.language) }}</a>
{% if postcard.status == 'sent' %}
{% if postcard.status == 'pending' %}
<form method="post" action="/postcards/{{ postcard.id }}/mark-sent" class="inline">
<button type="submit" class="btn btn-primary" onclick="return confirm('{{ 'pc_detail.confirm_sent'|t(user.language) }}')">{{ 'pc_detail.mark_sent'|t(user.language) }}</button>
</form>
{% elif postcard.status == 'sent' %}
<form method="post" action="/postcards/{{ postcard.id }}/mark-delivered" class="inline">
<button type="submit" class="btn btn-primary" onclick="return confirm('{{ 'pc_detail.confirm_delivered'|t(user.language) }}')">{{ 'pc_detail.mark_delivered'|t(user.language) }}</button>
</form>
@@ -49,12 +53,14 @@
<div class="detail-meta">
<dl>
<dt>{{ 'pc_detail.card_number'|t(user.language) }}</dt><dd>{{ postcard.card_number }}</dd>
<dt>{{ 'pc_detail.status'|t(user.language) }}</dt><dd>{{ {'sent':'已寄出','delivered':'已送达','received':'已收到'}.get(postcard.status, postcard.status) if user.language=='zh' else {'sent':'Sent','delivered':'Delivered','received':'Received'}.get(postcard.status, postcard.status) }}</dd>
{% if postcard.status in ('sent','delivered') %}
<dt>{{ 'pc_detail.status'|t(user.language) }}</dt><dd>{{ {'pending':'待寄出','sent':'已寄出','delivered':'已送达','received':'已收到'}.get(postcard.status, postcard.status) if user.language=='zh' else {'pending':'Pending','sent':'Sent','delivered':'Delivered','received':'Received'}.get(postcard.status, postcard.status) }}</dd>
{% if postcard.status in ('pending','sent','delivered') %}
<dt>{{ 'pc_detail.recipient'|t(user.language) }}</dt><dd>{{ postcard.recipient_name or '-' }}</dd>
<dt>{{ 'pc_detail.route'|t(user.language) }}</dt><dd>{% if postcard.country_from %}{{ postcard.country_from|flag }} {{ postcard.country_from }} → {% endif %}{{ postcard.country_to|flag }} {{ postcard.country_to or '-' }}</dd>
<dt>{{ 'pc_detail.send_time'|t(user.language) }}</dt><dd>{{ postcard.send_time.strftime('%Y-%m-%d') if postcard.send_time else '-' }}</dd>
{% if postcard.status == 'delivered' %}
<dt>{{ 'pc_detail.arrival_time'|t(user.language) }}</dt><dd>{{ postcard.arrival_time.strftime('%Y-%m-%d') if postcard.arrival_time else '-' }}</dd>
{% endif %}
{% else %}
<dt>{{ 'pc_detail.sender'|t(user.language) }}</dt><dd>{{ postcard.sender_name or '-' }}</dd>
<dt>{{ 'pc_detail.route'|t(user.language) }}</dt><dd>{% if postcard.country_from %}{{ postcard.country_from|flag }} {{ postcard.country_from }} → {% endif %}{{ postcard.country_to|flag }} {{ postcard.country_to or '-' }}</dd>

View File

@@ -1,44 +1,73 @@
{% extends "base.html" %}
{% block title %}{{ ('pc_form.edit'|t(user.language)) if postcard else ('pc_form.new'|t(user.language)) }} - {{ 'brand'|t(user.language) }}{% endblock %}
{% block title %}{% if postcard %}{{ 'pc_form.edit'|t(user.language) }}{% else %}{% if create_type == 'received' %}{{ 'pc_form.new_received'|t(user.language) }}{% else %}{{ 'pc_form.new_sent'|t(user.language) }}{% endif %}{% endif %} - {{ 'brand'|t(user.language) }}{% endblock %}
{% block content %}
<div class="section-header">
<h1>{{ ('pc_form.edit'|t(user.language)) if postcard else ('pc_form.new'|t(user.language)) }}</h1>
<h1>{% if postcard %}{{ 'pc_form.edit'|t(user.language) }}{% else %}{% if create_type == 'received' %}{{ 'pc_form.new_received'|t(user.language) }}{% else %}{{ 'pc_form.new_sent'|t(user.language) }}{% endif %}{% endif %}</h1>
</div>
<form method="post" action="{{ '/postcards/%d/edit' % postcard.id if postcard else '/profiles/%d/postcards' % profile.id }}" class="form-card">
<label>{{ 'pc_form.number'|t(user.language) }} *</label>
<input type="text" name="card_number" value="{{ postcard.card_number if postcard else '' }}" required>
{% if error %}<div class="form-card" style="border-left:3px solid var(--danger);margin-bottom:1rem;padding:.75rem 1rem;color:var(--danger)">{{ error }}</div>{% endif %}
{% set is_new = (postcard is none) %}
{% set is_edit = (postcard is not none) %}
{% set edit_status = postcard.status if is_edit else '' %}
{% set is_received_form = (create_type == 'received' and is_new) or (is_edit and edit_status == 'received') %}
<form method="post" action="{{ '/postcards/%d/edit' % postcard.id if is_edit else '/profiles/%d/postcards' % profile.id }}" class="form-card">
<label>{{ 'pc_form.number'|t(user.language) }} *</label>
<input type="text" name="card_number" value="{{ postcard.card_number if is_edit else '' }}" required>
{% if is_received_form %}
{# ── 收到表单:无状态选择 ── #}
<input type="hidden" name="status" value="received">
<label>{{ 'pc_form.sender'|t(user.language) }} *</label>
<input type="text" name="sender_name" value="{{ postcard.sender_name if is_edit else '' }}">
<label>{{ 'pc_form.receive_time'|t(user.language) }} *</label>
<input type="date" name="receive_time" value="{{ postcard.receive_time.strftime('%Y-%m-%d') if is_edit and postcard.receive_time else today }}">
<label>{{ 'pc_form.country'|t(user.language) }}</label>
<input type="text" name="country_to" value="{{ postcard.country_to if is_edit and postcard.country_to else (profile.country if profile else '') }}" maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
<label>{{ 'pc_form.country_from'|t(user.language) }}</label>
<input type="text" name="country_from" value="{{ postcard.country_from if is_edit and postcard.country_from else '' }}" maxlength="2" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
{% else %}
{# ── 寄出表单 ── #}
{% if is_new %}
{# 新建寄出:状态由日期自动决定,隐藏选择 #}
<input type="hidden" name="status" id="hidden-status" value="sent">
<label>{{ 'pc_form.status'|t(user.language) }}</label>
<div id="auto-status-display" class="form-card" style="padding:.4rem .75rem;margin-bottom:.25rem;font-size:.85rem;display:inline-block"></div>
{% else %}
{# 编辑时:显示状态选择 #}
<label>{{ 'pc_form.status'|t(user.language) }} *</label>
<select name="status" id="status-select" onchange="toggleFields()" required>
<option value="sent" {% if postcard and postcard.status=='sent' %}selected{% endif %}>{{ 'status.sent'|t(user.language) }}</option>
<option value="delivered" {% if postcard and postcard.status=='delivered' %}selected{% endif %}>{{ 'status.delivered'|t(user.language) }}</option>
<option value="received" {% if postcard and postcard.status=='received' %}selected{% endif %}>{{ 'status.received'|t(user.language) }}</option>
<option value="pending" {% if edit_status=='pending' %}selected{% endif %}>{{ 'status.pending'|t(user.language) }}</option>
<option value="sent" {% if edit_status=='sent' %}selected{% endif %}>{{ 'status.sent'|t(user.language) }}</option>
<option value="delivered" {% if edit_status=='delivered' %}selected{% endif %}>{{ 'status.delivered'|t(user.language) }}</option>
</select>
{% endif %}
<div id="fields-sent-delivered">
<label>{{ 'pc_form.recipient'|t(user.language) }} *</label>
<input type="text" name="recipient_name" id="input-recipient" value="{{ postcard.recipient_name if postcard else '' }}">
<input type="text" name="recipient_name" value="{{ postcard.recipient_name if is_edit else '' }}">
<label>{{ 'pc_form.send_time'|t(user.language) }} *</label>
<input type="date" name="send_time" id="input-send-time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if postcard and postcard.send_time else '' }}">
<input type="date" name="send_time" id="input-send-time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if is_edit and postcard.send_time else (today if is_new else '') }}">
<label id="label-arrival">{{ 'pc_form.arrival_time'|t(user.language) }}</label>
<input type="date" name="arrival_time" id="input-arrival" value="{{ postcard.arrival_time.strftime('%Y-%m-%d') if postcard and postcard.arrival_time else '' }}">
</div>
<div id="fields-received" style="display:none">
<label>{{ 'pc_form.sender'|t(user.language) }} *</label>
<input type="text" name="sender_name" id="input-sender" value="{{ postcard.sender_name if postcard else '' }}">
<label>{{ 'pc_form.receive_time'|t(user.language) }} *</label>
<input type="date" name="receive_time" id="input-receive" value="{{ postcard.receive_time.strftime('%Y-%m-%d') if postcard and postcard.receive_time else '' }}">
<input type="date" name="arrival_time" id="input-arrival" value="{{ postcard.arrival_time.strftime('%Y-%m-%d') if is_edit and postcard.arrival_time else '' }}" {% if is_new or (is_edit and edit_status=='sent') %}disabled{% endif %}>
</div>
<label>{{ 'pc_form.country_from'|t(user.language) }}</label>
<input type="text" name="country_from" id="input-country-from" value="{{ postcard.country_from if postcard and postcard.country_from else (profile.country if profile else '') }}" maxlength="2" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
<input type="text" name="country_from" value="{{ postcard.country_from if is_edit and postcard.country_from else (profile.country if profile else '') }}" maxlength="2" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
<label>{{ 'pc_form.country'|t(user.language) }} *</label>
<input type="text" name="country_to" id="input-country-to" value="{{ postcard.country_to if postcard else '' }}" maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
<label>{{ 'pc_form.country'|t(user.language) }}</label>
<input type="text" name="country_to" value="{{ postcard.country_to if is_edit and postcard.country_to else '' }}" maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
{% endif %}
<label>{{ 'pc_form.notes'|t(user.language) }}</label>
<textarea name="notes" rows="3" placeholder="{{ 'pc_form.notes_ph'|t(user.language) }}">{{ postcard.notes if postcard else '' }}</textarea>
<textarea name="notes" rows="3" placeholder="{{ 'pc_form.notes_ph'|t(user.language) }}">{{ postcard.notes if is_edit else '' }}</textarea>
<div class="form-actions">
<button type="submit" class="btn btn-primary">{{ 'pc_form.save'|t(user.language) }}</button>
@@ -46,68 +75,62 @@
</div>
</form>
<script>
function toggleFields() {
var s = document.getElementById('status-select').value;
var sd = document.getElementById('fields-sent-delivered');
var rc = document.getElementById('fields-received');
var recipient = document.getElementById('input-recipient');
var country = document.getElementById('input-country');
{% if is_new and not is_received_form %}
// ── 新建寄出:根据日期自动判定状态 ──
(function() {
var sendTime = document.getElementById('input-send-time');
var hiddenStatus = document.getElementById('hidden-status');
var display = document.getElementById('auto-status-display');
var arrival = document.getElementById('input-arrival');
var labelArrival = document.getElementById('label-arrival');
var sender = document.getElementById('input-sender');
var receive = document.getElementById('input-receive');
if (s === 'received') {
sd.style.display = 'none';
rc.style.display = '';
recipient.required = false;
country.required = false;
sendTime.required = false;
arrival.required = false;
var today = new Date().toISOString().slice(0, 10);
// 如果没填日期,自动填今天
if (!sendTime.value) sendTime.value = today;
function updateAutoStatus() {
var v = sendTime.value;
if (!v) { display.textContent = ''; return; }
if (v > today) {
hiddenStatus.value = 'pending';
display.textContent = '📋 {{ "status.pending"|t(user.language) }}';
display.style.borderLeft = '3px solid var(--primary)';
} else {
hiddenStatus.value = 'sent';
display.textContent = '📮 {{ "status.sent"|t(user.language) }}';
display.style.borderLeft = '3px solid var(--sent)';
}
// arrived 仅在 delivered 时启用sent/pending 时禁用
if (hiddenStatus.value !== 'delivered') {
arrival.disabled = true;
arrival.value = '';
}
}
sendTime.addEventListener('change', updateAutoStatus);
sendTime.addEventListener('input', updateAutoStatus);
updateAutoStatus();
})();
{% elif is_edit and not is_received_form %}
// ── 编辑寄出:根据状态切换 arrival 可用性 ──
function toggleFields() {
var s = document.getElementById('status-select').value;
var arrival = document.getElementById('input-arrival');
var labelArrival = document.getElementById('label-arrival');
if (s === 'delivered') {
arrival.disabled = false;
sender.required = true;
receive.required = true;
} else if (s === 'sent') {
sd.style.display = '';
rc.style.display = 'none';
recipient.required = true;
country.required = true;
sendTime.required = true;
arrival.required = false;
labelArrival.textContent = '{{ "pc_form.arrival_time"|t(user.language) }} *';
} else {
arrival.disabled = true;
arrival.value = '';
labelArrival.textContent = '到达时间';
sender.required = false;
receive.required = false;
} else {
sd.style.display = '';
rc.style.display = 'none';
recipient.required = true;
country.required = true;
sendTime.required = true;
arrival.disabled = false;
arrival.required = true;
labelArrival.textContent = '到达时间 *';
sender.required = false;
receive.required = false;
labelArrival.textContent = '{{ "pc_form.arrival_time"|t(user.language) }}';
}
}
toggleFields();
{% if not postcard %}
// Auto-fill date fields with today on new postcards
{% endif %}
{% if is_new and is_received_form %}
// ── 新建收到:自动填日期 ──
(function() {
var today = new Date().toISOString().slice(0, 10);
var sendTime = document.getElementById('input-send-time');
var receiveTime = document.getElementById('input-receive');
var statusSel = document.getElementById('status-select');
// Fill on page load
if (statusSel.value === 'sent' && !sendTime.value) sendTime.value = today;
if (statusSel.value === 'received' && !receiveTime.value) receiveTime.value = today;
// Fill on status change
statusSel.addEventListener('change', function() {
if (this.value === 'sent' && !sendTime.value) sendTime.value = today;
if (this.value === 'received' && !receiveTime.value) receiveTime.value = today;
});
var rt = document.querySelector('input[name="receive_time"]');
if (rt && !rt.value) rt.value = today;
})();
{% endif %}
</script>

View File

@@ -3,7 +3,10 @@
{% block content %}
<div class="section-header">
<h1>{{ profile.nickname }} {{ 'pc_list.title'|t(user.language) }}</h1>
<a href="/profiles/{{ profile.id }}/postcards/new" class="btn btn-primary">{{ 'pc_list.new'|t(user.language) }}</a>
<div style="display:flex;gap:.5rem;flex-wrap:wrap">
<a href="/profiles/{{ profile.id }}/postcards/new?create_type=sent" class="btn btn-primary">{{ 'pc_list.new_sent'|t(user.language) }}</a>
<a href="/profiles/{{ profile.id }}/postcards/new?create_type=received" class="btn">{{ 'pc_list.new_received'|t(user.language) }}</a>
</div>
</div>
<div style="margin-bottom:1rem">
{% if profile.notes %}
@@ -41,10 +44,10 @@
<div class="postcard-row-info">
<strong>{{ pc.card_number }}</strong>
<div class="postcard-row-detail">
<span>{% if pc.country_from %}{{ pc.country_from|flag }}{% endif %}{{ pc.country_to|flag }} {{ pc.country_to or '-' }}</span>
<span>{% if pc.country_from %}{{ pc.country_from|flag }} {{ pc.country_from }} → {% endif %}{{ pc.country_to|flag }} {{ pc.country_to or '-' }}</span>
<span>→ {{ pc.recipient_name or '-' }}</span>
</div>
<span class="badge badge-{{ pc.status }}">{{ {'sent':'已寄出','delivered':'已送达'}.get(pc.status) if user.language=='zh' else {'sent':'Sent','delivered':'Delivered'}.get(pc.status) }}</span>
<span class="badge badge-{{ pc.status }}">{{ {'pending':'待寄出','sent':'已寄出','delivered':'已送达'}.get(pc.status) if user.language=='zh' else {'pending':'Pending','sent':'Sent','delivered':'Delivered'}.get(pc.status) }}</span>
<span class="postcard-row-date">
{% if pc.send_time %}{{ pc.send_time.strftime('%Y-%m-%d') }}{% if user.language=='zh' %}寄出{% endif %}{% endif %}
{% if pc.arrival_time %}<br>{{ pc.arrival_time.strftime('%Y-%m-%d') }}{% if user.language=='zh' %}送达{% endif %}{% endif %}
@@ -52,7 +55,11 @@
</div>
{% if pc.notes %}<span class="postcard-row-notes">{{ pc.notes[:50] }}{% if pc.notes|length > 50 %}…{% endif %}</span>{% endif %}
<div class="postcard-row-action">
{% if pc.status == 'sent' %}
{% if pc.status == 'pending' %}
<form method="post" action="/postcards/{{ pc.id }}/mark-sent" onclick="event.preventDefault();event.stopPropagation();if(confirm('{{ 'pc_list.confirm_sent'|t(user.language) }}'))this.submit();">
<button type="submit" class="btn btn-sm btn-primary">{{ 'pc_list.mark_sent'|t(user.language) }}</button>
</form>
{% elif pc.status == 'sent' %}
<form method="post" action="/postcards/{{ pc.id }}/mark-delivered" onclick="event.preventDefault();event.stopPropagation();if(confirm('{{ 'pc_list.confirm_delivered'|t(user.language) }}'))this.submit();">
<button type="submit" class="btn btn-sm btn-primary">{{ 'pc_list.mark_delivered'|t(user.language) }}</button>
</form>
@@ -81,7 +88,10 @@
<div class="postcard-row-detail">
<span>← {{ pc.sender_name or '-' }}</span>
</div>
{% if pc.receive_time %}<span class="postcard-row-date">{{ pc.receive_time.strftime('%Y-%m-%d') }}{% if user.language=='zh' %}收到{% endif %}</span>{% endif %}
<span class="badge badge-received">{{ 'status.received'|t(user.language) }}</span>
<span class="postcard-row-date">
{% if pc.receive_time %}{{ pc.receive_time.strftime('%Y-%m-%d') }}{% if user.language=='zh' %}收到{% endif %}{% endif %}
</span>
</div>
{% if pc.notes %}<span class="postcard-row-notes">{{ pc.notes[:50] }}{% if pc.notes|length > 50 %}…{% endif %}</span>{% endif %}
</a>