Skip to content

Commit

Permalink
Merge pull request #459 from culturecreates/feature/issue-131
Browse files Browse the repository at this point in the history 
Feature/issue 131
  • Loading branch information
@AbhishekPAnil
AbhishekPAnil authored Aug 4, 2023
2 parents 88f7a51 + 08d091b commit 156eb38
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 130 deletions.
310 changes: 180 additions & 130 deletions src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import React, { useRef } from 'react';
import './quickCreatePerson.css';
import { CloseCircleOutlined } from '@ant-design/icons';
import CustomModal from '../Common/CustomModal';
import TextButton from '../../Button/Text/Text';
import { useTranslation } from 'react-i18next';
Expand All @@ -9,11 +10,17 @@ import ContentLanguageInput from '../../ContentLanguageInput/ContentLanguageInpu
import { contentLanguage } from '../../../constants/contentLanguage';
import BilingualInput from '../../BilingualInput/BilingualInput';
import StyledInput from '../../Input/Common';
import { treeEntitiesOption } from '../../TreeSelectOption/treeSelectOption.settings';
import { treeEntitiesOption, treeTaxonomyOptions } from '../../TreeSelectOption/treeSelectOption.settings';
import { useSelector } from 'react-redux';
import { getUserDetails } from '../../../redux/reducer/userSlice';
import { entitiesClass } from '../../../constants/entitiesClass';
import { useAddPersonMutation, useLazyGetPersonQuery } from '../../../services/people';
import { useGetAllTaxonomyQuery } from '../../../services/taxonomy';
import { taxonomyClass } from '../../../constants/taxonomyClass';
import { taxonomyDetails } from '../../../utils/taxonomyDetails';
import NoContent from '../../NoContent/NoContent';
import TreeSelectOption from '../../TreeSelectOption/TreeSelectOption';
import Tags from '../../Tags/Common/Tags';

const { TextArea } = Input;

Expand All @@ -37,9 +44,17 @@ function QuickCreatePerson(props) {
} = props;
const [form] = Form.useForm();
const { t } = useTranslation();
const timestampRef = useRef(Date.now()).current;

const { user } = useSelector(getUserDetails);

const { currentData: allTaxonomyData, isLoading: taxonomyLoading } = useGetAllTaxonomyQuery({
calendarId,
search: '',
taxonomyClass: taxonomyClass.PERSON,
includeConcepts: true,
sessionId: timestampRef,
});
const [addPerson] = useAddPersonMutation();
const [getPerson] = useLazyGetPersonQuery();

