Merge pull request #445 from culturecreates/feature/issue-420

Feature/issue 420

src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './breadCrumbs.css';
+import { useMatches, useNavigate } from 'react-router-dom';
+import { Breadcrumb } from 'antd';
+import { LeftOutlined } from '@ant-design/icons';
+
+function Breadcrumbs(props) {
+  const { name } = props;
+  let matches = useMatches();
+  const navigate = useNavigate();
+
+  let crumbs = matches.filter((match) => Boolean(match.handle?.crumb)).map((match) => match.handle.crumb(match.data));
+
+  return (
+    <Breadcrumb className="breadcrumbs">
+      {crumbs.map((crumb, index) => (
+        <Breadcrumb.Item key={index} className="breadcrumb-item cursor" onClick={() => navigate(-1)}>
+          <LeftOutlined style={{ marginRight: '17px' }} />
+          {crumb}
+        </Breadcrumb.Item>
+      ))}
+
+      {name && <Breadcrumb.Item className="breadcrumb-item">{name}</Breadcrumb.Item>}
+    </Breadcrumb>
+  );
+}
+
+export default Breadcrumbs;

src/components/Breadcrumbs/breadCrumbs.css

@@ -0,0 +1,18 @@
+.breadcrumbs {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.breadcrumbs .breadcrumb-item {
+  color: #0f0e98;
+}
+
+.breadcrumbs .ant-breadcrumb-separator {
+  color: #222732;
+}
+
+.breadcrumbs .cursor {
+  cursor: pointer;
+}

src/components/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export { default } from './Breadcrumbs';

src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Row, Col, Breadcrumb, Button } from 'antd';
-import Icon, { LeftOutlined, CalendarOutlined, UserOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { Row, Col, Button } from 'antd';
+import Icon, { CalendarOutlined, UserOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import moment from 'moment-timezone';
 import './eventReadOnly.css';
 import { useTranslation } from 'react-i18next';
@@ -38,6 +38,7 @@ import { userRoles } from '../../../constants/userRoles';
 import { eventFormRequiredFieldNames } from '../../../constants/eventFormRequiredFieldNames';
 import { contentLanguage } from '../../../constants/contentLanguage';
 import { taxonomyDetails } from '../../../utils/taxonomyDetails';
+import Breadcrumbs from '../../../components/Breadcrumbs/Breadcrumbs';
 
 function EventReadOnly() {
   const { t } = useTranslation();
@@ -147,20 +148,14 @@ function EventReadOnly() {
       <div>
         <Row gutter={[32, 24]} className="read-only-wrapper">
           <Col span={24}>
-            <Breadcrumb className="breadcrumb-item">
-              <Breadcrumb.Item>
-                <LeftOutlined style={{ marginRight: '17px' }} />
-                {t('dashboard.sidebar.events')}
-              </Breadcrumb.Item>
-              <Breadcrumb.Item className="breadcrumb-item">
-                {contentLanguageBilingual({
-                  en: eventData?.name?.en,
-                  fr: eventData?.name?.fr,
-                  interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
-                  calendarContentLanguage: calendarContentLanguage,
-                })}
-              </Breadcrumb.Item>
-            </Breadcrumb>
+            <Breadcrumbs
+              name={contentLanguageBilingual({
+                en: eventData?.name?.en,
+                fr: eventData?.name?.fr,
+                interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
+                calendarContentLanguage: calendarContentLanguage,
+              })}
+            />
           </Col>
 
           <Col span={24}>

src/pages/Dashboard/EventReadOnly/eventReadOnly.css

@@ -1,14 +1,3 @@
-.read-only-wrapper .breadcrumb-item {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  color: #0f0e98;
-}
-
-.read-only-wrapper .breadcrumb-item .ant-breadcrumb-separator {
-  color: #222732;
-}
 .read-only-wrapper .read-only-event-heading h4 {
   font-weight: 700;
   font-size: 34px;

src/pages/Dashboard/Events/Events.jsx

@@ -183,32 +183,22 @@ function Events() {
       sort: sortQuery,
       sessionId: timestampRef,
     });
-    if (!eventSearchQuery || eventSearchQuery === '')
-      setSearchParams(
-        createSearchParams({
-          page: pageNumber,
-          order: filter?.order,
-          sortBy: filter?.sort,
-          ...(filter?.dates?.length > 0 && filter?.dates[0] && { startDateRange: query?.get('start-date-range') }),
-          ...(filter?.dates?.length > 1 && filter?.dates[1] && { endDateRange: query?.get('end-date-range') }),
-          ...(usersQuery && { users: usersQuery }),
-          ...(publicationQuery && { publication: publicationQuery }),
-        }),
-      );
-    else {
-      setSearchParams(
-        createSearchParams({
-          page: pageNumber,
-          query: eventSearchQuery,
-          order: filter?.order,
-          sortBy: filter?.sort,
-          ...(filter?.dates?.length > 0 && filter?.dates[0] && { startDateRange: query?.get('start-date-range') }),
-          ...(filter?.dates?.length > 1 && filter?.dates[1] && { endDateRange: query?.get('end-date-range') }),
-          ...(usersQuery && { users: usersQuery }),
-          ...(publicationQuery && { publication: publicationQuery }),
-        }),
-      );
-    }
+    let params = {
+      page: pageNumber,
+      order: filter?.order,
+      sortBy: filter?.sort,
+      ...(filter?.dates?.length > 0 && filter?.dates[0] && { startDateRange: query?.get('start-date-range') }),
+      ...(filter?.dates?.length > 1 && filter?.dates[1] && { endDateRange: query?.get('end-date-range') }),
+      ...(usersQuery && { users: usersQuery }),
+      ...(publicationQuery && { publication: publicationQuery }),
+    };
+
+    if (eventSearchQuery && eventSearchQuery !== '')
+      params = {
+        ...params,
+        query: eventSearchQuery,
+      };
+    setSearchParams(createSearchParams(params));
 
     sessionStorage.setItem('page', pageNumber);
     sessionStorage.setItem('query', eventSearchQuery);

src/pages/Dashboard/Organizations/Organizations.jsx

@@ -50,6 +50,9 @@ function Organizations() {
   const [pageNumber, setPageNumber] = useState(
     searchParams.get('page') ? searchParams.get('page') : sessionStorage.getItem('organizationPage') ?? 1,
   );
+  const [organizationSearchQuery, setOrganizationSearchQuery] = useState(
+    searchParams.get('query') ? searchParams.get('query') : sessionStorage.getItem('organizationSearchQuery') ?? '',
+  );
 
   const totalCount = allOrganizationData?.count;
 
@@ -58,7 +61,7 @@ function Organizations() {
   const calendar = user?.roles.filter((calendar) => {
     return calendar.calendarId === calendarId;
   });
-  console.log(searchParams);
+
   const deleteOrganizationHandler = (organizationId) => {
     confirm({
       title: t('dashboard.organization.deleteOrganization.title'),
@@ -83,19 +86,33 @@ function Organizations() {
     navigate(`${location.pathname}/${id}`);
   };
 
+  const onSearchHandler = (event) => {
+    setPageNumber(1);
+    setOrganizationSearchQuery(event.target.value);
+  };
+  const onChangeHandler = (event) => {
+    if (event.target.value === '') setOrganizationSearchQuery('');
+  };
+
   useEffect(() => {
     getAllOrganization({
       calendarId,
       sessionId: timestampRef,
       pageNumber,
+      query: organizationSearchQuery,
     });
-    setSearchParams(
-      createSearchParams({
-        page: pageNumber,
-      }),
-    );
+    let params = {
+      page: pageNumber,
+    };
+    if (organizationSearchQuery && organizationSearchQuery !== '')
+      params = {
+        ...params,
+        query: organizationSearchQuery,
+      };
+    setSearchParams(createSearchParams(params));
     sessionStorage.setItem('organizationPage', pageNumber);
-  }, [pageNumber]);
+    sessionStorage.setItem('organizationSearchQuery', organizationSearchQuery);
+  }, [pageNumber, organizationSearchQuery]);
   return (
     allOrganizationSuccess && (
       <FeatureFlag isFeatureEnabled={featureFlags.orgPersonPlacesView}>
@@ -104,10 +121,10 @@ function Organizations() {
           <AddOrganization label={t('dashboard.organization.organization')} />
           <OrganizationSearch
             placeholder={t('dashboard.organization.search.placeholder')}
-            //   onPressEnter={(e) => onSearchHandler(e)}
-            //   defaultValue={eventSearchQuery}
+            onPressEnter={(e) => onSearchHandler(e)}
+            defaultValue={organizationSearchQuery}
             allowClear={true}
-            //   onChange={onChangeHandler}
+            onChange={onChangeHandler}
           />
           <Sort />
           <></>
@@ -134,7 +151,7 @@ function Organizations() {
                     key={index}
                     id={index}
                     logo={item?.logo?.thumbnail?.uri}
-                    defaultLogo={<Icon component={OrganizationLogo} style={{ color: '#607EFC', fontSize: '24px' }} />}
+                    defaultLogo={<Icon component={OrganizationLogo} style={{ color: '#607EFC', fontSize: '18px' }} />}
                     title={contentLanguageBilingual({
                       en: item?.name?.en,
                       fr: item?.name?.fr,

src/pages/Dashboard/OrganizationsReadOnly/OrganizationsReadOnly.jsx

@@ -2,8 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import './organizationsReadOnly.css';
 import Card from '../../../components/Card/Common/Event';
 import { useTranslation } from 'react-i18next';
-import { Breadcrumb, Col, Row } from 'antd';
-import { LeftOutlined } from '@ant-design/icons';
+import { Col, Row } from 'antd';
 import { useNavigate, useOutletContext, useParams } from 'react-router-dom';
 import { useGetOrganizationQuery } from '../../../services/organization';
 import { PathName } from '../../../constants/pathName';
@@ -22,6 +21,7 @@ import FeatureFlag from '../../../layout/FeatureFlag/FeatureFlag';
 import { featureFlags } from '../../../utils/featureFlags';
 import ArtsDataInfo from '../../../components/ArtsDataInfo/ArtsDataInfo';
 import { artsDataLinkChecker } from '../../../utils/artsDataLinkChecker';
+import Breadcrumbs from '../../../components/Breadcrumbs';
 
 function OrganizationsReadOnly() {
   const { t } = useTranslation();
@@ -110,20 +110,14 @@ function OrganizationsReadOnly() {
       <FeatureFlag isFeatureEnabled={featureFlags.orgPersonPlacesView}>
         <Row gutter={[32, 24]} className="read-only-wrapper">
           <Col span={24}>
-            <Breadcrumb className="breadcrumb-item">
-              <Breadcrumb.Item>
-                <LeftOutlined style={{ marginRight: '17px' }} />
-                {t('dashboard.organization.organizations')}
-              </Breadcrumb.Item>
-              <Breadcrumb.Item className="breadcrumb-item">
-                {contentLanguageBilingual({
-                  en: organizationData?.name?.en,
-                  fr: organizationData?.name?.fr,
-                  interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
-                  calendarContentLanguage: calendarContentLanguage,
-                })}
-              </Breadcrumb.Item>
-            </Breadcrumb>
+            <Breadcrumbs
+              name={contentLanguageBilingual({
+                en: organizationData?.name?.en,
+                fr: organizationData?.name?.fr,
+                interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
+                calendarContentLanguage: calendarContentLanguage,
+              })}
+            />
           </Col>
 
           <Col span={24}>

src/pages/Dashboard/People/People.jsx

@@ -47,6 +47,9 @@ function People() {
   const [pageNumber, setPageNumber] = useState(
     searchParams.get('page') ? searchParams.get('page') : sessionStorage.getItem('peoplePage') ?? 1,
   );
+  const [peopleSearchQuery, setPeopleSearchQuery] = useState(
+    searchParams.get('query') ? searchParams.get('query') : sessionStorage.getItem('peopleSearchQuery') ?? '',
+  );
 
   const totalCount = allPeopleData?.count;
 
@@ -80,19 +83,33 @@ function People() {
     navigate(`${location.pathname}/${id}`);
   };
 
+  const onSearchHandler = (event) => {
+    setPageNumber(1);
+    setPeopleSearchQuery(event.target.value);
+  };
+  const onChangeHandler = (event) => {
+    if (event.target.value === '') setPeopleSearchQuery('');
+  };
+
   useEffect(() => {
     getAllPeople({
       calendarId,
       sessionId: timestampRef,
       pageNumber,
+      query: peopleSearchQuery,
     });
-    setSearchParams(
-      createSearchParams({
-        page: pageNumber,
-      }),
-    );
+    let params = {
+      page: pageNumber,
+    };
+    if (peopleSearchQuery && peopleSearchQuery !== '')
+      params = {
+        ...params,
+        query: peopleSearchQuery,
+      };
+    setSearchParams(createSearchParams(params));
     sessionStorage.setItem('peoplePage', pageNumber);
-  }, [pageNumber]);
+    sessionStorage.setItem('peopleSearchQuery', peopleSearchQuery);
+  }, [pageNumber, peopleSearchQuery]);
   return (
     allPeopleSuccess && (
       <FeatureFlag isFeatureEnabled={featureFlags.orgPersonPlacesView}>
@@ -101,10 +118,10 @@ function People() {
           <AddPerson label={t('dashboard.people.person')} />
           <PersonSearch
             placeholder={t('dashboard.people.search.placeholder')}
-            //   onPressEnter={(e) => onSearchHandler(e)}
-            //   defaultValue={eventSearchQuery}
+            onPressEnter={(e) => onSearchHandler(e)}
+            defaultValue={peopleSearchQuery}
             allowClear={true}
-            //   onChange={onChangeHandler}
+            onChange={onChangeHandler}
           />
           <Sort />
           <></>
@@ -131,7 +148,7 @@ function People() {
                     key={index}
                     id={index}
                     logo={item?.logo?.thumbnail?.uri}
-                    defaultLogo={<UserOutlined style={{ color: '#607EFC', fontSize: '24px' }} />}
+                    defaultLogo={<UserOutlined style={{ color: '#607EFC', fontSize: '18px' }} />}
                     title={contentLanguageBilingual({
                       en: item?.name?.en,
                       fr: item?.name?.fr,