aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionSchemaHeaders.tsx18
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx33
-rw-r--r--src/new_fields/SchemaHeaderField.ts22
3 files changed, 45 insertions, 28 deletions
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 62762962e..4f0681f6c 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -24,8 +24,7 @@ export interface HeaderProps {
setIsEditing: (isEditing: boolean) => void;
deleteColumn: (column: string) => void;
setColumnType: (column: SchemaHeaderField, type: ColumnType) => void;
- setColumnSort: (key: string, desc: boolean) => void;
- removeColumnSort: (key: string) => void;
+ setColumnSort: (column: SchemaHeaderField, desc: boolean | undefined) => void;
setColumnColor: (column: SchemaHeaderField, color: string) => void;
}
@@ -51,7 +50,6 @@ export class CollectionSchemaHeader extends React.Component<HeaderProps> {
onlyShowOptions={false}
setColumnType={this.props.setColumnType}
setColumnSort={this.props.setColumnSort}
- removeColumnSort={this.props.removeColumnSort}
setColumnColor={this.props.setColumnColor}
/>
</div>
@@ -87,8 +85,7 @@ export interface ColumnMenuProps {
deleteColumn: (column: string) => void;
onlyShowOptions: boolean;
setColumnType: (column: SchemaHeaderField, type: ColumnType) => void;
- setColumnSort: (key: string, desc: boolean) => void;
- removeColumnSort: (key: string) => void;
+ setColumnSort: (column: SchemaHeaderField, desc: boolean | undefined) => void;
anchorPoint?: any;
setColumnColor: (column: SchemaHeaderField, color: string) => void;
}
@@ -123,6 +120,10 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
this.props.setColumnType(this.props.columnField, type);
}
+ changeColumnSort = (desc: boolean | undefined): void => {
+ this.props.setColumnSort(this.props.columnField, desc);
+ }
+
changeColumnColor = (color: string): void => {
this.props.setColumnColor(this.props.columnField, color);
}
@@ -168,19 +169,20 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
}
renderSorting = () => {
+ let sort = this.props.columnField.desc;
return (
<div className="collectionSchema-headerMenu-group">
<label>Sort by:</label>
<div className="columnMenu-sort">
- <div className="columnMenu-option" onClick={() => this.props.setColumnSort(this.props.columnField.heading, true)}>
+ <div className={"columnMenu-option" + (sort === true ? " active" : "")} onClick={() => this.changeColumnSort(true)}>
<FontAwesomeIcon icon="sort-amount-down" size="sm" />
Sort descending
</div>
- <div className="columnMenu-option" onClick={() => this.props.setColumnSort(this.props.columnField.heading, false)}>
+ <div className={"columnMenu-option" + (sort === false ? " active" : "")} onClick={() => this.changeColumnSort(false)}>
<FontAwesomeIcon icon="sort-amount-up" size="sm" />
Sort ascending
</div>
- <div className="columnMenu-option" onClick={() => this.props.removeColumnSort(this.props.columnField.heading)}>
+ <div className="columnMenu-option" onClick={() => this.changeColumnSort(undefined)}>
<FontAwesomeIcon icon="times" size="sm" />
Clear sorting
</div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 86d3d01ef..84f8ec505 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -275,7 +275,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
@observable _headerIsEditing: boolean = false;
@observable _cellIsEditing: boolean = false;
@observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 };
- @observable _sortedColumns: Map<string, { id: string, desc: boolean }> = new Map();
@observable _openCollections: Array<string> = [];
@computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
@@ -308,8 +307,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
}
@computed get resized(): { "id": string, "value": number }[] {
- let columns = this.columns;
- return columns.reduce((resized, shf) => {
+ return this.columns.reduce((resized, shf) => {
if (shf.width > -1) {
resized.push({ "id": shf.heading, "value": shf.width });
}
@@ -317,6 +315,15 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
}, [] as { "id": string, "value": number }[]);
}
+ @computed get sorted(): { "id": string, "desc": boolean }[] {
+ return this.columns.reduce((sorted, shf) => {
+ if (shf.desc) {
+ sorted.push({ "id": shf.heading, "desc": shf.desc });
+ }
+ return sorted;
+ }, [] as { "id": string, "desc": boolean }[]);
+ }
+
@computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
@computed get tableColumns(): Column<Doc>[] {
let possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1);
@@ -358,7 +365,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
deleteColumn={this.deleteColumn}
setColumnType={this.setColumnType}
setColumnSort={this.setColumnSort}
- removeColumnSort={this.removeColumnSort}
setColumnColor={this.setColumnColor}
/>;
@@ -689,13 +695,13 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
}
@action
- setColumnSort = (column: string, descending: boolean) => {
- this._sortedColumns.set(column, { id: column, desc: descending });
- }
-
- @action
- removeColumnSort = (column: string) => {
- this._sortedColumns.delete(column);
+ setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => {
+ let columns = this.columns;
+ let index = columns.findIndex(c => c.heading === columnField.heading);
+ let column = columns[index];
+ column.setDesc(descending);
+ columns[index] = column;
+ this.columns = columns;
}
get documentKeys() {
@@ -750,7 +756,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
getTdProps={this.getTdProps}
sortable={false}
TrComponent={MovableRow}
- sorted={Array.from(this._sortedColumns.values())}
+ sorted={this.sorted}
expanded={expanded}
resized={this.resized}
onResizedChange={this.onResizedChange}
@@ -770,7 +776,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
newResized.forEach(resized => {
let index = columns.findIndex(c => c.heading === resized.id);
let column = columns[index];
- column.width = resized.value;
+ column.setWidth(resized.value);
+ columns[index] = column;
});
this.columns = columns;
}
diff --git a/src/new_fields/SchemaHeaderField.ts b/src/new_fields/SchemaHeaderField.ts
index bccf82a9e..0c19d211a 100644
--- a/src/new_fields/SchemaHeaderField.ts
+++ b/src/new_fields/SchemaHeaderField.ts
@@ -51,19 +51,17 @@ export class SchemaHeaderField extends ObjectField {
type: number;
@serializable(primitive())
width: number;
+ @serializable(primitive())
+ desc: boolean | undefined; // boolean determines sort order, undefined when no sort
- constructor(heading: string = "", color: string = RandomPastel(), type?: ColumnType, width?: number) {
+ constructor(heading: string = "", color: string = RandomPastel(), type?: ColumnType, width?: number, desc?: boolean) {
super();
this.heading = heading;
this.color = color;
- if (type) {
- this.type = type;
- }
- else {
- this.type = 0;
- }
+ this.type = type ? type : 0;
this.width = width ? width : -1;
+ this.desc = desc;
}
setHeading(heading: string) {
@@ -81,6 +79,16 @@ export class SchemaHeaderField extends ObjectField {
this[OnUpdate]();
}
+ setWidth(width: number) {
+ this.width = width;
+ this[OnUpdate]();
+ }
+
+ setDesc(desc: boolean | undefined) {
+ this.desc = desc;
+ this[OnUpdate]();
+ }
+
[Copy]() {
return new SchemaHeaderField(this.heading, this.color, this.type);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 06:45:57 +0000