34916/frontend/src/pages/archival_items/archival_items-new.tsx
2025-10-17 13:52:28 +00:00

159 lines
4.6 KiB
TypeScript

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/archival_items/archival_itemsSlice';
import { useAppDispatch } from '../../stores/hooks';
import { useRouter } from 'next/router';
import moment from 'moment';
const initialValues = {
label: '',
description: '',
media: [],
isPublished: false,
tags: [],
period: '',
};
const Archival_itemsNew = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const handleSubmit = async (data) => {
await dispatch(create(data));
await router.push('/archival_items/archival_items-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='Label'>
<Field name='label' placeholder='Label' />
</FormField>
<FormField label='Description'>
<Field name='description' placeholder='Description' />
</FormField>
<FormField>
<Field
label='Media'
color='info'
icon={mdiUpload}
path={'archival_items/media'}
name='media'
id='media'
schema={{
size: undefined,
formats: undefined,
}}
component={FormImagePicker}
></Field>
</FormField>
<FormField label='Is Published' labelFor='isPublished'>
<Field
name='isPublished'
id='isPublished'
component={SwitchField}
></Field>
</FormField>
<FormField label='Tags' labelFor='tags'>
<Field
name='tags'
id='tags'
itemRef={'tags'}
options={[]}
component={SelectFieldMany}
></Field>
</FormField>
<FormField label='Period' labelFor='period'>
<Field
name='period'
id='period'
component={SelectField}
options={[]}
itemRef={'periods'}
></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('/archival_items/archival_items-list')
}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
Archival_itemsNew.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'CREATE_ARCHIVAL_ITEMS'}>
{page}
</LayoutAuthenticated>
);
};
export default Archival_itemsNew;