Skip to content

Commit a5aab1b

Browse files
SalihuDicksonSalihuDickson
committed
rework design collections functionality
1 parent 23053f3 commit a5aab1b

39 files changed

+1013
-440
lines changed

‎packages/ecc-utils-design/demo/collection/index.html

+98-54
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
import { html, render } from "lit";
2121
import "../../dist/components/collection/index.js";
2222

23-
let items = [];
23+
// const items = [];
2424
let search = "";
2525
let tag = "";
2626

@@ -34,40 +34,41 @@
3434
return data;
3535
};
3636

37-
const dataInitial = await fetchDummyData(1, 5);
37+
// const dataInitial = await fetchDummyData(1, 5);
3838

39-
items = dataInitial.map((item, index) => ({
40-
index: index + 1,
41-
name: item.title,
42-
key: `item-${item.id}`,
43-
lazy: true,
44-
tag: {
45-
name: item.completed ? "SUCCESS" : "ERROR",
46-
type: item.completed ? "success" : "danger",
47-
},
48-
}));
39+
// items = dataInitial.map((item, index) => ({
40+
// index: index + 1,
41+
// name: item.title,
42+
// key: `item-${item.id}`,
43+
// lazy: true,
44+
// tag: {
45+
// name: item.completed ? "SUCCESS" : "ERROR",
46+
// type: item.completed ? "success" : "danger",
47+
// },
48+
// }));
4949

50-
const filters = [
51-
{
52-
key: "title",
53-
type: "search",
54-
placeholder: "Search",
55-
},
56-
{
57-
key: "tag",
58-
type: "select",
59-
options: ["SUCCESS", "WARNING", "ERROR", "DEFAULT", "PRIMARY"],
60-
placeholder: "Filter by tag",
61-
selectConfig: {
62-
// multiple: true,
63-
},
64-
},
65-
];
50+
// const filters = [
51+
// {
52+
// key: "title",
53+
// type: "search",
54+
// placeholder: "Search",
55+
// },
56+
// {
57+
// key: "tag",
58+
// type: "select",
59+
// options: ["SUCCESS", "WARNING", "ERROR", "DEFAULT", "PRIMARY"],
60+
// placeholder: "Filter by tag",
61+
// selectConfig: {
62+
// // multiple: true,
63+
// },
64+
// },
65+
// ];
6666

6767
render(
68-
html`<ecc-utils-design-collection
69-
.items=${items}
70-
.filters=${filters}
68+
html`<ecc-d-collection
69+
filter
70+
search
71+
page-length="2"
7172
@ecc-utils-expand=${async (e) => {
7273
// Check if child already exists
7374
const children = e.target.querySelectorAll(
@@ -87,6 +88,7 @@
8788
e.target.appendChild(child);
8889
}
8990
}}
91+
// inspect how this filter works and implement the fnuctionality
9092
@ecc-utils-filter=${async (e) => {
9193
if (e.detail.key === "title") {
9294
search = e.detail.value;
@@ -140,36 +142,78 @@
140142
}
141143
const data = await fetchDummyData(e.detail.page, 5, search, tag);
142144
for (let i = 0; i < data.length; i += 1) {
143-
const element = data[i];
144-
const existingItem = e.target.items.find(
145-
(item) => item.key === `item-${element.id}`
146-
);
147-
if (existingItem) {
148-
e.target.items = e.target.items.filter(
149-
(item) => item.key !== `item-${element.id}`
150-
);
151-
}
152-
e.target.items = [
153-
...e.target.items,
154-
{
155-
index: (e.detail.page - 1) * 5 + i + 1,
156-
name: element.title,
157-
key: `item-${element.id}`,
158-
lazy: true,
159-
tag: {
160-
name: element.completed ? "SUCCESS" : "ERROR",
161-
type: element.completed ? "success" : "danger",
162-
},
163-
},
164-
];
145+
// const element = data[i];
146+
// const existingItem = e.target.items.find(
147+
// (item) => item.key === `item-${element.id}`
148+
// );
149+
// if (existingItem) {
150+
// e.target.items = e.target.items.filter(
151+
// (item) => item.key !== `item-${element.id}`
152+
// );
153+
// }
154+
// e.target.items = [
155+
// ...e.target.items,
156+
// {
157+
// index: (e.detail.page - 1) * 5 + i + 1,
158+
// name: element.title,
159+
// key: `item-${element.id}`,
160+
// lazy: true,
161+
// tag: {
162+
// name: element.completed ? "SUCCESS" : "ERROR",
163+
// type: element.completed ? "success" : "danger",
164+
// },
165+
// },
166+
// ];
165167
}
166168
if (data.length < 5) {
167169
e.target.totalItems = (e.detail.page - 1) * 5 + data.length;
168170
}
169171
}}
170172
>
171173
<div slot="item-5">Child item-5 without lazy loading</div>
172-
</ecc-utils-design-collection>`,
174+
<ecc-d-collection-header>
175+
<ecc-d-collection-filter
176+
multiple
177+
type="select"
178+
options='["item", "work"]'
179+
@ecc-input=${(e) => {
180+
console.log("changing from the top", e);
181+
}}
182+
></ecc-d-collection-filter>
183+
</ecc-d-collection-header>
184+
185+
<div ecc-collection-body>
186+
<ecc-d-collection-item
187+
lazy
188+
key="item"
189+
name="item"
190+
tag="ERROR"
191+
@ecc-expand=${(e) => {
192+
e.target.renderContent();
193+
}}
194+
>
195+
Title: Item content written here
196+
</ecc-d-collection-item>
197+
<ecc-d-collection-item
198+
lazy
199+
key="work"
200+
name="work"
201+
tag="DANGER"
202+
></ecc-d-collection-item>
203+
<ecc-d-collection-item
204+
lazy
205+
key="work-item"
206+
name="work-item"
207+
tag="DANGER"
208+
></ecc-d-collection-item>
209+
</div>
210+
<ecc-d-collection-footer
211+
page="2"
212+
@ecc-utils-page-change=${() => {
213+
console.log("page changed");
214+
}}
215+
></ecc-d-collection-footer>
216+
</ecc-d-collection>`,
173217
document.querySelector("#demo")
174218
);
175219
</script>

