account/sender UI
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
import MultiSelect from '@/components/ui/Selector'
|
||||
|
||||
const DelivelerPage = () => {
|
||||
return (
|
||||
|
||||
@@ -1,16 +1,288 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import MultiSelect from '@/components/ui/Selector'
|
||||
import TextInput from '@/components/ui/TextInput'
|
||||
import PhoneInput from '@/components/ui/PhoneInput'
|
||||
import Button from '@/components/ui/Button'
|
||||
import TextAreaInput from '@/components/ui/TextAreaInput'
|
||||
import CheckboxInput from '@/components/ui/CheckboxInput'
|
||||
import { useForm } from '@/app/hooks/useForm'
|
||||
import showToast from '@/components/ui/Toast'
|
||||
import { SenderPageProps, SelectOption } from '@/app/types'
|
||||
import {
|
||||
cargo_types,
|
||||
cargo_type_translations,
|
||||
transport_types,
|
||||
transport_translations,
|
||||
} from '@/app/constants'
|
||||
|
||||
const formatDateToHTML = (date: Date) => {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}T${hours}:${minutes}`
|
||||
}
|
||||
|
||||
const validationRules = {
|
||||
transport: { required: true },
|
||||
country_from: { required: true, minLength: 2 },
|
||||
city_from: { required: true, minLength: 2 },
|
||||
country_to: { required: true, minLength: 2 },
|
||||
city_to: { required: true, minLength: 2 },
|
||||
cargo_type: { required: true },
|
||||
departure: {
|
||||
required: true,
|
||||
pattern: /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/,
|
||||
},
|
||||
arrival: {
|
||||
required: true,
|
||||
pattern: /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/,
|
||||
},
|
||||
contact_number: {
|
||||
required: true,
|
||||
minLength: 11,
|
||||
pattern: /^\+?[0-9]{11,}$/,
|
||||
},
|
||||
comment: { required: false, minLength: 10 },
|
||||
email_notification: { required: false },
|
||||
}
|
||||
|
||||
const SenderPage = () => {
|
||||
const today = formatDateToHTML(new Date())
|
||||
|
||||
const initialValues: SenderPageProps = {
|
||||
transport: '',
|
||||
country_from: '',
|
||||
city_from: '',
|
||||
country_to: '',
|
||||
city_to: '',
|
||||
cargo_type: '',
|
||||
departure: '',
|
||||
arrival: '',
|
||||
contact_number: '',
|
||||
comment: '',
|
||||
email_notification: false,
|
||||
}
|
||||
|
||||
const cargoOptions: SelectOption[] = cargo_types.map((type, index) => ({
|
||||
id: index + 1,
|
||||
label: cargo_type_translations[type],
|
||||
value: type,
|
||||
}))
|
||||
|
||||
const transportOptions: SelectOption[] = transport_types.map((type, index) => ({
|
||||
id: index + 1,
|
||||
label: transport_translations[type],
|
||||
value: type,
|
||||
}))
|
||||
|
||||
const { values, handleChange, handleSubmit } = useForm<SenderPageProps>(
|
||||
initialValues,
|
||||
validationRules,
|
||||
async values => {
|
||||
try {
|
||||
// await addNewSpecialist(values, selectedImage || undefined)
|
||||
showToast({
|
||||
type: 'success',
|
||||
message: 'Маршрут успешно создан!',
|
||||
})
|
||||
} catch {
|
||||
showToast({
|
||||
type: 'error',
|
||||
message: 'Упс, что то пошло не так...',
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="overflow-hidden rounded-2xl shadow">
|
||||
<div className="bg-white p-6 sm:p-8">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl">Отправить посылку</h1>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="overflow-hidden rounded-2xl bg-white shadow">
|
||||
<div className="p-6 sm:p-8">
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-gray-900">Отправить посылку</h1>
|
||||
<p className="mt-1 text-sm text-gray-600">
|
||||
Заполните информацию о вашей посылке и маршруте
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* тип груза и транспорта */}
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="cargo_type" className="block text-sm font-medium text-gray-700">
|
||||
Тип груза
|
||||
</label>
|
||||
<MultiSelect
|
||||
value={values.cargo_type ? [parseInt(values.cargo_type)] : []}
|
||||
handleChange={e => {
|
||||
handleChange({
|
||||
target: {
|
||||
id: 'cargo_type',
|
||||
value: e.target.value[0]?.toString() || '',
|
||||
},
|
||||
})
|
||||
}}
|
||||
name="cargo_type"
|
||||
options={cargoOptions}
|
||||
className="mt-1"
|
||||
placeholder="Выберите тип груза"
|
||||
noOptionsMessage="Нет доступных типов груза"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="transport" className="block text-sm font-medium text-gray-700">
|
||||
Способ перевозки
|
||||
</label>
|
||||
<MultiSelect
|
||||
value={values.transport ? [parseInt(values.transport)] : []}
|
||||
handleChange={e => {
|
||||
handleChange({
|
||||
target: {
|
||||
id: 'transport',
|
||||
value: e.target.value[0]?.toString() || '',
|
||||
},
|
||||
})
|
||||
}}
|
||||
name="transport"
|
||||
options={transportOptions}
|
||||
className="mt-1"
|
||||
placeholder="Выберите способ перевозки"
|
||||
noOptionsMessage="Нет доступных способов перевозки"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* маршрут */}
|
||||
<div>
|
||||
<h2 className="mb-2 text-xl font-medium text-gray-900">Маршрут</h2>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div className="space-y-6">
|
||||
<TextInput
|
||||
name="country_from"
|
||||
value={values.country_from}
|
||||
handleChange={handleChange}
|
||||
label="Страна отправления"
|
||||
placeholder="Введите страну отправления"
|
||||
style="register"
|
||||
/>
|
||||
<TextInput
|
||||
name="country_to"
|
||||
value={values.country_to}
|
||||
handleChange={handleChange}
|
||||
label="Страна назначения"
|
||||
placeholder="Введите страну назначения"
|
||||
style="register"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<TextInput
|
||||
name="city_to"
|
||||
value={values.city_to}
|
||||
handleChange={handleChange}
|
||||
label="Город назначения"
|
||||
placeholder="Введите город назначения"
|
||||
style="register"
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
name="country_to"
|
||||
value={values.country_to}
|
||||
handleChange={handleChange}
|
||||
label="Страна назначения"
|
||||
placeholder="Введите страну назначения"
|
||||
style="register"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* даты */}
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="departure" className="block text-sm font-medium text-gray-700">
|
||||
Дата отправления
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
name="departure"
|
||||
id="departure"
|
||||
value={values.departure}
|
||||
onChange={handleChange}
|
||||
min={today}
|
||||
className="mt-1 block w-full rounded-xl border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="arrival" className="block text-sm font-medium text-gray-700">
|
||||
Дата прибытия
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
name="arrival"
|
||||
id="arrival"
|
||||
value={values.arrival}
|
||||
onChange={handleChange}
|
||||
min={values.departure || today}
|
||||
className="mt-1 block w-full rounded-xl border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* контактная информация */}
|
||||
<h2 className="mb-2 text-xl font-medium text-gray-900">Контактная информация</h2>
|
||||
<div className="space-y-6">
|
||||
<PhoneInput
|
||||
value={values.contact_number}
|
||||
handleChange={handleChange}
|
||||
label="Контактный телефон"
|
||||
operatorsInfo={false}
|
||||
/>
|
||||
|
||||
<TextAreaInput
|
||||
value={values.comment}
|
||||
handleChange={handleChange}
|
||||
label="Комментарий"
|
||||
placeholder="Дополнительная информация о грузе или пожелания"
|
||||
name="comment"
|
||||
/>
|
||||
|
||||
<CheckboxInput
|
||||
name="email_notification"
|
||||
label="Уведомления"
|
||||
checked={values.email_notification}
|
||||
handleChange={handleChange}
|
||||
enabledText="Хочу получать уведомления по email"
|
||||
disabledText="Не получать уведомления"
|
||||
info="Вы будете получать уведомления о важных событиях на указанный email адрес"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* кнопки действий */}
|
||||
<div className="flex justify-end space-x-4">
|
||||
<Button
|
||||
type="button"
|
||||
text="Отмена"
|
||||
className="border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
text="Создать маршрут"
|
||||
className="bg-orange hover:bg-orange/80 focus:ring-red w-1/3 border border-gray-300 py-2 text-sm font-medium text-white shadow-sm focus:ring-2 focus:ring-offset-2 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,20 +1,7 @@
|
||||
import React from 'react'
|
||||
import { cookies } from 'next/headers'
|
||||
import { headers } from 'next/headers'
|
||||
|
||||
interface Route {
|
||||
id: string
|
||||
from_city_name: string
|
||||
to_city_name: string
|
||||
from_country_name: string
|
||||
to_country_name: string
|
||||
formatted_departure: string
|
||||
formatted_arrival: string
|
||||
formatted_cargo_type: string
|
||||
formatted_transport: string
|
||||
comment?: string
|
||||
owner_type: string
|
||||
}
|
||||
import { Route } from '@/app/types'
|
||||
|
||||
async function getRoutes() {
|
||||
const cookieStore = await cookies()
|
||||
|
||||
Reference in New Issue
Block a user