From 4f92125e6db48818dea43be629d4a5709ccafbd1 Mon Sep 17 00:00:00 2001 From: ilnaz <237x237@gmail.com> Date: Sat, 18 Jan 2025 16:06:27 +0300 Subject: [PATCH] feat: add a name and phone change from the Masters (#62) --- locales/en.json | 4 + locales/ru.json | 4 + src/api/arm.ts | 28 +++++- src/components/Editable/Editable.tsx | 119 +++++++++++++++++++++++ src/components/MasterItem/MasterItem.tsx | 44 +++++++-- stubs/json/arm-masters/success.json | 14 +-- 6 files changed, 190 insertions(+), 23 deletions(-) create mode 100644 src/components/Editable/Editable.tsx diff --git a/locales/en.json b/locales/en.json index bcc10dc..a185c8c 100644 --- a/locales/en.json +++ b/locales/en.json @@ -73,6 +73,10 @@ "dry-wash.arm.master.table.header.phone": "Phone", "dry-wash.arm.master.table.header.actions": "Actions", "dry-wash.arm.master.table.actionsMenu.delete": "Delete Master", + "dry-wash.arm.master.schedule.empty": "free", + "dry-wash.arm.master.editable.aria.cancel": "Undo changes", + "dry-wash.arm.master.editable.aria.save": "Save changes ", + "dry-wash.arm.master.editable.aria.edit": "Edit", "dry-wash.arm.master.drawer.title": "Add New Master", "dry-wash.arm.master.drawer.inputName.label": "Full Name", "dry-wash.arm.master.drawer.inputName.placeholder": "Enter Full Name", diff --git a/locales/ru.json b/locales/ru.json index a36cd02..06c21ff 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -24,6 +24,10 @@ "dry-wash.arm.master.table.header.phone": "Телефон", "dry-wash.arm.master.table.header.actions": "Действия", "dry-wash.arm.master.table.actionsMenu.delete": "Удалить мастера", + "dry-wash.arm.master.schedule.empty": "Свободен", + "dry-wash.arm.master.editable.aria.cancel": "Отменить изменения", + "dry-wash.arm.master.editable.aria.save": "Сохранить изменения", + "dry-wash.arm.master.editable.aria.edit": "Редактировать", "dry-wash.arm.master.drawer.title": "Добавить нового мастера", "dry-wash.arm.master.drawer.inputName.label": "ФИО", "dry-wash.arm.master.drawer.inputName.placeholder": "Введите ФИО", diff --git a/src/api/arm.ts b/src/api/arm.ts index e4003cb..c370912 100644 --- a/src/api/arm.ts +++ b/src/api/arm.ts @@ -68,7 +68,33 @@ const armService = () => { return await response.json(); }; - return { fetchOrders, fetchMasters, addMaster, deleteMaster }; + const updateMaster = async ({ + id, + name, + phone, + }: { + id: string; + name?: string; + phone?: string; + }) => { + const body = JSON.stringify({ name, phone }); + + const response = await fetch(`${endpoint}${ArmEndpoints.MASTERS}/${id}`, { + method: 'PATCH', + headers: { + 'Content-Type': 'application/json', + }, + body, + }); + + if (!response.ok) { + throw new Error(`Failed to fetch update masters: ${response.status}`); + } + + return await response.json(); + }; + + return { fetchOrders, fetchMasters, addMaster, deleteMaster, updateMaster }; }; export { armService, ArmEndpoints }; diff --git a/src/components/Editable/Editable.tsx b/src/components/Editable/Editable.tsx new file mode 100644 index 0000000..9280bdf --- /dev/null +++ b/src/components/Editable/Editable.tsx @@ -0,0 +1,119 @@ +import React, { useState } from 'react'; +import { + Editable, + EditableInput, + EditablePreview, + Flex, + IconButton, + Input, + useEditableControls, + ButtonGroup, + Stack, + useToast, +} from '@chakra-ui/react'; +import { CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons'; +import { useTranslation } from 'react-i18next'; + +interface EditableWrapperProps { + value: string; + onSubmit: ({ + id, + name, + phone, + }: { + id: string; + name?: string; + phone?: string; + }) => Promise; + as: 'phone' | 'name'; + id: string; +} + +const EditableWrapper = ({ value, onSubmit, as, id }: EditableWrapperProps) => { + const { t } = useTranslation('~', { + keyPrefix: 'dry-wash.arm.master.editable', + }); + + const toast = useToast(); + const [currentValue, setCurrentValue] = useState(value); + + const handleSubmit = async (newValue: string) => { + if (currentValue === newValue) return; + + try { + await onSubmit({ id, [as]: newValue }); + + setCurrentValue(newValue); + + toast({ + title: 'Успешно!', + description: 'Данные обновлены.', + status: 'success', + duration: 2000, + isClosable: true, + position: 'top-right', + }); + } catch (error) { + toast({ + title: 'Ошибка!', + description: 'Не удалось обновить данные.', + status: 'error', + duration: 2000, + isClosable: true, + position: 'top-right', + }); + console.error('Ошибка при обновлении данных:', error); + } + }; + + function EditableControls() { + const { + isEditing, + getSubmitButtonProps, + getCancelButtonProps, + getEditButtonProps, + } = useEditableControls(); + + return isEditing ? ( + + } + {...getSubmitButtonProps()} + /> + } + {...getCancelButtonProps()} + /> + + ) : ( + + } + {...getEditButtonProps()} + /> + + ); + } + + return ( + + + + + + + + ); +}; + +export default EditableWrapper; diff --git a/src/components/MasterItem/MasterItem.tsx b/src/components/MasterItem/MasterItem.tsx index 29a85ee..6ea75f4 100644 --- a/src/components/MasterItem/MasterItem.tsx +++ b/src/components/MasterItem/MasterItem.tsx @@ -1,8 +1,11 @@ import React from 'react'; -import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react'; +import { Badge, Stack, Td, Tr, Text } from '@chakra-ui/react'; +import { useTranslation } from 'react-i18next'; import MasterActionsMenu from '../MasterActionsMenu'; import { getTimeSlot } from '../../lib'; +import EditableWrapper from '../Editable/Editable'; +import { armService } from '../../api/arm'; export interface Schedule { id: string; @@ -18,20 +21,41 @@ export type MasterProps = { }; const MasterItem = ({ name, phone, id, schedule }) => { + const { updateMaster } = armService(); + const { t } = useTranslation('~', { + keyPrefix: 'dry-wash.arm.master', + }); + return ( - {name} - - {schedule?.map(({ startWashTime, endWashTime }, index) => ( - - {getTimeSlot(startWashTime, endWashTime)} - - ))} - + - {phone} + {schedule?.length > 0 ? ( + + {schedule?.map(({ startWashTime, endWashTime }, index: number) => ( + + {getTimeSlot(startWashTime, endWashTime)} + + ))} + + ) : ( + {t('schedule.empty')} + )} + + + diff --git a/stubs/json/arm-masters/success.json b/stubs/json/arm-masters/success.json index ce50415..833d0b3 100644 --- a/stubs/json/arm-masters/success.json +++ b/stubs/json/arm-masters/success.json @@ -2,22 +2,12 @@ "success": true, "body": [ { - "id": "masters1", + "id": "4545423234", "name": "Иван Иванов", - "schedule": [ { - "id": "order1", - "startWashTime": "2024-11-24T10:30:00.000Z", - "endWashTime": "2024-11-24T16:30:00.000Z" - }, - { - "id": "order2", - "startWashTime": "2024-11-24T11:30:00.000Z", - "endWashTime": "2024-11-24T17:30:00.000Z" - }], "phone": "+7 900 123 45 67" }, { - "id": "masters12", + "id": "345354234", "name": "Иван Иванов", "schedule": [ { "id": "order1",