Merge pull request #1128 from culturecreates/develop

Develop
culturecreates · May 28, 2024 · 6a3672b · 6a3672b
2 parents b210037 + 7b0011d
commit 6a3672b
Show file tree

Hide file tree

Showing 52 changed files with 3,720 additions and 262 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+/.vscode    
 
 # testing
 /coverage

diff --git a/src/components/BilingualTextEditor/BilingualTextEditor.jsx b/src/components/BilingualTextEditor/BilingualTextEditor.jsx
@@ -10,17 +10,17 @@ function BilingualTextEditor(props) {
   const { t } = useTranslation();
   const reactQuillRefFr = useRef(null);
   const reactQuillRefEn = useRef(null);
-  const [descriptionMinimumWordCount] = useState(props?.descriptionMinimumWordCount ?? null);
+  const [descriptionMinimumWordCount] = useState(props?.descriptionMinimumWordCount ?? 1);
 
   return (
     <ContentLanguageInput calendarContentLanguage={calendarContentLanguage}>
       <BilingualInput fieldData={data}>
         <TextEditor
-          formName={name?.concat(['fr'])}
+          formName={[`${name}`, 'fr']}
           key={contentLanguage.FRENCH}
           calendarContentLanguage={calendarContentLanguage}
           initialValue={data?.fr}
-          dependencies={name?.concat(['en'])}
+          dependencies={[`${name}`, 'en']}
           editorLanguage={'fr'}
           placeholder={placeholder?.fr}
           currentReactQuillRef={reactQuillRefFr}
@@ -83,11 +83,11 @@ function BilingualTextEditor(props) {
         />
 
         <TextEditor
-          formName={name?.concat(['en'])}
+          formName={[`${name}`, 'en']}
           key={contentLanguage.ENGLISH}
           initialValue={data?.en}
           calendarContentLanguage={calendarContentLanguage}
-          dependencies={name?.concat(['fr'])}
+          dependencies={[`${name}`, 'fr']}
           editorLanguage={'en'}
           placeholder={placeholder?.en}
           descriptionMinimumWordCount={descriptionMinimumWordCount}

diff --git a/src/components/Button/AddField/AddField.jsx b/src/components/Button/AddField/AddField.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import './addField.css';
+
+function AddField(props) {
+  const { label, onClick, icon, disabled } = props;
+  return (
+    <div type="text" size="large" onClick={onClick} {...props} className={`add-field-wrapper`}>
+      <span className={`add-field-icon ${disabled ? 'disabled' : 'enabled'}`}>{icon}</span>
+      <span className={`add-field-label ${disabled ? 'disabled' : 'enabled'}`}> {label}</span>
+    </div>
+  );
+}
+
+export default AddField;
diff --git a/src/components/Button/AddField/addField.css b/src/components/Button/AddField/addField.css
@@ -0,0 +1,39 @@
+.add-field-wrapper {
+  display: flex;
+  gap: 8px;
+}
+
+.add-field-wrapper .disabled {
+  background-color: #f7f7f7;
+  color: #646d7b;
+  cursor: not-allowed;
+}
+
+.add-field-wrapper .enabled {
+  background: #eff2ff;
+  color: #1b3de6;
+  cursor: pointer;
+}
+
+.add-field-wrapper .add-field-icon {
+  border-radius: 4px;
+  border: 0px;
+  height: 20px;
+  width: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.add-field-wrapper .add-field-label {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  max-width: 170px;
+  height: auto;
+  text-align: left;
+  white-space: pre-line;
+  display: contents;
+  word-break: break-word;
+}
diff --git a/src/components/Button/AddField/index.js b/src/components/Button/AddField/index.js
@@ -0,0 +1 @@
+export { default } from './AddField';
diff --git a/src/components/Card/MandatoryField/MandatoryField.jsx b/src/components/Card/MandatoryField/MandatoryField.jsx
@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import './mandatoryField.css';
+import { Card, Col, Divider, Row } from 'antd';
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
+import { bilingual } from '../../../utils/bilingual';
+import { useSelector } from 'react-redux';
+import { getUserDetails } from '../../../redux/reducer/userSlice';
+import AddField from '../../Button/AddField';
+import { useTranslation } from 'react-i18next';
+
+function MandatoryField(props) {
+  const { field, formName, formLabel } = props;
+  let { updatedFormFields } = props;
+  const { user } = useSelector(getUserDetails);
+  const { t } = useTranslation();
+
+  const [addedFields, setAddedFields] = useState(field?.filter((f) => f?.isRequiredField || f?.preFilled));
+  const [availableFields, setAvailableFields] = useState(
+    field?.filter((f) => !f?.isRequiredField && !f?.preFilled && !f?.isAdminOnlyField),
+  );
+
+  const removeFromFields = (index) => {
+    let removedField = addedFields[index];
+    removedField = {
+      ...removedField,
+      isRequiredField: false,
+    };
+    if (!removedField?.preFilled) {
+      let updatedFields = addedFields.filter((field, i) => i !== index);
+      updatedFormFields = updatedFormFields?.map((f) => {
+        if (f.formName === formName) {
+          f.formFields = updatedFields?.concat([...availableFields, removedField]);
+        }
+        return f;
+      });
+
+      setAddedFields(updatedFields);
+      setAvailableFields([...availableFields, removedField]);
+    }
+  };
+
+  const addToFields = (field) => {
+    let updatedFields = availableFields.filter((f) => f?.mappedField !== field?.mappedField);
+    updatedFields = updatedFields?.map((f) => {
+      return {
+        ...f,
+        isRequiredField: false,
+      };
+    });
+    updatedFormFields = updatedFormFields?.map((f) => {
+      if (f.formName === formName) {
+        f.formFields = updatedFields?.concat([...addedFields, { ...field, isRequiredField: true }]);
+      }
+      return f;
+    });
+    setAddedFields([...addedFields, { ...field, isRequiredField: true }]);
+    setAvailableFields(updatedFields);
+  };
+
+  return (
+    <Card className="mandatory-card-wrapper" bodyStyle={{ padding: '24px 16px 24px 16px' }}>
+      <Row gutter={[0, 18]}>
+        <Col span={24}>
+          <h5 className="mandatory-field-class-heading">{formLabel}</h5>
+        </Col>
+        <Col span={11}>
+          <h5 className="mandatory-field-required">{t('dashboard.settings.mandatoryFields.title')}</h5>
+          {addedFields.map((field, index) => (
+            <Row key={index}>
+              <Col span={24}>
+                <AddField
+                  key={index}
+                  label={bilingual({
+                    en: field?.label?.en,
+                    fr: field?.label?.fr,
+                    interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
+                  })}
+                  disabled={field?.preFilled}
+                  onClick={() => removeFromFields(index)}
+                  icon={<MinusOutlined />}
+                />
+              </Col>
+            </Row>
+          ))}
+        </Col>
+        <Col>
+          <Divider type="vertical" style={{ height: '100%', border: '1px solid #B6C1C9' }} />
+        </Col>
+        <Col span={11} push={1}>
+          <h5 className="mandatory-field-available">{t('dashboard.settings.mandatoryFields.availableFields')}</h5>
+          {availableFields.map((field, index) => (
+            <Row key={index}>
+              <Col span={24}>
+                <AddField
+                  key={index}
+                  label={bilingual({
+                    en: field?.label?.en,
+                    fr: field?.label?.fr,
+                    interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
+                  })}
+                  onClick={() => addToFields(field)}
+                  icon={<PlusOutlined />}
+                />
+              </Col>
+            </Row>
+          ))}
+        </Col>
+      </Row>
+    </Card>
+  );
+}
+
+export default MandatoryField;
diff --git a/src/components/Card/MandatoryField/index.js b/src/components/Card/MandatoryField/index.js
@@ -0,0 +1 @@
+export { default } from './MandatoryFields.jsx';
diff --git a/src/components/Card/MandatoryField/mandatoryField.css b/src/components/Card/MandatoryField/mandatoryField.css
@@ -0,0 +1,15 @@
+.mandatory-card-wrapper {
+  border: 1px solid #b6c1c9;
+  border-radius: 8px;
+}
+
+.mandatory-card-wrapper .mandatory-field-class-heading {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.mandatory-card-wrapper .mandatory-field-available,
+.mandatory-card-wrapper .mandatory-field-required {
+  font-size: 12px;
+  font-weight: 700;
+}
diff --git a/src/components/Dropdown/Calendar/Calendar.jsx b/src/components/Dropdown/Calendar/Calendar.jsx
@@ -39,7 +39,7 @@ function Calendar({ children, allCalendarsData, setPageNumber }) {
             borderRadius: '73px',
             objectFit: 'contain',
           }}
-          src={item?.image?.uri}
+          src={item?.logo?.original?.uri}
         />
       ),
     };

diff --git a/src/components/ImageUpload/ImageUpload.jsx b/src/components/ImageUpload/ImageUpload.jsx
@@ -19,6 +19,8 @@ function ImageUpload(props) {
     preview,
     originalImageUrl,
     formName,
+    isCalendarLogo,
+    thumbnailImage,
   } = props;
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
@@ -118,7 +120,6 @@ function ImageUpload(props) {
       </span>
     </div>
   );
-
   return (
     <>
       <Form.Item name={formName ?? 'dragger'} valuePropName="fileList" getValueFromEvent={normFile}>
@@ -138,7 +139,9 @@ function ImageUpload(props) {
                   <img
                     className="image-thumbnail"
                     style={{
-                      aspectRatio: currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio.replace(/:/g, '/'),
+                      aspectRatio: !isCalendarLogo
+                        ? currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio.replace(/:/g, '/')
+                        : '',
                     }}
                     src={file?.url ?? file?.thumbUrl}
                   />
@@ -178,6 +181,7 @@ function ImageUpload(props) {
                 name: eventImageData?.original?.entityId,
                 status: 'done',
                 url: props.imageUrl,
+                ...(thumbnailImage && { thumbUrl: thumbnailImage }),
               },
             ]
           }

diff --git a/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx b/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx
@@ -90,10 +90,12 @@ function QuickCreatePerson(props) {
     }
   }, [selectedOrganizers, selectedPerformers, selectedSupporters]);
 
