@green-code-studio/objects-list 0.1.0

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/objects-list.iml" filepath="$PROJECT_DIR$/.idea/objects-list.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/objects-list.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/php.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MessDetectorOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCodeSnifferOptionsConfiguration">
+    <option name="highlightLevel" value="WARNING" />
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PhpStanOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PsalmOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@green-code-studio/objects-list",
+  "version": "0.1.0",
+  "main": "src/index.js",
+  "author": "Mateusz Krawczyk",
+  "license": "MIT"
+}

package/src/ColumnFilter.js

@@ -0,0 +1,41 @@
+
+import {t} from '../../i18n.xml';
+export class ColumnFilter extends HTMLElement {
+    constructor(props) {
+        super(props);
+        this.select = this.addChild('select')
+        this.select.addChild('option', {value: 'none', text: t('filter.none')})
+        this.select.addChild('option', {value: 'equals', text: t('filter.equals')})
+        this.select.addChild('option', {value: 'less', text: t('filter.lessThan')})
+        this.select.addChild('option', {value: 'more', text: t('filter.greaterThan')})
+        this.select.addChild('option', {value: 'contains', text: t('filter.contains')})
+        this.select.addChild('option', {value: 'oneOf', text: t('filter.oneOf')})
+        this.select.addChild('option', {value: 'empty', text: t('filter.empty')})
+        this.input = this.addChild('input')
+        this.input.oninput = () => this.emit();
+        this.select.onchange = () => {
+            this.updateInput();
+            this.emit();
+        }
+        this.updateInput()
+    }
+
+    updateInput() {
+        if (this.select.value == 'none' || this.select.value == 'empty') {
+            this.input.style.display = 'none'
+        } else if (this.select.value == 'less' || this.select.value == 'more') {
+            this.input.style.display = ''
+            this.input.type = 'number';
+        } else {
+            this.input.style.display = ''
+            this.input.type = 'text';
+        }
+    }
+
+    emit() {
+        this.dispatchEvent(new CustomEvent('x-filter', {detail: {type: this.select.value, value: this.input.value}}))
+    }
+}
+
+
+customElements.define('column-filter', ColumnFilter);

package/src/ConfigPopup.js

@@ -0,0 +1,67 @@
+import template from './ConfigPopup.mpts';
+import {t} from '../../i18n.xml';
+import {TableView} from "./tableView";
+import {ListView} from "./listView";
+import {ColumnFilter} from "./ColumnFilter";
+
+export class ConfigPopup extends HTMLElement {
+    constructor(objectsList) {
+        super();
+        this.append(template({
+            t,
+            categories: [...objectsList.columns.groupBy(c => c.category)]
+                .map(([category, columns]) => ({name: category ?? '', columns}))
+        }))
+        this.querySelector('.mode').onchange = () => {
+            objectsList.infiniteScrollEnabled = this.querySelector('.mode').value == 'scrollMode'
+            objectsList.refresh()
+        }
+        this.querySelector('.view').onchange = () => {
+            if (this.querySelector('.view').value == 'tableView')
+                objectsList.insideViewClass = TableView
+            else
+                objectsList.insideViewClass = ListView
+            objectsList.refresh()
+        }
+        this.addEventListener('blur', () => {
+            if(!this.matches(':focus-within, :focus'))
+            this.remove();
+        })
+        this.querySelector('select').focus()
+        console.log('ssss')
+        for (const checkbox of this.querySelectorAll('table input[type="checkbox"]')) {
+            checkbox.checked = !objectsList.hiddenColumns.has(checkbox.dataset.name)
+            checkbox.onchange = () => {
+                if (checkbox.checked)
+                    objectsList.hiddenColumns.delete(checkbox.dataset.name)
+                else
+                    objectsList.hiddenColumns.add(checkbox.dataset.name)
+
+                objectsList.refresh()
+            }
+        }
+
+        for (const filterContainer of this.querySelectorAll('table .filter')) {
+            const filter=new ColumnFilter();
+            filterContainer.append(filter)
+            filter.addEventListener('x-filter', (e) => {
+                console.log('dddd',e)
+                objectsList.columnFilters.set(filterContainer.dataset.name, e.detail)
+                objectsList.refresh()
+            });
+        }
+        this.tabIndex = 0
+        setTimeout(()=>this.focus(), 1)
+        setTimeout(() => this.checkFocus(), 100)
+    }
+    checkFocus() {
+        console.log('checkFocus')
+        if (!this.matches(':focus-within, :focus'))
+            this.remove();
+
+        if(this.parentNode)
+            setTimeout(() => this.checkFocus(), 100)
+    }
+}
+
+customElements.define('config-popup', ConfigPopup);

