feat(variable-input): add create and update

src/components/shared/Form/ButtonActions.tsx

@@ -0,0 +1,16 @@
+import { Row, Space } from "antd";
+import React from "react";
+
+interface IProps {
+    actions: React.ReactNode[];
+}
+
+const ButtonAction: React.FC<IProps> = ({ actions }) => {
+    return (
+        <Row justify="end">
+            <Space>{actions.map((action) => action)}</Space>
+        </Row>
+    );
+};
+
+export default ButtonAction;

src/helpers/route.ts

@@ -1,7 +1,7 @@
-import { Routes } from "@/routes/routes";
+import { EndpointApi, Routes } from "@/routes/routes";
 
 export const parsingRoute = (
-    url: Routes,
+    url: Routes | EndpointApi,
     propsParams?: Record<string, string | number>
 ): string => {
     let newUrl: string = url;

src/interfaces/requests/VariableInput/index.ts

@@ -0,0 +1,3 @@
+export interface IVariableInputStoreUpdateRequest {
+    name: string;
+}

src/pages/VariableInput/Form.tsx

@@ -1,15 +1,68 @@
 import { Breadcrumbs } from "@/common/breadcrumb";
+import Button from "@/components/shared/Button/Button";
+import ButtonAction from "@/components/shared/Form/ButtonActions";
+import LoaderCenter from "@/components/shared/Loader/LoaderCenter";
+import { getRequiredMessage } from "@/helpers/form";
+import { modalConfirm } from "@/helpers/modal-confirm";
+import { prompNotification } from "@/helpers/notification";
+import { useFormUtility } from "@/hooks/useFormUtility";
+import { IVariableInputStoreUpdateRequest } from "@/interfaces/requests/VariableInput";
 import MainLayout from "@/layouts/MainLayout";
-import { Card } from "antd";
+import { Routes } from "@/routes/routes";
+import {
+    useVariableInputMutationStore,
+    useVariableInputMutationUpdate,
+} from "@/services/mutation/VariableInput";
+import { useVariableInputQueryDetail } from "@/services/query/VariableInput";
+import { Card, Form, Input } from "antd";
 import React from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
+import * as yup from "yup";
 
 interface IProps {
     editPage?: boolean;
 }
 
+const schema: yup.ObjectSchema<IVariableInputStoreUpdateRequest> = yup.object({
+    name: yup.string().required(getRequiredMessage("Name")),
+});
+
 const VariableInputForm: React.FC<IProps> = ({ editPage = false }) => {
     const { id } = useParams();
+    const query = useVariableInputQueryDetail(id);
+
+    const { form, yupSync } = useFormUtility({ schema });
+    const navigate = useNavigate();
+
+    const mutationUpdate = useVariableInputMutationUpdate(id, {
+        onSuccess: ({ message }) => {
+            prompNotification({ method: "success", message });
+            navigate(Routes.VariableInputIndex);
+        },
+        onError: (error) =>
+            prompNotification({ message: error.message, method: "error" }),
+    });
+    const mutationStore = useVariableInputMutationStore({
+        onSuccess: ({ message }) => {
+            prompNotification({ method: "success", message });
+            navigate(Routes.VariableInputIndex);
+        },
+        onError: (error) =>
+            prompNotification({ message: error.message, method: "error" }),
+    });
+
+    const onFinish = () => {
+        modalConfirm({
+            onOk: async () => {
+                await form.validateFields();
+                const payload = form.getFieldsValue();
+                editPage
+                    ? mutationUpdate.mutate(payload)
+                    : mutationStore.mutate(payload);
+            },
+        });
+    };
+
     return (
         <MainLayout
             title="Variable Input"
@@ -19,7 +72,31 @@ const VariableInputForm: React.FC<IProps> = ({ editPage = false }) => {
                     : Breadcrumbs.VariableInput.Create()
             }
         >
-            <Card></Card>
+            <Card>
+                {query.isLoading || query.isFetching ? (
+                    <LoaderCenter />
+                ) : (
+                    <Form
+                        form={form}
+                        onFinish={onFinish}
+                        initialValues={{ ...query?.data?.data }}
+                    >
+                        <Form.Item name="name" label="Name" rules={[yupSync]}>
+                            <Input placeholder="Input name" type="text" />
+                        </Form.Item>
+                        <ButtonAction
+                            actions={[
+                                <Button href={Routes.VariableInputIndex}>
+                                    Cancel
+                                </Button>,
+                                <Button type="primary" htmlType="submit">
+                                    Save
+                                </Button>,
+                            ]}
+                        />
+                    </Form>
+                )}
+            </Card>
         </MainLayout>
     );
 };

src/pages/VariableInput/index.tsx

@@ -26,12 +26,6 @@ const VariableInputIndex: React.FC = () => {
             render: (id) => (
                 <RowActionButtons
                     actions={[
-                        {
-                            type: "detail",
-                            href: parsingRoute(Routes.VariableInputDetail, {
-                                id,
-                            }),
-                        },
                         {
                             type: "edit",
                             href: parsingRoute(Routes.VariableInputEdit, {
@@ -56,7 +50,7 @@ const VariableInputIndex: React.FC = () => {
                     </Button>,
                 ]}
             >
-                {query.isLoading ? (
+                {query.isLoading || query.isFetching ? (
                     <LoaderCenter />
                 ) : (
                     <Table

src/services/apis/VariableInput/index.ts

@@ -1,6 +1,8 @@
 import { AxiosError } from "axios";
 import { axiosAuthInstance } from "..";
 import { EndpointApi } from "@/routes/routes";
+import { parsingRoute } from "@/helpers/route";
+import { IVariableInputStoreUpdateRequest } from "@/interfaces/requests/VariableInput";
 
 export const getVariableInputIndex = async () => {
     try {
@@ -12,3 +14,43 @@ export const getVariableInputIndex = async () => {
         throw (error as AxiosError).response.data;
     }
 };
+
+export const getVariableInputDetail = async (id) => {
+    try {
+        const response = await axiosAuthInstance.get(
+            parsingRoute(EndpointApi.VariableInputDetail, { id })
+        );
+        return response.data;
+    } catch (error) {
+        throw (error as AxiosError).response.data;
+    }
+};
+
+export const variableInputStore = async (
+    payload: IVariableInputStoreUpdateRequest
+) => {
+    try {
+        const response = await axiosAuthInstance.post(
+            EndpointApi.VariableInputStore,
+            payload
+        );
+        return response.data;
+    } catch (error) {
+        throw (error as AxiosError).response.data;
+    }
+};
+
+export const variableInputUpdate = async (
+    id,
+    payload: IVariableInputStoreUpdateRequest
+) => {
+    try {
+        const response = await axiosAuthInstance.put(
+            parsingRoute(EndpointApi.VariableInputUpdate, { id }),
+            payload
+        );
+        return response.data;
+    } catch (error) {
+        throw (error as AxiosError).response.data;
+    }
+};

src/services/mutation/VariableInput/index.ts

@@ -0,0 +1,36 @@
+import { IVariableInputStoreUpdateRequest } from "@/interfaces/requests/VariableInput";
+import { IBaseResponse } from "@/interfaces/responses/base";
+import {
+    variableInputStore,
+    variableInputUpdate,
+} from "@/services/apis/VariableInput";
+import { UseMutationOptions, useMutation } from "@tanstack/react-query";
+
+export const useVariableInputMutationStore = (
+    options?: UseMutationOptions<
+        IBaseResponse<unknown>,
+        IBaseResponse<unknown>,
+        IVariableInputStoreUpdateRequest
+    >
+) => {
+    return useMutation({
+        mutationKey: ["store-variable-input"],
+        mutationFn: (payload) => variableInputStore(payload),
+        ...options,
+    });
+};
+
+export const useVariableInputMutationUpdate = (
+    id,
+    options?: UseMutationOptions<
+        IBaseResponse<unknown>,
+        IBaseResponse<unknown>,
+        IVariableInputStoreUpdateRequest
+    >
+) => {
+    return useMutation({
+        mutationKey: ["update-variable-input", id],
+        mutationFn: (payload) => variableInputUpdate(id, payload),
+        ...options,
+    });
+};

src/services/query/VariableInput/index.ts

@@ -1,6 +1,12 @@
-import { IVariableInputIndexResponse } from "@/interfaces/responses/VariableInput";
+import {
+    IVariableInputDetailResponse,
+    IVariableInputIndexResponse,
+} from "@/interfaces/responses/VariableInput";
 import { IBaseResponse } from "@/interfaces/responses/base";
-import { getVariableInputIndex } from "@/services/apis/VariableInput";
+import {
+    getVariableInputDetail,
+    getVariableInputIndex,
+} from "@/services/apis/VariableInput";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 
 export const useVariableInputQueryIndex = (
@@ -16,3 +22,20 @@ export const useVariableInputQueryIndex = (
         ...options,
     });
 };
+
+export const useVariableInputQueryDetail = (
+    id,
+    options?: UseQueryOptions<
+        IVariableInputDetailResponse,
+        IBaseResponse<unknown>,
+        IVariableInputDetailResponse
+    >
+) => {
+    return useQuery({
+        queryKey: ["variable-input-index", id],
+        queryFn: () => getVariableInputDetail(id),
+        enabled: !!id,
+        refetchOnMount: true,
+        ...options,
+    });
+};

tsconfig.json

@@ -20,6 +20,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "strictNullChecks": false,
+    "noImplicitAny": false,
 
     /* Path */
     "baseUrl": "./src",