‎packages/ecc-utils-design/demo/form/index.html

+70-5
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
render(
2121
html`<ecc-d-form
22-
@ecc-utils-submit=${async (e) => {
22+
@ecc-submit=${async (e) => {
2323
try {
2424
console.log("form - submitted", e.detail);
2525
document.querySelector("ecc-d-form").loading();
@@ -39,6 +39,18 @@
3939
label="Name"
4040
required
4141
tooltip="Enter name"
42+
@change=${() => {
43+
console.log("chenaged");
44+
}}
45+
@ecc-input=${(e) => {
46+
console.log("name", e);
47+
}}
48+
@keydown=${(e) => {
49+
console.log("keydown", e);
50+
}}
51+
@blur=${() => {
52+
console.log("clicked");
53+
}}
4254
></ecc-d-form-input>
4355
4456
<ecc-d-form-input
@@ -60,6 +72,12 @@
6072
type="file"
6173
required
6274
tooltip="Your ID document"
75+
@dragover=${() => {
76+
console.log("dragged to");
77+
}}
78+
@input=${() => {
79+
console.log("drag leave");
80+
}}
6381
></ecc-d-form-input>
6482
6583
<ecc-d-form-input
@@ -71,10 +89,22 @@
7189
tooltip="Your ID document"
7290
></ecc-d-form-input>
7391
74-
<ecc-d-form-input required type="select" label="Gender">
75-
<option ecc-option value="female">Female</option>
76-
<option ecc-option value="male">Male</option>
77-
<option ecc-option value="none">Do not want to Disclose</option>
92+
// continue from modifying how options are sent
93+
<ecc-d-form-input
94+
required
95+
multiple
96+
type="select"
97+
label="Gender"
98+
options='["Female", "Male", "Do not want to Disclose-none"]'
99+
options-prefix-icons
100+
options-suffix-icons
101+
@change=${() => {
102+
console.log("changed");
103+
}}
104+
@ecc-input=${() => {
105+
console.log("changes");
106+
}}
107+
>
78108
</ecc-d-form-input>
79109
80110
<ecc-d-form-group type="group" label="Address" key="address">
@@ -96,6 +126,9 @@
96126
key="houseNumber"
97127
label="House Number"
98128
tooltip="Your house number"
129+
@ecc-input=${() => {
130+
console.log("house number changed");
131+
}}
99132
>
100133
</ecc-d-form-input>
101134
<ecc-d-form-input required key="street" label="Street">
@@ -105,6 +138,38 @@
105138
106139
<ecc-d-form-input required key="country" label="Country">
107140
</ecc-d-form-input>
141+
142+
<ecc-d-form-group
143+
required
144+
type="array"
145+
label="Details"
146+
instances="1"
147+
max="2"
148+
min="1"
149+
>
150+
<ecc-d-form-input
151+
type="switch"
152+
key="isPrimary"
153+
label="Primary Address"
154+
>
155+
</ecc-d-form-input>
156+
<ecc-d-form-input
157+
key="houseNumber"
158+
label="House Number"
159+
tooltip="Your house number"
160+
@ecc-input=${() => {
161+
console.log("house number changed");
162+
}}
163+
>
164+
</ecc-d-form-input>
165+
<ecc-d-form-input required key="street" label="Street">
166+
</ecc-d-form-input>
167+
<ecc-d-form-input required key="city" label="City">
168+
</ecc-d-form-input>
169+
170+
<ecc-d-form-input required key="country" label="Country">
171+
</ecc-d-form-input>
172+
</ecc-d-form-group>
108173
</ecc-d-form-group>
109174
</ecc-d-form-group>
110175
</ecc-d-form> `,

‎packages/ecc-utils-design/src/components/code/code.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default class EccUtilsDesignCode extends LitElement {
5151
this.value = this.editor.getValue();
5252

5353
this.dispatchEvent(
54-
new CustomEvent("ecc-utils-change", {
54+
new CustomEvent("ecc-change", {
5555
detail: { value: this.value },
5656
bubbles: true,
5757
composed: true,

‎packages/ecc-utils-design/src/components/collection/collection.styles.ts

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ const styles = css`
77
/* Header */
88
.header {
99
margin-bottom: var(--ecc-spacing-x-large);
10+
display: flex;
11+
justify-content: flex-end;
1012
}
1113
.filters {
1214
display: flex;

0 commit comments

Comments
 (0)