@green-code-studio/objects-list 1.9.7 → 1.10.1

package/src/abstractView.js

@@ -1,3 +1,6 @@
+
+import {t} from "./i18n.xml";
+import {ContextMenu} from "@green-code-studio/context-menu/dist/index.mjs";
 export class AbstractView extends HTMLElement {
     loadData(data, start, limit, infiniteScrollEnabled) {
         this.style.setProperty('--height', (data.total * this.rowHeight) + 'px');
@@ -36,4 +39,198 @@ export class AbstractView extends HTMLElement {
             this.onPaginationChanged(passedStart);
         }
     }
+
+    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) {
+                this.objectsList.gotoUrl(action.href)
+            }
+        }
+    }
+    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 actions2 = [];
+        for (const action of actions) {
+            actions2.push(action);
+            if (action.href) {
+                actions2.push({
+                    ...action,
+                    href: null,
+                    command: () => window.open(action.href),
+                    name: (action.name ?? '') + ' (' + t('objectList.inNewTab') + ')'
+                });
+            }
+        }
+        let elements = actions2.map(action => ({
+            text: action.name,
+            icon: action.icon,
+            class: action.action ? 'action-' + action.action : '',
+            onclick: action.command || (() => this.objectsList.gotoUrl(action.href))
+        }));
+        elements.push({
+            text: 'copy',
+            icon: 'icon-copy',
+            onclick: () => {
+                this.forceCopy(rows);
+            }
+        })
+        ContextMenu.openContextMenu(event, elements);
+    }
+    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) {
+                    this.objectsList.gotoUrl(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();
+        }
+    }
+
+    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));
+
+    }
+
+    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;
+            }
+        }
+    }
+
+    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]);
+        }
+    }
+
+
+    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();
+        }
+    }
 }

package/src/calendarView.js

@@ -0,0 +1,58 @@
+import {AbstractView} from "./abstractView.js";
+import {create} from "fast-creator";
+import {ListView} from "./listView.js";
+
+export class CalendarView extends AbstractView {
+    constructor(objectsList) {
+        super();
+        this.objectsList = objectsList;
+        this.init();
+        window.dbgList = this;
+    }
+
+    init() {
+        this.body = create('.body.monthCalendarBody')
+        const bodyContainer = create('.bodyContainer')
+        bodyContainer.append(this.body)
+        this.append(bodyContainer)
+        this.addEventListener('scroll', this.onScroll.bind(this));
+    }
+
+    calcMaxVisibleItems(height) {
+        return Number.POSITIVE_INFINITY
+    }
+
+    loadData(data) {
+        while(this.body.firstChild){
+            this.body.removeChild(this.body.firstChild);
+        }
+        console.log('data', data)
+        let startDay = new Date()
+        if(this.objectsList.date){
+            startDay = new Date(this.objectsList.date)
+        }
+        startDay.setDate(1);
+
+        startDay.setDate(startDay.getDate() - startDay.getDay() + 1);
+        for (let i = 0; i < 7 * 6; i++) {
+            const day = new Date(startDay);
+            day.setDate(startDay.getDate() + i);
+            const dayElement = create('.day', {
+                data: {date: day.toISOString().substring(0, 10)},
+                text: day.toISOString().substring(0, 10)
+            })
+            this.body.append(dayElement)
+            for (let item of data.rows.filter(r => this.objectsList.dateRowCallback(r).toISOString().substring(0, 10) == day.toISOString().substring(0, 10))) {
+                const itemElement = create('.item', {text: item})
+                dayElement.append(itemElement)
+                itemElement.oncontextmenu = this.contextMenu.bind(this, itemElement);
+                itemElement.onclick = this.trOnClick.bind(this, item);
+                itemElement.ondblclick = this.trOnDblClick.bind(this, item, itemElement);
+                itemElement.onkeydown = this.trOnKeyDown.bind(this, item, itemElement);
+                itemElement.ondragstart = this.trOnDragStart.bind(this, item, itemElement);
+            }
+        }
+    }
+}
+
+customElements.define('calendar-view', CalendarView);

package/src/i18n.xml

@@ -25,6 +25,14 @@
             <value lang="pl">Widok listy</value>
             <value lang="en">List view</value>
         </node>
+        <node name="calendarView">
+            <value lang="pl">Widok kalendarza</value>
+            <value lang="en">Calendar view</value>
+        </node>
+        <node name="timelineView">
+            <value lang="pl">Widok osi czasu</value>
+            <value lang="en">Timeline view</value>
+        </node>
         <node name="startMultiEdit">
             <value lang="pl">Rozpocznij edycję wielu</value>
             <value lang="en">Start multi-edit</value>

package/src/listView.js

@@ -74,11 +74,11 @@ export class ListView extends AbstractView {
 
 
         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);
+         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);
     }
 }
 

package/src/objectsList.js

@@ -7,6 +7,7 @@ import {ConcurencyLimiter} from "./utils/concurencyLimiter.js";
 import {IdsSet} from "./idsSet.js";
 import {ConfigPopup} from "./ConfigPopup.js";
 import {create} from "fast-creator";
