Skip to content

Pinned rows navigation - draft #591

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

Open
gwhrus wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Pinned rows navigation - draft #591

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1b0bd8f
pager - dont propagate button press
gwhrus Mar 17, 2022
fcd76b2
draft - pinned rows navigation
gwhrus Apr 8, 2022
57964ec
pinned rows: fix for scrolling and cell navigating
gwhrus Apr 8, 2022
115e405
pinned rows - fixes
gwhrus Apr 12, 2022
fee7f2c
small fix
gwhrus Apr 14, 2022
2acb7cd
style and nav fixes in grid with pinned rows
gwhrus Apr 14, 2022
ddc0190
Pinned rows - added to scene
gwhrus Apr 20, 2022
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
4 changes: 2 additions & 2 deletions packages/qgrid-core/src/cell/cell.selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ export class CellSelector {
}

mapFromCells(items) {
const { table } = this;
const { model, table } = this;
const result = [];
const rows = table.data.rows();
const rows = model.row().pinTop.concat(model.scene().rows).concat(model.row().pinBottom);
const columns = table.data.columns();

for (let item of items) {
Expand Down
32 changes: 17 additions & 15 deletions packages/qgrid-core/src/dom/selector/selector.factory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,31 +17,33 @@ export class SelectorFactory {
const entries =
selectorMark
.select()
.map(({ element, rowRange, columnRange }) => ({
.map(({ name, element, rowRange, columnRange }) => ({
name,
matrix: matrix.build(element),
rowRange,
columnRange
}));

const selectorFactory = context => {
return entries.map(entry => ({
invoke: f => {
const unitFactory = new UnitFactory(entry.rowRange, entry.columnRange);
const selector = new Selector(entry.matrix, bag, unitFactory);
return entries.map(entry => ({
invoke: f => {
const unitFactory = new UnitFactory(entry.rowRange, entry.columnRange);
const selector = new Selector(entry.matrix, bag, unitFactory);

const args = [];
args.push(selector);
const args = [];
args.push(selector);

if (context.hasOwnProperty('row')) {
args.push(context.row - entry.rowRange.start);
}
if (context.hasOwnProperty('row')) {
args.push(context.row - entry.rowRange.start);
}

if (context.hasOwnProperty('column')) {
args.push(context.column - entry.columnRange.start);
}
if (context.hasOwnProperty('column')) {
args.push(context.column - entry.columnRange.start);
}

return f(...args);
}
return f(...args);
},
type: entry.name
Copy link
Contributor Author

@gwhrus gwhrus Apr 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding this and factory pattern?

}));
};

Expand Down
36 changes: 25 additions & 11 deletions packages/qgrid-core/src/dom/selector/selector.mark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,44 @@ export class SelectorMark {
select() {
const result = [];
const addNext = this.addFactory(result);

addNext('left');
addNext('mid');
addNext('right');

if (this.name == 'body') {
addNext('left','top');
addNext('mid','top');
addNext('right','top');
addNext('left','mid');
addNext('mid','mid');
Copy link
Contributor

@Dalantren Dalantren Apr 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

['left', 'mid', 'right'].forEach(pin => (['top', 'mid', 'bottom'].forEach(pos => addNext(pin, pos))));

addNext('right','mid');
addNext('left','bottom');
addNext('mid','bottom');
addNext('right','bottom');
}
else {
addNext('left', null);
addNext('mid', null);
addNext('right', null);
}
return result;
}

addFactory(result) {
const { model } = this;
const { rows } = model.scene();
const columnArea = model.scene().column.area;

return pin => {
const name = pin ? `${this.name}-${pin}` : this.name;
return (pinLR, pinTB) => {
const rows = pinTB == 'top' ? model.row().pinTop : pinTB == 'bottom' ? model.row().pinBottom : model.scene().rows;
const name = this.name + ((pinTB && pinTB !== 'mid') ? `-${pinTB}` : '') + (pinLR ? `-${pinLR}` : '');
const element = this.markup[name];
if (element) {
const prev = result[result.length - 1];
const prev = result[result.length - 1] && result[result.length - 1].name === (this.name + ((pinTB == 'top' || pinTB == 'bottom') ? `-${pinTB}` : '')) ?
result[result.length - 1] : null;
const columnStart = prev ? prev.columnRange.end : 0;
const columnCount = columnArea[pin].length;
const rowStart = 0;
const columnCount = columnArea[pinLR].length;
const rowStart = pinTB === 'mid' ? model.row().pinTop.length : pinTB === 'bottom' ?
model.row().pinTop.length + model.scene().rows.length : 0;
const rowCount = rows.length;

result.push({
name: this.name + ((pinTB == 'top' || pinTB == 'bottom') ? `-${pinTB}` : ''),
element,
columnRange: new Range(columnStart, columnStart + columnCount),
rowRange: new Range(rowStart, rowStart + rowCount)
Expand Down
8 changes: 6 additions & 2 deletions packages/qgrid-core/src/dom/selector/selector.mediate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export class SelectorMediator {
}

columnCount(rowIndex) {
const selectors = this.buildSelectors({ row: rowIndex });
const selectors = this.buildSelectors({ row: rowIndex }).filter(x => x.type === 'body');
if (!selectors.length) {
return 0;
}
Expand All @@ -34,8 +34,12 @@ export class SelectorMediator {
if (!selectors.length) {
return 0;
}

const rowCountTop = max(selectors.filter(x => x.type === 'body-top')?.map(s => s.invoke((s, columnIndex) => s.rowCount(columnIndex)))) ?? 0;
const rowCount = max(selectors.filter(x => x.type === 'body')?.map(s => s.invoke((s, columnIndex) => s.rowCount(columnIndex)))) ?? 0;
const rowCountBottom = max(selectors.filter(x => x.type === 'body-bottom')?.map(s => s.invoke((s, columnIndex) => s.rowCount(columnIndex)))) ?? 0;

return max(selectors.map(s => s.invoke((s, columnIndex) => s.rowCount(columnIndex))));
return rowCountTop + rowCount + rowCountBottom;
}

rows(columnIndex) {
Expand Down
20 changes: 15 additions & 5 deletions packages/qgrid-core/src/dom/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,9 @@ export class View extends Unit {
}

isFocused() {
return this.getElementsCore('body')
.some(element => this.isFocusedCore(element));
return this.getElementsCore('body').some(element => this.isFocusedCore(element)) ||
this.getElementsCore('body-top').some(element => this.isFocusedCore(element)) ||
Copy link
Collaborator

@klumba12 klumba12 Apr 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix formatting, add offset

this.getElementsCore('body-bottom').some(element => this.isFocusedCore(element));
}

addLayer(name) {
Expand Down Expand Up @@ -107,12 +108,12 @@ export class View extends Unit {
bodyMid.scrollLeft = value;
}

const bodyTop = markup['body-top'];
const bodyTop = markup['body-top-mid'];
if (bodyTop) {
bodyTop.scrollLeft = value;
}

const bodyBottom = markup['body-bottom'];
const bodyBottom = markup['body-bottom-mid'];
if (bodyBottom) {
bodyBottom.scrollLeft = value;
}
Expand Down Expand Up @@ -157,7 +158,16 @@ export class View extends Unit {
break;
}
case 'top': {
return true;
target = target.element;
if (target) {
const { markup } = this.context;
const bodyLeft = markup['body-left'];
const bodyMid = markup['body-mid'];
const bodyRight = markup['body-right'];
return (bodyLeft && isParentOf(bodyLeft, target)) ||
(bodyMid && isParentOf(bodyMid, target)) ||
(bodyRight && isParentOf(bodyRight, target));
}
}
}
}
Expand Down
9 changes: 5 additions & 4 deletions packages/qgrid-core/src/navigation/navigation.let.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ export class NavigationLet {
this.plugin = plugin;

const navigation = new Navigation(model, table);
let focusBlurs = [];
let focusBlurs = [];

shortcut.register(navigation.commands);
shortcut.register(navigation.commands);

this.focus = new Command({
source: 'navigation.view',
Expand Down Expand Up @@ -168,10 +168,11 @@ export class NavigationLet {
}

scroll(view, target) {
const { model } = this.plugin;
const { model, table } = this.plugin;
const { scroll } = model;
Fastdom.measure(() => {
const tr = target.rect();
const tr = target.rect();

const vr = view.rect('body-mid');
const state = {};

Expand Down
17 changes: 12 additions & 5 deletions packages/qgrid-core/src/view/view.host.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,15 +206,22 @@ export class ViewHost {
}

const tr = this.findRow(e);
if (tr) {
const { index } = tr;
if (tr) {
const { index, pin } = tr;

if (highlight.row.canExecute(index)) {
let correctedIndex = index;
if (highlight.row.canExecute(correctedIndex)) {
Copy link
Collaborator

@klumba12 klumba12 Apr 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all logic should be encapsulated under the dom table class, users should not be aware of pinned or unpinned options

rows
.filter(i => i !== index)
.forEach(i => highlight.row.execute(i, false));

highlight.row.execute(index, true);
if (pin === 'body') {
correctedIndex += model.row().pinTop.length;
}
if (pin === 'bottom') {
correctedIndex += model.row().pinTop.length + model.scene().rows.length;
}
highlight.row.execute(correctedIndex, true);
}
}

Expand Down Expand Up @@ -344,7 +351,7 @@ export class ViewHost {
const { table } = this.plugin;
const pathFinder = new PathService(table.box.bag.body);
const path = eventPath(e);
return pathFinder.row(path);
return pathFinder.row(path);
Copy link
Collaborator

@klumba12 klumba12 Apr 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix formatting

}

clearHighlight() {
Expand Down
2 changes: 1 addition & 1 deletion packages/qgrid-ngx-theme-material/src/lib/templates/plugin-pager-target.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<mat-menu #menu="matMenu"
class="q-grid-mat-menu">
<mat-card *ngIf="trigger.menuOpen">
<mat-card *ngIf="trigger.menuOpen" [q-grid-stop-propagate]="['keydown', 'keypress', 'keyup']">
Copy link
Collaborator

@klumba12 klumba12 Apr 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix formatting please

  *ngIf="..."
  [q-grid-stop-propagate]="..."

<mat-form-field>
<input id="q-grid-menu-input"
matInput
Expand Down
5 changes: 3 additions & 2 deletions packages/qgrid-ngx/src/lib/body/body-core.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,12 @@
<tr *ngFor="let $row of $view.body.render.rows[pin]; index as $rowIndex; trackBy: rowId"
[q-grid-core-tr]="$row"
[q-grid-core-index]="$rowIndex"
q-grid-core-source="body">
q-grid-core-source="body"
[q-grid-core-pin]="pin">
<td *ngFor="let $column of $view.body.render.columns($row, $table.pin, $rowIndex); index as $columnIndex; trackBy: columnId"
[attr.rowspan]="$view.body.render.rowspan($row, $column, $rowIndex, $columnIndex)"
[attr.colspan]="$view.body.render.colspan($row, $column, $rowIndex, $columnIndex)">
<ng-container [q-grid-core-td]="$column"
<ng-container [q-grid-core-td]="$column" [q-grid-core-pin]="pin"
Copy link
Collaborator

@klumba12 klumba12 Apr 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can understand pin from TableService no need to use binding

[q-grid-core-label]="$view.body.render.getLabel($row, $column.model, $rowIndex, $columnIndex)"
[q-grid-core-value]="$view.body.render.getValue($row, $column.model, $rowIndex, $columnIndex)">
</ng-container>
Expand Down
18 changes: 16 additions & 2 deletions packages/qgrid-ngx/src/lib/body/td-core.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,13 @@ export class TdCoreDirective implements DomTd, OnInit, OnDestroy, OnChanges {

@Input('q-grid-core-td') columnView: ColumnView;

@Input('q-grid-core-pin') pin: string;

element: HTMLElement;
changes: SimpleChange;

model;

constructor(
public $view: GridLet,
private root: GridRoot,
Expand All @@ -40,7 +44,10 @@ export class TdCoreDirective implements DomTd, OnInit, OnDestroy, OnChanges {
}

ngOnInit() {
const { table } = this.root;
const { table, model } = this.root;

this.model = model;
Copy link
Collaborator

@klumba12 klumba12 Apr 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why u need to store this.model? u can get it from this.root always


table.box.bag.body.addCell(this);

this.cellClass.toBody(this.element, this.column);
Expand Down Expand Up @@ -132,7 +139,14 @@ export class TdCoreDirective implements DomTd, OnInit, OnDestroy, OnChanges {
}

get rowIndex() {
return this.tr.index;
let index = this.tr.index;
if (this.pin == 'body') {
index += this.model.row().pinTop.length;
}
if (this.pin == 'bottom') {
index += this.model.row().pinTop.length + this.model.scene().rows.length;
Copy link
Collaborator

@klumba12 klumba12 Apr 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think model.scene should also contain pinned rows

Copy link
Collaborator

@klumba12 klumba12 Apr 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also this is an interesting questions if we have page size set to 50 and have 2 pinned rows, overall we should show 50 or 52 rows?

}
return index;
}

get dataRowIndex() {
Expand Down
7 changes: 5 additions & 2 deletions packages/qgrid-ngx/src/lib/cell-handler/cell-handler.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { CellView, EditService, Fastdom, jobLine, NavigationState, RowDetails } from '@qgrid/core';
import { CellView, EditService, Fastdom, jobLine, NavigationState, RowDetails, Td } from '@qgrid/core';
import { TdCoreDirective } from '../body/td-core.directive';
import { GridEventArg } from '../grid/grid-model';
import { GridPlugin } from '../plugin/grid-plugin';

Expand Down Expand Up @@ -107,7 +108,9 @@ export class CellHandlerComponent implements OnInit, AfterViewInit {

const headHeight = table.view.height('head-mid');

const top = Math.max(headHeight, (target.offsetTop - scrollState.top));
const top = Math.max(headHeight, (target.offsetTop -
(!table.box.bag.body.findModel(target) || (table.box.bag.body.findModel(target) as TdCoreDirective).pin == 'body' ? scrollState.top : 0)));

const left = (target.offsetLeft - (cell.column.pin === 'mid' ? scrollState.left : 0));
const width = target.offsetWidth;
const height = target.offsetHeight;
Expand Down
2 changes: 2 additions & 0 deletions packages/qgrid-ngx/src/lib/row/tr-core.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export class TrCoreDirective implements DomTr, OnInit, OnDestroy {
@Input('q-grid-core-tr') model: any;
@Input('q-grid-core-source') source;

@Input('q-grid-core-pin') pin: string;

element: HTMLElement;

constructor(
Expand Down