Merge branch 'style_relations'

docs/docs/changelog.md

@@ -1,3 +1,9 @@
+## 3.1.0
+### Shiny new things
+- Auto refresh when any external change is detected. You can disable it on global settings for performance purposes [ISSUE#482](https://github.com/RafaelGB/obsidian-db-folder/issues/482)
+- A database can be related with itselves [ISSUE#605](https://github.com/RafaelGB/obsidian-db-folder/issues/605)
+### Visual
+- no wrap multiple images avaliable [ISSUE#476](https://github.com/RafaelGB/obsidian-db-folder/issues/476)
 ## 3.1.0-beta.1
 ### Shiny new things
 - New option for inline fields addition. Add a new field behind the last one. [ISSUE#419](https://github.com/RafaelGB/obsidian-db-folder/issues/419)

manifest-beta.json

@@ -1,10 +1,11 @@
 {
 	"id": "dbfolder",
 	"name": "DB Folder",
-	"version": "3.1.0-beta.1",
-	"minAppVersion": "0.16.3",
+	"version": "3.1.0",
+	"minAppVersion": "1.1.1",
 	"description": "Folder with the capability to store and retrieve data from a folder like database",
 	"author": "RafaelGB",
 	"authorUrl": "https://github.com/RafaelGB/obsidian-bd-folder",
-	"isDesktopOnly": false
+	"isDesktopOnly": false,
+	"fundingUrl": "https://www.buymeacoffee.com/5tsytn22v9Z"
 }

manifest.json

@@ -1,8 +1,8 @@
 {
 	"id": "dbfolder",
 	"name": "DB Folder",
-	"version": "3.0.1",
-	"minAppVersion": "0.16.3",
+	"version": "3.1.0",
+	"minAppVersion": "1.1.1",
 	"description": "Folder with the capability to store and retrieve data from a folder like database",
 	"author": "RafaelGB",
 	"authorUrl": "https://github.com/RafaelGB/obsidian-bd-folder",

package.json

@@ -42,7 +42,7 @@
 		"jest": "29.3.1",
 		"jest-mock-extended": "3.0.1",
 		"jest-environment-jsdom": "29.3.1",
-		"obsidian": "0.16.3",
+		"obsidian": "1.1.1",
 		"rollup": "3.7.5",
 		"rollup-plugin-typescript2": "0.34.1",
 		"ts-jest": "29.0.3",

src/DatabaseView.tsx

@@ -1,6 +1,6 @@
 import { obtainFormulasFromFolder } from "automations/AutomationsHelper";
 import { DatabaseColumn } from "cdm/DatabaseModel";
-import { ViewEvents } from "cdm/EmitterModel";
+import { UpdaterData, ViewEvents } from "cdm/EmitterModel";
 import {
   InitialType,
   RowDataType,
@@ -35,11 +35,9 @@ import {
   WorkspaceLeaf,
   TFile,
   Menu,
-  Notice,
 } from "obsidian";
 import { createRoot, Root } from "react-dom/client";
 import DatabaseInfo from "services/DatabaseInfo";
-import { DataviewService } from "services/DataviewService";
 import { LOGGER } from "services/Logger";
 import { SettingsModal } from "Settings";
 import StateManager from "StateManager";
@@ -350,4 +348,27 @@ export class DatabaseView extends TextFileView implements HoverParent {
   openFilters() {
     this.emitter.emit(EMITTERS_GROUPS.SHORTCUT, EMITTERS_SHORTCUT.OPEN_FILTERS);
   }
+
+  /****************************************************************
+   *                     REACTIVE ACTIONS
+   ****************************************************************/
+  /**
+   * Dataview API router triggered by any file change
+   * @param op
+   * @param file
+   * @param oldPath
+   */
+  handleExternalMetadataChange(
+    op: string,
+    file: TFile,
+    isActive: boolean,
+    oldPath?: string
+  ) {
+    this.emitter.emit(EMITTERS_GROUPS.UPDATER, {
+      op,
+      file,
+      isActive,
+      oldPath,
+    } as UpdaterData);
+  }
 }

src/api/obsidian-projects-api.ts

@@ -10,7 +10,7 @@ import { resolve_tfile, resolve_tfolder } from "helpers/FileManagement";
 import { generateDbConfiguration, generateNewDatabase } from "helpers/CommandsHelper";
 import { LocalSettings } from "cdm/SettingsModel";
 import { DatabaseColumn } from "cdm/DatabaseModel";
-import { dbTrim } from "helpers/StylesHelper";
+import { c, dbTrim } from "helpers/StylesHelper";
 
 const projectsMetadataColumns = ["File", "name", "path"];
 class ProjectAPI extends ProjectView {
@@ -105,7 +105,9 @@ class ProjectAPI extends ProjectView {
         this.view = new DatabaseView(leaf, this.plugin, file);
         this.view.initRootContainer(file);
         await this.view.initDatabase();
-        this.dataEl = contentEl.createDiv().appendChild(this.view.containerEl);
+        this.dataEl = contentEl
+            .createDiv(c("project-view-container"))
+            .appendChild(this.view.containerEl);
         this.view.onload();
         this.enableAutoReload = true;
         LOGGER.debug("Database initialized successfully from project view");

src/cdm/EmitterModel.ts

@@ -1,7 +1,10 @@
 import { EMITTERS_GROUPS } from "helpers/Constants";
+import { TFile } from "obsidian";
+export type UpdaterData = { op: string, file: TFile, isActive: boolean, oldPath?: string };
 
 export interface ViewEvents {
     showLaneForm: () => void;
     [EMITTERS_GROUPS.HOTKEY]: (commandId: string) => void;
     [EMITTERS_GROUPS.SHORTCUT]: (commandId: string) => void;
+    [EMITTERS_GROUPS.UPDATER]: (updater: UpdaterData) => void;
 }

src/cdm/SettingsModel.ts

@@ -24,12 +24,12 @@ export type AtomicFilter = {
  */
 export interface GlobalSettings {
     enable_debug_mode: boolean;
-    enable_ribbon_icon: boolean;
     logger_level_info: string;
     media_settings: MediaSettings;
     enable_show_state: boolean;
     csv_file_header_key: string;
     enable_row_shadow: boolean;
+    enable_auto_update: boolean;
     show_search_bar_by_default: boolean;
 }
 

src/cdm/TableStateInterface.ts

@@ -5,6 +5,7 @@ import { ColumnOption } from "cdm/ComponentsModel";
 import { DatabaseView } from "DatabaseView";
 import { Literal } from "obsidian-dataview";
 import { StoreApi, UseBoundStore } from "zustand";
+import { UpdaterData } from "cdm/EmitterModel";
 
 export type TableActionResponse<T> = {
     view: DatabaseView,
@@ -54,7 +55,8 @@ export interface DataState {
         editOptionForAllRows: (column: TableColumn, oldLabel: string, newLabel: string, columns: TableColumn[], ddbbConfig: LocalSettings) => Promise<void>;
         removeOptionForAllRows: (column: TableColumn, option: string, columns: TableColumn[],
             ddbbConfig: LocalSettings) => Promise<void>;
-        dataviewRefresh: (column: TableColumn[], ddbbConfig: LocalSettings, filterConfig: FilterSettings) => void;
+        dataviewRefresh: (column: TableColumn[], ddbbConfig: LocalSettings, filterConfig: FilterSettings) => Promise<void>;
+        dataviewUpdater: (updaterData: UpdaterData, columns: TableColumn[], ddbbConfig: LocalSettings, filterConfig: FilterSettings) => Promise<void>;
         renameFile: (rowIndex: number) => Promise<void>;
         saveDataFromFile: (file: File, columns: TableColumn[], config: LocalSettings) => Promise<void>;
         groupFiles: () => Promise<void>;

src/components/Columns.tsx

@@ -100,19 +100,15 @@ export async function obtainMetadataColumns(
 export async function obtainColumnsFromFolder(
   databaseColumns: Record<string, DatabaseColumn>
 ): Promise<TableColumn[]> {
-  LOGGER.debug(
-    `=> obtainColumnsFromFolder. databaseColumns: ${JSON.stringify(
-      databaseColumns
-    )}`
-  );
+  LOGGER.debug("=> obtainColumnsFromFolder", databaseColumns);
   const columns: TableColumn[] = [];
   await Promise.all(
     Object.keys(databaseColumns).map(async (columnKey, index) => {
       const column = databaseColumns[columnKey];
       columns.push(await columnOptions(columnKey, index, column));
     })
   );
-  LOGGER.debug(`<= obtainColumnsFromFolder(. return ${columns.length} columns`);
+  LOGGER.debug("<= obtainColumnsFromFolder", `${columns.length} columns`);
   return sortColumnsByPosition([rowContextMenuColumn, ...columns]);
 }
 
@@ -232,7 +228,6 @@ function columnOptions(
   index: number,
   column: DatabaseColumn
 ): TableColumn {
-  LOGGER.debug(`=> columnOptions. column: ${JSON.stringify(column)}`);
   const options: RowSelectOption[] = column.options ?? [];
   if ((Object.values(InputType) as Array<string>).includes(column.input)) {
     const columnOption = {
@@ -249,7 +244,6 @@ function columnOptions(
     };
     // Custom react-table attributes
     columnOption["filterFn"] = getFilterKeyInFunctionOfInputType(column.input);
-    LOGGER.debug(`<= columnOptions`, `return ${column.input} column`);
     return columnOption;
   } else {
     throw `Error: option ${column.input} not supported yet`;

src/components/DefaultCell.tsx

@@ -27,8 +27,6 @@ export default function DefaultCell(
   const input = (column.columnDef as TableColumn).input;
 
   /** states for selector option  */
-  LOGGER.debug(`<=> Cell.rendering input: ${input}`);
-
   function getCellElement() {
     switch (input) {
       /** Plain text option */

src/components/DefaultHeader.tsx

@@ -25,7 +25,6 @@ import {
   TextFilter,
 } from "components/reducers/ColumnFilters";
 import { InputType, MetadataColumns } from "helpers/Constants";
-import { LOGGER } from "services/Logger";
 import { DatabaseHeaderProps, TableColumn } from "cdm/FolderModel";
 import { c } from "helpers/StylesHelper";
 import { AddColumnModalProps } from "cdm/ModalsModel";
@@ -36,7 +35,6 @@ import { AddColumnModalProps } from "cdm/ModalsModel";
  * @returns
  */
 export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
-  LOGGER.debug(`=>Header ${headerProps.column.columnDef}`);
   /** Properties of header */
   const { header, table } = headerProps;
   const { tableState } = table.options.meta;
@@ -134,8 +132,6 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
   const openMenuHandler: MouseEventHandler<HTMLDivElement> = (event) => {
     setMenuEl(menuEl ? null : event.currentTarget);
   };
-
-  LOGGER.debug(`<=Header ${label}`);
   return id !== MetadataColumns.ADD_COLUMN ? (
     <>
       <div

src/components/HeaderMenu.tsx

@@ -1,4 +1,4 @@
-import { InputType, StyleVariables } from "helpers/Constants";
+import { StyleVariables } from "helpers/Constants";
 import { dbTrim, c, getLabelHeader } from "helpers/StylesHelper";
 import AdjustmentsIcon from "components/img/AdjustmentsIcon";
 import React, { FocusEventHandler, useState } from "react";

src/components/Table.tsx

@@ -24,7 +24,6 @@ import {
   MetadataColumns,
   ResizeConfiguration,
 } from "helpers/Constants";
-import { LOGGER } from "services/Logger";
 import DefaultCell from "components/DefaultCell";
 import DefaultHeader from "components/DefaultHeader";
 import { c } from "helpers/StylesHelper";
@@ -48,8 +47,8 @@ import TableActions from "components/tableActions/TableActions";
 import PaginationTable from "components/navbar/PaginationTable";
 
 const defaultColumn: Partial<ColumnDef<RowDataType>> = {
-  minSize: DatabaseLimits.MIN_COLUMN_HEIGHT,
-  maxSize: DatabaseLimits.MAX_COLUMN_HEIGHT,
+  minSize: DatabaseLimits.MIN_COLUMN_WIDTH,
+  maxSize: DatabaseLimits.MAX_COLUMN_WIDTH,
   cell: DefaultCell,
   header: DefaultHeader,
   enableResizing: true,
@@ -69,10 +68,6 @@ export function Table(tableData: TableDataType) {
   const columnsInfo = tableStore.columns((state) => state.info);
   const rows = tableStore.data((state) => state.rows);
 
-  LOGGER.debug(
-    `=> Table. number of columns: ${columns.length}. number of rows: ${rows.length}`
-  );
-
   const cell_size_config = tableStore.configState(
     (store) => store.ddbbConfig.cell_size
   );
@@ -202,7 +197,6 @@ export function Table(tableData: TableDataType) {
     autoResetPageIndex: false,
   });
 
-  LOGGER.debug(`<= Table`);
   return (
     <>
       <HeaderNavBar

src/components/cellTypes/Editor/RelationEditor.tsx

@@ -1,5 +1,5 @@
 import { RelationEditorComponentProps, SelectValue } from "cdm/ComponentsModel";
-import React, { useCallback, useEffect } from "react";
+import React, { useEffect } from "react";
 import { useState } from "react";
 import Select from "react-select";
 import CustomTagsStyles from "components/styles/TagsStyles";
@@ -22,7 +22,7 @@ const RelationEditor = (props: RelationEditorComponentProps) => {
       ? relationCell.map((link: Link) => ({
           label: link.fileName(),
           value: link.path,
-          color: StyleVariables.TEXT_NORMAL,
+          color: StyleVariables.BACKGROUND_SECONDARY,
         }))
       : []
   );
@@ -31,9 +31,9 @@ const RelationEditor = (props: RelationEditorComponentProps) => {
   // onChange handler
   const handleOnChange = async (newValue: OnChangeValue<SelectValue, true>) => {
     const arrayTags = newValue.map((tag) => ({
-      label: tag.value,
+      label: tag.label,
       value: tag.value,
-      color: StyleVariables.TEXT_NORMAL,
+      color: StyleVariables.BACKGROUND_SECONDARY,
     }));
     setRelationValue(arrayTags);
   };
@@ -52,6 +52,7 @@ const RelationEditor = (props: RelationEditorComponentProps) => {
         DEFAULT_SETTINGS.local_settings,
         columnsInfo.getAllColumns()
       );
+
       const multiOptions = Object.entries(relationRows).map(([key, value]) => ({
         label: value,
         value: key,

src/components/cellTypes/Editor/filepicker.ts

@@ -31,7 +31,7 @@ function getAliasMarkup(
   let container = win.document.body.createDiv(c('file-suggestion-wrapper'));
   container.detach();
 
-  setIcon(container.createDiv(c('file-suggestion-icon')), 'forward-arrow', 12);
+  setIcon(container.createDiv(c('file-suggestion-icon')), 'forward-arrow');
 
   container.createDiv({}, (div) => {
     div.createDiv({

src/components/cellTypes/Editor/textcomplete/textcomplete-core/Editor.ts

@@ -2,7 +2,6 @@ import { EventEmitter } from 'eventemitter3';
 
 import { SearchResult } from 'components/cellTypes/Editor/textcomplete/textcomplete-core/SearchResult';
 import { createCustomEvent } from 'components/cellTypes/Editor/textcomplete/textcomplete-core/utils';
-import { LOGGER } from 'services/Logger';
 
 export interface CursorOffset {
   lineHeight: number;
@@ -115,7 +114,6 @@ export abstract class Editor extends EventEmitter {
    * @see {@link Textarea} for live example.
    */
   protected getCode(e: KeyboardEvent): KeyCode {
-    LOGGER.debug(`Editor onKeyDown event: ${e.key}`);
     let code: KeyCode = 'OTHER';
     switch (e.key) {
       case 'Enter':