diff --git a/src/Components/Input/ComboBoxInput.tsx b/src/Components/Input/ComboBoxInput.tsx new file mode 100644 index 00000000..14fe96e4 --- /dev/null +++ b/src/Components/Input/ComboBoxInput.tsx @@ -0,0 +1,34 @@ +import { useState } from "react" +import * as React from "react" + +interface ComboBoxProps { + id?: string; + options: { value: string, label: string }[]; + value: string; + onValueChange: (newValue: string) => void; +} + +const ComboBoxInput = ({ id, options, value, onValueChange }: ComboBoxProps) => { + + const [selectedValue, setSelectedValue] = useState(value); + + const handleChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setSelectedValue(value); + onValueChange(value); + }; + + return ( + + ); +} + +export default ComboBoxInput; \ No newline at end of file diff --git a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx new file mode 100644 index 00000000..2ede15b7 --- /dev/null +++ b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx @@ -0,0 +1,94 @@ +import * as React from 'react'; +import { useState, useEffect } from 'react'; + +const typeMapping = [ + {value: null, label: 'Kein Filter'}, + {value: 'kompass', label: 'Würdekompass'}, + {value: 'themenkompass', label: 'Themenkompass-Gruppe'}, + {value: 'liebevoll.jetzt', label: 'liebevoll.jetzt'} +]; + +const CustomFilterIcon = ({ size = 20 }) => ( + + + +); + +const CheckmarkIcon = () => ( + + + +); + +const FilterControl = ({ activeFilter, setActiveFilter }) => { + const [isOpen, setIsOpen] = useState(false); + + const toggleFilter = () => { + setIsOpen(!isOpen); + }; + + const applyFilter = (filterValue) => { + setActiveFilter(filterValue); + setIsOpen(false); + }; + + return ( +
+
+ {activeFilter !== null && ( + + )} + +
+ + {isOpen && ( +
+
    + {typeMapping.map((type) => ( +
  • + +
    • + ))} +
+
+ )} +
+ ); +}; + +export default FilterControl; \ No newline at end of file diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index dc8dd10b..fd9a1a7b 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/src/Components/Map/UtopiaMap.tsx @@ -9,8 +9,7 @@ import AddButton from "./Subcomponents/AddButton"; import { useEffect, useState } from "react"; import { ItemFormPopupProps } from "./Subcomponents/ItemFormPopup"; import { SearchControl } from "./Subcomponents/Controls/SearchControl"; -import { LayerControl } from "./Subcomponents/Controls/LayerControl"; -import { QuestControl } from "./Subcomponents/Controls/QuestControl"; +// import { QuestControl } from "./Subcomponents/Controls/QuestControl"; import { Control } from "./Subcomponents/Controls/Control"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; import { TagsControl } from "./Subcomponents/Controls/TagsControl"; @@ -18,6 +17,8 @@ import { useSelectPosition, useSetMapClicked,useSetSelectPosition } from "./hook import { useClusterRef, useSetClusterRef } from "./hooks/useClusterRef"; import { Feature, Geometry as GeoJSONGeometry } from 'geojson'; import {useAuth} from "../Auth"; +import FilterControl from "./Subcomponents/Controls/FilterControl"; +import {LayerControl} from "./Subcomponents/Controls/LayerControl"; // for refreshing map on resize (needs to be implemented) const mapDivRef = React.createRef(); @@ -61,6 +62,8 @@ function UtopiaMap({ const clusterRef = useClusterRef(); const setMapClicked = useSetMapClicked(); + const [activeFilter, setActiveFilter] = useState(null); + const [itemFormPopup, setItemFormPopup] = useState(null); const [embedded, setEmbedded] = useState(true) @@ -92,9 +95,11 @@ function UtopiaMap({ - {!embedded && ( - - )} + {/*{!embedded && (*/} + {/* */} + {/*)}*/} + + {/*todo: needed layer handling is located LayerControl*/} { +const ContactInfo = ({ email, telephone, name, avatar } : {email: string, telephone: string, name: string, avatar: string}) => { const assetsApi = useAssetApi(); - return( -
-

