Skip to content

Commit

Permalink
Merge pull request #61 from AndyOooh/ED1-45-feature-event.card-show_a…
Browse files Browse the repository at this point in the history 
…ddress

Ed1 45 feature event.card show address
  • Loading branch information
@AndyOooh
AndyOooh authored Jan 14, 2024
2 parents a316ce5 + 9e9c408 commit 402eee9
Show file tree
Hide file tree
Showing 25 changed files with 182 additions and 109 deletions.
Binary file added apps/app/public/pin_mint_trans.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/app/public/pin_pink_trans.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
190 changes: 131 additions & 59 deletions apps/app/src/app/(protected)/events/Events.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,138 @@
import React from 'react';
'use client';

import { GoogleMap, Marker, useLoadScript } from '@react-google-maps/api';
import React, { useCallback, useMemo, useRef } from 'react';
import { BiPurchaseTag } from 'react-icons/bi';

type Props = {
events: any[];
};

type LatLngLiteral = google.maps.LatLngLiteral;
type MapOptions = google.maps.MapOptions;

const jobAttributes = [
'role_type',
'days',
'hours_per_day',
'number_workers',
'hourly',
// 'role_description',
{
title: '',
field_name: 'role_type',
},
{
title: 'Days',
field_name: 'days',
},
{
title: 'Hours',
field_name: 'hours_per_day',
},
{
title: 'Qty.',
field_name: 'number_workers',
},
{
title: 'Hourly',
field_name: 'hourly',
},
];

// 'role_type', 'days', 'hours_per_day', 'number_workers', 'hourly'];

