Merge pull request #855 from culturecreates/develop

Develop
culturecreates · Dec 11, 2023 · 98df1be · 98df1be
2 parents 52e1dd4 + 2e58f4e
commit 98df1be
Show file tree

Hide file tree

Showing 24 changed files with 655 additions and 198 deletions.
diff --git a/public/index.html b/public/index.html
@@ -25,7 +25,17 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Footlight Calendar</title>
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA34hPcJ7CKANXj1ZPcEMX5d89563wexsw&libraries=places"></script>
+    <script>
+      window.myCallbackFunc = function () {
+        window.initOne && window.initOne();
+        window.initTwo && window.initTwo();
+      };
+    </script>
+    <script
+      async
+      defer
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA34hPcJ7CKANXj1ZPcEMX5d89563wexsw&libraries=places&callback=myCallbackFunc"
+    ></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
@@ -7,17 +7,31 @@ import frLocale from 'antd/es/date-picker/locale/fr_CA';
 import enLocale from 'antd/es/date-picker/locale/en_US';
 
 function DatePickerStyled(props) {
+  const handleDateChange = (value) => {
+    if (value && value.isValid()) {
+      datePickerRef.current.blur();
+    }
+    if (props.onChange) {
+      props.onChange(value);
+    }
+  };
+
+  const datePickerRef = React.createRef();
+
   return (
     <DatePicker
+      ref={datePickerRef}
       format="DD/MM/YYYY"
       size="large"
       locale={i18n?.language === 'en' ? enLocale : i18n?.language === 'fr' && frLocale}
       className="date-picker-wrapper"
       {...props}
+      changeOnBlur={true}
       placeholder={i18n?.language === 'en' ? 'DD/MM/YYYY' : 'JJ/MM/AAAA'}
       showToday={false}
       popupClassName="date-picker-calendar"
       getPopupContainer={(trigger) => trigger.parentNode}
+      onChange={handleDateChange}
     />
   );
 }

diff --git a/src/components/DatePicker/datePicker.css b/src/components/DatePicker/datePicker.css
@@ -28,10 +28,6 @@
   border-radius: 4px;
 }
 
-.date-picker-calendar .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
-  border: 0px;
-}
-
 .date-picker-calendar .ant-picker-header {
   border-bottom: 1px solid #b6c1c9;
 }

diff --git a/src/components/DraggableTree/DraggableTree.jsx b/src/components/DraggableTree/DraggableTree.jsx
@@ -459,7 +459,15 @@ const DraggableTree = ({
                       onChange={(e) => {
                         setNewConceptName({ ...newConceptName, fr: e.target.value });
                       }}
-                      style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '423px' }}
+                      style={{
+                        borderRadius: '4px',
+                        border: `${
+                          calendarContentLanguage === contentLanguage.BILINGUAL
+                            ? '4px solid #E8E8E8'
+                            : '1px solid #b6c1c9'
+                        }`,
+                        width: '423px',
+                      }}
                       size="large"
                     />
                   </Form.Item>
@@ -486,7 +494,15 @@ const DraggableTree = ({
                         setNewConceptName({ ...newConceptName, en: e.target.value });
                       }}
                       placeholder={t('dashboard.taxonomy.addNew.concepts.placeHolderEn')}
-                      style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '423px' }}
+                      style={{
+                        borderRadius: '4px',
+                        border: `${
+                          calendarContentLanguage === contentLanguage.BILINGUAL
+                            ? '4px solid #E8E8E8'
+                            : '1px solid #b6c1c9'
+                        }`,
+                        width: '423px',
+                      }}
                       size="large"
                     />
                   </Form.Item>

diff --git a/src/components/Filter/SearchableCheckbox/SearchableCheckbox.jsx b/src/components/Filter/SearchableCheckbox/SearchableCheckbox.jsx
@@ -8,13 +8,13 @@ import NoContent from '../../NoContent/NoContent';
 import LoadingIndicator from '../../LoadingIndicator';
 
 function SearchableCheckbox(props) {
-  const { children, allowSearch, data, onFilterChange, open, value, loading = false } = props;
+  const { children, allowSearch, data, onFilterChange, open, value, loading = false, selectedData, setOpen } = props;
   const { t } = useTranslation();
   let items = data ?? [];
 
   useEffect(() => {
-    if (allowSearch) {
-      props.searchImplementation();
+    if (allowSearch && props?.searchKey != undefined) {
+      props.searchImplementation(props?.searchKey, selectedData);
     }
   }, [props.searchKey]);
 
@@ -28,6 +28,7 @@ function SearchableCheckbox(props) {
           multiple: true,
         }}
         open={open}
+        onOpenChange={(open) => setOpen(open)}
         trigger={['click']}
         dropdownRender={() => (
           <div className="searchable-checkbox-dropdown-wrapper">

diff --git a/src/components/Modal/QuickCreateOrganization/QuickCreateOrganization.jsx b/src/components/Modal/QuickCreateOrganization/QuickCreateOrganization.jsx
@@ -336,7 +336,15 @@ function QuickCreateOrganization(props) {
                         placeholder={t(
                           'dashboard.events.addEditEvent.quickCreate.quickCreateOrganization.namePlaceholder',
                         )}
-                        style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '100%' }}
+                        style={{
+                          borderRadius: '4px',
+                          border: `${
+                            calendarContentLanguage === contentLanguage.BILINGUAL
+                              ? '4px solid #E8E8E8'
+                              : '1px solid #b6c1c9'
+                          }`,
+                          width: '100%',
+                        }}
                         size="large"
                         data-cy="input-quick-create-organization-name-french"
                       />
@@ -376,7 +384,15 @@ function QuickCreateOrganization(props) {
                         placeholder={t(
                           'dashboard.events.addEditEvent.quickCreate.quickCreateOrganization.namePlaceholder',
                         )}
-                        style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '100%' }}
+                        style={{
+                          borderRadius: '4px',
+                          border: `${
+                            calendarContentLanguage === contentLanguage.BILINGUAL
+                              ? '4px solid #E8E8E8'
+                              : '1px solid #b6c1c9'
+                          }`,
+                          width: '100%',
+                        }}
                         size="large"
                         data-cy="input-quick-create-organization-name-english"
                       />
@@ -394,7 +410,7 @@ function QuickCreateOrganization(props) {
                   ]}
                   data-cy="form-item-quick-create-organizer-website-label">
                   <StyledInput
