vicowa-web-components
Version:
403 lines (370 loc) • 16.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ViCoWa Web Components - vicowa-button</title>
<script>window.develop = true;</script>
<script type="module" src="../../src/vicowa-editable-list/vicowa-editable-list.js"></script>
<script type="module" src="../../src/vicowa-modal/vicowa-modal.js"></script>
<script type="module" src="./customer-settings/customer-settings.js"></script>
<style>
body {
font-family: sans-serif;
}
body[lang="en_US"] #english,
body[lang="nl_NL"] #dutch {
background-color: blue;
color: white;
}
vicowa-editable-list {
--vicowa-input-label-width: 150px;
--vicowa-single-selection-width: 150px;
white-space: nowrap;
margin: 1em;
padding: 1em;
box-shadow: 3px 3px 8px grey;
}
[slot="header"] span {
display: inline-block;
position: relative;
width: 150px;
}
[slot="header"] span:first-child {
width: 110px;
}
#customerList1 {
--vicowa-editable-list-button-area-width: 110px;
}
#customerList2 {
--vicowa-editable-list-button-area-width: 110px;
--vicowa-editable-list-item-background: #eef;
--vicowa-editable-list-item-even-background: #efe;
--vicowa-editable-list-item-border: 1px dotted #aaa;
}
.ask-buttons {
display: flex;
margin-top: 1em;
justify-content: flex-end;
}
#delete-popup > div {
padding: 1em;
}
.hidden {
display: none;
}
</style>
</head>
<body lang="en_US">
<div id="translations">
<button id="english">English</button>
<button id="dutch">Nederlands</button>
</div>
<vicowa-modal id="delete-popup">
<div slot="content">
<div id="delete-message">Are you sure you want to delete?</div>
<div class="ask-buttons"><button id="continue-delete">Delete</button><button id="close">Cancel</button></div>
</div>
</vicowa-modal>
<h2>Small list</h2>
<vicowa-editable-list id="customerList1">
<div slot="header"><span>Action</span><span>Name</span><span>EMail</span><span>Source</span><span>Address</span><span>Postal code</span><span>City</span><span>Province</span><span>Country Code</span></div>
</vicowa-editable-list>
<h2>List with lots of items requiring pagination, also enabled search on name item</h2>
<vicowa-editable-list id="customerList2" filter><div slot="header"><span>Action</span><span>Name</span><span>EMail</span><span>Source</span><span>Address</span><span>Postal code</span><span>City</span><span>Province</span><span>Country Code</span></div></vicowa-editable-list>
<h2>Very simple list with only one column and no edit possibility</h2>
<vicowa-editable-list id="simpleData1" filter no-edit max-page-items="10"><div slot="header"><span>Action</span><span>Name</span></div></vicowa-editable-list>
<h2>simple list with single selection option</h2>
<vicowa-editable-list id="simpleData2" filter no-edit no-delete max-page-items="10" select single><div slot="header"><span>Action</span><span>Name</span></div></vicowa-editable-list>
<h2>simple list with multi selection option</h2>
<vicowa-editable-list id="simpleData3" filter no-edit no-delete max-page-items="10" select multi><div slot="header"><span>Action</span><span>Name</span></div></vicowa-editable-list>
<h2>simple list with custom save and cancel handling</h2>
<vicowa-editable-list id="simpleData4" filter no-save no-cancel max-page-items="10" ><div slot="header"><span>Action</span><span>Name</span></div></vicowa-editable-list>
<vicowa-modal></vicowa-modal>
<script type="module">
import translator from '../../src/utilities/translate.js';
import { createQuickAccess } from '/third_party/web-component-base-class/src/tools.js';
const controls = createQuickAccess(document, "id");
let handleDeletePopupClose = () => { controls.deletePopup.show = false; };
let handleDeletePopupContinueDelete = () => { controls.deletePopup.show = false; };
controls.close.addEventListener("click", () => { handleDeletePopupClose(); });
controls.continueDelete.addEventListener("click", () => { handleDeletePopupContinueDelete(); });
const data = {
customers: [
{
id: 120911,
name: "A Customer",
email: "customer@email.com",
channel: "website",
address: "12 Main St.",
postal: "M1M 1M1",
city: "Toronto",
province: "ON",
country: "CA"
},
{
id: 146633,
name: "Another Customer",
email: "customer2@email.com",
channel: "phone",
address: "12 Yonge St. #23",
postal: "M2M 2M2",
city: "Toronto",
province: "ON",
country: "CA"
},
{
id: 171981,
name: "A Great Customer",
email: "customerplusplus@email.com",
channel: "word-of-mouth",
address: "2312 Eglinton Ave.",
postal: "M3M 3M3",
city: "Toronto",
province: "ON",
country: "CA"
}
]
};
const getData = async(p_Start, p_Count, p_Filter) => {
return {
items: data.customers.slice(p_Start, p_Count),
totalItemCount: data.customers.length,
};
};
const getData2 = async(p_Start, p_Count, p_Filter) => {
const items = [];
const totalItemCount = 1345;
let testIndex = -1;
const regExp = (p_Filter) ? new RegExp(p_Filter) : null;
for (let index = 0; index < totalItemCount; index++) {
const customer = Object.assign({}, data.customers[index % data.customers.length]);
customer.name = `customer${index}`;
if (!regExp || regExp.test(customer.name)) {
testIndex++;
}
if (testIndex >= p_Start && items.length < p_Count) {
items.push(customer);
p_Start++;
}
}
// simulate server retrieval delay between 0 and 1s
return await new Promise((resolve) => {
setTimeout(() => {
resolve({
items,
totalItemCount: testIndex + 1,
});
}, 1000 * Math.random());
});
};
controls.customerList1.onAttached = () => {
controls.customerList1.factory = () => document.createElement('customer-settings');
controls.customerList1.getData = getData;
controls.customerList1.onChange = (p_Data, p_OldData, p_Modified) => {
console.log(`current data: ${JSON.stringify(p_Data, null, 4)}`);
console.log(`old data: ${JSON.stringify(p_OldData, null, 4)}`);
console.log(`modified data: ${JSON.stringify(p_Modified.modifiedItems, null, 4)}`);
console.log(`added data: ${JSON.stringify(p_Modified.newItems, null, 4)}`);
console.log(`removed data: ${JSON.stringify(p_Modified.removedItems, null, 4)}`);
};
controls.customerList1.initialize();
};
controls.customerList2.onAttached = () => {
controls.customerList2.factory = () => document.createElement('customer-settings');
controls.customerList2.getData = getData2;
controls.customerList2.onChange = (p_Data, p_OldData, p_Modified) => {
console.log(`current data: ${JSON.stringify(p_Data, null, 4)}`);
console.log(`old data: ${JSON.stringify(p_OldData, null, 4)}`);
console.log(`modified data: ${JSON.stringify(p_Modified.modifiedItems, null, 4)}`);
console.log(`added data: ${JSON.stringify(p_Modified.newItems, null, 4)}`);
console.log(`removed data: ${JSON.stringify(p_Modified.removedItems, null, 4)}`);
};
controls.customerList2.initialize({
startEdit(p_Item) { p_Item.startEdit(); },
stopEdit(p_Item) { p_Item.stopEdit(); },
doSave(p_Item) { return p_Item.doSave(); },
doCancel(p_Item) { p_Item.doCancel(); },
setItemData(p_Item, p_Data) { p_Item.data = p_Data; },
getItemData(p_Item) { return p_Item.data; },
isValid(p_Item) { return p_Item.valid; },
hasData(p_Item) { return p_Item.hasData; },
setReadyHandler(p_Item, p_Callback) { p_Item.onReady = p_Callback; },
setChangeHandler(p_Item, p_Callback) { p_Item.onChange = p_Callback; },
});
};
const getData3 = async(p_Start, p_Count, p_Filter) => {
const items = [];
const totalItemCount = 43;
let testIndex = -1;
const regExp = (p_Filter) ? new RegExp(p_Filter) : null;
for (let index = 0; index < totalItemCount; index++) {
const item = { name: `test item-${index}` };
if (!regExp || regExp.test(item.name)) {
testIndex++;
}
if (testIndex >= p_Start && items.length < p_Count) {
items.push(item);
p_Start++;
}
}
// simulate server retrieval delay between 0 and 1s
return await new Promise((resolve) => {
setTimeout(() => {
resolve({
items,
totalItemCount: testIndex + 1,
});
}, 1000 * Math.random());
});
};
controls.simpleData1.onAttached = () => {
controls.simpleData1.factory = () => { const element = document.createElement("vicowa-input"); element.label = "Name"; element.hideLabel = true; element.static = true; return element };
controls.simpleData1.getData = getData3;
controls.simpleData1.continueDelete = () => {
return new Promise((resolve) => {
controls.deletePopup.open = true;
handleDeletePopupClose = () => { controls.deletePopup.open = false; resolve(false); };
handleDeletePopupContinueDelete = () => { controls.deletePopup.open = false; resolve(true); };
});
};
controls.simpleData1.onChange = (p_Data, p_OldData, p_Modified) => {
console.log(`current data: ${JSON.stringify(p_Data, null, 4)}`);
console.log(`old data: ${JSON.stringify(p_OldData, null, 4)}`);
console.log(`modified data: ${JSON.stringify(p_Modified.modifiedItems, null, 4)}`);
console.log(`added data: ${JSON.stringify(p_Modified.newItems, null, 4)}`);
console.log(`removed data: ${JSON.stringify(p_Modified.removedItems, null, 4)}`);
};
controls.simpleData1.initialize({
data: Symbol("data"),
startEdit(p_Item) { p_Item.hideLabel = false; p_Item.static = false; },
stopEdit(p_Item) { p_Item.hideLabel = true; p_Item.static = true; },
doSave(p_Item) { return p_Item.valid; },
doCancel(p_Item) { },
setItemData(p_Item, p_Data) { p_Item[this.data] = p_Data; p_Item.value = p_Data.name; },
getItemData(p_Item) { p_Item[this.data] = p_Item[this.data] || { name: p_Item.value }; p_Item[this.data].name = p_Item.value; return p_Item[this.data]; },
isValid(p_Item) { return !!p_Item.textContent; },
hasData(p_Item) { return !!p_Item.textContent; },
setReadyHandler(p_Item, p_Callback) { p_Callback(); },
setChangeHandler(p_Item, p_Callback) { p_Item.onChanged = p_Callback; },
});
};
controls.simpleData2.onAttached = () => {
controls.simpleData2.factory = () => { const element = document.createElement("vicowa-input"); element.label = "Name"; element.hideLabel = true; element.static = true; return element };
controls.simpleData2.getData = getData3;
controls.simpleData2.onChange = () => {};
controls.simpleData2.onSelect = (p_SelectedItems) => {
console.log(`selected items: ${JSON.stringify(p_SelectedItems, null, 4)}`);
};
controls.simpleData2.initialize({
data: Symbol("data"),
startEdit(p_Item) { p_Item.hideLabel = false; p_Item.static = false; },
stopEdit(p_Item) { p_Item.hideLabel = true; p_Item.static = true; },
doSave(p_Item) { return p_Item.valid; },
doCancel(p_Item) { },
setItemData(p_Item, p_Data) { p_Item[this.data] = p_Data; p_Item.value = p_Data.name; },
getItemData(p_Item) { p_Item[this.data] = p_Item[this.data] || { name: p_Item.value }; p_Item[this.data].name = p_Item.value; return p_Item[this.data]; },
isValid(p_Item) { return !!p_Item.textContent; },
hasData(p_Item) { return !!p_Item.textContent; },
setReadyHandler(p_Item, p_Callback) { p_Callback(); },
setChangeHandler(p_Item, p_Callback) { p_Item.onChanged = p_Callback; },
});
};
controls.simpleData3.onAttached = () => {
controls.simpleData3.factory = () => { const element = document.createElement("vicowa-input"); element.label = "Name"; element.hideLabel = true; element.static = true; return element };
controls.simpleData3.getData = getData3;
controls.simpleData3.onChange = () => {};
controls.simpleData3.onSelect = (p_SelectedItems) => {
console.log(`selected items: ${JSON.stringify(p_SelectedItems, null, 4)}`);
};
controls.simpleData3.initialize({
data: Symbol("data"),
startEdit(p_Item) { p_Item.hideLabel = false; p_Item.static = false; },
stopEdit(p_Item) { p_Item.hideLabel = true; p_Item.static = true; },
doSave(p_Item) { return p_Item.valid; },
doCancel(p_Item) { },
setItemData(p_Item, p_Data) { p_Item[this.data] = p_Data; p_Item.value = p_Data.name; },
getItemData(p_Item) { p_Item[this.data] = p_Item[this.data] || { name: p_Item.value }; p_Item[this.data].name = p_Item.value; return p_Item[this.data]; },
isValid(p_Item) { return !!p_Item.textContent; },
hasData(p_Item) { return !!p_Item.textContent; },
setReadyHandler(p_Item, p_Callback) { p_Callback(); },
setChangeHandler(p_Item, p_Callback) { p_Item.onChanged = p_Callback; },
});
};
controls.simpleData4.onAttached = () => {
controls.simpleData4.factory = () => {
const element = document.createElement("div");
const input = document.createElement("vicowa-input");
input.label = "Name";
input.hideLabel = true;
input.static = true;
element.appendChild(input);
const saveButton = document.createElement("button");
const cancelButton = document.createElement("button");
saveButton.textContent = "Custom save";
saveButton.style.display = "none";
cancelButton.textContent = "Custom cancel";
cancelButton.style.display = "none";
element.appendChild(saveButton);
element.appendChild(cancelButton);
element.dataStore = Symbol("data");
let readyCallback = null;
let changeCallback = null;
Object.defineProperty(element, "data", {
get(){ this[this.dataStore] = this[this.dataStore] || { name: input.value }; this[this.dataStore].name = input.value; return this[this.dataStore]; },
set(p_Data){ this[this.dataStore] = p_Data; input.value = p_Data.name; }
});
element.startEdit = () => { input.hideLabel = false; input.static = false; saveButton.style.display = ""; cancelButton.style.display = ""; };
element.stopEdit = () => { input.hideLabel = true; input.static = true; saveButton.style.display = "none"; cancelButton.style.display = "none"; };
element.doSave = () => { return true; };
element.doCancel = () => { };
element.isValid = () => { return input.valid; };
element.hasData = () => { return input.valid; };
Object.defineProperty(element, "onReady", {
set(p_Callback) { readyCallback = p_Callback; readyCallback(); },
get() { return readyCallback; }
});
Object.defineProperty(element, "onChange", {
set(p_Callback) { changeCallback = p_Callback; },
get() { return changeCallback; }
});
saveButton.addEventListener("click", () => {
if (element.doSave()) {
element.stopEdit();
element.applyActions.stopEditing();
element.applyActions.update();
}
});
cancelButton.addEventListener("click", () => {
element.doCancel();
element.stopEdit();
element.applyActions.stopEditing();
if (!element.hasData()) {
element.applyActions.removeEditArea();
}
});
return element;
};
controls.simpleData4.getData = getData3;
controls.simpleData4.onChange = (p_Data, p_OldData, p_Modified) => {
console.log(`current data: ${JSON.stringify(p_Data, null, 4)}`);
console.log(`old data: ${JSON.stringify(p_OldData, null, 4)}`);
console.log(`modified data: ${JSON.stringify(p_Modified.modifiedItems, null, 4)}`);
console.log(`added data: ${JSON.stringify(p_Modified.newItems, null, 4)}`);
console.log(`removed data: ${JSON.stringify(p_Modified.removedItems, null, 4)}`);
};
controls.simpleData4.onSelect = (p_SelectedItems) => {
console.log(`selected items: ${JSON.stringify(p_SelectedItems, null, 4)}`);
};
controls.simpleData4.initialize();
};
// setup the translator
translator.addTranslationLocation('../resources/translations');
translator.addTranslationUpdatedObserver((p_Translator) => {
document.body.setAttribute('lang', p_Translator.language);
}, null);
translator.language = document.body.getAttribute('lang');
controls.english.addEventListener('click', () => { translator.language = 'en_US'; });
controls.dutch.addEventListener('click', () => { translator.language = 'nl_NL'; });
</script>
</body>
</html>