web: allow editing note's created date from properties panel

apps/mobile/app/components/properties/date-meta.tsx

@@ -0,0 +1,130 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useState } from "react";
+import { View } from "react-native";
+import { useThemeColors } from "@notesnook/theme";
+import { AppFontSize } from "../../utils/size";
+import Paragraph from "../ui/typography/paragraph";
+import { getFormattedDate } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
+import { db } from "../../common/database";
+import { Item, Note } from "@notesnook/core";
+import AppIcon from "../ui/AppIcon";
+export const DateMeta = ({ item }: { item: Item }) => {
+  const { colors, isDark } = useThemeColors();
+  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+  const [dateCreated, setDateCreated] = useState(item.dateCreated);
+
+  function getDateMeta() {
+    let keys = Object.keys(item);
+    if (keys.includes("dateEdited"))
+      keys.splice(
+        keys.findIndex((k) => k === "dateModified"),
+        1
+      );
+    return keys.filter((key) => key.startsWith("date") && key !== "date");
+  }
+
+  const renderItem = (key: string) =>
+    !item[key as keyof Item] ? null : (
+      <View
+        key={key}
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2
+        }}
+      >
+        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+          {strings.dateDescFromKey(
+            key as
+              | "dateDeleted"
+              | "dateEdited"
+              | "dateModified"
+              | "dateCreated"
+              | "dateUploaded"
+          )}
+        </Paragraph>
+        <Paragraph
+          size={AppFontSize.xs}
+          color={colors.secondary.paragraph}
+          onPress={
+            item.type !== "note"
+              ? undefined
+              : () => {
+                  setIsDatePickerVisible(true);
+                }
+          }
+        >
+          {getFormattedDate(
+            key === "dateCreated"
+              ? dateCreated
+              : (item[key as keyof Item] as string),
+            "date-time"
+          )}
+          {key === "dateCreated" && item.type === "note" ? (
+            <>
+              {" "}
+              <AppIcon name="pencil" size={AppFontSize.md} />
+            </>
+          ) : null}
+        </Paragraph>
+      </View>
+    );
+
+  return (
+    <>
+      {item.type === "note" ? (
+        <DateTimePickerModal
+          isVisible={isDatePickerVisible}
+          mode="datetime"
+          onConfirm={async (date: Date) => {
+            await db.notes.add({
+              id: item.id,
+              dateCreated: date.getTime()
+            });
+            setDateCreated(date.getTime());
+            setIsDatePickerVisible(false);
+          }}
+          onCancel={() => {
+            setIsDatePickerVisible(false);
+          }}
+          maximumDate={new Date((item as Note).dateEdited)}
+          isDarkModeEnabled={isDark}
+          is24Hour={db.settings.getTimeFormat() === "24-hour"}
+          date={new Date(dateCreated)}
+        />
+      ) : null}
+
+      <View
+        style={{
+          borderTopWidth: 1,
+          borderTopColor: colors.primary.border,
+          paddingHorizontal: DefaultAppStyles.GAP,
+          paddingTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+        }}
+      >
+        {getDateMeta().map(renderItem)}
+      </View>
+    </>
+  );
+};

apps/web/__e2e__/models/note-properties.model.ts

@@ -30,6 +30,7 @@ import {
   iterateList
 } from "./utils";
 import { SessionHistoryItemModel } from "./session-history-item-model";
