#31 - implementation of auto-update

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## [2.3.0] - 2020-08-XX
+
+- [#31](https://github.com/estruyf/vscode-front-matter/issues/31): Automatically update the last modification date of the file when performing changes
+
 ## [2.2.0] - 2020-08-06
 
 - [#28](https://github.com/estruyf/vscode-front-matter/issues/28): Align the file its name with the article slug

README.md

@@ -193,7 +193,7 @@ Update the `date` property of the current article/post/... to the current date &
 
 **Front Matter: Set lastmod date**
 
-Update the `lastmod` (last modified) property of the current article/post/... to the current date & time.
+Update the `lastmod` (last modified) property of the current article/post/... to the current date & time. By setting the `frontMatter.content.autoUpdateDate` setting, it can be done automatically when performing changes to your markdown files.
 
 > **note**: Uses the same date format settings key as current date: `frontMatter.taxonomy.dateFormat`.
 
@@ -355,6 +355,16 @@ This array of folders defines where the extension can easily create new content
 
 > **Important**: This setting can be configured by right-clicking on a folder in the VSCode file explorer view and clicking on the `Front Matter: Register folder` menu item.
 
+### `frontMatter.content.autoUpdateDate`
+
+Specify if you want to automatically update the modification date of your markdown page when doing changes to it. Default: `false`.
+
+```json
+{
+  "frontMatter.content.autoUpdateDate": false
+}
+```
+
 ## Feedback / issues / ideas
 
 Please submit them via creating an issue in the project repository: [issue list](https://github.com/estruyf/vscode-front-matter/issues).

package.json

@@ -94,6 +94,11 @@
 					"default": "lastmod",
 					"description": "Specifies the modified date field name to use in your Front Matter"
 				},
+				"frontMatter.content.autoUpdateDate": {
+					"type": "boolean",
+					"default": false,
+					"description": "Specify if you want to automatically update the modified date of your article/page."
+				},
 				"frontMatter.taxonomy.tags": {
 					"type": "array",
 					"description": "Specifies the tags which can be used in the Front Matter"

src/commands/Article.ts

@@ -126,16 +126,17 @@ export class Article {
       return;
     }
 
+    const cloneArticle = Object.assign({}, article);
     const dateFormat = config.get(SETTING_DATE_FORMAT) as string;
     const dateField = config.get(SETTING_MODIFIED_FIELD) as string || "lastmod";
     try {
       if (dateFormat && typeof dateFormat === "string") {
-        article.data[dateField] = format(new Date(), dateFormat);
+        cloneArticle.data[dateField] = format(new Date(), dateFormat);
       } else {
-        article.data[dateField] = new Date().toISOString();
+        cloneArticle.data[dateField] = new Date().toISOString();
       }
 
-      ArticleHelper.update(editor, article);
+      ArticleHelper.update(editor, cloneArticle);
     } catch (e) {
       Notifications.error(`Something failed while parsing the date format. Check your "${CONFIG_KEY}${SETTING_DATE_FORMAT}" setting.`);
       console.log(e.message);

src/commands/StatusListener.ts

@@ -1,8 +1,9 @@
-import { SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH } from './../constants/settings';
+import { SETTING_AUTO_UPDATE_DATE, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH } from './../constants/settings';
 import * as vscode from 'vscode';
 import { CONFIG_KEY } from '../constants';
 import { ArticleHelper, SeoHelper } from '../helpers';
 import { ExplorerView } from '../webview/ExplorerView';
+import { Article } from '.';
 
 export class StatusListener {
   
@@ -15,6 +16,7 @@ export class StatusListener {
   public static async verify(frontMatterSB: vscode.StatusBarItem, collection: vscode.DiagnosticCollection) {
     const draftMsg = "in draft";
     const publishMsg = "to publish";
+    const config = vscode.workspace.getConfiguration(CONFIG_KEY);
     
     let editor = vscode.window.activeTextEditor;
     if (editor && ArticleHelper.isMarkdownDile()) {
@@ -51,6 +53,11 @@ export class StatusListener {
             SeoHelper.checkLength(editor, collection, article, fieldName, descLength);
           }
         }
+
+        const autoUpdate = config.get(SETTING_AUTO_UPDATE_DATE);
+        if (autoUpdate) {
+          Article.setLastModifiedDate();
+        }
         
         const panel = ExplorerView.getInstance();
         if (panel && panel.visible) {

src/constants/settings.ts

@@ -7,6 +7,7 @@ export const SETTING_TAXONOMY_CATEGORIES = "taxonomy.categories";
 export const SETTING_DATE_FORMAT = "taxonomy.dateFormat";
 export const SETTING_DATE_FIELD = "taxonomy.dateField";
 export const SETTING_MODIFIED_FIELD = "taxonomy.modifiedField";
+export const SETTING_AUTO_UPDATE_DATE = "content.autoUpdateDate";
 
 export const SETTING_SLUG_PREFIX = "taxonomy.slugPrefix";
 export const SETTING_SLUG_SUFFIX = "taxonomy.slugSuffix";

src/models/PanelSettings.ts

@@ -7,6 +7,7 @@ export interface PanelSettings {
   freeform: boolean;
   scripts: CustomScript[];
   isInitialized: boolean;
+  modifiedDateUpdate: boolean;
   contentInfo: FolderInfo[] | null;
 }
 

src/viewpanel/CommandToCode.ts

@@ -15,4 +15,5 @@ export enum CommandToCode {
   runCustomScript = "custom-script",
   initProject = "init-project",
   createContent = "create-content",
+  updateModifiedUpdating = "update-modified-updates",
 }

src/viewpanel/ViewPanel.tsx

@@ -3,6 +3,7 @@ import { CommandToCode } from './CommandToCode';
 import { Actions } from './components/Actions';
 import { BaseView } from './components/BaseView';
 import { Collapsible } from './components/Collapsible';
+import { GlobalSettings } from './components/GlobalSettings';
 import { BugIcon } from './components/Icons/BugIcon';
 import { FileIcon } from './components/Icons/FileIcon';
 import { FolderOpenedIcon } from './components/Icons/FolderOpenedIcon';
@@ -50,6 +51,8 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
   return (
     <div className="frontmatter">
       <div className={`ext_actions`}>
+        <GlobalSettings settings={settings} />
+
         {
           settings && settings.seo && <SeoStatus seo={settings.seo} data={metadata} />
         }

src/viewpanel/components/BaseView.tsx

@@ -3,6 +3,7 @@ import { PanelSettings } from '../../models';
 import { CommandToCode } from '../CommandToCode';
 import { MessageHelper } from '../helper/MessageHelper';
 import { Collapsible } from './Collapsible';
+import { GlobalSettings } from './GlobalSettings';
 
 export interface IBaseViewProps {
   settings: PanelSettings | undefined;
@@ -21,6 +22,8 @@ export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings}: Re
   return (
     <div className="frontmatter">
       <div className={`ext_actions`}>
+        <GlobalSettings settings={settings} />
+        
         <Collapsible title="Actions">
           <div className={`base__actions`}>
             <button onClick={initProject} disabled={settings?.isInitialized}>Initialize project</button>

src/viewpanel/components/GlobalSettings.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { PanelSettings } from '../../models';
+import { CommandToCode } from '../CommandToCode';
+import { MessageHelper } from '../helper/MessageHelper';
+import { Collapsible } from './Collapsible';
+import { VsCheckbox } from './VscodeComponents';
+
+export interface IGlobalSettingsProps {
+  settings: PanelSettings | undefined;
+}
+
+export const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings}: React.PropsWithChildren<IGlobalSettingsProps>) => {
+  const { modifiedDateUpdate } = settings || {};
+
+  const onCheck = () => {
+    MessageHelper.sendMessage(CommandToCode.updateModifiedUpdating, !modifiedDateUpdate);
+  };
+
+  return (
+    <>
+      <Collapsible title="Global settings">
+        <div className={`base__actions`}>
+          <VsCheckbox label="Auto-update modified date" checked={modifiedDateUpdate} onClick={onCheck} />
+        </div>
+      </Collapsible>
+    </>
+  );
+};

src/viewpanel/components/VscodeComponents.ts

@@ -6,4 +6,5 @@ export const VsTableHeaderCell = wrapWc(`vscode-table-header-cell`);
 export const VsTableBody = wrapWc(`vscode-table-body`);
 export const VsTableRow = wrapWc(`vscode-table-row`);
 export const VsTableCell = wrapWc(`vscode-table-cell`);
-export const VsCollapsible = wrapWc(`vscode-collapsible`);
+export const VsCollapsible = wrapWc(`vscode-collapsible`);
+export const VsCheckbox = wrapWc(`vscode-checkbox`);

src/viewpanel/index.tsx

@@ -10,6 +10,7 @@ import '@bendera/vscode-webview-elements/dist/vscode-table-body';
 import '@bendera/vscode-webview-elements/dist/vscode-table-row';
 import '@bendera/vscode-webview-elements/dist/vscode-table-cell';
 import '@bendera/vscode-webview-elements/dist/vscode-collapsible';
+import '@bendera/vscode-webview-elements/dist/vscode-checkbox';
 
 declare const acquireVsCodeApi: <T = unknown>() => {
   getState: () => T;

src/webview/ExplorerView.ts

@@ -1,5 +1,5 @@
 import { Template } from './../commands/Template';
-import { SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SLUG_UPDATE_FILE_NAME } from './../constants/settings';
+import { SETTING_AUTO_UPDATE_DATE, SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SLUG_UPDATE_FILE_NAME } from './../constants/settings';
 import * as os from 'os';
 import { PanelSettings, CustomScript } from './../models/PanelSettings';
 import { CancellationToken, Disposable, Uri, Webview, WebviewView, WebviewViewProvider, WebviewViewResolveContext, window, workspace, commands, env as vscodeEnv } from "vscode";
@@ -146,6 +146,9 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         case CommandToCode.createContent:
           await commands.executeCommand(COMMAND_NAME.createContent);
           break;
+        case CommandToCode.updateModifiedUpdating:
+          this.updateModifiedUpdating(msg.data || false);
+          break;
       }
     });
 
@@ -262,7 +265,8 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         freeform: config.get(SETTING_PANEL_FREEFORM),
         scripts: config.get(SETTING_CUSTOM_SCRIPTS),
         isInitialized: await Template.isInitialized(),
-        contentInfo: await Folders.getInfo() || null
+        contentInfo: await Folders.getInfo() || null,
+        modifiedDateUpdate: config.get(SETTING_AUTO_UPDATE_DATE) || false
       } as PanelSettings
     });
   }
@@ -376,6 +380,12 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     }
   }
 
+  private async updateModifiedUpdating(autoUpdate: boolean) {
+    const config = workspace.getConfiguration(CONFIG_KEY);
+    await config.update(SETTING_AUTO_UPDATE_DATE, autoUpdate);
+    this.getSettings();
+  }
+
   /**
    * Post data to the panel
    * @param msg