Expand Down Expand Up @@ -83,6 +98,7 @@ function QuickCreatePerson(props) {
var values = form.getFieldsValue(true);
let name = {},
url = {},
occupation = [],
personObj = {};

if (values?.english)
Expand All @@ -100,9 +116,17 @@ function QuickCreatePerson(props) {
url = {
uri: values?.contactWebsiteUrl,
};
if (values?.occupation) {
occupation = values?.occupation?.map((occupationId) => {
return {
entityId: occupationId,
};
});
}
personObj = {
name,
url,
occupation,
};
addPerson({ data: personObj, calendarId })
.unwrap()
Expand All @@ -125,138 +149,164 @@ function QuickCreatePerson(props) {
.catch((error) => console.log(error));
};
return (
<CustomModal
open={open}
destroyOnClose
centered
title={
<span className="quick-create-person-modal-title">
{t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.title')}
</span>
}
onCancel={() => setOpen(false)}
footer={[
<TextButton
key="cancel"
size="large"
label={t('dashboard.events.addEditEvent.quickCreate.cancel')}
onClick={() => setOpen(false)}
/>,
<PrimaryButton
key="add-dates"
label={t('dashboard.events.addEditEvent.quickCreate.create')}
onClick={createPersonHandler}
/>,
]}>
<Row gutter={[0, 10]} className="quick-create-person-modal-wrapper">
<Col span={24}>
<Form form={form} layout="vertical" name="organizerForm" preserve={false}>
<Row>
<Col>
<p className="quick-create-person-modal-sub-heading">
{t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.subHeading')}
</p>
</Col>
</Row>
<Row>
<Col>
<span className="quick-create-person-modal-label">
{t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.name')}
</span>
</Col>
</Row>
<ContentLanguageInput calendarContentLanguage={calendarContentLanguage}>
<BilingualInput defaultTab={interfaceLanguage}>
<Form.Item
name="french"
key={contentLanguage.FRENCH}
initialValue={
calendarContentLanguage === contentLanguage.BILINGUAL
? interfaceLanguage === 'fr'
!taxonomyLoading && (
<CustomModal
open={open}
destroyOnClose
centered
title={
<span className="quick-create-person-modal-title">
{t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.title')}
</span>
}
onCancel={() => setOpen(false)}
footer={[
<TextButton
key="cancel"
size="large"
label={t('dashboard.events.addEditEvent.quickCreate.cancel')}
onClick={() => setOpen(false)}
/>,
<PrimaryButton
key="add-dates"
label={t('dashboard.events.addEditEvent.quickCreate.create')}
onClick={createPersonHandler}
/>,
]}>
<Row gutter={[0, 10]} className="quick-create-person-modal-wrapper">
<Col span={24}>
<Form form={form} layout="vertical" name="organizerForm" preserve={false}>
<Row>
<Col>
<p className="quick-create-person-modal-sub-heading">
{t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.subHeading')}
</p>
</Col>
</Row>
<Row>
<Col>
<span className="quick-create-person-modal-label">
{t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.name')}
</span>
</Col>
</Row>
<ContentLanguageInput calendarContentLanguage={calendarContentLanguage}>
<BilingualInput defaultTab={interfaceLanguage}>
<Form.Item
name="french"
key={contentLanguage.FRENCH}
initialValue={
calendarContentLanguage === contentLanguage.BILINGUAL
? interfaceLanguage === 'fr'
? keyword
: undefined
: calendarContentLanguage === contentLanguage.FRENCH
? keyword
: undefined
: calendarContentLanguage === contentLanguage.FRENCH
? keyword
: undefined
}
dependencies={['english']}
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (value || getFieldValue('english')) {
return Promise.resolve();
} else
return Promise.reject(
new Error(
t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.validations.name'),
),
);
},
}),
]}>
<TextArea
autoSize
autoComplete="off"
placeholder={t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.namePlaceholder')}
style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '100%' }}
size="large"
/>
</Form.Item>
<Form.Item
name="english"
dependencies={['french']}
initialValue={
calendarContentLanguage === contentLanguage.BILINGUAL
? interfaceLanguage === 'en'
}
dependencies={['english']}
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (value || getFieldValue('english')) {
return Promise.resolve();
} else
return Promise.reject(
new Error(
t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.validations.name'),
),
);
},
}),
]}>
<TextArea
autoSize
autoComplete="off"
placeholder={t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.namePlaceholder')}
style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '100%' }}
size="large"
/>
</Form.Item>
<Form.Item
name="english"
dependencies={['french']}
initialValue={
calendarContentLanguage === contentLanguage.BILINGUAL
? interfaceLanguage === 'en'
? keyword
: undefined
: calendarContentLanguage === contentLanguage.ENGLISH
? keyword
: undefined
: calendarContentLanguage === contentLanguage.ENGLISH
? keyword
: undefined
}
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (value || getFieldValue('french')) {
return Promise.resolve();
} else
return Promise.reject(
new Error(
t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.validations.name'),
),
);
},
}),
]}>
<TextArea
autoSize
autoComplete="off"
placeholder={t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.namePlaceholder')}
style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '100%' }}
size="large"
/>
</Form.Item>
</BilingualInput>
</ContentLanguageInput>
<Form.Item
name="contactWebsiteUrl"
label={t('dashboard.events.addEditEvent.otherInformation.contact.website')}
rules={[
{
type: 'url',
message: t('dashboard.events.addEditEvent.validations.url'),
},
]}>
<StyledInput
addonBefore="https://"
autoComplete="off"
placeholder={t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.websitePlaceholder')}
/>
</Form.Item>
</Form>
</Col>
</Row>
</CustomModal>
}
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (value || getFieldValue('french')) {
return Promise.resolve();
} else
return Promise.reject(
new Error(
t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.validations.name'),
),
);
},
}),
]}>
<TextArea
autoSize
autoComplete="off"
placeholder={t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.namePlaceholder')}
style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '100%' }}
size="large"
/>
</Form.Item>
</BilingualInput>
</ContentLanguageInput>
<Form.Item
name="occupation"
label={taxonomyDetails(allTaxonomyData?.data, user, 'Occupation', 'name', false)}
hidden={taxonomyDetails(allTaxonomyData?.data, user, 'Occupation', 'name', false) ? false : true}>
<TreeSelectOption
placeholder={t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.occupationPlaceholder')}
allowClear
treeDefaultExpandAll
notFoundContent={<NoContent />}
clearIcon={<CloseCircleOutlined style={{ color: '#1b3de6', fontSize: '14px' }} />}
treeData={treeTaxonomyOptions(allTaxonomyData, user, 'Occupation', false, calendarContentLanguage)}
tagRender={(props) => {
const { label, closable, onClose } = props;
return (
<Tags
closable={closable}
onClose={onClose}
closeIcon={<CloseCircleOutlined style={{ color: '#1b3de6', fontSize: '12px' }} />}>
{label}
</Tags>
);
}}
/>
</Form.Item>
<Form.Item
name="contactWebsiteUrl"
label={t('dashboard.events.addEditEvent.otherInformation.contact.website')}
rules={[
{
type: 'url',
message: t('dashboard.events.addEditEvent.validations.url'),
},
]}>
<StyledInput
addonBefore="https://"
autoComplete="off"
placeholder={t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.websitePlaceholder')}
/>
</Form.Item>
</Form>
</Col>
</Row>
</CustomModal>
)
);
}

Expand Down
1 change: 1 addition & 0 deletions src/locales/en/translationEn.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,7 @@
"name": "Name",
"success": "Success! Your person has been created.",
"namePlaceholder": "Enter a name",
"occupationPlaceholder": "Select occupation",
"website": "Website",
"websitePlaceholder": "Enter website",
"validations": {
Expand Down
1 change: 1 addition & 0 deletions src/locales/fr/transalationFr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,7 @@
"success": "Succès ! Votre personne a été créé.",
"namePlaceholder": "Entrez un nom",
"websitePlaceholder": "Entrez un site web",
"occupationPlaceholder": "Sélectionnez une profession",
"website": "Site web",
"validations": {
"name": "Le nom est requis."
Expand Down

0 comments on commit 156eb38

Please sign in to comment.