From a8b6f60babfb16f823476e0c0c21d1813c428d67 Mon Sep 17 00:00:00 2001 From: syam babu Date: Wed, 13 Dec 2023 16:07:54 +0530 Subject: [PATCH 1/2] fix: aspect ratio fix --- src/components/ImageUpload/imageUpload.css | 3 +- src/components/List/Events/List.jsx | 17 ++++++++--- src/components/List/Events/list.css | 5 ++-- .../Dashboard/EventReadOnly/EventReadOnly.jsx | 28 +++++++++++++++++++ .../Dashboard/EventReadOnly/eventReadOnly.css | 5 ++++ 5 files changed, 51 insertions(+), 7 deletions(-) diff --git a/src/components/ImageUpload/imageUpload.css b/src/components/ImageUpload/imageUpload.css index 995ee229..881a2ff6 100644 --- 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 index 42fde85f..1e171b20 100644 --- 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,13 @@ 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; }); - + console.log(typeof currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio); const listItemHandler = (id, creatorId, publishState) => { if (routinghandler(user, calendarId, creatorId, publishState)) navigate(`${location.pathname}${PathName.AddEvent}/${id}`); @@ -120,7 +122,9 @@ function Lists(props) { className="event-list-item-meta" onClick={() => listItemHandler(eventItem?.id, eventItem?.creator?.userId, eventItem?.publishState)} avatar={ -
+
{(calendar[0]?.role === userRoles.ADMIN || user?.isSuperAdmin) && eventItem?.isFeatured && (
listItemHandler(eventItem?.id, eventItem?.creator?.userId, eventItem?.publishState)} - title={} + title={ +
+ + +
+ } description={
diff --git a/src/components/List/Events/list.css b/src/components/List/Events/list.css index 57f961ea..de1043a3 100644 --- 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 { diff --git a/src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx b/src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx index bfc89c7d..a85e1772 100644 --- 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() { + + {artsDataLink?.length > 0 && ( + + + + + + + + )} + {eventPublishStateOptions?.map((state, index) => { if ( diff --git a/src/pages/Dashboard/EventReadOnly/eventReadOnly.css b/src/pages/Dashboard/EventReadOnly/eventReadOnly.css index fe50d5ac..d01e7baf 100644 --- 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; +} From b4f890fa56a0141d96d137dc79af8bc0f218aed6 Mon Sep 17 00:00:00 2001 From: syam babu Date: Wed, 13 Dec 2023 18:19:51 +0530 Subject: [PATCH 2/2] fix: added image ratio to listing page of events. Added arts data link. --- src/components/ImageUpload/ImageUpload.jsx | 10 +++++++++- src/components/List/Events/List.jsx | 23 +++++++++++++++++++--- src/components/List/Events/list.css | 21 +++++++++++++++++++- 3 files changed, 49 insertions(+), 5 deletions(-) diff --git a/src/components/ImageUpload/ImageUpload.jsx b/src/components/ImageUpload/ImageUpload.jsx index cb7a7677..9fd1d8ef 100644 --- 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 ( - + { return calendar?.calendarId === calendarId; }); - console.log(typeof currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio); + + 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}`); @@ -140,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" /> @@ -219,9 +224,21 @@ function Lists(props) { className="event-status-list-item" onClick={() => listItemHandler(eventItem?.id, eventItem?.creator?.userId, eventItem?.publishState)} title={ -
+
- + {artsDataLinkChecker(eventItem)?.length > 0 && ( +
{ + e.stopPropagation(); + window.open(`${artsDataLinkChecker(eventItem)[0]?.uri}`, '_blank', 'noopener,noreferrer'); + }} + className="artsdata-link-outlined-icon" + data-cy="artsdata-link-outlined-icon"> + + + +
+ )}
} description={ diff --git a/src/components/List/Events/list.css b/src/components/List/Events/list.css index de1043a3..f90941a5 100644 --- a/src/components/List/Events/list.css +++ b/src/components/List/Events/list.css @@ -9,7 +9,7 @@ .event-list-wrapper .event-list-image-wrapper { position: relative; height: 104px; - min-height: 104px; + /* min-height: 104px; */ /* width: 104px; */ } .event-list-wrapper .event-list-image { @@ -72,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;