Merge pull request #531 from culturecreates/feature/issue-482

feat: Reuse the components from the add event page for the search dro…

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, Logo } = props;
+  return (
+    <div className="search-option-entity-card">
+      <div className="image-container">
+        <Logo />
+      </div>
+      <div className="text-container">
+        <div className="title">{title}</div>
+        <div className="description">{description}</div>
+      </div>
+      <div className="link-container">
+        <ArtsDataLink onClick={() => window.open(`${artsDataLink}`, '_blank', 'noopener,noreferrer')}>
+          <span style={{ textDecoration: 'underline' }}>Source</span>
+          <LinkOutlined />
+        </ArtsDataLink>
+      </div>
+    </div>
+  );
+};
+
+export default EntityCard;

src/components/Card/Common/entityCard.css

@@ -0,0 +1,56 @@
+.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 {
+  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 {
+  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;
+}

src/layout/CreateNewEntity/NewEntityLayout.jsx

@@ -1,35 +1,42 @@
 import { Button, Row, Col } from 'antd';
 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();
 
+  const { t } = useTranslation();
+
   return (
-    <Row className="create-new-entity-page" gutter={[0, 24]}>
-      <Col span={24}>
-        <div className="button-container">
-          <Button type="link" onClick={navigate(-1)}>
-            back to previous screen
-          </Button>
-        </div>
-        <h1 className="heading"> {heading}</h1>
-      </Col>
+    <FeatureFlag isFeatureEnabled={featureFlags.editScreenPeoplePlaceOrganization}>
+      <Row className="create-new-entity-page" gutter={[0, 24]}>
+        <Col span={24}>
+          <div className="button-container">
+            <Button type="link" onClick={() => navigate(-1)}>
+              {t('dashboard.organization.createNew.search.breadcrumb')}
+            </Button>
+          </div>
+          <h1 className="heading"> {heading}</h1>
+        </Col>
 
-      <Col span={16}>
-        <div className="content">
-          <Col span={24}>
-            <h2 className="sub-heading">Search for another instance</h2>
-            <p>{text}</p>
-          </Col>
-          <Col span={24} className="search">
-            <p>{entityName}</p>
-            {children}
-          </Col>
-        </div>
-      </Col>
-    </Row>
+        <Col span={16}>
+          <div className="content">
+            <Col span={24}>
+              <h2 className="sub-heading">{t('dashboard.organization.createNew.search.searchHeading')}</h2>
+              <p className="text">{text}</p>
+            </Col>
+            <Col span={24} className="search">
+              <p>{entityName}</p>
+              {children}
+            </Col>
+          </div>
+        </Col>
+      </Row>
+    </FeatureFlag>
   );
 };
 

src/layout/CreateNewEntity/createNew.css

@@ -17,16 +17,24 @@
   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 .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;
   line-height: 24px;
   letter-spacing: 0em;
   text-align: left;
+  margin-bottom: 0.5rem;
 }

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": {

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": {

src/pages/Dashboard/SearchOrganizations/CreateNewOrgainzation.jsx

@@ -0,0 +1,76 @@
+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 { 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([]);
+
+  useEffect(() => {
+    setOrganizationList([]);
+  }, []);
+
+  return (
+    <NewEntityLayout
+      heading={t('dashboard.organization.createNew.search.title')}
+      entityName={t('dashboard.organization.createNew.search.searchbarHeader')}
+      text={t('dashboard.organization.createNew.search.text')}>
+      <div className="search-bar-organization">
+        <Popover
+          open={isPopoverOpen}
+          arrow={false}
+          overlayClassName="event-popover"
+          placement="bottom"
+          onOpenChange={(open) => setIsPopoverOpen(open)}
+          autoAdjustOverflow={false}
+          getPopupContainer={(trigger) => trigger.parentNode}
+          trigger={['click']}
+          content={
+            <div>
+              <div className="search-scrollable-content">
+                {organizationList?.length > 0 ? (
+                  organizationList?.map((organizer, index) => (
+                    <div
+                      key={index}
+                      className="search-popover-options"
+                      onClick={() => {
+                        setSelectedOrganizers([...selectedOrganizers, organizer]);
+                        setIsPopoverOpen(false);
+                      }}>
+                      <EntityCard
+                        title={organizer.organizationName}
+                        description={organizer.smallDescription}
+                        artsDataLink={organizer.dummyLink}
+                        Logo={Logo}
+                      />
+                    </div>
+                  ))
+                ) : (
+                  <NoContent />
+                )}
+              </div>
+            </div>
+          }>
+          <EventsSearch
+            style={{ borderRadius: '4px' }}
+            placeHolder="Search organizations"
+            onClick={() => {
+              setIsPopoverOpen(!isPopoverOpen);
+            }}
+          />
+        </Popover>
+      </div>
+    </NewEntityLayout>
+  );
+}
+
+export default CreateNewOrgainzation;

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;
+}