export const EventsLala = ({ events }: Props) => {
console.log('🚀 file: Events.tsx:8 events:', events);
const { isLoaded } = useLoadScript({
googleMapsApiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY,
});

const mapRef = useRef<GoogleMap>();
const options = useMemo<MapOptions>(
() => ({
mapId: 'b34786d7e100891b',
disableDefaultUI: true,
zoomControl: true,
}),
[]
);

const onLoad = useCallback(map => (mapRef.current = map), []);

return events ? (
events.map(event => (
<div key={event.id} className='card w-4/5 bg-base-100 shadow-xl'>
<div className='card-body'>
<div className='flex justify-between'>
<h2 className='card-title'>{event.event_header}!</h2>
<div className='badge badge-info gap-2'>
<BiPurchaseTag />
{event.event_type}
events.map(event => {
const { location, roles } = event;
return (
<div key={event.id} className='card w-4/5 bg-base-100 shadow-xl'>
<div className='card-body'>
<div className='flex justify-between'>
<h2 className='card-title'>{event.event_header}!</h2>
<div className='badge badge-info gap-2'>
<BiPurchaseTag />
{event.event_type}
</div>
</div>
</div>
<p>{event.description}</p>
<h1>{event.event_name}</h1>
<p>{event.address}</p>
{/* <p>{event.location_description}</p> */}
<p>{event.coords.lng}</p>
<p>{event.coords.lat}</p>
<p>{event.place_id}</p>
<h3 className='text-lg font-semibold'>Jobs</h3>
{/* table of roles */}
{event.roles?.length && (
<div className='overflow-x-auto'>
<table className='table w-full'>
<thead>
<tr>
{jobAttributes.map((key: string) => (
<th key={key} className='text-center'>
{key}
</th>
))}
<h3>
<span className='text-primary font-semibold'>{event.event_name}</span>,{' '}
<span className='text-base-content'>{location.name}</span>
</h3>
<div className='divider my-2' />
<div className='flex justify-around'>
<div className='flex flex-col'>
<p>{event.description}</p>
<div className='flex flex-col'>
<p>{location.address}</p>
<a className='link link-secondary'>See Map</a>
</div>
</div>

<th></th>
</tr>
</thead>
<tbody>
{event.roles.map((role: any, index: any) => (
<tr key={role.role_type}>
{Object.keys(role)
.filter((key: string) => jobAttributes.includes(key))
.map((_key: string) => (
<th key={_key} className='text-center'>
{role[_key]}
</th>
))}
{/* <th className='flex gap-2 justify-center items-center'>
<button type='button' className=''
{isLoaded ? (
<div className='w-1/2 h-60 border border-pink-300'>
<GoogleMap
zoom={10}
center={location.coords}
mapContainerClassName='map'
options={options}
onLoad={onLoad}>
<Marker
key='event_position'
position={location.coords}
icon={{
url: `/pin_pink_trans.png`,
scaledSize: new google.maps.Size(70, 70),
}}
/>
</GoogleMap>
</div>
) : (
<div className='text-emerald-500 text-2xl'>Not loaded</div>
)}
</div>

<h3 className='text-lg font-semibold'>Jobs</h3>
{/* table of roles */}
{roles?.length && (
<div className='overflow-x-auto'>
<table className='table w-full'>
<thead>
<tr>
{jobAttributes.map((attr: any) => (
<th key={attr.title} className='text-center'>
{attr.title}
</th>
))}

<th></th>
</tr>
</thead>
<tbody>
{event.roles.map((role: any, index: any) => (
<tr key={role.role_type}>
{Object.keys(role)
.filter((key: string) =>
jobAttributes.map(attr => attr.field_name).includes(key)
)
.map((field_name: string) => (
<th key={field_name} className='text-center'>
{role[field_name]}
</th>
))}
{/* <th className='flex gap-2 justify-center items-center'>
<button type='button' className=''
onClick={() => onUpdateRole(index)}
>
<BiEdit className='text-2xl text-info' />
Expand All @@ -70,15 +141,16 @@ export const EventsLala = ({ events }: Props) => {
<BiTrash className='text-2xl text-error' />
</button>
</th> */}
</tr>
))}
</tbody>
</table>
</div>
)}
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</div>
</div>
))
);
})
) : (
<div>loading...</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/app/src/app/(protected)/events/create/form/event-info/validation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const eventDetailsSchema = yup.object().shape({
event_header: yup.string().min(3),
event_name: stringNullable(yup.string().min(2)),
event_type: yup.string().oneOf(Object.values(EventType)),
location: yup.string().min(3),
// location: yup.string().min(3),
date: yup.date().min(new Date()),
description: yup.string().min(3),
// roles: yup.array().of(yup.string().min(2)),
Expand Down
19 changes: 8 additions & 11 deletions apps/app/src/app/(protected)/events/create/form/event-location/MapLocation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,10 @@ type LatLngLiteral = google.maps.LatLngLiteral;
type MapOptions = google.maps.MapOptions;

export const MapLocation = ({ setValue, address }: Props) => {
// const [office, setOffice] = useState<LatLngLiteral>();
const [pin, setPin] = useState<{ lat: number; lng: number }>({ lat: 13.736717, lng: 100.523186 });
console.log('🚀 file: MapLocation.tsx:16 pin:', pin);
// const [pin, setPin] = useState<{ lat: number; lng: number }>({ lat: 13.736717, lng: 100.523186 });
const [pin, setPin] = useState<{ lat: number; lng: number }>(null);
const [zoom, setZoom] = useState(12);
// console.log('🚀 file: MapLocation.tsx:11 office:', office);
const mapRef = useRef<GoogleMap>();
// const bangkokCords = useMemo(() => ({ lat: 40, lng: -80 }), []);
const bangkokCords = useMemo<LatLngLiteral>(() => ({ lat: 13.736717, lng: 100.523186 }), []);
const options = useMemo<MapOptions>(
() => ({
Expand All @@ -41,7 +38,7 @@ export const MapLocation = ({ setValue, address }: Props) => {
<Places
setValue={setValue}
setZoom={setZoom}
setOffice={position => {
setPin={position => {
setPin(position);
mapRef.current?.panTo(position);
}}
Expand All @@ -60,12 +57,12 @@ export const MapLocation = ({ setValue, address }: Props) => {
key={`lalalalla`}
position={pin}
icon={{
// url: `/bear.svg`,
url: `/logo/logo-d-trans.png`,
origin: new window.google.maps.Point(0, 0),
anchor: new window.google.maps.Point(15, 15),
// url: `/logo/logo-d-trans.png`,
url: `/pin_pink_trans.png`,
// origin: new window.google.maps.Point(0, 0),
// anchor: new window.google.maps.Point(15, 15),
// scaledSize: new window.google.maps.Size(30, 30),
scaledSize: new window.google.maps.Size(50, 50),
scaledSize: new window.google.maps.Size(90, 90),
}}
/>
)}
Expand Down
17 changes: 9 additions & 8 deletions apps/app/src/app/(protected)/events/create/form/event-location/Places.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ import { IcreateEventSchema } from '../validation';

type PlacesProps = {
// setOffice: (position: google.maps.LatLngLiteral) => void;
setOffice: (position: any) => void;
setPin: (position: any) => void;
// setFormValue: UseFormSetValue<IcreateEventSchema>;
setValue: any;
setZoom: any;
};

type GeocoderResult = google.maps.GeocoderResult;

export const Places = ({ setOffice, setValue: setFormValue, setZoom }: PlacesProps) => {
export const Places = ({ setPin, setValue: setFormValue, setZoom }: PlacesProps) => {
const {
ready,
value,
Expand All @@ -35,14 +35,15 @@ export const Places = ({ setOffice, setValue: setFormValue, setZoom }: PlacesPro

const results = await getGeocode({ address: val });
console.log('🚀 file: places.tsx:30 results:', results);
const { formatted_address, place_id } = results[0];
const { formatted_address, place_id, address_components } = results[0];
const { lat, lng } = getLatLng(results[0]);
setFormValue('address', formatted_address);
setFormValue('place_id', place_id);
setFormValue('coords', { lat, lng });
setFormValue('location.address', formatted_address);
setFormValue('location.place_id', place_id);
setFormValue('location.coords', { lat, lng });
setFormValue('location.name', address_components[0].short_name);

setOffice({ lat, lng });
setZoom(18);
setPin({ lat, lng });
setZoom(15);
};

return (
Expand Down
2 changes: 1 addition & 1 deletion apps/app/src/app/(protected)/events/create/form/event-location/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const EventLocation = ({ register, errors, setValue, address }: Props) =>
// prepend={info.prepend}
/>

<FormError formError={errors?.location_description?.message as string} />
<FormError formError={errors?.location?.description?.message as string} />
</div>
</div>
) : (
Expand Down
25 changes: 19 additions & 6 deletions apps/app/src/app/(protected)/events/create/form/event-location/validation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,27 @@ type Coordinates = {
lng: number;
};

// export const eventLocationSchema = yup.object().shape({
// address: yup.string().min(10),
// place_id: yup.string().min(10),
// coords: yup.object().shape({
// lat: yup.number(),
// lng: yup.number(),
// }),
// location_description: stringNullable(yup.string().min(5)),
// });

export const eventLocationSchema = yup.object().shape({
address: yup.string().min(10),
place_id: yup.string().min(10),
coords: yup.object().shape({
lat: yup.number(),
lng: yup.number(),
location: yup.object().shape({
address: yup.string().min(10),
place_id: yup.string().min(10),
coords: yup.object().shape({
lat: yup.number(),
lng: yup.number(),
}),
description: stringNullable(yup.string().min(5)),
}),
location_description: stringNullable(yup.string().min(5)),
});


export type IeventLocationSchema = yup.InferType<typeof eventLocationSchema>;
6 changes: 3 additions & 3 deletions apps/app/src/app/(protected)/events/create/form/event-roles/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ type Props = {
export const EventRoles = ({ register, control, errors, setValue, getValues }: Props) => {
const { currentUser } = useContext(CurrUserContext);
const [saved, setSaved] = useState<number[]>([]);
const selectOptions = ['Provided', 'Not Provided', 'Amount'];
const selectOptions = ['Not Provided', 'Provided', 'Amount'];
// const [checked, setChecked] = useState<string>(selectOptions[0]);

const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
Expand Down Expand Up @@ -114,8 +114,8 @@ export const EventRoles = ({ register, control, errors, setValue, getValues }: P
</tr>
</thead>
<tbody>
{fields
.slice(0, saved.length)
{roles
?.slice(0, saved.length)
.map((field: IeventRoleSchema & { id: string }, index: any) => (
<tr key={field + index}>
{Object.entries(field).map(([key, value]: [string, any]) => {
Expand Down
7 changes: 1 addition & 6 deletions apps/app/src/app/(protected)/events/create/form/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,7 @@ export const CreateEventForm = () => {
}
}, [isSubmitSuccessful, reset]);

const vals = getValues();
console.log('🚀 file: index.tsx:50 vals:', vals);
const vals2 = watch();
console.log('🚀 file: index.tsx:54 vals2:', vals2);

const address = watch('address');
const address = watch('location.address');

const onError = (errors: any, e: any) => {
console.log('🚀 file: WorkInfo.tsx:52 data:', watch());
Expand Down
1 change: 1 addition & 0 deletions apps/app/src/app/(protected)/events/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export default async function Events({}: Props) {
const fetchDocs = getCloudFunction('fetchDocs');
const { data } = await fetchDocs({ collectionName: 'events' });


return (
<div className='flex flex-col gap-4 w-full'>
<h1 className='text-3xl'>Upcoming Events</h1>
Expand Down
Loading

0 comments on commit 402eee9

Please sign in to comment.