Merge pull request #61 from ecss-soton/events-page

Events-page

src/app/_blocks/ArchiveBlock/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Committee, Post, Project, Society, Sponsor } from '../../../payload/payload-types'
+import { Committee, Event, Post, Project, Society, Sponsor } from '../../../payload/payload-types'
 import { CollectionArchive } from '../../_components/CollectionArchive'
 import { CommitteeArchive } from '../../_components/CommitteeArchive'
 import { Gutter } from '../../_components/Gutter'
@@ -50,12 +50,14 @@ export const ArchiveBlock: React.FC<
     | { relationTo: 'sponsors'; value: string | Sponsor }
     | { relationTo: 'societies'; value: string | Society }
     | { relationTo: 'committee'; value: string | Committee }
+    | { relationTo: 'events'; value: string | Event }
   )[] = populatedDocs.filter(Boolean) as (
     | { relationTo: 'posts'; value: string | Post }
     | { relationTo: 'projects'; value: string | Project }
     | { relationTo: 'sponsors'; value: string | Sponsor }
     | { relationTo: 'societies'; value: string | Society }
     | { relationTo: 'committee'; value: string | Committee }
+    | { relationTo: 'events'; value: string | Event }
   )[]
 
   return (

src/app/_components/Card/index.tsx

@@ -12,7 +12,7 @@ export const Card: React.FC<{
   showCategories?: boolean
   hideImagesOnMobile?: boolean
   title?: string
-  relationTo?: 'projects' | 'posts' | 'societies' | 'sponsors' | 'committee'
+  relationTo?: 'projects' | 'posts' | 'societies' | 'sponsors' | 'committee' | 'events'
   doc?: Project | Post
   orientation?: 'horizontal' | 'vertical'
 }> = props => {

src/app/_components/CollectionArchive/index.module.scss

@@ -92,6 +92,10 @@
   }
 }
 