+import dayjs from "dayjs";
 
 abstract class BaseProperties {
   protected readonly page: Page;
@@ -222,6 +223,42 @@ export class NotePropertiesModel extends BaseProperties {
     await this.close();
     return history;
   }
+
+  async getDateCreated() {
+    await this.open();
+    const dateCreated = await this.generalSection
+      .locator(getTestId("date-created"))
+      .textContent();
+    await this.close();
+    return dateCreated;
+  }
+
+  async editDateCreated(newDateCreated: number) {
+    await this.open();
+
+    const editIcon = this.page.locator(getTestId("edit-date-created"));
+    await editIcon.click();
+
+    const editDateCreatedDialog = this.page.locator(
+      getTestId("edit-note-creation-date-dialog")
+    );
+    await editDateCreatedDialog.waitFor({ state: "visible" });
+
+    const dateInput = editDateCreatedDialog.locator(
+      getTestId("date-created-input")
+    );
+    const timeInput = editDateCreatedDialog.locator(
+      getTestId("time-created-input")
+    );
+
+    const date = new Date(newDateCreated);
+    await dateInput.fill(dayjs(date).format("DD-MM-YYYY"));
+    await timeInput.fill(dayjs(date).format("hh:mm A"));
+
+    await confirmDialog(editDateCreatedDialog);
+
+    await this.close();
+  }
 }
 
 export class NoteContextMenuModel extends BaseProperties {

apps/web/__e2e__/notes.test.ts

@@ -20,7 +20,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
 import {
-  getTestId,
   groupByOptions,
   NOTE,
   orderByOptions,
@@ -447,3 +446,16 @@ test("archived note shouldn't appear in search results", async ({ page }) => {
   const searchedNote = await notes.findNote(NOTE);
   expect(searchedNote).toBeUndefined();
 });
+
+test("edit note creation date in properties panel", async ({ page }) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note = await notes.createNote(NOTE);
+
+  const date = new Date("2020-01-15T10:30:00Z");
+  await note?.properties.editDateCreated(date.valueOf());
+
+  const dateCreated = await note?.properties.getDateCreated();
+  expect(dateCreated).toBe("15-01-2020 03:30 PM");
+});

apps/web/src/components/properties/index.tsx

@@ -24,17 +24,17 @@ import {
   Unlock,
   Readonly,
   SyncOff,
-  ArrowLeft,
   Circle,
   Checkmark,
   ChevronDown,
   ChevronRight,
   LinkedTo,
   ReferencedIn as ReferencedInIcon,
   Note as NoteIcon,
-  Archive
+  Archive,
+  Edit
 } from "../icons";
-import { Box, Button, Flex, Text, FlexProps } from "@theme-ui/components";
+import { Button, Flex, Text, FlexProps } from "@theme-ui/components";
 import {
   useEditorStore,
   ReadonlyEditorSession,
@@ -45,12 +45,12 @@ import { useStore as useAppStore } from "../../stores/app-store";
 import { useStore as useAttachmentStore } from "../../stores/attachment-store";
 import { store as noteStore } from "../../stores/note-store";
 import Toggle from "./toggle";
+import { EditNoteCreationDateDialog } from "../../dialogs/edit-note-creation-date-dialog";
 import ScrollContainer from "../scroll-container";
 import {
   getFormattedDate,
   usePromise,
   ResolvedItem,
-  useResolvedItem,
   useUnresolvedItem
 } from "@notesnook/common";
 import { ScopedThemeProvider } from "../theme-provider";
@@ -59,15 +59,13 @@ import { VirtualizedList } from "../virtualized-list";
 import { SessionItem } from "../session-item";
 import {
   ContentBlock,
-  InternalLink,
   Note,
   VirtualizedGrouping,
   createInternalLink,
   highlightInternalLinks
 } from "@notesnook/core";
 import { VirtualizedTable } from "../virtualized-table";
 import { TextSlice } from "@notesnook/core";
-import { TITLE_BAR_HEIGHT } from "../title-bar";
 import { strings } from "@notesnook/intl";
 
 const tools = [
@@ -212,13 +210,39 @@ function EditorProperties(props: EditorPropertiesProps) {
                     >
                       {item.label}
                     </Text>
-                    <Text
-                      className="selectable"
-                      variant="subBody"
-                      sx={{ fontSize: "body", flexShrink: 0 }}
-                    >
-                      {item.value(session.note[item.key])}
-                    </Text>
+
+                    {item.key === "dateCreated" ? (
+                      <Flex sx={{ alignItems: "center", gap: 1 }}>
+                        <Text
+                          data-test-id="date-created"
+                          className="selectable"
+                          variant="subBody"
+                          sx={{ fontSize: "body", flexShrink: 0 }}
+                        >
+                          {item.value(session.note[item.key])}
+                        </Text>
+                        <Edit
+                          size={14}
+                          sx={{ cursor: "pointer", color: "icon" }}
+                          onClick={() => {
+                            EditNoteCreationDateDialog.show({
+                              noteId: session.note.id,
+                              dateCreated: session.note.dateCreated,
+                              dateEdited: session.note.dateEdited
+                            });
+                          }}
+                          data-test-id="edit-date-created"
+                        />
+                      </Flex>
+                    ) : (
+                      <Text
+                        className="selectable"
+                        variant="subBody"
+                        sx={{ fontSize: "body", flexShrink: 0 }}
+                      >
+                        {item.value(session.note[item.key])}
+                      </Text>
+                    )}
                   </Flex>
                 ))}
                 {session.type === "deleted" ||