-                    addonBefore="https://"
+                    addonBefore="URL"
                     autoComplete="off"
                     placeholder={t(
                       'dashboard.events.addEditEvent.quickCreate.quickCreateOrganization.websitePlaceholder',

diff --git a/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx b/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx
@@ -302,7 +302,15 @@ function QuickCreatePerson(props) {
                           autoSize
                           autoComplete="off"
                           placeholder={t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.namePlaceholder')}
-                          style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '100%' }}
+                          style={{
+                            borderRadius: '4px',
+                            border: `${
+                              calendarContentLanguage === contentLanguage.BILINGUAL
+                                ? '4px solid #E8E8E8'
+                                : '1px solid #b6c1c9'
+                            }`,
+                            width: '100%',
+                          }}
                           size="large"
                           data-cy="input-quick-create-person-name-french"
                         />
@@ -338,7 +346,15 @@ function QuickCreatePerson(props) {
                           autoSize
                           autoComplete="off"
                           placeholder={t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.namePlaceholder')}
-                          style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '100%' }}
+                          style={{
+                            borderRadius: '4px',
+                            border: `${
+                              calendarContentLanguage === contentLanguage.BILINGUAL
+                                ? '4px solid #E8E8E8'
+                                : '1px solid #b6c1c9'
+                            }`,
+                            width: '100%',
+                          }}
                           size="large"
                           data-cy="input-quick-create-person-name-english"
                         />
@@ -394,7 +410,7 @@ function QuickCreatePerson(props) {
                     ]}
                     data-cy="form-item-quick-create-person-website-label">
                     <StyledInput
-                      addonBefore="https://"
+                      addonBefore="URL"
                       autoComplete="off"
                       placeholder={t('dashboard.events.addEditEvent.quickCreate.quickCreatePerson.websitePlaceholder')}
                       data-cy="input-quick-create-person-website"

diff --git a/src/components/Modal/QuickCreatePlace/QuickCreatePlace.jsx b/src/components/Modal/QuickCreatePlace/QuickCreatePlace.jsx
@@ -373,7 +373,15 @@ function QuickCreatePlace(props) {
                           autoSize
                           autoComplete="off"
                           placeholder={t('dashboard.events.addEditEvent.location.quickCreatePlace.namePlaceholder')}
-                          style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '100%' }}
+                          style={{
+                            borderRadius: '4px',
+                            border: `${
+                              calendarContentLanguage === contentLanguage.BILINGUAL
+                                ? '4px solid #E8E8E8'
+                                : '1px solid #b6c1c9'
+                            }`,
+                            width: '100%',
+                          }}
                           size="large"
                           data-cy="text-area-quick-create-place-name-french"
                         />
@@ -409,7 +417,15 @@ function QuickCreatePlace(props) {
                           autoSize
                           autoComplete="off"
                           placeholder={t('dashboard.events.addEditEvent.location.quickCreatePlace.namePlaceholder')}
-                          style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '100%' }}
+                          style={{
+                            borderRadius: '4px',
+                            border: `${
+                              calendarContentLanguage === contentLanguage.BILINGUAL
+                                ? '4px solid #E8E8E8'
+                                : '1px solid #b6c1c9'
+                            }`,
+                            width: '100%',
+                          }}
                           size="large"
                           data-cy="text-area-quick-create-place-name-english"
                         />
@@ -427,7 +443,12 @@ function QuickCreatePlace(props) {
                     ]}
                     required
                     data-cy="form-item-quick-create-place-address-label">
