133 lines
3.8 KiB
JavaScript
133 lines
3.8 KiB
JavaScript
import {render, CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
|
|
import style from "./index.scss";
|
|
import {TableComponent} from "./table-component";
|
|
|
|
@defineElement("table-tester")
|
|
class TableTester extends CustomElement{
|
|
/**
|
|
*
|
|
* @type {({[headerRender]: (function(): string), render: (function(User): *), [size]: number})[]}
|
|
*/
|
|
#columnDefinitions = [
|
|
{
|
|
headerRender: () => "Id",
|
|
render: (u) => u.userId,
|
|
size: 110
|
|
},
|
|
{
|
|
headerRender: () => "Email",
|
|
render: (u) => u.identity?.email,
|
|
},
|
|
{
|
|
headerRender: () => "FirstName",
|
|
render: (u) => u.identity?.firstName,
|
|
size: 160
|
|
},
|
|
{
|
|
headerRender: () => "LastName",
|
|
render: (u) => u.identity?.lastName,
|
|
size: 160
|
|
},
|
|
{
|
|
headerRender: () => "Up",
|
|
render: (u) => {
|
|
let d = new Date();
|
|
return (<button onClick={(ev) => this.moveUp(ev, u, d)}>Up</button>)
|
|
},
|
|
size: 110
|
|
},
|
|
{
|
|
headerRender: () => "Down",
|
|
render: (u) => {
|
|
let d = new Date();
|
|
return (<button onClick={(ev) => this.moveDown(ev, u, d)}>Down</button>)
|
|
},
|
|
size: 110
|
|
},
|
|
];
|
|
|
|
@state()
|
|
users = [];
|
|
|
|
rowKey = (user)=>user.userId;
|
|
cellRef = (user, colIdx, el)=>user.cells[colIdx]=el;
|
|
|
|
render(){
|
|
|
|
return <TableComponent
|
|
columns={this.#columnDefinitions}
|
|
data={this.users}
|
|
rowKey={this.rowKey}
|
|
cellRef={this.cellRef}
|
|
/>
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
|
|
setTimeout(()=>this.load(), 0);
|
|
}
|
|
|
|
interval;
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
if(this.interval) {
|
|
clearInterval(this.interval);
|
|
}
|
|
}
|
|
|
|
load(){
|
|
let users = [];
|
|
|
|
let rndFirstNames = ['Loes', 'Johnny', 'Maria', 'Jezus', 'Philippe', 'Filip', 'Annie'];
|
|
let rndLastNames = ['Peeters', 'Wachters', 'Jannsens', 'De Schaetzen', 'Becks', 'Konings', 'De Clerk'];
|
|
|
|
for(let i = 0; i < 10; ++i){
|
|
let first = rndFirstNames[Math.floor(rndFirstNames.length*Math.random())];
|
|
let last = rndLastNames[Math.floor(rndLastNames.length*Math.random())];
|
|
users.push({
|
|
userId: (Math.random()*99999).toString(36).slice(-6).toUpperCase(),
|
|
identity: {
|
|
firstName: first,
|
|
lastName: last,
|
|
email: `${first}.${last}@example.com`.toLocaleLowerCase()
|
|
},
|
|
cells: []
|
|
})
|
|
}
|
|
|
|
this.users = users;
|
|
}
|
|
|
|
lastClear = new Date();
|
|
|
|
moveUp = (ev, u, d)=>{
|
|
let data = this.users.slice();
|
|
let indexOf = this.users.indexOf(u);
|
|
|
|
if(indexOf>0) {
|
|
let [before, after] = data.splice(indexOf - 1, 2);
|
|
data.splice(indexOf - 1, 0, after, before);
|
|
console.log(data.map((u,index)=>this.rowKey(u,index)))
|
|
this.users = data;
|
|
}
|
|
console.log(this.users);
|
|
}
|
|
|
|
moveDown = (ev, u, d)=>{
|
|
let data = this.users.slice();
|
|
let indexOf = this.users.indexOf(u);
|
|
|
|
if(indexOf<(this.users.length-1)) {
|
|
let [before, after] = data.splice(indexOf, 2);
|
|
data.splice(indexOf, 0, after, before);
|
|
console.log(data.map((u,index)=>this.rowKey(u,index)));
|
|
this.users = data;
|
|
}
|
|
console.log(this.users);
|
|
}
|
|
}
|
|
|
|
document.body.appendChild(render(<style>{style}</style>));
|
|
document.body.appendChild(render(<TableTester/>));
|