Merge branch '46-vs-improve-css-of-calendar-datepicker'

RafaelGB · RafaelGB · commit 2263e3220449 · 2022-05-18T21:03:06.000+02:00
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
 		"react-popper": "2.3.0",
 		"react-table": "7.7.0",
 		"react-window": "1.8.7",
-		"react-datepicker": "4.7.0",
+		"react-datepicker": "4.8.0",
 		"regenerator-runtime": "0.13.9",
 		"luxon": "2.4.0"
 	}
diff --git a/src/cdm/FolderModel.ts b/src/cdm/FolderModel.ts
@@ -123,5 +123,6 @@ export type NoteContentAction = {
     file: TFile,
     action: string,
     regexp: RegExp,
+    content?: string,
     newValue?: string
 }
diff --git a/src/components/HeaderMenu.tsx b/src/components/HeaderMenu.tsx
@@ -218,7 +218,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
         setExpanded(false);
       },
       icon: <CalendarIcon />,
-      label: DataTypes.CALENDAR,
+      label: MetadataLabels.CALENDAR,
     },
     {
       onClick: (e: any) => {
diff --git a/src/components/portals/CalendarPortal.tsx b/src/components/portals/CalendarPortal.tsx
@@ -6,6 +6,7 @@ import DatePicker from "react-datepicker";
 import NoteInfo from "services/NoteInfo";
 import { Portal } from "@material-ui/core";
 import { CalendarProps } from "cdm/DatabaseModel";
+import { c } from "helpers/StylesHelper";
 
 const CalendarPortal = (calendarProps: CalendarProps) => {
   const { column, cellProperties } = calendarProps;
@@ -15,14 +16,14 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
   // Selector popper state
   /** state of cell value */
   const { contextValue, setContextValue } = useContext(CellContext);
-
+  const [showDatePicker, setShowDatePicker] = useState(false);
   /** Note info of current Cell */
   const note: NoteInfo = (cellProperties.row.original as any).note;
-  const [calendarState, setCalendarState] = useState(
-    DateTime.isDateTime(contextValue.value)
-      ? contextValue.value.toJSDate()
-      : null
-  );
+
+  function handleOnClick(event: any) {
+    event.preventDefault();
+    setShowDatePicker(true);
+  }
 
   function handleCalendarChange(date: Date) {
     const newValue = DateTime.fromJSDate(date);
@@ -31,33 +32,43 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
       type: ActionTypes.UPDATE_CELL,
       file: note.getFile(),
       key: column.key,
-      value: DateTime.fromJSDate(date).toFormat("yyyy-MM-dd"),
+      value: newValue.toFormat("yyyy-MM-dd"),
       row: cellProperties.row,
       columnId: column.id,
     });
 
-    setCalendarState(date);
     setContextValue({
       value: newValue,
       update: true,
     });
+    setShowDatePicker(false);
   }
 
   const CalendarContainer = (containerProps: any) => {
     const el = document.getElementById("popper-container");
     return <Portal container={el}>{containerProps.children}</Portal>;
   };
 
-  return (
-    <div className="data-input calendar">
-      <DatePicker
-        dateFormat="yyyy-MM-dd"
-        selected={calendarState}
-        onChange={handleCalendarChange}
-        popperContainer={CalendarContainer}
-        placeholderText="Pick a date..."
-      />
-    </div>
+  return showDatePicker ? (
+    <DatePicker
+      dateFormat="yyyy-MM-dd"
+      selected={
+        DateTime.isDateTime(contextValue.value)
+          ? contextValue.value.toJSDate()
+          : null
+      }
+      onChange={handleCalendarChange}
+      popperContainer={CalendarContainer}
+      onBlur={() => setShowDatePicker(false)}
+      autoFocus
+      className="data-input calendar"
+    />
+  ) : (
+    <span className={`data-input ${c("calendar")}`} onClick={handleOnClick}>
+      {DateTime.isDateTime(contextValue.value)
+        ? contextValue.value.toFormat("yyyy-MM-dd")
+        : "Pick a date..."}
+    </span>
   );
 };
 
diff --git a/src/components/reducers/DatabaseDispatch.tsx b/src/components/reducers/DatabaseDispatch.tsx
@@ -11,7 +11,7 @@ import { TableColumn, TableDataType, RowDataType } from "cdm/FolderModel";
 import { LOGGER } from "services/Logger";
 import { ActionType } from "react-table";
 import { VaultManagerDB } from "services/FileManagerService";
-import { moveFile, updateRowFile } from "helpers/VaultManagement";
+import { moveFile, updateRowFileProxy } from "helpers/VaultManagement";
 import { randomColor } from "helpers/Colors";
 import {
   DatabaseColumn,
@@ -110,7 +110,7 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
 
           await Promise.all(
             state.data.map(async (row: RowDataType) => {
-              await updateRowFile(
+              await updateRowFileProxy(
                 row.note.getFile(),
                 action.columnId,
                 action.newKey,
@@ -315,7 +315,7 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
       if (state.view.diskConfig.yaml.config.remove_field_when_delete_column) {
         Promise.all(
           state.data.map(async (row: RowDataType) => {
-            updateRowFile(
+            updateRowFileProxy(
               row.note.getFile(),
               action.key,
               undefined, // delete does not need this field
@@ -382,13 +382,14 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
         (column) => column.id === action.columnId
       );
       // Save on disk
-      updateRowFile(
+      updateRowFileProxy(
         action.file,
         action.key,
         action.value,
         state,
         UpdateRowOptions.COLUMN_VALUE
       );
+
       const update_option_cell_column_key =
         state.columns[update_cell_index].key;
       return update(state, {
diff --git a/src/helpers/Constants.ts b/src/helpers/Constants.ts
@@ -41,7 +41,8 @@ export const MetadataLabels = Object.freeze({
   ADD_COLUMN: '+',
   CREATED: 'Created',
   MODIFIED: 'Modified',
-  CALENDAR_TIME: 'Calendar time',
+  CALENDAR: 'Date',
+  CALENDAR_TIME: 'Datetime',
 });
 
 export const MetadataDatabaseColumns = Object.freeze({
@@ -110,13 +111,16 @@ export const DatabaseFrontmatterOptions = Object.freeze({
     '---',
     '',
     '<%%',
+    'name: new database',
+    'description: new description',
     'columns:',
     ' column1:',
     '  input: text',
     '  key: column1',
     '  accessor: column1',
     '  label: Column 1',
     '  position: 0',
+    'filters:',
   ].join('\n')
 });
 
diff --git a/src/helpers/VaultManagement.ts b/src/helpers/VaultManagement.ts
@@ -18,7 +18,7 @@ const noBreakSpace = /\u00A0/g;
  * @returns 
  */
 export function hasFrontmatterKey(data: string): boolean {
-  const frontmatterRegex = /^---\n+.*---\n/g
+  const frontmatterRegex = /^---[\s\S]+?---/g;
   return frontmatterRegex.test(data);
 }
 
@@ -82,6 +82,12 @@ export async function adapterTFilesToRows(folderPath: string, columns: TableColu
   LOGGER.debug(`<= adapterTFilesToRows.  number of rows:${rows.length}`);
   return rows;
 }
+export async function updateRowFileProxy(file: TFile, columnId: string, newValue: string, state: TableDataType, option: string): Promise<void> {
+  await updateRowFile(file, columnId, newValue, state, option).catch(e => {
+    LOGGER.error(`updateRowFileProxy.  Error:${e}`);
+    throw e;
+  });
+}
 
 /**
  * Modify the file asociated to the row in function of input options
@@ -155,15 +161,18 @@ export async function updateRowFile(file: TFile, columnId: string, newValue: str
   }
 
   async function persistFrontmatter(deletedColumn?: string): Promise<void> {
-    const frontmatterGroupRegex = new RegExp(`(^---\\n)+(.*)+(^---)`, "gm");
+    const frontmatterGroupRegex = /^---[\s\S]+?---/g;
+    const frontmatterFieldsText = parseFrontmatterFieldsToString(rowFields, currentFrontmatter, deletedColumn);
+    console.log(frontmatterFieldsText);
     const noteObject = {
       action: 'replace',
       file: file,
       regexp: frontmatterGroupRegex,
-      newValue: `${parseFrontmatterFieldsToString(rowFields, currentFrontmatter, deletedColumn)}`
+      newValue: `${frontmatterFieldsText}`
     };
     await VaultManagerDB.editNoteContent(noteObject);
   }
+
   /*******************************************************************************************
    *                              INLINE GROUP FUNCTIONS
    *******************************************************************************************/
diff --git a/src/main.ts b/src/main.ts
@@ -210,9 +210,13 @@ export default class DBFolderPlugin extends Plugin {
 	defaultConfiguration(): string {
 		const local_settings = this.settings.local_settings;
 		return [
-			`configuration:`,
+			`config:`,
 			` enable_show_state: ${local_settings.enable_show_state}`,
-			'%%>'
+			` group_folder_column: `,
+			` remove_field_when_delete_column: ${local_settings.remove_field_when_delete_column}`,
+			` show_metadata_created: ${local_settings.show_metadata_created}`,
+			` show_metadata_modified: ${local_settings.show_metadata_modified}`,
+			`%%>`
 		].join('\n');
 	}
 	registerEvents() {
diff --git a/src/parsers/handlers/marshall/MarshallConfigHandler.ts b/src/parsers/handlers/marshall/MarshallConfigHandler.ts
@@ -1,5 +1,6 @@
 import { YamlHandlerResponse } from 'cdm/MashallModel';
 import { AbstractYamlHandler } from 'parsers/handlers/marshall/AbstractYamlPropertyHandler';
+import { LocalSettings } from 'Settings';
 
 export class MarshallConfigHandler extends AbstractYamlHandler {
     handlerName: string = 'configuration';
@@ -9,33 +10,38 @@ export class MarshallConfigHandler extends AbstractYamlHandler {
         if (handlerResponse.yaml.config) {
             this.localYaml.config = handlerResponse.yaml.config;
             // if enable_show_state is not defined, load default
-            if (handlerResponse.yaml.config.enable_show_state === undefined) {
+            if (checkNullable(handlerResponse.yaml.config.enable_show_state)) {
                 this.addError(`There was not enable_debug_mode key in yaml. Default will be loaded`);
                 this.localYaml.config.enable_show_state = false;
             }
+
             // if group_folder_column is not defined, load default
-            if (handlerResponse.yaml.config.group_folder_column === undefined) {
-                this.addError(`There was not group_folder_column key in yaml. Default will be loaded`);
+            if (checkNullable(handlerResponse.yaml.config.group_folder_column)) {
                 this.localYaml.config.group_folder_column = '';
             }
+
             // if remove_field_when_delete_column is not defined, load default
-            if (handlerResponse.yaml.config.remove_field_when_delete_column === undefined) {
+            if (checkNullable(handlerResponse.yaml.config.remove_field_when_delete_column)) {
                 this.addError(`There was not remove_field_when_delete_column key in yaml. Default will be loaded`);
                 this.localYaml.config.remove_field_when_delete_column = false;
             }
 
             // if show_metadata_created is not defined, load default
-            if (handlerResponse.yaml.config.show_metadata_created === undefined) {
+            if (checkNullable(handlerResponse.yaml.config.show_metadata_created)) {
                 this.addError(`There was not show_metadata_created key in yaml. Default will be loaded`);
                 this.localYaml.config.show_metadata_created = false;
             }
 
             // if show_metadata_modified is not defined, load default
-            if (handlerResponse.yaml.config.show_metadata_modified === undefined) {
+            if (checkNullable(handlerResponse.yaml.config.show_metadata_modified)) {
                 this.addError(`There was not show_metadata_modified key in yaml. Default will be loaded`);
                 this.localYaml.config.show_metadata_modified = false;
             }
         }
         return this.goNext(handlerResponse);
     }
+}
+
+function checkNullable<T>(value: T): boolean {
+    return value === null || value === undefined;
 }
diff --git a/src/services/FileManagerService.ts b/src/services/FileManagerService.ts
@@ -32,9 +32,12 @@ class VaultManager {
   async editNoteContent(note: NoteContentAction): Promise<string> {
     LOGGER.debug(`=> editNoteContent. action:${note.action} filePath:${note.file.path}`);
     try {
-      const tfileContent = await this.obtainContentFromTfile(note.file);
-      const line_string = new FileContent(tfileContent);
-      let releasedContent = tfileContent;
+      let releasedContent = note.content;
+      if (releasedContent === undefined) {
+        releasedContent = await this.obtainContentFromTfile(note.file);
+      }
+      const line_string = new FileContent(releasedContent);
+
       switch (note.action) {
         case 'remove':
           releasedContent = line_string.remove(note.regexp).value;
diff --git a/styles.css b/styles.css

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@`
`62`	`62`	`"react-popper": "2.3.0",`
`63`	`63`	`"react-table": "7.7.0",`
`64`	`64`	`"react-window": "1.8.7",`
`65`		`- "react-datepicker": "4.7.0",`
	`65`	`+ "react-datepicker": "4.8.0",`
`66`	`66`	`"regenerator-runtime": "0.13.9",`
`67`	`67`	`"luxon": "2.4.0"`
`68`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -123,5 +123,6 @@ export type NoteContentAction = {`
`123`	`123`	`file: TFile,`
`124`	`124`	`action: string,`
`125`	`125`	`regexp: RegExp,`
	`126`	`+ content?: string,`
`126`	`127`	`newValue?: string`
`127`	`128`	`}`
Original file line number	Diff line number	Diff line change
`@@ -218,7 +218,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {`
`218`	`218`	`setExpanded(false);`
`219`	`219`	`},`
`220`	`220`	`icon: <CalendarIcon />,`
`221`		`- label: DataTypes.CALENDAR,`
	`221`	`+ label: MetadataLabels.CALENDAR,`
`222`	`222`	`},`
`223`	`223`	`{`
`224`	`224`	`onClick: (e: any) => {`