add update function to master formularium

2023-10-30 09:59:03 +07:00
parent 87864a496c
commit 759e692465
11 changed files with 2333 additions and 2004 deletions
--- a/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx
@@ -45,7 +45,7 @@ export default function CategoryDetail({props, formularium} : ParamsDetail) {
    console.log(dataValue)
    setDialogOpen(isOpen)
    setDataValue(dataValue)
-    setDescriptionValue('Are you sure to inactive this service ?')
+    setDescriptionValue('Are you sure to inactive this formularium ?')
    setUrl(url)
  };

@@ -216,7 +216,6 @@ export default function CategoryDetail({props, formularium} : ParamsDetail) {
          </TableRow>
        </TableBody>

-        {/* TODO: dialog update status */}
        <DialogUpdateStatus 
          openDialog={isDialogOpen} 
          setOpenDialog={setDialogOpen} 
--- a/frontend/dashboard/src/pages/Master/Drug/List.tsx
+++ b/frontend/dashboard/src/pages/Master/Drug/List.tsx
@@ -267,7 +267,7 @@ import {
                  </Box>{' '}
                  Failed
                  {importResult.data.failed_rows.map((row, index) => (
-                      <Typography variant='body' key={index} color="error"> [Code=>{row.code ? row.code : 'Required'},Name=>{row.name ? row.name : 'Required'}]</Typography>
+                      <Typography variant='body' key={index} color="error"> [Code={row.code ? row.code : 'Required'},Name={row.name ? row.name : 'Required'}]</Typography>
                  ))}
              </Box>
              </Stack>
--- a/frontend/dashboard/src/pages/Master/Formularium/List.tsx
+++ b/frontend/dashboard/src/pages/Master/Formularium/List.tsx
@@ -331,6 +331,7 @@ export default function List() {
    // console.log(response.data);
    setDataTableLoading(false);

+    console.log(formularium_template_id)
    setDataTableData(response.data);
  }

--- a/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/DetailFormularium.tsx
+++ b/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/DetailFormularium.tsx
@@ -0,0 +1,102 @@
+// @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 { 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';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { RHFSelect, FormProvider } from '@/components/hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+// components
+import axios from '../../../../utils/axios';
+import Label from '@/components/Label';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import DialogUpdateStatus from '@/components/DialogUpdateStatus'
+import * as Yup from 'yup';
+import { FormulariumData } from "../Type";
+
+
+type Props = {
+  props: FormulariumData,
+  isActive: number,
+}
+
+export default function DetailFormularium({props, isActive} : Props) {
+  const [open, setOpen] = React.useState(false);
+
+
+  return (
+    <TableBody>
+      <TableRow>
+        <TableCell align='left' width={50} />
+        <TableCell align='left'>{props.code}</TableCell>
+        <TableCell align='left'>{props.atc_code}</TableCell>
+        <TableCell align='left'>{props.name}</TableCell>
+        <TableCell align='left'>{props.category_name}</TableCell>
+        <TableCell align='left'>{props.uom}</TableCell>
+        <TableCell align='left'>
+          {isActive == 1 ? (
+            <Label color='success'>Active</Label>
+          ) : (
+            <Label color='error'>Inactive</Label>
+          )}
+        </TableCell>
+        <TableCell align='center' width={100}>
+          <TableMoreMenu actions = {
+            <>
+              <MenuItem onClick={() => setOpen(!open)}>
+                <FindInPageOutlined />
+                Detail
+              </MenuItem>
+            </>
+          } />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell colSpan={8} style={{paddingBottom: 0, paddingTop: 0}}>
+          <Collapse in={open} timeout='auto' unmountOnExit>
+            <Card sx={{paddingX:2, paddingY:2, marginBottom:3}}>
+              <Box sx={{margin: 1, pb: 2}}>
+                <Grid container>
+                  <Grid item>
+                    <Typography sx={{fontWeight: '600', mb: 1}}>Detail</Typography>
+                    <Grid container>
+                    <Grid item xs={2}>Description</Grid>
+                      <Grid item xs={10}> : {props.description}</Grid>
+
+                      <Grid item xs={2}>General Indication</Grid>
+                      <Grid item xs={10}> : {props.general_indication}</Grid>
+
+                      <Grid item xs={2}>Composition</Grid>
+                      <Grid item xs={10}> : {props.composition}</Grid>
+
+                      <Grid item xs={2}>Kategori Obat</Grid>
+                      <Grid item xs={10}> : {props.kategori_obat}</Grid>
+
+                      <Grid item xs={2}>BPOM Registration</Grid>
+                      <Grid item xs={10}> : {props.bpom_registration}</Grid>
+
+                      <Grid item xs={2}>Classification</Grid>
+                      <Grid item xs={10}> : {props.classifications}</Grid>
+
+                      <Grid item xs={2}>Cat For</Grid>
+                      <Grid item xs={10}> : {props.cat_for}</Grid>
+
+                      <Grid item xs={2}>Class</Grid>
+                      <Grid item xs={10}> : {props.class}</Grid>
+
+                      <Grid item xs={2}>Manufacturer</Grid>
+                      <Grid item xs={10}> : {props.manufacturer}</Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Card>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  )
+}
--- a/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Formularium.tsx
+++ b/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Formularium.tsx
@@ -8,20 +8,23 @@ import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../../hooks/useSettings';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../../utils/axios';
 import { LaravelPaginatedData } from '../../../../@types/paginated-data';
 import { Icd } from '../../../../@types/diagnosis';
 import BasePagination from '../../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
+import DetailFormularium from "./DetailFormularium";
+import { FormulariumData } from '../Type';


 export default function List() {
  const navigate = useNavigate();
-  const { master_formularium_id } = useParams();
+  const { id: formularium_template_id } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();
  const [importResult, setImportResult] = useState(null);
+  const { isActive } = useLocation().state as { isActive: number }

  function SearchInput(props: any) {
    const searchInput = useRef<HTMLInputElement>(null);
@@ -105,7 +108,7 @@ export default function List() {
    }

    const handleFormulariumList = async (appliedFilter = null) => {
-      axios.get(`master/formulariums/${master_formularium_id}/list`)
+      axios.get(`master/formulariums/${formularium_template_id}/list`)
        .then((response) => {
          const link = document.createElement('a');
          link.href = response.data.data.file_url;
@@ -124,7 +127,7 @@ export default function List() {
      if (importForm.current?.files?.length) {
        const formData = new FormData();
        formData.append('file', importForm.current?.files[0])
-        axios.post(`master/formularium/${master_formularium_id}/import`, formData )
+        axios.post(`master/formularium/${formularium_template_id}/import`, formData )
          .then(response => {
            handleCancelImportButton();
            loadDataTableData();
@@ -216,7 +219,7 @@ export default function List() {
  }

  // Default data
-  const [dataTableRow, setDataTableRow] = useState<[] | null>(null)
+  const [dataTableRow, setDataTableRow] = useState<FormulariumData[] | null>(null)
  const [dataTableIsLoading, setDataTableLoading] = useState(true);
  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
    current_page: 1,
@@ -236,9 +239,11 @@ export default function List() {
  const loadDataTableData = async (appliedFilter : any | null = null) => {
    setDataTableLoading(true);
    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get(`/master/formulariums/${master_formularium_id}`, { params: filter });
+    const response = await axios.get(`/master/formulariums/${formularium_template_id}`, { params: filter });
    setDataTableLoading(false);

+    console.log(formularium_template_id)
+    console.log(response)
    setDataTableData(response.data)
    setDataTableRow(response.data.data)
  }
@@ -276,9 +281,31 @@ export default function List() {
                <TableCell style={headStyle} align='left'>Name</TableCell>
                <TableCell style={headStyle} align='left'>Category Name</TableCell>
                <TableCell style={headStyle} align='left'>UOM</TableCell>
+                <TableCell style={headStyle} align='left'>Status</TableCell>
                <TableCell style={headStyle} align='center' width={100}></TableCell>
              </TableRow>
            </TableHead>
+            {dataTableIsLoading ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align='center'>
+                    Loading
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : dataTableData.data.length == 0 ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align='center'>
+                    No Data
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : (
+              dataTableRow?.map(item => (
+                <DetailFormularium props={item} isActive={isActive}/>
+              ))
+            )}
          </Table>
        </TableContainer>

--- a/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Index.tsx
+++ b/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Index.tsx
@@ -8,7 +8,7 @@ import List from "./Formularium";

 export default function Formularium() {
  const pageTitle = "Formularium"
-  const { id } = useParams();
+  const { id: formularium_template_id } = useParams();

  return (
    <Page title={ pageTitle }>
@@ -25,7 +25,7 @@ export default function Formularium() {
          },
          {
            name: 'Detail',
-            href: `/master/formularium-template-v2/${id}/detail`
+            href: `/master/formularium-template-v2/${formularium_template_id}/detail`
          },
        ]} 
      />
--- a/frontend/dashboard/src/pages/Master/FormulariumV2/FormulariumRow.tsx
+++ b/frontend/dashboard/src/pages/Master/FormulariumV2/FormulariumRow.tsx
@@ -1,13 +1,19 @@
+import * as Yup from 'yup';
 import TableMoreMenu from "@/components/table/TableMoreMenu"
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
 import HistoryIcon from '@mui/icons-material/History';
 import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
-import { Collapse, Grid, MenuItem, Paper, Table, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
-import React, { useEffect } from "react";
+import { Button, Card, Collapse, Grid, MenuItem, Paper, Stack, Table, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material"
+import React, { Fragment, useEffect, useState } from "react";
 import axios from "@/utils/axios";
 import { useNavigate, useParams } from "react-router-dom";
+import { RHFSelect, FormProvider } from '@/components/hook-form';
+import DialogUpdateStatus from '@/components/DialogUpdateStatus'
 import { MasterFormularium } from "./Type";
+import { LoadingButton } from "@mui/lab";
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';

 type Props = {
  props: MasterFormularium
@@ -16,33 +22,190 @@ type Props = {
 export default function FormulariumRow({props} : Props) {
  const navigate = useNavigate();

+  const [isDialogOpen, setDialogOpen] = useState(false);
+  const [dataValue, setDataValue] = useState<MasterFormularium | null>(null);
+  const [dataDescription, setDescriptionValue] = useState('');
+  const [url, setUrl] = useState('');
+  let titles = {
+    name: 'Update Status',
+    icon: '-'
+  }
+  type FormValuesProps = {
+    value: string;
+    active: boolean;
+  };
+
+  const handleActivate = (isOpen: boolean, dataValue: MasterFormularium) => {
+    setDialogOpen(isOpen);
+    setDataValue(dataValue);
+    setDescriptionValue("Are you sure to inactive this formularium ? ");
+    setUrl(url);
+  };
+
+  const NewMasterFormSchema = Yup.object().shape({
+    reason: Yup.string().required('Reason edit is required')
+  });
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewMasterFormSchema)
+  });
+
+  const onSubmit = async (row: any) => {
+    try {
+      handleUpdate(dataValue?.active, dataValue?.id, row.reason)
+    } catch (error: any) {
+      console.log('data gagal');
+    }
+
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
+    }
+  };
+
+  const handleUpdate = (active: number, id: number, reason: string) => {
+    
+    if (active == 1) {
+      active = 0
+    } else {
+      active = 1
+    }
+
+    axios
+    .put(`/master/formularium-template/${id}/activation`, {
+      active: active,
+    })
+    .then((res) => {
+      window.location.reload();
+    })
+  }
+
+  const {
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const getContent = () => (
+    <>
+      <Stack paddingX={2} paddingY={2}>
+        <Typography variant='subtitle1'>Are you sure to Change this Formularium</Typography>
+        <Stack>
+          <Card>
+            <Grid container paddingX={2} paddingY={2}>
+              <Grid item xs={5} md={5}>
+                <Typography variant="inherit">Formularium name</Typography>
+              </Grid>
+              <Grid item xs={7}>
+                <Typography variant="subtitle1">{dataValue?.name}</Typography>
+              </Grid>
+            </Grid>
+          </Card>
+
+          <Typography marginTop={5} marginBottom={3} variant="subtitle1">Reason for update</Typography>
+          <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+            <RHFSelect 
+              name="reason"
+              label="Reason for update"
+            >
+              <option value=""></option>
+              <option value="Agreement changed">Agreement changed</option>
+              <option value="Endorsement">Endorsement</option>
+              <option value="Renewal">Renewal</option>
+              <option value="Wrong Setting">Wrong Setting</option>
+            </RHFSelect>
+            <Stack
+              alignItems='center'
+              justifyContent='flex-end'
+              direction={{xs: 'column', md: 'row'}}
+              spacing={2}
+              marginTop={5}
+            >
+              <Stack direction='row' spacing={1}>
+                <Button
+                  sx={{boxShadow: 'none'}}
+                  variant='outlined'
+                  size='medium'
+                  fullWidth={true}
+                  onClick={() => setDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                {dataValue?.active == 1 ?
+                  <LoadingButton
+                    sx={{boxShadow: '0px 2px 4px rgba(0,0,0,0.1)'}}
+                    type='submit'
+                    variant='contained'
+                    size='medium'
+                    fullWidth={true}
+                    loading={isSubmitting}
+                    color='error'
+                  >
+                    Inactive
+                  </LoadingButton> :
+                  <LoadingButton
+                    sx={{boxShadow: '0px 2px 4px rgba(0,0,0,0.1)'}}
+                    type='submit'
+                    variant='contained'
+                    size='medium'
+                    fullWidth={true}
+                    loading={isSubmitting}
+                    color='success'
+                  >
+                    Active
+                  </LoadingButton>
+                }
+              </Stack>
+            </Stack>
+          </FormProvider>
+        </Stack>
+      </Stack>
+    </>
+  )
+
  return (
-    <TableRow>
-      <TableCell align="left" width={50}></TableCell>
-      <TableCell align="left">{props.name}</TableCell>
-      <TableCell align="left">{props.description}</TableCell>
-      <TableCell align="center" width={100}>
-        <TableMoreMenu actions = {
-          <>
-            <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/detail`)}>
-              <FindInPageOutlinedIcon />
-              Detail
-            </MenuItem>
-            <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/edit`)}>
-              <EditOutlinedIcon />
-              Edit
-            </MenuItem>
-            <MenuItem>
-              <CachedOutlinedIcon />
-              Update Status
-            </MenuItem>
-            <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/history`)}>
-              <HistoryIcon />
-              History
-            </MenuItem>
-          </>
-        } />
-      </TableCell>
-    </TableRow>
+    <Fragment>
+      <TableRow>
+        <TableCell align="left" width={50}></TableCell>
+        <TableCell align="left">{props.name}</TableCell>
+        <TableCell align="left">{props.description}</TableCell>
+        <TableCell align="center" width={100}>
+          <TableMoreMenu actions = {
+            <>
+              <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/detail`, {state: { isActive: props.active }})}>
+                <FindInPageOutlinedIcon />
+                Detail
+              </MenuItem>
+              <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/edit`)}>
+                <EditOutlinedIcon />
+                Edit
+              </MenuItem>
+              <MenuItem onClick={() => handleActivate(true, {
+                id: props.id,
+                name: props.name,
+                description: props.description,
+                active: props.active
+              })
+              }>
+                <CachedOutlinedIcon />
+                Update Status
+              </MenuItem>
+              <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/history`)}>
+                <HistoryIcon />
+                History
+              </MenuItem>
+            </>
+          } />
+        </TableCell>
+      </TableRow>
+      <DialogUpdateStatus 
+        openDialog={isDialogOpen} 
+        setOpenDialog={setDialogOpen} 
+        description={dataDescription}
+        title={titles}
+        data={dataValue}
+        content={getContent()}     
+      />
+    </Fragment>
  )
 }
--- a/frontend/dashboard/src/pages/Master/FormulariumV2/Type.ts
+++ b/frontend/dashboard/src/pages/Master/FormulariumV2/Type.ts
@@ -2,6 +2,7 @@ export type MasterFormularium = {
    id: number
    name: string
    description: string
+    active: number
 }