Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit f8fe0d2

Browse files
RafaelGBRafaelGB
committed
Merge branch '63-bug-dont-move-column-after-last-column'
2 parents 05e3a3d + 35eee92 commit f8fe0d2

File tree

9 files changed

+262
-98
lines changed

9 files changed

+262
-98
lines changed

‎TestVault/template/database.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
3+
database-plugin: basic
4+
5+
---
6+
7+
<%%
8+
name: new database
9+
description: new description
10+
columns:
11+
__file__:
12+
key: __file__
13+
input: markdown
14+
label: File
15+
accessor: __file__
16+
isMetadata: true
17+
skipPersist: false
18+
csvCandidate: true
19+
position: 1
20+
config:
21+
text_column:
22+
input: text
23+
accessor: text_column
24+
key: text_column
25+
label: text column
26+
position: 2
27+
config:
28+
isInline: false
29+
media_height: 100
30+
media_width: 100
31+
enable_media_view: false
32+
selected_column:
33+
input: select
34+
accessor: selected_column
35+
key: selected_column
36+
label: selected column
37+
position: 3
38+
options:
39+
config:
40+
isInline: false
41+
media_height: 100
42+
media_width: 100
43+
enable_media_view: false
44+
number_column:
45+
input: number
46+
accessor: number_column
47+
key: number_column
48+
label: number column
49+
position: 4
50+
config:
51+
isInline: false
52+
media_height: 100
53+
media_width: 100
54+
enable_media_view: false
55+
Datetime_column:
56+
input: calendar_time
57+
accessor: Datetime_column
58+
key: Datetime_column
59+
label: Datetime column
60+
position: 6
61+
config:
62+
enable_media_view: true
63+
media_width: 100
64+
media_height: 100
65+
isInline: false
66+
source_data: current_folder
67+
Date_column:
68+
input: calendar
69+
accessor: Date_column
70+
key: Date_column
71+
label: Date column
72+
position: 5
73+
config:
74+
enable_media_view: true
75+
media_width: 100
76+
media_height: 100
77+
isInline: false
78+
source_data: current_folder
79+
__created__:
80+
key: __created__
81+
input: calendar_time
82+
label: Created
83+
accessor: __created__
84+
isMetadata: true
85+
skipPersist: false
86+
csvCandidate: true
87+
position: 8
88+
config:
89+
__modified__:
90+
key: __modified__
91+
input: calendar_time
92+
label: Modified
93+
accessor: __modified__
94+
isMetadata: true
95+
skipPersist: false
96+
csvCandidate: true
97+
position: 9
98+
config:
99+
checkbox_column:
100+
input: checkbox
101+
accessor: checkbox_column
102+
key: checkbox_column
103+
label: checkbox column
104+
position: 7
105+
config:
106+
enable_media_view: true
107+
media_width: 100
108+
media_height: 100
109+
isInline: false
110+
source_data: current_folder
111+
config:
112+
enable_show_state: false
113+
group_folder_column:
114+
remove_field_when_delete_column: true
115+
show_metadata_created: true
116+
show_metadata_modified: true
117+
source_data: current_folder
118+
source_form_result:
119+
show_metadata_tasks: true
120+
filters:
121+
%%>

‎TestVault/template/test1.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎TestVault/template/test2.md‎

Whitespace-only changes.

‎TestVault/template/test3.md‎

Whitespace-only changes.

‎TestVault/template/test4.md‎

Whitespace-only changes.