package/src/ConfigPopup.mpts

@@ -0,0 +1,45 @@
+<form>
+    <label>
+        <span>{{t('objectList.mode')}}</span>
+        <select class="mode">
+            <option value="paginationMode">{{t('objectList.paginationMode')}}</option>
+            <option value="scrollMode">{{t('objectList.scrollMode')}}</option>
+        </select>
+    </label>
+    <label>
+        <span>{{t('objectList.view')}}</span>
+        <select class="view">
+            <option value="tableView">{{t('objectList.tableView')}}</option>
+            <option value="listView">{{t('objectList.listView')}}</option>
+        </select>
+    </label>
+    <:foreach collection=categories item=category>
+        {{category.name}}
+
+        <table>
+            <thead>
+            <tr>
+                <th>{{t('objectList.columnEnabled')}}</th>
+                <th>{{t('objectList.columnName')}}</th>
+                <th>{{t('objectList.columnFilter')}}</th>
+            </tr>
+            </thead>
+            <tbody>
+
+            <:foreach collection=category.columns item=column>
+                <tr>
+                    <td>
+                        <input type="checkbox" data-name=column.dataName />
+                    </td>
+                    <td>
+                        {{column.name}}
+                    </td>
+                    <td class="filter"  data-name=column.dataName >
+
+                    </td>
+                </tr>
+            </:foreach>
+            </tbody>
+        </table>
+    </:foreach>
+</form>

package/src/abstractView.js

@@ -0,0 +1,39 @@
+export class AbstractView extends HTMLElement {
+    loadData(data, start, limit, infiniteScrollEnabled) {
+        this.style.setProperty('--height', (data.total * this.rowHeight) + 'px');
+        let top = 0;
+        let isOdd = true;
+        if (infiniteScrollEnabled) {
+            top = this.rowHeight * start;
+            isOdd = start % 2 == 0;
+        }
+        let newChildren = [];
+        for (let row of data.rows) {
+            let tr = this.generateRow(row);
+            tr.style.top = `${top}px`;
+            tr.classList.toggle('odd', isOdd)
+            tr.classList.toggle('even', !isOdd)
+            newChildren.push(tr);
+            top += this.rowHeight;
+            isOdd = !isOdd;
+        }
+        let oldChildren = Array.from(this.body.children);
+        for (let tr of oldChildren.filter(tr => !newChildren.includes(tr) && !tr.matches(':focus'))) {
+            tr.remove();
+        }
+
+        for (let tr of newChildren.filter(tr => !oldChildren.includes(tr))) {
+            this.body.appendChild(tr);
+        }
+    }
+
+    onScroll(e) {
+        if (this.onPaginationChanged) {
+            let start = Math.round(this.scrollTop / this.rowHeight);
+            let passedStart = Math.floor(start / 20) * 20 - 20;
+            if (passedStart < 0)
+                passedStart = 0;
+            this.onPaginationChanged(passedStart);
+        }
+    }
+}

package/src/idsSet.js

@@ -0,0 +1,38 @@
+export class IdsSet {
+    constructor() {
+        this.selected = new Set();
+        this.notSelected = new Set();
+        this.isSelectedAll = false;
+    }
+
+    clear() {
+        this.selected.clear();
+        this.notSelected.clear();
+        this.isSelectedAll = false;
+    }
+    has(id){
+        if(this.isSelectedAll){
+            return !this.notSelected.has(id?.toString())
+        }else{
+            return this.selected.has(id?.toString())
+        }
+    }
+    add(id){
+        if(this.isSelectedAll){
+            this.notSelected.delete(id?.toString())
+        }else{
+            this.selected.add(id?.toString())
+        }
+    }
+    delete(id){
+        if(this.isSelectedAll){
+            this.notSelected.add(id?.toString())
+        }else{
+            this.selected.delete(id?.toString())
+        }
+    }
+    selectAll(){
+        this.clear();
+        this.isSelectedAll=true;
+    }
+}

package/src/index.js

@@ -0,0 +1,2 @@
+export {objectsList} from './objectsList'
+

package/src/listView.js

