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

Commit eb9b665

Browse files
RafaelGBRafaelGB
committed
Merge branch '119-bug-disable-order-by-tag-breaks-the-table'
2 parents e467ec4 + a3c98cc commit eb9b665

19 files changed

+360
-116
lines changed

‎src/Settings.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { LOGGER } from "services/Logger";
66
import { developer_settings_section } from "settings/DeveloperSection";
77
import { columns_settings_section } from "settings/ColumnsSection";
88
import { folder_settings_section } from "settings/FolderSection";
9-
import { DEFAULT_COLUMN_CONFIG, SourceDataTypes, StyleClasses } from "helpers/Constants";
9+
import { StyleClasses } from "helpers/Constants";
1010
import { SettingHandlerResponse } from "settings/handlers/AbstractSettingHandler";
1111
import { media_settings_section } from "settings/MediaSection";
1212
import { source_settings_section } from "settings/SourceSection";

‎src/cdm/HeaderActionModel.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { SortedType } from "cdm/DatabaseModel";
2+
import { ColumnWidthState } from "cdm/StyleModel";
3+
import { HeaderMenuProps } from "cdm/HeaderModel";
4+
5+
export type HeaderActionResponse = {
6+
buttons: any[]
7+
headerMenuProps: HeaderMenuProps
8+
hooks: {
9+
setSortBy: (sortedType: SortedType[]) => void,
10+
setExpanded: (expanded: boolean) => void,
11+
setColumnWidthState: (a: ColumnWidthState) => void,
12+
columnWidthState: ColumnWidthState,
13+
setKeyState: (a: string) => void,
14+
keyState: string,
15+
}
16+
}
17+
18+
export interface HeaderAction {
19+
setNext(handler: HeaderAction): HeaderAction;
20+
handle(settingHandlerResponse: HeaderActionResponse): HeaderActionResponse;
21+
}

‎src/cdm/MetaType.ts‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/components/HeaderMenu.tsx‎

Lines changed: 17 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,11 @@ import {
55
StyleVariables,
66
} from "helpers/Constants";
77
import { dbTrim, c, getLabelHeader } from "helpers/StylesHelper";
8-
import ArrowUpIcon from "components/img/ArrowUp";
9-
import ArrowDownIcon from "components/img/ArrowDown";
10-
import ArrowLeftIcon from "components/img/ArrowLeft";
11-
import ArrowRightIcon from "components/img/ArrowRight";
128
import TrashIcon from "components/img/Trash";
139
import TextIcon from "components/img/Text";
1410
import MultiIcon from "components/img/Multi";
1511
import HashIcon from "components/img/Hash";
1612
import TaskIcon from "components/img/TaskIcon";
17-
import CrossIcon from "components/img/CrossIcon";
1813
import TagsIcon from "components/img/TagsIcon";
1914
import CalendarTimeIcon from "components/img/CalendarTime";
2015
import CalendarIcon from "components/img/CalendarIcon";
@@ -24,9 +19,10 @@ import { Column } from "react-table";
2419
import { usePopper } from "react-popper";
2520
import { HeaderContext } from "components/contexts/HeaderContext";
2621
import { getColumnWidthStyle } from "components/styles/ColumnWidthStyle";
27-
import { generateSortedColumns } from "components/behavior/SortingColumns";
2822
import { ColumnModal } from "./modals/ColumnModal";
2923
import { HeaderMenuProps } from "cdm/HeaderModel";
24+
import header_action_button_section from "components/headerActions/HeaderActionSections";
25+
import { HeaderActionResponse } from "cdm/HeaderActionModel";
3026

