39538-vm/frontend/src/pages/access_reviews/access_reviews-new.tsx
2026-04-10 00:48:02 +00:00

612 lines
6.7 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/access_reviews/access_reviewsSlice'
import { useAppDispatch } from '../../stores/hooks'
import { useRouter } from 'next/router'
import moment from 'moment';
const initialValues = {
organization: '',
review_name: '',
review_scope: '',
review_type: 'quarterly_user_access',
reviewer_user: '',
start_date: '',
due_date: '',
status: 'draft',
completion_percentage: '',
notes: '',
}
const Access_reviewsNew = () => {
const router = useRouter()
const dispatch = useAppDispatch()
// get from url params
const { dateRangeStart, dateRangeEnd } = router.query
const handleSubmit = async (data) => {
await dispatch(create(data))
await router.push('/access_reviews/access_reviews-list')
}
return (
<>
<Head>
<title>{getPageTitle('New Item')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
initialValues={
dateRangeStart && dateRangeEnd ?
{
...initialValues,
start_date: moment(dateRangeStart).format('YYYY-MM-DDTHH:mm'),
due_date: moment(dateRangeEnd).format('YYYY-MM-DDTHH:mm'),
} : initialValues
}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label="Organization" labelFor="organization">
<Field name="organization" id="organization" component={SelectField} options={[]} itemRef={'organizations'}></Field>
</FormField>
<FormField
label="ReviewName"
>
<Field
name="review_name"
placeholder="ReviewName"
/>
</FormField>
<FormField label="ReviewScope" hasTextareaHeight>
<Field name="review_scope" as="textarea" placeholder="ReviewScope" />
</FormField>
<FormField label="ReviewType" labelFor="review_type">
<Field name="review_type" id="review_type" component="select">
<option value="quarterly_user_access">quarterly_user_access</option>
<option value="privileged_access">privileged_access</option>
<option value="app_access">app_access</option>
<option value="service_account">service_account</option>
</Field>
</FormField>
<FormField label="Reviewer" labelFor="reviewer_user">
<Field name="reviewer_user" id="reviewer_user" component={SelectField} options={[]} itemRef={'users'}></Field>
</FormField>
<FormField
label="StartDate"
>
<Field
type="datetime-local"
name="start_date"
placeholder="StartDate"
/>
</FormField>
<FormField
label="DueDate"
>
<Field
type="datetime-local"
name="due_date"
placeholder="DueDate"
/>
</FormField>
<FormField label="Status" labelFor="status">
<Field name="status" id="status" component="select">
<option value="draft">draft</option>
<option value="launched">launched</option>
<option value="in_progress">in_progress</option>
<option value="completed">completed</option>
<option value="overdue">overdue</option>
<option value="archived">archived</option>
</Field>
</FormField>
<FormField
label="CompletionPercentage"
>
<Field
type="number"
name="completion_percentage"
placeholder="CompletionPercentage"
/>
</FormField>
<FormField label="Notes" hasTextareaHeight>
<Field name="notes" as="textarea" placeholder="Notes" />
</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('/access_reviews/access_reviews-list')}/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
)
}
Access_reviewsNew.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated
permission={'CREATE_ACCESS_REVIEWS'}
>
{page}
</LayoutAuthenticated>
)
}
export default Access_reviewsNew