‎docs/docs/changelog.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
- checkbox color supports all type of dark mode modes [ISSUE#85](https://github.com/RafaelGB/obsidian-db-folder/issues/85)
55
- Inconsistent name of calendar and calendar time headers fixed [ISSUE#86](https://github.com/RafaelGB/obsidian-db-folder/issues/86)
66
- Visual bug after deleting and adding the same column. The data was removed into the note but not into the table [ISSUE#83](https://github.com/RafaelGB/obsidian-db-folder/issues/83)
7+
- Add column is out of draggable area now, so you cant dnd to the right [ISSUE#63](https://github.com/RafaelGB/obsidian-db-folder/issues/63)
78
## 1.6.2
89
*Published on 2022/06/02*
910
### No longer broken

‎src/cdm/FolderModel.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export interface BaseColumn {
4949
position?: number;
5050
isMetadata?: boolean;
5151
skipPersist?: boolean;
52+
isDragDisabled?: boolean;
5253
config: ConfigColumn;
5354
}
5455
export interface TableColumn extends BaseColumn {

‎src/components/Table.tsx‎

Lines changed: 132 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,12 @@ import { TableDataType, RowDataType, TableColumn } from "cdm/FolderModel";
1414
import { DatabaseView } from "DatabaseView";
1515
import StateManager from "StateManager";
1616
import { getNormalizedPath } from "helpers/VaultManagement";
17-
import { ActionTypes, DatabaseCore, MetadataColumns } from "helpers/Constants";
17+
import {
18+
ActionTypes,
19+
DatabaseCore,
20+
DataTypes,
21+
MetadataColumns,
22+
} from "helpers/Constants";
1823
import PlusIcon from "components/img/Plus";
1924
import { LOGGER } from "services/Logger";
2025
import DefaultCell from "components/Cell";
@@ -255,107 +260,136 @@ export function Table(initialState: TableDataType) {
255260
/>
256261
{/** Headers */}
257262
{headerGroups.map((headerGroup, i) => (
258-
<DragDropContext
259-
key={`DragDropContext-${i}`}
260-
onDragStart={() => {
261-
currentColOrder.current = allColumns.map((o: Column) => o.id);
262-
}}
263-
onDragUpdate={(dragUpdateObj, b) => {
264-
const colOrder = [...currentColOrder.current];
265-
const sIndex = dragUpdateObj.source.index;
266-
const dIndex =
267-
dragUpdateObj.destination && dragUpdateObj.destination.index;
263+
<div
264+
{...headerGroup.getHeaderGroupProps({
265+
style: {
266+
width:
267+
totalWidth -
268+
columnsWidthState.widthRecord[MetadataColumns.ADD_COLUMN],
269+
},
270+
})}
271+
>
272+
<DragDropContext
273+
key={`DragDropContext-${i}`}
274+
onDragStart={() => {
275+
currentColOrder.current = allColumns.map((o: Column) => o.id);
276+
}}
277+
onDragUpdate={(dragUpdateObj, b) => {
278+
const colOrder = [...currentColOrder.current];
279+
const sIndex = dragUpdateObj.source.index;
280+
const dIndex =
281+
dragUpdateObj.destination &&
282+
dragUpdateObj.destination.index;
268283

269-
if (typeof sIndex === "number" && typeof dIndex === "number") {
270-
colOrder.splice(sIndex, 1);
271-
colOrder.splice(dIndex, 0, dragUpdateObj.draggableId);
272-
setColumnOrder(colOrder);
273-
}
274-
}}
275-
onDragEnd={(result) => {
276-
// save on disk in case of changes
277-
if (result.source.index !== result.destination!.index) {
278-
initialState.view.diskConfig.reorderColumns(
279-
(state as any).columnOrder
280-
);
281-
}
284+
if (
285+
typeof sIndex === "number" &&
286+
typeof dIndex === "number"
287+
) {
288+
colOrder.splice(sIndex, 1);
289+
colOrder.splice(dIndex, 0, dragUpdateObj.draggableId);
290+
setColumnOrder(colOrder);
291+
}
292+
}}
293+
onDragEnd={(result) => {
294+
// save on disk in case of changes
295+
if (result.source.index !== result.destination!.index) {
296+
initialState.view.diskConfig.reorderColumns(
297+
(state as any).columnOrder
298+
);
299+
}
282300

283-
// clear the current order
284-
currentColOrder.current = null;
285-
}}
286-
>
287-
<Droppable
288-
key={`Droppable-${i}`}
289-
droppableId="droppable"
290-
direction="horizontal"
301+
// clear the current order
302+
currentColOrder.current = null;
303+
}}
291304
>
292-
{(provided, snapshot) => (
293-
<div
294-
key={`div-Droppable-${i}`}
295-
{...provided.droppableProps}
296-
{...headerGroup.getHeaderGroupProps({
297-
style: {
298-
...getDndListStyle(snapshot.isDraggingOver),
299-
width:
300-
totalWidth -
301-
columnsWidthState.widthRecord[
302-
MetadataColumns.ADD_COLUMN
303-
],
304-
},
305-
})}
306-
ref={provided.innerRef}
307-
className={`${c("tr header-group")}`}
308-
>
309-
{headerGroup.headers.map((column, index) => (
310-
<Draggable
311-
key={`Draggable-${column.id}`}
312-
draggableId={`${column.id}`}
313-
index={index}
314-
isDragDisabled={(column as any).skipPersist}
315-
disableInteractiveElementBlocking={
316-
(column as any).skipPersist
317-
}
318-
>
319-
{(provided, snapshot) => {
320-
const tableCellBaseProps = {
321-
...provided.draggableProps,
322-
...provided.dragHandleProps,
323-
...column.getHeaderProps({
324-
style: {
325-
width: `${
326-
columnsWidthState.widthRecord[column.id]
327-
}px`,
328-
...getDndItemStyle(
329-
snapshot.isDragging,
330-
provided.draggableProps.style
331-
),
332-
},
333-
}),
334-
className: `${c("th noselect")} header`,
335-
key: `div-Draggable-${column.id}`,
336-
// {...extraProps}
337-
ref: provided.innerRef,
338-
};
339-
return (
340-
<div {...tableCellBaseProps}>
341-
<HeaderContext.Provider
342-
value={{
343-
columnWidthState: columnsWidthState,
344-
setColumnWidthState: setColumnsWidthState,
345-
}}
346-
>
347-
{column.render("Header")}
348-
</HeaderContext.Provider>
349-
</div>
350-
);
351-
}}
352-
</Draggable>
353-
))}
354-
{provided.placeholder}
305+
<Droppable
306+
key={`Droppable-${i}`}
307+
droppableId="droppable"
308+
direction="horizontal"
309+
>
310+
{(provided, snapshot) => (
311+
<div
312+
key={`div-Droppable-${i}`}
313+
{...provided.droppableProps}
314+
{...headerGroup.getHeaderGroupProps({
315+
style: {
316+
...getDndListStyle(snapshot.isDraggingOver),
317+
},
318+
})}
319+
ref={provided.innerRef}
320+
className={`${c("tr header-group")}`}
321+
>
322+
{headerGroup.headers
323+
.filter(
324+
(o: any) => o.key !== MetadataColumns.ADD_COLUMN
325+
)
326+
.map((column, index) => (
327+
<Draggable
328+
key={`Draggable-${column.id}`}
329+
draggableId={`${column.id}`}
330+
index={index}
331+
isDragDisabled={
332+
(column as unknown as TableColumn).isDragDisabled
333+
}
334+
disableInteractiveElementBlocking={
335+
(column as unknown as TableColumn).isDragDisabled
336+
}
337+
>
338+
{(provided, snapshot) => {
339+
const tableCellBaseProps = {
340+
...provided.draggableProps,
341+
...provided.dragHandleProps,
342+
...column.getHeaderProps({
343+
style: {
344+
width: `${
345+
columnsWidthState.widthRecord[column.id]
346+
}px`,
347+
...getDndItemStyle(
348+
snapshot.isDragging,
349+
provided.draggableProps.style
350+
),
351+
},
352+
}),
353+
className: `${c("th noselect")} header`,
354+
key: `div-Draggable-${column.id}`,
355+
// {...extraProps}
356+
ref: provided.innerRef,
357+
};
358+
return (
359+
<div {...tableCellBaseProps}>
360+
<HeaderContext.Provider
361+
value={{
362+
columnWidthState: columnsWidthState,
363+
setColumnWidthState: setColumnsWidthState,
364+
}}
365+
>
366+
{column.render("Header")}
367+
</HeaderContext.Provider>
368+
</div>
369+
);
370+
}}
371+
</Draggable>
372+
))}
373+
{provided.placeholder}
374+
</div>
375+
)}
376+
</Droppable>
377+
</DragDropContext>
378+
{headerGroup.headers
379+
.filter((o: any) => o.key === MetadataColumns.ADD_COLUMN)
380+
.map((column, index) => (
381+
<div {...column.getHeaderProps()}>
382+
<HeaderContext.Provider
383+
value={{
384+
columnWidthState: columnsWidthState,
385+
setColumnWidthState: setColumnsWidthState,
386+
}}
387+
>
388+
{column.render("Header")}
389+
</HeaderContext.Provider>
355390
</div>
356-
)}
357-
</Droppable>
358-
</DragDropContext>
391+
))}
392+
</div>
359393
))}
360394
</div>
361395
{/** Body */}

0 commit comments

Comments
 (0)