Merge pull request #669 from culturecreates/develop

Develop
culturecreates · Oct 11, 2023 · be0b68a · be0b68a
2 parents 1d08516 + 7289b33
commit be0b68a
Show file tree

Hide file tree

Showing 62 changed files with 2,799 additions and 565 deletions.
diff --git a/.env.production b/.env.production
@@ -9,6 +9,7 @@ REACT_APP_FEATURE_FLAG_ORG_PERSON_PLACE_VIEW=true
 REACT_APP_FEATURE_FLAG_QUICK_CREATE_PEOPLE_PLACE=true
 REACT_APP_FEATURE_FLAG_EDIT_SCREEN_PEOPLE_PLACE_ORGANIZATION=false
 REACT_APP_FEATURE_FLAG_USERS=false
+REACT_APP_FEATURE_FLAG_TAXONOMY=false
 REACT_APP_FEATURE_FLAG_IMAGE_CROP=false
 REACT_APP_ENV="production"
 REACT_APP_INVITE_URL=" https://cms.footlight.io/join?invitationId="

diff --git a/.env.staging b/.env.staging
@@ -9,6 +9,7 @@ REACT_APP_FEATURE_FLAG_ORG_PERSON_PLACE_VIEW=true
 REACT_APP_FEATURE_FLAG_QUICK_CREATE_PEOPLE_PLACE=true
 REACT_APP_FEATURE_FLAG_EDIT_SCREEN_PEOPLE_PLACE_ORGANIZATION=true
 REACT_APP_FEATURE_FLAG_USERS=true
+REACT_APP_FEATURE_FLAG_TAXONOMY=true
 REACT_APP_FEATURE_FLAG_IMAGE_CROP=true
 REACT_APP_ENV="staging"
 REACT_APP_INVITE_URL="http://staging.cms.footlight.io/join?invitationId="

