feat: add update status and masters (#67)

src/components/OrderItem/OrderItem.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 import { Td, Tr, Link, Select } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 
 import { MasterProps } from '../MasterItem/MasterItem';
 import { getTimeSlot } from '../../lib';
+import { armService } from '../../api/arm';
 
 const statuses = [
   'pending' as const,
@@ -28,6 +29,7 @@ export type OrderProps = {
   master: MasterProps;
   notes: '';
   allMasters: MasterProps[];
+  id: string;
 };
 
 type Status = (typeof statuses)[number];
@@ -50,7 +52,10 @@ const OrderItem = ({
   location,
   master,
   allMasters,
+  id,
 }: OrderProps) => {
+  const { updateOrders } = armService();
+
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.arm.order',
   });
@@ -59,15 +64,37 @@ const OrderItem = ({
   const bgColor = statusColors[statusSelect];
   const [masterSelect, setMaster] = useState(master?.name);
 
+  const handelChangeMasters = (e: ChangeEvent<HTMLSelectElement>) => {
+    const masterName = e.target.value;
+    const selectedMaster = allMasters.find(
+      (master) => master.name === masterName,
+    );
+
+    if (selectedMaster) {
+      setMaster(masterName);
+      updateOrders({ id, masterId: selectedMaster.id });
+    } else {
+      console.error('Master not found');
+    }
+  };
+
+  const handeChangeStatus = (e: ChangeEvent<HTMLSelectElement>) => {
+    const status = e.target.value;
+    updateOrders({ id, status });
+    setStatus(e.target.value as OrderProps['status']);
+  };
+
   return (
     <Tr>
       <Td>{carNumber}</Td>
-      <Td>{getTimeSlot(startWashTime, endWashTime)}</Td>
-      <Td>{dayjs(orderDate).format('DD.MM.YYYY')}</Td>
+      <Td>
+        {dayjs(orderDate).format('DD.MM.YYYY')} <br />
+        {getTimeSlot(startWashTime, endWashTime)}
+      </Td>
       <Td>
         <Select
           value={statusSelect}
-          onChange={(e) => setStatus(e.target.value as OrderProps['status'])}
+          onChange={handeChangeStatus}
           placeholder={t(`status.placeholder`)}
           bg={bgColor}
         >
@@ -81,8 +108,8 @@ const OrderItem = ({
       <Td>
         <Select
           value={masterSelect}
-          onChange={(e) => setMaster(e.target.value as OrderProps['status'])}
-          placeholder={t(`status.placeholder`)}
+          onChange={handelChangeMasters}
+          placeholder={t(`master.placeholder`)}
         >
           {allMasters.map((item) => (
             <option key={item.id} value={item.name}>

src/components/Orders/Orders.tsx

@@ -23,7 +23,6 @@ import { MasterProps } from '../MasterItem/MasterItem';
 
 const TABLE_HEADERS = [
   'carNumber' as const,
-  'washingTime' as const,
   'orderDate' as const,
   'status' as const,
   'masters' as const,