enable opening crawl in new tab
This commit is contained in:
sua yoo
parent
29b586b03f
commit
f90ef071de
@ -248,215 +248,207 @@ export class CrawlsList extends LiteElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private renderCrawlItem = ({ item: crawl }: CrawlSearchResult) => {
|
private renderCrawlItem = ({ item: crawl }: CrawlSearchResult) => {
|
||||||
return html`<li
|
return html`<li class="border-t first:border-t-0">
|
||||||
class="grid grid-cols-12 gap-4 p-4 leading-none hover:bg-zinc-50 hover:text-primary border-t first:border-t-0 transition-colors"
|
<a
|
||||||
role="button"
|
href=${`${this.crawlsBaseUrl}/crawl/${crawl.id}`}
|
||||||
@click=${() => this.navTo(`${this.crawlsBaseUrl}/crawl/${crawl.id}`)}
|
class="grid grid-cols-12 gap-4 p-4 leading-none hover:bg-zinc-50 hover:text-primary transition-colors"
|
||||||
title=${crawl.configName || crawl.cid}
|
title=${crawl.configName}
|
||||||
>
|
@click=${this.navLink}
|
||||||
<div class="col-span-11 md:col-span-5">
|
>
|
||||||
<div class="font-medium mb-1">
|
<div class="col-span-11 md:col-span-5">
|
||||||
<a
|
<div class="font-medium mb-1">${crawl.configName || crawl.cid}</div>
|
||||||
href=${`${this.crawlsBaseUrl}/crawl/${crawl.id}`}
|
<div class="text-0-700 text-sm whitespace-nowrap truncate">
|
||||||
@click=${(e: any) => {
|
<sl-format-date
|
||||||
e.stopPropagation();
|
date=${`${crawl.started}Z` /** Z for UTC */}
|
||||||
this.navLink(e);
|
month="2-digit"
|
||||||
}}
|
day="2-digit"
|
||||||
>
|
year="2-digit"
|
||||||
${crawl.configName || crawl.cid}
|
hour="numeric"
|
||||||
</a>
|
minute="numeric"
|
||||||
|
></sl-format-date>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-0-700 text-sm whitespace-nowrap truncate">
|
<div class="md:order-last col-span-1 flex justify-end">
|
||||||
<sl-format-date
|
<sl-dropdown @click=${(e: Event) => e.preventDefault()}>
|
||||||
date=${`${crawl.started}Z` /** Z for UTC */}
|
<sl-icon-button
|
||||||
month="2-digit"
|
slot="trigger"
|
||||||
day="2-digit"
|
name="three-dots"
|
||||||
year="2-digit"
|
label=${msg("More")}
|
||||||
hour="numeric"
|
style="font-size: 1rem"
|
||||||
minute="numeric"
|
></sl-icon-button>
|
||||||
></sl-format-date>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="md:order-last col-span-1 flex justify-end">
|
|
||||||
<sl-dropdown @click=${(e: any) => e.stopPropagation()}>
|
|
||||||
<sl-icon-button
|
|
||||||
slot="trigger"
|
|
||||||
name="three-dots"
|
|
||||||
label=${msg("More")}
|
|
||||||
style="font-size: 1rem"
|
|
||||||
></sl-icon-button>
|
|
||||||
|
|
||||||
<ul class="text-sm text-0-800 whitespace-nowrap" role="menu">
|
<ul class="text-sm text-0-800 whitespace-nowrap" role="menu">
|
||||||
${isRunning(crawl)
|
${isRunning(crawl)
|
||||||
? html`
|
? html`
|
||||||
<li
|
<li
|
||||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click=${(e: any) => {
|
@click=${(e: any) => {
|
||||||
this.stop(crawl);
|
this.stop(crawl);
|
||||||
e.target.closest("sl-dropdown").hide();
|
e.target.closest("sl-dropdown").hide();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<sl-icon
|
<sl-icon
|
||||||
class="inline-block align-middle"
|
class="inline-block align-middle"
|
||||||
name="slash-circle"
|
name="slash-circle"
|
||||||
></sl-icon>
|
></sl-icon>
|
||||||
<span class="inline-block align-middle">
|
<span class="inline-block align-middle">
|
||||||
${msg("Stop gracefully")}
|
${msg("Stop gracefully")}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li
|
||||||
class="p-2 text-danger hover:bg-danger hover:text-white cursor-pointer"
|
class="p-2 text-danger hover:bg-danger hover:text-white cursor-pointer"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click=${(e: any) => {
|
@click=${(e: any) => {
|
||||||
this.cancel(crawl);
|
this.cancel(crawl);
|
||||||
e.target.closest("sl-dropdown").hide();
|
e.target.closest("sl-dropdown").hide();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<sl-icon
|
<sl-icon
|
||||||
class="inline-block align-middle"
|
class="inline-block align-middle"
|
||||||
name="trash"
|
name="trash"
|
||||||
></sl-icon>
|
></sl-icon>
|
||||||
<span class="inline-block align-middle">
|
<span class="inline-block align-middle">
|
||||||
${msg("Cancel immediately")}
|
${msg("Cancel immediately")}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<hr />
|
<hr />
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
<li
|
<li
|
||||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click=${(e: any) => {
|
@click=${(e: any) => {
|
||||||
CopyButton.copyToClipboard(crawl.id);
|
CopyButton.copyToClipboard(crawl.id);
|
||||||
e.target.closest("sl-dropdown").hide();
|
e.target.closest("sl-dropdown").hide();
|
||||||
}}
|
}}
|
||||||
>
|
|
||||||
${msg("Copy Crawl ID")}
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
|
||||||
role="menuitem"
|
|
||||||
@click=${(e: any) => {
|
|
||||||
CopyButton.copyToClipboard(crawl.cid);
|
|
||||||
e.target.closest("sl-dropdown").hide();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
${msg("Copy Crawl Template ID")}
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
|
||||||
role="menuitem"
|
|
||||||
@click=${(e: any) => {
|
|
||||||
this.navTo(
|
|
||||||
`/archives/${crawl.aid}/crawl-templates/config/${crawl.cid}`
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
${msg("View Crawl Template")}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</sl-dropdown>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-12 md:col-span-2 flex items-start">
|
|
||||||
<div class="mr-2">
|
|
||||||
<!-- TODO switch case in lit template? needed for tailwindcss purging -->
|
|
||||||
<span
|
|
||||||
class="inline-block ${crawl.state === "failed"
|
|
||||||
? "text-red-500"
|
|
||||||
: crawl.state === "complete"
|
|
||||||
? "text-emerald-500"
|
|
||||||
: isRunning(crawl)
|
|
||||||
? "text-purple-500"
|
|
||||||
: "text-zinc-300"}"
|
|
||||||
style="font-size: 10px; vertical-align: 2px"
|
|
||||||
>
|
|
||||||
●
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="whitespace-nowrap mb-1 capitalize${isRunning(crawl)
|
|
||||||
? " motion-safe:animate-pulse"
|
|
||||||
: ""}"
|
|
||||||
>
|
|
||||||
${crawl.state.replace(/_/g, " ")}
|
|
||||||
</div>
|
|
||||||
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
|
||||||
${crawl.finished
|
|
||||||
? html`
|
|
||||||
<sl-relative-time
|
|
||||||
date=${`${crawl.finished}Z` /** Z for UTC */}
|
|
||||||
></sl-relative-time>
|
|
||||||
`
|
|
||||||
: html`<btrix-relative-duration
|
|
||||||
value=${`${crawl.started}Z`}
|
|
||||||
></btrix-relative-duration>`}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-6 md:col-span-2">
|
|
||||||
${crawl.finished
|
|
||||||
? html`
|
|
||||||
<div class="whitespace-nowrap truncate text-sm">
|
|
||||||
<span class="font-mono text-0-800 tracking-tighter">
|
|
||||||
<sl-format-bytes
|
|
||||||
value=${crawl.fileSize || 0}
|
|
||||||
lang=${/* TODO localize: */ "en"}
|
|
||||||
></sl-format-bytes>
|
|
||||||
</span>
|
|
||||||
<span class="text-0-500">
|
|
||||||
(${crawl.fileCount === 1
|
|
||||||
? msg(str`${crawl.fileCount} file`)
|
|
||||||
: msg(str`${crawl.fileCount} files`)})
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
|
||||||
${msg(
|
|
||||||
str`in ${RelativeDuration.humanize(
|
|
||||||
new Date(`${crawl.finished}Z`).valueOf() -
|
|
||||||
new Date(`${crawl.started}Z`).valueOf()
|
|
||||||
)}`
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
: crawl.stats
|
|
||||||
? html`
|
|
||||||
<div
|
|
||||||
class="whitespace-nowrap truncate text-sm text-purple-600 font-mono tracking-tighter"
|
|
||||||
>
|
>
|
||||||
${this.numberFormatter.format(+crawl.stats.done)}
|
${msg("Copy Crawl ID")}
|
||||||
<span class="text-0-400">/</span>
|
</li>
|
||||||
${this.numberFormatter.format(+crawl.stats.found)}
|
<li
|
||||||
</div>
|
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||||
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
role="menuitem"
|
||||||
${msg("pages crawled")}
|
@click=${(e: any) => {
|
||||||
</div>
|
CopyButton.copyToClipboard(crawl.cid);
|
||||||
`
|
e.target.closest("sl-dropdown").hide();
|
||||||
: ""}
|
}}
|
||||||
</div>
|
>
|
||||||
<div class="col-span-6 md:col-span-2">
|
${msg("Copy Crawl Template ID")}
|
||||||
${crawl.manual
|
</li>
|
||||||
? html`
|
<li
|
||||||
<div class="whitespace-nowrap truncate mb-1">
|
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||||
<span
|
role="menuitem"
|
||||||
class="bg-fuchsia-50 text-fuchsia-700 text-sm rounded px-1 leading-4"
|
@click=${(e: any) => {
|
||||||
>${msg("Manual Start")}</span
|
this.navTo(
|
||||||
|
`/archives/${crawl.aid}/crawl-templates/config/${crawl.cid}`
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
${msg("View Crawl Template")}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</sl-dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-2 flex items-start">
|
||||||
|
<div class="mr-2">
|
||||||
|
<!-- TODO switch case in lit template? needed for tailwindcss purging -->
|
||||||
|
<span
|
||||||
|
class="inline-block ${crawl.state === "failed"
|
||||||
|
? "text-red-500"
|
||||||
|
: crawl.state === "complete"
|
||||||
|
? "text-emerald-500"
|
||||||
|
: isRunning(crawl)
|
||||||
|
? "text-purple-500"
|
||||||
|
: "text-zinc-300"}"
|
||||||
|
style="font-size: 10px; vertical-align: 2px"
|
||||||
|
>
|
||||||
|
●
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="whitespace-nowrap mb-1 capitalize${isRunning(crawl)
|
||||||
|
? " motion-safe:animate-pulse"
|
||||||
|
: ""}"
|
||||||
|
>
|
||||||
|
${crawl.state.replace(/_/g, " ")}
|
||||||
|
</div>
|
||||||
|
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
||||||
|
${crawl.finished
|
||||||
|
? html`
|
||||||
|
<sl-relative-time
|
||||||
|
date=${`${crawl.finished}Z` /** Z for UTC */}
|
||||||
|
></sl-relative-time>
|
||||||
|
`
|
||||||
|
: html`<btrix-relative-duration
|
||||||
|
value=${`${crawl.started}Z`}
|
||||||
|
></btrix-relative-duration>`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6 md:col-span-2">
|
||||||
|
${crawl.finished
|
||||||
|
? html`
|
||||||
|
<div class="whitespace-nowrap truncate text-sm">
|
||||||
|
<span class="font-mono text-0-800 tracking-tighter">
|
||||||
|
<sl-format-bytes
|
||||||
|
value=${crawl.fileSize || 0}
|
||||||
|
lang=${/* TODO localize: */ "en"}
|
||||||
|
></sl-format-bytes>
|
||||||
|
</span>
|
||||||
|
<span class="text-0-500">
|
||||||
|
(${crawl.fileCount === 1
|
||||||
|
? msg(str`${crawl.fileCount} file`)
|
||||||
|
: msg(str`${crawl.fileCount} files`)})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
||||||
|
${msg(
|
||||||
|
str`in ${RelativeDuration.humanize(
|
||||||
|
new Date(`${crawl.finished}Z`).valueOf() -
|
||||||
|
new Date(`${crawl.started}Z`).valueOf()
|
||||||
|
)}`
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
: crawl.stats
|
||||||
|
? html`
|
||||||
|
<div
|
||||||
|
class="whitespace-nowrap truncate text-sm text-purple-600 font-mono tracking-tighter"
|
||||||
>
|
>
|
||||||
</div>
|
${this.numberFormatter.format(+crawl.stats.done)}
|
||||||
<div class="ml-1 text-0-500 text-sm whitespace-nowrap truncate">
|
<span class="text-0-400">/</span>
|
||||||
${msg(str`by ${crawl.userName || crawl.userid}`)}
|
${this.numberFormatter.format(+crawl.stats.found)}
|
||||||
</div>
|
</div>
|
||||||
`
|
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
||||||
: html`
|
${msg("pages crawled")}
|
||||||
<div class="whitespace-nowrap truncate">
|
</div>
|
||||||
<span
|
`
|
||||||
class="bg-teal-50 text-teal-700 text-sm rounded px-1 leading-4"
|
: ""}
|
||||||
>${msg("Scheduled Run")}</span
|
</div>
|
||||||
>
|
<div class="col-span-6 md:col-span-2">
|
||||||
</div>
|
${crawl.manual
|
||||||
`}
|
? html`
|
||||||
</div>
|
<div class="whitespace-nowrap truncate mb-1">
|
||||||
|
<span
|
||||||
|
class="bg-fuchsia-50 text-fuchsia-700 text-sm rounded px-1 leading-4"
|
||||||
|
>${msg("Manual Start")}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="ml-1 text-0-500 text-sm whitespace-nowrap truncate">
|
||||||
|
${msg(str`by ${crawl.userName || crawl.userid}`)}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
: html`
|
||||||
|
<div class="whitespace-nowrap truncate">
|
||||||
|
<span
|
||||||
|
class="bg-teal-50 text-teal-700 text-sm rounded px-1 leading-4"
|
||||||
|
>${msg("Scheduled Run")}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</li>`;
|
</li>`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -66,12 +66,14 @@ export default class LiteElement extends LitElement {
|
|||||||
* @param event Click event
|
* @param event Click event
|
||||||
*/
|
*/
|
||||||
navLink(event: MouseEvent, href?: string): void {
|
navLink(event: MouseEvent, href?: string): void {
|
||||||
// Detect keypress for opening in a new tab
|
|
||||||
if (
|
if (
|
||||||
|
// Detect keypress for opening in a new tab
|
||||||
event.ctrlKey ||
|
event.ctrlKey ||
|
||||||
event.shiftKey ||
|
event.shiftKey ||
|
||||||
event.metaKey ||
|
event.metaKey ||
|
||||||
(event.button && event.button == 1)
|
(event.button && event.button == 1) ||
|
||||||
|
// Account for event prevented on anchor tag
|
||||||
|
event.defaultPrevented
|
||||||
) {
|
) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user