feat: add i18next for arm (#17)

2024-11-09 18:52:38 +03:00 · 2024-11-09 18:52:38 +03:00 · d7da2b5618
commit d7da2b5618
parent 413181617b
8 changed files with 78 additions and 33 deletions
--- a/locales/ru.json
+++ b/locales/ru.json
@ -1,5 +1,33 @@
 {
-  "dry-wash.arm.masters.add": "Добавить",
-  "dry-wash.order.status.progress": "Выполняется",
-  "dry-wash.order.status.complete": "Завершено"
+  "dry-wash.arm.master.add": "Добавить",
+  "dry-wash.arm.order.title": "Заказы",
+  "dry-wash.arm.order.status.progress": "Выполняется",
+  "dry-wash.arm.order.status.complete": "Завершено",
+  "dry-wash.arm.order.status.pending": "в ожидании",
+  "dry-wash.arm.order.status.working": "В работе",
+  "dry-wash.arm.order.status.canceled": "Отменено",
+  "dry-wash.arm.order.status.placeholder": "Выберите статус",
+  "dry-wash.arm.order.table.header.carNumber": "Номер машины",
+  "dry-wash.arm.order.table.header.washingTime": "Время мойки",
+  "dry-wash.arm.order.table.header.orderDate": "Дата заказа",
+  "dry-wash.arm.order.table.header.status": "Статус",
+  "dry-wash.arm.order.table.header.telephone": "Телефон",
+  "dry-wash.arm.order.table.header.location": "Расположение",
+  "dry-wash.arm.master.title": "Мастера",
+  "dry-wash.arm.master.table.header.name": "Имя",
+  "dry-wash.arm.master.table.header.currentJob": "Актуальная занятость",
+  "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.drawer.title": "Добавить нового мастера",
+  "dry-wash.arm.master.drawer.inputName.label": "ФИО",
+  "dry-wash.arm.master.drawer.inputName.placeholder": "Введите ФИО",
+  "dry-wash.arm.master.drawer.inputPhone.label": "Номер телефона",
+  "dry-wash.arm.master.drawer.inputPhone.placeholder": "Введите номер телефона",
+  "dry-wash.arm.master.drawer.button.save": "Сохранить",
+  "dry-wash.arm.master.drawer.button.cancel": "Отменить",
+  "dry-wash.arm.master.sideBar.title": " Сухой мастер",
+  "dry-wash.arm.master.sideBar.title.master": "Мастера",
+  "dry-wash.arm.master.sideBar.title.orders": "Заказы"
+
 }
--- a/src/components/MasterActionsMenu/MasterActionsMenu.tsx
+++ b/src/components/MasterActionsMenu/MasterActionsMenu.tsx
@ -7,15 +7,16 @@ import {
  IconButton,
 } from '@chakra-ui/react';
 import { EditIcon } from '@chakra-ui/icons';
+import i18next from 'i18next';

 const MasterActionsMenu = () => {
  return (
    <Menu>
      <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
      <MenuList>
-        <MenuItem>Посмотреть профиль</MenuItem>
-        <MenuItem>Изменить расписание</MenuItem>
-        <MenuItem>Удалить мастера</MenuItem>
+        <MenuItem>
+          {i18next.t('dry-wash.arm.master.table.actionsMenu.delete')}
+        </MenuItem>
      </MenuList>
    </Menu>
  );
--- a/src/components/MasterDrawer/MasterDrawer.tsx
+++ b/src/components/MasterDrawer/MasterDrawer.tsx
@ -12,6 +12,7 @@ import {
  DrawerHeader,
  DrawerOverlay,
 } from '@chakra-ui/react';
+import i18next from 'i18next';

 const MasterDrawer = ({ isOpen, onClose }) => {
  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
@ -26,35 +27,46 @@ const MasterDrawer = ({ isOpen, onClose }) => {
      <DrawerOverlay />
      <DrawerContent>
        <DrawerCloseButton />
-        <DrawerHeader>Добавить нового мастера</DrawerHeader>
+        <DrawerHeader>
+          {i18next.t('dry-wash.arm.master.drawer.title')}
+        </DrawerHeader>
        <DrawerBody>
          <FormControl mb='4'>
-            <FormLabel>ФИО</FormLabel>
+            <FormLabel>
+              {i18next.t('dry-wash.arm.master.drawer.inputName.label')}
+            </FormLabel>
            <Input
              value={newMaster.name}
              onChange={(e) =>
                setNewMaster({ ...newMaster, name: e.target.value })
              }
-              placeholder='Введите ФИО'
+              placeholder={i18next.t(
+                'dry-wash.arm.master.drawer.inputName.placeholder',
+              )}
            />
          </FormControl>
          <FormControl>
-            <FormLabel>Номер телефона</FormLabel>
+            <FormLabel>
+              {' '}
+              {i18next.t('dry-wash.arm.master.drawer.inputPhone.label')}
+            </FormLabel>
            <Input
              value={newMaster.phone}
              onChange={(e) =>
                setNewMaster({ ...newMaster, phone: e.target.value })
              }
-              placeholder='Введите номер телефона'
+              placeholder={i18next.t(
+                'dry-wash.arm.master.drawer.inputPhone.placeholder',
+              )}
            />
          </FormControl>
        </DrawerBody>
        <DrawerFooter>
          <Button colorScheme='teal' mr={3} onClick={handleSave}>
-            Сохранить
+            {i18next.t('dry-wash.arm.master.drawer.button.save')}
          </Button>
          <Button variant='ghost' onClick={onClose}>
-            Отменить
+            {i18next.t('dry-wash.arm.master.drawer.button.cancel')}
          </Button>
        </DrawerFooter>
      </DrawerContent>
--- a/src/components/MasterDrawer/index.ts
+++ b/src/components/MasterDrawer/index.ts
--- a/src/components/Masters/Masters.tsx
+++ b/src/components/Masters/Masters.tsx
@ -13,10 +13,10 @@ import {
 } from '@chakra-ui/react';
 import { mastersData } from '../../mocks';
 import MasterItem from '../MasterItem';
-import MasterDrawer from '../MasterModal';
+import MasterDrawer from '../MasterDrawer';
 import i18next from 'i18next';

-const TABLE_HEADERS = ['Имя', 'Актуальная занятость', 'Телефон', 'Действия'];
+const TABLE_HEADERS = ['name', 'currentJob', 'phone', 'actions'];

 const Masters = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
@ -24,16 +24,18 @@ const Masters = () => {
  return (
    <Box p='8'>
      <Flex justifyContent='space-between' alignItems='center' mb='5'>
-        <Heading size='lg'>Мастера</Heading>
+        <Heading size='lg'> {i18next.t('dry-wash.arm.master.title')}</Heading>
        <Button colorScheme='green' onClick={onOpen}>
-          + {i18next.t('dry-wash.arm.masters.add')}
+          + {i18next.t('dry-wash.arm.master.add')}
        </Button>
      </Flex>
      <Table variant='simple' colorScheme='blackAlpha'>
        <Thead>
          <Tr>
            {TABLE_HEADERS.map((name) => (
-              <Th key={name}>{name}</Th>
+              <Th key={name}>
+                {i18next.t(`dry-wash.arm.master.table.header.${name}`)}
+              </Th>
            ))}
          </Tr>
        </Thead>
--- a/src/components/OrderItem/OrderItem.tsx
+++ b/src/components/OrderItem/OrderItem.tsx
@ -23,11 +23,11 @@ const OrderItem = ({
        <Select
          value={statusSelect}
          onChange={(e) => setStatus(e.target.value)}
-          placeholder='Выберите статус'
+          placeholder={i18next.t(`dry-wash.arm.order.status.placeholder`)}
        >
          {statuses.map((status) => (
            <option key={status} value={status}>
-              {i18next.t(`dry-wash.order.status.${status}`)}
+              {i18next.t(`dry-wash.arm.order.status.${status}`)}
            </option>
          ))}
        </Select>
--- a/src/components/Orders/Orders.tsx
+++ b/src/components/Orders/Orders.tsx
@ -2,26 +2,28 @@ import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
 import { ordersData } from '../../mocks';
 import OrderItem from '../OrderItem';
-
+import i18next from 'i18next';
 const Orders = () => {
  const TABLE_HEADERS = [
-    'Номер машины',
-    'Время мойки',
-    'Дата заказа',
-    'Статус',
-    'Телефон',
-    'Расположение',
+    'carNumber',
+    'washingTime',
+    'orderDate',
+    'status',
+    'telephone',
+    'location',
  ];
  return (
    <Box p='8'>
      <Heading size='lg' mb='5'>
-        Заказы
+        {i18next.t('dry-wash.arm.order.title')}
      </Heading>
      <Table variant='simple' colorScheme='blackAlpha'>
        <Thead>
          <Tr>
            {TABLE_HEADERS.map((name, key) => (
-              <Th key={key}>{name}</Th>
+              <Th key={key}>
+                {i18next.t(`dry-wash.arm.order.table.header.${name}`)}
+              </Th>
            ))}
          </Tr>
        </Thead>
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@ -1,7 +1,7 @@
 import { Box, Button, Heading, VStack } from '@chakra-ui/react';
 import React from 'react';
 import { Divider } from '@chakra-ui/react';
-
+import i18next from 'i18next';
 const Sidebar = ({ onSelectPage }) => (
  <Box
    borderRight='1px solid black'
@ -12,7 +12,7 @@ const Sidebar = ({ onSelectPage }) => (
    pt='8'
  >
    <Heading color='green' size='lg' mb='5'>
-      Сухой мастер
+      {i18next.t(`dry-wash.arm.master.sideBar.title`)}
    </Heading>

    <VStack align='start' spacing='4'>
@ -23,7 +23,7 @@ const Sidebar = ({ onSelectPage }) => (
        colorScheme='green'
        variant='ghost'
      >
-        Заказы
+        {i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
      </Button>
      <Divider />
      <Button
@ -32,7 +32,7 @@ const Sidebar = ({ onSelectPage }) => (
        colorScheme='green'
        variant='ghost'
      >
-        Мастера
+        {i18next.t(`dry-wash.arm.master.sideBar.title.master`)}
      </Button>
      <Divider />
    </VStack>