@@ -0,0 +1,76 @@
+import {ContextMenu} from "../contextMenu";
+import {pageManager} from "../pageManager";
+import {AbstractView} from "./abstractView";
+
+export class ListView extends AbstractView {
+    constructor(objectsList) {
+        super();
+        this.objectsList = objectsList;
+        this.init();
+        window.dbgList = this;
+    }
+
+    init() {
+        this.body = this.addChild('.bodyContainer').addChild('.body');
+        this.addEventListener('scroll', this.onScroll.bind(this));
+    }
+
+    calcMaxVisibleItems(height) {
+        return Math.floor((height) / this.rowHeight);
+    }
+
+    get rowHeight() {
+        return Math.max(63, this.objectsList.visibleColumns.length * 21) + 20;
+    }
+
+    generateRow(data) {
+        let tr = this.body.querySelector(`.tr[data-row="${data.id}"]`);
+        if (!tr) {
+            tr = document.create('.tr');
+            tr.draggable = true;
+        }
+        tr.classList.toggle('selected', this.objectsList.selected.has(data.id))
+        this.fillRowContent(tr, data);
+        return tr;
+    }
+
+    fillRowContent(tr, data) {
+        tr.children.removeAll();
+        tr.addChild('.icon', {className: this.objectsList.icon});
+        for (let column of this.objectsList.visibleColumns) {
+            let keyValue = tr.addChild('.keyValue');
+            let key = keyValue.addChild('strong', {text: column.name + ': '});
+            let value = keyValue.addChild('span');
+            value.append((column.content?.call(column,data)||data[column.dataName]));
+        }
+        let actionsTd = tr.addChild('.td.actions');
+        let actions = this.objectsList.generateActions([data], 'row');
+        for (let action of actions) {
+            let actionButton = actionsTd.addChild(action.href ? 'a.button' : 'button', {
+                title: action.name
+            });
+            if (action.href) {
+                actionButton.href = action.href;
+            }
+            if (action.command) {
+                actionButton.onclick = action.command;
+            }
+            if (action.icon) {
+                actionButton.addChild('span', {classList: [action.icon]});
+                actionButton.append(action.name);
+            } else {
+                actionButton.textContent = action.name;
+            }
+        }
+
+
+        tr.dataset.row = data.id;
+        // tr.oncontextmenu = this.contextMenu.bind(this, tr);
+        // tr.onclick = this.trOnClick.bind(this, data);
+        // tr.ondblclick = this.trOnDblClick.bind(this, data, tr);
+        // tr.onkeydown = this.trOnKeyDown.bind(this, data, tr);
+        // tr.ondragstart = this.trOnDragStart.bind(this, data, tr);
+    }
+}
+
+customElements.define('list-view', ListView);

package/src/objectsList.js

