Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3c5736c929 | ||
|
|
6c0ade74e1 |
5
.gitignore
vendored
5
.gitignore
vendored
@ -1,3 +1,8 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
*/node_modules/
|
*/node_modules/
|
||||||
*/build/
|
*/build/
|
||||||
|
|
||||||
|
**/node_modules/
|
||||||
|
**/build/
|
||||||
|
.DS_Store
|
||||||
|
.env
|
||||||
File diff suppressed because one or more lines are too long
1
frontend/json/runtimeError.json
Normal file
1
frontend/json/runtimeError.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
{}
|
||||||
@ -1,103 +1,190 @@
|
|||||||
import {
|
import React, { useState } from 'react';
|
||||||
mdiAccount,
|
|
||||||
mdiChartTimelineVariant,
|
|
||||||
mdiMail,
|
|
||||||
mdiUpload,
|
|
||||||
} from '@mdi/js';
|
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import React, { ReactElement } from 'react';
|
import { Formik, Form, Field, FieldArray } from 'formik';
|
||||||
import CardBox from '../../components/CardBox';
|
|
||||||
import LayoutAuthenticated from '../../layouts/Authenticated';
|
|
||||||
import SectionMain from '../../components/SectionMain';
|
import SectionMain from '../../components/SectionMain';
|
||||||
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
||||||
import { getPageTitle } from '../../config';
|
import CardBox from '../../components/CardBox';
|
||||||
|
|
||||||
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 BaseButton from '../../components/BaseButton';
|
||||||
import FormCheckRadio from '../../components/FormCheckRadio';
|
import BaseButtons from '../../components/BaseButtons';
|
||||||
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
|
import BaseDivider from '../../components/BaseDivider';
|
||||||
import FormFilePicker from '../../components/FormFilePicker';
|
import FormField from '../../components/FormField';
|
||||||
import FormImagePicker from '../../components/FormImagePicker';
|
|
||||||
import { SwitchField } from '../../components/SwitchField';
|
|
||||||
|
|
||||||
import { SelectField } from '../../components/SelectField';
|
import { SelectField } from '../../components/SelectField';
|
||||||
import { SelectFieldMany } from '../../components/SelectFieldMany';
|
import { SelectFieldMany } from '../../components/SelectFieldMany';
|
||||||
import { RichTextField } from '../../components/RichTextField';
|
import { mdiChartTimelineVariant } from '@mdi/js';
|
||||||
|
|
||||||
import { create } from '../../stores/rfqs/rfqsSlice';
|
|
||||||
import { useAppDispatch } from '../../stores/hooks';
|
import { useAppDispatch } from '../../stores/hooks';
|
||||||
|
import { create as createRfqs } from '../../stores/rfqs/rfqsSlice';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import moment from 'moment';
|
|
||||||
|
|
||||||
const initialValues = {
|
const initialValues = {
|
||||||
client_name: '',
|
client_name: '',
|
||||||
|
|
||||||
system_type: '',
|
system_type: '',
|
||||||
|
|
||||||
custom_options: [],
|
custom_options: [],
|
||||||
|
rfqnumber: '',
|
||||||
|
client_address: '',
|
||||||
|
status: 'draft',
|
||||||
|
locations: [
|
||||||
|
{
|
||||||
|
safety_item_1: '',
|
||||||
|
safety_item_2: '',
|
||||||
|
safety_item_3: '',
|
||||||
|
safety_item_4: '',
|
||||||
|
safety_item_5: '',
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
const RfqsNew = () => {
|
const RfqsNew = () => {
|
||||||
const router = useRouter();
|
const [step, setStep] = useState(0);
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
const handleSubmit = async (data) => {
|
const handleSubmit = async (values) => {
|
||||||
await dispatch(create(data));
|
await dispatch(createRfqs(values));
|
||||||
await router.push('/rfqs/rfqs-list');
|
router.push('/rfqs/rfqs-list');
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('New Item')}</title>
|
<title>New RFQ</title>
|
||||||
</Head>
|
</Head>
|
||||||
<SectionMain>
|
<SectionMain>
|
||||||
<SectionTitleLineWithButton
|
<SectionTitleLineWithButton
|
||||||
icon={mdiChartTimelineVariant}
|
icon={mdiChartTimelineVariant}
|
||||||
title='New Item'
|
title={step === 0 ? 'RFQ Details' : 'RFQ Locations'}
|
||||||
main
|
main
|
||||||
>
|
/>
|
||||||
{''}
|
|
||||||
</SectionTitleLineWithButton>
|
|
||||||
<CardBox>
|
<CardBox>
|
||||||
<Formik
|
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
|
||||||
initialValues={initialValues}
|
{({ values }) => (
|
||||||
onSubmit={(values) => handleSubmit(values)}
|
<Form>
|
||||||
>
|
{step === 0 && (
|
||||||
<Form>
|
<>
|
||||||
<FormField label='ClientName'>
|
<FormField label="Client Name">
|
||||||
<Field name='client_name' placeholder='ClientName' />
|
<Field name="client_name" placeholder="Client Name" />
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
<FormField label='SystemType'>
|
<FormField label="Client Address">
|
||||||
<Field name='system_type' placeholder='SystemType' />
|
<Field name="client_address" placeholder="Client Address" />
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
<FormField label='CustomOptions' labelFor='custom_options'>
|
<FormField label="System Type" labelFor="system_type">
|
||||||
<Field
|
<Field
|
||||||
name='custom_options'
|
name="system_type"
|
||||||
id='custom_options'
|
id="system_type"
|
||||||
itemRef={'custom_options'}
|
component={SelectField}
|
||||||
options={[]}
|
options={[
|
||||||
component={SelectFieldMany}
|
{ value: 'Standard', label: 'Standard' },
|
||||||
></Field>
|
{ value: 'Custom', label: 'Custom' },
|
||||||
</FormField>
|
]}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
<BaseDivider />
|
<FormField label="RFQ Number">
|
||||||
<BaseButtons>
|
<Field name="rfqnumber" type="number" placeholder="RFQ Number" />
|
||||||
<BaseButton type='submit' color='info' label='Submit' />
|
</FormField>
|
||||||
<BaseButton type='reset' color='info' outline label='Reset' />
|
|
||||||
<BaseButton
|
<FormField label="Custom Options" labelFor="custom_options">
|
||||||
type='reset'
|
<Field
|
||||||
color='danger'
|
name="custom_options"
|
||||||
outline
|
id="custom_options"
|
||||||
label='Cancel'
|
itemRef="custom_options"
|
||||||
onClick={() => router.push('/rfqs/rfqs-list')}
|
component={SelectFieldMany}
|
||||||
/>
|
options={[]}
|
||||||
</BaseButtons>
|
/>
|
||||||
</Form>
|
</FormField>
|
||||||
|
|
||||||
|
<BaseDivider />
|
||||||
|
<BaseButtons>
|
||||||
|
<BaseButton
|
||||||
|
type="button"
|
||||||
|
color="info"
|
||||||
|
label="Next"
|
||||||
|
onClick={() => setStep(1)}
|
||||||
|
/>
|
||||||
|
</BaseButtons>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{step === 1 && (
|
||||||
|
<>
|
||||||
|
<FieldArray name="locations">
|
||||||
|
{({ remove, push }) => (
|
||||||
|
<>
|
||||||
|
{values.locations.map((loc, index) => (
|
||||||
|
<div key={index} style={{ marginBottom: '1rem' }}>
|
||||||
|
<h4>Location #{index + 1}</h4>
|
||||||
|
<FormField label="Safety Item 1">
|
||||||
|
<Field
|
||||||
|
name={`locations[${index}].safety_item_1`}
|
||||||
|
placeholder="Safety Item 1"
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Safety Item 2">
|
||||||
|
<Field
|
||||||
|
name={`locations[${index}].safety_item_2`}
|
||||||
|
placeholder="Safety Item 2"
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Safety Item 3">
|
||||||
|
<Field
|
||||||
|
name={`locations[${index}].safety_item_3`}
|
||||||
|
placeholder="Safety Item 3"
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Safety Item 4">
|
||||||
|
<Field
|
||||||
|
name={`locations[${index}].safety_item_4`}
|
||||||
|
placeholder="Safety Item 4"
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Safety Item 5">
|
||||||
|
<Field
|
||||||
|
name={`locations[${index}].safety_item_5`}
|
||||||
|
placeholder="Safety Item 5"
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<BaseButton
|
||||||
|
type="button"
|
||||||
|
color="danger"
|
||||||
|
outline
|
||||||
|
label="Remove"
|
||||||
|
onClick={() => remove(index)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<BaseButton
|
||||||
|
type="button"
|
||||||
|
color="success"
|
||||||
|
label="Add Location"
|
||||||
|
onClick={() =>
|
||||||
|
push({
|
||||||
|
safety_item_1: '',
|
||||||
|
safety_item_2: '',
|
||||||
|
safety_item_3: '',
|
||||||
|
safety_item_4: '',
|
||||||
|
safety_item_5: '',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</FieldArray>
|
||||||
|
|
||||||
|
<BaseDivider />
|
||||||
|
<BaseButtons>
|
||||||
|
<BaseButton
|
||||||
|
type="button"
|
||||||
|
color="info"
|
||||||
|
outline
|
||||||
|
label="Back"
|
||||||
|
onClick={() => setStep(0)}
|
||||||
|
/>
|
||||||
|
<BaseButton type="submit" color="success" label="Submit" />
|
||||||
|
</BaseButtons>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
</CardBox>
|
</CardBox>
|
||||||
</SectionMain>
|
</SectionMain>
|
||||||
@ -105,10 +192,8 @@ const RfqsNew = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
RfqsNew.getLayout = function getLayout(page: ReactElement) {
|
RfqsNew.getLayout = function getLayout(page) {
|
||||||
return (
|
return page;
|
||||||
<LayoutAuthenticated permission={'CREATE_RFQS'}>{page}</LayoutAuthenticated>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default RfqsNew;
|
export default RfqsNew;
|
||||||
Loading…
x
Reference in New Issue
Block a user