Merge pull request #1086 from culturecreates/develop

Develop
culturecreates · May 2, 2024 · 0f6066a · 0f6066a
2 parents 11ae759 + eae5edc
commit 0f6066a
Show file tree

Hide file tree

Showing 27 changed files with 1,488 additions and 460 deletions.
diff --git a/src/components/Badge/LiteralBadge.jsx b/src/components/Badge/LiteralBadge.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Tags from '../Tags/Common/Tags';
+import TooltipStyled from '../Tooltip/TooltipStyled';
+import './literalBadge.css';
+
+const LiteralBadge = ({ tagTitle, promptText = 'promptText' }) => {
+  return (
+    <div className="literal-badge">
+      <TooltipStyled title={promptText}>
+        <Tags>{tagTitle}</Tags>
+      </TooltipStyled>
+    </div>
+  );
+};
+
+export default LiteralBadge;
diff --git a/src/components/Badge/literalBadge.css b/src/components/Badge/literalBadge.css
@@ -0,0 +1,16 @@
+.literal-badge {
+  position: absolute;
+  top: 9px;
+  right: 0;
+  color: red;
+}
+
+.literal-badge .tags-wrapper {
+  height: 24px;
+  padding: 4px 8px 4px 8px;
+  gap: 10px;
+  border-radius: 4px;
+  border: 1px solid #1b3de6;
+  color: #0f0e98;
+  text-transform: capitalize;
+}
diff --git a/src/components/BilingualInput/BilingualInput.jsx b/src/components/BilingualInput/BilingualInput.jsx
@@ -3,6 +3,7 @@ import { Tabs } from 'antd';
 import { WarningOutlined } from '@ant-design/icons';
 import './bilingualInput.css';
 import { useTranslation } from 'react-i18next';
