Merge branch '58-fr-pre-populate-selectlookup-fields'

Author: RafaelGB

package.json

@@ -28,6 +28,7 @@
 		"@types/node": "17.0.31",
 		"@types/react": "17.0.43",
 		"@types/react-dom": "17.0.14",
+		"@types/react-color": "3.0.6",
 		"@types/react-table": "7.7.11",
 		"@types/react-window": "1.8.5",
 		"@types/react-datepicker": "4.4.1",
@@ -60,7 +61,8 @@
 		"react-dom": "17.0.2",
 		"react-csv": "2.2.2",
 		"react-popper": "2.3.0",
-		"react-table": "7.7.0",
+		"react-table": "7.8.0",
+		"react-color": "2.19.3",
 		"react-window": "1.8.7",
 		"react-datepicker": "4.8.0",
 		"regenerator-runtime": "0.13.9",

src/Settings.ts

@@ -6,27 +6,29 @@ import { LOGGER } from "services/Logger";
 import { developer_settings_section } from "settings/DeveloperSection";
 import { columns_settings_section } from "settings/ColumnsSection";
 import { folder_settings_section } from "settings/FolderSection";
-import { StyleClasses } from "helpers/Constants";
+import { DEFAULT_COLUMN_CONFIG, StyleClasses } from "helpers/Constants";
 import { SettingHandlerResponse } from "settings/handlers/AbstractSettingHandler";
 import { media_settings_section } from "settings/MediaSection";
 
-interface GlobalSettings {
-  enable_debug_mode: boolean;
-  logger_level_info: string;
-}
-
 export interface MediaSettings {
   enable_media_view: boolean;
   width: number;
   height: number;
 }
