#710 - Remove the fields from FM when the when clause is not met

CHANGELOG.md

@@ -15,6 +15,7 @@
 - [#700](https://github.com/estruyf/vscode-front-matter/issues/700): Added the `{{pathToken.relPath}}` placeholder for the `previewPath` property
 - [#706](https://github.com/estruyf/vscode-front-matter/issues/706): Show the error of scripts failing in the Front Matter output panel
 - [#709](https://github.com/estruyf/vscode-front-matter/issues/709): Take "where clause" into account on content creation
+- [#710](https://github.com/estruyf/vscode-front-matter/issues/710): Hide child field when parent field its "when clause" is not met, also remove the fields from the content
 
 ### ⚡️ Optimizations
 

src/helpers/ContentType.ts

@@ -918,7 +918,7 @@ export class ContentType {
       const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
 
       for (const field of obj.fields) {
-        if (!fieldWhenClause(field, data)) {
+        if (!fieldWhenClause(field, data, obj.fields)) {
           Logger.info(`Field ${field.name} not added because of when clause`);
           continue;
         }

src/listeners/panel/DataListener.ts

@@ -19,7 +19,7 @@ import { Article, Preview } from '../../commands';
 import { ParsedFrontMatter } from '../../parsers';
 import { processKnownPlaceholders } from '../../helpers/PlaceholderHelper';
 import { Field, PostMessageData } from '../../models';
-import { encodeEmoji } from '../../utils';
+import { encodeEmoji, fieldWhenClause } from '../../utils';
 import { PanelProvider } from '../../panelWebView/PanelProvider';
 import { MessageHandlerData } from '@estruyf/vscode';
 import { SponsorAi } from '../../services/SponsorAI';
@@ -348,6 +348,29 @@ export class DataListener extends BaseListener {
       }
     }
 
+    // Verify if there are fields to be cleared due to the when clause
+    const allFieldNames = Object.keys(parentObj);
+    let ctFields = contentType.fields;
+    if (parents && parents.length > 0) {
+      for (const parent of parents) {
+        const crntField = ctFields.find((f) => f.name === parent);
+        if (crntField) {
+          ctFields = crntField.fields || [];
+        }
+      }
+    }
+    if (ctFields && ctFields.length > 0) {
+      for (const field of allFieldNames) {
+        const crntField = ctFields.find((f) => f.name === field);
+        if (crntField && crntField.when) {
+          const renderField = fieldWhenClause(crntField, parentObj, ctFields);
+          if (!renderField) {
+            delete parentObj[field];
+          }
+        }
+      }
+    }
+
     // Clear the field if it is empty
     if (
       value === undefined ||

src/panelWebView/components/Fields/WrapperField.tsx

@@ -2,7 +2,7 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { DateHelper } from '../../../helpers/DateHelper';
-import { BlockFieldData, CustomPanelViewResult, Field, PanelSettings, WhenOperator } from '../../../models';
+import { BlockFieldData, CustomPanelViewResult, Field, PanelSettings } from '../../../models';
 import { Command } from '../../Command';
 import { CommandToCode } from '../../CommandToCode';
 import { TagType } from '../../TagType';
@@ -36,6 +36,7 @@ import { LocalizationKey } from '../../../localization';
 
 export interface IWrapperFieldProps {
   field: Field;
+  allFields: Field[];
   parent: IMetadata;
   parentFields: string[];
   metadata: IMetadata;
@@ -57,6 +58,7 @@ export interface IWrapperFieldProps {
 
 export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
   field,
+  allFields,
   parent,
   parentFields,
   metadata,
@@ -158,7 +160,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
 
   // Conditional fields
   if (typeof field.when !== 'undefined') {
-    const shouldRender = fieldWhenClause(field, parent);
+    const shouldRender = fieldWhenClause(field, parent, allFields);
 
     if (!shouldRender) {
       return null;

src/panelWebView/components/Metadata.tsx

@@ -74,6 +74,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({
       <WrapperField
         key={field.name}
         field={field}
+        allFields={ctFields}
         parent={parent}
         parentFields={parentFields}
         metadata={metadata}

src/utils/fieldWhenClause.ts

@@ -8,12 +8,20 @@ import { IMetadata } from '../panelWebView/components/Metadata';
  * @param parent - The parent metadata object.
  * @returns A boolean indicating whether the field should be displayed.
  */
-export const fieldWhenClause = (field: Field, parent: IMetadata): boolean => {
+export const fieldWhenClause = (field: Field, parent: IMetadata, allFields?: Field[]): boolean => {
   const when = field.when;
   if (!when) {
     return true;
   }
 
+  let parentField = allFields?.find((f) => f.name === when.fieldRef);
+  if (parentField && parentField.when) {
+    const renderParent = fieldWhenClause(parentField, parent, allFields);
+    if (!renderParent) {
+      return false;
+    }
+  }
+
   let whenValue = parent[when.fieldRef];
   if (when.caseSensitive || typeof when.caseSensitive === 'undefined') {
     return caseSensitive(when, field, whenValue);