Merge branch 'bug-pr-feedback-official-release'

Author: RafaelGB

docs/changelog.md

@@ -1,3 +1,8 @@
+## 0.3.0
+### Shiny new things
+- Improve css styling [ISSUE#31](https://github.com/RafaelGB/obsidian-db-folder/pull/31) [artisticat1](https://github.com/artisticat1)
+
+
 ## 0.2.2
 *Published on 2022/05/08*
 ### No longer broken

src/DatabaseView.tsx

@@ -125,7 +125,10 @@ export class DatabaseView extends TextFileView implements HoverParent {
       yamlColumns = await obtainMetadataColumns(yamlColumns);
       // Obtain base information about columns
       const columns = await obtainColumnsFromFolder(yamlColumns);
-      const rows = await adapterTFilesToRows(this.file.parent.path);
+      const rows = await adapterTFilesToRows(
+        this.file.parent.path,
+        this.diskConfig.yaml.filters
+      );
       // Define table properties
       const tableProps: TableDataType = {
         columns: columns,

src/Settings.ts

@@ -5,6 +5,7 @@ import { DatabaseView } from "DatabaseView";
 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 { SettingHandlerResponse } from "settings/handlers/AbstractSettingHandler";
 
@@ -79,9 +80,12 @@ export class SettingsManager {
     containerEl.addClass(StyleClasses.SETTINGS_MODAL);
     add_setting_header(containerEl, heading, 'h2');
 
+    const settingBody = containerEl.createDiv();
+    settingBody.addClass(StyleClasses.SETTINGS_MODAL_BODY);
+    containerEl.setAttribute("id", StyleClasses.SETTINGS_MODAL_BODY);
     const settingHandlerResponse: SettingHandlerResponse = {
       settingsManager: this,
-      containerEl: containerEl,
+      containerEl: settingBody,
       local: local,
       errors: {},
       view: view,
@@ -90,19 +94,23 @@ export class SettingsManager {
   }
 
   constructSettingBody(settingHandlerResponse: SettingHandlerResponse) {
+    if (settingHandlerResponse.local) {
+      /** Folder section */
+      folder_settings_section(settingHandlerResponse);
+    }
     /** Columns section */
     columns_settings_section(settingHandlerResponse);
     /** Developer section */
     developer_settings_section(settingHandlerResponse);
   }
 
   reset(response: SettingHandlerResponse) {
-    const parentElement = response.containerEl.parentElement;
+    const settingsElement = document.getElementById(StyleClasses.SETTINGS_MODAL_BODY);
     // remove all sections
-    parentElement.empty();
+    settingsElement.empty();
 
     response.errors = {};
-    response.containerEl = parentElement;
+    response.containerEl = settingsElement;
     this.constructSettingBody(response);
   }
 

src/__tests__/reactTable.test.tsx

@@ -7,12 +7,35 @@ import {
   DeepMockProxy,
   mockDeep,
   mock,
-  MockProxy,
   mockReset,
+  MockProxy,
 } from "jest-mock-extended";
-import { App } from "obsidian";
+import { App, FileStats, TFolder, Vault } from "obsidian";
 import StateManager from "StateManager";
+import { DatabaseView } from "DatabaseView";
+
+// void mock
+const greetImplementation = (dataview: MockProxy<StateManager>) => {};
+const mockFn = jest.fn(greetImplementation);
 
+// const mockStateManager: MockProxy<StateManager> = {
+//   app: global.app,
+//   file: {
+//     path: "mockedPath",
+//     basename: "mockedBasename",
+//     name: "mockedName",
+//     parent: mock<TFolder>(),
+//     vault: mock<Vault>(),
+//     stat: mock<FileStats>(),
+//     extension: "md",
+//   },
+//   onEmpty: jest.fn(),
+//   getGlobalSettings: jest.fn(),
+//   unregisterView: mockFn,
+//   registerView: jest.fn(),
+//   getAView: mock<DatabaseView>(),
+//   forceRefresh: jest.fn(),
+// };
 /**
  * @jest-environment jsdom
  */
@@ -29,7 +52,7 @@ describe("React-table", () => {
 
   test("Render without crashing", async () => {
     const mockedTableData: TableDataType = await makeData(10);
-    //mockedTableData.stateManager = StateManager();
+    // mockedTableData.stateManager = mockStateManager;
     render(<Database {...mockedTableData} />);
     const titleLabel = screen.getByText(" title");
     expect(titleLabel).toBeInTheDocument();

src/cdm/DatabaseModel.ts

@@ -1,4 +1,5 @@
 import { RowType } from "cdm/RowTypeModel"
+import { Literal } from "obsidian-dataview/lib/data-model/value";
 import { LocalSettings } from "Settings"
 
 /** database column */
@@ -16,18 +17,26 @@ export type DatabaseColumn = {
 }
 
 /** database yaml */
-export type DatabaseYaml = {
+export interface DatabaseYaml {
     /** database name */
-    name: string,
+    name: string;
     /** database description */
-    description: string,
+    description: string;
     /** database columns */
-    columns: Record<string, DatabaseColumn>
+    columns: Record<string, DatabaseColumn>;
     /** database local configuration */
-    config?: LocalSettings
+    config: LocalSettings;
+    /** dataview filters */
+    filters?: FilterCondition[];
 }
 
 export type RowDatabaseFields = {
     frontmatter: Record<string, any>;
     inline: Record<string, any>;
+}
+
+export type FilterCondition = {
+    field: string;
+    operator: string;
+    value?: any;
 }

src/components/Table.tsx

@@ -19,11 +19,11 @@ import PlusIcon from "components/img/Plus";
 import { LOGGER } from "services/Logger";
 import DefaultCell from "components/Cell";
 import Header from "components/Header";
-import { useDraggableInPortal } from "components/portals/UseDraggableInPortal";
 import { c } from "helpers/StylesHelper";
 import { HeaderNavBar } from "components/NavBar";
 import { getColumnsWidthStyle } from "components/styles/ColumnWidthStyle";
 import { HeaderContext } from "components/contexts/HeaderContext";
+import { getDndListStyle, getDndItemStyle } from "./styles/DnDStyle";
 
 const defaultColumn = {
   minWidth: 50,
@@ -191,11 +191,8 @@ export function Table(initialState: TableDataType) {
   const [columnsWidthState, setColumnsWidthState] = React.useState(
     getColumnsWidthStyle(rows, columns)
   );
-
-  const [isDragUpdate, setDragUpdate] = React.useState(false);
   // Manage DnD
   const currentColOrder = React.useRef(null);
-  const renderDraggable = useDraggableInPortal();
   // Manage input of new row
   const [inputNewRow, setInputNewRow] = React.useState("");
   const newRowRef = React.useRef(null);
@@ -248,9 +245,6 @@ export function Table(initialState: TableDataType) {
                 currentColOrder.current = allColumns.map((o: Column) => o.id);
               }}
               onDragUpdate={(dragUpdateObj, b) => {
-                if (!isDragUpdate) {
-                  setDragUpdate(true);
-                }
                 const colOrder = [...currentColOrder.current];
                 const sIndex = dragUpdateObj.source.index;
                 const dIndex =
@@ -272,24 +266,23 @@ export function Table(initialState: TableDataType) {
 
                 // clear the current order
                 currentColOrder.current = null;
-                setDragUpdate(false);
               }}
             >
               <Droppable
                 key={`Droppable-${i}`}
                 droppableId="droppable"
                 direction="horizontal"
               >
-                {(droppableProvided, snapshot) => (
+                {(provided, snapshot) => (
                   <div
                     key={`div-Droppable-${i}`}
+                    {...provided.droppableProps}
                     {...headerGroup.getHeaderGroupProps({
                       style: {
-                        ...headerGroup.getHeaderGroupProps().style,
-                        maxWidth: `${totalColumnsWidth}px`,
+                        ...getDndListStyle(snapshot.isDraggingOver),
                       },
                     })}
-                    ref={droppableProvided.innerRef}
+                    ref={provided.innerRef}
                     className={`${c("tr header-group")}`}
                   >
                     {headerGroup.headers.map((column, index) => (
@@ -299,29 +292,28 @@ export function Table(initialState: TableDataType) {
                         index={index}
                         isDragDisabled={(column as any).skipPersist}
                       >
-                        {renderDraggable((provided) => {
+                        {(provided, snapshot) => {
                           const tableCellBaseProps = {
-                            ...column.getHeaderProps(),
-                            className: `${c("th noselect")} header`,
-                            key: `div-Draggable-${column.id}`,
                             ...provided.draggableProps,
                             ...provided.dragHandleProps,
+                            ...column.getHeaderProps({
+                              style: {
+                                width: `${
+                                  columnsWidthState.widthRecord[column.id]
+                                }px`,
+                                ...getDndItemStyle(
+                                  snapshot.isDragging,
+                                  provided.draggableProps.style
+                                ),
+                              },
+                            }),
+                            className: `${c("th noselect")} header`,
+                            key: `div-Draggable-${column.id}`,
                             // {...extraProps}
                             ref: provided.innerRef,
                           };
-                          const tableCellProps = isDragUpdate
-                            ? tableCellBaseProps
-                            : {
-                              ...tableCellBaseProps,
-                              style: {
-                                ...column.getHeaderProps().style,
-                                width: `${columnsWidthState.widthRecord[column.id]
-                                  }px`,
-                              },
-                            };
-
                           return (
-                            <div {...tableCellProps}>
+                            <div {...tableCellBaseProps}>
                               <HeaderContext.Provider
                                 value={{
                                   columnWidthState: columnsWidthState,
@@ -332,10 +324,10 @@ export function Table(initialState: TableDataType) {
                               </HeaderContext.Provider>
                             </div>
                           );
-                        })}
+                        }}
                       </Draggable>
                     ))}
-                    {droppableProvided.placeholder}
+                    {provided.placeholder}
                   </div>
                 )}
               </Droppable>
@@ -347,27 +339,27 @@ export function Table(initialState: TableDataType) {
           {rows.map((row, i) => {
             prepareRow(row);
             return (
-              <div {...row.getRowProps()} className={`${c("tr")}`} key={row.id}>
+              <div
+                {...row.getRowProps({
+                  style: {
+                    maxWidth: `${totalColumnsWidth}px`,
+                  },
+                })}
+                className={`${c("tr")}`}
+                key={row.id}
+              >
                 {row.cells.map((cell) => {
                   const tableCellBaseProps = {
                     ...cell.getCellProps({
                       style: {
-                        ...cell.getCellProps().style,
-                        maxWidth: `${totalColumnsWidth}px`,
+                        width: columnsWidthState.widthRecord[cell.column.id],
                       },
                     }),
                     className: `${c("td")}`,
                   };
-                  const tableCellProps = isDragUpdate
-                    ? tableCellBaseProps
-                    : {
-                      ...tableCellBaseProps,
-                      style: {
-                        ...tableCellBaseProps.style,
-                        width: columnsWidthState.widthRecord[cell.column.id],
-                      },
-                    };
-                  return <div {...tableCellProps}>{cell.render("Cell")}</div>;
+                  return (
+                    <div {...tableCellBaseProps}>{cell.render("Cell")}</div>
+                  );
                 })}
               </div>
             );
@@ -383,14 +375,17 @@ export function Table(initialState: TableDataType) {
                 placeholder="filename of new row"
               />
             </div>
-            <div className={`${c("td")}`} onClick={() => {
-              dataDispatch({
-                type: ActionTypes.ADD_ROW,
-                filename: inputNewRow,
-              });
-              setInputNewRow("");
-              newRowRef.current.value = "";
-            }}>
+            <div
+              className={`${c("td")}`}
+              onClick={() => {
+                dataDispatch({
+                  type: ActionTypes.ADD_ROW,
+                  filename: inputNewRow,
+                });
+                setInputNewRow("");
+                newRowRef.current.value = "";
+              }}
+            >
               <span className="svg-icon svg-gray" style={{ marginRight: 4 }}>
                 <PlusIcon />
               </span>

src/components/portals/UseDraggableInPortal.ts

@@ -0,0 +1,15 @@
+import { StyleVariables } from "helpers/Constants";
+
+export const getDndItemStyle = (isDragging: boolean, draggableStyle: any) => ({
+    // change background colour if dragging
+    background: isDragging ? StyleVariables.BACKGROUND_SECONDARY : StyleVariables.BACKGROUND_PRIMARY,
+    // styles we need to apply on draggables
+    ...draggableStyle,
+});
+
+export const getDndListStyle = (isDraggingOver: boolean) => ({
+    background: isDraggingOver ? 'lightblue' : StyleVariables.BACKGROUND_PRIMARY,
+    height: '100%',
+    width: '100%',
+    top: '0'
+});