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;
}