+  let taxonomyClassQuery = new URLSearchParams();
+  taxonomyClassQuery.append('taxonomy-class', taxonomyClass.PERSON);
   const { currentData: allTaxonomyData, isLoading: taxonomyLoading } = useGetAllTaxonomyQuery({
     calendarId,
     search: '',
-    taxonomyClass: taxonomyClass.PERSON,
+    taxonomyClass: decodeURIComponent(taxonomyClassQuery.toString()),
     includeConcepts: true,
     sessionId: timestampRef,
   });

diff --git a/src/components/Modal/QuickCreatePlace/QuickCreatePlace.jsx b/src/components/Modal/QuickCreatePlace/QuickCreatePlace.jsx
@@ -88,10 +88,12 @@ function QuickCreatePlace(props) {
     }
   }, [locationPlace]);
 
+  let taxonomyClassQuery = new URLSearchParams();
+  taxonomyClassQuery.append('taxonomy-class', taxonomyClass.PLACE);
   const { currentData: allTaxonomyData, isLoading: taxonomyLoading } = useGetAllTaxonomyQuery({
     calendarId,
     search: '',
-    taxonomyClass: taxonomyClass.PLACE,
+    taxonomyClass: decodeURIComponent(taxonomyClassQuery.toString()),
     includeConcepts: true,
     sessionId: timestampRef,
   });

