diff --git a/packages/openstad-event-browser-widgets/package.json b/packages/openstad-event-browser-widgets/package.json index 0dc9bce..fa77526 100644 --- a/packages/openstad-event-browser-widgets/package.json +++ b/packages/openstad-event-browser-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@savvycodes/openstad-event-browser-widgets", - "version": "0.0.6", + "version": "0.0.7", "main": "index.js", "dependencies": { "lodash.get": "^4.4.2" diff --git a/packages/openstad-event-browser-widgets/src/components/events/event-tiles.tsx b/packages/openstad-event-browser-widgets/src/components/events/event-tiles.tsx index 0c154ec..e72e715 100644 --- a/packages/openstad-event-browser-widgets/src/components/events/event-tiles.tsx +++ b/packages/openstad-event-browser-widgets/src/components/events/event-tiles.tsx @@ -8,6 +8,17 @@ import { ActivityImage, HeartIcon } from '../card/card'; import { useUser } from '../../context/user-context'; import { useFavorites } from '../../hooks/use-favorites'; import { useConfig } from '../../context/config-context'; +import { styled } from 'goober'; +import { Pin } from './pin'; + +export const ActivityCardPinContainer = styled('div')` + min-width: 1rem; + min-height: 1rem; + top: -0.5rem; + left: -0.5rem; + z-index: 1; + position: absolute; +`; export function EventTiles({ events }: any) { const user = useUser(); @@ -18,6 +29,13 @@ export function EventTiles({ events }: any) { return events.map((event: any) => (
+ + {event.highlighted ? ( + + + + ) : null} +
{ @@ -37,6 +55,7 @@ export function EventTiles({ events }: any) {
+
{ + return ( + + + + + + + + + + + + + ); +}; diff --git a/packages/openstad-event-planner-widgets/example/index.html b/packages/openstad-event-planner-widgets/example/index.html index e11d5ff..d502508 100644 --- a/packages/openstad-event-planner-widgets/example/index.html +++ b/packages/openstad-event-planner-widgets/example/index.html @@ -116,7 +116,7 @@
  • - Voor aanbieders + Activiteiten toevoegen
    • diff --git a/packages/openstad-event-planner-widgets/package.json b/packages/openstad-event-planner-widgets/package.json index 1fcf99a..daa7e7f 100644 --- a/packages/openstad-event-planner-widgets/package.json +++ b/packages/openstad-event-planner-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@savvycodes/openstad-event-planner-widgets", - "version": "0.0.6", + "version": "0.0.7", "main": "index.js", "dependencies": { "lodash.get": "^4.4.2" diff --git a/packages/openstad-event-planner-widgets/src/components/card/card.tsx b/packages/openstad-event-planner-widgets/src/components/card/card.tsx index b8f4ab9..c981f04 100644 --- a/packages/openstad-event-planner-widgets/src/components/card/card.tsx +++ b/packages/openstad-event-planner-widgets/src/components/card/card.tsx @@ -1,6 +1,7 @@ import { styled } from 'goober'; import React, { MouseEventHandler } from 'react'; import { Edit3, Trash2 } from 'react-feather'; +import { Pin } from './pin'; /** * Card helpers @@ -46,6 +47,14 @@ export const NewActivityCardTextContainer = styled('div')` justify-content: center; `; +export const ActivityCardPinContainer = styled('div')` + min-width: 1rem; + min-height: 1rem; + top: -0.5rem; + left: -0.5rem; + position: absolute; +`; + export const ActivityImage = styled('img')` object-fit: cover; `; @@ -76,6 +85,7 @@ type ActivityCardsProps = { src: string; title: string; description: string; + isHighlighted?: boolean; onDelete?: MouseEventHandler; onEdit?: MouseEventHandler; }; @@ -84,26 +94,25 @@ export function ActivityCards({ src, title, description, + isHighlighted = false, onDelete = () => null, onEdit = () => null, }: ActivityCardsProps) { return ( - + {isHighlighted ? ( + + + + ) : null} + +
    -

    {title.slice(0, 20)+'...'}

    -

    {description.replace(/<[^>]+>/g, '').slice(0, 100)+'...'}

    +

    {title.slice(0, 20) + '...'}

    +

    {description.replace(/<[^>]+>/g, '').slice(0, 100) + '...'}

    - - + +
    diff --git a/packages/openstad-event-planner-widgets/src/components/card/pin.tsx b/packages/openstad-event-planner-widgets/src/components/card/pin.tsx new file mode 100644 index 0000000..6aee1bf --- /dev/null +++ b/packages/openstad-event-planner-widgets/src/components/card/pin.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +type Props = { + size?: number; +}; +export const Pin = ({ size = 32 }: Props) => { + return ( + + + + + + + + + + + + + ); +}; diff --git a/packages/openstad-event-planner-widgets/src/pages/events/activity-overview.tsx b/packages/openstad-event-planner-widgets/src/pages/events/activity-overview.tsx index f3935cc..9396414 100644 --- a/packages/openstad-event-planner-widgets/src/pages/events/activity-overview.tsx +++ b/packages/openstad-event-planner-widgets/src/pages/events/activity-overview.tsx @@ -19,8 +19,6 @@ import { OrganisationSettingsPage } from '../organisation/settings'; import '../../styles/activities.css'; import { useUser } from '../../context/user-context'; - - const styles = { Header: styled(Header)` display: flex; @@ -57,22 +55,22 @@ const styles = { * @returns */ export function ProviderActivityOverviewPage(): JSX.Element { - const [location, navigate] = useHashLocation(); + // const [location, navigate] = useHashLocation(); const { data: organisation } = useApi('/organisation/me'); const { role } = useUser(); const isAdmin = role === 'admin'; return (
    -
    - */} + {/* navigate('/events')} active={location === '/events'} > Activiteiten - - */} + {/* navigate('/events/settings')} active={location === '/events/settings'} @@ -85,13 +83,13 @@ export function ProviderActivityOverviewPage(): JSX.Element { active={location === '/events/contact'} > Contactpersoon - -
    + */} + {/*
    */} ( <> - {organisation && organisation.id || isAdmin ? ( + {(organisation && organisation.id) || isAdmin ? ( ) : ( @@ -116,7 +114,9 @@ function ActivityList({ organisationId }: ActivityListProps) { // Check if admin, remove filter on organisations const { data, loading, error, reload } = useApi( - organisationId?`/event?organisationId=${organisationId}&page=${page}`:`/event?page=${page}` + organisationId + ? `/event?organisationId=${organisationId}&page=${page}` + : `/event?page=${page}` ); const [deleteError, setDeleteError] = React.useState(null); @@ -163,24 +163,29 @@ function ActivityList({ organisationId }: ActivityListProps) { return ( <> -

    Activiteiten

    +
    +

    Activiteiten

    + +
    + {events.map((event: any) => ( handleDelete(event.id)} onEdit={() => navigate(`/events/${event.id}/edit`)} /> ))} - + {data?.metadata?.pageCount > page ? ( diff --git a/packages/openstad-event-planner-widgets/src/routes.tsx b/packages/openstad-event-planner-widgets/src/routes.tsx index 7040455..e9e0eea 100644 --- a/packages/openstad-event-planner-widgets/src/routes.tsx +++ b/packages/openstad-event-planner-widgets/src/routes.tsx @@ -65,7 +65,7 @@ export function Router(): JSX.Element { /> - + ) : ( diff --git a/packages/openstad-event-planner-widgets/src/styles/activities.css b/packages/openstad-event-planner-widgets/src/styles/activities.css index 531110d..5bd8279 100644 --- a/packages/openstad-event-planner-widgets/src/styles/activities.css +++ b/packages/openstad-event-planner-widgets/src/styles/activities.css @@ -21,6 +21,12 @@ align-self: center; } +.activities-title-with-create-bar { + display: flex; + justify-content: space-between; + align-items: center; +} + .activity-card__content { padding: 1rem; }