Merge pull request #865 from culturecreates/feature/issue-843

Feature/issue 843
culturecreates · Dec 13, 2023 · 0ece0a7 · 0ece0a7
2 parents 1866d3d + b4f890f
commit 0ece0a7
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 7 deletions.
diff --git a/src/components/ImageUpload/ImageUpload.jsx b/src/components/ImageUpload/ImageUpload.jsx
@@ -5,6 +5,7 @@ import { LoadingOutlined, DownloadOutlined, DeleteOutlined, EditOutlined } from
 import Outlined from '../Button/Outlined';
 import { useTranslation } from 'react-i18next';
 import ImageCrop from '../ImageCrop';
+import { useOutletContext } from 'react-router-dom';
 
 function ImageUpload(props) {
   const {
@@ -23,6 +24,7 @@ function ImageUpload(props) {
   const [loading, setLoading] = useState(false);
   const [imageUrl, setImageUrl] = useState(props?.imageUrl ?? null);
   const [originalImage, setOriginalImage] = useState(originalImageUrl ?? null);
+  const [currentCalendarData] = useOutletContext();
 
   const [cropValues, setCropValues] = useState({
     large: {
@@ -132,7 +134,13 @@ function ImageUpload(props) {
             return (
               <span className="image-footer">
                 <span className="image-contents">
-                  <img className="image-thumbnail" src={file?.url ?? file?.thumbUrl} />
+                  <img
+                    className="image-thumbnail"
+                    style={{
+                      aspectRatio: currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio.replace(/:/g, '/'),
+                    }}
+                    src={file?.url ?? file?.thumbUrl}
+                  />
                   <a
                     className="image-name"
                     target="_blank"

diff --git a/src/components/ImageUpload/imageUpload.css b/src/components/ImageUpload/imageUpload.css
@@ -32,8 +32,9 @@
 .image-footer .image-thumbnail {
   display: block;
   height: 48px;
+  min-height: 48px;
   overflow: hidden;
-  width: 48px;
+  /* width: 48px; */
 }
 
 .image-footer .edit-image {

diff --git a/src/components/List/Events/List.jsx b/src/components/List/Events/List.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useOutletContext, useParams } from 'react-router-dom';
 import './list.css';
 import { List, Grid, Dropdown } from 'antd';
 import { MoreOutlined, StarOutlined } from '@ant-design/icons';
@@ -19,6 +19,7 @@ import { dateTypes } from '../../../constants/dateTypes';
 import { userRoles } from '../../../constants/userRoles';
 import { eventStatus } from '../../../constants/eventStatus';
 import moment from 'moment-timezone';
+import { LinkOutlined } from '@ant-design/icons';
 
 const { useBreakpoint } = Grid;
 
@@ -31,12 +32,17 @@ function Lists(props) {
   let { calendarId } = useParams();
   const lang = i18n.language;
   const { user } = useSelector(getUserDetails);
+  const [currentCalendarData] = useOutletContext();
   const totalCount = data?.totalCount;
 
   const calendar = user?.roles?.filter((calendar) => {
     return calendar?.calendarId === calendarId;
   });
 
+  let artsDataLinkChecker = (data) => {
+    return data?.sameAs?.filter((item) => item?.type === 'ArtsdataIdentifier');
+  };
+
   const listItemHandler = (id, creatorId, publishState) => {
     if (routinghandler(user, calendarId, creatorId, publishState))
       navigate(`${location.pathname}${PathName.AddEvent}/${id}`);
@@ -120,7 +126,9 @@ function Lists(props) {
             className="event-list-item-meta"
             onClick={() => listItemHandler(eventItem?.id, eventItem?.creator?.userId, eventItem?.publishState)}
             avatar={
-              <div className="event-list-image-wrapper">
+              <div
+                className="event-list-image-wrapper"
+                style={{ aspectRatio: currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio + '' }}>
                 {(calendar[0]?.role === userRoles.ADMIN || user?.isSuperAdmin) && eventItem?.isFeatured && (
                   <div className="image-featured-badge">
                     <StarOutlined
@@ -136,6 +144,7 @@ function Lists(props) {
                       (calendar[0]?.role === userRoles.ADMIN || user?.isSuperAdmin) &&
                       eventItem?.isFeatured &&
                       '3px solid #1B3DE6',
+                    aspectRatio: currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio.replace(/:/g, '/'),
                   }}
                   data-cy="image-event-thumbnail"
                 />
@@ -214,7 +223,24 @@ function Lists(props) {
           <List.Item.Meta
             className="event-status-list-item"
             onClick={() => listItemHandler(eventItem?.id, eventItem?.creator?.userId, eventItem?.publishState)}
-            title={<EventStatus label={eventItem?.publishState} />}
+            title={
+              <div className="event-status-list-item-title-container">
+                <EventStatus label={eventItem?.publishState} />
+                {artsDataLinkChecker(eventItem)?.length > 0 && (
+                  <div
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      window.open(`${artsDataLinkChecker(eventItem)[0]?.uri}`, '_blank', 'noopener,noreferrer');
+                    }}
+                    className="artsdata-link-outlined-icon"
+                    data-cy="artsdata-link-outlined-icon">
+                    <span>
+                      <LinkOutlined style={{ fontSize: '12px' }} />
+                    </span>
+                  </div>
+                )}
+              </div>
+            }
             description={
               <div className="event-list-status" data-cy="span-event-creator">
                 <span className="event-list-status-created-by">

diff --git a/src/components/List/Events/list.css b/src/components/List/Events/list.css
@@ -9,12 +9,13 @@
 .event-list-wrapper .event-list-image-wrapper {
   position: relative;
   height: 104px;
-  width: 104px;
+  /* min-height: 104px; */
+  /* width: 104px; */
 }
 .event-list-wrapper .event-list-image {
   height: 100%;
   width: 100%;
-  object-fit: cover;
+  /* object-fit: cover; */
   border-radius: 4px;
 }
 .event-list-wrapper .event-list-title {
@@ -71,6 +72,25 @@
   max-width: 341px;
 }
 
+.event-list-wrapper .event-status-list-item-title-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.event-list-wrapper .event-status-list-item-title-container .artsdata-link-outlined-icon {
+  background-color: #e3e8ff;
+  color: #0f0e98;
+  min-height: 32px;
+  font-size: 12px;
+  font-weight: 600;
+  width: 24px;
+  padding: 4px;
+  border-radius: 4px;
+  display: grid;
+  place-content: center;
+}
+
 .event-list-wrapper .event-list-item-meta .image-featured-badge {
   border-radius: 4px;
   position: absolute;

diff --git a/src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx b/src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx
@@ -39,6 +39,8 @@ import { contentLanguage } from '../../../constants/contentLanguage';
 import { taxonomyDetails } from '../../../utils/taxonomyDetails';
 import Breadcrumbs from '../../../components/Breadcrumbs/Breadcrumbs';
 import { sourceOptions } from '../../../constants/sourceOptions';
+import ArtsDataInfo from '../../../components/ArtsDataInfo/ArtsDataInfo';
+import { artsDataLinkChecker } from '../../../utils/artsDataLinkChecker';
 
 function EventReadOnly() {
   const { t } = useTranslation();
@@ -87,6 +89,7 @@ function EventReadOnly() {
   let standardAdminOnlyFields = requiredFields?.adminOnlyFields?.standardFields;
   let dynamicAdminOnlyFields = requiredFields?.adminOnlyFields?.dynamicFields;
   const calendarContentLanguage = currentCalendarData?.contentLanguage;
+  let artsDataLink = eventData?.sameAs?.filter((item) => item?.type === 'ArtsdataIdentifier');
 
   const adminCheckHandler = () => {
     if (calendar[0]?.role === userRoles.ADMIN || user?.isSuperAdmin) return true;
@@ -213,6 +216,31 @@ function EventReadOnly() {
               </Col>
             </Row>
           </Col>
+
+          {artsDataLink?.length > 0 && (
+            <Col flex="723px" className="events-readonly-artsdata-link-wrapper">
+              <Row>
+                <Col flex={'723px'}>
+                  <ArtsDataInfo
+                    artsDataLink={artsDataLinkChecker(artsDataLink[0]?.uri)}
+                    name={contentLanguageBilingual({
+                      en: eventData?.name?.en,
+                      fr: eventData?.name?.fr,
+                      interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
+                      calendarContentLanguage: calendarContentLanguage,
+                    })}
+                    disambiguatingDescription={contentLanguageBilingual({
+                      en: eventData?.disambiguatingDescription?.en,
+                      fr: eventData?.disambiguatingDescription?.fr,
+                      interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
+                      calendarContentLanguage: calendarContentLanguage,
+                    })}
+                  />
+                </Col>
+              </Row>
+            </Col>
+          )}
+
           <Col flex="723px">
             {eventPublishStateOptions?.map((state, index) => {
               if (

diff --git a/src/pages/Dashboard/EventReadOnly/eventReadOnly.css b/src/pages/Dashboard/EventReadOnly/eventReadOnly.css
@@ -67,3 +67,8 @@ th {
   font-size: 12px;
   cursor: default;
 }
+
+.read-only-wrapper .events-readonly-artsdata-link-wrapper {
+  /* margin-left: 16px; */
+  padding: 0 !important;
+}