Merge pull request #959 from culturecreates/develop

Develop
culturecreates · Feb 13, 2024 · 24e1f5e · 24e1f5e
2 parents 273f95f + aa70cb8
commit 24e1f5e
Show file tree

Hide file tree

Showing 29 changed files with 1,442 additions and 478 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "react-places-autocomplete": "^7.3.0",
     "react-quill": "^2.0.0",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "redux-persist": "^6.0.0",
     "uniqid": "^5.4.0",

diff --git a/public/index.html b/public/index.html
@@ -19,12 +19,11 @@
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
-
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Footlight Calendar</title>
+    <title>Footlight</title>
     <script>
       window.myCallbackFunc = function () {
         window.initOne && window.initOne();

diff --git a/src/components/Card/Common/Event.jsx b/src/components/Card/Common/Event.jsx
@@ -27,7 +27,9 @@ function Event(props) {
               </div>
             </Col>
             <Col flex={'253px'}>
-              <div style={{ width: '100%', marginTop: marginTop ? marginTop : '35%' }}>{props?.children[1]}</div>
+              <div className="side-wrapper-container" style={{ width: '100%', marginTop: marginTop && marginTop }}>
+                {props?.children[1]}
+              </div>
             </Col>
           </Row>
         </Col>

diff --git a/src/components/Card/Common/event.css b/src/components/Card/Common/event.css
@@ -21,3 +21,19 @@
   content: '*';
   color: #f43131;
 }
+
+.add-event-section-col .side-wrapper-container {
+  margin-top: 35%;
+}
+
+@media screen and (min-width: 992px) and (max-width: 1067px) {
+  .add-event-section-col .side-wrapper-container {
+    margin-top: 0px;
+  }
+}
+
+@media screen and (max-width: 891px) {
+  .add-event-section-col .side-wrapper-container {
+    margin-top: 0px;
+  }
+}
diff --git a/src/components/DraggableTree/DraggableTree.jsx b/src/components/DraggableTree/DraggableTree.jsx
@@ -99,7 +99,7 @@ const DraggableTree = ({
     return combinedData;
   };
 
-  const onDrop = (info, treeData, setTreeData, counterpartTreeData, setCounterpartTreeData) => {
+  const onDrop = ({ info, treeData, setTreeData, counterpartTreeData, setCounterpartTreeData, treeLanguage }) => {
     const dropKey = info.node.key;
     const dragKey = info.dragNode.key;
     const dropPos = info.node.pos.split('-');
@@ -176,7 +176,9 @@ const DraggableTree = ({
     }
     setTreeData([...treeData]);
     setCounterpartTreeData([...counterpartTreeData]);
-    setData(combineBothTreeData(treeData, counterpartTreeData));
+
+    if (treeLanguage == contentLanguage.FRENCH) setData(combineBothTreeData(treeData, counterpartTreeData));
+    else if (treeLanguage == contentLanguage.ENGLISH) setData(combineBothTreeData(counterpartTreeData, treeData));
   };
 
   const findItem = (key) => {
@@ -347,7 +349,16 @@ const DraggableTree = ({
               draggable
               blockNode
               expandedKeys={expandedKeys}
-              onDrop={(info) => onDrop(info, treeData1, setTreeData1, treeData2, setTreeData2)}
+              onDrop={(info) =>
+                onDrop({
+                  info,
+                  treeData: treeData1,
+                  setTreeData: setTreeData1,
+                  counterpartTreeData: treeData2,
+                  setCounterpartTreeData: setTreeData2,
+                  treeLanguage: contentLanguage.ENGLISH,
+                })
+              }
               onExpand={(key) => {
                 setExpandedKeys(key);
               }}
@@ -370,7 +381,16 @@ const DraggableTree = ({
               draggable
               blockNode
               expandedKeys={expandedKeys}
-              onDrop={(info) => onDrop(info, treeData2, setTreeData2, treeData1, setTreeData1)}
+              onDrop={(info) =>
+                onDrop({
+                  info,
+                  treeData: treeData2,
+                  setTreeData: setTreeData2,
+                  counterpartTreeData: treeData1,
+                  setCounterpartTreeData: setTreeData1,
+                  treeLanguage: contentLanguage.FRENCH,
+                })
+              }
               onExpand={(key) => {
                 setExpandedKeys(key);
               }}

diff --git a/src/components/List/Events/List.jsx b/src/components/List/Events/List.jsx
@@ -45,12 +45,6 @@ function Lists(props) {
     return data?.sameAs?.filter((item) => item?.type === 'ArtsdataIdentifier');
   };
   const aspectRatioString = currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio;
-  let width = 104;
-
-  if (aspectRatioString) {
-    const [aspectRatioNumerator, aspectRatioDenominator] = aspectRatioString.replace(/:/g, '/').split('/').map(Number);
-    width = (104 * aspectRatioNumerator) / aspectRatioDenominator;
-  }
 
   const listItemHandler = (id, creatorId, publishState) => {
     if (routinghandler(user, calendarId, creatorId, publishState))
@@ -153,11 +147,7 @@ function Lists(props) {
             avatar={
               <>
                 {screens.md && (
-                  <div
-                    className="event-list-image-wrapper"
-                    style={{
-                      width: width,
-                    }}>
+                  <div className="event-list-image-wrapper">
                     {(calendar[0]?.role === userRoles.ADMIN || user?.isSuperAdmin) && eventItem?.isFeatured && (
                       <div className="image-featured-badge">
                         <StarOutlined
@@ -173,6 +163,7 @@ function Lists(props) {
                           (calendar[0]?.role === userRoles.ADMIN || user?.isSuperAdmin) &&
                           eventItem?.isFeatured &&
                           '3px solid #1B3DE6',
+                        ...(aspectRatioString && { maxWidth: '150px' }),
                       }}
                       data-cy="image-event-thumbnail"
                     />

diff --git a/src/components/List/Events/list.css b/src/components/List/Events/list.css
@@ -14,14 +14,9 @@
 }
 .event-list-wrapper .event-list-image-wrapper {
   position: relative;
-  height: 104px;
-  /* min-height: 104px; */
-  /* width: 104px; */
 }
 .event-list-wrapper .event-list-image {
-  height: 100%;
-  width: 100%;
-  /* object-fit: cover; */
+  height: 104px;
   border-radius: 4px;
 }
 .event-list-wrapper .event-list-title {

diff --git a/src/constants/standardFieldsTranslations.js b/src/constants/standardFieldsTranslations.js
@@ -4,18 +4,21 @@ export const PLACE = [
   {
     label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.place.PlaceAccessibility')}</Translation>,
     key: 'PlaceAccessibility',
+    value: 'PlaceAccessibility',
     en: 'Place accessibility',
     fr: 'Accessibilité du lieu',
   },
   {
     label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.place.Region')}</Translation>,
     key: 'Region',
+    value: 'Region',
     en: 'District',
     fr: 'Quartier',
   },
   {
     label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.place.Type')}</Translation>,
     key: 'Type',
+    value: 'Type',
     en: 'Place type',
     fr: 'Type de lieux',
   },
@@ -25,24 +28,28 @@ export const EVENT = [
   {
     label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.Event.EventAccessibility')}</Translation>,
     key: 'EventAccessibility',
+    value: 'EventAccessibility',
     en: 'Event accessibility',
     fr: "Accessibilité de l'événement",
   },
   {
     label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.Event.Audience')}</Translation>,
     key: 'Audience',
+    value: 'Audience',
     en: 'Audience',
     fr: 'Public',
   },
   {
     label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.Event.EventType')}</Translation>,
     key: 'EventType',
+    value: 'EventType',
     en: 'Event type',
     fr: "Type d'événement",
   },
   {
     label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.place.inLanguage')}</Translation>,
     key: 'inLanguage',
+    value: 'inLanguage',
     en: 'Language of event',
     fr: "Langue de l'événement",
   },
@@ -70,6 +77,7 @@ export const PERSON = [
   {
     label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.Person.Occupation')}</Translation>,
     key: 'Occupation',
+    value: 'Occupation',
     en: 'Occupation',
     fr: 'Occupation',
   },

diff --git a/src/hooks/usePrompt.js b/src/hooks/usePrompt.js
@@ -1,5 +1,6 @@
-import { useCallback, useContext, useEffect } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom';
+import { useBlocker, useBeforeUnload } from 'react-router-dom';
 
 function useConfirmExit(confirmExit, when = true) {
   const { navigator } = useContext(NavigationContext);
@@ -33,7 +34,7 @@ function useConfirmExit(confirmExit, when = true) {
   }, [navigator, confirmExit, when]);
 }
 
-export function usePrompt(message, when) {
+export function usePrompt(message, when = true) {
   useEffect(() => {
     if (when) {
       window.onbeforeunload = function () {
@@ -45,9 +46,56 @@ export function usePrompt(message, when) {
     };
   }, [message, when]);
 
+  useEffect(() => {
+    const handleBeforeUnload = (event) => {
+      event.preventDefault();
+      return message;
+    };
+
+    if (when) {
+      window.addEventListener('beforeunload', handleBeforeUnload, { capture: true });
+    }
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload, { capture: true });
+    };
+  }, [message, when]);
+
   const confirmExit = useCallback(() => {
     const confirm = window.confirm(message);
     return confirm;
   }, [message]);
   useConfirmExit(confirmExit, when);
 }
+
+export function useCustomPrompt(message, { beforeUnload } = {}) {
+  let blocker = useBlocker(
+    useCallback(() => (typeof message === 'string' ? !window.confirm(message) : false), [message]),
+  );
+  let prevState = useRef(blocker.state);
+
+  useEffect(() => {
+    if (blocker.state === 'blocked') {
+      blocker.reset();
+    }
+    prevState.current = blocker.state;
+  }, [blocker]);
+
+  useBeforeUnload(
+    useCallback(
+      (event) => {
+        if (beforeUnload && typeof message === 'string') {
+          event.preventDefault();
+          event.returnValue = message;
+        }
+      },
+      [message, beforeUnload],
+    ),
+    { capture: true },
+  );
+}
+
+export function Prompt({ when, message, ...props }) {
+  useCustomPrompt(when ? message : false, props);
+  return null;
+}