Skip to content

Commit

Permalink
Merge pull request #714 from culturecreates/feature/issue-689
Browse files Browse the repository at this point in the history 
feat: added support for containsplace in edit and read only page
  • Loading branch information
@AbhishekPAnil
AbhishekPAnil authored Oct 20, 2023
2 parents 486416d + d1d7f82 commit 7436f66
Show file tree
Hide file tree
Showing 6 changed files with 219 additions and 2 deletions.
1 change: 1 addition & 0 deletions src/components/List/SelectionItem/selectionItem.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
font-size: 12px;
font-style: normal;
font-weight: 400;
margin-top: 8px;
}

.selection-item-wrapper .arts-data-link .arts-data-link-content {
Expand Down
6 changes: 6 additions & 0 deletions src/locales/en/translationEn.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -606,6 +606,12 @@
"addPlace": "Add a place",
"placeholder": "Search a place"
},
"containsPlace": {
"containsPlace": "Contains place",
"subheading": "Add places of interest that are contained in this place.",
"addPlace": "Add a place",
"placeholder": "Search a place"
},
"venueAccessibility": {
"venueAccessibility": "Venue accessibility",
"subheading": "These accessibility items will be displayed in all the event located at this venue.",
Expand Down
6 changes: 6 additions & 0 deletions src/locales/fr/transalationFr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -602,6 +602,12 @@
"addPlace": "Ajouter un lieu",
"placeholder": "Rechercher un lieu"
},
"containsPlace": {
"containsPlace": "Contient un lieu",
"subheading": "Ajoutez des lieux d'intérêt contenus dans ce lieu.",
"addPlace": "Ajouter un lieu",
"placeholder": "Rechercher un lieu"
},
"venueAccessibility": {
"venueAccessibility": "Accessibilité du site",
"placeholder": "Sélectionner un élément",
Expand Down
1 change: 0 additions & 1 deletion src/pages/Dashboard/AddEvent/AddEvent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2131,7 +2131,6 @@ function AddEvent() {
{t('dashboard.organization.createNew.search.footlightSectionHeading')}
</div>
<div className="search-scrollable-content">
{' '}
{organizersList?.length > 0 ? (
organizersList?.map((organizer, index) => (
<div
Expand Down
160 changes: 159 additions & 1 deletion src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ function CreateNewPlace() {
ACCESSIBILITY_NOTE_ENGLISH: 'englishAccessibilityNote',
ACCESSIBILITY_NOTE_FRENCH: 'frenchAccessibilityNote',
REGION: 'region',
CONTAINS_PLACE: 'containsPlace',
};
const placeId = searchParams.get('id');
const artsDataId = location?.state?.data?.id ?? null;
Expand Down Expand Up @@ -147,8 +148,10 @@ function CreateNewPlace() {
const [artsDataLoading, setArtsDataLoading] = useState(false);
const [isPopoverOpen, setIsPopoverOpen] = useState({
containedInPlace: false,
containsPlace: false,
});
const [containedInPlace, setContainedInPlace] = useState();
const [selectedContainsPlaces, setSelectedContainsPlaces] = useState([]);
const [allPlacesList, setAllPlacesList] = useState([]);
const [allPlacesArtsdataList, setAllPlacesArtsdataList] = useState([]);
const [descriptionMinimumWordCount] = useState(1);
Expand Down Expand Up @@ -316,7 +319,11 @@ function CreateNewPlace() {
])
.then(() => {
var values = form.getFieldsValue(true);
let placeObj, languageKey, dynamicFields, containedInPlaceObj;
let placeObj,
languageKey,
dynamicFields,
containedInPlaceObj,
containsPlace = [];

if (calendarContentLanguage == contentLanguage.ENGLISH) languageKey = 'en';
else if (calendarContentLanguage == contentLanguage.FRENCH) languageKey = 'fr';
Expand Down Expand Up @@ -382,6 +389,19 @@ function CreateNewPlace() {
};
}

if (values?.containsPlace) {
containsPlace = values?.containsPlace?.map((place) => {
if (place?.source === sourceOptions.CMS)
return {
entityId: place?.value,
};
else if (place?.source === sourceOptions.ARTSDATA)
return {
uri: place?.uri,
};
});
}

placeObj = {
name: {
...(values?.english && { en: values?.english }),
Expand Down Expand Up @@ -440,6 +460,7 @@ function CreateNewPlace() {
},
}),
...(values?.dynamicFields && { dynamicFields }),
...(values?.containsPlace && { containsPlace }),
};

if (values?.dragger?.length > 0 && values?.dragger[0]?.originFileObj) {
Expand Down Expand Up @@ -628,6 +649,10 @@ function CreateNewPlace() {
}
}, [addedFields]);

useEffect(() => {
if (selectedContainsPlaces) form.setFieldValue(formFieldNames.CONTAINS_PLACE, selectedContainsPlaces);
}, [selectedContainsPlaces]);

useEffect(() => {
if (calendarId && placeData && currentCalendarData) {
let initialAddedFields = [],
Expand Down Expand Up @@ -704,6 +729,20 @@ function CreateNewPlace() {
},
});
}
if (placeData?.containsPlace?.length > 0) {
let initialContainsPlace = placeData?.containsPlace?.map((place) => {
return {
disambiguatingDescription: place?.disambiguatingDescription,
id: place?.id,
name: place?.name,
image: place?.image,
uri: place?.derivedFrom?.uri,
};
});
setSelectedContainsPlaces(
placesOptions(initialContainsPlace, user, calendarContentLanguage, sourceOptions.CMS),
);
}
if (placeData?.openingHours) initialAddedFields = initialAddedFields?.concat(formFieldNames?.OPENING_HOURS);
if (placeData?.accessibilityNote)
initialAddedFields = initialAddedFields?.concat(formFieldNames?.ACCESSIBILITY_NOTE_WRAP);
Expand Down Expand Up @@ -1497,6 +1536,125 @@ function CreateNewPlace() {
)}
</Form.Item>
</Card>
<Card title={t('dashboard.places.createNew.addPlace.containsPlace.containsPlace')}>
<>
<Row>
<Col>
<p className="add-event-date-heading">
{t('dashboard.places.createNew.addPlace.containsPlace.subheading')}
</p>
</Col>
</Row>
<Form.Item
name={formFieldNames.CONTAINS_PLACE}
className="subheading-wrap"
// initialValue={initialPlace && initialPlace[0]?.id}
label={t('dashboard.places.createNew.addPlace.containsPlace.addPlace')}>
<Popover
open={isPopoverOpen.containedsPlace}
onOpenChange={(open) => setIsPopoverOpen({ ...isPopoverOpen, containsPlace: open })}
overlayClassName="event-popover"
placement="bottom"
autoAdjustOverflow={false}
getPopupContainer={(trigger) => trigger.parentNode}
trigger={['click']}
content={
<div>
<div>
<>
<div className="popover-section-header">
{t('dashboard.organization.createNew.search.footlightSectionHeading')}
</div>
<div className="search-scrollable-content">
{allPlacesList?.length > 0 ? (
allPlacesList?.map((place, index) => (
<div
key={index}
className={`event-popover-options`}
onClick={() => {
setSelectedContainsPlaces([...selectedContainsPlaces, place]);
setIsPopoverOpen({
...isPopoverOpen,
containsPlace: false,
});
}}>
{place?.label}
</div>
))
) : (
<NoContent />
)}
</div>
</>
{quickCreateKeyword !== '' && (
<>
<div className="popover-section-header">
{t('dashboard.organization.createNew.search.artsDataSectionHeading')}
</div>
<div className="search-scrollable-content">
{allPlacesArtsdataList?.length > 0 ? (
allPlacesArtsdataList?.map((place, index) => (
<div
key={index}
className="event-popover-options"
onClick={() => {
setSelectedContainsPlaces([...selectedContainsPlaces, place]);
setIsPopoverOpen({
...isPopoverOpen,
containsPlace: false,
});
}}>
{place?.label}
</div>
))
) : (
<NoContent />
)}
</div>
</>
)}
</div>
</div>
}>
<EventsSearch
style={{ borderRadius: '4px', width: '423px' }}
placeholder={t('dashboard.places.createNew.addPlace.containedInPlace.placeholder')}
onChange={(e) => {
setQuickCreateKeyword(e.target.value);
debounceSearchPlace(e.target.value);
setIsPopoverOpen({ ...isPopoverOpen, containsPlace: true });
}}
onClick={(e) => {
setQuickCreateKeyword(e.target.value);
setIsPopoverOpen({ ...isPopoverOpen, containsPlace: true });
}}
/>
</Popover>
{selectedContainsPlaces?.map((containsPlace, index) => {
return (
<SelectionItem
key={index}
icon={containsPlace?.label?.props?.icon}
name={containsPlace?.name}
description={containsPlace?.description}
itemWidth="100%"
artsDataLink={containsPlace?.uri}
artsDataDetails={true}
calendarContentLanguage={calendarContentLanguage}
bordered
closable
onClose={() => {
setSelectedContainsPlaces(
selectedContainsPlaces?.filter((selectedContainPlace, indexValue) => indexValue != index),
);
}}
/>
);
})}
</Form.Item>
</>
<></>
</Card>
<Card title={t('dashboard.places.createNew.addPlace.containedInPlace.containedInPlace')}>
<>
<Row>
Expand Down
47 changes: 47 additions & 0 deletions src/pages/Dashboard/PlaceReadOnly/PlaceReadOnly.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import Breadcrumbs from '../../../components/Breadcrumbs/Breadcrumbs';
import ReadOnlyProtectedComponent from '../../../layout/ReadOnlyProtectedComponent';
import { loadArtsDataPlaceEntity } from '../../../services/artsData';
import { getExternalSourceId } from '../../../utils/getExternalSourceId';
import { sourceOptions } from '../../../constants/sourceOptions';

function PlaceReadOnly() {
const { t } = useTranslation();
Expand Down Expand Up @@ -59,6 +60,7 @@ function PlaceReadOnly() {
const [locationPlace, setLocationPlace] = useState();
const [artsDataLoading, setArtsDataLoading] = useState(false);
const [artsData, setArtsData] = useState(null);
const [selectedContainsPlaces, setSelectedContainsPlaces] = useState([]);

const calendarContentLanguage = currentCalendarData?.contentLanguage;

Expand Down Expand Up @@ -127,6 +129,20 @@ function PlaceReadOnly() {
.catch((error) => console.log(error));
});
}
if (placeData?.containsPlace?.length > 0) {
let initialContainsPlace = placeData?.containsPlace?.map((place) => {
return {
disambiguatingDescription: place?.disambiguatingDescription,
id: place?.id,
name: place?.name,
image: place?.image,
uri: place?.derivedFrom?.uri,
};
});
setSelectedContainsPlaces(
placesOptions(initialContainsPlace, user, calendarContentLanguage, sourceOptions.CMS),
);
}
}
}, [placeSuccess]);

Expand Down Expand Up @@ -548,6 +564,37 @@ function PlaceReadOnly() {
<Col></Col>
</Card>
)}
{placeData?.containsPlace?.length > 0 && (
<Card>
<Col>
<Row gutter={[0, 24]}>
<Col span={24}>
<p className="read-only-event-content" style={{ fontSize: '24px' }}>
{t('dashboard.places.createNew.addPlace.containsPlace.containsPlace')}
</p>
<Col span={24}>
{selectedContainsPlaces?.map((containsPlace, index) => {
return (
<SelectionItem
key={index}
icon={containsPlace?.label?.props?.icon}
name={containsPlace?.name}
description={containsPlace?.description}
artsDataLink={containsPlace?.uri}
artsDataDetails={true}
calendarContentLanguage={calendarContentLanguage}
bordered
itemWidth="423px"
/>
);
})}
</Col>
</Col>
</Row>
</Col>
<Col></Col>
</Card>
)}
<Card>
<Col>
<Row gutter={[0, 24]}>
Expand Down

0 comments on commit 7436f66

Please sign in to comment.