Merge pull request #926 from culturecreates/develop

Develop
culturecreates · Jan 30, 2024 · aaf7b5a · aaf7b5a
2 parents 2d07e79 + d7c012c
commit aaf7b5a
Show file tree

Hide file tree

Showing 18 changed files with 1,781 additions and 737 deletions.
diff --git a/src/components/Popover/Popover.jsx b/src/components/Popover/Popover.jsx
@@ -0,0 +1,9 @@
+import { Popover } from 'antd';
+import React, { forwardRef, cloneElement } from 'react';
+
+const CustomPopover = forwardRef(function CustomPopover({ children, ...props }, ref) {
+  const childrenWithRef = cloneElement(children, { ...children.props, ref });
+  return <Popover {...props}>{childrenWithRef}</Popover>;
+});
+
+export default CustomPopover;
diff --git a/src/components/Search/Events/EventsSearch.jsx b/src/components/Search/Events/EventsSearch.jsx
@@ -1,10 +1,9 @@
-import React, { useEffect, useRef } from 'react';
+import React, { forwardRef, useEffect } from 'react';
 import './eventsSearch.css';
 import { Input } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
-function EventsSearch({ autoFocus, ...props }) {
-  const inputRef = useRef();
+const EventsSearch = forwardRef(function EventsSearch({ autoFocus, ...props }, inputRef) {
   useEffect(() => {
     if (autoFocus) {
       inputRef.current.focus();
@@ -20,6 +19,6 @@ function EventsSearch({ autoFocus, ...props }) {
       prefix={<SearchOutlined className="events-search-icon" style={{ color: props?.defaultValue && '#1B3DE6' }} />}
     />
   );
-}
+});
 
 export default EventsSearch;
diff --git a/src/constants/formFields.js b/src/constants/formFields.js
@@ -376,6 +376,7 @@ export const formFieldValue = [
       placesSearch,
       calendarContentLanguage,
       allPlacesArtsdataList,
+      allPlacesImportsFootlight,
       placeNavigationHandler,
       mappedField,
       isEntitiesFetching,
@@ -429,6 +430,37 @@ export const formFieldValue = [
                     </div>
                   </>
 
+                  <div className="popover-section-header" data-cy={`div-${mappedField}-footlight-place-title`}>
+                    {t('dashboard.organization.createNew.search.importsFromFootlight')}
+                  </div>
+                  <div className="search-scrollable-content">
+                    {isExternalSourceFetching && (
+                      <div style={{ height: '200px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <LoadingIndicator />
+                      </div>
+                    )}
+                    {!isExternalSourceFetching &&
+                      (allPlacesImportsFootlight?.length > 0 ? (
+                        allPlacesImportsFootlight?.map((place, index) => (
+                          <div
+                            key={index}
+                            className={`event-popover-options ${
+                              locationPlace?.value == place?.value ? 'event-popover-options-active' : null
+                            }`}
+                            onClick={() => {
+                              setLocationPlace(place);
+                              form.setFieldValue(name, place?.value);
+                              setIsPopoverOpen(false);
+                            }}
+                            data-cy={`div-${mappedField}-footlight-place-${index}`}>
+                            {place?.label}
+                          </div>
+                        ))
+                      ) : (
+                        <NoContent />
+                      ))}
+                  </div>
+
                   <div className="popover-section-header" data-cy={`div-${mappedField}-artsdata-place-title`}>
                     {t('dashboard.organization.createNew.search.artsDataSectionHeading')}
                   </div>
@@ -597,6 +629,7 @@ export const returnFormDataWithFields = ({
   placesSearch,
   allPlacesList,
   allPlacesArtsdataList,
+  allPlacesImportsFootlight,
   locationPlace,
   setLocationPlace,
   setIsPopoverOpen,
@@ -667,6 +700,7 @@ export const returnFormDataWithFields = ({
       placesSearch,
       allPlacesList,
       allPlacesArtsdataList,
+      allPlacesImportsFootlight,
       locationPlace,
       setLocationPlace,
       setIsPopoverOpen,

diff --git a/src/constants/sameAsTypes.js b/src/constants/sameAsTypes.js
@@ -0,0 +1,4 @@
+export const sameAsTypes = {
+  ARTSDATA_IDENTIFIER: 'ArtsdataIdentifier',
+  FOOTLIGHT_IDENTIFIER: 'FootlightIdentifier',
+};
diff --git a/src/constants/sourceOptions.js b/src/constants/sourceOptions.js
@@ -2,3 +2,8 @@ export const sourceOptions = {
   CMS: 'CMS',
   ARTSDATA: 'ARTSDATA',
 };
+
+export const externalSourceOptions = {
+  FOOTLIGHT: 'Footlight',
+  ARTSDATA: 'Artsdata',
+};
diff --git a/src/hooks/useKeyboardAccessiblePopOver.js → ...ssibleLayout/KeyboardAccessibleLayout.jsx b/src/hooks/useKeyboardAccessiblePopOver.js → ...ssibleLayout/KeyboardAccessibleLayout.jsx
@@ -1,15 +1,24 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
+
+const KeyboardAccessibleLayout = ({ children, data, setItem, setFieldValue, popOverHandler, isPopoverOpen }) => {
+  const inputRef = useRef(); // ref for input elemet inside popover
+  let itemsRef = useRef([]);
 
-const useKeyboardAccessiblePopOver = ({ data, setItem, setFieldValue, popOverHandler, isPopoverOpen }) => {
   const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
   let focusedItemIndex = -1;
-  let itemsRef = useRef([]);
 
   const findData = (focusedItemIndex) => {
-    if (focusedItemIndex > data[0].length - 1) {
-      return data[1][focusedItemIndex - data[0].length];
-    } else {
-      return data[0][focusedItemIndex];
+    let currentIndex = 0;
+
+    for (let i = 0; i < data.length; i++) {
+      const currentArray = data[i];
+      const nextIndex = currentIndex + currentArray.length;
+
+      if (focusedItemIndex < nextIndex) {
+        return currentArray[focusedItemIndex - currentIndex];
+      }
+
+      currentIndex = nextIndex;
     }
   };
 
@@ -55,9 +64,24 @@ const useKeyboardAccessiblePopOver = ({ data, setItem, setFieldValue, popOverHan
     if (e.key === 'Enter') {
       e.preventDefault();
       const selectedItem = findData(focusedItemIndex);
-      setItem(selectedItem);
-      setFieldValue(selectedItem?.value);
-      popOverHandler();
+      if (selectedItem) {
+        setItem(selectedItem);
+        setFieldValue(selectedItem?.value);
+        popOverHandler();
+      } else popOverHandler();
+    }
+
+    const isAlphabetOrSpace = /^[a-zA-Z\s]$/.test(e.key);
+    if (isAlphabetOrSpace) {
+      if (document.activeElement !== inputRef.current) {
+        inputRef.current.focus();
+      }
+    }
+
+    if (e.key === 'Backspace' || e.key === 'Delete') {
+      if (document.activeElement !== inputRef.current) {
+        inputRef.current.focus();
+      }
     }
   };
 
@@ -67,13 +91,17 @@ const useKeyboardAccessiblePopOver = ({ data, setItem, setFieldValue, popOverHan
         const itemContainersArray = document?.querySelectorAll('.search-scrollable-content');
 
         if (itemContainersArray) {
-          const itemContainer1 = itemContainersArray[0]?.querySelectorAll('.event-popover-options');
-          const itemContainer2 = itemContainersArray[1]?.querySelectorAll('.event-popover-options');
+          const itemsRefArray = [];
+
+          for (let i = 0; i < itemContainersArray.length; i++) {
+            const currentContainer = itemContainersArray[i];
+            const currentItems = currentContainer?.querySelectorAll('.event-popover-options');
+
+            itemsRefArray.push(currentItems?.length > 0 ? currentItems : []);
+          }
+
+          itemsRef.current = itemsRefArray.reduce((accumulator, currentItems) => [...accumulator, ...currentItems], []);
 
-          itemsRef.current = [
-            ...(itemContainer1?.length > 0 ? itemContainer1 : []),
-            ...(itemContainer2?.length > 0 ? itemContainer2 : []),
-          ];
           if (itemsRef.current.length > 0) {
             itemsRef.current?.forEach((child) => child.setAttribute('tabIndex', -1));
             itemContainersArray[0]?.setAttribute('tabIndex', 0);
@@ -96,53 +124,8 @@ const useKeyboardAccessiblePopOver = ({ data, setItem, setFieldValue, popOverHan
       };
     }
   }, [isPopoverOpen, data]);
+
+  return <>{React.cloneElement(children, { ...children.props, ref: inputRef })}</>;
 };
 
-export default useKeyboardAccessiblePopOver;
-
-// initial method
-
-// const handleKeyPress = (e) => {
-//   if (e.key === 'ArrowDown') {
-//     if (focusedItemIndex === items.length - 1) {
-//       items[focusedItemIndex]?.setAttribute('tabIndex', -1);
-//       focusedItemIndex = 0;
-//       items[focusedItemIndex]?.setAttribute('tabIndex', 0);
-//     } else {
-//       items[focusedItemIndex]?.setAttribute('tabIndex', -1);
-//       focusedItemIndex++;
-//       items[focusedItemIndex]?.setAttribute('tabIndex', 0);
-//     }
-//   }
-
-//   if (e.key === 'ArrowUp') {
-//     if (focusedItemIndex === 0 || focusedItemIndex === -1) {
-//       focusedItemIndex = items.length - 1;
-//     } else {
-//       focusedItemIndex--;
-//     }
-//   }
-
-//   if (e.key === 'Escape') {
-//     popOverHandler();
-//   }
-
-//   if (e.key === 'Enter') {
-//     e.preventDefault();
-//     const selectedItem = findData(focusedItemIndex);
-//     setItem(selectedItem);
-//     setFieldValue(selectedItem?.value);
-//     popOverHandler();
-//   }
-
-//   if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-//     const selected = items[focusedItemIndex];
-//     e.preventDefault();
-//     selected.scrollIntoView({
-//       block: 'nearest',
-//       inline: 'start',
-//       behavior: reducedMotion.matches ? 'auto' : 'smooth',
-//     });
-//     selected.focus({ preventScroll: true });
-//   }
-// };
+export default KeyboardAccessibleLayout;
diff --git a/src/locales/en/translationEn.json b/src/locales/en/translationEn.json
@@ -482,8 +482,9 @@
           "linkText": "Artsdata",
           "createNew": "Create new organization",
           "create": "Create",
-          "footlightSectionHeading": "From Footlight",
-          "artsDataSectionHeading": "Imports from Artsdata"
+          "footlightSectionHeading": "My Footlight",
+          "artsDataSectionHeading": "Imports from Artsdata",
+          "importsFromFootlight": "Imports from Footlight"
         },
         "addOrganization": {
           "newOrganization": "New Organization",
@@ -554,8 +555,9 @@
           "breadcrumb": "Back to previous screen",
           "linkText": "Artsdata",
           "create": "Create",
-          "footlightSectionHeading": "From Footlight",
-          "artsDataSectionHeading": "Imports from Artsdata"
+          "footlightSectionHeading": "My Footlight",
+          "artsDataSectionHeading": "Imports from Artsdata",
+          "importsFromFootlight": "Imports from Footlight"
         },
         "addPlace": {
           "newPlace": "New place",
@@ -705,8 +707,9 @@
           "breadcrumb": "Back to previous screen",
           "linkText": "Artsdata",
           "create": "Create",
-          "footlightSectionHeading": "From Footlight",
-          "artsDataSectionHeading": "Imports from Artsdata"
+          "footlightSectionHeading": "My Footlight",
+          "artsDataSectionHeading": "Imports from Artsdata",
+          "importsFromFootlight": "Imports from Footlight"
         },
         "addPerson": {
           "newPerson": "New Person",

diff --git a/src/locales/fr/transalationFr.json b/src/locales/fr/transalationFr.json
@@ -125,8 +125,8 @@
         "featuredEvent": "Événement vedette",
         "dataSource": "Data source",
         "question": {
-          "firstPart": "Est-ce la bonne événement ? Si non, ",
-          "secondPart": "créez une nouvelle événement",
+          "firstPart": "Est-ce le bon événement ? Si non, ",
+          "secondPart": "créez un nouvel événement",
           "thirdPart": " et ne modifiez pas celui-ci."
         },
         "language": {
@@ -482,8 +482,9 @@
           "linkText": "Artsdata",
           "createNew": "Créer une nouvelle organisation",
           "create": "Créer",
-          "footlightSectionHeading": "From Footlight",
-          "artsDataSectionHeading": "Imports from Artsdata"
+          "footlightSectionHeading": "My Footlight",
+          "artsDataSectionHeading": "Imports from Artsdata",
+          "importsFromFootlight": "Imports from Footlight"
         },
         "addOrganization": {
           "newOrganization": "Nouvelle organisation",
@@ -493,7 +494,7 @@
           "question": {
             "firstPart": "Est-ce la bonne organisation ? Si non, ",
             "secondPart": "créez une nouvelle organisation",
-            "thirdPart": " et ne modifiez pas celui-ci."
+            "thirdPart": " et ne modifiez pas celle-ci."
           },
           "addSocialMediaLinks": "Ajouter un lien"
         },
@@ -553,15 +554,16 @@
           "text": "Recherchez un lien vers une instance existante du lieu dans d'autres sources de données. Si vous ne trouvez pas le lieu, vous pouvez le créer.",
           "breadcrumb": "Retour à l'écran précédent",
           "linkText": "Artsdata",
-          "footlightSectionHeading": "From Footlight",
-          "artsDataSectionHeading": "Imports from Artsdata"
+          "footlightSectionHeading": "My Footlight",
+          "artsDataSectionHeading": "Imports from Artsdata",
+          "importsFromFootlight": "Imports from Footlight"
         },
         "addPlace": {
           "newPlace": "Nouveau lieu",
           "editPlace": "Modifier lieu",
           "question": {
-            "firstPart": "S'agit-il de la bonne lieu ? Si non, ",
-            "secondPart": "créez une nouvelle lieu",
+            "firstPart": "Est-ce le bon lieu ? Si non, ",
+            "secondPart": "créez un nouvel lieu",
             "thirdPart": " et ne modifiez pas celui-ci."
           },
           "name": {
@@ -702,16 +704,17 @@
           "text": "Recherchez pour établir un lien avec une instance existante de la personne dans d'autres sources de données. Si vous ne trouvez pas la personne, vous pouvez la créer.",
           "breadcrumb": "Retour à l'écran précédent",
           "linkText": "Artsdata",
-          "footlightSectionHeading": "From Footlight",
-          "artsDataSectionHeading": "Imports from Artsdata"
+          "footlightSectionHeading": "My Footlight",
+          "artsDataSectionHeading": "Imports from Artsdata",
+          "importsFromFootlight": "Imports from Footlight"
         },
         "addPerson": {
           "newPerson": "Nouvelle personne",
           "editPerson": "Modifier personne",
           "question": {
-            "firstPart": "S'agit-il de la bonne personne ? Si non, ",
-            "secondPart": "créez une nouvelle personne",
-            "thirdPart": " et ne modifiez pas celui-ci."
+            "firstPart": "Est-ce la bonne personne ? Si non,",
+            "secondPart": " créez une nouvelle personne",
+            "thirdPart": " et ne modifiez pas celle-ci."
           },
           "dataSource": "Source de la donnée",
           "notification": {