diff --git a/src/components/Sidebar/Main/Sidebar.jsx b/src/components/Sidebar/Main/Sidebar.jsx
@@ -113,8 +113,8 @@ function Sidebar(props) {
       interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
       calendarContentLanguage: calendarContentLanguage,
     });
-    setCalendarItem(selectedCalendar(currentCalendarData?.id, currentCalendarData?.image?.uri, calendarLabel));
-  }, [currentCalendarData]);
+    setCalendarItem(selectedCalendar(currentCalendarData?.id, currentCalendarData?.logo?.original?.uri, calendarLabel));
+  }, [currentCalendarData, user?.interfaceLanguage]);
 
   const onSidebarClickHandler = ({ item, key }) => {
     if (key !== selectedKey) {

diff --git a/src/components/Sidebar/Responsive/ResponsiveSidebar.jsx b/src/components/Sidebar/Responsive/ResponsiveSidebar.jsx
@@ -134,8 +134,8 @@ function ResponsiveSidebar(props) {
       interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
       calendarContentLanguage: calendarContentLanguage,
     });
-    setCalendarItem(selectedCalendar(currentCalendarData?.id, currentCalendarData?.image?.uri, calendarLabel));
-  }, [currentCalendarData]);
+    setCalendarItem(selectedCalendar(currentCalendarData?.id, currentCalendarData?.logo?.original?.uri, calendarLabel));
+  }, [currentCalendarData, user?.interfaceLanguage]);
   return (
     <Drawer
       className="sidebar-navigation-menu-responsive-drawer"

diff --git a/src/components/TreeSelectOption/treeSelectOption.settings.js b/src/components/TreeSelectOption/treeSelectOption.settings.js
@@ -28,6 +28,7 @@ const handleMultilevelTreeSelect = (children, user, calendarContentLanguage, par
           interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
           calendarContentLanguage: calendarContentLanguage,
         }),
+      key: child?.id,
     };
   });
 };
@@ -71,6 +72,7 @@ export const treeTaxonomyOptions = (data, user, mappedToField, isDynamicField, c
           interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
           calendarContentLanguage: calendarContentLanguage,
         }),
+        key: concept?.id,
       };
     });
   return options;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from './MandatoryFields.jsx';