search

src/hooks/useInput.ts

@@ -8,8 +8,12 @@ import { ChangeEvent, useState } from 'react';
 const useInput = (initialValue: string) => {
     const [value, setValue] = useState(initialValue);
 
-    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (event: ChangeEvent<HTMLInputElement> | string) => {
+        if (typeof event === 'string') {
+            setValue(event);
+        } else if (event?.target) {
             setValue(event.target.value);
+        }
     };
 
     return {

src/routes/private/real-boxes-create/DashboardCreateRealBox.tsx

@@ -20,6 +20,7 @@ import { useMyTranslation } from '@/hooks/useMyTranslation';
 import { FormValues, RealCreateBoxBodyType, UpdateRealBoxBodyType } from '@/data/real-box/real-box.model';
 import get from 'lodash.get';
 import useRequest from '@/hooks/useRequest';
+import useInput from '@/hooks/useInput';
 
 const StyledCreateBox = styled(Box)`
   .item-row {
@@ -48,6 +49,7 @@ interface Props {
 const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
     const { user, isAdmin: isAdminUser } = useAuthContext();
     const editMode = !!initialValues?.id;
+    const { value: keyword, onChange: handleKeyword, setValue: setKeyword } = useInput('');
     const t = useMyTranslation();
     const params = useSearchParams();
     const { push } = useMyNavigation();
@@ -65,6 +67,8 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
         finished: false,
     });
 
+    console.log(keyword, "keyword");
+
     const {
         register,
         control,
@@ -116,6 +120,7 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
         () =>
             box_requests.getAll({
                 partyId: partyId,
+                cargoId: keyword
             }),
         {
             selectData: (data) => data?.data?.data ?? [],
@@ -287,6 +292,7 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                                 <AsyncSelect
                                                     onChange={(newValue: any) => {
                                                         paketField.onChange(newValue?.value ?? '');
+                                                        handleKeyword(newValue?.label ?? '');
                                                     }}
                                                     defaultValue={
                                                         editMode && initialValues?.paketIds?.[index]
@@ -312,6 +318,7 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                                         try {
                                                             const res = await box_requests.getAll({
                                                                 partyId,
+                                                                cargoId: inputValue,
                                                             });
                                                             return res.data.data.data.map((box: any) => ({
                                                                 label: box.box_name || box.name || `Box ${box.id}`,
@@ -330,8 +337,6 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                             <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>
                                         )}
                                     </Box>
-                                    {fields.length > 1 && (
-                                        <Box className="item-row-field">
                                     <BaseIconButton
                                         size="small"
                                         colorVariant="icon-error"
@@ -341,24 +346,25 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                         <Close />
                                     </BaseIconButton>
                                 </Box>
-                                    )}
-                                </Box>
                             ))}
-                            <Stack alignItems="center" mt={2}>
                             <BaseButton
-                                    sx={{ backgroundColor: '#239D5F' }}
-                                    startIcon={<AddCircleRounded />}
+                                variant="outlined"
                                 onClick={appendPaket}
+                                startIcon={<AddCircleRounded />}
                             >
-                                    {t('add_more')}
+                                {t('add_packet')}
                             </BaseButton>
                         </Stack>
-                        </Stack>
                     </Grid>
                 </Grid>
 
-                <BaseButton type="submit" colorVariant="blue" loading={loading}>
-                    {editMode ? t('update') : t('create')}
+                <BaseButton
+                    variant="contained"
+                    type="submit"
+                    disabled={loading}
+                    fullWidth
+                >
+                    {editMode ? t('update_box') : t('create_box')}
                 </BaseButton>
             </Box>
         </StyledCreateBox>