Created folder: frontend/src/pages/claims
Copied files from frontend/src/pages/scanned_documents into the new folder to allow Flatlogic to do a rename on everything "Scanned documents" to "Claims"
This commit is contained in:
SD-Chris
GitHub
parent
e771093cdf
commit
f826fc655b
185
frontend/src/pages/claims/[scanned_documentsId].tsx
Normal file
185
frontend/src/pages/claims/[scanned_documentsId].tsx
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import React, { ReactElement, useEffect, useState } from 'react';
|
||||||
|
import DatePicker from 'react-datepicker';
|
||||||
|
import 'react-datepicker/dist/react-datepicker.css';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
import CardBox from '../../components/CardBox';
|
||||||
|
import LayoutAuthenticated from '../../layouts/Authenticated';
|
||||||
|
import SectionMain from '../../components/SectionMain';
|
||||||
|
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
||||||
|
import { getPageTitle } from '../../config';
|
||||||
|
|
||||||
|
import { Field, Form, Formik } from 'formik';
|
||||||
|
import FormField from '../../components/FormField';
|
||||||
|
import BaseDivider from '../../components/BaseDivider';
|
||||||
|
import BaseButtons from '../../components/BaseButtons';
|
||||||
|
import BaseButton from '../../components/BaseButton';
|
||||||
|
import FormCheckRadio from '../../components/FormCheckRadio';
|
||||||
|
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
|
||||||
|
import FormFilePicker from '../../components/FormFilePicker';
|
||||||
|
import FormImagePicker from '../../components/FormImagePicker';
|
||||||
|
import { SelectField } from '../../components/SelectField';
|
||||||
|
import { SelectFieldMany } from '../../components/SelectFieldMany';
|
||||||
|
import { SwitchField } from '../../components/SwitchField';
|
||||||
|
import { RichTextField } from '../../components/RichTextField';
|
||||||
|
|
||||||
|
import {
|
||||||
|
update,
|
||||||
|
fetch,
|
||||||
|
} from '../../stores/scanned_documents/scanned_documentsSlice';
|
||||||
|
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { saveFile } from '../../helpers/fileSaver';
|
||||||
|
import dataFormatter from '../../helpers/dataFormatter';
|
||||||
|
import ImageField from '../../components/ImageField';
|
||||||
|
|
||||||
|
const EditScanned_documents = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const initVals = {
|
||||||
|
file_name: '',
|
||||||
|
|
||||||
|
file: [],
|
||||||
|
|
||||||
|
uploaded_at: new Date(),
|
||||||
|
|
||||||
|
uploaded_by: null,
|
||||||
|
};
|
||||||
|
const [initialValues, setInitialValues] = useState(initVals);
|
||||||
|
|
||||||
|
const { scanned_documents } = useAppSelector(
|
||||||
|
(state) => state.scanned_documents,
|
||||||
|
);
|
||||||
|
|
||||||
|
const { scanned_documentsId } = router.query;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(fetch({ id: scanned_documentsId }));
|
||||||
|
}, [scanned_documentsId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof scanned_documents === 'object') {
|
||||||
|
setInitialValues(scanned_documents);
|
||||||
|
}
|
||||||
|
}, [scanned_documents]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof scanned_documents === 'object') {
|
||||||
|
const newInitialVal = { ...initVals };
|
||||||
|
|
||||||
|
Object.keys(initVals).forEach(
|
||||||
|
(el) => (newInitialVal[el] = scanned_documents[el]),
|
||||||
|
);
|
||||||
|
|
||||||
|
setInitialValues(newInitialVal);
|
||||||
|
}
|
||||||
|
}, [scanned_documents]);
|
||||||
|
|
||||||
|
const handleSubmit = async (data) => {
|
||||||
|
await dispatch(update({ id: scanned_documentsId, data }));
|
||||||
|
await router.push('/scanned_documents/scanned_documents-list');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>{getPageTitle('Edit scanned_documents')}</title>
|
||||||
|
</Head>
|
||||||
|
<SectionMain>
|
||||||
|
<SectionTitleLineWithButton
|
||||||
|
icon={mdiChartTimelineVariant}
|
||||||
|
title={'Edit scanned_documents'}
|
||||||
|
main
|
||||||
|
>
|
||||||
|
{''}
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
<CardBox>
|
||||||
|
<Formik
|
||||||
|
enableReinitialize
|
||||||
|
initialValues={initialValues}
|
||||||
|
onSubmit={(values) => handleSubmit(values)}
|
||||||
|
>
|
||||||
|
<Form>
|
||||||
|
<FormField label='FileName'>
|
||||||
|
<Field name='file_name' placeholder='FileName' />
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField>
|
||||||
|
<Field
|
||||||
|
label='File'
|
||||||
|
color='info'
|
||||||
|
icon={mdiUpload}
|
||||||
|
path={'scanned_documents/file'}
|
||||||
|
name='file'
|
||||||
|
id='file'
|
||||||
|
schema={{
|
||||||
|
size: undefined,
|
||||||
|
formats: undefined,
|
||||||
|
}}
|
||||||
|
component={FormFilePicker}
|
||||||
|
></Field>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label='UploadedAt'>
|
||||||
|
<DatePicker
|
||||||
|
dateFormat='yyyy-MM-dd hh:mm'
|
||||||
|
showTimeSelect
|
||||||
|
selected={
|
||||||
|
initialValues.uploaded_at
|
||||||
|
? new Date(
|
||||||
|
dayjs(initialValues.uploaded_at).format(
|
||||||
|
'YYYY-MM-DD hh:mm',
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
onChange={(date) =>
|
||||||
|
setInitialValues({ ...initialValues, uploaded_at: date })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label='UploadedBy' labelFor='uploaded_by'>
|
||||||
|
<Field
|
||||||
|
name='uploaded_by'
|
||||||
|
id='uploaded_by'
|
||||||
|
component={SelectField}
|
||||||
|
options={initialValues.uploaded_by}
|
||||||
|
itemRef={'users'}
|
||||||
|
showField={'firstName'}
|
||||||
|
></Field>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<BaseDivider />
|
||||||
|
<BaseButtons>
|
||||||
|
<BaseButton type='submit' color='info' label='Submit' />
|
||||||
|
<BaseButton type='reset' color='info' outline label='Reset' />
|
||||||
|
<BaseButton
|
||||||
|
type='reset'
|
||||||
|
color='danger'
|
||||||
|
outline
|
||||||
|
label='Cancel'
|
||||||
|
onClick={() =>
|
||||||
|
router.push('/scanned_documents/scanned_documents-list')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</BaseButtons>
|
||||||
|
</Form>
|
||||||
|
</Formik>
|
||||||
|
</CardBox>
|
||||||
|
</SectionMain>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
EditScanned_documents.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return (
|
||||||
|
<LayoutAuthenticated permission={'UPDATE_SCANNED_DOCUMENTS'}>
|
||||||
|
{page}
|
||||||
|
</LayoutAuthenticated>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditScanned_documents;
|
||||||
183
frontend/src/pages/claims/scanned_documents-edit.tsx
Normal file
183
frontend/src/pages/claims/scanned_documents-edit.tsx
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import React, { ReactElement, useEffect, useState } from 'react';
|
||||||
|
import DatePicker from 'react-datepicker';
|
||||||
|
import 'react-datepicker/dist/react-datepicker.css';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
import CardBox from '../../components/CardBox';
|
||||||
|
import LayoutAuthenticated from '../../layouts/Authenticated';
|
||||||
|
import SectionMain from '../../components/SectionMain';
|
||||||
|
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
||||||
|
import { getPageTitle } from '../../config';
|
||||||
|
|
||||||
|
import { Field, Form, Formik } from 'formik';
|
||||||
|
import FormField from '../../components/FormField';
|
||||||
|
import BaseDivider from '../../components/BaseDivider';
|
||||||
|
import BaseButtons from '../../components/BaseButtons';
|
||||||
|
import BaseButton from '../../components/BaseButton';
|
||||||
|
import FormCheckRadio from '../../components/FormCheckRadio';
|
||||||
|
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
|
||||||
|
import FormFilePicker from '../../components/FormFilePicker';
|
||||||
|
import FormImagePicker from '../../components/FormImagePicker';
|
||||||
|
import { SelectField } from '../../components/SelectField';
|
||||||
|
import { SelectFieldMany } from '../../components/SelectFieldMany';
|
||||||
|
import { SwitchField } from '../../components/SwitchField';
|
||||||
|
import { RichTextField } from '../../components/RichTextField';
|
||||||
|
|
||||||
|
import {
|
||||||
|
update,
|
||||||
|
fetch,
|
||||||
|
} from '../../stores/scanned_documents/scanned_documentsSlice';
|
||||||
|
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { saveFile } from '../../helpers/fileSaver';
|
||||||
|
import dataFormatter from '../../helpers/dataFormatter';
|
||||||
|
import ImageField from '../../components/ImageField';
|
||||||
|
|
||||||
|
const EditScanned_documentsPage = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const initVals = {
|
||||||
|
file_name: '',
|
||||||
|
|
||||||
|
file: [],
|
||||||
|
|
||||||
|
uploaded_at: new Date(),
|
||||||
|
|
||||||
|
uploaded_by: null,
|
||||||
|
};
|
||||||
|
const [initialValues, setInitialValues] = useState(initVals);
|
||||||
|
|
||||||
|
const { scanned_documents } = useAppSelector(
|
||||||
|
(state) => state.scanned_documents,
|
||||||
|
);
|
||||||
|
|
||||||
|
const { id } = router.query;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(fetch({ id: id }));
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof scanned_documents === 'object') {
|
||||||
|
setInitialValues(scanned_documents);
|
||||||
|
}
|
||||||
|
}, [scanned_documents]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof scanned_documents === 'object') {
|
||||||
|
const newInitialVal = { ...initVals };
|
||||||
|
Object.keys(initVals).forEach(
|
||||||
|
(el) => (newInitialVal[el] = scanned_documents[el]),
|
||||||
|
);
|
||||||
|
setInitialValues(newInitialVal);
|
||||||
|
}
|
||||||
|
}, [scanned_documents]);
|
||||||
|
|
||||||
|
const handleSubmit = async (data) => {
|
||||||
|
await dispatch(update({ id: id, data }));
|
||||||
|
await router.push('/scanned_documents/scanned_documents-list');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>{getPageTitle('Edit scanned_documents')}</title>
|
||||||
|
</Head>
|
||||||
|
<SectionMain>
|
||||||
|
<SectionTitleLineWithButton
|
||||||
|
icon={mdiChartTimelineVariant}
|
||||||
|
title={'Edit scanned_documents'}
|
||||||
|
main
|
||||||
|
>
|
||||||
|
{''}
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
<CardBox>
|
||||||
|
<Formik
|
||||||
|
enableReinitialize
|
||||||
|
initialValues={initialValues}
|
||||||
|
onSubmit={(values) => handleSubmit(values)}
|
||||||
|
>
|
||||||
|
<Form>
|
||||||
|
<FormField label='FileName'>
|
||||||
|
<Field name='file_name' placeholder='FileName' />
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField>
|
||||||
|
<Field
|
||||||
|
label='File'
|
||||||
|
color='info'
|
||||||
|
icon={mdiUpload}
|
||||||
|
path={'scanned_documents/file'}
|
||||||
|
name='file'
|
||||||
|
id='file'
|
||||||
|
schema={{
|
||||||
|
size: undefined,
|
||||||
|
formats: undefined,
|
||||||
|
}}
|
||||||
|
component={FormFilePicker}
|
||||||
|
></Field>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label='UploadedAt'>
|
||||||
|
<DatePicker
|
||||||
|
dateFormat='yyyy-MM-dd hh:mm'
|
||||||
|
showTimeSelect
|
||||||
|
selected={
|
||||||
|
initialValues.uploaded_at
|
||||||
|
? new Date(
|
||||||
|
dayjs(initialValues.uploaded_at).format(
|
||||||
|
'YYYY-MM-DD hh:mm',
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
onChange={(date) =>
|
||||||
|
setInitialValues({ ...initialValues, uploaded_at: date })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label='UploadedBy' labelFor='uploaded_by'>
|
||||||
|
<Field
|
||||||
|
name='uploaded_by'
|
||||||
|
id='uploaded_by'
|
||||||
|
component={SelectField}
|
||||||
|
options={initialValues.uploaded_by}
|
||||||
|
itemRef={'users'}
|
||||||
|
showField={'firstName'}
|
||||||
|
></Field>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<BaseDivider />
|
||||||
|
<BaseButtons>
|
||||||
|
<BaseButton type='submit' color='info' label='Submit' />
|
||||||
|
<BaseButton type='reset' color='info' outline label='Reset' />
|
||||||
|
<BaseButton
|
||||||
|
type='reset'
|
||||||
|
color='danger'
|
||||||
|
outline
|
||||||
|
label='Cancel'
|
||||||
|
onClick={() =>
|
||||||
|
router.push('/scanned_documents/scanned_documents-list')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</BaseButtons>
|
||||||
|
</Form>
|
||||||
|
</Formik>
|
||||||
|
</CardBox>
|
||||||
|
</SectionMain>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
EditScanned_documentsPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return (
|
||||||
|
<LayoutAuthenticated permission={'UPDATE_SCANNED_DOCUMENTS'}>
|
||||||
|
{page}
|
||||||
|
</LayoutAuthenticated>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditScanned_documentsPage;
|
||||||
158
frontend/src/pages/claims/scanned_documents-list.tsx
Normal file
158
frontend/src/pages/claims/scanned_documents-list.tsx
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
import { mdiChartTimelineVariant } from '@mdi/js';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import { uniqueId } from 'lodash';
|
||||||
|
import React, { ReactElement, useState } from 'react';
|
||||||
|
import CardBox from '../../components/CardBox';
|
||||||
|
import LayoutAuthenticated from '../../layouts/Authenticated';
|
||||||
|
import SectionMain from '../../components/SectionMain';
|
||||||
|
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
||||||
|
import { getPageTitle } from '../../config';
|
||||||
|
import TableScanned_documents from '../../components/Scanned_documents/TableScanned_documents';
|
||||||
|
import BaseButton from '../../components/BaseButton';
|
||||||
|
import axios from 'axios';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
|
||||||
|
import CardBoxModal from '../../components/CardBoxModal';
|
||||||
|
import DragDropFilePicker from '../../components/DragDropFilePicker';
|
||||||
|
import {
|
||||||
|
setRefetch,
|
||||||
|
uploadCsv,
|
||||||
|
} from '../../stores/scanned_documents/scanned_documentsSlice';
|
||||||
|
|
||||||
|
import { hasPermission } from '../../helpers/userPermissions';
|
||||||
|
|
||||||
|
const Scanned_documentsTablesPage = () => {
|
||||||
|
const [filterItems, setFilterItems] = useState([]);
|
||||||
|
const [csvFile, setCsvFile] = useState<File | null>(null);
|
||||||
|
const [isModalActive, setIsModalActive] = useState(false);
|
||||||
|
const [showTableView, setShowTableView] = useState(false);
|
||||||
|
|
||||||
|
const { currentUser } = useAppSelector((state) => state.auth);
|
||||||
|
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const [filters] = useState([
|
||||||
|
{ label: 'FileName', title: 'file_name' },
|
||||||
|
|
||||||
|
{ label: 'UploadedAt', title: 'uploaded_at', date: 'true' },
|
||||||
|
|
||||||
|
{ label: 'UploadedBy', title: 'uploaded_by' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const hasCreatePermission =
|
||||||
|
currentUser && hasPermission(currentUser, 'CREATE_SCANNED_DOCUMENTS');
|
||||||
|
|
||||||
|
const addFilter = () => {
|
||||||
|
const newItem = {
|
||||||
|
id: uniqueId(),
|
||||||
|
fields: {
|
||||||
|
filterValue: '',
|
||||||
|
filterValueFrom: '',
|
||||||
|
filterValueTo: '',
|
||||||
|
selectedField: '',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
newItem.fields.selectedField = filters[0].title;
|
||||||
|
setFilterItems([...filterItems, newItem]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getScanned_documentsCSV = async () => {
|
||||||
|
const response = await axios({
|
||||||
|
url: '/scanned_documents?filetype=csv',
|
||||||
|
method: 'GET',
|
||||||
|
responseType: 'blob',
|
||||||
|
});
|
||||||
|
const type = response.headers['content-type'];
|
||||||
|
const blob = new Blob([response.data], { type: type });
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = window.URL.createObjectURL(blob);
|
||||||
|
link.download = 'scanned_documentsCSV.csv';
|
||||||
|
link.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onModalConfirm = async () => {
|
||||||
|
if (!csvFile) return;
|
||||||
|
await dispatch(uploadCsv(csvFile));
|
||||||
|
dispatch(setRefetch(true));
|
||||||
|
setCsvFile(null);
|
||||||
|
setIsModalActive(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onModalCancel = () => {
|
||||||
|
setCsvFile(null);
|
||||||
|
setIsModalActive(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>{getPageTitle('Scanned_documents')}</title>
|
||||||
|
</Head>
|
||||||
|
<SectionMain>
|
||||||
|
<SectionTitleLineWithButton
|
||||||
|
icon={mdiChartTimelineVariant}
|
||||||
|
title='Scanned_documents'
|
||||||
|
main
|
||||||
|
>
|
||||||
|
{''}
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
<CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
|
||||||
|
{hasCreatePermission && (
|
||||||
|
<BaseButton
|
||||||
|
className={'mr-3'}
|
||||||
|
href={'/scanned_documents/scanned_documents-new'}
|
||||||
|
color='info'
|
||||||
|
label='Upload New Claim(s)'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<BaseButton
|
||||||
|
className={'mr-3'}
|
||||||
|
color='info'
|
||||||
|
label='Filter'
|
||||||
|
onClick={addFilter}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<div className='md:inline-flex items-center ms-auto'>
|
||||||
|
<div id='delete-rows-button'></div>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
|
||||||
|
<CardBox className='mb-6' hasTable>
|
||||||
|
<TableScanned_documents
|
||||||
|
filterItems={filterItems}
|
||||||
|
setFilterItems={setFilterItems}
|
||||||
|
filters={filters}
|
||||||
|
showGrid={false}
|
||||||
|
/>
|
||||||
|
</CardBox>
|
||||||
|
</SectionMain>
|
||||||
|
<CardBoxModal
|
||||||
|
title='Upload CSV'
|
||||||
|
buttonColor='info'
|
||||||
|
buttonLabel={'Confirm'}
|
||||||
|
// buttonLabel={false ? 'Deleting...' : 'Confirm'}
|
||||||
|
isActive={isModalActive}
|
||||||
|
onConfirm={onModalConfirm}
|
||||||
|
onCancel={onModalCancel}
|
||||||
|
>
|
||||||
|
<DragDropFilePicker
|
||||||
|
file={csvFile}
|
||||||
|
setFile={setCsvFile}
|
||||||
|
formats={'.csv'}
|
||||||
|
/>
|
||||||
|
</CardBoxModal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Scanned_documentsTablesPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return (
|
||||||
|
<LayoutAuthenticated permission={'READ_SCANNED_DOCUMENTS'}>
|
||||||
|
{page}
|
||||||
|
</LayoutAuthenticated>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Scanned_documentsTablesPage;
|
||||||
140
frontend/src/pages/claims/scanned_documents-new.tsx
Normal file
140
frontend/src/pages/claims/scanned_documents-new.tsx
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
import {
|
||||||
|
mdiAccount,
|
||||||
|
mdiChartTimelineVariant,
|
||||||
|
mdiMail,
|
||||||
|
mdiUpload,
|
||||||
|
} from '@mdi/js';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import React, { ReactElement } from 'react';
|
||||||
|
import CardBox from '../../components/CardBox';
|
||||||
|
import LayoutAuthenticated from '../../layouts/Authenticated';
|
||||||
|
import SectionMain from '../../components/SectionMain';
|
||||||
|
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
||||||
|
import { getPageTitle } from '../../config';
|
||||||
|
|
||||||
|
import { Field, Form, Formik } from 'formik';
|
||||||
|
import FormField from '../../components/FormField';
|
||||||
|
import BaseDivider from '../../components/BaseDivider';
|
||||||
|
import BaseButtons from '../../components/BaseButtons';
|
||||||
|
import BaseButton from '../../components/BaseButton';
|
||||||
|
import FormCheckRadio from '../../components/FormCheckRadio';
|
||||||
|
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
|
||||||
|
import FormFilePicker from '../../components/FormFilePicker';
|
||||||
|
import FormImagePicker from '../../components/FormImagePicker';
|
||||||
|
import { SwitchField } from '../../components/SwitchField';
|
||||||
|
|
||||||
|
import { SelectField } from '../../components/SelectField';
|
||||||
|
import { SelectFieldMany } from '../../components/SelectFieldMany';
|
||||||
|
import { RichTextField } from '../../components/RichTextField';
|
||||||
|
|
||||||
|
import { create } from '../../stores/scanned_documents/scanned_documentsSlice';
|
||||||
|
import { useAppDispatch } from '../../stores/hooks';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
const initialValues = {
|
||||||
|
file_name: '',
|
||||||
|
|
||||||
|
file: [],
|
||||||
|
|
||||||
|
uploaded_at: '',
|
||||||
|
|
||||||
|
uploaded_by: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
const Scanned_documentsNew = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const handleSubmit = async (data) => {
|
||||||
|
await dispatch(create(data));
|
||||||
|
await router.push('/scanned_documents/scanned_documents-list');
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>{getPageTitle('New Item')}</title>
|
||||||
|
</Head>
|
||||||
|
<SectionMain>
|
||||||
|
<SectionTitleLineWithButton
|
||||||
|
icon={mdiChartTimelineVariant}
|
||||||
|
title='New Item'
|
||||||
|
main
|
||||||
|
>
|
||||||
|
{''}
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
<CardBox>
|
||||||
|
<Formik
|
||||||
|
initialValues={initialValues}
|
||||||
|
onSubmit={(values) => handleSubmit(values)}
|
||||||
|
>
|
||||||
|
<Form>
|
||||||
|
<FormField label='FileName'>
|
||||||
|
<Field name='file_name' placeholder='FileName' />
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField>
|
||||||
|
<Field
|
||||||
|
label='File'
|
||||||
|
color='info'
|
||||||
|
icon={mdiUpload}
|
||||||
|
path={'scanned_documents/file'}
|
||||||
|
name='file'
|
||||||
|
id='file'
|
||||||
|
schema={{
|
||||||
|
size: undefined,
|
||||||
|
formats: undefined,
|
||||||
|
}}
|
||||||
|
component={FormFilePicker}
|
||||||
|
></Field>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label='UploadedAt'>
|
||||||
|
<Field
|
||||||
|
type='datetime-local'
|
||||||
|
name='uploaded_at'
|
||||||
|
placeholder='UploadedAt'
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label='UploadedBy' labelFor='uploaded_by'>
|
||||||
|
<Field
|
||||||
|
name='uploaded_by'
|
||||||
|
id='uploaded_by'
|
||||||
|
component={SelectField}
|
||||||
|
options={[]}
|
||||||
|
itemRef={'users'}
|
||||||
|
></Field>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<BaseDivider />
|
||||||
|
<BaseButtons>
|
||||||
|
<BaseButton type='submit' color='info' label='Submit' />
|
||||||
|
<BaseButton type='reset' color='info' outline label='Reset' />
|
||||||
|
<BaseButton
|
||||||
|
type='reset'
|
||||||
|
color='danger'
|
||||||
|
outline
|
||||||
|
label='Cancel'
|
||||||
|
onClick={() =>
|
||||||
|
router.push('/scanned_documents/scanned_documents-list')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</BaseButtons>
|
||||||
|
</Form>
|
||||||
|
</Formik>
|
||||||
|
</CardBox>
|
||||||
|
</SectionMain>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Scanned_documentsNew.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return (
|
||||||
|
<LayoutAuthenticated permission={'CREATE_SCANNED_DOCUMENTS'}>
|
||||||
|
{page}
|
||||||
|
</LayoutAuthenticated>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Scanned_documentsNew;
|
||||||
174
frontend/src/pages/claims/scanned_documents-table.tsx
Normal file
174
frontend/src/pages/claims/scanned_documents-table.tsx
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
import { mdiChartTimelineVariant } from '@mdi/js';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import { uniqueId } from 'lodash';
|
||||||
|
import React, { ReactElement, useState } from 'react';
|
||||||
|
import CardBox from '../../components/CardBox';
|
||||||
|
import LayoutAuthenticated from '../../layouts/Authenticated';
|
||||||
|
import SectionMain from '../../components/SectionMain';
|
||||||
|
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
||||||
|
import { getPageTitle } from '../../config';
|
||||||
|
import TableScanned_documents from '../../components/Scanned_documents/TableScanned_documents';
|
||||||
|
import BaseButton from '../../components/BaseButton';
|
||||||
|
import axios from 'axios';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
|
||||||
|
import CardBoxModal from '../../components/CardBoxModal';
|
||||||
|
import DragDropFilePicker from '../../components/DragDropFilePicker';
|
||||||
|
import {
|
||||||
|
setRefetch,
|
||||||
|
uploadCsv,
|
||||||
|
} from '../../stores/scanned_documents/scanned_documentsSlice';
|
||||||
|
|
||||||
|
import { hasPermission } from '../../helpers/userPermissions';
|
||||||
|
|
||||||
|
const Scanned_documentsTablesPage = () => {
|
||||||
|
const [filterItems, setFilterItems] = useState([]);
|
||||||
|
const [csvFile, setCsvFile] = useState<File | null>(null);
|
||||||
|
const [isModalActive, setIsModalActive] = useState(false);
|
||||||
|
const [showTableView, setShowTableView] = useState(false);
|
||||||
|
|
||||||
|
const { currentUser } = useAppSelector((state) => state.auth);
|
||||||
|
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const [filters] = useState([
|
||||||
|
{ label: 'FileName', title: 'file_name' },
|
||||||
|
|
||||||
|
{ label: 'UploadedAt', title: 'uploaded_at', date: 'true' },
|
||||||
|
|
||||||
|
{ label: 'UploadedBy', title: 'uploaded_by' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const hasCreatePermission =
|
||||||
|
currentUser && hasPermission(currentUser, 'CREATE_SCANNED_DOCUMENTS');
|
||||||
|
|
||||||
|
const addFilter = () => {
|
||||||
|
const newItem = {
|
||||||
|
id: uniqueId(),
|
||||||
|
fields: {
|
||||||
|
filterValue: '',
|
||||||
|
filterValueFrom: '',
|
||||||
|
filterValueTo: '',
|
||||||
|
selectedField: '',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
newItem.fields.selectedField = filters[0].title;
|
||||||
|
setFilterItems([...filterItems, newItem]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getScanned_documentsCSV = async () => {
|
||||||
|
const response = await axios({
|
||||||
|
url: '/scanned_documents?filetype=csv',
|
||||||
|
method: 'GET',
|
||||||
|
responseType: 'blob',
|
||||||
|
});
|
||||||
|
const type = response.headers['content-type'];
|
||||||
|
const blob = new Blob([response.data], { type: type });
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = window.URL.createObjectURL(blob);
|
||||||
|
link.download = 'scanned_documentsCSV.csv';
|
||||||
|
link.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onModalConfirm = async () => {
|
||||||
|
if (!csvFile) return;
|
||||||
|
await dispatch(uploadCsv(csvFile));
|
||||||
|
dispatch(setRefetch(true));
|
||||||
|
setCsvFile(null);
|
||||||
|
setIsModalActive(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onModalCancel = () => {
|
||||||
|
setCsvFile(null);
|
||||||
|
setIsModalActive(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>{getPageTitle('Scanned_documents')}</title>
|
||||||
|
</Head>
|
||||||
|
<SectionMain>
|
||||||
|
<SectionTitleLineWithButton
|
||||||
|
icon={mdiChartTimelineVariant}
|
||||||
|
title='Scanned_documents'
|
||||||
|
main
|
||||||
|
>
|
||||||
|
{''}
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
<CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
|
||||||
|
{hasCreatePermission && (
|
||||||
|
<BaseButton
|
||||||
|
className={'mr-3'}
|
||||||
|
href={'/scanned_documents/scanned_documents-new'}
|
||||||
|
color='info'
|
||||||
|
label='New Item'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<BaseButton
|
||||||
|
className={'mr-3'}
|
||||||
|
color='info'
|
||||||
|
label='Filter'
|
||||||
|
onClick={addFilter}
|
||||||
|
/>
|
||||||
|
<BaseButton
|
||||||
|
className={'mr-3'}
|
||||||
|
color='info'
|
||||||
|
label='Download CSV'
|
||||||
|
onClick={getScanned_documentsCSV}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{hasCreatePermission && (
|
||||||
|
<BaseButton
|
||||||
|
color='info'
|
||||||
|
label='Upload CSV'
|
||||||
|
onClick={() => setIsModalActive(true)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className='md:inline-flex items-center ms-auto'>
|
||||||
|
<div id='delete-rows-button'></div>
|
||||||
|
|
||||||
|
<Link href={'/scanned_documents/scanned_documents-list'}>
|
||||||
|
Back to <span className='capitalize'>table</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
<CardBox className='mb-6' hasTable>
|
||||||
|
<TableScanned_documents
|
||||||
|
filterItems={filterItems}
|
||||||
|
setFilterItems={setFilterItems}
|
||||||
|
filters={filters}
|
||||||
|
showGrid={true}
|
||||||
|
/>
|
||||||
|
</CardBox>
|
||||||
|
</SectionMain>
|
||||||
|
<CardBoxModal
|
||||||
|
title='Upload CSV'
|
||||||
|
buttonColor='info'
|
||||||
|
buttonLabel={'Confirm'}
|
||||||
|
// buttonLabel={false ? 'Deleting...' : 'Confirm'}
|
||||||
|
isActive={isModalActive}
|
||||||
|
onConfirm={onModalConfirm}
|
||||||
|
onCancel={onModalCancel}
|
||||||
|
>
|
||||||
|
<DragDropFilePicker
|
||||||
|
file={csvFile}
|
||||||
|
setFile={setCsvFile}
|
||||||
|
formats={'.csv'}
|
||||||
|
/>
|
||||||
|
</CardBoxModal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Scanned_documentsTablesPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return (
|
||||||
|
<LayoutAuthenticated permission={'READ_SCANNED_DOCUMENTS'}>
|
||||||
|
{page}
|
||||||
|
</LayoutAuthenticated>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Scanned_documentsTablesPage;
|
||||||
132
frontend/src/pages/claims/scanned_documents-view.tsx
Normal file
132
frontend/src/pages/claims/scanned_documents-view.tsx
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
import React, { ReactElement, useEffect } from 'react';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import DatePicker from 'react-datepicker';
|
||||||
|
import 'react-datepicker/dist/react-datepicker.css';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { fetch } from '../../stores/scanned_documents/scanned_documentsSlice';
|
||||||
|
import { saveFile } from '../../helpers/fileSaver';
|
||||||
|
import dataFormatter from '../../helpers/dataFormatter';
|
||||||
|
import ImageField from '../../components/ImageField';
|
||||||
|
import LayoutAuthenticated from '../../layouts/Authenticated';
|
||||||
|
import { getPageTitle } from '../../config';
|
||||||
|
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
||||||
|
import SectionMain from '../../components/SectionMain';
|
||||||
|
import CardBox from '../../components/CardBox';
|
||||||
|
import BaseButton from '../../components/BaseButton';
|
||||||
|
import BaseDivider from '../../components/BaseDivider';
|
||||||
|
import { mdiChartTimelineVariant } from '@mdi/js';
|
||||||
|
import { SwitchField } from '../../components/SwitchField';
|
||||||
|
import FormField from '../../components/FormField';
|
||||||
|
|
||||||
|
const Scanned_documentsView = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const { scanned_documents } = useAppSelector(
|
||||||
|
(state) => state.scanned_documents,
|
||||||
|
);
|
||||||
|
|
||||||
|
const { id } = router.query;
|
||||||
|
|
||||||
|
function removeLastCharacter(str) {
|
||||||
|
console.log(str, `str`);
|
||||||
|
return str.slice(0, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(fetch({ id }));
|
||||||
|
}, [dispatch, id]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>{getPageTitle('View scanned_documents')}</title>
|
||||||
|
</Head>
|
||||||
|
<SectionMain>
|
||||||
|
<SectionTitleLineWithButton
|
||||||
|
icon={mdiChartTimelineVariant}
|
||||||
|
title={removeLastCharacter('View scanned_documents')}
|
||||||
|
main
|
||||||
|
>
|
||||||
|
<BaseButton
|
||||||
|
color='info'
|
||||||
|
label='Edit'
|
||||||
|
href={`/scanned_documents/scanned_documents-edit/?id=${id}`}
|
||||||
|
/>
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
<CardBox>
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>FileName</p>
|
||||||
|
<p>{scanned_documents?.file_name}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>File</p>
|
||||||
|
{scanned_documents?.file?.length ? (
|
||||||
|
dataFormatter
|
||||||
|
.filesFormatter(scanned_documents.file)
|
||||||
|
.map((link) => (
|
||||||
|
<button
|
||||||
|
key={link.publicUrl}
|
||||||
|
onClick={(e) => saveFile(e, link.publicUrl, link.name)}
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</button>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p>No File</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormField label='UploadedAt'>
|
||||||
|
{scanned_documents.uploaded_at ? (
|
||||||
|
<DatePicker
|
||||||
|
dateFormat='yyyy-MM-dd hh:mm'
|
||||||
|
showTimeSelect
|
||||||
|
selected={
|
||||||
|
scanned_documents.uploaded_at
|
||||||
|
? new Date(
|
||||||
|
dayjs(scanned_documents.uploaded_at).format(
|
||||||
|
'YYYY-MM-DD hh:mm',
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<p>No UploadedAt</p>
|
||||||
|
)}
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>UploadedBy</p>
|
||||||
|
|
||||||
|
<p>{scanned_documents?.uploaded_by?.firstName ?? 'No data'}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BaseDivider />
|
||||||
|
|
||||||
|
<BaseButton
|
||||||
|
color='info'
|
||||||
|
label='Back'
|
||||||
|
onClick={() =>
|
||||||
|
router.push('/scanned_documents/scanned_documents-list')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</CardBox>
|
||||||
|
</SectionMain>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Scanned_documentsView.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return (
|
||||||
|
<LayoutAuthenticated permission={'READ_SCANNED_DOCUMENTS'}>
|
||||||
|
{page}
|
||||||
|
</LayoutAuthenticated>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Scanned_documentsView;
|
||||||
Loading…
x
Reference in New Issue
Block a user