44 lines
3.7 KiB
Markdown
44 lines
3.7 KiB
Markdown
# Документация по переносу компонента ShiftModal (Модал смены)
|
||
|
||
## Общая структура в React
|
||
- **Файл**: client/src/components/modals/ShiftModal.tsx (предполагается, код не прочитан, на основе типичной логики из Dashboard).
|
||
- **Тип**: Функциональный компонент React с useState (form data: date, amount, notes), useEffect (validation), form onSubmit.
|
||
- **Зависимости**: react-hook-form, zod (validation), simple-ui (Dialog, Form, Input), useWebSocketNew (send shift data), useAuth (user).
|
||
- **Props**: isOpen, onClose.
|
||
- **State**: formData (date, amount, notes), errors from validation.
|
||
- **Template (JSX)**: Dialog open={isOpen} onOpenChange={onClose}, DialogContent bg-slate-800, form with fields (date input, amount input, notes textarea), buttons (submit, cancel).
|
||
- **Validation**: zod schema for date (required, date), amount (required, number >0), notes (optional).
|
||
|
||
## Элементы
|
||
- **Dialog**: open={isOpen}, onOpenChange={onClose}, class max-w-md bg-slate-800 p-6 rounded-lg.
|
||
- **Header**: h2 "Открытие смены", description "Введите данные для новой смены".
|
||
- **Form**: form onSubmit={handleSubmit}, fields:
|
||
- Date: Input type="date" label "Дата смены", value={formData.date}, onChange, error display.
|
||
- Amount: Input type="number" label "Начальный баланс", value={formData.amount}, min="0", step="100", error.
|
||
- Notes: Textarea label "Примечания", value={formData.notes}, rows="3", error.
|
||
- **Buttons**: Submit "Открыть смену" (bg-green-600, disabled if invalid), Cancel (bg-gray-500, onClick onClose).
|
||
- **Error display**: div text-red-500 for field errors.
|
||
|
||
## Стили (Tailwind примеры)
|
||
- DialogContent: max-w-md bg-slate-800 border border-slate-600 rounded-lg shadow-xl p-6.
|
||
- Form fields: Input/Textarea w-full p-3 border border-slate-600 rounded-md focus:ring focus:border-blue-500.
|
||
- Labels: text-sm font-medium text-gray-300 mb-1.
|
||
- Errors: text-red-500 text-xs mt-1.
|
||
- Buttons: flex gap-4 justify-end, submit bg-green-600 hover:bg-green-700 px-4 py-2 rounded-md text-white, cancel bg-gray-500 hover:bg-gray-600.
|
||
- Responsive: max-w-90vw mobile, max-h-80vh overflow-auto.
|
||
|
||
## Взаимодействие
|
||
- onOpen: reset form, focus date input.
|
||
- onSubmit: validate with zod, if valid — send 'open-shift' via WebSocket (date, amount, notes, user), show success/error, onClose.
|
||
- onClose: reset form.
|
||
- Validation: onChange update errors, disable submit if invalid.
|
||
- In Dashboard: <ShiftModal isOpen={showShiftModal} onClose={handleCloseShiftModal} />.
|
||
|
||
## Vue маппинг
|
||
- <template>: <Dialog v-model:open="isOpen" @update:open="onClose"> <DialogContent class="max-w-md bg-slate-800 p-6"> <form @submit.prevent="handleSubmit" class="space-y-4"> <Input v-model="formData.date" type="date" label="Дата смены" /> <Input v-model.number="formData.amount" type="number" label="Начальный баланс" /> <Textarea v-model="formData.notes" label="Примечания" /> <div class="flex gap-4 justify-end"> <Button type="submit" :disabled="invalid">Открыть смену</Button> <Button type="button" @click="onClose">Отмена</Button> </div> </form> </DialogContent> </Dialog>.
|
||
- Props: isOpen, onClose.
|
||
- Emits: none (onClose via update:open).
|
||
- Composables: useWebSocket (sendMessage), useAuth (user), useForm (form handling, validation with zod).
|
||
- State: ref formData { date: '', amount: 0, notes: '' }, errors from validate.
|
||
- Effects: watch isOpen — reset form; onMounted focus date.
|
||
- Validation: computed invalid from errors, v-if for error messages. |