Merge pull request #546 from culturecreates/feature/issue-471

Feature/issue 471

src/components/Card/Common/event.css

@@ -4,3 +4,20 @@
   padding-left: 24px;
   padding-right: 24px;
 }
+
+.add-event-section-col .add-event-section-wrapper {
+  padding: 24px;
+  background-color: #ffffff;
+}
+
+.add-event-section-col .add-event-date-wrap {
+  font-weight: 700;
+  font-size: 24px;
+  color: #222732;
+  margin-bottom: 24px;
+}
+.add-event-section-col .title-required:after {
+  margin-left: 4px;
+  content: '*';
+  color: #f43131;
+}

src/constants/formFields.js

@@ -0,0 +1,59 @@
+import { Form, Input } from 'antd';
+import TextEditor from '../components/TextEditor';
+
+const { TextArea } = Input;
+
+const formTypes = {
+  INPUT: 'Input',
+  MULTISELECT: 'MultiSelect',
+  TEXTAREA: 'TextArea',
+  EDITOR: 'Editor',
+};
+
+export const formFieldValue = [
+  {
+    type: formTypes.INPUT,
+    element: (
+      <TextArea
+        autoSize
+        autoComplete="off"
+        // placeholder={t('dashboard.events.addEditEvent.language.placeHolderFrench')}
+        style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '423px' }}
+        size="large"
+      />
+    ),
+  },
+  {
+    type: formTypes.TEXTAREA,
+    element: (
+      <TextArea
+        autoSize
+        autoComplete="off"
+        style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '423px' }}
+        size="large"
+      />
+    ),
+  },
+  {
+    type: formTypes.EDITOR,
+    element: <TextEditor />,
+  },
+];
+
+export const renderFormFields = ({
+  type,
+  dataType,
+  element,
+  rules = [],
+  initialValue = undefined,
+  name,
+  key,
+  ...rest
+}) => {
+  console.log(type, dataType);
+  return (
+    <Form.Item name={name} key={key} initialValue={initialValue} rules={rules} {...rest}>
+      {element}
+    </Form.Item>
+  );
+};

src/locales/en/translationEn.json

@@ -457,11 +457,11 @@
           "breadcrumb": "Back to previous screen",
           "linkText": "Artsdata",
           "createNew": "Create new organization",
-          "create": "Create",
-          "addOrganization": {
-            "newOrganization": "New Organization",
-            "editOrganization": "Edit Organization"
-          }
+          "create": "Create"
+        },
+        "addOrganization": {
+          "newOrganization": "New Organization",
+          "editOrganization": "Edit Organization"
         }
       }
     },

src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx

@@ -1,54 +1,114 @@
 import React from 'react';
 import './createNewOrganization.css';
+import '../AddEvent/addEvent.css';
 import { Form, Row, Col, Button } from 'antd';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useOutletContext } from 'react-router-dom';
 import { LeftOutlined } from '@ant-design/icons';
 import PrimaryButton from '../../../components/Button/Primary';
 import { featureFlags } from '../../../utils/featureFlags';
 import FeatureFlag from '../../../layout/FeatureFlag/FeatureFlag';
