39948-vm/frontend/src/pages/presigned_url_requests/presigned_url_requests-new.tsx
2026-03-24 08:20:27 +04:00

165 lines
5.1 KiB
TypeScript

/**
* New Presigned URL Requests Page
* Cleaned up version
*/
import { mdiChartTimelineVariant } 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 { SelectField } from '../../components/SelectField';
import { create } from '../../stores/presigned_url_requests/presigned_url_requestsSlice';
import { useAppDispatch } from '../../stores/hooks';
import { useRouter } from 'next/router';
import type { PresignedUrlRequest } from '../../types/entities';
const initialValues = {
project: '',
user: '',
purpose: 'upload',
asset_type: 'image',
requested_key: '',
mime_type: '',
requested_size_mb: '',
expires_at: '',
status: '',
};
const Presigned_url_requestsNew = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const handleSubmit = async (data: typeof initialValues) => {
await dispatch(create(data as unknown as Partial<PresignedUrlRequest>));
await router.push('/presigned_url_requests/presigned_url_requests-list');
};
return (
<>
<Head>
<title>{getPageTitle('New Presigned URL Request')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title='New Presigned URL Request'
main
>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='Project' labelFor='project'>
<Field
name='project'
id='project'
component={SelectField}
options={[]}
itemRef='projects'
/>
</FormField>
<FormField label='User' labelFor='user'>
<Field
name='user'
id='user'
component={SelectField}
options={[]}
itemRef='users'
/>
</FormField>
<FormField label='Purpose' labelFor='purpose'>
<Field name='purpose' id='purpose' component='select'>
<option value='upload'>upload</option>
<option value='download'>download</option>
</Field>
</FormField>
<FormField label='Asset Type' labelFor='asset_type'>
<Field name='asset_type' id='asset_type' component='select'>
<option value='image'>image</option>
<option value='video'>video</option>
<option value='audio'>audio</option>
<option value='file'>file</option>
</Field>
</FormField>
<FormField label='Requested Key'>
<Field name='requested_key' placeholder='Requested Key' />
</FormField>
<FormField label='MIME Type'>
<Field name='mime_type' placeholder='MIME Type' />
</FormField>
<FormField label='Requested Size (MB)'>
<Field
type='number'
name='requested_size_mb'
placeholder='Requested Size (MB)'
/>
</FormField>
<FormField label='Expires At'>
<Field
type='datetime-local'
name='expires_at'
placeholder='Expires At'
/>
</FormField>
<FormField label='Status'>
<Field name='status' placeholder='Status' />
</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(
'/presigned_url_requests/presigned_url_requests-list',
)
}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
Presigned_url_requestsNew.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission='CREATE_PRESIGNED_URL_REQUESTS'>
{page}
</LayoutAuthenticated>
);
};
export default Presigned_url_requestsNew;