@@ -0,0 +1,202 @@
+import {TableView} from "./tableView";
+import {ListView} from "./listView";
+import {t} from "../../i18n.xml";
+import {PaginationButtons} from "./paginationButtons";
+import {ContextMenu} from "../contextMenu";
+import {ConcurencyLimiter} from "../utils/concurencyLimiter";
+import {IdsSet} from "./idsSet";
+import {ConfigPopup} from "./ConfigPopup";
+
+export class ObjectsList extends HTMLElement {
+    constructor(datasource) {
+        super();
+        this.columns = [];
+        this.hiddenColumns = new Set()
+        this.columnFilters = new Map();
+        this.generateActions = () => [];
+        this.insideViewClass = TableView;
+        this.icon = 'icon-document';
+        this.loadConcurencyLimiter = new ConcurencyLimiter();
+        this.datasource = datasource;
+        this.datasource.onchange = () => this.refresh();
+        this.start = 0;
+        this.limit = 10
+        this.total = 0;
+        this.selected = new IdsSet();
+        this.selectedMain = null;
+        this.dataById = new Map();
+        this.initFoot();
+        this.addEventListener('contextmenu', e => this.showGlobalContextMenu(e));
+        addEventListener('resize', e => this.resize());
+        this.infiniteScrollEnabled = false;
+    }
+
+    get visibleColumns() {
+        return this.columns.filter(x => !this.hiddenColumns.has(x.dataName))
+    }
+
+    refreshLimit() {
+        this.limit = this.insideView.calcMaxVisibleItems(this.clientHeight - this.foot.clientHeight - 2);
+        if (this.limit < 1) this.limit = 1;
+        if (this.infiniteScrollEnabled) {
+            this.limit = Math.ceil(this.limit / 20) * 20 + 40;
+        } else {
+            this.start = Math.floor(Math.min(this.total, this.start) / this.limit) * this.limit;
+        }
+    }
+
+    async refresh() {
+        this.classList.toggle('infiniteScrollEnabled', this.infiniteScrollEnabled);
+
+        if (!this.insideView || !(this.insideView instanceof this.insideViewClass))
+            this.initInsideView();
+        else if (this.insideView.refreshHeader)
+            this.insideView.refreshHeader()
+
+        this.refreshLimit();
+        const refreshSymbol = Symbol();
+        this.lastRefreshSymbol = refreshSymbol;
+        await this.loadConcurencyLimiter.run(async () => {
+            if (this.lastRefreshSymbol != refreshSymbol) return;
+
+            let data = await this.datasource.get(this);
+            if (this.lastRefreshSymbol != refreshSymbol) return;
+
+            this.currentRows = data.rows;
+            this.fillDataById(data.rows);
+            this.total = data.total;
+            this.insideView.loadData(data, this.start, this.limit, this.infiniteScrollEnabled);
+            this.pagination.currentPage = Math.floor(this.start / this.limit);
+            this.pagination.totalPages = Math.ceil(this.total / this.limit);
+            this.pagination.render();
+        });
+    }
+
+    initInsideView() {
+        if (this.insideView) {
+            this.insideView.remove();
+        }
+        this.insideView = new this.insideViewClass(this);
+        this.insertBefore(this.insideView, this.foot);
+        this.insideView.refresh = () => this.refresh();
+        this.insideView.onPaginationChanged = (start, limit) => {
+            if (this.start != start) {
+                this.start = start;
+                //this.limit=limit;
+                this.refresh();
+            }
+        }
+    }
+
+    fillDataById(rows) {
+        for (let row of rows) {
+            this.dataById.set(parseInt(row.id), row);
+        }
+    }
+
+    getSelectedData() {
+        let data = Array.from(this.dataById).filter(([id, row]) => this.selected.has(id)).map(([id, row]) => row);
+        if (data.length > 0) return data;
+        else if (this.dataById[this.selectedMain])
+            return [this.dataById[this.selectedMain]]
+        else return [];
+    }
+
+    initFoot() {
+        this.foot = this.addChild('.foot');
+        let menuButton = this.foot.addChild('button.menuButton span.icon-settings');
+        menuButton.onclick = e => this.showConfigPopup();
+        this.pagination = new PaginationButtons();
+        this.pagination.onpageclick = (page) => {
+            this.start = page * this.limit;
+            this.refresh();
+        }
+        this.foot.append(this.pagination);
+        this.searchForm = this.foot.addChild('form', {className: 'search'});
+        this.searchForm.onsubmit = e => e.preventDefault();
+        const searchInput = this.searchForm.addChild('input', {
+            name: 'search',
+            type: 'search',
+            placeholder: t('objectList.search')
+        });
+        searchInput.oninput = e => {
+            this.start = 0;
+            this.refresh();
+        }
+
+    }
+
+    get search() {
+        if (!this.foot) return '';
+        const searchForm = this.foot.querySelector('.search');
+        if (!searchForm) return '';
+        return searchForm.search.value;
+    }
+
+    showGlobalContextMenu(e) {
+        let elements = [{
+            text: t('objectList.paginationMode'),
+            icon: 'icon-pagination',
+            onclick: () => {
+                this.infiniteScrollEnabled = false;
+                this.refresh();
+            }
+        }, {
+            text: t('objectList.scrollMode'),
+            icon: 'icon-scroll',
+            onclick: () => {
+                this.infiniteScrollEnabled = true;
+                this.refresh();
+            }
+        }, {
+            text: t('objectList.tableView'),
+            icon: 'icon-table',
+            onclick: () => {
+                this.insideViewClass = TableView;
+                this.refresh();
+            }
+        }, {
+            text: t('objectList.listView'),
+            icon: 'icon-table',
+            onclick: () => {
+                this.insideViewClass = ListView;
+                this.refresh();
+            }
+        }];
+        if (this.allowTableEdit) {
+            elements.push({
+                text: t('objectList.startMultiEdit'),
+                icon: 'icon-edit',
+                onclick: () => {
+                    this.insideViewClass = TableView;
+                    this.refresh();
+                    this.insideView.startMultiEdit();
+                }
+            });
+        }
+        ContextMenu.openContextMenu(e, elements);
+    }
+
+    resize() {
+        let limit = this.limit;
+        this.refreshLimit();
+        if (limit != this.limit) {
+            this.refresh();
+        }
+    }
+
+    multiEditChanged(id, data, save = false) {
+        this.datasource.multiEditChanged(id, data, save);
+    }
+
+    showConfigPopup() {
+        if (this.querySelector('config-popup')) {
+            this.querySelector('config-popup').remove()
+        } else {
+            const popup = new ConfigPopup(this)
+            this.append(popup)
+        }
+    }
+}
+
+customElements.define('data-view', ObjectsList);

