Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Columns features #1904

Merged
merged 21 commits into from
Sep 15, 2023
Merged

Columns features #1904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
9395a5e
Add context menu for column headers for DLT files
sudeeptarlekar Aug 1, 2023
0c22007
Add onMouseLeave function for column header
sudeeptarlekar Aug 1, 2023
557a0cc
Add color pallet in context menu
sudeeptarlekar Aug 3, 2023
6c46e8e
Add color pallet and header checkbox in menu
sudeeptarlekar Aug 8, 2023
9c5b026
Change column colors and save details in storage
sudeeptarlekar Aug 10, 2023
292509c
Refactor the code
sudeeptarlekar Aug 10, 2023
4549067
Add click functionality on column for visibility
sudeeptarlekar Aug 10, 2023
b5d2c6b
Add OK button in the context menu
sudeeptarlekar Aug 10, 2023
7ad3317
Fix linting issue
sudeeptarlekar Aug 11, 2023
b4b728a
Remove header from context menu
sudeeptarlekar Aug 11, 2023
7cae441
Add context menu on right click
sudeeptarlekar Aug 14, 2023
d866a6f
Make white default color
sudeeptarlekar Aug 29, 2023
d5112ec
Fix lint issues
sudeeptarlekar Aug 29, 2023
ccfaf1a
Fix column resize issue
sudeeptarlekar Sep 6, 2023
fec851d
Resolved PR comments
sudeeptarlekar Sep 6, 2023
3504944
Resolved Linting issues
sudeeptarlekar Sep 6, 2023
d8b1435
Use setWidth method for changing column width
sudeeptarlekar Sep 7, 2023
29912af
Fix column color issue
sudeeptarlekar Sep 7, 2023
5bdf5c6
Fixed checkbox click issue
sudeeptarlekar Sep 8, 2023
18ccaca
Refactoring & cleanup
DmitryAstafyev Sep 14, 2023
bfb18c2
Fix selecting of default color (no color)
DmitryAstafyev Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
339 changes: 285 additions & 54 deletions application/client/src/app/schema/render/columns.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,176 @@
import { scope } from '@platform/env/scope';
import { hash } from '@platform/env/str';
import { Subject, Subjects } from '@platform/env/subscription';
import { error } from '@platform/log/utils';
import { bridge } from '@service/bridge';
import { LimittedValue } from '@ui/env/entities/value.limited';

import * as num from '@platform/env/num';

export interface Header {
caption: string;
desc: string;
visible: boolean;
width: LimittedValue | undefined;
color: string | undefined;
index: number;
}