+import { entitiesClass } from '../../../constants/entitiesClass';
+import Card from '../../../components/Card/Common/Event';
+import { formFieldValue, renderFormFields } from '../../../constants/formFields';
+import { useSelector } from 'react-redux';
+import { getUserDetails } from '../../../redux/reducer/userSlice';
+import { contentLanguageBilingual } from '../../../utils/bilingual';
 
 function CreateNewOrganization() {
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const [currentCalendarData] = useOutletContext();
+  const { user } = useSelector(getUserDetails);
 
+  const calendarContentLanguage = currentCalendarData?.contentLanguage;
+
+  let formFields = currentCalendarData?.forms?.filter((form) => form?.formName === entitiesClass.organization);
+  formFields = formFields?.length > 0 && formFields[0];
+  let category = formFields?.formFields?.map((field) => field?.category);
+  let unique;
+  let fields;
+  if (category) unique = [...new Set(category)];
+  if (unique)
+    fields = formFields?.formFields
+      ?.filter((field) => field.category === unique[0])
+      ?.sort((a, b) => a?.order - b?.order);
+
+  if (unique?.length > 0) {
+    fields = unique?.map((category) => {
+      return formFields?.formFields
+        ?.filter((field) => field.category === category)
+        ?.sort((a, b) => a?.order - b?.order);
+    });
+  }
+
+  console.log(fields);
   return (
-    <FeatureFlag isFeatureEnabled={featureFlags.editScreenPeoplePlaceOrganization}>
-      <div>
-        <Form form={form} layout="vertical" name="event">
-          <Row gutter={[32, 2]} className="add-edit-wrapper add-organization-wrapper">
-            <Col span={24}>
-              <Row justify="space-between">
-                <Col>
-                  <div className="button-container">
-                    <Button
-                      type="link"
-                      onClick={() => navigate(-1)}
-                      icon={<LeftOutlined style={{ marginRight: '17px' }} />}>
-                      {t('dashboard.organization.createNew.search.breadcrumb')}
-                    </Button>
-                  </div>
-                </Col>
-                <Col>
-                  <div className="add-event-button-wrap">
-                    <Form.Item>
-                      <PrimaryButton label={t('dashboard.events.addEditEvent.saveOptions.save')} />
-                    </Form.Item>
-                  </div>
-                </Col>
-              </Row>
-            </Col>
+    fields && (
+      <FeatureFlag isFeatureEnabled={featureFlags.editScreenPeoplePlaceOrganization}>
+        <div>
+          <Form form={form} layout="vertical" name="event">
+            <Row gutter={[32, 2]} className="add-edit-wrapper add-organization-wrapper">
+              <Col span={24}>
+                <Row justify="space-between">
+                  <Col>
+                    <div className="button-container">
+                      <Button
+                        type="link"
+                        onClick={() => navigate(-1)}
+                        icon={<LeftOutlined style={{ marginRight: '17px' }} />}>
+                        {t('dashboard.organization.createNew.search.breadcrumb')}
+                      </Button>
+                    </div>
+                  </Col>
+                  <Col>
+                    <div className="add-event-button-wrap">
+                      <Form.Item>
+                        <PrimaryButton label={t('dashboard.events.addEditEvent.saveOptions.save')} />
+                      </Form.Item>
+                    </div>
+                  </Col>
+                </Row>
+              </Col>
 
-            <Col>
-              <div className="add-edit-event-heading">
-                <h4>{t('dashboard.organization.createNew.addOrganization.newOrganization')}</h4>
-              </div>
-            </Col>
-          </Row>
-        </Form>
-      </div>
-    </FeatureFlag>
+              <Col>
+                <div className="add-edit-event-heading">
+                  <h4>{t('dashboard.organization.createNew.addOrganization.newOrganization')}</h4>
+                </div>
+              </Col>
+            </Row>
+            {fields?.map((section, index) => {
+              return (
+                <Card title={section[0]?.category} key={index}>
+                  <>
+                    {section?.map((field) => {
+                      return formFieldValue?.map((formField, index) => {
+                        if (formField?.type === field.type) {
+                          return renderFormFields({
+                            type: field?.type,
+                            dataType: field?.datatype,
+                            element: formField?.element,
+                            key: index,
+                            label: contentLanguageBilingual({
+                              en: field?.label?.en,
+                              fr: field?.label?.fr,
+                              interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
+                              calendarContentLanguage: calendarContentLanguage,
+                            }),
+                          });
+                        }
+                      });
+                    })}
+                  </>
+                  <></>
+                </Card>
+              );
+            })}
+          </Form>
+        </div>
+      </FeatureFlag>
+    )
   );
 }