Orchestrate multiple entries based on an other collection

[robbertstevens]

Hi,

We want to orchestrate a series of entries of various collections based on a entry in the collection Project.

A project can have different project types, which is also a collection. In the project type we have a few things, but at least a content field and an array with the available variables.

erDiagram
     p[Project] {
         Map variables "Map<string, string> with variable key and value"
     }
     pt[ProjectType] {
          RichText content
          string[] variables "the available variable keys"
     }
     
     p ||--|| pt: has

Loading

The orchestration it self isn't really the problem, we can do that using the job system and generate all the necessary entries in the background.

The problem we are facing is how can we prefill the variables field with the variables defined in the ProjectType entries when creating a new project.

So the question is: How should we make the following, when you create a new project, you select the ProjectType as a relationship, then based on that relationship an array field is prefilled with data from that relationship.

[r1tsuu]

Hey @robbertstevens, I think there are at least 2 ways to approach this

The first way is using the react admin panel hooks.
You can use the useField hook here https://payloadcms.com/docs/admin/react-hooks#usefield to "watch" the changes of the projectTypes (or how it's called on your side) field and change the variables field.

import { useDocumentInfo, useField } from '@payloadcms/ui'

// Component
const { value: projectTypes } = useField({ path: 'projectTypes' }) 
const { value: variables, setValue: setVariables } = useField({ path: 'variables' })
const { id } = useDocumentInfo() // if id is undefined that means we're currently creating a project, not editing
const isEditing = Boolean(id)

Combine that with useEffect, you can do something like this:

useEffect(() => {
  const prefillVariables = async () => {
    if (isEditing) {
      return
    }

    const projectTypeIDs = Array.isArray(projectTypes) ? projectTypes : []

    if (projectTypeIDs.length === 0) {
      setVariables([])
      return
    }

    // data for every project type is here
    const populatedProjectTypes = await fetch(
      `/api/project-types?where[id][in]=${projectTypes.join(',')}&depth=0`,
    ).then((res) => res.json())

    // set data of the array based on project types
    setVariables(
      populatedProjectTypes.map((e) => ({
        key: e.key,
      })),
    )
  }

  void prefillVariables()
}, [projectTypes, isEditing, setVariables])

Needs of course some adjustments based on your data but I'd expect this to work.

The second way would be to use either the beforeValidate hook or the beforeChange hook https://payloadcms.com/docs/hooks/collections#beforevalidate and do the same modifications to the data, but on the backend. This, however will update the UI only after you create a document.

Hope I understood your logic correctly, let me know if you have further questions!

[robbertstevens]

Thanks I think I can work with this!