package/src/paginationButtons.js

@@ -0,0 +1,71 @@
+export class PaginationButtons extends HTMLElement {
+    constructor() {
+        super();
+        this.currentPage = 0;
+        this.totalPages = 0;
+        this.onpageclick = null;
+    }
+
+    render() {
+        let pagination = this.getPagination();
+        this.children.removeAll();
+        for (let pageNumber of pagination) {
+            if (pageNumber == null) {
+                this.addChild('span', {text: '...'});
+            } else {
+                let pageButton = this.addChild('button', {
+                    text: pageNumber + 1,
+                    className: pageNumber == this.currentPage ? 'active' : ''
+                });
+                pageButton.onclick = () => {
+                    if (this.onpageclick) {
+                        this.onpageclick(pageNumber);
+                    }
+                    this.currentPage = pageNumber;
+                    this.render();
+                };
+            }
+        }
+    }
+
+    getPagination() {
+        const boxesCount = 7;
+        let boxes = [];
+        if (this.totalPages <= boxesCount) {
+            for (let i = 0; i < this.totalPages; i++) {
+                boxes.push(i);
+            }
+        } else if (this.currentPage <= (boxesCount - 1) / 2 - 1) {
+            for (let i = 0; i <= boxesCount - 3; i++) {
+                boxes.push(i);
+            }
+            boxes.push(null);
+            boxes.push(this.totalPages - 1);
+        } else if (this.currentPage >= this.totalPages - (boxesCount - 1) / 2 - 1) {
+            boxes.push(0);
+            boxes.push(null);
+            for (
+                let i = this.totalPages - Math.floor((boxesCount - 1) / 2) - 2;
+                i < this.totalPages;
+                i++
+            ) {
+                boxes.push(i);
+            }
+        } else {
+            boxes.push(0);
+            boxes.push(null);
+            for (
+                let i = this.currentPage - Math.floor((boxesCount - 5) / 2);
+                i <= this.currentPage + Math.ceil((boxesCount - 5) / 2);
+                i++
+            ) {
+                boxes.push(i);
+            }
+            boxes.push(null);
+            boxes.push(this.totalPages - 1);
+        }
+        return boxes;
+    }
+}
+
+customElements.define('pagination-buttons', PaginationButtons);

package/src/tableView.js

