From b644cab111018fe786e504c8de4ea10f79319e03 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Wed, 21 Jun 2023 09:00:47 +0200 Subject: [PATCH] process image fields in blocks --- src/helpers/ContentType.ts | 47 ++++++++++ src/helpers/ImageHelper.ts | 1 + src/listeners/panel/DataListener.ts | 89 +++++++++++++------ .../components/Fields/PreviewImageField.tsx | 5 +- .../components/Fields/WrapperField.tsx | 1 + 5 files changed, 112 insertions(+), 31 deletions(-) diff --git a/src/helpers/ContentType.ts b/src/helpers/ContentType.ts index 2713eab2..d98d404f 100644 --- a/src/helpers/ContentType.ts +++ b/src/helpers/ContentType.ts @@ -435,6 +435,53 @@ export class ContentType { return emptyFields || []; } + public static findFieldsByTypeDeep( + fields: Field[], + type: FieldType, + parents: Field[][] = [], + parentFields: Field[] = [] + ): Field[][] { + for (const field of fields) { + if (field.type === type) { + parents.push([...parentFields, field]); + } else if (field.type === 'fields' && field.fields) { + this.findFieldsByTypeDeep(field.fields, type, parents, [...parentFields, field]); + } else if (field.type === 'block') { + const groups = + field.fieldGroup && Array.isArray(field.fieldGroup) + ? field.fieldGroup + : [field.fieldGroup]; + const blocks = Settings.get(SETTING_TAXONOMY_FIELD_GROUPS); + + if (groups && blocks) { + let found = false; + + for (const group of groups) { + const block = blocks.find((block) => block.id === group); + if (!block) { + continue; + } + + let newParents: Field[][] = []; + if (!found) { + newParents = this.findFieldsByTypeDeep(block?.fields, type, parents, [ + ...parentFields, + field + ]); + } + + if (newParents.length > 0) { + found = true; + return newParents; + } + } + } + } + } + + return parents; + } + /** * Find all the required fields in the content type * @param fields diff --git a/src/helpers/ImageHelper.ts b/src/helpers/ImageHelper.ts index 93a150b0..83fb8069 100644 --- a/src/helpers/ImageHelper.ts +++ b/src/helpers/ImageHelper.ts @@ -103,6 +103,7 @@ export class ImageHelper { * @param parents */ public static processImageFields(updatedMetadata: any, fields: Field[], parents: string[] = []) { + // TODO: Support image fields from blocks const imageFields = fields.filter((field) => field.type === 'image'); const panel = ExplorerView.getInstance(); diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts index 699b8ab3..c3ceb2ee 100644 --- a/src/listeners/panel/DataListener.ts +++ b/src/listeners/panel/DataListener.ts @@ -6,7 +6,7 @@ import { Command } from '../../panelWebView/Command'; import { CommandToCode } from '../../panelWebView/CommandToCode'; import { BaseListener } from './BaseListener'; import { commands, ThemeIcon, window } from 'vscode'; -import { ArticleHelper, Logger, Settings } from '../../helpers'; +import { ArticleHelper, ContentType, Logger, Settings } from '../../helpers'; import { COMMAND_NAME, DefaultFields, @@ -17,7 +17,7 @@ import { import { Article, Preview } from '../../commands'; import { ParsedFrontMatter } from '../../parsers'; import { processKnownPlaceholders } from '../../helpers/PlaceholderHelper'; -import { PostMessageData } from '../../models'; +import { Field, PostMessageData } from '../../models'; import { encodeEmoji } from '../../utils'; const FILE_LIMIT = 10; @@ -183,48 +183,79 @@ export class DataListener extends BaseListener { } const contentType = ArticleHelper.getContentType(article.data); - const dateFields = contentType.fields.filter((f) => f.type === 'datetime'); - const imageFields = contentType.fields.filter((f) => f.type === 'image' && f.multiple); - const fileFields = contentType.fields.filter((f) => f.type === 'file' && f.multiple); - const fieldsWithEmojiEncoding = contentType.fields.filter((f) => f.encodeEmoji); + + const dateFields = ContentType.findFieldsByTypeDeep(contentType.fields, 'datetime'); + const imageFields = ContentType.findFieldsByTypeDeep(contentType.fields, 'image'); + const fileFields = ContentType.findFieldsByTypeDeep(contentType.fields, 'file'); + + // const dateFields = contentType.fields.filter((f) => f.type === 'datetime'); + // const imageFields = contentType.fields.filter((f) => f.type === 'image' && f.multiple); + // const fileFields = contentType.fields.filter((f) => f.type === 'file' && f.multiple); + // const fieldsWithEmojiEncoding = contentType.fields.filter((f) => f.encodeEmoji); // Support multi-level fields const parentObj = DataListener.getParentObject(article.data, article, parents, blockData); - const isDateField = dateFields.some((f) => f.name === field); - const isMultiImageField = imageFields.some((f) => f.name === field); - const isMultiFileField = fileFields.some((f) => f.name === field); + const dateFieldsArray = dateFields.find((f: Field[]) => { + const lastField = f?.[f.length - 1]; + if (lastField) { + return lastField.name === field; + } + }); - if (isDateField) { - for (const dateField of dateFields) { + const multiImageFieldsArray = imageFields.find((f: Field[]) => { + const lastField = f?.[f.length - 1]; + if (lastField) { + return lastField.name === field; + } + }); + + const multiFileFieldsArray = fileFields.find((f: Field[]) => { + const lastField = f?.[f.length - 1]; + if (lastField) { + return lastField.name === field; + } + }); + + // const isDateField = dateFields.some((f) => f.name === field); + // const isMultiImageField = imageFields.some((f) => f.name === field); + // const isMultiFileField = fileFields.some((f) => f.name === field); + + if (dateFieldsArray && dateFieldsArray.length > 0) { + for (const dateField of dateFieldsArray) { if (field === dateField.name && value) { parentObj[field] = Article.formatDate(new Date(value)); } } - } else if (isMultiImageField || isMultiFileField) { - const fields = isMultiImageField ? imageFields : fileFields; + } else if (multiImageFieldsArray || multiFileFieldsArray) { + const fields = + multiImageFieldsArray && multiImageFieldsArray.length > 0 + ? multiImageFieldsArray + : multiFileFieldsArray; - for (const crntField of fields) { - if (field === crntField.name) { - // If value is an array, it means it comes from the explorer view itself (deletion) - if (Array.isArray(value)) { - parentObj[field] = value || []; - } else { - // Otherwise it is coming from the media dashboard (addition) - let fieldValue = parentObj[field]; - if (fieldValue && !Array.isArray(fieldValue)) { - fieldValue = [fieldValue]; + if (fields) { + for (const crntField of fields) { + if (field === crntField.name) { + // If value is an array, it means it comes from the explorer view itself (deletion) + if (Array.isArray(value)) { + parentObj[field] = value || []; + } else { + // Otherwise it is coming from the media dashboard (addition) + let fieldValue = parentObj[field]; + if (fieldValue && !Array.isArray(fieldValue)) { + fieldValue = [fieldValue]; + } + const crntData = Object.assign([], fieldValue); + const allRelPaths = [...(crntData || []), value]; + parentObj[field] = [...new Set(allRelPaths)].filter((f) => f); } - const crntData = Object.assign([], fieldValue); - const allRelPaths = [...(crntData || []), value]; - parentObj[field] = [...new Set(allRelPaths)].filter((f) => f); } } } } else { - if (fieldsWithEmojiEncoding.some((f) => f.name === field)) { - value = encodeEmoji(value); - } + // if (fieldsWithEmojiEncoding.some((f) => f.name === field)) { + // value = encodeEmoji(value); + // } parentObj[field] = value; } diff --git a/src/panelWebView/components/Fields/PreviewImageField.tsx b/src/panelWebView/components/Fields/PreviewImageField.tsx index bd9adbac..fea8ba36 100644 --- a/src/panelWebView/components/Fields/PreviewImageField.tsx +++ b/src/panelWebView/components/Fields/PreviewImageField.tsx @@ -50,9 +50,10 @@ export const PreviewImageField: React.FunctionComponent }, [filePath, fieldName, value, multiple, parents]); const onImageRemove = (imageToRemove: string) => { + debugger; const newValue = value && Array.isArray(value) - ? value.filter((image) => image.original !== imageToRemove).map((i) => i.original) + ? value.filter((image) => (image?.original || image) !== imageToRemove).map((i) => (i?.original || i as any as string)) : null; onChange(newValue); }; @@ -96,7 +97,7 @@ export const PreviewImageField: React.FunctionComponent Array.isArray(value) && !isFaultyImage && value.map((image) => ( - + onImageRemove(image?.original || image as any as string)} /> ))} diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx index bffef646..27ba1802 100644 --- a/src/panelWebView/components/Fields/WrapperField.tsx +++ b/src/panelWebView/components/Fields/WrapperField.tsx @@ -241,6 +241,7 @@ export const WrapperField: React.FunctionComponent = ({ ); } else if (field.type === 'image') { + console.log('image', field, fieldValue); return (