Skip to content

Commit

Permalink
rework design collections functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@SalihuDickson
SalihuDickson committed Feb 11, 2025
1 parent 23053f3 commit a5aab1b
Show file tree
Hide file tree
Showing 39 changed files with 1,013 additions and 440 deletions.
152 changes: 98 additions & 54 deletions packages/ecc-utils-design/demo/collection/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import { html, render } from "lit";
import "../../dist/components/collection/index.js";

let items = [];
// const items = [];
let search = "";
let tag = "";

Expand All @@ -34,40 +34,41 @@
return data;
};

const dataInitial = await fetchDummyData(1, 5);
// const dataInitial = await fetchDummyData(1, 5);

items = dataInitial.map((item, index) => ({
index: index + 1,
name: item.title,
key: `item-${item.id}`,
lazy: true,
tag: {
name: item.completed ? "SUCCESS" : "ERROR",
type: item.completed ? "success" : "danger",
},
}));
// items = dataInitial.map((item, index) => ({
// index: index + 1,
// name: item.title,
// key: `item-${item.id}`,
// lazy: true,
// tag: {
// name: item.completed ? "SUCCESS" : "ERROR",
// type: item.completed ? "success" : "danger",
// },
// }));

const filters = [
{
key: "title",
type: "search",
placeholder: "Search",
},
{
key: "tag",
type: "select",
options: ["SUCCESS", "WARNING", "ERROR", "DEFAULT", "PRIMARY"],
placeholder: "Filter by tag",
selectConfig: {
// multiple: true,
},
},
];
// const filters = [
// {
// key: "title",
// type: "search",
// placeholder: "Search",
// },
// {
// key: "tag",
// type: "select",
// options: ["SUCCESS", "WARNING", "ERROR", "DEFAULT", "PRIMARY"],
// placeholder: "Filter by tag",
// selectConfig: {
// // multiple: true,
// },
// },
// ];

render(
html`<ecc-utils-design-collection
.items=${items}
.filters=${filters}
html`<ecc-d-collection
filter
search
page-length="2"
@ecc-utils-expand=${async (e) => {
// Check if child already exists
const children = e.target.querySelectorAll(
Expand All @@ -87,6 +88,7 @@
e.target.appendChild(child);
}
}}
// inspect how this filter works and implement the fnuctionality
@ecc-utils-filter=${async (e) => {
if (e.detail.key === "title") {
search = e.detail.value;
Expand Down Expand Up @@ -140,36 +142,78 @@
}
const data = await fetchDummyData(e.detail.page, 5, search, tag);
for (let i = 0; i < data.length; i += 1) {
const element = data[i];
const existingItem = e.target.items.find(
(item) => item.key === `item-${element.id}`
);
if (existingItem) {
e.target.items = e.target.items.filter(
(item) => item.key !== `item-${element.id}`
);
}
e.target.items = [
...e.target.items,
{
index: (e.detail.page - 1) * 5 + i + 1,
name: element.title,
key: `item-${element.id}`,
lazy: true,
tag: {
name: element.completed ? "SUCCESS" : "ERROR",
type: element.completed ? "success" : "danger",
},
},
];
// const element = data[i];
// const existingItem = e.target.items.find(
// (item) => item.key === `item-${element.id}`
// );
// if (existingItem) {
// e.target.items = e.target.items.filter(
// (item) => item.key !== `item-${element.id}`
// );
// }
// e.target.items = [
// ...e.target.items,
// {
// index: (e.detail.page - 1) * 5 + i + 1,
// name: element.title,
// key: `item-${element.id}`,
// lazy: true,
// tag: {
// name: element.completed ? "SUCCESS" : "ERROR",
// type: element.completed ? "success" : "danger",
// },
// },
// ];
}
if (data.length < 5) {
e.target.totalItems = (e.detail.page - 1) * 5 + data.length;
}
}}
>
<div slot="item-5">Child item-5 without lazy loading</div>
</ecc-utils-design-collection>`,
<ecc-d-collection-header>
<ecc-d-collection-filter
multiple
type="select"
options='["item", "work"]'
@ecc-input=${(e) => {
console.log("changing from the top", e);
}}
></ecc-d-collection-filter>
</ecc-d-collection-header>
<div ecc-collection-body>
<ecc-d-collection-item
lazy
key="item"
name="item"
tag="ERROR"
@ecc-expand=${(e) => {
e.target.renderContent();
}}
>
Title: Item content written here
</ecc-d-collection-item>
<ecc-d-collection-item
lazy
key="work"
name="work"
tag="DANGER"
></ecc-d-collection-item>
<ecc-d-collection-item
lazy
key="work-item"
name="work-item"
tag="DANGER"
></ecc-d-collection-item>
</div>
<ecc-d-collection-footer
page="2"
@ecc-utils-page-change=${() => {
console.log("page changed");
}}
></ecc-d-collection-footer>
</ecc-d-collection>`,
document.querySelector("#demo")
);
</script>
Expand Down
75 changes: 70 additions & 5 deletions packages/ecc-utils-design/demo/form/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