-                    <PlacesAutocomplete value={address} onChange={handleChange} onSelect={handleSelect}>
+                    <PlacesAutocomplete
+                      searchOptions={{ componentRestrictions: { country: 'CA' } }}
+                      value={address}
+                      onChange={handleChange}
+                      onSelect={handleSelect}
+                      googleCallbackName="initOne">
                       {({ getInputProps, suggestions, getSuggestionItemProps }) => (
                         <Dropdown
                           open={dropdownOpen}

diff --git a/src/components/Search/Events/EventsSearch.jsx b/src/components/Search/Events/EventsSearch.jsx
@@ -1,12 +1,20 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import './eventsSearch.css';
 import { Input } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
-function EventsSearch(props) {
+function EventsSearch({ autoFocus, ...props }) {
+  const inputRef = useRef();
+  useEffect(() => {
+    if (autoFocus) {
+      inputRef.current.focus();
+    }
+  }, []);
+
   return (
     <Input
       {...props}
+      ref={inputRef}
       className="events-search"
       bordered={true}
       prefix={<SearchOutlined className="events-search-icon" style={{ color: props?.defaultValue && '#1B3DE6' }} />}

diff --git a/src/components/TextEditor/TextEditor.jsx b/src/components/TextEditor/TextEditor.jsx
@@ -89,6 +89,11 @@ function TextEditor(props) {
           placeholder={placeholder}
           className="text-editor"
           modules={modules}
+          style={{
+            border: `${
+              calendarContentLanguage === contentLanguage.BILINGUAL ? '4px solid #E8E8E8' : '1px solid #b6c1c9'
+            }`,
+          }}
           preserveWhitespace
           onChange={onChange}
           data-cy="text-editor"

diff --git a/src/components/Username/username.css b/src/components/Username/username.css
@@ -1,5 +1,5 @@
 .event-list-status-userdetail {
-  text-decoration: underline;
+  /* text-decoration: underline; */
   font-weight: 600;
   text-transform: lowercase;
 }
diff --git a/src/constants/formFields.js b/src/constants/formFields.js
@@ -120,7 +120,13 @@ export const formFieldValue = [
                   autoSize
                   autoComplete="off"
                   placeholder={placeholder?.fr}
-                  style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '423px' }}
+                  style={{
+                    borderRadius: '4px',
+                    border: `${
+                      calendarContentLanguage === contentLanguage.BILINGUAL ? '4px solid #E8E8E8' : '1px solid #b6c1c9'
+                    }`,
+                    width: '423px',
+                  }}
                   size="large"
                   data-cy={`input-text-area-${mappedField}-french`}
                 />
@@ -148,7 +154,13 @@ export const formFieldValue = [
                   autoSize
                   autoComplete="off"
                   placeholder={placeholder?.en}
-                  style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '423px' }}
+                  style={{
+                    borderRadius: '4px',
+                    border: `${
+                      calendarContentLanguage === contentLanguage.BILINGUAL ? '4px solid #E8E8E8' : '1px solid #b6c1c9'
+                    }`,
+                    width: '423px',
+                  }}
                   size="large"
                   data-cy={`input-text-area-${mappedField}-english`}
                 />
@@ -159,7 +171,7 @@ export const formFieldValue = [
       else if (datatype === dataTypes.URI_STRING)
         return (
           <StyledInput
-            addonBefore="https://"
+            addonBefore="URL"
             autoComplete="off"
             style={{ width: '423px' }}
             placeholder={t('dashboard.events.addEditEvent.otherInformation.contact.placeHolderWebsite')}
@@ -198,7 +210,7 @@ export const formFieldValue = [
                             },
                           ]}>
                           <StyledInput
-                            addonBefore="https://"
+                            addonBefore="URL"
                             autoComplete="off"
                             placeholder={t('dashboard.events.addEditEvent.otherInformation.contact.placeHolderWebsite')}
                             data-cy={`input-${mappedField}-${field.key}`}
@@ -255,7 +267,13 @@ export const formFieldValue = [
           interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
           calendarContentLanguage: calendarContentLanguage,
         })}
-        style={{ borderRadius: '4px', border: '4px solid #E8E8E8', width: '423px' }}
+        style={{
+          borderRadius: '4px',
+          border: `${
+            calendarContentLanguage === contentLanguage.BILINGUAL ? '4px solid #E8E8E8' : '1px solid #b6c1c9'
+          }`,
+          width: '423px',
+        }}
         size="large"
         data-cy={`input-text-area-${mappedField}`}
       />

diff --git a/src/constants/standardFieldsTranslations.js b/src/constants/standardFieldsTranslations.js
@@ -1,12 +1,6 @@
 import { Translation } from 'react-i18next';
 
 export const PLACE = [
-  {
-    label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.place.inLanguage')}</Translation>,
-    key: 'inLanguage',
-    en: 'Language of event',
-    fr: "Langue de l'événement",
-  },
   {
     label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.place.PlaceAccessibility')}</Translation>,
     key: 'PlaceAccessibility',
@@ -46,6 +40,12 @@ export const EVENT = [
     en: 'Event type',
     fr: "Type d'événement",
   },
+  {
+    label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.place.inLanguage')}</Translation>,
+    key: 'inLanguage',
+    en: 'Language of event',
+    fr: "Langue de l'événement",
+  },
   // {
   //   label: <Translation>{(t) => t('dashboard.taxonomy.standardFields.Event.PerformerRole')}</Translation>,
   //   key: 'PerformerRole',