From 02a665ed310646033034dba62d6668a64b94f4f5 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Mon, 3 Nov 2025 09:25:47 -0800 Subject: [PATCH 1/2] refactor component --- .../archived-item-list-item.ts} | 156 +----------------- .../archived-item-list/archived-item-list.ts | 151 +++++++++++++++++ .../archived-item-list/index.ts | 2 + .../archived-item-list/types.ts | 3 + 4 files changed, 160 insertions(+), 152 deletions(-) rename frontend/src/features/archived-items/{archived-item-list.ts => archived-item-list/archived-item-list-item.ts} (72%) create mode 100644 frontend/src/features/archived-items/archived-item-list/archived-item-list.ts create mode 100644 frontend/src/features/archived-items/archived-item-list/index.ts create mode 100644 frontend/src/features/archived-items/archived-item-list/types.ts diff --git a/frontend/src/features/archived-items/archived-item-list.ts b/frontend/src/features/archived-items/archived-item-list/archived-item-list-item.ts similarity index 72% rename from frontend/src/features/archived-items/archived-item-list.ts rename to frontend/src/features/archived-items/archived-item-list/archived-item-list-item.ts index 580f2b2012..0d78194260 100644 --- a/frontend/src/features/archived-items/archived-item-list.ts +++ b/frontend/src/features/archived-items/archived-item-list/archived-item-list-item.ts @@ -1,27 +1,17 @@ import { localized, msg, str } from "@lit/localize"; import type { SlCheckbox, SlHideEvent } from "@shoelace-style/shoelace"; -import { css, html, nothing, type TemplateResult } from "lit"; -import { - customElement, - property, - query, - queryAssignedElements, - state, -} from "lit/decorators.js"; +import { css, html, nothing } from "lit"; +import { customElement, property, query } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import { CrawlStatus } from "./crawl-status"; +import type { CheckboxChangeEventDetail } from "./types"; import { BtrixElement } from "@/classes/BtrixElement"; -import { TailwindElement } from "@/classes/TailwindElement"; +import { CrawlStatus } from "@/features/archived-items/crawl-status"; import { ReviewStatus, type ArchivedItem } from "@/types/crawler"; import { renderName } from "@/utils/crawler"; import localize from "@/utils/localize"; -export type CheckboxChangeEventDetail = { - checked: boolean; -}; - /** * @slot actionCell - Action cell * @fires btrix-checkbox-change @@ -340,141 +330,3 @@ export class ArchivedItemListItem extends BtrixElement { this.rowLink?.click(); } } - -/** - * @example Usage: - * ```ts - * - * - * - * ``` - * - * @slot checkboxCell - * @slot actionCell - */ -@customElement("btrix-archived-item-list") -@localized() -export class ArchivedItemList extends TailwindElement { - static styles = css` - btrix-table { - --btrix-table-cell-gap: var(--sl-spacing-x-small); - --btrix-table-cell-padding-x: var(--sl-spacing-small); - } - - btrix-table-body ::slotted(*:nth-of-type(n + 2)) { - --btrix-border-top: 1px solid var(--sl-panel-border-color); - } - - btrix-table-body ::slotted(*:first-of-type) { - --btrix-border-radius-top: var(--sl-border-radius-medium); - } - - btrix-table-body ::slotted(*:last-of-type) { - --btrix-border-radius-bottom: var(--sl-border-radius-medium); - } - `; - - @property({ type: String }) - listType: ArchivedItem["type"] | null = null; - - @queryAssignedElements({ selector: "btrix-archived-item-list-item" }) - public items!: ArchivedItemListItem[]; - - @state() - private hasCheckboxCell = false; - - @state() - private hasActionCell = false; - - render() { - const headerCols: { cssCol: string; cell: TemplateResult<1> | symbol }[] = [ - { - cssCol: "min-content", - cell: html` - ${msg("Status")} - `, - }, - { - cssCol: "[clickable-start] 50ch", - cell: html` - ${msg("Name")} - `, - }, - { - cssCol: "1fr", - cell: html` - ${msg("Date Created")} - `, - }, - { - cssCol: "1fr", - cell: html` - ${msg("Size")} - `, - }, - { - cssCol: "1fr", - cell: html` - ${msg("Pages")} - `, - }, - { - cssCol: "1fr", - cell: html` - ${msg("QA Analysis Runs")} - `, - }, - { - cssCol: "1fr", - cell: html` - ${msg("QA Rating")} - `, - }, - ]; - if (this.hasCheckboxCell) { - headerCols.unshift({ - cssCol: "min-content", - cell: nothing, // renders into slot - }); - } - if (this.hasActionCell) { - headerCols.push({ - cssCol: "[clickable-end] min-content", - cell: nothing, // renders into slot - }); - } - - return html` - - - - - - (this.hasCheckboxCell = - (e.target as HTMLSlotElement).assignedElements().length > 0)} - > - ${headerCols.map(({ cell }) => cell)} - - (this.hasActionCell = - (e.target as HTMLSlotElement).assignedElements().length > 0)} - > - - - - - - - `; - } -} diff --git a/frontend/src/features/archived-items/archived-item-list/archived-item-list.ts b/frontend/src/features/archived-items/archived-item-list/archived-item-list.ts new file mode 100644 index 0000000000..d273a03739 --- /dev/null +++ b/frontend/src/features/archived-items/archived-item-list/archived-item-list.ts @@ -0,0 +1,151 @@ +import { localized, msg } from "@lit/localize"; +import { css, html, nothing, type TemplateResult } from "lit"; +import { + customElement, + property, + queryAssignedElements, + state, +} from "lit/decorators.js"; + +import type { ArchivedItemListItem } from "./archived-item-list-item"; + +import { TailwindElement } from "@/classes/TailwindElement"; +import { type ArchivedItem } from "@/types/crawler"; + +/** + * @example Usage: + * ```ts + * + * + * + * ``` + * + * @slot checkboxCell + * @slot actionCell + */ +@customElement("btrix-archived-item-list") +@localized() +export class ArchivedItemList extends TailwindElement { + static styles = css` + btrix-table { + --btrix-table-cell-gap: var(--sl-spacing-x-small); + --btrix-table-cell-padding-x: var(--sl-spacing-small); + } + + btrix-table-body ::slotted(*:nth-of-type(n + 2)) { + --btrix-border-top: 1px solid var(--sl-panel-border-color); + } + + btrix-table-body ::slotted(*:first-of-type) { + --btrix-border-radius-top: var(--sl-border-radius-medium); + } + + btrix-table-body ::slotted(*:last-of-type) { + --btrix-border-radius-bottom: var(--sl-border-radius-medium); + } + `; + + @property({ type: String }) + listType: ArchivedItem["type"] | null = null; + + @queryAssignedElements({ selector: "btrix-archived-item-list-item" }) + public items!: ArchivedItemListItem[]; + + @state() + private hasCheckboxCell = false; + + @state() + private hasActionCell = false; + + render() { + const headerCols: { cssCol: string; cell: TemplateResult<1> | symbol }[] = [ + { + cssCol: "min-content", + cell: html` + ${msg("Status")} + `, + }, + { + cssCol: "[clickable-start] 50ch", + cell: html` + ${msg("Name")} + `, + }, + { + cssCol: "1fr", + cell: html` + ${msg("Date Created")} + `, + }, + { + cssCol: "1fr", + cell: html` + ${msg("Size")} + `, + }, + { + cssCol: "1fr", + cell: html` + ${msg("Pages")} + `, + }, + { + cssCol: "1fr", + cell: html` + ${msg("QA Analysis Runs")} + `, + }, + { + cssCol: "1fr", + cell: html` + ${msg("QA Rating")} + `, + }, + ]; + if (this.hasCheckboxCell) { + headerCols.unshift({ + cssCol: "min-content", + cell: nothing, // renders into slot + }); + } + if (this.hasActionCell) { + headerCols.push({ + cssCol: "[clickable-end] min-content", + cell: nothing, // renders into slot + }); + } + + return html` + + + + + + (this.hasCheckboxCell = + (e.target as HTMLSlotElement).assignedElements().length > 0)} + > + ${headerCols.map(({ cell }) => cell)} + + (this.hasActionCell = + (e.target as HTMLSlotElement).assignedElements().length > 0)} + > + + + + + + + `; + } +} diff --git a/frontend/src/features/archived-items/archived-item-list/index.ts b/frontend/src/features/archived-items/archived-item-list/index.ts new file mode 100644 index 0000000000..a6018b038a --- /dev/null +++ b/frontend/src/features/archived-items/archived-item-list/index.ts @@ -0,0 +1,2 @@ +import "./archived-item-list"; +import "./archived-item-list-item"; diff --git a/frontend/src/features/archived-items/archived-item-list/types.ts b/frontend/src/features/archived-items/archived-item-list/types.ts new file mode 100644 index 0000000000..355b8d9410 --- /dev/null +++ b/frontend/src/features/archived-items/archived-item-list/types.ts @@ -0,0 +1,3 @@ +export type CheckboxChangeEventDetail = { + checked: boolean; +}; From 59524889eb24e8e9746aa13c34b1883e4879a234 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Mon, 3 Nov 2025 15:49:52 -0800 Subject: [PATCH 2/2] add state --- frontend/src/types/crawlState.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/types/crawlState.ts b/frontend/src/types/crawlState.ts index 6abc45b67b..1094346a7c 100644 --- a/frontend/src/types/crawlState.ts +++ b/frontend/src/types/crawlState.ts @@ -11,6 +11,7 @@ export const WAITING_STATES = [ "starting", "waiting_capacity", "waiting_org_limit", + "waiting_dedupe_index", "paused", ] as const;