diff --git a/src/components/Button/BreadCrumb/BreadCrumbButton.jsx b/src/components/Button/BreadCrumb/BreadCrumbButton.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LeftOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { useTranslation } from 'react-i18next';
+import './breadCrumbButton.css';
+
+const BreadCrumbButton = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  return (
+    <div className="breadcrumb-btn-container">
+      <Button type="link" onClick={() => navigate(-1)} icon={<LeftOutlined style={{ marginRight: '17px' }} />}>
+        {t('dashboard.organization.createNew.search.breadcrumb')}
+      </Button>
+    </div>
+  );
+};
+
+export default BreadCrumbButton;
diff --git a/src/components/Button/BreadCrumb/breadCrumbButton.css b/src/components/Button/BreadCrumb/breadCrumbButton.css
@@ -0,0 +1,10 @@
+.breadcrumb-btn-container .ant-btn {
+  color: #0f0e98;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  padding: 0;
+  font-weight: 600;
+  width: fit-content;
+  cursor: pointer;
+}
diff --git a/src/components/Button/BreadCrumb/index.js b/src/components/Button/BreadCrumb/index.js
@@ -0,0 +1 @@
+export { default } from './BreadCrumbButton';
diff --git a/src/components/DraggableTree/DraggableTree.jsx b/src/components/DraggableTree/DraggableTree.jsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Tree, Modal } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+const formatTreeData = (data, language) => {
+  const formattedData = [];
+
+  const traverse = (node, parentKey) => {
+    const key = parentKey ? `${parentKey}-${node.id}` : `${node.id}`;
+
+    const formattedNode = {
+      key,
+      title: node.name[language],
+    };
+
+    if (node.children && node.children.length > 0) {
+      formattedNode.children = node.children.map((child) => traverse(child, key));
+    }
+
+    return formattedNode;
+  };
+
+  data?.concepts?.forEach((node) => {
+    formattedData.push(traverse(node));
+  });
+
+  return formattedData;
+};
+
+const DraggableTree = ({ data }) => {
+  const [engGData, setEngGData] = useState(formatTreeData(data, 'en'));
+  const [frenchGData, setFrenchGData] = useState(formatTreeData(data, 'fr'));
+  const [expandedKeys] = useState(['0-0', '0-0-0', '0-0-0-0']);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedNode, setSelectedNode] = useState(null);
+  const { t } = useTranslation();
+
+  const updateTreeData = (dragKey, dropKey, dropPos, language) => {
+    const updateData = (treeData) => {
+      const dragIndex = treeData.findIndex((item) => item.key === dragKey);
+      const dropIndex = treeData.findIndex((item) => item.key === dropKey);
+
+      if (dragIndex !== -1 && dropIndex !== -1) {
+        const [draggedItem] = treeData.splice(dragIndex, 1);
+        treeData.splice(dropPos === -1 ? dropIndex : dropIndex + 1, 0, draggedItem);
+      }
+
+      return treeData;
+    };
+
+    if (language === 'en') {
+      setEngGData((prevData) => updateData([...prevData]));
+    } else if (language === 'fr') {
+      setFrenchGData((prevData) => updateData([...prevData]));
+    }
+  };
+
+  const onDragEnter = (info) => {
+    console.log(info);
+  };
+
+  const onDrop = (info) => {
+    const dropKey = info.node.key;
+    const dragKey = info.dragNode.key;
+    const dropPos = info.dropPosition;
+
+    if (dragKey.split('-').slice(0, -1).join('-') !== dropKey.split('-').slice(0, -1).join('-')) {
+      const parentKey = dropKey.split('-').slice(0, -1).join('-');
+      updateTreeData(dragKey, parentKey, 1, 'en');
+      updateTreeData(dragKey, parentKey, 1, 'fr');
+      return;
+    }
+
+    updateTreeData(dragKey, dropKey, dropPos, 'en');
+    updateTreeData(dragKey, dropKey, dropPos, 'fr');
+  };
+
+  const handleClick = (node) => {
+    setSelectedNode(node);
+    setModalVisible(true);
+  };
+
+  const handleModalClose = () => {
+    setModalVisible(false);
+  };
+
+  useEffect(() => {
+    setEngGData(formatTreeData(data, 'en'));
+    setFrenchGData(formatTreeData(data, 'fr'));
+  }, [data]);
+
+  return (
+    <>
+      <Form.Item style={{ width: '50%' }}>
+        <span className="tag-header">{t('dashboard.taxonomy.addNew.concepts.english')}</span>
+        <Tree
+          className="draggable-tree"
+          defaultExpandedKeys={expandedKeys}
+          draggable
+          blockNode
+          onDragEnter={onDragEnter}
+          onDrop={onDrop}
+          treeData={engGData}
+          onSelect={(selectedKeys, { node }) => handleClick(node)}
+        />
+      </Form.Item>
+      <Form.Item style={{ width: '50%' }}>
+        <span className="tag-header">{t('dashboard.taxonomy.addNew.concepts.french')}</span>
+        <Tree
+          className="draggable-tree"
+          defaultExpandedKeys={expandedKeys}
+          draggable
+          blockNode
+          onDragEnter={onDragEnter}
+          onDrop={onDrop}
+          treeData={frenchGData}
+          onSelect={(selectedKeys, { node }) => handleClick(node)}
+        />
+      </Form.Item>
+      <Modal title="Node Details" open={modalVisible} onCancel={handleModalClose} footer={null}>
+        {selectedNode && (
+          <>
+            <p>{`Key: ${selectedNode.key}`}</p>
+            <p>{`Title: ${selectedNode.title}`}</p>
+          </>
+        )}
+      </Modal>
+    </>
+  );
+};
+
+export default DraggableTree;
diff --git a/src/components/DraggableTree/draggableTree.css b/src/components/DraggableTree/draggableTree.css
diff --git a/src/components/DraggableTree/index.js b/src/components/DraggableTree/index.js
@@ -0,0 +1 @@
+export { default } from './DraggableTree';
diff --git a/src/components/Dropdown/UserProfile/UserProfileDropDown.jsx b/src/components/Dropdown/UserProfile/UserProfileDropDown.jsx
@@ -56,10 +56,7 @@ const UserProfileDropDown = () => {
       trigger={['click']}>
       <div className="user-profile-dropwdown-content">
         <Avatar className="dropdown-avatar" src={user.profileImage} size={32} />
-        <span className="user-profile-user-name">
-          {user?.firstName?.charAt(0)}
-          {user?.lastName}
-        </span>
+        <span className="user-profile-user-name">{user?.userName}</span>
         <CaretDownOutlined />
       </div>
     </Dropdown>

diff --git a/src/components/List/SelectionItem/SelectionItem.jsx b/src/components/List/SelectionItem/SelectionItem.jsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { contentLanguageBilingual } from '../../../utils/bilingual';
 import { useSelector } from 'react-redux';
 import { getUserDetails } from '../../../redux/reducer/userSlice';
+import ArtsDataLink from '../../Tags/ArtsDataLink/ArtsDataLink';
 
 function SelectionItem(props) {
   const {
@@ -21,6 +22,8 @@ function SelectionItem(props) {
     openingHours,
     calendarContentLanguage,
     artsDataLink,
+    artsDataDetails,
+    showExternalSourceLink,
   } = props;
   const { t } = useTranslation();
   const { user } = useSelector(getUserDetails);
@@ -31,6 +34,16 @@ function SelectionItem(props) {
       <List.Item
         className="selection-item-list-wrapper"
         actions={[
+          showExternalSourceLink && artsDataLink && (
+            <ArtsDataLink
+              onClick={(e) => {
+                e.stopPropagation();
+                window.open(`${artsDataLink}`, '_blank', 'noopener,noreferrer');
+              }}>
+              <span style={{ textDecoration: 'underline' }}>Artsdata</span>
+              <LinkOutlined />
+            </ArtsDataLink>
+          ),
           closable && (
             <Button type="text" key="list-loadmore-close" onClick={onClose} style={{ padding: '0px' }}>
               <CloseCircleOutlined style={{ color: '#1b3de6', fontSize: '21px' }} />
@@ -156,7 +169,7 @@ function SelectionItem(props) {
           )}
         </Row>
       )}
-      {artsDataLink && (
+      {artsDataLink && artsDataDetails && (
         <div className="arts-data-link">
           <div className="arts-data-link-content">
             <div className="arts-data-link-first-line">

diff --git a/src/components/List/User/ListCard.jsx b/src/components/List/User/ListCard.jsx
@@ -5,10 +5,10 @@ import StatusTag from '../../Tags/UserStatus/StatusTag';
 import './listCard.css';
 
 const ListCard = (props) => {
-  const { id, actions, listItemHandler, title, description, activityStatus, invitedBy } = props;
+  const { id, actions, listItemHandler, title, description, activityStatus, invitedBy, styles } = props;
   const { t } = useTranslation();
   return (
-    <List.Item className="users-list-item-wrapper" key={id} actions={actions} style={{ padding: '24px' }}>
+    <List.Item className="users-list-item-wrapper" key={id} actions={actions} {...styles}>
       <List.Item.Meta className="user-item-meta" title={title} description={description} onClick={listItemHandler} />
       <div className="user-item-content" onClick={listItemHandler}>
         <StatusTag activityStatus={activityStatus} />

diff --git a/src/components/Modal/ChangePassword/ChangePassword.jsx b/src/components/Modal/ChangePassword/ChangePassword.jsx
@@ -81,6 +81,7 @@ const ChangePassword = ({ isPopoverOpen, setIsPopoverOpen }) => {
       wrapClassName="change-password-modal"
       open={isPopoverOpen.password}
       onOk={handleFormSubmit}
+      bodyStyle={{ padding: 32 }}
       onCancel={() => {
         form.resetFields();
         setIsPopoverOpen({ ...isPopoverOpen, password: false });
@@ -92,7 +93,7 @@ const ChangePassword = ({ isPopoverOpen, setIsPopoverOpen }) => {
           rules={[
             {
               required: true,
-              message: 'Please enter your password!',
+              message: t('resetPassword.validations.emptyPassword'),
             },
           ]}>
           <PasswordInput placeholder={t('dashboard.settings.addUser.passwordModal.placeHolder.current')} />
@@ -103,7 +104,7 @@ const ChangePassword = ({ isPopoverOpen, setIsPopoverOpen }) => {
           rules={[
             {
               required: true,
-              message: 'Please enter your new password!',
+              message: t('resetPassword.validations.emptyPassword'),
             },
           ]}>
           <PasswordInput placeholder={t('dashboard.settings.addUser.passwordModal.placeHolder.new')} />
@@ -115,14 +116,14 @@ const ChangePassword = ({ isPopoverOpen, setIsPopoverOpen }) => {
           rules={[
             {
               required: true,
-              message: 'Please confirm your new password!',
+              message: t('resetPassword.validations.emptyPassword'),
             },
             ({ getFieldValue }) => ({
               validator(_, value) {
                 if (!value || getFieldValue('newPassword') === value) {
                   return Promise.resolve();
                 }
-                return Promise.reject(new Error('The two passwords do not match!'));
+                return Promise.reject(new Error(t('resetPassword.validations.passwordMatch')));
               },
             }),
           ]}>

diff --git a/src/components/Modal/QuickCreateOrganization/QuickCreateOrganization.jsx b/src/components/Modal/QuickCreateOrganization/QuickCreateOrganization.jsx
@@ -16,6 +16,7 @@ import { treeEntitiesOption } from '../../TreeSelectOption/treeSelectOption.sett
 import { useSelector } from 'react-redux';
 import { getUserDetails } from '../../../redux/reducer/userSlice';
 import { entitiesClass } from '../../../constants/entitiesClass';
+import { sourceOptions } from '../../../constants/sourceOptions';
 
 const { TextArea } = Input;
 
@@ -59,7 +60,7 @@ function QuickCreateOrganization(props) {
             logo: response?.logo,
           },
         ];
-        createdOrganizer = treeEntitiesOption(createdOrganizer, user, calendarContentLanguage);
+        createdOrganizer = treeEntitiesOption(createdOrganizer, user, calendarContentLanguage, sourceOptions.CMS);
         if (createdOrganizer?.length === 1) {
           switch (selectedOrganizerPerformerSupporterType) {
             case organizerPerformerSupporterTypes.organizer:

diff --git a/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx b/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx
@@ -21,6 +21,7 @@ import { taxonomyDetails } from '../../../utils/taxonomyDetails';
 import NoContent from '../../NoContent/NoContent';
 import TreeSelectOption from '../../TreeSelectOption/TreeSelectOption';
 import Tags from '../../Tags/Common/Tags';
+import { sourceOptions } from '../../../constants/sourceOptions';
 
 const { TextArea } = Input;
 
@@ -71,7 +72,7 @@ function QuickCreatePerson(props) {
             image: response?.image,
           },
         ];
-        createdPerson = treeEntitiesOption(createdPerson, user, calendarContentLanguage);
+        createdPerson = treeEntitiesOption(createdPerson, user, calendarContentLanguage, sourceOptions.CMS);
         if (createdPerson?.length === 1) {
           switch (selectedOrganizerPerformerSupporterType) {
             case organizerPerformerSupporterTypes.organizer: