Incluindo modal de detalhes

Author: DanMarzo

backend/src/services/order/DetailOrderService.ts

@@ -6,7 +6,7 @@ interface OrderRequest {
 
 class DetailOrderService {
     async execute({ order_id }: OrderRequest) {
-        const orders = await prismaClient.orderItem.findMany({
+        const orders = await prismaClient.orderItem.findFirst({
             where: {
                 order_id: order_id,
             },

front-end/src/features/dashboard/dashboard.schema.ts

@@ -0,0 +1,10 @@
+type StateDashboard = {
+    orderId?: string
+}
+
+const initialStateDashboard: StateDashboard = {
+    orderId: undefined
+}
+
+export { initialStateDashboard }
+export type { StateDashboard }

front-end/src/features/dashboard/dashboard.selector.ts

@@ -0,0 +1,11 @@
+import { createSelector } from "@reduxjs/toolkit";
+import { State } from "../../types";
+
+const dashboard = (state: State) => state.dashboard;
+
+const selectOrderId = createSelector(
+    dashboard,
+    (feature) => feature.orderId
+);
+
+export { selectOrderId };

front-end/src/features/dashboard/dashboard.service.ts

@@ -1,7 +1,7 @@
 import { httpToken } from "../../infra/axios";
-import { Orders } from "../orders/orders.schema";
+import { Order, OrderDetail } from "../orders/orders.schema";
 
-const obterOrdersServices = async (): Promise<Orders[]> => {
+const obterOrdersServices = async (): Promise<Order[]> => {
     try {
         const response = await httpToken.get("orders")
         return response.data
@@ -10,4 +10,15 @@ const obterOrdersServices = async (): Promise<Orders[]> => {
     }
 }
 
-export { obterOrdersServices }
+const obterOrderDetailServices = async (order_id: string): Promise<OrderDetail> => {
+    try {
+        const response = await httpToken.get("order/details", { params: { order_id } })
+        console.log(response);
+
+        return response.data
+    } catch (error) {
+        throw new Error("Não foi possivel concluir a operacao");
+    }
+}
+
+export { obterOrdersServices, obterOrderDetailServices }

front-end/src/features/dashboard/dashboard.state.ts

@@ -0,0 +1,14 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { initialStateDashboard } from "./dashboard.schema";
+
+const dashboard = createSlice({
+    name: "auth",
+    initialState: initialStateDashboard,
+    reducers: {
+        setOrderId(state, action: PayloadAction<string | undefined>) {
+            state.orderId = action.payload;
+        }
+    }
+})
+
+export const { actions: dashboardAction, reducer: dashboardReducer } = dashboard

front-end/src/features/dashboard/index.tsx

@@ -6,35 +6,50 @@ import { useMutation } from "@tanstack/react-query";
 import { obterOrdersServices } from "./dashboard.service";
 import { useEffect } from "react";
 import { Article, Section } from "../../shared/components/Article";
+import { useDispatch } from "react-redux";
+import { dashboardAction } from "./dashboard.state";
+import ModalDetalhes from "./modalDetails";
 
 const Dashboard = () => {
   const obterOrders = useMutation({ mutationFn: () => obterOrdersServices() });
+  const dispatch = useDispatch();
+
   useEffect(() => {
     obterOrders.mutate();
   }, []);
 
+  const handleSelectOrderId = (orderId: string) =>
+    dispatch(dashboardAction.setOrderId(orderId));
   return (
-    <Main>
-      <TitleStyled>Painel</TitleStyled>
-      <SubTitle>
-        Últimos pedidos{" "}
-        <Tooltip title="Recarregar">
-          <Button
-            onClick={() => obterOrders.mutate()}
-            type="text"
-            icon={<IconReloadOutlined />}
-          />
-        </Tooltip>
-      </SubTitle>
-      <Spin spinning={obterOrders.isPending}>
-        <Article>
-          {obterOrders.data &&
-            obterOrders.data.map((item) => (
-              <Section key={item.id}>Mesa: {item.table}</Section>
-            ))}
-        </Article>
-      </Spin>
-    </Main>
+    <>
+      <Main>
+        <TitleStyled>Painel</TitleStyled>
+        <SubTitle>
+          Últimos pedidos{" "}
+          <Tooltip title="Recarregar">
+            <Button
+              onClick={() => obterOrders.mutate()}
+              type="text"
+              icon={<IconReloadOutlined />}
+            />
+          </Tooltip>
+        </SubTitle>
+        <Spin spinning={obterOrders.isPending}>
+          <Article>
+            {obterOrders.data &&
+              obterOrders.data.map((item) => (
+                <Section
+                  onClick={() => handleSelectOrderId(item.id)}
+                  key={item.id}
+                >
+                  Mesa: {item.table}
+                </Section>
+              ))}
+          </Article>
+        </Spin>
+      </Main>
+      <ModalDetalhes />
+    </>
   );
 };
 

front-end/src/features/dashboard/modalDetails/index.tsx

@@ -0,0 +1,46 @@
+import { Modal, ModalProps, Spin } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import { selectOrderId } from "../dashboard.selector";
+import { dashboardAction } from "../dashboard.state";
+import { useMutation } from "@tanstack/react-query";
+import { obterOrderDetailServices } from "../dashboard.service";
+import { useEffect } from "react";
+
+interface Props extends ModalProps {}
+
+const ModalDetalhes: React.FC<Props> = ({ ...props }) => {
+  const orderIdStore = useSelector(selectOrderId);
+
+  const dispatch = useDispatch();
+  const handleCancelDetails = () =>
+    dispatch(dashboardAction.setOrderId(undefined));
+
+  const obterOrderDetails = useMutation({
+    mutationFn: (orderId: string) => obterOrderDetailServices(orderId),
+  });
+
+  useEffect(() => {
+    if (orderIdStore) {
+      obterOrderDetails.mutate(orderIdStore);
+    }
+  }, []);
+
+  return (
+    <>
+      {orderIdStore && (
+        <Modal
+          onCancel={handleCancelDetails}
+          open={orderIdStore != undefined}
+          title="Detalhes"
+          {...props}
+        >
+          <Spin spinning={obterOrderDetails.isPending}>
+            {obterOrderDetails.data && <></>}
+          </Spin>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default ModalDetalhes;

front-end/src/features/orders/orders.schema.ts

@@ -1,8 +1,22 @@
-interface Orders{
+interface Order {
     id: string,
     name: string,
     table: number,
     status: boolean
+    draft?: boolean,
+    create_at?: Date
+    update_at?: Date
 }
+interface OrderDetail {
+    id: string;
+    amount: number;
+    create_at: Date;
+    update_at: Date;
+    order_id: string;
+    product_id: string;
+    order: Order;
+    product: Product
+}
+
 
-export type{Orders}
+export type { Order, OrderDetail }

front-end/src/features/product/product.schema.ts

@@ -5,4 +5,18 @@ interface NewProduct {
     banner: string;
     category_id: string;
     file: any;
-}
+}
+
+
+
+
+interface Product {
+    id: string;
+    name: string
+    price: string
+    description: string
+    banner: string
+    create_at: Date
+    update_at: Date
+    category_id: string
+}

front-end/src/features/reducers.ts

@@ -1,6 +1,8 @@
 import { combineReducers } from "redux";
 import { authPersisted } from "../infra/config-redux/redux-persist";
+import { dashboardReducer } from "./dashboard/dashboard.state";
 
 export default combineReducers({
-    auth: authPersisted
+    auth: authPersisted,
+    dashboard: dashboardReducer
 })

front-end/src/shared/components/Article/index.ts

@@ -12,6 +12,7 @@ const Section = styled.section`
     background-color: ${x => x.theme.colors.dark900};
     border-radius: .3rem;
     border-left: 7px solid ${x => x.theme.colors.green900};
+    cursor: pointer;
 `;
 
 export { Section, Article }

front-end/src/types.ts

@@ -1,5 +1,7 @@
 import { StateAuth } from "./features/auth/auth.schema";
+import { StateDashboard } from "./features/dashboard/dashboard.schema";
 
 export interface State {
   auth: StateAuth;
+  dashboard: StateDashboard;
 }