diff --git a/.gitignore b/.gitignore index 3d97bbbe..7bbf0bde 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,5 @@ yarn-error.log* # vercel .vercel + +.idea \ No newline at end of file diff --git a/packages/ecc-client-elixir-ro-crate/demo/about/index.html b/packages/ecc-client-elixir-ro-crate/demo/about/index.html new file mode 100644 index 00000000..60bd43ff --- /dev/null +++ b/packages/ecc-client-elixir-ro-crate/demo/about/index.html @@ -0,0 +1,27 @@ + + + + + + + ecc-client-elixir-ro-crate + +
+ + + + \ No newline at end of file diff --git a/packages/ecc-client-elixir-ro-crate/demo/index.html b/packages/ecc-client-elixir-ro-crate/demo/index.html new file mode 100644 index 00000000..3657f050 --- /dev/null +++ b/packages/ecc-client-elixir-ro-crate/demo/index.html @@ -0,0 +1,19 @@ + + + + + + ecc-client-elixir-ro-crate + + + +
+ About +
+
+ + \ No newline at end of file diff --git a/packages/ecc-client-elixir-ro-crate/src/components/about/about.ts b/packages/ecc-client-elixir-ro-crate/src/components/about/about.ts new file mode 100644 index 00000000..b35a9800 --- /dev/null +++ b/packages/ecc-client-elixir-ro-crate/src/components/about/about.ts @@ -0,0 +1,575 @@ +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() + private activeTab = 0; + + private _switchTab(index: number): void { + this.activeTab = index; + } + private _handleDataset(e: CustomEvent): void { + const licenceFieldIndex = this.AboutFields.findIndex( + (field) => field.key === "licence" + ); + const licenceChildren = this.AboutFields[licenceFieldIndex].children ?? []; + if (licenceFieldIndex === -1) return; + let updatedChildren: Array = []; + + if (e.detail.key === "licence" && e.detail.value === "URL") { + updatedChildren = licenceChildren + .filter((child) => child.key !== "@id") + .filter((child) => child.key !== "@type") + .filter((child) => child.key !== "name") + .filter((child) => child.key !== "desc"); + + const hasUrl = updatedChildren.some((child) => child.key === "url"); + if (!hasUrl) { + updatedChildren.push({ + key: "url", + label: "URL", + type: "url", + fieldOptions: { + required: true, + }, + }); + } + } else if ( + e.detail.key === "licence" && + e.detail.value === "CreativeWork" + ) { + updatedChildren = licenceChildren.filter((child) => child.key !== "url"); + + updatedChildren.push( + { + key: "@id", + label: "@id", + type: "text", + fieldOptions: { + required: true, + tooltip: "Persistent, managed unique ID in URL format", + }, + }, + { + key: "@type", + label: "@type", + type: "text", + fieldOptions: { + default: "CreativeWork", + required: true, + tooltip: "The type of the entity.", + }, + }, + { + key: "name", + label: "Name", + type: "text", + fieldOptions: { + required: true, + tooltip: "The name of the item.", + }, + }, + { + key: "desc", + label: "Description", + type: "text", + fieldOptions: { + required: true, + tooltip: "A description of the item.", + }, + } + ); + } + this.AboutFields = [ + ...this.AboutFields.slice(0, licenceFieldIndex), + { + ...this.AboutFields[licenceFieldIndex], + children: updatedChildren, + }, + ...this.AboutFields.slice(licenceFieldIndex + 1), + ]; + } + @state() + AboutFields: Field[] = [ + { + key: "@id", + label: "@id", + type: "text", + fieldOptions: { + tooltip: + "Persistent, managed unique ID in URL format (if available), for example a DOI for a collection or an ORCID, personal home page URL or email address for a person", + default: "./", + required: true, + }, + }, + + { + key: "@type", + label: "@type", + type: "array", + fieldOptions: { + tooltip: "The type of the entity.", + }, + arrayOptions: { + defaultInstances: 1, + max: 3, + }, + children: [ + { + key: "Type", + label: "Select", + type: "text", + fieldOptions: { + required: true, + default: "Dataset", + }, + }, + ], + }, + + { + key: "name", + label: "Name", + type: "text", + fieldOptions: { + tooltip: "The name of the item.", + required: true, + }, + }, + { + key: "description", + label: "Description", + type: "text", + fieldOptions: { + tooltip: "A description of the item.", + required: true, + }, + }, + { + key: "datePublished", + label: "Date Published", + type: "date", + fieldOptions: { + tooltip: "Date of first broadcast or publication.", + required: true, + }, + }, + { + key: "licence", + label: "Licence", + type: "group", + fieldOptions: { + required: true, + }, + groupOptions: { + collapsible: true, + }, + children: [ + { + key: "licence", + label: "Licence Type", + type: "select", + fieldOptions: { + required: true, + }, + selectOptions: [ + { label: "URL", value: "URL" }, + { label: "CreativeWork", value: "CreativeWork" }, + ], + }, + ], + }, + ]; + + static RelatedPeopleFields: Field[] = [ + { + key: "author-entities", + label: "Author Entities", + type: "group", + fieldOptions: { + required: false, + default: "", + tooltip: "The author of this content.", + }, + groupOptions: { + collapsible: true, + }, + children: [ + { + key: "author-person", + label: "Person", + type: "array", + arrayOptions: { + defaultInstances: 0, + }, + children: [ + { + key: "person-id", + label: "@id", + type: "url", + fieldOptions: { + required: true, + }, + }, + { + key: "type", + label: "@type", + type: "text", + fieldOptions: { + default: "Person", + }, + }, + { + key: "person-name", + label: "Name", + type: "text", + fieldOptions: { + required: true, + }, + }, + { + key: "perosn-url", + label: "URL", + type: "url", + fieldOptions: { + required: false, + }, + }, + ], + }, + { + key: "org", + label: "Organisation", + type: "array", + arrayOptions: { + defaultInstances: 0, + }, + children: [ + { + key: "org-id", + label: "@id", + type: "url", + fieldOptions: { + required: true, + }, + }, + { + key: "type", + label: "@type", + type: "text", + fieldOptions: { + default: "Organisation", + }, + }, + { + key: "org-name", + label: "Name", + type: "text", + fieldOptions: { + required: true, + }, + }, + { + key: "org-url", + label: "URL", + type: "url", + fieldOptions: { + required: true, + }, + }, + ], + }, + ], + }, + { + key: "funder-entities", + label: "Funder Entities", + type: "group", + fieldOptions: { + required: false, + default: "", + tooltip: "The funcder of this content.", + }, + groupOptions: { + collapsible: true, + }, + children: [ + { + key: "funder-person", + label: "Person", + type: "array", + arrayOptions: { + defaultInstances: 0, + }, + children: [ + { + key: "person-id", + label: "@id", + type: "url", + fieldOptions: { + required: true, + }, + }, + { + key: "type", + label: "@type", + type: "text", + fieldOptions: { + default: "Person", + }, + }, + { + key: "person-name", + label: "Name", + type: "text", + fieldOptions: { + required: true, + }, + }, + { + key: "perosn-url", + label: "URL", + type: "url", + fieldOptions: { + required: false, + }, + }, + ], + }, + { + key: "funder-org", + label: "Organisation", + type: "array", + arrayOptions: { + defaultInstances: 0, + }, + children: [ + { + key: "org-id", + label: "@id", + type: "url", + fieldOptions: { + required: true, + }, + }, + { + key: "type", + label: "@type", + type: "text", + fieldOptions: { + default: "Organisation", + }, + }, + { + key: "org-name", + label: "Name", + type: "text", + fieldOptions: { + required: true, + }, + }, + { + key: "org-url", + label: "URL", + type: "url", + fieldOptions: { + required: true, + }, + }, + ], + }, + ], + }, + { + key: "publisher-entities", + label: "Publisher Entities", + type: "group", + fieldOptions: { + required: false, + default: "", + tooltip: "The author of this content.", + }, + groupOptions: { + collapsible: true, + }, + children: [ + { + key: "publisher-person", + label: "Person", + type: "array", + arrayOptions: { + defaultInstances: 0, + }, + children: [ + { + key: "person-id", + label: "@id", + type: "url", + fieldOptions: { + required: true, + }, + }, + { + key: "type", + label: "@type", + type: "select", + fieldOptions: { + default: "Person", + }, + }, + { + key: "person-name", + label: "Name", + type: "text", + fieldOptions: { + required: true, + }, + }, + { + key: "perosn-url", + label: "URL", + type: "url", + fieldOptions: { + required: false, + }, + }, + ], + }, + { + key: "publisher-org", + label: "Organisation", + type: "array", + arrayOptions: { + defaultInstances: 0, + }, + children: [ + { + key: "org-id", + label: "@id", + type: "url", + fieldOptions: { + required: true, + }, + }, + { + key: "type", + label: "@type", + type: "text", + fieldOptions: { + default: "Organisation", + }, + }, + { + key: "org-name", + label: "Name", + type: "text", + fieldOptions: { + required: true, + }, + }, + { + key: "org-url", + label: "URL", + type: "url", + fieldOptions: { + required: true, + }, + }, + ], + }, + ], + }, + ]; + + static StructureFields: Field[] = [ + { + key: "hasPart", + label: "Has Part", + type: "array", + fieldOptions: { + required: false, + default: "", + }, + arrayOptions: { + defaultInstances: 0, + }, + children: [ + { + key: "entity", + label: "Entity", + type: "group", + groupOptions: { + collapsible: true, + }, + children: [ + { + key: "type", + label: "Type", + type: "select", + fieldOptions: { + default: "Dataset", + }, + selectOptions: [ + { + label: "Dataset", + value: "Dataset", + }, + { + label: "File", + value: "File", + }, + ], + }, + ], + }, + ], + }, + ]; + + render() { + return html` +
+
+ About +
+
+ Related People, Orgs & Works +
+
+ Structure +
+
+
+ ${this.activeTab === 0 + ? html` { + this._handleDataset(e); + }} + .fields=${this.AboutFields} + />` + : ""} + ${this.activeTab === 1 + ? html`` + : ""} + ${this.activeTab === 2 + ? html`` + : ""} +
+ `; + } +} diff --git a/packages/ecc-client-elixir-ro-crate/src/components/about/index.ts b/packages/ecc-client-elixir-ro-crate/src/components/about/index.ts new file mode 100644 index 00000000..1e3116b0 --- /dev/null +++ b/packages/ecc-client-elixir-ro-crate/src/components/about/index.ts @@ -0,0 +1,15 @@ +import ECCClientRoCrateAbout from "./about.js"; + +export * from "./about.js"; +export default ECCClientRoCrateAbout; + +window.customElements.define( + "ecc-client-elixir-ro-crate-about", + ECCClientRoCrateAbout +); + +declare global { + interface HTMLElementTagNameMap { + "ecc-client-elixir-ro-crate-about": ECCClientRoCrateAbout; + } +} \ No newline at end of file diff --git a/packages/ecc-client-elixir-ro-crate/src/components/index.ts b/packages/ecc-client-elixir-ro-crate/src/components/index.ts new file mode 100644 index 00000000..36218803 --- /dev/null +++ b/packages/ecc-client-elixir-ro-crate/src/components/index.ts @@ -0,0 +1 @@ +import "./about/about.js";