Merge branch '5-fr-drag-and-drop-columns-and-persist-order-on-disk'

Author: RafaelGB

.gitignore

@@ -13,7 +13,4 @@ main.js
 
 # obsidian
 data.json
-.DS_Store
-
-# dist exception
-!dist/*
+.DS_Store

dist/main.js

@@ -1,7 +1,31 @@
 module.exports = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
-  roots: ["src"],
-  modulePaths: ["src"],
-  moduleDirectories: ["node_modules"],
+  rootDir: ".",
+  roots: [
+    "<rootDir>",
+    "<rootDir>/src/",
+    "<rootDir>/node_modules/"
+  ],
+  modulePaths: [
+    "<rootDir>",
+    "<rootDir>/src",
+    "<rootDir>/node_modules"
+  ],
+  moduleNameMapper: {
+    "src/(.*)": "<rootDir>/src/$1",
+    "node_modules/(.*)": "<rootDir>/node_modules/$1",
+    "obsidian-dataview": "<rootDir>/node_modules/obsidian-dataview/lib/index.js"
+  },
+  transform: {
+    "^.+\\.svelte$": [
+    "svelte-jester",
+    {
+      "preprocess": true
+    }
+    ],
+    "^.+\\.ts$": "ts-jest"
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  moduleDirectories: ["node_modules", "src"],
 };

jest.config.js

@@ -1,7 +1,7 @@
 {
 	"id": "dbfolder",
 	"name": "DB Folder",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"minAppVersion": "0.14.5",
 	"description": "Folder with the capability to store and retrieve data from a folder like database",
 	"author": "RafaelGB",

manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-dbfolder",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
 	"main": "main.js",
 	"scripts": {
@@ -23,18 +23,24 @@
 		"@rollup/plugin-node-resolve": "13.2.1",
 		"@rollup/plugin-typescript": "8.3.2",
 		"@types/jest": "27.4.1",
+		"@testing-library/jest-dom": "5.16.4",
+    	"@testing-library/react": "12.1.2",
 		"@types/node": "17.0.25",
 		"@types/react": "17.0.43",
 		"@types/react-dom": "17.0.14",
 		"@types/react-table": "7.7.10",
 		"@types/react-window": "1.8.5",
+		"@types/react-beautiful-dnd": "13.1.2",
 		"@typescript-eslint/eslint-plugin": "5.20.0",
 		"@typescript-eslint/parser": "5.20.0",
 		"eslint": "8.13.0",
 		"jest": "27.5.1",
 		"obsidian": "0.14.6",
-		"obsidian-dataview": "0.5.13",
+		"obsidian-dataview": "0.5.16",
 		"rollup": "2.70.2",
+		"svelte-check": "2.7.0",
+		"svelte-jester": "2.3.2",
+		"svelte-preprocess": "4.10.6",
 		"ts-jest": "27.1.4",
 		"tslib": "2.3.1",
 		"typescript": "4.6.3"
@@ -48,11 +54,12 @@
 		"monkey-around": "2.3.0",
 		"pkg.json": "2.0.8",
 		"react": "17.0.2",
+		"react-beautiful-dnd": "13.1.0",
 		"react-contenteditable": "3.3.6",
 		"react-dom": "17.0.2",
 		"react-popper": "2.2.5",
 		"react-table": "7.7.0",
-		"react-window": "1.8.6",
+		"react-window": "1.8.7",
 		"regenerator-runtime": "0.13.9"
 	}
 }

package.json

@@ -1,7 +1,7 @@
 import { TableDataType } from 'cdm/FolderModel';
 import { obtainColumnsFromFolder, obtainMetadataColumns} from 'components/Columns';
 import { createDatabase } from 'components/index/Database';
-import { DatabaseCore, DataTypes } from 'helpers/Constants';
+import { DatabaseCore, DataTypes, StyleClasses } from 'helpers/Constants';
 import { adapterTFilesToRows } from 'helpers/VaultManagement';
 import DBFolderPlugin from 'main';
 
@@ -26,6 +26,8 @@ export class DatabaseView extends TextFileView implements HoverParent {
     plugin: DBFolderPlugin;
     hoverPopover: HoverPopover | null;
     tableContainer: HTMLDivElement | null = null;
+    diskConfig: DatabaseInfo;
+
     constructor(leaf: WorkspaceLeaf, plugin: DBFolderPlugin) {
         super(leaf);
         this.plugin = plugin;
@@ -107,9 +109,9 @@ export class DatabaseView extends TextFileView implements HoverParent {
 
     async initDatabase(): Promise<void> {
       LOGGER.info(`=>initDatabase ${this.file.path}`);
-      const databaseInfo = new DatabaseInfo(this.file);
-      await databaseInfo.initDatabaseconfigYaml();
-      const columns = await obtainColumnsFromFolder(databaseInfo.yaml.columns);
+      this.diskConfig = new DatabaseInfo(this.file);
+      await this.diskConfig.initDatabaseconfigYaml(this.plugin.settings.local_settings);
+      const columns = await obtainColumnsFromFolder(this.diskConfig.yaml.columns);
       const metatadaColumns = await obtainMetadataColumns();
       columns.push(...metatadaColumns);
       const rows = await adapterTFilesToRows(this.file.parent.path);
@@ -119,12 +121,11 @@ export class DatabaseView extends TextFileView implements HoverParent {
         data: rows,
         skipReset: false,
         view: this,
-        stateManager: this.plugin.getStateManager(this.file),
-        diskConfig: databaseInfo
+        stateManager: this.plugin.getStateManager(this.file)
       }
 
-      let table = createDatabase(tableProps);
-      this.tableContainer  = this.contentEl.createDiv("dbfolder-table-container");
+      const table = createDatabase(tableProps);
+      this.tableContainer  = this.contentEl.createDiv(StyleClasses.TABLE_CONTAINER);
       ReactDOM.render(table, this.tableContainer);
       LOGGER.info(`<=initDatabase ${this.file.path}`);
     }

src/DatabaseView.tsx

@@ -5,15 +5,27 @@ import { DatabaseView } from "DatabaseView";
 import { LOGGER } from "services/Logger";
 import { developer_settings_section } from "settings/DeveloperSection";
 
+interface GlobalSettings {
+  enable_debug_mode: boolean;
+  logger_level_info: string;
+}
 
+export interface LocalSettings {
+  enable_show_state: boolean;
+}
 export interface DatabaseSettings {
-    enable_debug_mode: boolean;
-    logger_level_info: string;
+  global_settings: GlobalSettings;
+  local_settings: LocalSettings;
 }
 
 export const DEFAULT_SETTINGS: DatabaseSettings = {
+  global_settings:{
     enable_debug_mode: false,
-    logger_level_info: "error"
+    logger_level_info: 'error'
+  },
+  local_settings:{
+    enable_show_state: false
+  }
 };
 
 export type SettingRetriever = <K extends keyof DatabaseSettings>(
@@ -49,19 +61,27 @@ export interface SettingsManagerConfig {
       this.config = config;
       this.settings = settings;
     }
-    constructUI(containerEl: HTMLElement, heading: string, local: boolean) {
+
+    /**
+     * Render settings window
+     * @param containerEl 
+     * @param heading 
+     * @param local 
+     * @param view optional. Used only for local settings
+     */
+    constructUI(containerEl: HTMLElement, heading: string, local: boolean,view?: DatabaseView) {
         /** Common modal headings */
         containerEl.empty();
         containerEl.addClass('database-settings-modal');
         add_setting_header(containerEl,heading,'h2');
         const settingsBody:HTMLDivElement = containerEl.createDiv('database-settings-body');
-        this.constructSettingBody(settingsBody, local);
+        this.constructSettingBody(settingsBody, local, view);
     }
 
