From 14427c2d7f79ab927c80d0a7ba1b0ae4d213be2a Mon Sep 17 00:00:00 2001 From: adibwp Date: Mon, 23 Oct 2023 17:10:55 +0700 Subject: [PATCH] integrate data api to detail table --- frontend/dashboard/src/@types/corporates.ts | 2 +- .../Corporates/CorporateTabNavigations.tsx | 2 +- .../pages/Corporates/Formularium/Index.tsx | 8 +- .../Formularium/New/CategoryDetail.tsx | 72 ++++-- .../Formularium/New/CategoryRow.tsx | 74 ++++-- .../Corporates/Formularium/New/CreateForm.tsx | 4 +- .../pages/Corporates/Formularium/New/Form.tsx | 35 ++- .../Corporates/Formularium/New/History.tsx | 218 ++++++++++++++++++ .../Corporates/Formularium/New/InfoDetail.tsx | 48 ++++ .../pages/Corporates/Formularium/New/List.tsx | 160 +++++++------ .../pages/Corporates/Formularium/New/Types.ts | 57 +++++ .../dashboard/src/pages/Corporates/Index.tsx | 6 +- frontend/dashboard/src/routes/index.tsx | 9 +- 13 files changed, 564 insertions(+), 131 deletions(-) create mode 100644 frontend/dashboard/src/pages/Corporates/Formularium/New/History.tsx create mode 100644 frontend/dashboard/src/pages/Corporates/Formularium/New/InfoDetail.tsx create mode 100644 frontend/dashboard/src/pages/Corporates/Formularium/New/Types.ts diff --git a/frontend/dashboard/src/@types/corporates.ts b/frontend/dashboard/src/@types/corporates.ts index 8d39037c..77a11e1d 100644 --- a/frontend/dashboard/src/@types/corporates.ts +++ b/frontend/dashboard/src/@types/corporates.ts @@ -208,4 +208,4 @@ export type MasterExclusion = { export type CorporateId = { corporate_id?: number -} +} \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx b/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx index 6e3835c1..fa838add 100644 --- a/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx +++ b/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx @@ -61,7 +61,7 @@ export default function CorporateTabNavigations({ position }: Props) { label: 'Hospital', }, { - path: 'formularium', + path: 'formulariums', label: 'Formularium', }, { diff --git a/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx b/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx index 3adb54e4..29403ad5 100644 --- a/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx @@ -1,4 +1,4 @@ -import { Card, Grid } from '@mui/material'; +import { Card, Grid, Container } from '@mui/material'; import { useParams } from 'react-router-dom'; import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs'; import Page from '../../../components/Page'; @@ -24,9 +24,9 @@ export default function CorporateFormularium() { }, [configuredCorporateContext]); return ( - + diff --git a/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx b/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx index f1715ca1..3062f7c0 100644 --- a/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx +++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx @@ -1,10 +1,7 @@ // @mui import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material'; -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; -import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; -import AddIcon from '@mui/icons-material/Add'; -import UploadIcon from '@mui/icons-material/Upload'; -import CancelIcon from '@mui/icons-material/Cancel'; +import { LoadingButton } from "@mui/lab"; +import { CachedOutlined, FindInPageOutlined } from '@mui/icons-material'; // hooks import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react'; import useSettings from '../../../../hooks/useSettings'; @@ -14,26 +11,59 @@ import axios from '../../../../utils/axios'; import { LaravelPaginatedData } from '../../../../@types/paginated-data'; import { Icd } from '../../../../@types/diagnosis'; import BasePagination from '../../../../components/BasePagination'; +import Label from '@/components/Label'; +import TableMoreMenu from '@/components/table/TableMoreMenu'; +import InfoDetail from "./InfoDetail"; +import { DetailCorpFormularium } from "./Types"; +import DialogUpdateStatus from '../../DialogUpdateStatus'; -export default function CategoryDetail() { - +export default function CategoryDetail(props: DetailCorpFormularium) { + const [open, setOpen] = React.useState(false); + const [isDialogOpen, setDialogOpen] = useState(false) return ( - - - - + + - Code - ATC Code - Name - Category - UOM - - -
- - + + {props.code} + {props.name} + + + + + + setOpen(!open)}> + + Detail + + setDialogOpen(!isDialogOpen)}> + + Update Status + + + } /> + + + + + + + + + + + + {/* TODO: dialog update status */} + {/* */} + ) } \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryRow.tsx b/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryRow.tsx index fe7046f2..b1daccf8 100644 --- a/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryRow.tsx +++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryRow.tsx @@ -1,38 +1,45 @@ import TableMoreMenu from "@/components/table/TableMoreMenu" import { FindInPageOutlined } from "@mui/icons-material" import HistoryIcon from '@mui/icons-material/History'; -import { Collapse, MenuItem, TableCell, TableRow } from "@mui/material" -import React from "react"; +import { Collapse, Grid, MenuItem, Paper, Table, TableCell, TableContainer, TableHead, TableRow } from "@mui/material" +import React, { useEffect } from "react"; import CategoryDetail from "./CategoryDetail"; +import { CorporateFormulariumList, DetailCorpFormularium, RespDetailFormularium } from "./Types"; +import axios from "@/utils/axios"; +import { useNavigate, useParams } from "react-router-dom"; -interface RowProps { - id: number - category: string - description: string -} - -interface temporaryData { - id: number - category: string - description: string -} - -const CategoryRow: React.FC = (props) => { +const CategoryRow: React.FC = (props) => { const [open, setOpen] = React.useState(false); + const { corporate_id } = useParams(); + const navigate = useNavigate(); + + const [dataTableIsLoading, setDataTableLoading] = React.useState(true); + const [dataTableData, setDataTableData] = React.useState(null) + const [dataRow, setDataRow] = React.useState(null) + + const loadDataTableData = async (id: number) => { + setDataTableLoading(true); + const resp = await axios.get(`/corporates/${corporate_id}/formulariums/${id}`); + console.log(resp.data); + setDataTableLoading(false); + setDataTableData(resp.data); + setDataRow(resp.data.data); + } return ( + {props.category} {props.description} - + - setOpen(!open)}> + { loadDataTableData(props.id); setOpen(!open)}}> Detail - ""}> + navigate(`/corporates/${corporate_id}/formulariums/${props.id}/history`)}> History @@ -40,10 +47,33 @@ const CategoryRow: React.FC = (props) => { } /> - - - - + + + + + + + + + Code + Name + Status + + + + {dataTableIsLoading ? ( + Loading + ) : dataTableData?.data.length == 0 ? ( + No Data + ) : ( + dataRow?.map(item => ( + + )) + )} +
+ + + ) diff --git a/frontend/dashboard/src/pages/Corporates/Formularium/New/CreateForm.tsx b/frontend/dashboard/src/pages/Corporates/Formularium/New/CreateForm.tsx index 7307d42f..28199ab3 100644 --- a/frontend/dashboard/src/pages/Corporates/Formularium/New/CreateForm.tsx +++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/CreateForm.tsx @@ -39,11 +39,11 @@ export default function CorporateFormulariumCreate() { }, { name: 'Formularium', - href: '/corporates/' + corporate_id + '/formularium', + href: '/corporates/' + corporate_id + '/formulariums', }, { name: 'Create Formularium', - href: '/corporates/' + corporate_id + '/formularium/create', + href: '/corporates/' + corporate_id + '/formulariums/create', }, ]} /> diff --git a/frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx b/frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx index ec58905a..2545ea66 100644 --- a/frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx +++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx @@ -2,17 +2,22 @@ import { useForm } from "react-hook-form"; import { FormProvider, RHFSelect } from "../../../../components/hook-form"; import { Button, Card, Grid, Typography } from "@mui/material"; import { Stack, fontWeight } from "@mui/system"; +import { useNavigate, useParams } from "react-router"; +import React, { useEffect } from "react"; +import { DetailCorpFormularium } from "./Types"; +import axios from "@/utils/axios"; export default function CorporateFormulariumCreateForm() { - + const navigate = useNavigate(); + const { corporate_id } = useParams(); const methods = useForm([ // methods Logic?? ]); const onSubmit = async (data: any) => { // logic onSubmit - } + }; const { handleSubmit, @@ -21,17 +26,38 @@ export default function CorporateFormulariumCreateForm() { // Data Dummy const options = ["Dummy 1", "Dummy 2", "Dummy 3"]; + const [dataDropdownIsLoading, setDataDropdownLoading] = React.useState(true); + const [dataDropdownData, setDataDropdownData] = React.useState(null) + const loadDataDropdown = async () => { + setDataDropdownLoading(true); + const resp = await axios.get(`corporates/${corporate_id}/formulariums/create`); + console.log(resp.data); + setDataDropdownLoading(false); + + setDataDropdownData(resp.data.data) + }; + + useEffect(() => { + loadDataDropdown(); + }, []) + return ( - Category* + Formularium Name* - {options.map((option, index) => ( + {/* {options.map((option, index) => ( + ))} */} + ))} @@ -40,6 +66,7 @@ export default function CorporateFormulariumCreateForm() { ) } - const applyFilter = async (searchFilter: string) => { - // applyFilter logic - } - - const handlePageChange = (event: ChangeEvent, value: number) => { - // pageChange logic - } - const headStyle = { fontWeight: 'bold', }; - - // Dummy Default Data - const [dataTableData, setDataTableData] = useState({ - current_page: 1, - data: [], - path: "", - first_page_url: "", - last_page: 1, - last_page_url: "", - next_page_url: "", - prev_page_url: "", - per_page: 10, - from: 0, - to: 0, - total: 0 - }); - - // Temporary Data - const temporaryData = [ - { - id: 1, - category: 'Category 1', - description: 'This is the description for Category 1', - }, - { - id: 2, - category: 'Category 2', - description: 'This is the description for Category 2', - }, - { - id: 3, - category: 'Category 3', - description: 'This is the description for Category 3', - }, - { - id: 4, - category: 'Category 4', - description: 'This is the description for Category 4', - }, - ]; return( @@ -134,19 +138,37 @@ export default function List() { {/* The Main Table */} - + - Category + + Formularium Name Description - + - - - {/* */} - {temporaryData.map(row => ( - - ))} - + + {dataTableIsLoading ? ( + + + + Loading + + + + ) : dataTableData.data.length == 0 ? ( + + + + No Data + + + + ) : ( + + {dataRow?.map(item => ( + + ))} + + )}
diff --git a/frontend/dashboard/src/pages/Corporates/Formularium/New/Types.ts b/frontend/dashboard/src/pages/Corporates/Formularium/New/Types.ts new file mode 100644 index 00000000..6ff00159 --- /dev/null +++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/Types.ts @@ -0,0 +1,57 @@ +export type CorporateFormularium = { + current_page: number + data: CorporateFormulariumList[] + first_page_url: string + from: number + last_page: number + last_page_url: string + links: CorporateFormulariumPaginationLinks[] + next_page_url: any + per_page: number + total: number +} + +export type CorporateFormulariumList = { + id: number + formulaurium_category_id: number + category: string + description: string + active: string +}; + +export type CorporateFormulariumPaginationLinks = { + url?: string + label: string + active: boolean +} + +export type RespDetailFormularium = { + status: number + message: string + data: DetailCorpFormularium[] +} + +export type DetailCorpFormularium = { + id: number + code: string + name: string + description: string + manufacturer: string + category_name: string + kategori_obat: string + uom: string + general_indication: string + composition: string + atc_code: string + class: string + bpom_registration: string + classifications: string + cat_for: string + created_at: string + updated_at: string + deleted_at: any + created_by: number + updated_by: number + deleted_by: any + formularium_template_id: number +} \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Corporates/Index.tsx b/frontend/dashboard/src/pages/Corporates/Index.tsx index 070ead9c..bc51d257 100644 --- a/frontend/dashboard/src/pages/Corporates/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/Index.tsx @@ -128,7 +128,7 @@ export default function Corporates() { setDataTableLoading(true); const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]); const response = await axios.get('/corporates', { params: filter }); - // console.log(response.data); + console.log(response.data); setDataTableLoading(false); setDataTableData(response.data); @@ -297,11 +297,7 @@ export default function Corporates() { Import */} -<<<<<<< HEAD - diff --git a/frontend/dashboard/src/routes/index.tsx b/frontend/dashboard/src/routes/index.tsx index 68cf56ba..07f2b8d0 100644 --- a/frontend/dashboard/src/routes/index.tsx +++ b/frontend/dashboard/src/routes/index.tsx @@ -161,13 +161,17 @@ export default function Router() { element: , }, { - path: ':corporate_id/formularium', + path: ':corporate_id/formulariums', element: , }, { - path: ':corporate_id/formularium/create', + path: ':corporate_id/formulariums/create', element: }, + { + path: ':corporate_id/formulariums/:id/history', + element: + }, { path: ':corporate_id/diagnosis-exclusions', @@ -471,6 +475,7 @@ const DiagnosisExclusionsHistory = Loadable( const CorporateFormularium = Loadable(lazy(() => import('../pages/Corporates/Formularium/Index'))); const CorporateFormulariumCreate = Loadable(lazy(() => import('../pages/Corporates/Formularium/New/CreateForm'))); +const CorporateFormulariumHistory = Loadable(lazy(() => import('../pages/Corporates/Formularium/New/History'))) const MasterDiagnosisTemplate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/Index'))); const MasterDiagnosisTemplateCreate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/CreateUpdate')));