render(
html`<ecc-d-form
@ecc-utils-submit=${async (e) => {
@ecc-submit=${async (e) => {
try {
console.log("form - submitted", e.detail);
document.querySelector("ecc-d-form").loading();
Expand All @@ -39,6 +39,18 @@
label="Name"
required
tooltip="Enter name"
@change=${() => {
console.log("chenaged");
}}
@ecc-input=${(e) => {
console.log("name", e);
}}
@keydown=${(e) => {
console.log("keydown", e);
}}
@blur=${() => {
console.log("clicked");
}}
></ecc-d-form-input>
<ecc-d-form-input
Expand All @@ -60,6 +72,12 @@
type="file"
required
tooltip="Your ID document"
@dragover=${() => {
console.log("dragged to");
}}
@input=${() => {
console.log("drag leave");
}}
></ecc-d-form-input>
<ecc-d-form-input
Expand All @@ -71,10 +89,22 @@
tooltip="Your ID document"
></ecc-d-form-input>
<ecc-d-form-input required type="select" label="Gender">
<option ecc-option value="female">Female</option>
<option ecc-option value="male">Male</option>
<option ecc-option value="none">Do not want to Disclose</option>
// continue from modifying how options are sent
<ecc-d-form-input
required
multiple
type="select"
label="Gender"
options='["Female", "Male", "Do not want to Disclose-none"]'
options-prefix-icons
options-suffix-icons
@change=${() => {
console.log("changed");
}}
@ecc-input=${() => {
console.log("changes");
}}
>
</ecc-d-form-input>
<ecc-d-form-group type="group" label="Address" key="address">
Expand All @@ -96,6 +126,9 @@
key="houseNumber"
label="House Number"
tooltip="Your house number"
@ecc-input=${() => {
console.log("house number changed");
}}
>
</ecc-d-form-input>
<ecc-d-form-input required key="street" label="Street">
Expand All @@ -105,6 +138,38 @@
<ecc-d-form-input required key="country" label="Country">
</ecc-d-form-input>
<ecc-d-form-group
required
type="array"
label="Details"
instances="1"
max="2"
min="1"
>
<ecc-d-form-input
type="switch"
key="isPrimary"
label="Primary Address"
>
</ecc-d-form-input>
<ecc-d-form-input
key="houseNumber"
label="House Number"
tooltip="Your house number"
@ecc-input=${() => {
console.log("house number changed");
}}
>
</ecc-d-form-input>
<ecc-d-form-input required key="street" label="Street">
</ecc-d-form-input>
<ecc-d-form-input required key="city" label="City">
</ecc-d-form-input>
<ecc-d-form-input required key="country" label="Country">
</ecc-d-form-input>
</ecc-d-form-group>
</ecc-d-form-group>
</ecc-d-form-group>
</ecc-d-form> `,
Expand Down
2 changes: 1 addition & 1 deletion packages/ecc-utils-design/src/components/code/code.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default class EccUtilsDesignCode extends LitElement {
this.value = this.editor.getValue();

this.dispatchEvent(
new CustomEvent("ecc-utils-change", {
new CustomEvent("ecc-change", {
detail: { value: this.value },
bubbles: true,
composed: true,
Expand Down
2 changes: 2 additions & 0 deletions packages/ecc-utils-design/src/components/collection/collection.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ const styles = css`
/* Header */
.header {
margin-bottom: var(--ecc-spacing-x-large);
display: flex;
justify-content: flex-end;
}
.filters {
display: flex;
Expand Down
Loading

0 comments on commit a5aab1b

Please sign in to comment.