141 lines
4.6 KiB
TypeScript
141 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useTransition } from "react";
|
|
import { useCollections } from "@/lib/app-context";
|
|
import type { Dispatch } from "@/lib/app-state";
|
|
import { Icons } from "@/components/icons";
|
|
import {
|
|
addPlaceToCollection,
|
|
removePlaceFromCollection,
|
|
} from "@/lib/db/actions";
|
|
|
|
export function SaveToCollectionSheet({
|
|
placeId,
|
|
onClose,
|
|
dispatch,
|
|
}: {
|
|
placeId: number;
|
|
onClose: () => void;
|
|
dispatch: Dispatch;
|
|
}) {
|
|
const collections = useCollections();
|
|
// Initial membership state derived from server data.
|
|
const [membership, setMembership] = useState<Record<string, boolean>>(() =>
|
|
Object.fromEntries(collections.map((c) => [c.id, c.place_ids.includes(placeId)])),
|
|
);
|
|
const [, startTransition] = useTransition();
|
|
const editable = collections.filter((c) => c.my_role !== "viewer");
|
|
|
|
const toggle = (cid: number) => {
|
|
const wasIn = !!membership[cid];
|
|
setMembership({ ...membership, [cid]: !wasIn });
|
|
startTransition(() => {
|
|
const op = wasIn
|
|
? removePlaceFromCollection(cid, placeId)
|
|
: addPlaceToCollection(cid, placeId);
|
|
op.catch(() => {
|
|
setMembership({ ...membership, [cid]: wasIn });
|
|
dispatch({ type: "TOAST", value: "Lưu thất bại" });
|
|
});
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="overlay" onClick={onClose} />
|
|
<div className="sheet" style={{ maxHeight: "70%" }}>
|
|
<div className="sheet-handle" />
|
|
<div
|
|
style={{
|
|
padding: "6px 16px 12px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<button
|
|
onClick={onClose}
|
|
style={{
|
|
background: "transparent",
|
|
border: 0,
|
|
color: "var(--muted-foreground)",
|
|
fontSize: 15,
|
|
fontWeight: 500,
|
|
padding: "8px 0",
|
|
}}
|
|
>
|
|
Xong
|
|
</button>
|
|
<div style={{ fontSize: 16, fontWeight: 600 }}>Lưu vào bộ sưu tập</div>
|
|
<div style={{ width: 48 }} />
|
|
</div>
|
|
<div style={{ overflowY: "auto", padding: "0 16px 16px" }}>
|
|
{editable.length === 0 ? (
|
|
<div
|
|
style={{
|
|
padding: "32px 16px",
|
|
textAlign: "center",
|
|
color: "var(--muted-foreground)",
|
|
fontSize: 14,
|
|
}}
|
|
>
|
|
Bạn chưa có bộ sưu tập nào có quyền chỉnh sửa. Tạo bộ sưu tập trước từ tab "Bộ sưu tập".
|
|
</div>
|
|
) : (
|
|
editable.map((c) => {
|
|
const inIt = !!membership[c.id];
|
|
const Icon = c.type === "trip" ? Icons.Plane : Icons.Folder;
|
|
return (
|
|
<button
|
|
key={c.id}
|
|
onClick={() => toggle(c.id)}
|
|
style={{
|
|
width: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 14,
|
|
padding: "12px 4px",
|
|
background: "transparent",
|
|
border: 0,
|
|
borderBottom: "0.5px solid var(--border)",
|
|
textAlign: "left",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 10,
|
|
background: c.type === "trip" ? "var(--primary-soft)" : "var(--muted)",
|
|
color: c.type === "trip" ? "var(--primary)" : "var(--muted-foreground)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<Icon size={18} stroke={1.75} />
|
|
</div>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontSize: 15, fontWeight: 500 }}>{c.name}</div>
|
|
<div style={{ fontSize: 12, color: "var(--muted-foreground)" }}>
|
|
{c.place_count} địa điểm
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="checkbox"
|
|
data-checked={inIt}
|
|
style={{ pointerEvents: "none" }}
|
|
>
|
|
<Icons.Check size={14} stroke={3} />
|
|
</div>
|
|
</button>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|