diff --git a/frontend/src/pages/claims/[scanned_documentsId].tsx b/frontend/src/pages/claims/[scanned_documentsId].tsx new file mode 100644 index 0000000..401d182 --- /dev/null +++ b/frontend/src/pages/claims/[scanned_documentsId].tsx @@ -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 ( + <> + + {getPageTitle('Edit scanned_documents')} + + + + {''} + + + handleSubmit(values)} + > +
+ + + + + + + + + + + setInitialValues({ ...initialValues, uploaded_at: date }) + } + /> + + + + + + + + + + + + router.push('/scanned_documents/scanned_documents-list') + } + /> + + +
+ + + + ); +}; + +EditScanned_documents.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditScanned_documents; diff --git a/frontend/src/pages/claims/scanned_documents-edit.tsx b/frontend/src/pages/claims/scanned_documents-edit.tsx new file mode 100644 index 0000000..21caf32 --- /dev/null +++ b/frontend/src/pages/claims/scanned_documents-edit.tsx @@ -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 ( + <> + + {getPageTitle('Edit scanned_documents')} + + + + {''} + + + handleSubmit(values)} + > +
+ + + + + + + + + + + setInitialValues({ ...initialValues, uploaded_at: date }) + } + /> + + + + + + + + + + + + router.push('/scanned_documents/scanned_documents-list') + } + /> + + +
+ + + + ); +}; + +EditScanned_documentsPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditScanned_documentsPage; diff --git a/frontend/src/pages/claims/scanned_documents-list.tsx b/frontend/src/pages/claims/scanned_documents-list.tsx new file mode 100644 index 0000000..6a71d32 --- /dev/null +++ b/frontend/src/pages/claims/scanned_documents-list.tsx @@ -0,0 +1,171 @@ +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(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 ( + <> + + {getPageTitle('Scanned_documents')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +
+
+
+ + + + + + + + + + + ); +}; + +Scanned_documentsTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default Scanned_documentsTablesPage; diff --git a/frontend/src/pages/claims/scanned_documents-new.tsx b/frontend/src/pages/claims/scanned_documents-new.tsx new file mode 100644 index 0000000..78b91c8 --- /dev/null +++ b/frontend/src/pages/claims/scanned_documents-new.tsx @@ -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 ( + <> + + {getPageTitle('New Item')} + + + + {''} + + + handleSubmit(values)} + > +
+ + + + + + + + + + + + + + + + + + + + + + router.push('/scanned_documents/scanned_documents-list') + } + /> + + +
+ + + + ); +}; + +Scanned_documentsNew.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default Scanned_documentsNew; diff --git a/frontend/src/pages/claims/scanned_documents-table.tsx b/frontend/src/pages/claims/scanned_documents-table.tsx new file mode 100644 index 0000000..5dcde83 --- /dev/null +++ b/frontend/src/pages/claims/scanned_documents-table.tsx @@ -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(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 ( + <> + + {getPageTitle('Scanned_documents')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +
+
+ + + Back to table + +
+ + + + + + + + + + ); +}; + +Scanned_documentsTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default Scanned_documentsTablesPage; diff --git a/frontend/src/pages/claims/scanned_documents-view.tsx b/frontend/src/pages/claims/scanned_documents-view.tsx new file mode 100644 index 0000000..972598b --- /dev/null +++ b/frontend/src/pages/claims/scanned_documents-view.tsx @@ -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 ( + <> + + {getPageTitle('View scanned_documents')} + + + + + + +
+

FileName

+

{scanned_documents?.file_name}

+
+ +
+

File

+ {scanned_documents?.file?.length ? ( + dataFormatter + .filesFormatter(scanned_documents.file) + .map((link) => ( + + )) + ) : ( +

No File

+ )} +
+ + + {scanned_documents.uploaded_at ? ( + + ) : ( +

No UploadedAt

+ )} + + +
+

UploadedBy

+ +

{scanned_documents?.uploaded_by?.firstName ?? 'No data'}

+
+ + + + + router.push('/scanned_documents/scanned_documents-list') + } + /> + + + + ); +}; + +Scanned_documentsView.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default Scanned_documentsView;