Du hast Fragen?

-
-
-
-
- {avatar ? ( - {name} - ) : ( -
- - - - +
+

Du hast Fragen?

+
+ {avatar && ( +
+
+
+ {name}
- )} +
+ )} +
+

{name}

+ {email && ( +

+ + + + + + {email} + +

+ )} + {telephone && ( +

+ + + + + {telephone} + +

+ )}
-
-
) } diff --git a/src/Components/Profile/OverlayItemProfile.tsx b/src/Components/Profile/OverlayItemProfile.tsx index 6b64b9dd..0c592882 100644 --- a/src/Components/Profile/OverlayItemProfile.tsx +++ b/src/Components/Profile/OverlayItemProfile.tsx @@ -273,30 +273,14 @@ export function OverlayItemProfile() { navigate("/"); } - const d = { - groupName: "Gruppe Berlin-Britz", - location: "🇩🇪 12347 Berlin", - country: "Berlin, Deutschland", - countryCode: "de", - contact: { - name: "Lisa Mustermann", - email: "lisa.mustermann@gmx.de", - avatarSrc: "https://cdn.prod.website-files.com/65c0d5530322d3f6f5f86099/65c0d5530322d3f6f5f86781_Andr%C3%A9.jpg" // optional - }, - description: "Unsere KulturArche, ein historischer Frachtsegler...", - relations: [ - { - title: "KulturArche EALA", - description: "Durchaus beeindruckt von der Ethik und der Arbeit...", - imageSrc: "https://cdn.prod.website-files.com/65c0d5530322d3f6f5f86099/65c0d5530322d3f6f5f86767_IMG_20190302_173147.jpg" - }, - // Add more projects as needed - ], - url: window.location.href, - title: "Gruppe Berlin-Britz" + const typeMapping = { + 'default': 'Würdekompass', + 'themenkompass': 'Themenkompass-Gruppe', + 'liebevoll.jetzt': 'liebevoll.jetzt', }; - + let groupType = item.group_type ? item.group_type : 'default'; + let groupTypeText = typeMapping[groupType]; return ( <> @@ -308,10 +292,10 @@ export function OverlayItemProfile() {
navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} />
@@ -320,31 +304,38 @@ export function OverlayItemProfile() { {item.layer?.itemType.onepager && <> {item.user_created.first_name && ( - + )} {/* Description Section */} -
-

Beschreibung

-
- -
+
+
- {/* Relations Section */} - {d.relations && ( + {/* Next Appointment Section */} + {item.next_appointment && (
-

Projekte

- {d.relations.map((project, index) => ( - - ))} +

Nächste Termine

+
+ +
- )} + )}; + + {/* Relations Section */} + {/*{d.relations && (*/} + {/*
*/} + {/*

Projekte

*/} + {/* {d.relations.map((project, index) => (*/} + {/* */} + {/* ))}*/} + {/*
*/} + {/*)}*/} } diff --git a/src/Components/Profile/OverlayItemProfileSettings.tsx b/src/Components/Profile/OverlayItemProfileSettings.tsx index 3dbb3197..68d9b79c 100644 --- a/src/Components/Profile/OverlayItemProfileSettings.tsx +++ b/src/Components/Profile/OverlayItemProfileSettings.tsx @@ -4,6 +4,7 @@ import { getValue } from '../../Utils/GetValue'; import { toast } from 'react-toastify'; import { useAuth } from '../Auth'; import { TextInput, TextAreaInput } from '../Input'; +import ComboBoxInput from '../Input/ComboBoxInput'; import { ColorPicker } from './ColorPicker'; import { hashTagRegex } from '../../Utils/HashTagRegex'; import { useAddTag, useGetItemTags, useTags } from '../Map/hooks/useTags'; @@ -24,10 +25,26 @@ import { useHasUserPermission } from '../Map/hooks/usePermissions'; export function OverlayItemProfileSettings() { + const typeMapping = [ + {value: 'kompass', label: 'Würdekompass'}, + {value: 'themenkompass', label: 'Themenkompass-Gruppe'}, + {value: 'liebevoll.jetzt', label: 'liebevoll.jetzt'} + ]; + const statusMapping = [ + {value: 'active', label: 'aktiv'}, + {value: 'in_planning', label: 'in Planung'}, + {value: 'paused', label: 'pausiert'} + ]; + const [id, setId] = useState(""); + const [groupType, setGroupType] = useState(""); + const [status, setStatus] = useState(""); const [name, setName] = useState(""); const [subname, setSubname] = useState(""); const [text, setText] = useState(""); + const [contact, setContact] = useState(""); + const [telephone, setTelephone] = useState(""); + const [nextAppointment, setNextAppointment] = useState(""); const [image, setImage] = useState(""); const [color, setColor] = useState(""); const [offers, setOffers] = useState>([]); @@ -96,9 +113,14 @@ export function OverlayItemProfileSettings() { setColor(item.layer?.itemColorField && getValue(item, item.layer?.itemColorField) ? getValue(item, item.layer?.itemColorField) : (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor)) setId(item?.id ? item.id : ""); + setGroupType(item?.group_type || "kompass"); + setStatus(item?.status || "active"); setName(item?.name ? item.name : ""); setSubname(item?.subname ? item.subname : ""); setText(item?.text ? item.text : ""); + setContact(item?.contact || ""); + setTelephone(item?.telephone || ""); + setNextAppointment(item?.next_appointment || ""); setImage(item?.image ? item?.image : ""); setOffers([]); setNeeds([]); @@ -141,13 +163,23 @@ export function OverlayItemProfileSettings() { }); - - - - - - changedItem = { id: id, name: name, subname: subname, text: text, color: color, position: item.position, ...image.length > 10 && { image: image }, ...offers.length > 0 && { offers: offer_updates }, ...needs.length > 0 && { needs: needs_updates } }; // update profile item in current state + changedItem = { + id: id, + group_type: groupType, + status: status, + name: name, + subname: subname, + text: text, + color: color, + position: item.position, + contact: contact, + telephone: telephone, + next_appointment: nextAppointment, + ...image.length > 10 && { image: image }, + ...offers.length > 0 && { offers: offer_updates }, + ...needs.length > 0 && { needs: needs_updates } + }; let offers_state: Array = []; let needs_state: Array = []; @@ -274,12 +306,80 @@ export function OverlayItemProfileSettings() {
- {item.layer?.itemType.onepager && + {item.layer?.itemType.onepager && ( +
+
+
+ + setGroupType(v)} + /> +
+
+ + setStatus(v)} + /> +
+
- { console.log(v); setText(v) }} containerStyle='tw-h-full' inputStyle='tw-h-full tw-border-t-0 tw-rounded-tl-none' /> +
+ + setContact(v)} + /> +
+
+ + setTelephone(v)} + /> +
- } +
+ + setNextAppointment(v)} + inputStyle="tw-h-24" + /> +
+ +
+ + setText(v)} + inputStyle="tw-h-48" + /> +
+
+ )} {!item.layer?.itemType.onepager && diff --git a/src/Components/Profile/ProfileSubHeader.tsx b/src/Components/Profile/ProfileSubHeader.tsx index e89e2834..67492365 100644 --- a/src/Components/Profile/ProfileSubHeader.tsx +++ b/src/Components/Profile/ProfileSubHeader.tsx @@ -18,11 +18,15 @@ const flags = { ) }; -const SubHeader = ({ location, type, url, title }) => ( +const statusMapping = { + 'in_planning': 'in Planung', + 'paused': 'pausiert', +}; + +const SubHeader = ({ type, status, url, title }) => (
- {type} - {location} + {type}{(status && status !== 'active') ? ` (${statusMapping[status]})` : ''}