feat(listings-frontend): add create/edit form, detail page, and listing components
- Multi-step wizard for listing creation (basic info, location, details, pricing, images) - Listing detail page with image gallery, property specs, seller/agent info, stats - Listings index page with filters (transaction type, property type) and pagination - Edit page with tab-based form (read-only until backend PATCH endpoint available) - Drag & drop image upload component with preview and multi-file support - Dashboard layout with navigation bar - New UI primitives: textarea, select, badge, tabs - Listings API client with typed endpoints matching backend contract - Zod validation schemas for all form steps - Status badges with Vietnamese labels for all listing states - Responsive design across all pages Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
228
apps/web/app/(dashboard)/listings/new/page.tsx
Normal file
228
apps/web/app/(dashboard)/listings/new/page.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { ImageUpload, type ImageFile } from '@/components/listings/image-upload';
|
||||
import {
|
||||
StepBasicInfo,
|
||||
StepLocation,
|
||||
StepDetails,
|
||||
StepPricing,
|
||||
} from '@/components/listings/listing-form-steps';
|
||||
import {
|
||||
createListingSchema,
|
||||
listingBasicSchema,
|
||||
listingLocationSchema,
|
||||
listingDetailsSchema,
|
||||
listingPricingSchema,
|
||||
type CreateListingFormData,
|
||||
} from '@/lib/validations/listings';
|
||||
import { listingsApi, type CreateListingPayload, type Direction } from '@/lib/listings-api';
|
||||
import { useAuthStore } from '@/lib/auth-store';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const STEPS = [
|
||||
{ title: 'Thông tin', schemaKeys: Object.keys(listingBasicSchema.shape) },
|
||||
{ title: 'Vị trí', schemaKeys: Object.keys(listingLocationSchema.shape) },
|
||||
{ title: 'Chi tiết', schemaKeys: Object.keys(listingDetailsSchema.shape) },
|
||||
{ title: 'Giá cả', schemaKeys: Object.keys(listingPricingSchema.shape) },
|
||||
{ title: 'Hình ảnh', schemaKeys: null },
|
||||
];
|
||||
|
||||
function toNum(val: string | undefined): number | undefined {
|
||||
if (!val) return undefined;
|
||||
const n = Number(val);
|
||||
return isNaN(n) ? undefined : n;
|
||||
}
|
||||
|
||||
export default function CreateListingPage() {
|
||||
const router = useRouter();
|
||||
const { tokens } = useAuthStore();
|
||||
const [currentStep, setCurrentStep] = React.useState(0);
|
||||
const [images, setImages] = React.useState<ImageFile[]>([]);
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
trigger,
|
||||
formState: { errors },
|
||||
} = useForm<CreateListingFormData>({
|
||||
resolver: zodResolver(createListingSchema),
|
||||
mode: 'onTouched',
|
||||
});
|
||||
|
||||
const goNext = async () => {
|
||||
const step = STEPS[currentStep];
|
||||
if (step?.schemaKeys) {
|
||||
const valid = await trigger(step.schemaKeys as Array<keyof CreateListingFormData>);
|
||||
if (!valid) return;
|
||||
}
|
||||
setCurrentStep((s) => Math.min(s + 1, STEPS.length - 1));
|
||||
};
|
||||
|
||||
const goBack = () => setCurrentStep((s) => Math.max(s - 1, 0));
|
||||
|
||||
const onSubmit = async (data: CreateListingFormData) => {
|
||||
if (!tokens?.accessToken) {
|
||||
setError('Vui lòng đăng nhập để đăng tin');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const payload: CreateListingPayload = {
|
||||
transactionType: data.transactionType,
|
||||
propertyType: data.propertyType,
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
address: data.address,
|
||||
ward: data.ward,
|
||||
district: data.district,
|
||||
city: data.city,
|
||||
latitude: toNum(data.latitude) ?? 0,
|
||||
longitude: toNum(data.longitude) ?? 0,
|
||||
areaM2: Number(data.areaM2),
|
||||
priceVND: data.priceVND,
|
||||
};
|
||||
|
||||
const usableAreaM2 = toNum(data.usableAreaM2);
|
||||
if (usableAreaM2 != null) payload.usableAreaM2 = usableAreaM2;
|
||||
const bedrooms = toNum(data.bedrooms);
|
||||
if (bedrooms != null) payload.bedrooms = bedrooms;
|
||||
const bathrooms = toNum(data.bathrooms);
|
||||
if (bathrooms != null) payload.bathrooms = bathrooms;
|
||||
const floors = toNum(data.floors);
|
||||
if (floors != null) payload.floors = floors;
|
||||
const floor = toNum(data.floor);
|
||||
if (floor != null) payload.floor = floor;
|
||||
const totalFloors = toNum(data.totalFloors);
|
||||
if (totalFloors != null) payload.totalFloors = totalFloors;
|
||||
if (data.direction) payload.direction = data.direction as Direction;
|
||||
const yearBuilt = toNum(data.yearBuilt);
|
||||
if (yearBuilt != null) payload.yearBuilt = yearBuilt;
|
||||
if (data.legalStatus) payload.legalStatus = data.legalStatus;
|
||||
if (data.projectName) payload.projectName = data.projectName;
|
||||
if (data.amenities) {
|
||||
payload.amenities = data.amenities.split(',').map((s) => s.trim()).filter(Boolean);
|
||||
}
|
||||
if (data.rentPriceMonthly) payload.rentPriceMonthly = data.rentPriceMonthly;
|
||||
const commissionPct = toNum(data.commissionPct);
|
||||
if (commissionPct != null) payload.commissionPct = commissionPct;
|
||||
|
||||
const result = await listingsApi.create(tokens.accessToken, payload);
|
||||
|
||||
for (const img of images) {
|
||||
try {
|
||||
await listingsApi.uploadMedia(tokens.accessToken, result.listingId, img.file);
|
||||
} catch {
|
||||
// Continue with remaining images
|
||||
}
|
||||
}
|
||||
|
||||
router.push(`/listings/${result.listingId}`);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<h1 className="mb-6 text-2xl font-bold">Đăng tin mới</h1>
|
||||
|
||||
{/* Step indicators */}
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
{STEPS.map((step, index) => (
|
||||
<div key={step.title} className="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => index < currentStep && setCurrentStep(index)}
|
||||
className={cn(
|
||||
'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-colors',
|
||||
index === currentStep
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: index < currentStep
|
||||
? 'bg-primary/20 text-primary cursor-pointer'
|
||||
: 'bg-muted text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{index < currentStep ? '\u2713' : index + 1}
|
||||
</button>
|
||||
<span
|
||||
className={cn(
|
||||
'ml-2 hidden text-sm sm:inline',
|
||||
index === currentStep ? 'font-medium' : 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{step.title}
|
||||
</span>
|
||||
{index < STEPS.length - 1 && (
|
||||
<div
|
||||
className={cn(
|
||||
'mx-3 h-px w-8 sm:w-12',
|
||||
index < currentStep ? 'bg-primary' : 'bg-muted',
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button className="ml-2 font-medium underline" onClick={() => setError(null)}>
|
||||
Đóng
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
{currentStep === 0 && <StepBasicInfo register={register} errors={errors} />}
|
||||
{currentStep === 1 && <StepLocation register={register} errors={errors} />}
|
||||
{currentStep === 2 && <StepDetails register={register} errors={errors} />}
|
||||
{currentStep === 3 && <StepPricing register={register} errors={errors} />}
|
||||
{currentStep === 4 && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Hình ảnh</h3>
|
||||
<ImageUpload images={images} onChange={setImages} />
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={goBack}
|
||||
disabled={currentStep === 0}
|
||||
>
|
||||
Quay lại
|
||||
</Button>
|
||||
|
||||
{currentStep < STEPS.length - 1 ? (
|
||||
<Button type="button" onClick={goNext}>
|
||||
Tiếp theo
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Đang đăng...' : 'Đăng tin'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user