83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import { localized, msg } from "@lit/localize";
|
|
import type { SlSelectEvent } from "@shoelace-style/shoelace";
|
|
import { html } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
|
|
import { TailwindElement } from "@/classes/TailwindElement";
|
|
import { type QARun } from "@/types/qa";
|
|
import { formatDate } from "@/utils/localization";
|
|
|
|
export type SelectDetail = { item: { id: string } };
|
|
|
|
/**
|
|
* @fires btrix-select
|
|
*/
|
|
@localized()
|
|
@customElement("btrix-qa-run-dropdown")
|
|
export class QaRunDropdown extends TailwindElement {
|
|
@property({ type: Array })
|
|
items: QARun[] = [];
|
|
|
|
@property({ type: String })
|
|
selectedId?: string;
|
|
|
|
render() {
|
|
if (!this.items.length) return;
|
|
|
|
const selectedRun = this.selectedId
|
|
? this.items.find(({ id }) => id === this.selectedId)
|
|
: null;
|
|
|
|
return html`
|
|
<sl-dropdown @sl-select=${this.onSelect} distance="-2">
|
|
<sl-button slot="trigger" variant="text" size="small" caret>
|
|
${selectedRun
|
|
? html`<btrix-crawl-status
|
|
type="qa"
|
|
hideLabel
|
|
state=${selectedRun.state}
|
|
slot="prefix"
|
|
hoist
|
|
></btrix-crawl-status>
|
|
${formatDate(selectedRun.finished)} `
|
|
: msg("Select a QA run")}
|
|
</sl-button>
|
|
<sl-menu>
|
|
${this.items.map((run) => {
|
|
const isSelected = selectedRun && run.id === selectedRun.id;
|
|
return html`
|
|
<sl-menu-item
|
|
value=${run.id}
|
|
type="checkbox"
|
|
?disabled=${isSelected}
|
|
?checked=${isSelected}
|
|
>
|
|
${formatDate(run.finished)}
|
|
<btrix-crawl-status
|
|
type="qa"
|
|
hideLabel
|
|
state=${run.state}
|
|
slot="prefix"
|
|
hoist
|
|
></btrix-crawl-status>
|
|
</sl-menu-item>
|
|
`;
|
|
})}
|
|
</sl-menu>
|
|
</sl-dropdown>
|
|
`;
|
|
}
|
|
|
|
private onSelect(e: SlSelectEvent) {
|
|
e.stopPropagation();
|
|
|
|
const id = e.detail.item.value;
|
|
|
|
this.dispatchEvent(
|
|
new CustomEvent<SelectDetail>("btrix-select", {
|
|
detail: { item: { id } },
|
|
}),
|
|
);
|
|
}
|
|
}
|