Add #68 date time settings per note overview

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Fix: #67 HTML image tags are not recognized for `image` option
 - Add: Option to disable automatic update of a note overview #57
 - Add: Option to configure the `status` field per note overview #66 @aiosk
+- Add: Option to configure the date and timeformat per note overview #68 @aiosk
 
 ## v1.6.0 (2022-12-26)
 

README.md

@@ -23,6 +23,7 @@ A note overview is created based on the defined search and the specified fields.
     - [fields](#fields)
     - [sort](#sort)
     - [alias](#alias)
+    - [datetime](#datetime)
     - [image](#image)
     - [excerpt](#excerpt)
     - [details](#details)
@@ -184,6 +185,35 @@ Syntax: `<field> AS <new field name>`, multiple fields comma seperated.
 alias: todo_due AS Due Date, notebook AS Folder
 ```
 
+### datetime
+
+Customize datetime format for a single overview.
+
+```yml
+datetime:
+  date: "YYYY-MM-DD"
+  time: "HH:mm"
+```
+
+- `date`: Set date format. Default is Joplin global settings on `Tools` > `Options` > `General` > `Date format`
+- `time`: Set time format. Default is Joplin global settings on `Tools` > `Options` > `General` > `Time format`
+
+Complete list of format can be found [here](https://momentjs.com/docs/#/displaying/format/).
+
+You can also set datetime to [humanize](https://momentjs.com/docs/#/durations/humanize/) format, to display a length of time. You can do that by adding `humanize` settings.
+
+```yml
+datetime:
+  date: "YYYY-MM-DD"
+  time: "HH:mm"
+  humanize:
+    enabled: [true | false]
+    withSuffix: [true | false]
+```
+
+- `enabled` : set `true` to enable humanize format. Default is `false`.
+- `withSuffix` : set `false`, to remove oriented duration (ex: `a month`). Default is `true`, it will add oriented duration (ex: `in a month`, `a month ago`).
+
 ### image
 
 This allows you to control the image displayed in the `image` field.

__test__/data/options/datetime.yml

@@ -0,0 +1,3 @@
+datetime:
+  date: "DD/MM/YYYY"
+  time: ""

__test__/data/options/datetime_humanize.yml

@@ -0,0 +1,5 @@
+datetime:
+  date: "DD/MM/YYYY"
+  time: "HH:mm"
+  humanize:
+    enabled: true

__test__/data/options/datetime_humanize_withoutSuffix.yml

@@ -0,0 +1,6 @@
+datetime:
+  date: "DD/MM/YYYY"
+  time: "HH:mm"
+  humanize:
+    enabled: true
+    withSuffix: false

__test__/datetime.test.ts

@@ -0,0 +1,102 @@
+import { noteoverview, logging } from "../src/noteoverview";
+import { getOptionsFromFile } from "./tools";
+
+describe("Datetime function", function () {
+  beforeEach(async () => {
+    jest.spyOn(logging, "silly").mockImplementation(() => {});
+    jest.spyOn(logging, "verbose").mockImplementation(() => {});
+    jest.spyOn(logging, "info").mockImplementation(() => {});
+  });
+
+  afterEach(async () => {
+    jest.spyOn(logging, "silly").mockReset();
+    jest.spyOn(logging, "verbose").mockReset();
+    jest.spyOn(logging, "info").mockReset();
+  });
+
+  it(`empty time format`, async () => {
+    const options = getOptionsFromFile("datetime");
+    const optionsObject = await noteoverview.getOptions(options);
+
+    const dateFormat = "DD/MM/YYYY";
+    const timeFormat = "";
+
+    const testDate = new Date();
+    const epoch = testDate.getTime();
+    const expectedDatetimeFormated = await noteoverview.getDateFormated(
+      epoch,
+      dateFormat,
+      timeFormat
+    );
+
+    const fields = {
+      todo_due: epoch,
+    };
+    const result = await noteoverview.getFieldValue(
+      "todo_due",
+      fields,
+      optionsObject
+    );
+    expect(result).toBe(`${expectedDatetimeFormated}`);
+  });
+
+  it(`humanize format`, async () => {
+    const options = getOptionsFromFile("datetime_humanize");
+    const optionsObject = await noteoverview.getOptions(options);
+
+    const dateFormat = "DD/MM/YYYY";
+    const timeFormat = "HH:mm";
+
+    const testDate = new Date();
+    testDate.setDate(new Date().getDate() + 1);
+    const epochTomorrow = testDate.getTime();
+    const expectedDatetimeFormated = await noteoverview.getDateFormated(
+      epochTomorrow,
+      dateFormat,
+      timeFormat
+    );
+
+    const fields = {
+      todo_due: epochTomorrow,
+    };
+    const result = await noteoverview.getFieldValue(
+      "todo_due",
+      fields,
+      optionsObject
+    );
+
+    expect(result).toBe(
+      `<font title=\"${expectedDatetimeFormated}\">in a day</font>`
+    );
+  });
+
+  it(`humanize without suffix format`, async () => {
+    const options = getOptionsFromFile("datetime_humanize_withoutSuffix");
+    const optionsObject = await noteoverview.getOptions(options);
+
+    const dateFormat = "DD/MM/YYYY";
+    const timeFormat = "HH:mm";
+
+    const testDate = new Date();
+    testDate.setDate(new Date().getDate() + 1);
+    const epochTomorrow = testDate.getTime();
+    const expectedDatetimeFormated = await noteoverview.getDateFormated(
+      epochTomorrow,
+      dateFormat,
+      timeFormat
+    );
+
+    const fields = {
+      todo_due: epochTomorrow,
+    };
+    const result = await noteoverview.getFieldValue(
+      "todo_due",
+      fields,
+      optionsObject
+    );
+
+    expect(result).toBe(
+      `<font title=\"${expectedDatetimeFormated}\">a day</font>`
+    );
+  });
+});

src/noteoverview.ts

@@ -177,10 +177,29 @@ export namespace noteoverview {
   ): Promise<string> {
     if (epoch !== 0) {
       const dateObject = new Date(epoch);
-      const dateString =
-        moment(dateObject.getTime()).format(dateFormat) +
-        " " +
-        moment(dateObject.getTime()).format(timeFormat);
+      const date: string = moment(dateObject.getTime()).format(dateFormat);
+      const newTimeFormat: string = timeFormat === "" ? "[]" : timeFormat;
+      const time: string = moment(dateObject.getTime()).format(newTimeFormat);
+
+      const datetime: string[] = [date];
+      if (time !== "") {
+        datetime.push(time);
+      }
+
+      return datetime.join(" ");
+    } else {
+      return "";
+    }
+  }
+  export async function getDateHumanized(
+    epoch: number,
+    withSuffix: boolean
+  ): Promise<string> {
+    if (epoch !== 0) {
+      const dateObject = new Date(epoch);
+      const dateString = moment
+        .duration(moment(dateObject.getTime()).diff(moment()))
+        .humanize(withSuffix);
 
       return dateString;
     } else {
@@ -846,6 +865,18 @@ export namespace noteoverview {
 
     settings.link = overviewSettings["link"] ? overviewSettings["link"] : null;
 
+    settings.datetimeSettings = await mergeObject(
+      {
+        date: globalSettings.dateFormat,
+        time: globalSettings.timeFormat,
+        humanize: {
+          enabled: false,
+          withSuffix: true,
+        },
+      },
+      overviewSettings["datetime"]
+    );
+
     return settings;
   }
 
@@ -1184,9 +1215,20 @@ export namespace noteoverview {
         const dateObject = new Date(fields[field]);
         value = await noteoverview.getDateFormated(
           dateObject.getTime(),
-          globalSettings.dateFormat,
-          globalSettings.timeFormat
+          options.datetimeSettings.date,
+          options.datetimeSettings.time
         );
+
+        const htmlAttr: string[] = [];
+        if (value !== "" && options.datetimeSettings.humanize.enabled) {
+          htmlAttr.push(`title="${value}"`);
+
+          value = await noteoverview.getDateHumanized(
+            dateObject.getTime(),
+            options.datetimeSettings.humanize.withSuffix
+          );
+        }
+
         switch (field) {
           case "todo_due":
           case "todo_completed":
@@ -1197,10 +1239,14 @@ export namespace noteoverview {
               field
             );
             if (color !== "") {
-              value = `<font color="${color}">${value}</font>`;
+              htmlAttr.push(`color="${color}"`);
             }
             break;
         }
+
+        if (htmlAttr.length) {
+          value = `<font ${htmlAttr.join(" ")}>${value}</font>`;
+        }
         break;
       case "status":
         if (!!fields["is_todo"]) {

src/type.ts

@@ -13,6 +13,7 @@ type OverviewOptions = {
   listview: OverviewListview;
   escapeForTable: boolean;
   link: OverviewOptionsLink;
+  datetimeSettings: OverviewOptionsDatetime;
 };
 
 type OverviewOptionsLink = {
@@ -38,4 +39,15 @@ type OverviewListview = {
   suffix: string;
 };
 
+type OverviewOptionsDatetime = {
+  date: string;
+  time: string;
+  humanize: OverviewOptionsDatetimeHumanize;
+};
+
+type OverviewOptionsDatetimeHumanize = {
+  enabled: boolean;
+  withSuffix: boolean;
+};
+
 export { OverviewOptions };