+/**
+ * Options that affects the behavior of the plugin and defines default values with some fields
+ */
+interface GlobalSettings {
+  enable_debug_mode: boolean;
+  logger_level_info: string;
+  media_settings: MediaSettings;
+}
 export interface LocalSettings {
   enable_show_state: boolean;
   group_folder_column: string;
   remove_field_when_delete_column: boolean;
   show_metadata_created: boolean;
   show_metadata_modified: boolean;
-  media_settings: MediaSettings;
 }
 
 export interface DatabaseSettings {
@@ -37,19 +39,19 @@ export interface DatabaseSettings {
 export const DEFAULT_SETTINGS: DatabaseSettings = {
   global_settings: {
     enable_debug_mode: false,
-    logger_level_info: 'error'
+    logger_level_info: 'error',
+    media_settings: {
+      enable_media_view: DEFAULT_COLUMN_CONFIG.enable_media_view,
+      width: DEFAULT_COLUMN_CONFIG.media_height,
+      height: DEFAULT_COLUMN_CONFIG.media_height
+    }
   },
   local_settings: {
     enable_show_state: false,
     remove_field_when_delete_column: false,
     group_folder_column: '',
     show_metadata_created: false,
     show_metadata_modified: false,
-    media_settings: {
-      enable_media_view: true,
-      width: 100,
-      height: 100
-    }
   }
 };
 
@@ -101,7 +103,7 @@ export class SettingsManager {
 
     const settingBody = containerEl.createDiv();
     settingBody.addClass(StyleClasses.SETTINGS_MODAL_BODY);
-    containerEl.setAttribute("id", StyleClasses.SETTINGS_MODAL_BODY);
+    settingBody.setAttribute("id", StyleClasses.SETTINGS_MODAL_BODY);
     const settingHandlerResponse: SettingHandlerResponse = {
       settingsManager: this,
       containerEl: settingBody,

src/cdm/DatabaseModel.ts

@@ -2,19 +2,13 @@ import { RowType } from "cdm/RowTypeModel"
 import { Literal } from "obsidian-dataview/lib/data-model/value";
 import { Cell } from "react-table";
 import { LocalSettings } from "Settings"
-import { TableColumn, TableDataType } from "cdm/FolderModel";
+import { BaseColumn, TableColumn, TableDataType } from "cdm/FolderModel";
+import { RowSelectOption } from "cdm/RowSelectModel";
 
 /** database column */
-export interface DatabaseColumn {
+export interface DatabaseColumn extends BaseColumn {
     input: string;
-    accessor: string;
-    label: string;
-    key: string;
-    position?: number;
-    isMetadata?: boolean;
-    skipPersist?: boolean;
-    csvCandidate?: boolean;
-    isInline?: boolean;
+    options?: RowSelectOption[];
     [key: string]: RowType;
 }
 
@@ -52,4 +46,4 @@ export type CalendarProps = {
     intialState: TableDataType;
     column: TableColumn;
     cellProperties: Cell;
-};
+};

src/cdm/FolderModel.ts

@@ -1,11 +1,9 @@
 import { DatabaseView } from "DatabaseView";
 import { Dispatch } from "react";
 import StateManager from "StateManager";
-import { RowType } from "cdm/RowTypeModel";
 import { RowSelectOption } from "cdm/RowSelectModel";
 import NoteInfo from "services/NoteInfo";
 import { TFile } from "obsidian";
-import { DatabaseColumn } from "cdm/DatabaseModel";
 import { Column } from "react-table";
 import { Literal } from "obsidian-dataview/lib/data-model/value";
 
@@ -35,23 +33,33 @@ export type Models = {
     [key: string]: FolderModel
 }
 
-export interface TableColumn {
-    id: string;
+export interface ConfigColumn {
+    enable_media_view: boolean;
+    media_width: number;
+    media_height: number;
+    isInline: boolean;
+    [key: string]: Literal;
+}
+
+export interface BaseColumn {
+    csvCandidate?: boolean;
+    accessor: string;
     label: string;
     key: string;
-    position: number;
-    accessor: any;
+    position?: number;
+    isMetadata?: boolean;
+    skipPersist?: boolean;
+    config: ConfigColumn;
+}
+export interface TableColumn extends BaseColumn {
+    id: string;
     minWidth?: number;
     width?: number;
     dataType: string;
     options?: RowSelectOption[];
     Cell?: any;
     getHeaderProps?: any;
     getResizerProps?: any;
-    isMetadata?: boolean;
-    skipPersist?: boolean;
-    isInline?: boolean;
-    csvCandidate: boolean;
 }
 
 export type RowDataType = {

src/cdm/HeaderModel.ts

@@ -0,0 +1,13 @@
+import { DatabaseHeaderProps } from "cdm/FolderModel";
+
+export type HeaderMenuProps = {
+    headerProps: DatabaseHeaderProps;
+    setSortBy: any;
+    propertyIcon: any;
+    expanded: boolean;
+    setExpanded: (expanded: boolean) => void;
+    created: boolean;
+    referenceElement: any;
+    labelState: string;
+    setLabelState: (label: string) => void;
+};

src/cdm/ModalSettingsModel.ts

@@ -0,0 +1,10 @@
+import { TableColumn } from "cdm/FolderModel";
+import { ColumnSettingsManager } from "components/modals/ColumnModal";
+import { DatabaseView } from "DatabaseView";
+
+export type ColumnHandlerResponse = {
+    containerEl: HTMLElement,
+    view: DatabaseView,
+    column: TableColumn,
+    columnSettingsManager: ColumnSettingsManager
+}

src/cdm/RowSelectModel.ts

@@ -1,6 +1,6 @@
 import { ActionType } from "react-table";
 import NoteInfo from "services/NoteInfo";
-import { TableDataType } from "cdm/FolderModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 export type RowSelectOption = {
     backgroundColor: string,
@@ -9,7 +9,7 @@ export type RowSelectOption = {
 export type PopperProps = {
     dispatch: (action: ActionType) => void;
     row: any;
-    column: any;
+    column: TableColumn;
     columns: any;
     note: NoteInfo;
     state: TableDataType;

src/cdm/RowTypeModel.ts

@@ -1,5 +1,6 @@
 import { Link } from "obsidian-dataview";
 import { RowSelectOption } from "cdm/RowSelectModel";
 import NoteInfo from "services/NoteInfo";
+import { ConfigColumn } from "cdm/FolderModel";
 
-export type RowType = number | string | boolean | Date | Link | RowSelectOption[] | NoteInfo;
+export type RowType = number | string | boolean | Date | Link | RowSelectOption[] | NoteInfo | ConfigColumn;

src/cdm/StyleModel.ts

@@ -1,8 +1,19 @@
+import { DatabaseView } from "DatabaseView";
+import { ColorResult } from "react-color";
+import { RowSelectOption } from "./RowSelectModel";
+
 export type ColumnWidthState = {
     widthRecord: Record<string, number>
 }
 
 export type HeaderContextType = {
     columnWidthState: ColumnWidthState,
     setColumnWidthState: (a: ColumnWidthState) => void
-}
+}
+
+export type ColorPickerProps = {
+    view: DatabaseView;
+    options: RowSelectOption[];
+    option: RowSelectOption;
+    columnKey: string;
+};

src/components/Cell.tsx

@@ -58,7 +58,7 @@ export default function DefaultCell(cellProperties: Cell) {
       //TODO - this is a hack. find why is layout effect called twice
       containerCellRef.current.innerHTML = "";
       renderMarkdown(
-        (cellProperties as any).initialState.view,
+        cellProperties,
         contextValue.value,
         containerCellRef.current
       );
@@ -170,7 +170,7 @@ export default function DefaultCell(cellProperties: Cell) {
             <PopperSelectPortal
               dispatch={dataDispatch}
               row={cellProperties.row}
-              column={cellProperties.column}
+              column={cellProperties.column as unknown as TableColumn}
               columns={columns}
               note={note}
               state={(cellProperties as any).initialState}