Merge pull request #182 from HutechCJ/feat-api/form-implement

Feat api/form implement

apps/cms/@types/global.d.ts

@@ -1,10 +1,9 @@
-type AxiosRequestConfig = import('axios').AxiosRequestConfig;
-
-interface IAuthToken {
-  access_token?: string;
-  refresh_token?: string;
-  access_token_expires_in?: number;
-  access_token_expires_at?: number;
+declare global {
+    namespace NodeJS {
+        interface ProcessEnv {
+            GOOGLE_MAP_API_KEY: string
+        }
+    }
 }
 
-type Nullable<T> = T | null;
+export {}

apps/cms/@types/util.d.ts

@@ -0,0 +1,10 @@
+type AxiosRequestConfig = import('axios').AxiosRequestConfig
+
+interface IAuthToken {
+    access_token?: string
+    refresh_token?: string
+    access_token_expires_in?: number
+    access_token_expires_at?: number
+}
+
+type Nullable<T> = T | null

apps/cms/app/(dash)/orders/[orderId]/page.tsx

@@ -1,31 +1,213 @@
-'use client';
+/* eslint-disable react/no-children-prop */
+'use client'
 
-import { OrderStatus } from '@/features/order/order.types';
-import useGetOrder from '@/features/order/useGetOrder';
-import { Box, Stack, Button } from '@mui/material';
-import React from 'react';
+import { OrderStatus } from '@/features/order/order.types'
+import useGetOrder from '@/features/order/useGetOrder'
+import {
+    Box,
+    Stack,
+    Button,
+    Input,
+    InputLabel,
+    FormControl,
+    Container,
+    Paper,
+    Typography,
+    Stepper,
+} from '@mui/material'
+import LocalShippingIcon from '@mui/icons-material/LocalShipping'
+import { useForm } from '@tanstack/react-form'
+import React from 'react'
+import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'
+import _ from 'lodash'
+import useGetOrderHubsPath from '@/features/order/useGetOrderHubsPath'
+
+const containerStyle = {
+    width: '100%',
+    height: '400px',
+}
+
+const center = {
+    lat: -3.745,
+    lng: -38.523,
+}
 
 function Order({ params }: { params: { orderId: string } }) {
-  const { data: orderApiRes, isLoading, isError } = useGetOrder(params.orderId);
-
-  if (isLoading) {
-    return 'Loading...';
-  }
-
-  if (!orderApiRes || isError) {
-    return 'There is an error occurred!';
-  }
-
-  return (
-    <Box>
-      <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
-        <Button>Update</Button>
-        <Button>Delete</Button>
-      </Stack>
-      <div>{orderApiRes.data.id}</div>
-      <div>Status: {OrderStatus[orderApiRes.data.status]}</div>
-    </Box>
-  );
+    const {
+        data: orderApiRes,
+        isLoading: orderLoading,
+        isError: orderError,
+    } = useGetOrder(params.orderId)
+
+    const {
+        data: orderHubsPathApiRes,
+        isLoading: hubsPathLoading,
+        isError: hubsPathError,
+    } = useGetOrderHubsPath(params.orderId)
+
+    const form = useForm({
+        // Memoize your default values to prevent re-renders
+        defaultValues: {
+            ...orderApiRes?.data,
+        },
+        onSubmit: async (values) => {
+            // Do something with form data
+            console.log(values)
+        },
+    })
+
+    const { isLoaded } = useJsApiLoader({
+        id: 'google-map-script',
+        googleMapsApiKey: '',
+    })
+
+    const [map, setMap] = React.useState(null)
+
+    const onLoad = React.useCallback(function callback(map: any) {
+        // This is just an example of getting and using the map instance!!! don't just blindly copy!
+        const bounds = new window.google.maps.LatLngBounds(center)
+        map.fitBounds(bounds)
+
+        setMap(map)
+    }, [])
+
+    const onUnmount = React.useCallback(function callback(map: any) {
+        setMap(null)
+    }, [])
+
+    if (orderLoading) {
+        return 'Loading...'
+    }
+
+    if (!orderApiRes || orderError) {
+        return 'There is an error occurred!'
+    }
+
+    return (
+        <Container maxWidth="xl" sx={{ '& > :not(style)': { m: 2 } }}>
+            {
+                // isLoaded && (
+                //     <GoogleMap
+                //         mapContainerStyle={containerStyle}
+                //         center={center}
+                //         zoom={10}
+                //         onLoad={onLoad}
+                //         onUnmount={onUnmount}
+                //     >
+                //         {/* Child components, such as markers, info windows, etc. */}
+                //         <Box
+                //             sx={{
+                //                 zIndex: 99,
+                //             }}
+                //         >
+                //             <Typography variant="h1" component="h1">
+                //                 Hello
+                //             </Typography>
+                //         </Box>
+                //     </GoogleMap>
+                // )
+            }
+            <Box sx={{
+                width: "100%"
+            }}>
+                {orderHubsPathApiRes && (
+                    <iframe
+                        width="100%"
+                        height="500"
+                        frameBorder="0"
+                        style={{
+                            border: 0,
+                        }}
+                        allowFullScreen
+                        referrerPolicy="no-referrer-when-downgrade"
+                        src={`https://www.google.com/maps/embed/v1/directions?${new URLSearchParams(
+                            {
+                                region: 'VN',
+                                key: `AIzaSyDAW0v16XSZI3GdNte36gFHDynsed4-cz0`,
+                                origin: `${
+                                    orderHubsPathApiRes.data.items[0].location
+                                        ?.latitude ?? 0
+                                },${
+                                    orderHubsPathApiRes.data.items[0].location
+                                        ?.longitude ?? 0
+                                }`,
+                                destination: `${
+                                    orderHubsPathApiRes.data.items[1].location
+                                        ?.latitude ?? 0
+                                },${
+                                    orderHubsPathApiRes.data.items[1].location
+                                        ?.longitude ?? 0
+                                }`,
+                            }
+                        )}`}
+                    ></iframe>
+                )}
+            </Box>
+            <form.Provider>
+                <Paper
+                    sx={{
+                        paddingX: 4,
+                        paddingY: 2,
+                        width: '100%',
+                    }}
+                >
+                    {Object.keys(orderApiRes.data).map((k) => (
+                        <Box
+                            key={`formField_${k}`}
+                            sx={{
+                                marginY: 2,
+                            }}
+                        >
+                            <form.Field
+                                name={k}
+                                onChange={(value: any) =>
+                                    !value
+                                        ? 'A first name is required'
+                                        : value.length < 3
+                                        ? 'First name must be at least 3 characters'
+                                        : undefined
+                                }
+                                onChangeAsyncDebounceMs={500}
+                                onChangeAsync={async (value: any) => {
+                                    await new Promise((resolve) =>
+                                        setTimeout(resolve, 1000)
+                                    )
+                                    return (
+                                        value.includes('error') &&
+                                        'No "error" allowed in first name'
+                                    )
+                                }}
+                                children={(field) => {
+                                    return (
+                                        <FormControl fullWidth>
+                                            <InputLabel htmlFor={field.name}>
+                                                {_.startCase(field.name)}
+                                            </InputLabel>
+                                            <Input
+                                                name={field.name}
+                                                value={field.state.value as any}
+                                                onBlur={field.handleBlur}
+                                                onChange={(e) =>
+                                                    field.handleChange(
+                                                        e.target.value
+                                                    )
+                                                }
+                                            />
+                                            {/* <FieldInfo field={field} /> */}
+                                        </FormControl>
+                                    )
+                                }}
+                            />
+                        </Box>
+                    ))}
+                </Paper>
+                <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
+                    <Button>Update</Button>
+                    <Button>Delete</Button>
+                </Stack>
+            </form.Provider>
+        </Container>
+    )
 }
 
-export default Order;
+export default Order

apps/cms/app/api/maps/directions/route.ts

@@ -0,0 +1,12 @@
+import { NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+    request.nextUrl.searchParams.append('key', process.env.GOOGLE_MAP_API_KEY)
+    console.log(request.nextUrl.searchParams)
+    const url = new URL(
+        `https://www.google.com/maps/embed/v1/directions?${request.nextUrl.searchParams}`
+    )
+    const res = await fetch(url)
+
+    return res
+}

apps/cms/common/utils/string.ts

@@ -1,5 +1,5 @@
 export function getPagingQueryString(options: Partial<PagingOptions>): string {
-  return `?${Object.entries(options)
-    .map((value) => `${value[0]}=${value[1]}`)
-    .join('&')}`;
+    return `?${Object.entries(options)
+        .map((value) => `${value[0]}=${value[1]}`)
+        .join('&')}`
 }

apps/cms/features/example/example.service.ts

@@ -19,7 +19,7 @@ class ExampleApiService extends HttpService {
   }
 
   updateExample(id: string, data: any) {
-    return this.put<Example>(`/examples/${id}`, data);
+    return this.put(`/examples/${id}`, data);
   }
 
   deleteExample(id: string) {

apps/cms/features/order/order.service.ts

@@ -3,6 +3,7 @@
 import { getPagingQueryString } from '@/common/utils/string';
 import { Order } from './order.types';
 import HttpService from '@/common/services/http.service';
+import { Hub } from '../hub/hub.types';
 
 class OrderApiService extends HttpService {
   getOrders(options?: Partial<PagingOptions>) {
@@ -13,6 +14,10 @@ class OrderApiService extends HttpService {
   getOrderById(id: string) {
     return this.get<Order>(`/orders/${id}`);
   }
+
+  getOrderHubPathById(id: string) {
+    return this.get<Paging<Hub>>(`/orders/${id}/hubs/path`);
+  }
 }
 
 const orderApi = new OrderApiService();

apps/cms/features/order/useGetOrderHubsPath.ts

@@ -0,0 +1,13 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import orderApi from './order.service';
+
+const useGetOrderHubsPath = (id: string) => {
+  const queryData = useQuery([`users/get/${id}/hubs/path`], {
+    queryFn: () => orderApi.getOrderHubPathById(id),
+    keepPreviousData: true,
+  });
+
+  return queryData;
+};
+export default useGetOrderHubsPath;

apps/cms/next.config.js

@@ -37,11 +37,11 @@ const nextConfig = {
       },
       {
         source: '/api-test/:path*',
-        destination: 'https://profio-sv1.azurewebsites.net/api/v1/:path*',
+        destination: 'https://profioapp.azurewebsites.net/api/v1/:path*',
       },
       {
         source: '/api-dev/:path*',
-        destination: 'https://profio-sv1.azurewebsites.net/api/v1/:path*',
+        destination: 'https://profioapp.azurewebsites.net/api/v1/:path*',
       },
     ];
   },