+import LiteralBadge from '../Badge/LiteralBadge';
 
 function BilingualInput(props) {
   const { t } = useTranslation();
@@ -12,9 +13,9 @@ function BilingualInput(props) {
   let defaultTab = props?.defaultTab ?? 'fr';
 
   // Adjust tabs unless brand new entity
-  if (props.fieldData) {
-    let enContent = props.fieldData.en;
-    let frContent = props.fieldData.fr;
+  if (props?.fieldData) {
+    let enContent = props?.fieldData.en;
+    let frContent = props?.fieldData.fr;
 
     // Change default tab to 'en' if only english
     if (enContent && !frContent) {
@@ -40,20 +41,44 @@ function BilingualInput(props) {
     }
   }
 
+  const promptTextFr =
+    props?.fallbackStatus?.fr?.fallbackLiteralKey === '?'
+      ? t('common.forms.languageLiterals.unKnownLanguagePromptText')
+      : t('common.forms.languageLiterals.knownLanguagePromptText');
+  const promptTextEn =
+    props?.fallbackStatus?.en?.fallbackLiteralKey === '?'
+      ? t('common.forms.languageLiterals.unKnownLanguagePromptText')
+      : t('common.forms.languageLiterals.knownLanguagePromptText');
+
   const items = [
     {
       label: labelFr,
       key: 'fr',
       forceRender: true,
-      children: props.children[0],
+      children: (
+        <div className="bilingual-child-wrapper">
+          {props.children[0]}
+          {props?.fallbackStatus?.fr?.tagDisplayStatus && (
+            <LiteralBadge tagTitle={props?.fallbackStatus?.fr?.fallbackLiteralKey} promptText={promptTextFr} />
+          )}
+        </div>
+      ),
     },
     {
       label: labelEn,
       key: 'en',
       forceRender: true,
-      children: props.children[1],
+      children: (
+        <div className="bilingual-child-wrapper">
+          {props.children[1]}
+          {props?.fallbackStatus?.en?.tagDisplayStatus && (
+            <LiteralBadge tagTitle={props?.fallbackStatus?.en?.fallbackLiteralKey} promptText={promptTextEn} />
+          )}
+        </div>
+      ),
     },
   ];
+
   return (
     <Tabs
       type="card"

diff --git a/src/components/BilingualInput/bilingualInput.css b/src/components/BilingualInput/bilingualInput.css
@@ -22,6 +22,23 @@
   border: 0;
 }
 
+.bilingual-child-wrapper {
+  position: relative;
+}
+
+.bilingual-child-wrapper .literal-badge {
+  top: 11px;
+  right: 3px;
+}
+
+.bilingual-child-wrapper .ant-form-item {
+  width: 100%;
+}
+
+.bilingual-child-with-badge .ant-input-lg {
+  padding-right: 35px;
+}
+
 @media screen and (max-width: 480px) {
   .bilingual-input-tab .ant-input-lg {
     font-size: 12px;

diff --git a/src/components/Card/Common/event.css b/src/components/Card/Common/event.css
@@ -6,6 +6,7 @@
 
 .add-event-section-col .add-event-section-wrapper {
   background-color: #ffffff;
+  max-width: 471px;
 }
 
 .add-event-section-col .add-event-date-wrap {

diff --git a/src/components/ContentLanguageInput/ContentLanguageInput.jsx b/src/components/ContentLanguageInput/ContentLanguageInput.jsx
@@ -1,14 +1,56 @@
+import React from 'react';
+import { useOutletContext } from 'react-router-dom';
 import { contentLanguage } from '../../constants/contentLanguage';
+import LiteralBadge from '../Badge/LiteralBadge';
+import { useTranslation } from 'react-i18next';
+import useModifyChildernWithFallbackLanguage from '../../hooks/useModifyChildernWithFallbackLanguage';
 
 function ContentLanguageInput(props) {
   const { children, calendarContentLanguage } = props;
+  const { t } = useTranslation();
 
-  if (calendarContentLanguage === contentLanguage.FRENCH)
-    return children?.props?.children?.filter((child) => child?.key === contentLanguage.FRENCH);
-  else if (calendarContentLanguage === contentLanguage.ENGLISH)
-    return children?.props?.children?.filter((child) => child?.key === contentLanguage.ENGLISH);
-  else if (calendarContentLanguage === contentLanguage.BILINGUAL) return children;
-  else return children;
+  // eslint-disable-next-line no-unused-vars
+  const [currentCalendarData, _pageNumber, _setPageNumber, _getCalendar] = useOutletContext();
+
+  const { fallbackStatus, modifiedChildren } = useModifyChildernWithFallbackLanguage(props, currentCalendarData);
+
+  if (!modifiedChildren) return children;
+
+  if (calendarContentLanguage === contentLanguage.FRENCH) {
+    const promptText =
+      fallbackStatus?.fr?.fallbackLiteralKey === '?'
+        ? t('common.forms.languageLiterals.unKnownLanguagePromptText')
+        : t('common.forms.languageLiterals.knownLanguagePromptText');
+    return (
+      <>
+        {modifiedChildren[0]?.props?.children?.filter(
+          (child) => child?.key?.replace(/[.$]/g, '') === contentLanguage.FRENCH,
+        )}
+        {fallbackStatus?.fr?.tagDisplayStatus && (
+          <LiteralBadge tagTitle={fallbackStatus?.fr?.fallbackLiteralKey} promptText={promptText} />
+        )}
+      </>
+      // add literal badge to the fr children
+    );
+  } else if (calendarContentLanguage === contentLanguage.ENGLISH) {
+    const promptText =
+      fallbackStatus?.en?.fallbackLiteralKey === '?'
+        ? t('common.forms.languageLiterals.unKnownLanguagePromptText')
+        : t('common.forms.languageLiterals.knownLanguagePromptText');
+    return (
+      <>
+        {modifiedChildren[0]?.props?.children?.filter(
+          (child) => child?.key?.replace(/[.$]/g, '') === contentLanguage.ENGLISH,
+        )}
+        {fallbackStatus?.en?.tagDisplayStatus && (
+          <LiteralBadge tagTitle={fallbackStatus?.en?.fallbackLiteralKey} promptText={promptText} />
+        )}
+      </>
+      // add literal badge to the en children
+    );
+  } else if (calendarContentLanguage === contentLanguage.BILINGUAL) return <>{modifiedChildren[0]}</>;
+  else return <>{modifiedChildren[0]}</>;
+  // for bilingual, return the children as is, literal is added in BilingualInput component
 }
 
 export default ContentLanguageInput;
diff --git a/src/components/List/SelectionItem/SelectionItem.jsx b/src/components/List/SelectionItem/SelectionItem.jsx
@@ -9,6 +9,7 @@ import { getUserDetails } from '../../../redux/reducer/userSlice';
 import ArtsDataLink from '../../Tags/ArtsDataLink/ArtsDataLink';
 import SmallButton from '../../Button/SmallButton';
 import ReadOnlyProtectedComponent from '../../../layout/ReadOnlyProtectedComponent';
+import LiteralBadge from '../../Badge/LiteralBadge';
 
 function SelectionItem(props) {
   const {
@@ -30,9 +31,16 @@ function SelectionItem(props) {
     onEdit,
     edit,
     creatorId,
+    fallbackConfig,
   } = props;
   const { t } = useTranslation();
   const { user } = useSelector(getUserDetails);
+
+  const promptText =
+    fallbackConfig?.en?.fallbackLiteralKey === '?' || fallbackConfig?.fr?.fallbackLiteralKey === '?'
+      ? t('common.forms.languageLiterals.unKnownLanguagePromptText')
+      : t('common.forms.languageLiterals.knownLanguagePromptText');
+
   return (
     <div
       className="selection-item-wrapper"
@@ -91,6 +99,12 @@ function SelectionItem(props) {
           title={
             <span className="selection-item-title" data-cy="span-entity-name">
               {name}
+              {(fallbackConfig?.fr?.tagDisplayStatus || fallbackConfig?.en?.tagDisplayStatus) && (
+                <LiteralBadge
+                  tagTitle={fallbackConfig?.en?.fallbackLiteralKey ?? fallbackConfig?.fr?.fallbackLiteralKey}
+                  promptText={promptText}
+                />
+              )}
             </span>
           }
           description={

diff --git a/src/components/List/SelectionItem/selectionItem.css b/src/components/List/SelectionItem/selectionItem.css
@@ -23,7 +23,15 @@
   font-weight: 700;
   font-size: 16px;
   color: #222732;
+  display: flex;
+  gap: 8px;
+  align-items: center;
 }
+
+.selection-item-list-wrapper .selection-item-title .literal-badge {
+  position: inherit;
+}
+
 .selection-item-list-wrapper .ant-list-item-action-split {
   display: none;
 }

diff --git a/src/components/Modal/Confirm/Confirm.jsx b/src/components/Modal/Confirm/Confirm.jsx
@@ -2,9 +2,15 @@ import { Modal } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import './confirm.css';
 
-export const Confirm = ({ title, content, onAction, okText, cancelText }) => {
+export const Confirm = ({ title, content, onAction, okText, cancelText, className }) => {
   const { confirm } = Modal;
 
+  let modalClassName = ['global-delete-modal-container'];
+  if (className) {
+    modalClassName.push(className);
+    modalClassName = modalClassName.join(' ');
+  }
+
   return confirm({
     title: (
       <>
@@ -22,7 +28,7 @@ export const Confirm = ({ title, content, onAction, okText, cancelText }) => {
     okText: okText,
     cancelText: cancelText,
     centered: true,
-    className: 'global-delete-modal-container',
+    className: modalClassName,
     closable: true,
     header: null,
     onOk() {

diff --git a/src/components/Modal/QuickCreateOrganization/QuickCreateOrganization.jsx b/src/components/Modal/QuickCreateOrganization/QuickCreateOrganization.jsx
@@ -21,6 +21,7 @@ import Outlined from '../../Button/Outlined';
 import { useNavigate, useParams } from 'react-router-dom';
 import { PathName } from '../../../constants/pathName';
 import QuickCreateSaving from '../QuickCreateSaving/QuickCreateSaving';
+import { eventPublishState } from '../../../constants/eventPublishState';
 
 const { TextArea } = Input;
 
@@ -60,7 +61,7 @@ function QuickCreateOrganization(props) {
 
   useEffect(() => {
     if (event.length > 0) {
-      saveAsDraftHandler(event[0], true)
+      saveAsDraftHandler(event[0], true, eventPublishState.DRAFT)
         .then((res) => {
           setLoaderModalOpen(false);
           if (res) {

diff --git a/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx b/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx
@@ -26,6 +26,7 @@ import Outlined from '../../Button/Outlined';
 import { useNavigate, useParams } from 'react-router-dom';
 import { PathName } from '../../../constants/pathName';
 import QuickCreateSaving from '../QuickCreateSaving/QuickCreateSaving';
+import { eventPublishState } from '../../../constants/eventPublishState';
 
 const { TextArea } = Input;
 
@@ -63,7 +64,7 @@ function QuickCreatePerson(props) {
 
   useEffect(() => {
     if (event.length > 0) {
-      saveAsDraftHandler(event[0], true)
+      saveAsDraftHandler(event[0], true, eventPublishState.DRAFT)
         .then((res) => {
           setLoaderModalOpen(false);
           if (res) {

diff --git a/src/components/Modal/QuickCreatePlace/QuickCreatePlace.jsx b/src/components/Modal/QuickCreatePlace/QuickCreatePlace.jsx
@@ -30,6 +30,7 @@ import { PathName } from '../../../constants/pathName';
 import QuickCreateSaving from '../QuickCreateSaving/QuickCreateSaving';
 import { sourceOptions } from '../../../constants/sourceOptions';
 import { entitiesClass } from '../../../constants/entitiesClass';
+import { eventPublishState } from '../../../constants/eventPublishState';
 
 const { TextArea } = Input;
 
@@ -61,7 +62,7 @@ function QuickCreatePlace(props) {
   const [event, setEvent] = useState([]);
   useEffect(() => {
     if (event.length > 0) {
-      saveAsDraftHandler(event[0], true)
+      saveAsDraftHandler(event[0], true, eventPublishState.DRAFT)
         .then((res) => {
           setLoaderModalOpen(false);
           if (res) {

diff --git a/src/components/Select/selectOption.settings.js b/src/components/Select/selectOption.settings.js
@@ -1,5 +1,6 @@
 import { sourceOptions } from '../../constants/sourceOptions';
 import { contentLanguageBilingual } from '../../utils/bilingual';
+import { languageFallbackSetup } from '../../utils/languageFallbackSetup';
 import SelectionItem from '../List/SelectionItem';
 import { EnvironmentOutlined } from '@ant-design/icons';
 
@@ -23,7 +24,7 @@ export const taxonomyOptions = (data, user, mappedToField, calendarContentLangua
   return options;
 };
 
-export const placesOptions = (data, user, calendarContentLanguage, source = sourceOptions.CMS) => {
+export const placesOptions = (data, user, calendarContentLanguage, source = sourceOptions.CMS, currentCalendarData) => {
   let options = data?.map((place) => {
     return {
       label: (
@@ -84,6 +85,14 @@ export const placesOptions = (data, user, calendarContentLanguage, source = sour
       uri: place?.uri,
       type: place?.type,
       creatorId: place?.creator?.userId ?? place?.createdByUserId,
+      fallBackStatus: currentCalendarData
+        ? languageFallbackSetup({
+            currentCalendarData,
+            fieldData: place?.name,
+            languageFallbacks: currentCalendarData?.languageFallbacks,
+            isFieldsDirty: true,
+          })
+        : null,
     };
   });
   return options;

diff --git a/src/components/TreeSelectOption/treeSelectOption.settings.js b/src/components/TreeSelectOption/treeSelectOption.settings.js
@@ -4,6 +4,7 @@ import Icon, { UserOutlined } from '@ant-design/icons';
 import { ReactComponent as Organizations } from '../../assets/icons/organisations.svg';
 import { taxonomyClass } from '../../constants/taxonomyClass';
 import { sourceOptions } from '../../constants/sourceOptions';
+import { languageFallbackSetup } from '../../utils/languageFallbackSetup';
 
 const handleMultilevelTreeSelect = (children, user, calendarContentLanguage, parentLabel) => {
   return children?.map((child) => {
@@ -75,7 +76,13 @@ export const treeTaxonomyOptions = (data, user, mappedToField, isDynamicField, c
   return options;
 };
 
-export const treeEntitiesOption = (data, user, calendarContentLanguage, source = sourceOptions.CMS) => {
+export const treeEntitiesOption = (
+  data,
+  user,
+  calendarContentLanguage,
+  source = sourceOptions.CMS,
+  currentCalendarData,
+) => {
   let options = data?.map((entity) => {
     return {
       label: (
@@ -145,6 +152,14 @@ export const treeEntitiesOption = (data, user, calendarContentLanguage, source =
       uri: entity?.uri,
       source: source,
       creatorId: entity?.creator?.userId,
+      fallBackStatus: currentCalendarData
+        ? languageFallbackSetup({
+            currentCalendarData,
+            fieldData: entity?.name,
+            languageFallbacks: currentCalendarData?.languageFallbacks,
+            isFieldsDirty: true,
+          })
+        : null,
     };
   });
   return options;