Skip to content

Commit

Permalink
complete functionality and fix bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@SalihuDickson
SalihuDickson committed Feb 14, 2025
1 parent a5aab1b commit 0a372cc
Show file tree
Hide file tree
Showing 16 changed files with 445 additions and 519 deletions.
13 changes: 6 additions & 7 deletions packages/ecc-client-elixir-ro-crate/src/components/about/about.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { LitElement, html } from "lit";
import { state } from "lit/decorators.js";
import "@elixir-cloud/design/dist/components/form/index.js";
import { Field } from "@elixir-cloud/design/dist/components/form/form";

export default class ECCClientRoCrateAbout extends LitElement {
@state()
Expand All @@ -14,7 +13,7 @@ export default class ECCClientRoCrateAbout extends LitElement {
private _handleChangeLicenseType(e: CustomEvent): void {
if (e.detail.key !== "license") return;

const licenseField: Field = {
const licenseField: any = {
key: "license",
label: "license",
type: "group",
Expand Down Expand Up @@ -45,7 +44,7 @@ export default class ECCClientRoCrateAbout extends LitElement {
);

if (e.detail.value === "CreativeWork") {
const creativeWorkFields: Field[] = [
const creativeWorkFields: any[] = [
{
key: "@id",
label: "@id",
Expand Down Expand Up @@ -87,7 +86,7 @@ export default class ECCClientRoCrateAbout extends LitElement {

licenseField.children?.push(...creativeWorkFields);
} else if (e.detail.value === "URL") {
const urlField: Field = {
const urlField: any = {
key: "url",
label: "URL",
type: "url",
Expand All @@ -104,7 +103,7 @@ export default class ECCClientRoCrateAbout extends LitElement {
}

@state()
DatasetFields: Field[] = [
DatasetFields: any[] = [
{
key: "@id",
label: "@id",
Expand Down Expand Up @@ -181,7 +180,7 @@ export default class ECCClientRoCrateAbout extends LitElement {
},
];

static RelatedPeopleFields: Field[] = [
static RelatedPeopleFields: any[] = [
{
key: "author",
label: "Author",
Expand Down Expand Up @@ -388,7 +387,7 @@ export default class ECCClientRoCrateAbout extends LitElement {
},
];

static StructureFields: Field[] = [
static StructureFields: any[] = [
{
key: "hasPart",
label: "Has Part",
Expand Down
5 changes: 1 addition & 4 deletions packages/ecc-utils-design/demo/code/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,7 @@
`;

render(
html`<ecc-utils-design-code
language="yaml"
value=${code}
></ecc-utils-design-code>`,
html`<ecc-d-code language="yaml" value=${code}></ecc-d-code>`,
document.querySelector("#demo")
);
</script>
Expand Down
192 changes: 37 additions & 155 deletions packages/ecc-utils-design/demo/collection/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,194 +18,76 @@

<script type="module">
import { html, render } from "lit";
import { repeat } from "lit/directives/repeat.js";
import "../../dist/components/collection/index.js";

// const items = [];
let search = "";
let tag = "";
// new documentation
// add functionaility for url pagination in footer

const fetchDummyData = async (page, limit, searchString, tags) => {
const res = await fetch(
`https://jsonplaceholder.typicode.com/todos?_page=${page}&_limit=${limit}${
`https://jsonplaceholder.typicode.com/comments?_page=${page}&_limit=${limit}${
searchString ? `&title_like=${searchString}` : ""
}${tags ? `&completed=${tags === "SUCCESS"}` : ""}`
);
const data = await res.json();
return data;
};

// 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",
// },
// }));

// 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 dataInitial = await fetchDummyData(1, 20);

render(
html`<ecc-d-collection
filter
search
page-length="2"
@ecc-utils-expand=${async (e) => {
// Check if child already exists
const children = e.target.querySelectorAll(
`[slot="${e.detail.key}"]`
);
if (children.length === 0) {
// Add chlld to ecc-utils-design-collection
const res = await fetch(
`https://jsonplaceholder.typicode.com/todos/${
e.detail.key.split("-")[1]
}`
);
const data = await res.json();
const child = document.createElement("div");
child.setAttribute("slot", e.detail.key);
child.innerHTML = `<p>Title: ${data.title}</p>`;
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;
const data = await fetchDummyData(
1,
5,
e.detail.value.toLowerCase(),
tag
);
const newItems = data.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",
},
}));
e.target.items = newItems;
if (data.length < 5) {
e.target.totalItems = data.length;
}
} else if (e.detail.key === "tag") {
tag = e.detail.value;
const data = await fetchDummyData(1, 5, search, e.detail.value);
const newItems = data.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",
},
}));
e.target.items = newItems;
if (data.length < 5) {
e.target.totalItems = data.length;
}
}
}}
@ecc-utils-page-change=${async (e) => {
if (e.detail.page === 3) {
setTimeout(() => {
document
.querySelector("ecc-utils-design-collection")
.error("This is an error message of page 3!");
}, 1000);
return;
}
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",
// },
// },
// ];
}
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>
html`<ecc-d-collection filter search page-length="2">
<ecc-d-collection-header>
<ecc-d-collection-filter
auto-option
multiple
type="select"
options='["item", "work"]'
@ecc-input=${(e) => {
console.log("changing from the top", e);
}}
></ecc-d-collection-filter>
>
</ecc-d-collection-filter>
</ecc-d-collection-header>
<div ecc-collection-body>
${repeat(
dataInitial,
(item) =>
html`
<ecc-d-collection-item
lazy-content
name=${item.name}
key=${item.id}
tag=${parseInt(item.id, 10) % 2 === 0
? "DANGER"
: "SUCCESS"}
tag-type=${parseInt(item.id, 10) % 2 === 0
? "danger"
: "success"}
@ecc-expand=${async (e) => {
const comment = await fetch(
`https://jsonplaceholder.typicode.com/comments/${e.detail.key}`
).then((response) => response.json());
e.target.renderContent(e.detail.key, comment.body);
}}
>
</ecc-d-collection-item>
`
)}
<ecc-d-collection-item
lazy
key="item"
name="item"
tag="ERROR"
@ecc-expand=${(e) => {
e.target.renderContent();
// e.target.error("random error");
}}
>
Title: Item content written here
Title: Item without lazy loading
</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"
Expand Down
2 changes: 1 addition & 1 deletion packages/ecc-utils-design/demo/form/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
multiple
type="select"
label="Gender"
options='["Female", "Male", "Do not want to Disclose-none"]'
options='["Female", "Female", "Male", "Do not want to Disclose-none"]'
options-prefix-icons
options-suffix-icons
@change=${() => {
Expand Down
2 changes: 1 addition & 1 deletion packages/ecc-utils-design/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
],
"scripts": {
"analyze": "cem analyze --litelement",
"build": "node ../../scripts/build.js -p ecc-utils-design-",
"build": "node ../../scripts/build.js -p ecc-d-",
"dev": "concurrently -r \"npm run build -- --watch\" \"wds\"",
"clean": "rm -rf dist node_modules custom-elements-manifest.config.js",
"test": "web-test-runner --group default --config ../../web-test.runner-config.mjs",
Expand Down
4 changes: 2 additions & 2 deletions packages/ecc-utils-design/src/components/code/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import EccUtilsDesignCode from "./code.js";
export * from "./code.js";
export default EccUtilsDesignCode;

window.customElements.define("ecc-utils-design-code", EccUtilsDesignCode);
window.customElements.define("ecc-d-code", EccUtilsDesignCode);

declare global {
interface HTMLElementTagNameMap {
"ecc-utils-design-code": EccUtilsDesignCode;
"ecc-d-code": EccUtilsDesignCode;
}
}
Loading

0 comments on commit 0a372cc

Please sign in to comment.