-    constructSettingBody(containerEl: HTMLElement, local: boolean) {
+    constructSettingBody(containerEl: HTMLElement, local: boolean, view?: DatabaseView) {
       containerEl.empty();
       /** Developer section */
-      developer_settings_section(this, containerEl, local);
+      developer_settings_section(this, containerEl, local, view);
     }
     cleanUp() {
         this.cleanupFns.forEach((fn) => fn());
@@ -89,7 +109,7 @@ export class SettingsModal extends Modal {
 
       modalEl.addClass('database-settings-modal');
 
-      this.settingsManager.constructUI(contentEl, this.view.file.basename, true);
+      this.settingsManager.constructUI(contentEl, this.view.file.basename, true, this.view);
     }
 
     onClose() {
@@ -117,6 +137,6 @@ export class DBFolderSettingTab extends PluginSettingTab {
 
 export function loadServicesThatRequireSettings(settings: DatabaseSettings) {
   /** Init logger */
-    LOGGER.setDebugMode(settings.enable_debug_mode);
-    LOGGER.setLevelInfo(settings.logger_level_info);
+    LOGGER.setDebugMode(settings.global_settings.enable_debug_mode);
+    LOGGER.setLevelInfo(settings.global_settings.logger_level_info);
 }

src/Settings.ts

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+ import obsidian from 'obsidian';
+import { Database } from 'components/index/Database';
+import {TableDataType} from 'cdm/FolderModel';
+import { makeData } from "mock/mockUtils";
+import React from "react";
+
+// jest.mock("obsidian");
+
+test("Render without crashing", () => {
+    // const mockedTableData:TableDataType = makeData(10);
+    // render(<Database {...mockedTableData} />);
+    // const titleLabel = screen.getByText(" title");
+    // expect(titleLabel).toBeInTheDocument();
+});
+

src/__tests__/reactTable.test.tsx

@@ -1,10 +1,12 @@
 import { RowType } from "cdm/RowTypeModel"
+import { LocalSettings } from "Settings"
 
 /** database column */
 export type DatabaseColumn = {
     input: string,
     Header?: string,
     key?: string,
+    position?: number,
     accessor: string,
     label: string,
     isMetadata?: boolean,
@@ -19,4 +21,7 @@ export type DatabaseYaml = {
     description: string,
     /** database columns */
     columns: Record<string, DatabaseColumn>
+    /** database local configuration 
+     * TODO typing*/
+    config?: LocalSettings
 }

src/cdm/DatabaseModel.ts

@@ -30,10 +30,11 @@ export type Models = {
 }
 
 export type TableColumn = {
-    id: number,
+    id: string,
     Header?: any,
     label?: string,
     key: string,
+    position: number,
     accessor: any,
     minWidth?: number,
     width?:number
@@ -58,8 +59,7 @@ export type TableDataType={
     skipReset: boolean,
     view: DatabaseView,
     stateManager?: StateManager,
-    dispatch?: Dispatch<any>,
-    diskConfig: DatabaseInfo
+    dispatch?: Dispatch<any>
 }
 export interface DatabaseHeaderProps{
     columns:any,