Conditional fields for nested properties

[janikga]

Hey there! 👋

First off, let me say how much we appreciate this wonderful library - it is really rare to see such a well maintained and documented piece of open-source software out there! 😍

Now, to business: we are currently working on a new product where we are utilizing fireCMS to build the CMS (obviously).
We came across a use case for handling nested properties as conditional fields, however, we cannot get it to work.
Maybe anyone knows whether this is currently possible and elaborate what we are doing wrong? :)
Is this kind of functionality even supported right now?

Here is a reproducible example: basically, we have objects of type Quiz. On each Quiz, we have a property called content, which in turn has the nested property solution.
The content property is already a conditional field, as we want to return different properties, depending on the type of the object.
In addition, we need to treat solution as a conditional field again, as we need to dynamically determine its validation values (e.g., the number of options scopes the possible values for the solution).
As you can see in the example, we treated them both as conditional fields.
However, we get a compilationruntime error, which add the stack trace below the example.

import { buildSchema, buildPropertiesOrBuilder, PropertiesOrBuilder } from '@camberi/firecms';

enum QuizType {
  SingleChoice = 'singleChoice',
  MultipleChoice = 'multipleChoice',
}

type SingleChoiceContent = {
  question: string;
  options: string[];
  // The index of the correct solution
  // In the schema we need to validate that the passed index is valid and not out of bounds
  // E.g., if there are 4 answers, the accepted input for the solution should be 0-3
  solution: number;
};

type MultipleChoiceContent = {
  question: string;
  options: string[];
  // The indexes of the correct solution; multiple answers can be correct
  // In the schema we need to validate that the passed indexes are valid and not out of bounds
  // E.g., if there are 4 answers, the accepted input for the solution should be numbers between 0-3; and unique within the array
  solution: number[];
};

type Quiz = {
  type: QuizType;
  content: SingleChoiceContent | MultipleChoiceContent;
};

export const exampleSchema = buildSchema<Quiz>({
  properties: {
    type: {
      title: 'Type',
      dataType: 'string',
      config: {
        enumValues: {
          singleChoice: 'single choice',
          multipleChoice: 'multiple choice',
        },
      },
      validation: { required: true },
    },
    content: ({ values }) => {
      let properties: PropertiesOrBuilder<any> = {};

      switch (values.type) {
        // image one case for each type of content; for simplicity, we only define one explicitly
        default:
        case QuizType.SingleChoice:
          properties = buildPropertiesOrBuilder<SingleChoiceContent>({
            question: {
              title: 'Question',
              dataType: 'string',
              validation: { required: true },
            },
            options: {
              title: 'Options',
              dataType: 'array',
              of: {
                dataType: 'string',
              },
              validation: { required: true },
            },
            solution: ({
              values: valuesSolution,
            }: {
              values: Partial<SingleChoiceContent>;
            }): any => {
              const { options } = valuesSolution;
              const numberOfOptions = options
                ? Object.values(options)[0].length
                : 1;

              return {
                dataType: 'number',
                title: 'Solution',
                validation: {
                  required: true,
                  positive: true,
                  integer: true,
                  min: 0,
                  max: numberOfOptions - 1,
                },
              };
            },
          });
          break;
      }
      return {
        dataType: 'map',
        title: 'Content',
        properties,
      };
    },
  },
});

dependencies:

"@camberi/firecms": "^1.0.0-beta9",
"typescript": "^4.4.4"

compilation runtime error:

index.js:1 Unsupported data type in yup mapping ({
              values: valuesSolution
            }) => {
              const {
                options
              } = valuesSolution;
              const numberOfOptions = options ? Object.valu…

Uncaught Error: Unsupported data type in yup mapping
    at mapPropertyToYup (index.modern.js:61829)
    at index.modern.js:61850
    at Array.forEach (<anonymous>)
    at getYupMapObjectSchema (index.modern.js:61849)
    at mapPropertyToYup (index.modern.js:61817)
    at index.modern.js:61834
    at Array.forEach (<anonymous>)
    at getYupEntitySchema (index.modern.js:61833)
    at index.modern.js:66242
    at mountMemo (react-dom.development.js:15846)
    at Object.useMemo (react-dom.development.js:16219)
    at useMemo (react.development.js:1532)
    at EntityForm$1 (index.modern.js:66242)
    at renderWithHooks (react-dom.development.js:14985)
    at updateFunctionComponent (react-dom.development.js:17356)
    at mountLazyComponent (react-dom.development.js:17677)
    at beginWork (react-dom.development.js:19055)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at batchedEventUpdates$1 (react-dom.development.js:22403)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:468)
    at dispatchUserBlockingUpdate (react-dom.development.js:5894)

Any help would be greatly appreciated!! 🙏

Janik

[fgatti675]

Hi @jagaSto
You currently can't nest property builders, they can only be used at the top level, and you can build all the child properties from there.
We will consider supporting this in the future

[janikga]

Thx for the answer, that is unfortunate! We will probably rework our data model and align everything on the top level. Thanks!