+import {CalendarView} from "./calendarView.js";
 
 export class ObjectsList extends HTMLElement {
     constructor(datasource) {
@@ -62,13 +63,16 @@ export class ObjectsList extends HTMLElement {
     }
 
     get visibleColumns() {
-        return this.columnsReordered.filter(x => !this.hiddenColumns.has(x.dataName??x.sortName))
+        return this.columnsReordered.filter(x => !this.hiddenColumns.has(x.dataName ?? x.sortName))
     }
 
     refreshLimit() {
         this.limit = this.insideView.calcMaxVisibleItems(this.clientHeight - this.foot.clientHeight - 2);
         if (this.limit < 1) this.limit = 1;
-        if (this.infiniteScrollEnabled) {
+        if (this.insideView instanceof CalendarView) {
+            this.start = 0;
+            this.limit = 1000000;
+        } else 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;
@@ -90,6 +94,8 @@ export class ObjectsList extends HTMLElement {
         const refreshSymbol = Symbol();
         this.lastRefreshSymbol = refreshSymbol;
         this.lastRefreshSymbolTotal = refreshSymbol;
+        this.pagination.style.display = this.insideView instanceof CalendarView ? 'none' : '';
+        this.dateInput.style.display = this.insideView instanceof CalendarView ? '' : 'none';
         if (this.asyncTotal) {
             const promise1 = this.loadConcurencyLimiter.run(async () => {
                 if (this.lastRefreshSymbol != refreshSymbol) return;
@@ -179,7 +185,7 @@ export class ObjectsList extends HTMLElement {
         old = old || {};
         let ret = {};
         let changed = false;
-        var visibleColumns = this.visibleColumns.map(x => x.dataName??x.sortName).join();
+        var visibleColumns = this.visibleColumns.map(x => x.dataName ?? x.sortName).join();
         if (old.visibleColumns || this.hiddenColumns.size || this.columnsReorderedChanged) {
             ret.visibleColumns = visibleColumns;
             changed = true;
@@ -224,9 +230,15 @@ export class ObjectsList extends HTMLElement {
         } else if (value == 'tableWideView') {
             this.insideViewClass = TableView
             this.insideViewParams = {wide: true}
-        } else {
+        } else if (value == 'listView') {
             this.insideViewClass = ListView
             this.insideViewParams = {}
+        } else if (value == 'calendarView') {
+            this.insideViewClass = CalendarView
+            this.insideViewParams = {}
+        } else if (value == 'timelineView') {
+            this.insideViewClass = TimelineView
+            this.insideViewParams = {}
         }
     }
 
@@ -240,13 +252,13 @@ export class ObjectsList extends HTMLElement {
     applyParams(params) {
         if (params?.visibleColumns) {
             const splitted = params.visibleColumns.split(',');
-            this.hiddenColumns = new Set(this.columns.map(x => x.dataName??x.sortName));
+            this.hiddenColumns = new Set(this.columns.map(x => x.dataName ?? x.sortName));
             for (const name of splitted) {
                 this.hiddenColumns.delete(name);
             }
             for (let i = splitted.length - 1; i > 0; i--) {
-                const column = this.columnsReordered.find(x => (x.dataName??x.sortName) == splitted[i - 1]);
-                const next = this.columnsReordered.find(x => (x.dataName??x.sortName) == splitted[i]);
+                const column = this.columnsReordered.find(x => (x.dataName ?? x.sortName) == splitted[i - 1]);
+                const next = this.columnsReordered.find(x => (x.dataName ?? x.sortName) == splitted[i]);
                 if (column) {
                     this.columnsReordered.splice(this.columnsReordered.indexOf(column), 1);
                     if (next)
@@ -313,6 +325,13 @@ export class ObjectsList extends HTMLElement {
             this.refresh();
         }
         this.foot.append(this.pagination);
+        this.dateInput = create('input', {type: 'month', value: new Date().toISOString().substring(0, 7)});
+        this.dateInput.onchange = date => {
+            this.start = 0;
+            this.date = this.dateInput.value;
+            this.refresh();
+        }
+        this.foot.append(this.dateInput);
         this.filterShortContainer = create('.filterShortContainer');
         this.foot.append(this.filterShortContainer);
         this.searchForm = create('form', {className: 'search'});

package/src/style/objectsList.scss

@@ -180,6 +180,20 @@ data-view {
         }
     }
 
+    calendar-view {
+        flex-grow: 1;
+
+        .bodyContainer {
+            overflow: scroll;
+        }
+
+        .body {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            min-height: 100%;
+        }
+    }
+
     .foot {
         border-top: 1px solid var(--second);
         display: flex;
@@ -223,8 +237,9 @@ pagination-buttons {
         background: var(--main);
     }
 }
-.categoryTableContainer{
-    &:not(:has(.filter)) .filterHeader{
+
+.categoryTableContainer {
+    &:not(:has(.filter)) .filterHeader {
         display: none;
     }
 }

package/src/tableView.js

@@ -245,202 +245,6 @@ export class TableView extends AbstractView {
             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 actions2 = [];
-        for (const action of actions) {
-            actions2.push(action);
-            if (action.href) {
-                actions2.push({
-                    ...action,
-                    href: null,
-                    command: () => window.open(action.href),
-                    name: (action.name ?? '') + ' (' + t('objectList.inNewTab') + ')'
-                });
-            }
-        }
-        let elements = actions2.map(action => ({
-            text: action.name,
-            icon: action.icon,
-            class: action.action ? 'action-' + action.action : '',
-            onclick: action.command || (() => this.objectsList.gotoUrl(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) {
-                this.objectsList.gotoUrl(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) {
-                    this.objectsList.gotoUrl(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 => {