3127
const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
3228
/** state of width columns */
@@ -84,102 +80,21 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
8480
/**
8581
* Array of action buttons asociated to the header
8682
*/
87-
const buttons = [];
88-
if (column.dataType !== DataTypes.TASK) {
89-
buttons.push(
90-
{
91-
onClick: (e: any) => {
92-
const sortArray = generateSortedColumns(initialState, column, false);
93-
// Update state
94-
dispatch({
95-
type: ActionTypes.SET_SORT_BY,
96-
sortArray: sortArray,
97-
});
98-
setSortBy(sortArray);
99-
setExpanded(false);
100-
},
101-
icon:
102-
column.isSorted && !column.isSortedDesc ? (
103-
<CrossIcon />
104-
) : (
105-
<ArrowUpIcon />
106-
),
107-
label:
108-
column.isSorted && !column.isSortedDesc
109-
? "Remove ascending sort"
110-
: "Sort ascending",
111-
},
112-
{
113-
onClick: (e: any) => {
114-
const sortArray = generateSortedColumns(initialState, column, true);
115-
// Update state
116-
dispatch({
117-
type: ActionTypes.SET_SORT_BY,
118-
sortArray: sortArray,
119-
});
120-
setSortBy(sortArray);
121-
setExpanded(false);
122-
},
123-
icon:
124-
column.isSorted && column.isSortedDesc ? (
125-
<CrossIcon />
126-
) : (
127-
<ArrowDownIcon />
128-
),
129-
label:
130-
column.isSorted && column.isSortedDesc
131-
? "Remove descending sort"
132-
: "Sort descending",
133-
}
134-
);
135-
}
136-
buttons.push(
137-
{
138-
onClick: (e: any) => {
139-
dispatch({
140-
type: ActionTypes.ADD_COLUMN_TO_LEFT,
141-
columnId: column.id,
142-
focus: false,
143-
columnInfo: adjustWidthOfTheColumnsWhenAdd(column.position - 1),
144-
});
145-
setExpanded(false);
146-
},
147-
icon: <ArrowLeftIcon />,
148-
label: "Insert left",
83+
const initButtons: any[] = [];
84+
let headerActionResponse: HeaderActionResponse = {
85+
buttons: initButtons,
86+
headerMenuProps: headerMenuProps,
87+
hooks: {
88+
setSortBy: setSortBy,
89+
setExpanded: setExpanded,
90+
setColumnWidthState: setColumnWidthState,
91+
columnWidthState: columnWidthState,
92+
keyState: keyState,
93+
setKeyState: setkeyState,
14994
},
150-
{
151-
onClick: (e: any) => {
152-
dispatch({
153-
type: ActionTypes.ADD_COLUMN_TO_RIGHT,
154-
columnId: column.id,
155-
focus: false,
156-
columnInfo: adjustWidthOfTheColumnsWhenAdd(column.position + 1),
157-
});
158-
setExpanded(false);
159-
},
160-
icon: <ArrowRightIcon />,
161-
label: "Insert right",
162-
}
163-
);
164-
/**
165-
* Add extra buttons if column is not a metadata
166-
*/
167-
if (!column.isMetadata) {
168-
buttons.push({
169-
onClick: (e: any) => {
170-
dispatch({
171-
type: ActionTypes.DELETE_COLUMN,
172-
columnId: column.id,
173-
key: keyState,
174-
});
175-
setExpanded(false);
176-
delete columnWidthState.widthRecord[column.id];
177-
setColumnWidthState(columnWidthState);
178-
},
179-
icon: <TrashIcon />,
180-
label: "Delete",
181-
});
182-
}
95+
};
96+
headerActionResponse = header_action_button_section.run(headerActionResponse);
97+
18398
/**
18499
* Array of type headers available to change the data type of the column
185100
*/
@@ -467,7 +382,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
467382
padding: "4px 0px",
468383
}}
469384
>
470-
{buttons.map((button) => (
385+
{headerActionResponse.buttons.map((button) => (
471386
<div
472387
key={button.label}
473388
className="menu-item sort-button"

‎src/components/headerActions/HeaderActionSections.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { HeaderActionResponse } from "cdm/HeaderActionModel";
2+
import { AbstractChain, AbstractHandler } from "patterns/AbstractFactoryChain";
3+
import SortHandlerAction from "components/headerActions/handlers/buttons/SortHandlerAction";
4+
import AddColumnHandlerAction from "components/headerActions/handlers/buttons/AddColumnHandlerAction";
5+
import RemoveColumnHandlerAction from "components/headerActions/handlers/buttons/RemoveColumnHandlerAction";
6+
7+
class HeaderActionButtonSection extends AbstractChain<HeaderActionResponse> {
8+
9+
protected customHandle(abstractResponse: HeaderActionResponse): HeaderActionResponse {
10+
return abstractResponse;
11+
}
12+
13+
protected getHandlers(): AbstractHandler<HeaderActionResponse>[] {
14+
return [
15+
new SortHandlerAction(),
16+
new AddColumnHandlerAction(),
17+
new RemoveColumnHandlerAction()
18+
];
19+
}
20+
}
21+
22+
const header_action_button_section = new HeaderActionButtonSection();
23+
export default header_action_button_section;

‎src/components/headerActions/handlers/AbstractHeaderAction.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { HeaderAction, HeaderActionResponse } from "cdm/HeaderActionModel";
2+
3+
export abstract class AbstractHeaderAction implements HeaderAction {
4+
protected nextHandler: HeaderAction;
5+
6+
public goNext(settingHandlerResponse: HeaderActionResponse): HeaderActionResponse {
7+
// Check next handler
8+
if (this.nextHandler) {
9+
return this.nextHandler.handle(settingHandlerResponse);
10+
}
11+
return settingHandlerResponse;
12+
}
13+
14+
public setNext(handler: HeaderAction): HeaderAction {
15+
this.nextHandler = handler;
16+
return handler;
17+
}
18+
19+
20+
abstract handle(settingHandlerResponse: HeaderActionResponse): HeaderActionResponse;
21+
}

‎src/components/headerActions/handlers/buttons/AddColumnHandlerAction.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { HeaderActionResponse } from "cdm/HeaderActionModel";
2+
import { AbstractHeaderAction } from "components/headerActions/handlers/AbstractHeaderAction";
3+
import ArrowLeftIcon from "components/img/ArrowLeft";
4+
import ArrowRightIcon from "components/img/ArrowRight";
5+
import React from "react";
6+
import { ActionTypes } from "helpers/Constants";
7+
import { Column } from "react-table";
8+
import { getColumnWidthStyle } from "components/styles/ColumnWidthStyle";
9+
10+
export default class AddColumnHandlerAction extends AbstractHeaderAction {
11+
globalHeaderActionResponse: HeaderActionResponse;
12+
handle(headerActionResponse: HeaderActionResponse): HeaderActionResponse {
13+
this.globalHeaderActionResponse = headerActionResponse;
14+
this.addColumnButtons();
15+
return this.goNext(this.globalHeaderActionResponse);
16+
}
17+
18+
/**
19+
* Add sort buttons to the column header. Global header action response is updated.
20+
*/
21+
private addColumnButtons(): void {
22+
const { hooks } = this.globalHeaderActionResponse;
23+
const { column, initialState } =
24+
this.globalHeaderActionResponse.headerMenuProps.headerProps;
25+
const newButtons: any[] = [];
26+
newButtons.push(
27+
{
28+
onClick: (e: any) => {
29+
initialState.dispatch({
30+
type: ActionTypes.ADD_COLUMN_TO_LEFT,
31+
columnId: column.id,
32+
focus: false,
33+
columnInfo: this.adjustWidthOfTheColumnsWhenAdd(
34+
column.position - 1
35+
),
36+
});
37+
hooks.setExpanded(false);
38+
},
39+
icon: <ArrowLeftIcon />,
40+
label: "Insert left",
41+
},
42+
{
43+
onClick: (e: any) => {
44+
initialState.dispatch({
45+
type: ActionTypes.ADD_COLUMN_TO_RIGHT,
46+
columnId: column.id,
47+
focus: false,
48+
columnInfo: this.adjustWidthOfTheColumnsWhenAdd(
49+
column.position + 1
50+
),
51+
});
52+
hooks.setExpanded(false);
53+
},
54+
icon: <ArrowRightIcon />,
55+
label: "Insert right",
56+
}
57+
);
58+
this.globalHeaderActionResponse.buttons.push(...newButtons);
59+
}
60+
61+
/**
62+
* Adjust width of the columns when add a new column.
63+
* @param wantedPosition
64+
* @returns
65+
*/
66+
private adjustWidthOfTheColumnsWhenAdd(wantedPosition: number) {
67+
const { hooks } = this.globalHeaderActionResponse;
68+
const { initialState, column, rows } =
69+
this.globalHeaderActionResponse.headerMenuProps.headerProps;
70+
let columnNumber =
71+
initialState.columns.length - initialState.shadowColumns.length;
72+
// Check if column name already exists
73+
while (
74+
this.globalHeaderActionResponse.headerMenuProps.headerProps.allColumns.find(
75+
(o: Column) => o.id === `newColumn${columnNumber}`
76+
)
77+
) {
78+
columnNumber++;
79+
}
80+
const columnId = `newColumn${columnNumber}`;
81+
const columnLabel = `New Column ${columnNumber}`;
82+
hooks.columnWidthState.widthRecord[columnId] = getColumnWidthStyle(
83+
rows,
84+
column
85+
);
86+
hooks.setColumnWidthState(hooks.columnWidthState);
87+
return { name: columnId, position: wantedPosition, label: columnLabel };
88+
}
89+
}

0 commit comments

Comments
 (0)