#261 - Update tags and categories

CHANGELOG.md

@@ -26,6 +26,7 @@
 ### 🐞 Fixes
 
 - [#247](https://github.com/estruyf/vscode-front-matter/issues/247): Fix the front matter highlighting in markdown documents
+- [#261](https://github.com/estruyf/vscode-front-matter/issues/261): Fix to allow that tag and category fields can be renamed
 
 ## [6.0.0] - 2022-01-25 - [Release Notes](https://beta.frontmatter.codes/updates/v6.0.0)
 

src/dashboardWebView/hooks/usePages.tsx

@@ -100,12 +100,12 @@ export default function usePages(pages: Page[]) {
 
     // Filter by tag
     if (tag) {
-      pagesSorted = pagesSorted.filter(page => page.tags && page.tags.includes(tag));
+      pagesSorted = pagesSorted.filter(page => page.fmTags && page.fmTags.includes(tag));
     }
 
     // Filter by category
     if (category) {
-      pagesSorted = pagesSorted.filter(page => page.categories && page.categories.includes(category));
+      pagesSorted = pagesSorted.filter(page => page.fmCategories && page.fmCategories.includes(category));
     }
 
     setPageItems(pagesSorted);

src/dashboardWebView/models/Page.ts

@@ -7,6 +7,9 @@ export interface Page {
   fmModified: number;
   fmDraft: "Draft" | "Published",
   fmYear: number | null | undefined;
+  fmPreviewImage: string;
+  fmTags: string[];
+  fmCategories: string[];
 
   title: string;
   slug: string;

src/listeners/dashboard/PagesListener.ts

@@ -13,7 +13,7 @@ import { ContentType } from "../../helpers/ContentType";
 import { DateHelper } from "../../helpers/DateHelper";
 import { Notifications } from "../../helpers/Notifications";
 import { BaseListener } from "./BaseListener";
-import { Field } from '../../models';
+import { Field, FieldType } from '../../models';
 
 
 export class PagesListener extends BaseListener {
@@ -152,6 +152,8 @@ export class PagesListener extends BaseListener {
         fmDraft: ContentType.getDraftStatus(article?.data),
         fmYear: article?.data[dateField] ? DateHelper.tryParse(article?.data[dateField])?.getFullYear() : null,
         fmPreviewImage: "",
+        fmTags: [],
+        fmCategories: [],
         // Make sure these are always set
         title: article?.data.title,
         slug: article?.data.slug,
@@ -170,6 +172,16 @@ export class PagesListener extends BaseListener {
         }
       }
 
+      let tagParents = this.findFieldByType(contentType.fields, "tags");
+      if (tagParents.length !== 0) {
+        page.fmTags = this.getFieldValue(article.data, tagParents);
+      }
+
+      let categoryParents = this.findFieldByType(contentType.fields, "categories");
+      if (categoryParents.length !== 0) {
+        page.fmCategories = this.getFieldValue(article.data, categoryParents);
+      }
+
       // Check if parent fields were retrieved, if not there was no image present
       if (previewFieldParents.length > 0) {
         let fieldValue = null;
@@ -224,6 +236,56 @@ export class PagesListener extends BaseListener {
     return;
   }
 
+  /**
+   * Retrieve the field value
+   * @param data 
+   * @param parents 
+   * @returns 
+   */
+  private static getFieldValue(data: any, parents: string[]): string[] {
+    let fieldValue = [];
+    let crntPageData = data;
+
+    for (let i = 0; i < parents.length; i++) {
+      const crntField = parents[i];
+
+      if (i === parents.length - 1) {
+        fieldValue = crntPageData[crntField];
+      } else {
+        if (!crntPageData[crntField]) {
+          continue;
+        }
+
+        crntPageData = crntPageData[crntField];
+      }
+    }
+
+    return fieldValue;
+  }
+
+  /**
+   * Find the field by its type
+   * @param fields 
+   * @param type 
+   * @param parents 
+   * @returns 
+   */
+  private static findFieldByType(fields: Field[], type: FieldType, parents: string[] = []) {
+    for (const field of fields) {
+      if (field.type === type) {
+        parents = [...parents, field.name];
+        return parents;
+      } else if (field.type === "fields" && field.fields) {
+        const subFields = this.findPreviewField(field.fields);
+        if (subFields.length > 0) {
+          return [...parents, field.name, ...subFields];
+        }
+      }
+    }
+
+    return parents;
+  }
+
   /**
    * Find the preview field in the fields
    * @param ctFields 

src/listeners/panel/TaxonomyListener.ts

@@ -19,10 +19,10 @@ export class TaxonomyListener extends BaseListener {
 
     switch(msg.command) {
       case CommandToCode.updateTags:
-        this.updateTags(TagType.tags, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
+        this.updateTags(msg.data?.fieldName, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
         break;
       case CommandToCode.updateCategories:
-        this.updateTags(TagType.categories, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
+        this.updateTags(msg.data?.fieldName, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
         break;
       case CommandToCode.updateKeywords:
         this.updateTags(TagType.keywords, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
@@ -47,7 +47,7 @@ export class TaxonomyListener extends BaseListener {
    * @param tagType 
    * @param values 
    */
-   private static updateTags(tagType: TagType, values: string[], parents: string[], blockData?: BlockFieldData) {
+   private static updateTags(fieldName: string, values: string[], parents: string[], blockData?: BlockFieldData) {
     const editor = window.activeTextEditor;
     if (!editor) {
       return "";
@@ -58,7 +58,7 @@ export class TaxonomyListener extends BaseListener {
 
       const parentObj = DataListener.getParentObject(article.data, article, parents, blockData);
 
-      parentObj[tagType.toLowerCase()] = values || [];
+      parentObj[fieldName] = values || [];
       ArticleHelper.update(editor, article);
       DataListener.pushMetadata(article!.data);
     }

src/panelWebView/components/Fields/WrapperField.tsx

@@ -72,7 +72,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
     let value: any = parent[field.name];
 
     if (field.type === "tags" || field.type === "categories" || field.type === "taxonomy") {
-      setFieldValue(value);
+      setFieldValue(value || []);
       return;
     };
     
@@ -202,6 +202,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
         <TagPicker 
           type={TagType.tags} 
           label={field.title || field.name}
+          fieldName={field.name}
           icon={<TagIcon />}
           crntSelected={fieldValue as string[] || []} 
           options={settings?.tags || []} 
@@ -240,6 +241,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
         <TagPicker 
           type={TagType.categories}
           label={field.title || field.name}
+          fieldName={field.name}
           icon={<ListUnorderedIcon />}
           crntSelected={fieldValue as string[] || []} 
           options={settings.categories} 

src/panelWebView/components/TagPicker.tsx

@@ -71,12 +71,14 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
   const sendUpdate = (values: string[]) => {    
     if (type === TagType.tags) {
       MessageHelper.sendMessage(CommandToCode.updateTags, {
+        fieldName,
         values,
         parents,
         blockData
       });
     } else if (type === TagType.categories) {
       MessageHelper.sendMessage(CommandToCode.updateCategories, {
+        fieldName,
         values,
         parents,
         blockData