Person Collection

README.md

@@ -13,7 +13,6 @@
 - Framer Motion
 - Lucide Icons
 
-
 ## ⚡ Installation
 
 Here are the steps you need to follow to install the dependencies.
@@ -34,7 +33,7 @@ You can start the project on the local server
 
 ```bash
     pnpm run dev
- ```
+```
 
 It’ll start the template on [localhost:3000](http://localhost:3000).
 
@@ -47,3 +46,4 @@ It’ll start the template on [localhost:3000](http://localhost:3000).
 - The `public` directory contains all the static files used in the project like images.
 
 - The `collections` directory defines the schemas for the collections that will be managed in the Paylode dashboard.
+  - After creating a new collection, don't forget to add it to the `collections` array in the `payload.config.js` file.

collections/Person.ts

@@ -0,0 +1,70 @@
+import type { CollectionConfig } from 'payload'
+
+export const Person: CollectionConfig = {
+  slug: 'person',
+  fields: [
+    {
+      name: 'name',
+      label: "Nome",
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'photo',
+      label: 'Foto',
+      type: 'relationship',
+      relationTo: 'media',
+    },
+    {
+      name: 'description',
+      label: 'Descrição',
+      type: 'textarea',
+    },
+    {
+      name: 'birthday',
+      label: 'Data de nascimento',
+      type: 'date',
+    },
+    {
+      name: 'socials',
+      label: 'Redes sociais',
+      type: 'array',
+      fields: [
+        {
+          name: 'type',
+          label: 'Plataforma',
+          type: 'select',
+          hasMany: false,
+          options: [
+            {
+              label: 'Linkedin',
+              value: 'linkedin',
+            },
+            {
+              label: 'Facebook',
+              value: 'facebook',
+            },
+            {
+              label: 'Website',
+              value: 'website',
+            },
+            {
+              label: 'Instagram',
+              value: 'instagram',
+            },
+          ],
+          required: true,
+        },
+        {
+          name: 'link',
+          label: 'Link',
+          type: 'text',
+          required: true,
+          admin: {
+            placeholder: 'https://niaefeup.pt',
+          }
+        },
+      ],
+    },
+  ],
+}

payload-types.ts

@@ -13,6 +13,7 @@ export interface Config {
   collections: {
     users: User;
     media: Media;
+    person: Person;
     'payload-preferences': PayloadPreference;
     'payload-migrations': PayloadMigration;
   };
@@ -77,6 +78,26 @@ export interface Media {
   focalX?: number | null;
   focalY?: number | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "person".
+ */
+export interface Person {
+  id: number;
+  name: string;
+  photo?: (number | null) | Media;
+  description?: string | null;
+  birthday?: string | null;
+  socials?:
+    | {
+        type: 'linkedin' | 'facebook' | 'website' | 'instagram';
+        link: string;
+        id?: string | null;
+      }[]
+    | null;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-preferences".

payload.config.ts

@@ -1,4 +1,3 @@
-// storage-adapter-import-placeholder
 import { postgresAdapter } from "@payloadcms/db-postgres";
 import { lexicalEditor } from "@payloadcms/richtext-lexical";
 import path from "path";
@@ -8,15 +7,21 @@ import sharp from "sharp";
 
 import { Users } from "./collections/Users";
 import { Media } from "./collections/Media";
+import { Person } from "./collections/Person";
 
 const filename = fileURLToPath(import.meta.url);
 const dirname = path.dirname(filename);
 
 export default buildConfig({
   admin: {
     user: Users.slug,
+    dateFormat: "dd MMMM yyyy",
   },
-  collections: [Users, Media],
+  collections: [
+    Users,
+    Media,
+    Person,
+  ],
   editor: lexicalEditor(),
   secret: process.env.PAYLOAD_SECRET || "",
   typescript: {
@@ -31,4 +36,5 @@ export default buildConfig({
   plugins: [
     // storage-adapter-placeholder
   ],
+  livePreview: false, // Lets set it to true if we use pages collection (Globals)
 });