From d6bdd270728a79d34634f1c265a67f756a9e483a Mon Sep 17 00:00:00 2001 From: Maximilian Inckmann - KIT Date: Fri, 18 Aug 2023 18:49:58 +0200 Subject: [PATCH 1/2] Fixed minor issues --- package.json | 2 +- .../beautiful-orcid/beautiful-orcid.tsx | 2 +- .../display-magic/display-magic.tsx | 268 +++++++++--------- .../foldable-component/foldable-component.tsx | 127 ++++----- .../handle-highlight/handle-highlight.tsx | 49 ++-- src/utils/URLType.tsx | 41 +-- 6 files changed, 241 insertions(+), 248 deletions(-) diff --git a/package.json b/package.json index 6a10890..c5934db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kit-data-manager/pid-component", - "version": "0.0.1", + "version": "0.0.2", "license": "Apache-2.0", "description": "The PID-Component is a web component that can be used to display PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.", "author": "Maximilian Inckmann (https://orcid.org/0009-0005-2800-4833)", diff --git a/src/components/beautiful-orcid/beautiful-orcid.tsx b/src/components/beautiful-orcid/beautiful-orcid.tsx index 2f1ac12..07a3853 100644 --- a/src/components/beautiful-orcid/beautiful-orcid.tsx +++ b/src/components/beautiful-orcid/beautiful-orcid.tsx @@ -58,7 +58,7 @@ export class BeautifulOrcid { return + target={"_blank"} rel={"noopener noreferrer"}> diff --git a/src/components/display-magic/display-magic.tsx b/src/components/display-magic/display-magic.tsx index 91a23c7..5ac9609 100644 --- a/src/components/display-magic/display-magic.tsx +++ b/src/components/display-magic/display-magic.tsx @@ -1,8 +1,8 @@ -import {Component, Host, h, Prop, State, Watch} from '@stencil/core'; -import {GenericIdentifierType} from "../../utils/GenericIdentifierType"; -import {FoldableItem} from "../../utils/FoldableItem"; -import {FoldableAction} from "../../utils/FoldableAction"; -import {Parser} from "../../utils/Parser"; +import { Component, Host, h, Prop, State, Watch } from '@stencil/core'; +import { GenericIdentifierType } from '../../utils/GenericIdentifierType'; +import { FoldableItem } from '../../utils/FoldableItem'; +import { FoldableAction } from '../../utils/FoldableAction'; +import { Parser } from '../../utils/Parser'; @Component({ tag: 'display-magic', @@ -109,7 +109,7 @@ export class DisplayMagic { * Can be "loading", "loaded" or "error". * Defaults to "loading". */ - @State() displayStatus: "loading" | "loaded" | "error" = "loading"; + @State() displayStatus: 'loading' | 'loaded' | 'error' = 'loading'; /** * The current page of the table. @@ -120,9 +120,9 @@ export class DisplayMagic { * Watches the value property and calls connectedCallback() if it changes. * This is important for the different pages inside the table, since the magic-display components are not rerendered by default on value or state change. */ - @Watch("value") + @Watch('value') async watchValue() { - this.displayStatus = "loading"; + this.displayStatus = 'loading'; // this.identifierObject = undefined; await this.connectedCallback(); } @@ -164,11 +164,11 @@ export class DisplayMagic { this.actions = obj.actions; this.actions.sort((a, b) => a.priority - b.priority); } - this.displayStatus = "loaded"; + this.displayStatus = 'loaded'; console.log(this.identifierObject); console.debug(this.items); console.debug(this.actions); - console.log("Finished loading") + console.log('Finished loading'); } /** @@ -176,7 +176,7 @@ export class DisplayMagic { */ private toggleSubcomponents = () => { if (this.showSubcomponents && (this.levelOfSubcomponents - this.currentLevelOfSubcomponents > 0)) this.loadSubcomponents = !this.loadSubcomponents; - } + }; /** * Shows the tooltip of the hovered element. @@ -186,9 +186,9 @@ export class DisplayMagic { let target = event.target as HTMLElement; do { target = target.parentElement as HTMLElement; - } while (target !== null && target.tagName !== "A") - if (target !== null) target.children[1].classList.remove("hidden"); - } + } while (target !== null && target.tagName !== 'A'); + if (target !== null) target.children[1].classList.remove('hidden'); + }; /** * Hides the tooltip of the hovered element. @@ -198,9 +198,9 @@ export class DisplayMagic { let target = event.target as HTMLElement; do { target = target.parentElement as HTMLElement; - } while (target !== null && target.tagName !== "A") - if (target !== null) target.children[1].classList.add("hidden"); - } + } while (target !== null && target.tagName !== 'A'); + if (target !== null) target.children[1].classList.add('hidden'); + }; /** * Renders the component. @@ -216,23 +216,23 @@ export class DisplayMagic { // Use the Async Clipboard API when available. navigator.clipboard.writeText(value).then(() => { // Show a success message for 1.5 seconds to the user - let el = event.target as HTMLButtonElement - el.innerText = "✓ Copied!" - el.classList.remove("hover:bg-blue-200") - el.classList.remove("bg-white") - el.classList.add("bg-green-200") + let el = event.target as HTMLButtonElement; + el.innerText = '✓ Copied!'; + el.classList.remove('hover:bg-blue-200'); + el.classList.remove('bg-white'); + el.classList.add('bg-green-200'); setTimeout(() => { - el.innerText = "Copy" - el.classList.remove("bg-green-200") - el.classList.add("hover:bg-blue-200") - el.classList.add("bg-white") - }, 1500) - }) + el.innerText = 'Copy'; + el.classList.remove('bg-green-200'); + el.classList.add('hover:bg-blue-200'); + el.classList.add('bg-white'); + }, 1500); + }); } else { // ...Otherwise, use document.execCommand() fallback. const textArea = document.createElement('textarea'); textArea.value = value; - textArea.style.opacity = "0"; + textArea.style.opacity = '0'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); @@ -240,17 +240,17 @@ export class DisplayMagic { const success = document.execCommand('copy'); console.log(`Deprecated Text copy was ${success ? 'successful' : 'unsuccessful'}.`); // Show a success message for 1.5 seconds to the user - let el = event.target as HTMLButtonElement - el.innerText = "✓ Copied!" - el.classList.remove("hover:bg-blue-200") - el.classList.remove("bg-white") - el.classList.add("bg-green-200") + let el = event.target as HTMLButtonElement; + el.innerText = '✓ Copied!'; + el.classList.remove('hover:bg-blue-200'); + el.classList.remove('bg-white'); + el.classList.add('bg-green-200'); setTimeout(() => { - el.innerText = "Copy" - el.classList.remove("bg-green-200") - el.classList.add("hover:bg-blue-200") - el.classList.add("bg-white") - }, 1500) + el.innerText = 'Copy'; + el.classList.remove('bg-green-200'); + el.classList.add('hover:bg-blue-200'); + el.classList.add('bg-white'); + }, 1500); } catch (err) { console.error(err.name, err.message); } @@ -259,36 +259,36 @@ export class DisplayMagic { } return ( - + { // Check if there are any items or actions to show this.items.length === 0 && this.actions.length === 0 - ? this.identifierObject !== undefined && this.displayStatus === "loaded" + ? this.identifierObject !== undefined && this.displayStatus === 'loaded' // If loaded but no items available render the preview of the identifier object defined in the specific implementation of GenericIdentifierType ? this.identifierObject.renderPreview() - : - - - + : + + + Loading... {this.value} :
- - - + class='overflow-y-hidden font-bold font-mono cursor-pointer list-none bg-white overflow-x-hidden space-x-3 inline-flex flex-nowrap flex-shrink-0 items-center'> + + + - { + { // Render the preview of the identifier object defined in the specific implementation of GenericIdentifierType this.identifierObject.renderPreview() } @@ -297,11 +297,11 @@ export class DisplayMagic { // When this component is on the top level, show the copy button in the summary, in all the other cases show it in the table (implemented farther down) this.currentLevelOfSubcomponents === 0 ? - : "" + : '' } { @@ -309,16 +309,16 @@ export class DisplayMagic { this.items.length > 0 ?
- - - - - + class='divide-y text-sm leading-6 bg-gray-100 m-1 p-0.5 max-h-72 overflow-y-scroll border rounded'> +
KeyValue
+ + + + + class='bg-grey-100 flex flex-col items-center justify-between overflow-y-scroll w-full max-h-64 rounded-b'> { this.items.filter((_, index) => { // Filter out items that are not on the current page @@ -326,40 +326,40 @@ export class DisplayMagic { }).map((value) => { // Render a row for every item return ( - - - - ) + ); }) }
KeyValue
- + +
+ class='cursor-pointer align-top justify-between flex-nowrap'> + target={'_blank'} rel={'noopener noreferrer'} + class={'mr-2 text-blue-400 justify-start float-left'}> {value.keyTitle} - - - - - + + + + +
- 		- + + { // Load a foldable subcomponent if subcomponents are enabled (show subComponents) and the current level of subcomponents is not the total level of subcomponents. If the subcomponent is on the bottom level of the hierarchy render just a preview. If the value should not be resolved (isFoldable), just render the value as text. this.loadSubcomponents && this.showSubcomponents && !value.doNOTFold && !value.defaultToText @@ -369,7 +369,7 @@ export class DisplayMagic { currentLevelOfSubcomponents={this.currentLevelOfSubcomponents + 1} amountOfItems={this.amountOfItems} showSubcomponents={true} - settings={this.settings}/> + settings={this.settings} /> : this.showSubcomponents && this.currentLevelOfSubcomponents === this.levelOfSubcomponents && !value.doNOTFold && !value.defaultToText ? + settings={this.settings} /> : value.value }
+ class='flex items-center justify-between border-t border-gray-200 bg-white px-1 py-1 sm:px-1 max-h-12'>
- : "" + : '' } {this.identifierObject.renderBody()} { this.actions.length > 0 - ? + ? { this.actions.map((action) => { - let style = "p-1 font-semibold text-sm rounded border "; + let style = 'p-1 font-semibold text-sm rounded border '; switch (action.style) { - case "primary": - style += "bg-blue-500 text-white"; + case 'primary': + style += 'bg-blue-500 text-white'; break; - case "secondary": - style += "bg-slate-200 text-blue-500"; + case 'secondary': + style += 'bg-slate-200 text-blue-500'; break; - case "danger": - style += "bg-red-500 text-white"; + case 'danger': + style += 'bg-red-500 text-white'; break; } return ( + class={style} rel={'noopener noreferrer'} + target={'_blank'}> {action.title} - ) + ); }) } - : "" + : '' }
} - ) + ); } } diff --git a/src/components/foldable-component/foldable-component.tsx b/src/components/foldable-component/foldable-component.tsx index 6451637..3cae4c8 100644 --- a/src/components/foldable-component/foldable-component.tsx +++ b/src/components/foldable-component/foldable-component.tsx @@ -1,5 +1,5 @@ -import {Component, Host, h, State, Prop} from '@stencil/core'; -import {PID} from "../../utils/PID"; +import { Component, Host, h, State, Prop } from '@stencil/core'; +import { PID } from '../../utils/PID'; export type FoldableItem = { keyTitle: string, @@ -13,7 +13,7 @@ export type FoldableItem = { export type FoldableAction = { title: string, link: string, - style: "primary" | "secondary" | "danger" + style: 'primary' | 'secondary' | 'danger' } @Component({ @@ -23,9 +23,9 @@ export type FoldableAction = { }) export class FoldableComponent { - @Prop() items: FoldableItem[] = [] + @Prop() items: FoldableItem[] = []; - @Prop() actions: FoldableAction[] = [] + @Prop() actions: FoldableAction[] = []; /** * The private state of whether the subcomponents in the table should be loaded. @@ -61,95 +61,87 @@ export class FoldableComponent { private toggleSubcomponents = () => { // console.log(`currentLevelOfSubcomponents: ${this.currentLevelOfSubcomponents}, levelOfSubcomponents: ${this.levelOfSubcomponents}, showSubcomponents: ${this.showSubcomponents}`); if (this.showSubcomponents && this.levelOfSubcomponents - this.currentLevelOfSubcomponents > 0) this.loadSubcomponents = !this.loadSubcomponents; - } + }; private showTooltip = (event: Event) => { let target = event.target as HTMLElement; do { target = target.parentElement as HTMLElement; - } while (target !== null && target.tagName !== "A") - if (target !== null) target.children[1].classList.remove("hidden"); - } + } while (target !== null && target.tagName !== 'A'); + if (target !== null) target.children[1].classList.remove('hidden'); + }; private hideTooltip = (event: Event) => { let target = event.target as HTMLElement; do { target = target.parentElement as HTMLElement; - } while (target !== null && target.tagName !== "A") - if (target !== null) target.children[1].classList.add("hidden"); - } + } while (target !== null && target.tagName !== 'A'); + if (target !== null) target.children[1].classList.add('hidden'); + }; render() { return ( - + { this.items.length === 0 && this.actions.length === 0 ?
- + class='rounded-md shadow-md border inline-flex flex-grow max-w-screen-lg font-sans p-0.5 mx-2 select-none list-inside bg-white text-clip overflow-x-clip'> +
:
- - + + {/**/} { this.items.length > 0 ?
- - - - - + class='divide-y text-sm leading-6 bg-gray-100 m-1 p-0.5 max-h-72 overflow-y-scroll border rounded'> +
KeyValue
+ + + + + class='bg-grey-100 flex flex-col items-center justify-between overflow-y-scroll w-full max-h-64 rounded-b'> { this.items.map((value) => { return ( - - - - ) + ); }) }
KeyValue
- + + -
+
{value.keyTitle} - - - - - + target={'_blank'} rel={'noopener noreferrer'} + class={'mr-2 text-blue-400 justify-start'}>{value.keyTitle} + + + + +
-
- {/*{*/} - {/* this.loadSubcomponents && !value.valueIsFoldable ?*/} - {/* */} - {/* : value.value*/} - {/*}*/} - + { PID.isPID(value.value) ? (this.loadSubcomponents ? @@ -163,31 +155,31 @@ export class FoldableComponent { }
- : "" + : '' } {/**/} { this.actions.length > 0 ? - + { this.actions.map((action) => { - let style = "p-1 font-semibold text-sm rounded border "; + let style = 'p-1 font-semibold text-sm rounded border '; switch (action.style) { - case "primary": - style += "bg-blue-500 text-white"; + case 'primary': + style += 'bg-blue-500 text-white'; break; - case "secondary": - style += "bg-slate-200 text-blue-500"; + case 'secondary': + style += 'bg-slate-200 text-blue-500'; break; - case "danger": - style += "bg-red-500 text-white"; + case 'danger': + style += 'bg-red-500 text-white'; break; } @@ -195,13 +187,14 @@ export class FoldableComponent { + target={'_blank'}> + rel={'noopener noreferrer'} {action.title} - ) + ); }) } - : "" + : '' }
} diff --git a/src/components/handle-highlight/handle-highlight.tsx b/src/components/handle-highlight/handle-highlight.tsx index a387a18..6a7befb 100644 --- a/src/components/handle-highlight/handle-highlight.tsx +++ b/src/components/handle-highlight/handle-highlight.tsx @@ -1,7 +1,6 @@ -import {Component, Host, h, Prop, State} from '@stencil/core'; -// import {HSLColor, generateColor} from '../../utils/utils'; -import {PID} from "../../utils/PID"; -import {HSLColor} from "../../utils/HSLColor"; +import { Component, Host, h, Prop, State } from '@stencil/core'; +import { PID } from '../../utils/PID'; +import { HSLColor } from '../../utils/HSLColor'; /** * This component highlights a handle and links to the FAIR DO Scope. @@ -22,7 +21,7 @@ export class HandleHighlight { /** * The private state where this component should link to. */ - @State() link: string = ""; + @State() link: string = ''; /** * The Handle to highlight and link in this component. @@ -32,7 +31,7 @@ export class HandleHighlight { /** * An optional custom link to use instead of the default one which links to the FAIR DO Scope. */ - @Prop() linkTo: "disable" | "fairdoscope" | "resolveRef" = "fairdoscope"; + @Prop() linkTo: 'disable' | 'fairdoscope' | 'resolveRef' = 'fairdoscope'; /** * Whether the component should use the filled or the outlined design. @@ -52,63 +51,63 @@ export class HandleHighlight { this.parts = [{ text: pid.prefix, color: await HSLColor.generateColor(pid.prefix), - nextExists: true + nextExists: true, }, { text: pid.suffix, color: await HSLColor.generateColor(pid.suffix), - nextExists: false - }] + nextExists: false, + }]; - if (this.linkTo === "fairdoscope") this.link = `https://kit-data-manager.github.io/fairdoscope/?pid=${this.handle}`; - else if (this.linkTo === "resolveRef") this.link = `https://hdl.handle.net/${this.handle}#resolve`; - else if (this.linkTo === "disable") this.link = ""; + if (this.linkTo === 'fairdoscope') this.link = `https://kit-data-manager.github.io/fairdoscope/?pid=${this.handle}`; + else if (this.linkTo === 'resolveRef') this.link = `https://hdl.handle.net/${this.handle}#resolve`; + else if (this.linkTo === 'disable') this.link = ''; - console.log(this.link) - console.log(this.linkTo) + console.log(this.link); + console.log(this.linkTo); } render() { return ( { - if (this.link === "" || this.linkTo === "disable") el.preventDefault() - }} target={"_blank"}> + if (this.link === '' || this.linkTo === 'disable') el.preventDefault(); + }} target={'_blank'} rel={'noopener noreferrer'}> {this.filled ? - + { this.parts.map((element) => { return ( 50 ? "text-gray-800" : "text-gray-200"}`}> + class={`font-mono p-0.5 rounded-md ${element.color.lum > 50 ? 'text-gray-800' : 'text-gray-200'}`}> {element.text} - {element.nextExists ? "/" : ""} + {element.nextExists ? '/' : ''} - ) + ); }) } : + class={'border bg-gray-100 rounded-md shadow-sm inline p-0.5 text-clip align-baseline leading-relaxed'}> { this.parts.map((element) => { return ( {element.text} - {element.nextExists ? "/" : ""} + {element.nextExists ? '/' : ''} - ) + ); }) } diff --git a/src/utils/URLType.tsx b/src/utils/URLType.tsx index 8989f45..640119a 100644 --- a/src/utils/URLType.tsx +++ b/src/utils/URLType.tsx @@ -1,29 +1,30 @@ -import {GenericIdentifierType} from "./GenericIdentifierType"; -import {FunctionalComponent, h} from "@stencil/core"; +import { GenericIdentifierType } from './GenericIdentifierType'; +import { FunctionalComponent, h } from '@stencil/core'; export class URLType extends GenericIdentifierType { - getSettingsKey(): string { - return "DateType"; - } + getSettingsKey(): string { + return 'DateType'; + } - hasCorrectFormat(): boolean { - const regex = new RegExp('^http(s)?:(\/\/([^/?#]*))?([^?#]*)(\\?([^#]*))?(#(.*))?$') - return regex.test(this.value) - } + hasCorrectFormat(): boolean { + const regex = new RegExp('^http(s)?:(\/\/([^/?#]*))?([^?#]*)(\\?([^#]*))?(#(.*))?$'); + return regex.test(this.value); + } - init(): Promise { - return - } + init(): Promise { + return; + } - isResolvable(): boolean { - return false; - } + isResolvable(): boolean { + return false; + } - renderPreview(): FunctionalComponent { - return ( - {this.value} - ) - } + renderPreview(): FunctionalComponent { + return ( + {this.value} + ); + } } From 48eccb953814c5f3bc1207aa7d4643232ca424f3 Mon Sep 17 00:00:00 2001 From: Maximilian Inckmann - KIT Date: Fri, 18 Aug 2023 18:50:41 +0200 Subject: [PATCH 2/2] reformatting --- src/components.d.ts | 4 ++-- src/components/handle-highlight/readme.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index f19a0fe..8ce529a 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -116,7 +116,7 @@ export namespace Components { /** * An optional custom link to use instead of the default one which links to the FAIR DO Scope. */ - "linkTo": "disable" | "fairdoscope" | "resolveRef"; + "linkTo": 'disable' | 'fairdoscope' | 'resolveRef'; } interface IntelligentHandle { /** @@ -339,7 +339,7 @@ declare namespace LocalJSX { /** * An optional custom link to use instead of the default one which links to the FAIR DO Scope. */ - "linkTo"?: "disable" | "fairdoscope" | "resolveRef"; + "linkTo"?: 'disable' | 'fairdoscope' | 'resolveRef'; } interface IntelligentHandle { /** diff --git a/src/components/handle-highlight/readme.md b/src/components/handle-highlight/readme.md index 3a949c3..dfa7d4e 100644 --- a/src/components/handle-highlight/readme.md +++ b/src/components/handle-highlight/readme.md @@ -16,7 +16,7 @@ It automatically generates colors for the parts of the handle (prefix and suffix | --------------------- | --------- | ------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------- | | `filled` | `filled` | Whether the component should use the filled or the outlined design. | `boolean` | `false` | | `handle` _(required)_ | `handle` | The Handle to highlight and link in this component. | `string` | `undefined` | -| `linkTo` | `link-to` | An optional custom link to use instead of the default one which links to the FAIR DO Scope. | `"disable" \| "fairdoscope" \| "resolveRef"` | `"fairdoscope"` | +| `linkTo` | `link-to` | An optional custom link to use instead of the default one which links to the FAIR DO Scope. | `"disable" \| "fairdoscope" \| "resolveRef"` | `'fairdoscope'` | ## Dependencies