diff --git a/frontend/src/components/desc-list.ts b/frontend/src/components/desc-list.ts index 9775099f..3af37ff6 100644 --- a/frontend/src/components/desc-list.ts +++ b/frontend/src/components/desc-list.ts @@ -51,7 +51,7 @@ export class DescList extends LitElement { static styles = css` dl { display: grid; - grid-template-columns: auto; + grid-template-columns: 100%; grid-gap: 1rem; margin: 0; } diff --git a/frontend/src/components/tag.ts b/frontend/src/components/tag.ts index d272b87f..6e175848 100644 --- a/frontend/src/components/tag.ts +++ b/frontend/src/components/tag.ts @@ -14,6 +14,10 @@ export class Tag extends SLTag { static styles = css` ${tagStyles} + :host { + max-width: 100%; + } + .tag { height: var(--tag-height, 1.5rem); background-color: var(--sl-color-blue-100); diff --git a/frontend/src/pages/org/crawl-detail.ts b/frontend/src/pages/org/crawl-detail.ts index 8d26086b..0755f65d 100644 --- a/frontend/src/pages/org/crawl-detail.ts +++ b/frontend/src/pages/org/crawl-detail.ts @@ -4,6 +4,7 @@ import { when } from "lit/directives/when.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { msg, localized, str } from "@lit/localize"; import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js"; +import type { SlTextarea } from "@shoelace-style/shoelace"; import Fuse from "fuse.js"; import type { @@ -29,6 +30,7 @@ const SECTIONS = [ type SectionName = typeof SECTIONS[number]; const POLL_INTERVAL_SECONDS = 10; +const CRAWL_NOTES_MAXLENGTH = 500; /** * Usage: @@ -209,15 +211,16 @@ export class CrawlDetail extends LiteElement { ${this.renderPanel( html`
- ${msg("Tags")} + ${msg("Metadata")}
`, - this.renderDetails() + this.renderMetadata() )} @@ -266,13 +269,13 @@ export class CrawlDetail extends LiteElement { (this.openDialogName = undefined)} @sl-show=${() => (this.isDialogVisible = true)} @sl-after-hide=${() => (this.isDialogVisible = false)} > - ${this.isDialogVisible ? this.renderEditDetails() : ""} + ${this.isDialogVisible ? this.renderEditMetadata() : ""} `; } @@ -432,7 +435,7 @@ export class CrawlDetail extends LiteElement { class="p-2 hover:bg-zinc-100 cursor-pointer" role="menuitem" @click=${(e: any) => { - this.openDetailEditor(); + this.openMetadataEditor(); e.target.closest("sl-dropdown").hide(); }} > @@ -441,7 +444,7 @@ export class CrawlDetail extends LiteElement { name="pencil" > - ${msg("Edit Tags")} + ${msg("Edit Metadata")}
@@ -774,21 +777,37 @@ export class CrawlDetail extends LiteElement { `; } - private renderDetails() { + private renderMetadata() { + const noneText = html`${msg("None")}`; return html` + + ${when( + this.crawl, + () => + when( + this.crawl!.notes?.length, + () => html`
+${this.crawl?.notes}
+                
`, + () => noneText + ), + () => html`` + )} +
${when( this.crawl, () => when( - this.crawl?.tags?.length, + this.crawl!.tags.length, () => - this.crawl!.tags!.map( + this.crawl!.tags.map( (tag) => html`${tag}` ), - () => html`${msg("None")}` + () => noneText ), () => html`` )} @@ -898,15 +917,47 @@ export class CrawlDetail extends LiteElement { `; } - private renderEditDetails() { + private renderEditMetadata() { if (!this.crawl) return; + const crawlNotesHelpText = msg( + str`Maximum ${CRAWL_NOTES_MAXLENGTH} characters` + ); return html`
(this.openDialogName = undefined)} > + { + const textarea = e.target as SlTextarea; + if (textarea.value.length > CRAWL_NOTES_MAXLENGTH) { + const overMax = textarea.value.length - CRAWL_NOTES_MAXLENGTH; + textarea.setCustomValidity( + msg( + str`Please shorten this text to ${CRAWL_NOTES_MAXLENGTH} or less characters.` + ) + ); + textarea.helpText = + overMax === 1 + ? msg(str`${overMax} character over limit`) + : msg(str`${overMax} characters over limit`); + } else { + textarea.setCustomValidity(""); + textarea.helpText = crawlNotesHelpText; + } + }} + >