@@ -0,0 +1,403 @@
+import {ContextMenu} from "../contextMenu";
+import {pageManager} from "../pageManager";
+import {AbstractView} from "./abstractView";
+import {t} from "../../i18n.xml";
+
+export class TableView extends AbstractView {
+    constructor(objectsList) {
+        super();
+        this.objectsList = objectsList;
+        this.init();
+        window.dbgTable = this;
+    }
+
+    init() {
+        this.head = this.addChild('.head');
+        this.refreshHeader();
+        this.body = this.addChild('.bodyContainer').addChild('.body');
+        this.setColumnsWidths();
+        addEventListener('resize', this.setColumnsWidths.bind(this))
+        addEventListener('copy', this.onCopy.bind(this));
+        this.addEventListener('scroll', this.onScroll.bind(this));
+    }
+
+    refreshHeader() {
+        while (this.head.firstChild) this.head.firstChild.remove();
+
+        this.head.addChild('.column.icon')
+        for (let column of this.objectsList.visibleColumns) {
+            let node = this.head.addChild('.column')
+            node.addChild('span.name', {text: column.name});
+            if (column.sortName) {
+                node.classList.add('ableToSort');
+                node.dataset.sortName = column.sortName
+                node.onclick = () => {
+                    let sortName = column.sortName || x.dataset.value;
+                    if (this.objectsList.sort && this.objectsList.sort.col === column.sortName) {
+                        this.objectsList.sort.desc = !this.objectsList.sort.desc;
+                    } else {
+                        this.objectsList.sort = {col: column.sortName, desc: false};
+                    }
+                    if (!this.objectsList.infiniteScrollEnabled) {
+                        this.objectsList.start = 0;
+                    }
+                    this.objectsList.refresh();
+                }
+            }
+        }
+        this.head.addChild('.column.actions')
+    }
+
+    loadData(data, start, limit, infiniteScrollEnabled) {
+        this.refreshSortIndicators();
+        super.loadData(data, start, limit, infiniteScrollEnabled)
+        this.setColumnsWidths();
+    }
+
+    get rowHeight() {
+        return parseFloat(window.getComputedStyle(this).getPropertyValue('--rowHeight') ?? 31);
+    }
+
+    generateRow(data) {
+        let tr = this.body.querySelector(`.tr[data-row="${data.id}"]`);
+        if (!tr) {
+            tr = document.create('.tr');
+            tr.draggable = true;
+        }
+        tr.classList.toggle('selected', this.objectsList.selected.has(data.id))
+        this.fillRowContent(tr, data);
+        return tr;
+    }
+
+    fillRowContent(tr, data) {
+        tr.lastData = data;
+        tr.children.removeAll();
+        tr.addChild('.td.icon', {className: this.objectsList.icon});
+        for (let column of this.objectsList.visibleColumns) {
+            let td = tr.addChild('.td');
+            if (this.multiEdit && column.dataName) {
+                tr.dataset.id = data.id;
+                td.addChild('input', {
+                    data: {name: column.dataName},
+                    value: data[column.dataName],
+                    onclick: e => e.stopPropagation(),
+                    onchange: () => this.multiEditChanged(tr)
+                });
+            } else {
+                td.append(column.content?.call(column, data) || data[column.dataName] || '');
+            }
+        }
+        let actionsTd = tr.addChild('.td.actions');
+        let actions = this.objectsList.generateActions([data], 'row');
+        if (this.multiEdit && data.__isMultirowEdited) {
+            actions = [
+                {
+                    name: t("objectList.saveRow"),
+                    icon: 'icon-save',
+                    command: () => {
+                        this.multiEditChanged(tr, true)
+                    }
+                }
+            ]
+        }
+        for (let action of actions) {
+            let actionButton = actionsTd.addChild(action.href ? 'a.button' : 'button', {
+                title: action.name
+            });
+            actionButton.classList.add('action-' + (action.action ?? 'view'));
+
+            if (action.href) {
+                actionButton.href = action.href;
+            }
+            if (action.command) {
+                actionButton.onclick = action.command;
+            }
+            if (action.icon) {
+                actionButton.addChild('span', {classList: [action.icon]});
+            } else {
+                actionButton.textContent = action.name;
+            }
+        }
+
+
+        tr.dataset.row = data.id;
+        tr.oncontextmenu = this.contextMenu.bind(this, tr);
+        tr.onclick = this.trOnClick.bind(this, data);
+        tr.ondblclick = this.trOnDblClick.bind(this, data, tr);
+        tr.onkeydown = this.trOnKeyDown.bind(this, data, tr);
+        tr.ondragstart = this.trOnDragStart.bind(this, data, tr);
+    }
+
+    setColumnsWidths() {
+        const widths = this.calculateColumnsWidths();
+        for (let tr of this.body.children) {
+            for (let i = 0; i < widths.length; i++) {
+                tr.children[i].style.width = widths[i] + 'px';
+            }
+        }
+        let sum = 0;
+        for (let i = 0; i < widths.length; i++) {
+            let node = this.head.children[i];
+            if (node) {
+                if (i + 1 < widths.length)
+                    node.style.width = widths[i] + 1 + 'px';
+                else
+                    node.style.width = widths[i] + 'px';
+                node.style.left = sum + 'px';
+            }
+            sum += widths[i];
+        }
+    }
+
+    calculateColumnsWidths() {
+        let needed = [{base: 30, grow: 0}];
+
+        for (let column of this.objectsList.visibleColumns) {
+            needed.push({base: column.width || 10, grow: typeof (column.widthGrow) == "number" ? column.widthGrow : 1});
+        }
+        let actionWidth = Math.ceil(Array.from(this.querySelectorAll('.td.actions')).map(x => {
+            if (x.lastElementChild)
+                return x.lastElementChild.getBoundingClientRect().right - x.getBoundingClientRect().left + parseFloat(getComputedStyle(x).paddingRight);
+            else
+                return 0;
+        }).max());
+        needed.push({base: actionWidth, grow: 0});
+        let availableToGrow = this.clientWidth - needed.sum(x => x.base);
+        let sumGrow = needed.sum(x => x.grow);
+        if (availableToGrow > 0 && sumGrow > 0) {
+            return needed.map(x => x.base + x.grow / sumGrow * availableToGrow);
+        } else {
+            return needed.map(x => x.base);
+        }
+    }
+
+    refreshSortIndicators() {
+        this.head.querySelectorAll('[data-order]').forEach(x => delete x.dataset.order);
+        if (this.objectsList.sort)
+            this.head.querySelectorAll(`[data-sort-name="${this.objectsList.sort.col}"]`).forEach(x => x.dataset.order = this.objectsList.sort.desc ? 'desc' : 'asc');
+    }
+
+    contextMenu(tr, event) {
+        event.stopPropagation();
+        if (!this.objectsList.selected.has(tr.dataset.row)) {
+            this.objectsList.selected.clear();
+            this.objectsList.selected.add(tr.dataset.row)
+            this.objectsList.selectedMain = tr.dataset.row;
+            this.refreshSelectedClasses();
+        }
+        const rows = this.objectsList.getSelectedData();
+        let actions = this.objectsList.generateActions(rows, 'contextMenu');
+        let elements = actions.map(action => ({
+            text: action.name,
+            icon: action.icon,
+            class: action.action ? 'action-' + action.action : '',
+            onclick: action.command || (() => pageManager.goto(action.href))
+        }));
+        elements.push({
+            text: 'copy',
+            icon: 'icon-copy',
+            onclick: () => {
+                this.forceCopy(rows);
+            }
+        })
+        ContextMenu.openContextMenu(event, elements);
+    }
+
+    refreshSelectedClasses() {
+        for (const tr of this.body.children) {
+            tr.classList.toggle('selected', this.objectsList.selected.has(tr.dataset.row));
+            tr.classList.toggle('selectedMain', this.objectsList.selectedMain == tr.dataset.row);
+            if (this.objectsList.selectedMain == tr.dataset.row) {
+                tr.tabIndex = 1;
+                tr.focus();
+                getSelection().selectAllChildren(tr)
+            } else {
+                tr.tabIndex = -1;
+            }
+        }
+    }
+
+
+    trOnClick(row, e) {
+        const rowsIds = this.objectsList.currentRows.map(x => x.id);
+        console.log('click')
+        if (!e.ctrlKey) {
+            this.objectsList.selected.clear();
+        }
+
+        if (e.shiftKey) {
+            const mainIndex = rowsIds.indexOf(this.objectsList.selectedMain);
+            const clickedIndex = rowsIds.indexOf(row.id);
+            if (clickedIndex >= 0 && mainIndex >= 0)
+                rowsIds.slice(Math.min(mainIndex, clickedIndex), Math.max(mainIndex, clickedIndex) + 1).forEach(x => this.objectsList.selected.add(x));
+        } else {
+            if (this.objectsList.selected.has(row.id))
+                this.objectsList.selected.delete(row.id);
+            else
+                this.objectsList.selected.add(row.id);
+
+            this.objectsList.selectedMain = row.id;
+        }
+
+        this.refreshSelectedClasses();
+    }
+
+    trOnDblClick(row, tr, e) {
+        if (!this.objectsList.selected.has(tr.dataset.row)) {
+            this.objectsList.selected.clear();
+            this.objectsList.selected.add(tr.dataset.row)
+            this.objectsList.selectedMain = tr.dataset.row;
+            this.refreshSelectedClasses();
+        }
+        let action = this.objectsList.generateActions(this.objectsList.getSelectedData(), 'dblClick').find(x => x.main);
+        if (action) {
+            if (action.command) {
+                action.command();
+            } else if (action.href) {
+                pageManager.goto(action.href)
+            }
+        }
+    }
+
+    selectRange(start, end) {
+        const rowsIds = this.objectsList.currentRows.map(x => x.id);
+        let startIndex = rowsIds.indexOf(start);
+        let endIndex = rowsIds.indexOf(end);
+        if (endIndex < startIndex) {
+            let tmp = startIndex;
+            startIndex = endIndex;
+            endIndex = tmp;
+        }
+        for (let i = startIndex; i <= endIndex; i++) {
+            this.objectsList.selected.add(rowsIds[i]);
+        }
+    }
+
+    trOnKeyDown(row, tr, e) {
+        console.log('trOnKeyDown')
+        if (e.key === 'Enter') {
+            let action = this.objectsList.generateActions(this.objectsList.getSelectedData(), 'enter').find(x => x.main);
+            if (action) {
+                if (action.command) {
+                    action.command();
+                } else if (action.href) {
+                    pageManager.goto(action.href)
+                }
+            }
+        } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            const rowsIds = this.objectsList.currentRows.map(x => x.id);
+            let index = rowsIds.indexOf(this.objectsList.selectedMain);
+            if (e.key === 'ArrowDown') {
+                if (index < rowsIds.length) index++;
+                else index = rowsIds.length - 1;
+            } else {
+                if (index > 0) index--;
+            }
+            const id = rowsIds[index];
+            if (!e.ctrlKey) {
+                this.objectsList.selected.clear();
+            }
+            if (e.shiftKey) {
+                if (!this.objectsList.selectedShiftStart) {
+                    this.objectsList.selectedShiftStart = this.objectsList.selectedMain;
+                }
+                this.selectRange(this.objectsList.selectedShiftStart, id)
+            } else {
+                this.objectsList.selectedShiftStart = null;
+                if (!e.ctrlKey) {
+                    this.objectsList.selected.add(id);
+                }
+            }
+            this.objectsList.selectedMain = id;
+            this.refreshSelectedClasses();
+            e.preventDefault();
+        } else if (e.key === ' ') {
+            if (this.objectsList.selected.has(this.objectsList.selectedMain))
+                this.objectsList.selected.delete(this.objectsList.selectedMain);
+            else
+                this.objectsList.selected.add(this.objectsList.selectedMain);
+
+            this.refreshSelectedClasses();
+            e.preventDefault();
+        } else if (e.key === 'a') {
+            if (e.ctrlKey)
+                this.objectsList.selected.selectAll();
+
+            this.refreshSelectedClasses();
+            e.preventDefault();
+        }
+    }
+
+    onCopy(e) {
+        if (this.copyForced) {
+            this.fillDataTransfer(e.clipboardData, this.copyForced);
+            e.preventDefault();
+        } else if (document.querySelector(':focus')?.findParent(x => x === this)) {
+            this.fillDataTransfer(e.clipboardData, this.objectsList.selected);
+            e.preventDefault();
+        }
+    }
+
+    trOnDragStart(row, oryginalTr, e) {
+        if (!this.objectsList.selected.has(row.id)) {
+            this.objectsList.selected.clear()
+            this.objectsList.selected.add(row.id)
+            this.refreshSelectedClasses();
+        }
+        this.fillDataTransfer(e.dataTransfer, this.objectsList.selected);
+    }
+
+    fillDataTransfer(dataTransfer, ids) {
+        const trs = Array.from(this.body.children).filter(tr => ids.has(tr.dataset.row));
+        let action = this.objectsList.generateActions(this.objectsList.getSelectedData(), 'dataTransfer').find(x => x.main);
+        if (action && action.href) {
+            dataTransfer.setData('text/uri-list', new URL(action.href, document.baseURI));
+        }
+        if (action && action.hrefArray) {
+            dataTransfer.setData('text/uri-list', action.hrefArray.map(x => new URL(x, document.baseURI)).map(x => x.toString()).join("\r\n#\r\n"));
+        }
+        dataTransfer.setData('text/html', this.generateTableHtml(trs));
+        dataTransfer.setData('text/plain', this.generateTableTextPlain(trs));
+
+    }
+
+    generateTableHtml(trs) {
+        const thead = '<thead><tr>' + Array.from(this.head.querySelectorAll('.column')).map(x => '<th>' + x.innerHTML + '</th>').join('') + '</tr></thead>';
+        const tbody = '<tbody>' + trs.map(tr => {
+            return '<tr>' + Array.from(tr.children).slice(1, -1).map(td => {
+                return '<td>' + td.innerHTML + '</td>';
+            }).join('') + '</tr>';
+        }).join('') + '</tbody>'
+        return '<table>' + thead + tbody + '</table>';
+    }
+
+    generateTableTextPlain(trs) {
+        const head = Array.from(this.head.querySelectorAll('.column')).map(x => x.textContent.replace(/\r\n/gm, ' ')).join("\t")
+        const body = trs.map(tr => Array.from(tr.children).slice(1).map(x => x.textContent.replace(/\r\n/gm, ' ')).join("\t")).join("\r\n")
+        return head + "\r\n" + body;
+    }
+
+    calcMaxVisibleItems(height) {
+        return Math.floor((height - this.head.clientHeight) / this.rowHeight);
+    }
+
+    forceCopy(rows) {
+        this.copyForced = new Set(rows.map(x => x.id));
+        document.execCommand("copy");
+        setTimeout(() => this.copyForced = null, 100);
+    }
+
+    startMultiEdit() {
+        this.multiEdit = true;
+    }
+
+    multiEditChanged(tr, save = false) {
+        let data = [...tr.querySelectorAll('[data-name]')].map(x => [x.dataset.name, x.value]);
+        let dataObj = Object.fromEntries(data);
+        this.objectsList.multiEditChanged(tr.dataset.id, dataObj, save);
+        this.fillRowContent(tr, {...tr.lastData, ...dataObj, __isMultirowEdited: true});
+        this.setColumnsWidths();
+    }
+}
+
+customElements.define('table-view', TableView);