feat: default logo for person place and orgs added

culturecreates · Jul 7, 2023 · d3e1c54 · d3e1c54
1 parent 6efb3b3
commit d3e1c54
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 13 deletions.
diff --git a/src/components/List/ListItem.jsx/ListItem.jsx b/src/components/List/ListItem.jsx/ListItem.jsx
@@ -15,6 +15,7 @@ function ListItem(props) {
     title,
     description,
     logo,
+    defaultLogo,
     artsDataLink,
     createdDate,
     createdByFirstName,
@@ -35,9 +36,25 @@ function ListItem(props) {
         className="event-list-item-meta"
         onClick={listItemHandler}
         avatar={
-          <div className="event-list-image-wrapper" style={{ height: '40px', width: '40px' }}>
-            <img src={logo} className="event-list-image" />
-          </div>
+          logo ? (
+            <div className="event-list-image-wrapper" style={{ height: '40px', width: '40px' }}>
+              <img src={logo} className="event-list-image" />
+            </div>
+          ) : (
+            <div
+              className="event-list-image-wrapper"
+              style={{
+                height: '40px',
+                width: '40px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '4px',
+                backgroundColor: '#E3E8FF',
+              }}>
+              {defaultLogo}
+            </div>
+          )
         }
         description={
           <div className="event-list-description">

diff --git a/src/pages/Dashboard/Organizations/Organizations.jsx b/src/pages/Dashboard/Organizations/Organizations.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import './organizations.css';
 import { List, Grid, Modal } from 'antd';
-import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import Icon, { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import FeatureFlag from '../../../layout/FeatureFlag/FeatureFlag';
 import { featureFlags } from '../../../utils/featureFlags';
@@ -19,6 +19,7 @@ import { useSelector } from 'react-redux';
 import { getUserDetails } from '../../../redux/reducer/userSlice';
 import { artsDataLinkChecker } from '../../../utils/artsDataLinkChecker';
 import { userRoles } from '../../../constants/userRoles';
+import { ReactComponent as OrganizationLogo } from '../../../assets/icons/organisations.svg';
 const { confirm } = Modal;
 const { useBreakpoint } = Grid;
 
@@ -114,6 +115,7 @@ function Organizations() {
                     key={index}
                     id={index}
                     logo={item?.logo?.thumbnail?.uri}
+                    defaultLogo={<Icon component={OrganizationLogo} style={{ color: '#607EFC', fontSize: '24px' }} />}
                     title={contentLanguageBilingual({
                       en: item?.name?.en,
                       fr: item?.name?.fr,

diff --git a/src/pages/Dashboard/People/People.jsx b/src/pages/Dashboard/People/People.jsx
@@ -1,13 +1,13 @@
 import React, { useRef, useState, useEffect } from 'react';
 import './people.css';
 import { List, Grid, Modal } from 'antd';
-import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { DeleteOutlined, ExclamationCircleOutlined, UserOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import FeatureFlag from '../../../layout/FeatureFlag/FeatureFlag';
 import { featureFlags } from '../../../utils/featureFlags';
 import Main from '../../../layout/Main/Main';
-import PlaceSearch from '../../../components/Search/Events/EventsSearch';
-import AddPlace from '../../../components/Button/AddEvent';
+import PersonSearch from '../../../components/Search/Events/EventsSearch';
+import AddPerson from '../../../components/Button/AddEvent';
 import Sort from '../../../components/Sort/Sort';
 import NoContent from '../../../components/NoContent/NoContent';
 import ListItem from '../../../components/List/ListItem.jsx/ListItem';
@@ -44,7 +44,7 @@ function People() {
     return calendar.calendarId === calendarId;
   });
 
-  const deletePlaceHandler = (placeId) => {
+  const deletePersonHandler = (personId) => {
     confirm({
       title: t('dashboard.people.deletePerson.title'),
       icon: <ExclamationCircleOutlined />,
@@ -54,7 +54,7 @@ function People() {
       cancelText: t('dashboard.people.deletePerson.cancel'),
       className: 'delete-modal-container',
       onOk() {
-        deletePerson({ id: placeId, calendarId: calendarId });
+        deletePerson({ id: personId, calendarId: calendarId });
       },
     });
   };
@@ -75,8 +75,8 @@ function People() {
       <FeatureFlag isFeatureEnabled={featureFlags.orgPersonPlacesView}>
         <Main>
           <h4 className="events-heading">{t('dashboard.people.people')}</h4>
-          <AddPlace label={t('dashboard.people.person')} />
-          <PlaceSearch
+          <AddPerson label={t('dashboard.people.person')} />
+          <PersonSearch
             placeholder={t('dashboard.people.search.placeholder')}
             //   onPressEnter={(e) => onSearchHandler(e)}
             //   defaultValue={eventSearchQuery}
@@ -112,6 +112,7 @@ function People() {
                     key={index}
                     id={index}
                     logo={item?.logo?.thumbnail?.uri}
+                    defaultLogo={<UserOutlined style={{ color: '#607EFC', fontSize: '24px' }} />}
                     title={contentLanguageBilingual({
                       en: item?.name?.en,
                       fr: item?.name?.fr,
@@ -136,7 +137,7 @@ function People() {
                         <DeleteOutlined
                           key={'delete-icon'}
                           style={{ color: '#222732', fontSize: '24px' }}
-                          onClick={() => deletePlaceHandler(item?.id)}
+                          onClick={() => deletePersonHandler(item?.id)}
                         />
                       ),
                     ]}

diff --git a/src/pages/Dashboard/Places/Places.jsx b/src/pages/Dashboard/Places/Places.jsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import './places.css';
 import { List, Grid, Modal } from 'antd';
-import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { DeleteOutlined, ExclamationCircleOutlined, EnvironmentOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import FeatureFlag from '../../../layout/FeatureFlag/FeatureFlag';
 import { featureFlags } from '../../../utils/featureFlags';
@@ -112,6 +112,7 @@ function Places() {
                     key={index}
                     id={index}
                     logo={item?.logo?.thumbnail?.uri}
+                    defaultLogo={<EnvironmentOutlined style={{ color: '#607EFC', fontSize: '24px' }} />}
                     title={contentLanguageBilingual({
                       en: item?.name?.en,
                       fr: item?.name?.fr,