From e0afc6bee86525cc73833485787a35a491e2e151 Mon Sep 17 00:00:00 2001 From: syam babu Date: Fri, 18 Aug 2023 13:51:43 +0530 Subject: [PATCH 1/3] feat: Reuse the components from the add event page for the search dropdown. --- src/assets/icons/Taxonomy.svg | 4 + src/components/Card/Common/EntityCard.jsx | 27 +++++++ src/components/Card/Common/entityCard.css | 51 +++++++++++++ .../CreateNewEntity/NewEntityLayout.jsx | 2 +- src/layout/CreateNewEntity/createNew.css | 5 +- .../CreateNewOrgainzation.jsx | 75 +++++++++++++++++++ .../SearchOrganizations/createNew.css | 23 ++++++ 7 files changed, 184 insertions(+), 3 deletions(-) create mode 100644 src/assets/icons/Taxonomy.svg create mode 100644 src/components/Card/Common/EntityCard.jsx create mode 100644 src/components/Card/Common/entityCard.css create mode 100644 src/pages/Dashboard/SearchOrganizations/CreateNewOrgainzation.jsx create mode 100644 src/pages/Dashboard/SearchOrganizations/createNew.css diff --git a/src/assets/icons/Taxonomy.svg b/src/assets/icons/Taxonomy.svg new file mode 100644 index 000000000..c4eec075f --- /dev/null +++ b/src/assets/icons/Taxonomy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Card/Common/EntityCard.jsx b/src/components/Card/Common/EntityCard.jsx new file mode 100644 index 000000000..f9d7424f6 --- /dev/null +++ b/src/components/Card/Common/EntityCard.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import './entityCard.css'; +import ArtsDataLink from '../../Tags/ArtsDataLink/ArtsDataLink'; +import { LinkOutlined } from '@ant-design/icons'; + +const EntityCard = (props) => { + const { title, description, artsDataLink, imageUrl } = props; + return ( +
+
+ {imageUrl} +
+
+
{title}
+
{description}
+
+
+ window.open(`${artsDataLink}`, '_blank', 'noopener,noreferrer')}> + Source + + +
+
+ ); +}; + +export default EntityCard; diff --git a/src/components/Card/Common/entityCard.css b/src/components/Card/Common/entityCard.css new file mode 100644 index 000000000..4902c3ade --- /dev/null +++ b/src/components/Card/Common/entityCard.css @@ -0,0 +1,51 @@ +.search-option-entity-card { + min-height: 56px; + max-height: 100px; + padding: 8px 0; + gap: 8px; + display: flex; + align-items: center; +} + +.search-option-entity-card .image-container { + max-height: 40px; + max-width: 40px; +} + +.search-option-entity-card .text-container { + flex-grow: 1; + padding: 0 5px; +} + +.search-option-entity-card .image-container img { + width: 100%; + object-fit: contain; + height: 100%; +} + +.search-option-entity-card .title { + font-weight: 700; + font-size: 16px; + color: #222732; +} + +.search-option-entity-card .description { + font-weight: 400; + font-size: 12px; + color: #646d7b; +} + +.search-option-entity-card .link-btn-container { + border-radius: 4px; + padding: 4px 8px; + width: auto; + color: #0f0e98; + background-color: #e3e8ff; + border: 0px; + margin: 0px; +} + +.search-option-entity-card .link-btn-container:first-child { + display: flex; + gap: 8px; +} diff --git a/src/layout/CreateNewEntity/NewEntityLayout.jsx b/src/layout/CreateNewEntity/NewEntityLayout.jsx index 33299301d..b21b5fb68 100644 --- a/src/layout/CreateNewEntity/NewEntityLayout.jsx +++ b/src/layout/CreateNewEntity/NewEntityLayout.jsx @@ -10,7 +10,7 @@ const NewEntityLayout = ({ children, heading, text, entityName }) => {
-
diff --git a/src/layout/CreateNewEntity/createNew.css b/src/layout/CreateNewEntity/createNew.css index 4689aa968..e875c76c7 100644 --- a/src/layout/CreateNewEntity/createNew.css +++ b/src/layout/CreateNewEntity/createNew.css @@ -17,16 +17,17 @@ font-weight: 700; } -.create-new-entity-page > .content { +.create-new-entity-page .content { background-color: #ffffff; padding: 24px; border-radius: 4px; } -.create-new-entity-page > .content .search p { +.create-new-entity-page .content .search p { font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: 0em; text-align: left; + margin-bottom: 0.5rem; } diff --git a/src/pages/Dashboard/SearchOrganizations/CreateNewOrgainzation.jsx b/src/pages/Dashboard/SearchOrganizations/CreateNewOrgainzation.jsx new file mode 100644 index 000000000..71aac967d --- /dev/null +++ b/src/pages/Dashboard/SearchOrganizations/CreateNewOrgainzation.jsx @@ -0,0 +1,75 @@ +import { Popover } from 'antd'; +import React, { useEffect, useState } from 'react'; +import EntityCard from '../../../components/Card/Common/EntityCard'; +import NoContent from '../../../components/NoContent/NoContent'; +import EventsSearch from '../../../components/Search/Events/EventsSearch'; +import NewEntityLayout from '../../../layout/CreateNewEntity/NewEntityLayout'; +import logo from '../../../assets/icons/Taxonomy.svg'; +import './createNew.css'; + +function CreateNewOrgainzation() { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const [organizationList, setOrganizationList] = useState([]); + const [selectedOrganizers, setSelectedOrganizers] = useState([]); + + useEffect(() => { + setOrganizationList([]); + }, []); + + const heading = 'New Organization'; + const entityName = 'Organization'; + const text = + 'Search to link to an existing instance of the organization. If you don’t find the organization, you can create it.'; + + return ( + +
+ setIsPopoverOpen(open)} + autoAdjustOverflow={false} + getPopupContainer={(trigger) => trigger.parentNode} + trigger={['click']} + content={ +
+
+ {organizationList?.length > 0 ? ( + organizationList?.map((organizer, index) => ( +
{ + setSelectedOrganizers([...selectedOrganizers, organizer]); + setIsPopoverOpen(false); + }}> + +
+ )) + ) : ( + + )} +
+
+ }> + { + setIsPopoverOpen(!isPopoverOpen); + }} + /> + +
+ + ); +} + +export default CreateNewOrgainzation; diff --git a/src/pages/Dashboard/SearchOrganizations/createNew.css b/src/pages/Dashboard/SearchOrganizations/createNew.css new file mode 100644 index 000000000..618dd6abd --- /dev/null +++ b/src/pages/Dashboard/SearchOrganizations/createNew.css @@ -0,0 +1,23 @@ +.search-bar-organization .event-popover .ant-popover-arrow { + display: none; +} + +.search-bar-organization .event-popover { + width: 100%; + padding-top: 0; + padding-bottom: 0; +} + +.search-bar-organization .ant-popover-inner { + filter: drop-shadow(0px 8px 32px rgba(0, 0, 0, 0.2)); +} + +.search-bar-organization .event-popover .ant-popover-inner-content { + padding: 0px; +} + +.search-bar-organization .ant-popover-inner-content .search-scrollable-content { + max-height: 350px; + overflow-y: scroll; + padding: 0px 16px 0 8px; +} From bfe9a62315b5f3a10e034bbbb895d569bfa13b8c Mon Sep 17 00:00:00 2001 From: syam babu Date: Fri, 18 Aug 2023 16:55:59 +0530 Subject: [PATCH 2/3] Added translation. --- src/assets/icons/Taxonomy.svg | 4 ---- src/components/Card/Common/EntityCard.jsx | 4 ++-- src/components/Card/Common/entityCard.css | 13 +++++++++---- src/layout/CreateNewEntity/NewEntityLayout.jsx | 9 ++++++--- src/layout/CreateNewEntity/createNew.css | 9 ++++++++- src/locales/en/translationEn.json | 9 +++++++++ src/locales/fr/transalationFr.json | 9 +++++++++ .../CreateNewOrgainzation.jsx | 17 +++++++++-------- 8 files changed, 52 insertions(+), 22 deletions(-) delete mode 100644 src/assets/icons/Taxonomy.svg diff --git a/src/assets/icons/Taxonomy.svg b/src/assets/icons/Taxonomy.svg deleted file mode 100644 index c4eec075f..000000000 --- a/src/assets/icons/Taxonomy.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/components/Card/Common/EntityCard.jsx b/src/components/Card/Common/EntityCard.jsx index f9d7424f6..c86245f85 100644 --- a/src/components/Card/Common/EntityCard.jsx +++ b/src/components/Card/Common/EntityCard.jsx @@ -4,11 +4,11 @@ import ArtsDataLink from '../../Tags/ArtsDataLink/ArtsDataLink'; import { LinkOutlined } from '@ant-design/icons'; const EntityCard = (props) => { - const { title, description, artsDataLink, imageUrl } = props; + const { title, description, artsDataLink, Logo } = props; return (
- {imageUrl} +
{title}
diff --git a/src/components/Card/Common/entityCard.css b/src/components/Card/Common/entityCard.css index 4902c3ade..1f90648e3 100644 --- a/src/components/Card/Common/entityCard.css +++ b/src/components/Card/Common/entityCard.css @@ -8,8 +8,13 @@ } .search-option-entity-card .image-container { - max-height: 40px; - max-width: 40px; + height: 40px; + width: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + background-color: rgb(227, 232, 255); } .search-option-entity-card .text-container { @@ -17,11 +22,11 @@ padding: 0 5px; } -.search-option-entity-card .image-container img { +/* .search-option-entity-card .image-container img { width: 100%; object-fit: contain; height: 100%; -} +} */ .search-option-entity-card .title { font-weight: 700; diff --git a/src/layout/CreateNewEntity/NewEntityLayout.jsx b/src/layout/CreateNewEntity/NewEntityLayout.jsx index b21b5fb68..2aedbb0d4 100644 --- a/src/layout/CreateNewEntity/NewEntityLayout.jsx +++ b/src/layout/CreateNewEntity/NewEntityLayout.jsx @@ -1,17 +1,20 @@ import { Button, Row, Col } from 'antd'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import './createNew.css'; const NewEntityLayout = ({ children, heading, text, entityName }) => { const navigate = useNavigate(); + const { t } = useTranslation(); + return (

{heading}

@@ -20,8 +23,8 @@ const NewEntityLayout = ({ children, heading, text, entityName }) => {
-

Search for another instance

-

{text}

+

{t('dashboard.organization.createNew.search.searchHeading')}

+

{text}

{entityName}

diff --git a/src/layout/CreateNewEntity/createNew.css b/src/layout/CreateNewEntity/createNew.css index e875c76c7..68c3ee797 100644 --- a/src/layout/CreateNewEntity/createNew.css +++ b/src/layout/CreateNewEntity/createNew.css @@ -22,7 +22,14 @@ padding: 24px; border-radius: 4px; } - +.create-new-entity-page .content .text { + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: #646d7b; +} .create-new-entity-page .content .search p { font-size: 16px; font-weight: 700; diff --git a/src/locales/en/translationEn.json b/src/locales/en/translationEn.json index 75d287d69..e4d0d70e5 100644 --- a/src/locales/en/translationEn.json +++ b/src/locales/en/translationEn.json @@ -446,6 +446,15 @@ "email": "Email", "memberOf": "Member of", "location": "Location" + }, + "createNew": { + "search": { + "title": "New Organization", + "searchbarHeader": "Organization", + "searchHeading": "Search for another instance", + "text": "Search to link to an existing instance of the organization. If you don't find the organization, you can create it.", + "breadcrumb": "back to previous screen" + } } }, "places": { diff --git a/src/locales/fr/transalationFr.json b/src/locales/fr/transalationFr.json index dfbddd6ba..67132e1cb 100644 --- a/src/locales/fr/transalationFr.json +++ b/src/locales/fr/transalationFr.json @@ -445,6 +445,15 @@ "email": "Courriel", "memberOf": "Membre de", "location": "Endroit" + }, + "createNew": { + "search": { + "searchbarHeader": "Données associées", + "title": "Nouvelle organisation", + "text": "Recherchez pour établir un lien avec une instance existante de l'organisation dans d'autres sources de données. Si vous ne trouvez pas l'organisation, vous pouvez la créer.", + "searchHeading": "Rechercher une autre instance", + "breadcrumb":"Retour à l'écran précédent" + } } }, "places": { diff --git a/src/pages/Dashboard/SearchOrganizations/CreateNewOrgainzation.jsx b/src/pages/Dashboard/SearchOrganizations/CreateNewOrgainzation.jsx index 71aac967d..5fd86c4d1 100644 --- a/src/pages/Dashboard/SearchOrganizations/CreateNewOrgainzation.jsx +++ b/src/pages/Dashboard/SearchOrganizations/CreateNewOrgainzation.jsx @@ -4,10 +4,13 @@ import EntityCard from '../../../components/Card/Common/EntityCard'; import NoContent from '../../../components/NoContent/NoContent'; import EventsSearch from '../../../components/Search/Events/EventsSearch'; import NewEntityLayout from '../../../layout/CreateNewEntity/NewEntityLayout'; -import logo from '../../../assets/icons/Taxonomy.svg'; +import { ReactComponent as Logo } from '../../../assets/icons/organization-light.svg'; import './createNew.css'; +import { useTranslation } from 'react-i18next'; function CreateNewOrgainzation() { + const { t } = useTranslation(); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [organizationList, setOrganizationList] = useState([]); const [selectedOrganizers, setSelectedOrganizers] = useState([]); @@ -16,13 +19,11 @@ function CreateNewOrgainzation() { setOrganizationList([]); }, []); - const heading = 'New Organization'; - const entityName = 'Organization'; - const text = - 'Search to link to an existing instance of the organization. If you don’t find the organization, you can create it.'; - return ( - +
)) From 4c1aa1b3613d7df6bb0edb6dbaebb3315db5acf9 Mon Sep 17 00:00:00 2001 From: syam babu Date: Fri, 18 Aug 2023 17:08:52 +0530 Subject: [PATCH 3/3] fix:added feature flag --- .../CreateNewEntity/NewEntityLayout.jsx | 48 ++++++++++--------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/src/layout/CreateNewEntity/NewEntityLayout.jsx b/src/layout/CreateNewEntity/NewEntityLayout.jsx index 2aedbb0d4..a51236c3c 100644 --- a/src/layout/CreateNewEntity/NewEntityLayout.jsx +++ b/src/layout/CreateNewEntity/NewEntityLayout.jsx @@ -3,6 +3,8 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import './createNew.css'; +import { featureFlags } from '../../utils/featureFlags'; +import FeatureFlag from '../FeatureFlag/FeatureFlag'; const NewEntityLayout = ({ children, heading, text, entityName }) => { const navigate = useNavigate(); @@ -10,29 +12,31 @@ const NewEntityLayout = ({ children, heading, text, entityName }) => { const { t } = useTranslation(); return ( - - -
- -
-

{heading}

- + + + +
+ +
+

{heading}

+ - -
- -

{t('dashboard.organization.createNew.search.searchHeading')}

-

{text}

- - -

{entityName}

- {children} - -
- - + +
+ +

{t('dashboard.organization.createNew.search.searchHeading')}

+

{text}

+ + +

{entityName}

+ {children} + +
+ + + ); };