Merge branch 'bug-style-dnd'

Author: RafaelGB

.gitignore

@@ -13,4 +13,7 @@ main.js
 
 # obsidian
 data.json
-.DS_Store
+.DS_Store
+
+# VSCode
+*.code-workspace

README.md

@@ -18,6 +18,7 @@ The information you add or edit will be saved into the target obsidian note.
 - Edit label of existed column
 - Delete column
 - Order column ascending/descending
+-  Drag & drop column. Order of the columns persisted
 #### Filters
 - Global filters
 ![GlobalFilter.gif](docs/resources/GlobalFilter.gif)
@@ -26,6 +27,21 @@ The information you add or edit will be saved into the target obsidian note.
 Database view read the yaml configuration inside .md file and render a react DOM.
 
 You can edit directly the yaml configuration inside the .md file or use the table features to edit the columns.
+#### Information
+Details about your database
+- **name**: Name asociated to your database (TODO)
+- **description**: extra information explaining the purpose of the database (TODO)
+#### Database
+The *columns* key is used to charge the correct information when you charge the react-table. Each column supports all the literals of react-table column configurations. 
+Mandatory:
+- **input**: indicates the type of the column (text,markdown & number)
+- **key**: name of obsidian field metadata in your notes (inline not supported edition yet)
+- **accessor**: is the key of the data. Must be unique
+- **label**: name of the column
+Optional:
+- **position**: order of the columns
+#### Local configuration
+
 ```markdown
 ---
 
@@ -36,25 +52,38 @@ database-plugin: basic
 name: undefined
 description: undefined
 columns:
-  1:
+  title:
     input: text
     accessor: title
     label: title
     key: title
-  2:
+    position: 1
+  director:
     input: text
     accessor: director
     label: director
     key: director
-  3:
+    position: 2
+  Year:
     input: number
     accessor: Year
     label: Year
     key: Year
-  5:
+    position: 3
+  Calification:
     input: select
     accessor: Calification
     label: Calification
     key: Calification
+    position: 4
+config:
+  enable_show_state: false
 %%>
-```
+```
+
+## Sources
+### Search engine:
+- [dataview](https://github.com/blacksmithgu/obsidian-dataview)
+### React UI
+- [react-table](https://github.com/TanStack/react-table)
+- [Notion Style base](https://github.com/archit-p/editable-react-table)

docs/docs/changelog.md

@@ -0,0 +1,28 @@
+## 0.0.5
+### Shiny new things
+- Added Drag & Drop columns. Order is persisted [ISSUE#5](https://github.com/RafaelGB/obsidian-bd-folder/issues/5)
+- Style background of the table is now adapted to the theme [PR#9](https://github.com/RafaelGB/obsidian-bd-folder/pull/9) [zubayrrr](https://github.com/zubayrrr)
+
+### Developers
+- State of table toggle configuration added. Show react table state at bottom of the page. It has a default value & local value of each dadabase.
+
+## 0.0.4
+### Shiny new things
+- Global filters added
+
+## 0.0.3
+### Shiny new things
+- Order rows `alphanumericFalsyLast`
+- Label of columns now is editable
+- Add new columns
+- Delete columns
+- Modify type of column
+
+## 0.0.2
+Initial version. Basic database view.
+### Shiny `things`
+- Cells are editable
+- Cell can render markdown
+- metadata columns added (just target file) Not configurable yet
+### Developers
+- LOGGER console configuration with 4 levels: debug, info, warn, error

manifest.json

@@ -1,8 +1,8 @@
 {
 	"id": "dbfolder",
 	"name": "DB Folder",
-	"version": "0.0.4",
-	"minAppVersion": "0.14.5",
+	"version": "0.0.5",
+	"minAppVersion": "0.14.6",
 	"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",

src/components/Table.tsx

@@ -25,7 +25,7 @@ import { LOGGER } from "services/Logger";
 import Cell from "components/Cell";
 import Header from "components/Header";
 import GlobalFilter from "components/reducers/GlobalFilter";
-import DraggableStyle from "components/styles/DragableStyle";
+import { useDraggableInPortal } from "components/portals/UseDraggableInPortal";
 
 const defaultColumn = {
   minWidth: 50,
@@ -208,6 +208,7 @@ export function Table(initialState: TableDataType){
     }
     // 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);
@@ -249,12 +250,17 @@ export function Table(initialState: TableDataType){
                   currentColOrder.current = null;
                 }}
               >
-              <Droppable key={`Droppable-${i}`} droppableId="droppable" direction="horizontal">
+              <Droppable 
+                key={`Droppable-${i}`}
+                droppableId="droppable" 
+                direction="horizontal"
+              >
                 {(droppableProvided, snapshot) => (
                   <div 
+                    key={`div-Droppable-${i}`}
                     {...headerGroup.getHeaderGroupProps()} 
                     ref={droppableProvided.innerRef}
-                    className='tr'
+                    className='tr header-group'
                   >
                     {headerGroup.headers.map((column,index) => (
 
@@ -264,24 +270,18 @@ export function Table(initialState: TableDataType){
                       index={index}
                       isDragDisabled={(column as any).isMetadata}
                     >
-                      {(provided, snapshot) => {
+                      {renderDraggable((provided) => {
                         return (
                           <div
                             {...column.getHeaderProps()}
-                            className='th noselect'
+                            className='th noselect header'
                           >
                             <div
+                              key={`div-Draggable-${column.id}`}
                               {...provided.draggableProps}
                               {...provided.dragHandleProps}
                               // {...extraProps}
                               ref={provided.innerRef}
-                              style={{
-                                ...DraggableStyle({
-                                  dragableProps: snapshot,
-                                  draggableStyle: provided.draggableProps.style
-                                })
-                                // ...style
-                              }}
                             >
                               {column.render("Header")}
                               {/* Use column.getResizerProps to hook up the events correctly */}
@@ -295,7 +295,7 @@ export function Table(initialState: TableDataType){
                             </div>
                           </div>
                         );
-                      }}
+                      })}
                     </Draggable>
                   ))}
                     {droppableProvided.placeholder}

src/components/portals/UseDraggableInPortal.ts

@@ -0,0 +1,32 @@
+import { DraggableProvided, DraggingStyle } from 'react-beautiful-dnd'
+import { ReactElement, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+
+export const useDraggableInPortal = () => {
+  const element = useRef<HTMLDivElement>(document.createElement('div')).current
+
+  useEffect(() => {
+    if (element) {
+      element.style.pointerEvents = 'none'
+      element.style.position = 'absolute'
+      element.style.height = '100%'
+      element.style.width = '100%'
+      element.style.top = '0'
+
+      document.body.appendChild(element)
+
+      return () => {
+        document.body.removeChild(element)
+      }
+    }
+  }, [element])
+
+  return (render: (provided: DraggableProvided) => ReactElement) => (provided: DraggableProvided) => {
+    const result = render(provided)
+    const style = provided.draggableProps.style as DraggingStyle
+    if (style.position === 'fixed') {
+      return createPortal(result, element)
+    }
+    return result
+  }
+}

src/components/styles/DragableStyle.ts

@@ -297,6 +297,7 @@ html {
 */
 .dbfolder-table-container tr input {
   background: var(--background-modifier-box-shadow);
+}
 
 .resizer {
   display: inline-block;
@@ -314,3 +315,8 @@ html {
 .isResizing {
   background: rgb(182, 119, 119);
 }
+
+.draggable {
+  top: auto !important;
+  left: auto !important;
+}