export class Columns {
public readonly headers: Header[];
protected styles: Array<{ [key: string]: string }> = [];
protected readonly styles: Map<number, { [key: string]: string }> = new Map();
protected readonly logger = scope.getLogger('Columns');
protected readonly defaults: {
headers: {
caption: string;
desc: string;
}[];
visability: boolean[] | boolean;
widths: number[];
min: number[] | number;
max: number[] | number;
};
protected hash!: string;

protected setup(): void {
const headersVisability =
this.defaults.visability instanceof Array
? this.defaults.visability
: Array.from({ length: this.defaults.headers.length }, () => true);
const maxWidths: number[] =
this.defaults.max instanceof Array
? this.defaults.max
: (Array.from(
{ length: this.defaults.headers.length },
() => this.defaults.max,
) as number[]);
const minWidths: number[] =
this.defaults.min instanceof Array
? this.defaults.min
: (Array.from(
{ length: this.defaults.headers.length },
() => this.defaults.min,
) as number[]);
this.headers.clear();
this.styles.clear();
this.defaults.headers.forEach(
(
desc: {
caption: string;
desc: string;
},
index: number,
) => {
const header = {
caption: desc.caption,
desc: desc.desc,
width:
this.defaults.widths[index] === -1
? undefined
: new LimittedValue(
`column_width_${index}`,
minWidths[index],
maxWidths[index],
this.defaults.widths[index],
),
visible: headersVisability[index],
color: undefined,
index,
};
this.headers.set(index, header);
this.styles.set(index, {});
},
);
this.update().all();
this.hash = this.getHash();
}

protected getHeader(index: number): Header | undefined {
const header = this.headers.get(index);
if (header === undefined) {
this.logger.error(`Fail to find column with index=${index}`);
}
return header;
}
protected getHash(): string {
return hash(
Array.from(this.headers.values())
.map((header) => header.caption)
.join(';'),
).toString();
}
protected storage(): { load(): void; save(): void } {
return {
load: () => {
bridge
.storage(this.hash)
.read()
.then((content: string) => {
try {
const headers = JSON.parse(content);
if (!(headers instanceof Array)) {
this.logger.error(
`Content from file does not represent Headers as an Array. Gotten: ${typeof headers}`,
);
return;
}
if (headers.length !== this.headers.size) {
this.logger.error(
`Mismatching header count from last session. Previous: ${headers.length}; current: ${this.headers.size}.`,
);
return;
}
Array.from(this.headers.values()).forEach(
(header: Header, index: number) => {
if (headers[index].width !== undefined) {
this.width(index).set(headers[index].width);
}
if (headers[index].color !== undefined) {
this.color(index).set(headers[index].color);
}
if (header.visible !== headers[index].visible) {
this.visibility(index).set(headers[index].visible);
}
},
);
} catch (err) {
this.logger.error(`Fail to parse columns data due: ${error(err)}`);
}
})
.catch((err: Error) =>
this.logger.error(`Fail to load columns data due: ${err.message}`),
);
},
save: () => {
bridge
.storage(this.hash)
.write(
JSON.stringify(
Array.from(this.headers.values()).map((header) => {
return {
width:
header.width === undefined ? undefined : header.width.value,
color: header.color,
visible: header.visible,
};
}),
),
)
.catch((err: Error) => {
this.logger.error(`Fail to save columns data due: ${err.message}`);
});
},
};
}

public readonly headers: Map<number, Header> = new Map();
public subjects: Subjects<{
resized: Subject<number>;
visibility: Subject<void>;
visibility: Subject<number>;
colorize: Subject<number>;
}> = new Subjects({
resized: new Subject(),
visibility: new Subject(),
colorize: new Subject(),
});

constructor(
Expand All @@ -30,68 +183,146 @@ export class Columns {
min: number[] | number,
max: number[] | number,
) {
const headersVisability =
visability instanceof Array
? visability
: Array.from({ length: headers.length }, () => true);
const maxWidths =
max instanceof Array ? max : Array.from({ length: headers.length }, () => max);
const minWidths =
min instanceof Array ? min : Array.from({ length: headers.length }, () => min);
this.headers = headers.map((header, i) => {
return {
caption: header.caption,
desc: header.desc,
width:
widths[i] === -1
? undefined
: new LimittedValue(
`column_width_${i}`,
minWidths[i],
maxWidths[i],
widths[i],
),
visible: headersVisability[i],
index: i,
};
});
this.styles = this.headers.map((h) => {
return { width: `${h.width === undefined ? '' : `${h.width.value}px`}` };
});
this.defaults = {
headers,
visability,
widths,
min,
max,
};
this.setup();
this.storage().load();
}

public visible(column: number): boolean {
if (this.headers[column] === undefined) {
throw new Error(`Invalid index of column`);
}
return this.headers[column].visible;
public visibility(index: number): {
get(): boolean;
set(value?: boolean): void;
} {
const header = this.getHeader(index);
return {
get: (): boolean => {
return header === undefined ? true : header.visible;
},
set: (value?: boolean): void => {
if (header === undefined) {
return;
}
header.visible = value === undefined ? !header.visible : value;
this.headers.set(index, header);
this.subjects.get().visibility.emit(index);
this.storage().save();
},
};
}

public setWidth(column: number, width: number) {
if (isNaN(width) || !isFinite(width)) {
throw new Error(`Invalid width column value`);
}
const value = this.headers[column].width;
value !== undefined && value.set(width);
this.subjects.get().resized.emit(column);
public color(index: number): {
get(): string | undefined;
set(color: string | undefined): void;
} {
const header = this.getHeader(index);
return {
get: (): string | undefined => {
return header === undefined ? undefined : header.color;
},
set: (color: string | undefined): void => {
if (header === undefined) {
return;
}
header.color = color;
this.headers.set(index, header);
this.update().styles(index);
this.subjects.get().colorize.emit(index);
this.storage().save();
},
};
}

public width(index: number): {
get(): number | undefined;
set(width: number): void;
} {
const header = this.getHeader(index);
return {
get: (): number | undefined => {
return header === undefined ? undefined : header.width?.value;
},
set: (width: number): void => {
if (header === undefined) {
return;
}
if (!num.isValid(width)) {
this.logger.error(`Fail to set column's width: invalid width (${width})`);
return;
}
header.width !== undefined && header.width.set(width);
this.headers.set(index, header);
this.update().styles(index);
this.subjects.get().resized.emit(index);
this.storage().save();
},
};
}

public getWidth(column: number): number | undefined {
const value = this.headers[column].width;
return value !== undefined ? value.value : undefined;
public update(): {
all(): void;
styles(index: number): void;
} {
return {
all: (): void => {
this.headers.forEach((_header: Header, index: number) => {
this.update().styles(index);
this.subjects.get().visibility.emit(index);
this.subjects.get().resized.emit(index);
this.subjects.get().colorize.emit(index);
});
},
styles: (index: number): void => {
const style = this.styles.get(index);
if (style === undefined) {
this.logger.error(`Fail to find styles of column with index=${index}`);
return;
}
const width = this.width(index).get();
if (width === undefined) {
style['width'] = '';
} else {
style['width'] = `${width}px`;
}
const color = this.color(index).get();
style['color'] = color !== undefined ? color : '';
},
};
}

public getStyle(column: number): { [key: string]: string } {
const style = this.styles[column];
public style(index: number): { [key: string]: string } {
const style = this.styles.get(index);
if (style === undefined) {
this.logger.error(`Fail to find styles of column with index=${index}`);
return {};
}
const width = this.getWidth(column);
if (width === undefined) {
style['width'] = '';
} else {
style['width'] = `${width}px`;
}
return style;
}

public get(): {
all(): Header[];
visible(): Header[];
byIndex(index: number): Header | undefined;
} {
return {
all: (): Header[] => {
return Array.from(this.headers.values());
},
visible: (): Header[] => {
return Array.from(this.headers.values()).filter((h) => h.visible);
},
byIndex: (index: number): Header | undefined => {
return this.getHeader(index);
},
};
}

public reset(): void {
this.setup();
this.storage().save();
}
}
4 changes: 2 additions & 2 deletions application/client/src/app/ui/elements/scrollarea/row/columns/cell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export class Cell {
public update(): Update {
const update = {
styles: (): Update => {
this.styles = this._controller.getStyle(this.index);
this.styles = this._controller.style(this.index);
return update;
},
content: (content: string): Update => {
Expand All @@ -39,7 +39,7 @@ export class Cell {
return update;
},
visability: (): Update => {
this.visible = this._controller.visible(this.index);
this.visible = this._controller.visibility(this.index).get();
return update;
},
};
Expand Down
Loading