+.columnEvents {
+  grid-column-end: span 12;
+}
+
 .pagination {
   margin-top: calc(var(--base) * 2);
 

src/app/_components/CollectionArchive/index.tsx

@@ -3,10 +3,18 @@
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import qs from 'qs'
 
-import type { Committee, Post, Project, Society, Sponsor } from '../../../payload/payload-types'
+import type {
+  Committee,
+  Event,
+  Post,
+  Project,
+  Society,
+  Sponsor,
+} from '../../../payload/payload-types'
 import type { ArchiveBlockProps } from '../../_blocks/ArchiveBlock/types'
 import { Card } from '../Card'
 import { CommitteeItem } from '../CommitteeItem'
+import { EventItem } from '../EventItem'
 import { Gutter } from '../Gutter'
 import { PageRange } from '../PageRange'
 import { Pagination } from '../Pagination'
@@ -16,7 +24,7 @@ import { SponsorItem } from '../SponsorItem'
 import classes from './index.module.scss'
 
 type Result = {
-  docs: (Post | Project | Sponsor | Society | Committee | string)[]
+  docs: (Post | Project | Sponsor | Society | Committee | Event | string)[]
   hasNextPage: boolean
   hasPrevPage: boolean
   nextPage: number
@@ -34,7 +42,7 @@ export type Props = {
   populateBy?: 'collection' | 'selection'
   populatedDocs?: ArchiveBlockProps['populatedDocs']
   populatedDocsTotal?: ArchiveBlockProps['populatedDocsTotal']
-  relationTo?: 'posts' | 'projects' | 'committee' | 'sponsors' | 'societies'
+  relationTo?: 'posts' | 'projects' | 'committee' | 'sponsors' | 'societies' | 'events'
   selectedDocs?: ArchiveBlockProps['selectedDocs']
   showPageRange?: boolean
   sort?: string
@@ -118,7 +126,8 @@ export const CollectionArchive: React.FC<Props> = props => {
           depth: 1,
           limit,
           page,
-          sort: relationTo === 'committee' ? 'position' : 'level',
+          sort:
+            relationTo === 'committee' ? 'position' : relationTo === 'events' ? 'date' : 'level',
           where: {
             ...(categories
               ? {
@@ -169,7 +178,9 @@ export const CollectionArchive: React.FC<Props> = props => {
           const json = await req.json()
           clearTimeout(timer)
 
-          let { docs } = json as { docs: (Post | Project | Committee | Sponsor | Society)[] }
+          let { docs } = json as {
+            docs: (Post | Project | Committee | Sponsor | Society | Event)[]
+          }
 
           if (docs && Array.isArray(docs)) {
             if (relationTo === 'committee') {
@@ -228,7 +239,11 @@ export const CollectionArchive: React.FC<Props> = props => {
                 return (
                   <div
                     className={
-                      relationTo === 'committee' ? classes.columnCommittee : classes.column
+                      relationTo === 'committee'
+                        ? classes.columnCommittee
+                        : relationTo === 'events'
+                        ? classes.columnEvents
+                        : classes.column
                     }
                     key={index}
                   >
@@ -245,6 +260,9 @@ export const CollectionArchive: React.FC<Props> = props => {
                     {relationTo === 'committee' && 'position' in result && (
                       <CommitteeItem committee={result} />
                     )}
+                    {relationTo === 'events' && 'name' in result && 'date' in result && (
+                      <EventItem event={result} />
+                    )}
                   </div>
                 )
               }

src/app/_components/EventItem/index.module.scss

@@ -0,0 +1,99 @@
+@import '../../_css/common';
+
+.rectangle {
+    background-color: var(--theme-elevation-50);
+    border-radius: 42px;
+    box-shadow: -8px 8px 33px -16px var(--theme-shadow);
+    height: 100%;
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+
+    @include extra-small-break {
+      flex-direction: column;
+      width: 80%;
+    }
+  }
+
+  .when {
+    text-align: center;
+    width: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @include extra-small-break {
+        width: 100%;
+      }
+  }
+
+  .date {
+    color: var(--theme-elevation-1000);
+    font-size: 48px;
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: normal;
+
+    @include extra-small-break {
+        font-size: 18vw;
+      }
+  }
+
+  .month {
+    color: var(--theme-elevation-400);
+    font-size: 24px;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: normal;
+    width: 100%;
+
+    @include extra-small-break {
+        font-size: 7vw;
+      }
+  }
+
+  .desc {
+    color: var(--theme-elevation-800);
+    font-size: 24px;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: normal;
+    width: 100%;
+
+    @include extra-small-break {
+        display: none;
+      }
+  }
+
+  .name {
+    color: var(--theme-elevation-1000);
+    font-size: 64px;
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: normal;
+    width: 100%;
+
+    @include extra-small-break {
+        font-size: 10vw;
+      }
+  }
+
+  .what {
+    flex: 75%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 3%;
+    padding-bottom: 0.5%;
+    padding-right: 5%;
+    padding-left: 2%;
+
+    @include extra-small-break {
+        width: 100%;
+        padding-left: 1%;
+        padding-right: 1%;
+        padding-bottom: 2%;
+        text-align: center;
+      }
+  }

src/app/_components/EventItem/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { Inter } from '@next/font/google'
+
+import { Event } from '../../../payload/payload-types'
+
+import classes from './index.module.scss'
+
+const inter = Inter({
+  subsets: ['latin'],
+  weight: ['400', '700'],
+  style: ['normal'],
+})
+
+export const EventItem: React.FC<{
+  event?: Event
+}> = props => {
+  const {
+    event: { name, date, description: desc },
+  } = props
+
+  const getMonthName = (monthNumber: number): string => {
+    const monthNames = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ]
+    return monthNames[monthNumber - 1]
+  }
+
+  const dateParts = date.split('-')
+  const year = dateParts[0]
+  const month = parseInt(dateParts[1], 10)
+  const day = dateParts[2].split('T')[0]
+  const monthName = getMonthName(month)
+
+  // const { slug, title, categories, meta } = doc || {}
+  // const { description, image: metaImage } = meta || {}
+
+  // const hasCategories = categories && Array.isArray(categories) && categories.length > 0
+  // const titleToUse = titleFromProps || title
+  // const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space
+  // const href = `/${relationTo}/${slug}`
+
+  return (
+    <div className={[classes.rectangle, inter.className].join(' ')}>
+      <div className={classes.when}>
+        <div className={classes.date}>{day}</div>
+        <div className={classes.month}>{monthName}</div>
+      </div>
+      <div className={classes.what}>
+        <div className={classes.name}>{name}</div>
+        <p className={classes.desc}>{desc}</p>
+      </div>
+    </div>
+  )
+}

src/app/_css/queries.scss

@@ -1,6 +1,6 @@
 // Keep these in sync with the breakpoints exported in '../cssVariables.js'
 
-$breakpoint-xs-width: 400px;
+$breakpoint-xs-width: 550px;
 $breakpoint-s-width: 768px;
 $breakpoint-m-width: 1024px;
 $breakpoint-l-width: 1440px;

src/payload/blocks/ArchiveBlock/index.ts

@@ -58,6 +58,10 @@ export const Archive: Block = {
           label: 'Societies',
           value: 'societies',
         },
+        {
+          label: 'Events',
+          value: 'events',
+        },
       ],
     },
     {
@@ -84,7 +88,7 @@ export const Archive: Block = {
       type: 'relationship',
       name: 'selectedDocs',
       label: 'Selection',
-      relationTo: ['posts', 'projects', 'sponsors', 'societies', 'committee'],
+      relationTo: ['posts', 'projects', 'sponsors', 'societies', 'committee', 'events'],
       hasMany: true,
       admin: {
         condition: (_, siblingData) => siblingData.populateBy === 'selection',
@@ -94,7 +98,7 @@ export const Archive: Block = {
       type: 'relationship',
       name: 'populatedDocs',
       label: 'Populated Docs',
-      relationTo: ['posts', 'projects', 'sponsors', 'societies', 'committee'],
+      relationTo: ['posts', 'projects', 'sponsors', 'societies', 'committee', 'events'],
       hasMany: true,
       admin: {
         disabled: true,

src/payload/collections/Events.ts

@@ -0,0 +1,56 @@
+import type { CollectionConfig } from 'payload/types'
+
+import { admins } from '../access/admins'
+
+const Events: CollectionConfig = {
+  slug: 'events',
+  access: {
+    read: () => true,
+    create: admins,
+    update: admins,
+    delete: admins,
+  },
+  admin: {
+    useAsTitle: 'id',
+    defaultColumns: ['id', 'type'],
+  },
+  fields: [
+    {
+      name: 'id',
+      label: 'id',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'name',
+      label: 'Name',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'date',
+      label: 'Date',
+      type: 'date',
+      required: true,
+      admin: {
+        date: {
+          pickerAppearance: 'dayAndTime',
+          displayFormat: 'dd-MM-yyyy hh:mm',
+        },
+      },
+    },
+    {
+      name: 'location',
+      label: 'Location',
+      type: 'text',
+    },
+    {
+      name: 'description',
+      label: 'Description',
+      type: 'text',
+      maxLength: 150,
+    },
+  ],
+}
+
+export default Events