#332 - Adding the new fileData field

CHANGELOG.md

@@ -4,15 +4,15 @@
 
 ### 🎨 Enhancements
 
+- JSON schema enhancements for working with data files
 - [#330](https://github.com/estruyf/vscode-front-matter/issues/330): Allow custom scripts to easily update front matter
 - [#331](https://github.com/estruyf/vscode-front-matter/issues/331): Added functionality to run other type of scripts
+- [#332](https://github.com/estruyf/vscode-front-matter/issues/332): New `dataFile` field which allows you to create data file references
 - [#333](https://github.com/estruyf/vscode-front-matter/issues/333): Automatically mark Jekyll posts in `_drafts` folder as draft
 - [#335](https://github.com/estruyf/vscode-front-matter/issues/335): Merge media snippets with content snippets to allow you to define multiple media snippets and use these in your content
 - [#336](https://github.com/estruyf/vscode-front-matter/issues/336): Support added for inverting the draft field so that SSGs/authors can use a published field instead
 - [#337](https://github.com/estruyf/vscode-front-matter/issues/337): Allow multiple front matter types to be used.
 
-### ⚡️ Optimizations
-
 ### 🐞 Fixes
 
 - [#334](https://github.com/estruyf/vscode-front-matter/issues/334): Fix for locked content folders retrieval

package.json

@@ -454,7 +454,8 @@
               },
               "file": {
                 "type": "string",
-                "description": "Path to the file to load. Only JSON or YAML files are supported."
+                "description": "Path to the file to load. Only JSON or YAML files are supported.",
+                "default": "[[workspace]]/"
               },
               "fileType": {
                 "type": "string",
@@ -466,10 +467,38 @@
                 "description": "Defines how you want to parse the file. JSON is the default."
               },
               "schema": {
+                "$id": "#dataFileSchema",
                 "type": "object",
                 "default": {},
                 "description": "The JSON schema for your data which will be used to render the data form.",
-                "additionalProperties": true
+                "additionalProperties": true,
+                "required": [
+                  "type",
+                  "properties"
+                ],
+                "properties": {
+                  "title": {
+                    "type": "string",
+                    "description": "Title of the form."
+                  },
+                  "type": {
+                    "type": "string",
+                    "description": "Defines the type of the form. Default is 'object'.",
+                    "default": "object"
+                  },
+                  "required": {
+                    "type": "array",
+                    "description": "Defines the required fields for the form.",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "properties": {
+                    "type": "object",
+                    "description": "Defines the fields of the form.",
+                    "additionalProperties": true
+                  }
+                }
               },
               "type": {
                 "type": "string",
@@ -516,13 +545,11 @@
               },
               "path": {
                 "type": "string",
-                "description": "Path to the folder to load files."
+                "description": "Path to the folder to load files.",
+                "default": "[[workspace]]/"
               },
               "schema": {
-                "type": "object",
-                "default": {},
-                "description": "The JSON schema for your data which will be used to render the data form.",
-                "additionalProperties": true
+                "$ref": "#dataFileSchema"
               },
               "type": {
                 "type": "string",
@@ -563,10 +590,7 @@
                 "description": "Your unique ID you want to use for your data type."
               },
               "schema": {
-                "type": "object",
-                "default": {},
-                "description": "The JSON schema for your data which will be used to render the data form.",
-                "additionalProperties": true
+                "$ref": "#dataFileSchema"
               }
             },
             "required": [
@@ -781,7 +805,8 @@
                         "draft",
                         "fields",
                         "json",
-                        "block"
+                        "block",
+                        "dataFile"
                       ],
                       "description": "Define the type of field"
                     },
@@ -903,6 +928,16 @@
                       "type": "boolean",
                       "default": false,
                       "description": "Specify if the field is the modified date field"
+                    },
+                    "dataFileId": {
+                      "type": "string",
+                      "default": "",
+                      "description": "Specify the ID of the data file to use for this field"
+                    },
+                    "dataFileKey": {
+                      "type": "string",
+                      "default": "",
+                      "description": "Specify the key of the data file to use for this field"
                     }
                   },
                   "additionalProperties": false,
@@ -911,6 +946,21 @@
                     "name"
                   ],
                   "allOf": [
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "dataFile"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "dataFileId",
+                          "dataFileKey"
+                        ]
+                      }
+                    },
                     {
                       "if": {
                         "properties": {

src/helpers/DataFileHelper.ts

@@ -0,0 +1,74 @@
+import { existsSync, readFileSync } from "fs";
+import { Folders } from "../commands/Folders";
+import { DataFile } from "../models";
+import * as yaml from 'js-yaml';
+import { Logger } from "./Logger";
+import { Notifications } from "./Notifications";
+import { commands } from "vscode";
+import { COMMAND_NAME, SETTING_DATA_FILES } from "../constants";
+import { Settings } from "./SettingsHelper";
+
+
+export class DataFileHelper {
+
+  /**
+   * Retrieve the file data
+   * @param filePath 
+   * @returns 
+   */
+  public static get(filePath: string) {
+    const absPath = Folders.getAbsFilePath(filePath);
+    if (existsSync(absPath)) {
+      return readFileSync(absPath, 'utf8');
+    }
+
+    return null;
+  }
+
+  /**
+   * Get by the id of the data file
+   * @param id 
+   */
+  public static getById(id: string) {
+    const files = Settings.get<DataFile[]>(SETTING_DATA_FILES);
+
+    if (!files || files.length === 0) {
+      return;
+    }
+
+    const file = files.find(f => f.id === id);
+
+    if (!file) {
+      return;
+    }
+
+    return DataFileHelper.process(file);
+  }
+
+  /**
+   * Process the data file
+   * @param data 
+   * @returns 
+   */
+  public static async process(data: DataFile) {
+    try {
+      const { file, fileType } = data;
+      const dataFile = DataFileHelper.get(file);
+
+      if (fileType === "yaml") {
+        return yaml.safeLoad(dataFile || "");
+      } else {
+        return dataFile ? JSON.parse(dataFile) : [];
+      }
+    } catch (ex) {
+      Logger.error(`DataFileHelper::process: ${(ex as Error).message}`);
+      const btnClick = await Notifications.error(`Something went wrong while processing the data file. Check your file and output log for more information.`, 'Open output');
+
+      if (btnClick && btnClick === 'Open output') {
+        commands.executeCommand(COMMAND_NAME.showOutputChannel);
+      }
+
+      return;
+    }
+  }
+}

src/helpers/index.ts

@@ -2,6 +2,7 @@ export * from './ArticleHelper';
 export * from './ContentType';
 export * from './CustomScript';
 export * from './DashboardSettings';
+export * from './DataFileHelper';
 export * from './DateHelper';
 export * from './Extension';
 export * from './FilesHelper';
@@ -11,13 +12,15 @@ export * from './ImageHelper';
 export * from './Logger';
 export * from './MediaHelpers';
 export * from './MediaLibrary';
-export * from './MessageHelper';
 export * from './Notifications';
+export * from './PanelSettings';
+export * from './PlaceholderHelper';
 export * from './Questions';
 export * from './Sanitize';
 export * from './SeoHelper';
 export * from './SettingsHelper';
 export * from './SlugHelper';
+export * from './SnippetParser';
 export * from './Sorting';
 export * from './StringHelpers';
 export * from './Telemetry';

src/listeners/dashboard/DataListener.ts

@@ -3,11 +3,10 @@ import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
 import { BaseListener } from "./BaseListener";
 import { DashboardCommand } from '../../dashboardWebView/DashboardCommand';
 import { Folders } from '../../commands/Folders';
-import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { existsSync, writeFileSync, mkdirSync } from 'fs';
 import { dirname } from 'path';
 import * as yaml from 'js-yaml';
-import { Logger, Notifications } from '../../helpers';
-import { commands } from 'vscode';
+import { DataFileHelper } from '../../helpers';
 
 
 export class DataListener extends BaseListener {
@@ -57,38 +56,7 @@ export class DataListener extends BaseListener {
    * @param msgData 
    */
   private static async processDataFile(msgData: DataFile) {
-    try {
-      const { file } = msgData;
-      const dataFile = this.getDataFile(file);
-
-      if (msgData.fileType === "yaml") {
-        const entries = yaml.safeLoad(dataFile || "");
-        this.sendMsg(DashboardCommand.dataFileEntries, entries);
-      } else {
-        const jsonData = dataFile ? JSON.parse(dataFile) : [];
-        this.sendMsg(DashboardCommand.dataFileEntries, jsonData);
-      }
-    } catch (ex) {
-      Logger.error(`DataListener::processDataFile: ${(ex as Error).message}`);
-      const btnClick = await Notifications.error(`Something went wrong while processing the data file. Check your file and output log for more information.`, 'Open output');
-
-      if (btnClick && btnClick === 'Open output') {
-        commands.executeCommand(`workbench.panel.output.focus`);
-      }
-    }
-  }
-
-  /**
-   * Retrieve the file data
-   * @param file 
-   * @returns 
-   */
-  private static getDataFile(file: string) {
-    const absPath = Folders.getAbsFilePath(file);
-    if (existsSync(absPath)) {
-      return readFileSync(absPath, 'utf8');
-    }
-
-    return null;
+    const entries = DataFileHelper.process(msgData);
+    this.sendMsg(DashboardCommand.dataFileEntries, entries);
   }
 }

src/listeners/panel/DataListener.ts

@@ -1,3 +1,4 @@
+import { DataFileHelper } from './../../helpers/DataFileHelper';
 import { BlockFieldData } from './../../models/BlockFieldData';
 import { ImageHelper } from './../../helpers/ImageHelper';
 import { Folders } from "../../commands/Folders";
@@ -45,10 +46,16 @@ export class DataListener extends BaseListener {
         break;
       case CommandToCode.generateContentType:
         commands.executeCommand(COMMAND_NAME.generateContentType);
+        break;
       case CommandToCode.addMissingFields:
         commands.executeCommand(COMMAND_NAME.addMissingFields);
+        break;
       case CommandToCode.setContentType:
         commands.executeCommand(COMMAND_NAME.setContentType);
+        break;
+      case CommandToCode.getDataEntries:
+        this.getDataFileEntries(msg.data);
+        break;
     }
   }
 
@@ -101,7 +108,7 @@ export class DataListener extends BaseListener {
       // Get the current content type
       const contentType = ArticleHelper.getContentType(updatedMetadata);
       if (contentType) {
-        ImageHelper.processImageFields(updatedMetadata, contentType.fields)
+        ImageHelper.processImageFields(updatedMetadata, contentType.fields);
       }
     }
 
@@ -278,6 +285,17 @@ export class DataListener extends BaseListener {
     }
   }
 
+  /**
+   * Retrieve the data entries from local data files
+   * @param data 
+   */
+  private static async getDataFileEntries(data: any) {
+    const entries = await DataFileHelper.getById(data);
+    if (entries) {
+      this.sendMsg(Command.dataFileEntries, entries);
+    }
+  }
+
   /**
    * Open a terminal and run the passed command
    * @param command 

src/models/PanelSettings.ts

@@ -48,7 +48,7 @@ export interface ContentType {
   pageBundle?: boolean;
 }
 
-export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields" | "json" | "block" | "file";
+export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields" | "json" | "block" | "file" | "dataFile";
 
 export interface Field {
   title?: string;
@@ -71,6 +71,11 @@ export interface Field {
   // Date fields
   isPublishDate?: boolean;
   isModifiedDate?: boolean;
+
+  // Data file
+  dataFileId?: string;
+  dataFileKey?: string;
+  dataFileValue?: string;
 }
 
 export interface DateInfo {

src/panelWebView/Command.ts

@@ -9,4 +9,5 @@ export enum Command {
   mediaSelectionData = "mediaSelectionData",
   sendMediaUrl = "sendMediaUrl",
   updatePlaceholder = "updatePlaceholder",
+  dataFileEntries = "dataFileEntries",
 }

src/panelWebView/CommandToCode.ts

@@ -37,4 +37,5 @@ export enum CommandToCode {
   generateContentType = "generate-content-type",
   addMissingFields = "add-missing-fields",
   setContentType = "set-content-type",
+  getDataEntries = "get-data-entries",
 }

src/panelWebView/components/Fields/DataFileField.tsx

@@ -0,0 +1,181 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { EventData } from '@estruyf/vscode/dist/models';
+import { ChevronDownIcon, DatabaseIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Command } from '../../Command';
+import { CommandToCode } from '../../CommandToCode';
+import { VsLabel } from '../VscodeComponents';
+import Downshift from 'downshift';
+import { ChoiceButton } from './ChoiceButton';
+
+export interface IDataFileFieldProps {
+  label: string;
+  dataFileId?: string;
+  dataFileKey?: string;
+  dataFileValue?: string;
+  selected: string | string[];
+  multiSelect?: boolean;
+  onChange: (value: string | string[]) => void;
+}
+
+export const DataFileField: React.FunctionComponent<IDataFileFieldProps> = ({ label, dataFileId, dataFileKey, dataFileValue, selected, multiSelect, onChange }: React.PropsWithChildren<IDataFileFieldProps>) => {
+  const [ dataEntries, setDataEntries ] = useState<string[] | null>(null);
+  const [ crntSelected, setCrntSelected ] = React.useState<string | string[] | null>();
+  const dsRef = React.useRef<Downshift<string> | null>(null);
+  
+  const messageListener = (message: MessageEvent<EventData<any>>) => {
+    const { command, data } = message.data;
+
+    if (command === Command.dataFileEntries) {
+      setDataEntries(data || null);
+    }
+  };
+
+  const onValueChange = useCallback((txtValue: string) => {
+    if (multiSelect) {
+      const newValue = [...(crntSelected || []) as string[], txtValue];
+      setCrntSelected(newValue);
+      onChange(newValue);
+    } else {
+      setCrntSelected(txtValue);
+      onChange(txtValue);
+    }
+  }, [crntSelected, multiSelect, onChange]);
+
+  const removeSelected = useCallback((txtValue: string) => {
+    if (multiSelect) {
+      const newValue = [...(crntSelected || [])].filter(v => v !== txtValue);
+      setCrntSelected(newValue);
+      onChange(newValue);
+    } else {
+      setCrntSelected("");
+      onChange("");
+    }
+  }, [crntSelected, multiSelect, onChange]);
+
+  const allChoices = useMemo(() => {
+    if (dataEntries && dataFileKey) {
+      return dataEntries.map((r: any) => ({
+        id: r[dataFileKey],
+        title: r[dataFileValue || dataFileKey] || r[dataFileKey]
+      })).filter(r => r.id);
+    }
+    return [];
+  }, [crntSelected, dataEntries, dataFileKey, dataFileValue]);
+
+  const availableChoices = useMemo(() => {
+    if (allChoices) {
+      return allChoices.filter(choice => {
+        if (choice) {
+          if (typeof crntSelected === 'string') {
+            return crntSelected !== choice.id;
+          } else if (crntSelected instanceof Array) {
+            return crntSelected.indexOf(choice.id) === -1;
+          }
+
+          return true;
+        }
+
+        return false;
+      });
+    }
+    return [];
+  }, [allChoices]);
+
+  const getChoiceValue = useCallback((id: string) => {
+    const choice = allChoices.find(r => r.id === id);
+    if (choice) {
+      return choice.title;
+    }
+    return "";
+  }, [allChoices]);
+
+  useEffect(() => {
+    if (selected) {
+      if (multiSelect) {
+        setCrntSelected(typeof selected === 'string' ? [selected] : selected);
+        return;
+      } else {
+        setCrntSelected(selected instanceof Array ? selected[0] : selected);
+        return;
+      }
+    }
+
+    setCrntSelected(multiSelect ? [] : "");
+  }, [selected, multiSelect]);
+
+  useEffect(() => {
+    if (dataFileId) {
+      Messenger.send(CommandToCode.getDataEntries, dataFileId);
+    }
+  }, [dataFileId]);
+
+  useEffect(() => {
+    Messenger.listen(messageListener);
+
+    return () => {
+      Messenger.unlisten(messageListener);
+    }
+  }, []);
+  
+  return (
+    <div className={`metadata_field`}>
+      <VsLabel>
+        <div className={`metadata_field__label`}>
+          <DatabaseIcon style={{ width: "16px", height: "16px" }} /> <span style={{ lineHeight: "16px"}}>{label}</span>
+        </div>
+      </VsLabel>
+
+      <Downshift 
+        ref={dsRef}
+        onSelect={(selected) => onValueChange(selected || "")}
+        itemToString={item => (item ? item : '')}>
+        {({ getToggleButtonProps, getItemProps, getMenuProps, isOpen, getRootProps }) => (
+          <div {...getRootProps(undefined, {suppressRefError: true})} className={`metadata_field__choice`}>
+            <button 
+              {...getToggleButtonProps({ 
+                className: `metadata_field__choice__toggle`,
+                disabled: availableChoices.length === 0 
+              })}>
+              <span>{`Select ${label}`}</span>
+              <ChevronDownIcon className="icon" />
+            </button>
+
+            <ul className={`metadata_field__choice_list ${isOpen ? "open" : "closed" }`} {...getMenuProps()}>
+              { 
+                isOpen ? availableChoices.map((choice, index) => (
+                  <li {...getItemProps({ 
+                    key: choice.id, 
+                    index,
+                    item: choice.id,
+                  })}>
+                    { choice.title || <span className={`metadata_field__choice_list__item`}>Clear value</span> }
+                  </li>
+                )) : null
+              }
+            </ul>
+          </div>
+        )}
+      </Downshift>
+
+      {
+        crntSelected instanceof Array ? crntSelected.map((value: string) => (
+          <ChoiceButton 
+            key={value} 
+            value={value} 
+            title={getChoiceValue(value)} 
+            onClick={removeSelected} />
+        )) : (
+          crntSelected && (
+            <ChoiceButton 
+              key={crntSelected} 
+              value={crntSelected} 
+              title={getChoiceValue(crntSelected)} 
+              onClick={removeSelected} />
+          )
+        )
+      }
+    </div>
+  );
+};

src/panelWebView/components/Fields/WrapperField.tsx

@@ -1,9 +1,9 @@
 
 
+import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { DateHelper } from '../../../helpers/DateHelper';
-import { MessageHelper } from '../../../helpers/MessageHelper';
 import { BlockFieldData, Field, PanelSettings } from '../../../models';
 import { Command } from '../../Command';
 import { CommandToCode } from '../../CommandToCode';
@@ -17,6 +17,7 @@ import { IMetadata } from '../Metadata';
 import { TagPicker } from '../TagPicker';
 import { VsLabel } from '../VscodeComponents';
 import { ChoiceField } from './ChoiceField';
+import { DataFileField } from './DataFileField';
 import { DateTimeField } from './DateTimeField';
 import { DraftField } from './DraftField';
 import { FileField } from './FileField';
@@ -98,7 +99,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
     // Check if the field value contains a placeholder
     if (value && typeof value === "string" && value.includes(`{{`) && value.includes(`}}`)) {
       window.addEventListener('message', listener);
-      MessageHelper.sendMessage(CommandToCode.updatePlaceholder, {
+      Messenger.send(CommandToCode.updatePlaceholder, {
         field: field.name,
         title: metadata["title"],
         value
@@ -346,6 +347,19 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
           onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
       </FieldBoundary>
     );
+  } else if (field.type === 'dataFile') {
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <DataFileField
+          label={field.title || field.name}
+          dataFileId={field.dataFileId}
+          dataFileKey={field.dataFileKey}
+          dataFileValue={field.dataFileValue}
+          selected={fieldValue as string}
+          multiSelect={field.multiple}
+          onChange={(value => onSendUpdate(field.name, value, parentFields))} />
+      </FieldBoundary>
+    );
   } else {
     console.warn(`Unknown field type: ${field.type}`);
     return null;