54e2b2c703
- Adds tab for "Web Captures" in Collection detail view - Move Collection description under Replay section - Fixes app reloading when clicking into a Collection - Standardizes Web Capture list headers from "Finished -> "Created Date"
93 lines
2.4 KiB
TypeScript
93 lines
2.4 KiB
TypeScript
import { state, property } from "lit/decorators.js";
|
|
import { msg, localized, str } from "@lit/localize";
|
|
|
|
import type { CollectionSubmitEvent } from "./collection-editor";
|
|
import type { AuthState } from "../../utils/AuthService";
|
|
import LiteElement, { html } from "../../utils/LiteElement";
|
|
import type { Collection } from "../../types/collection";
|
|
import "./collection-editor";
|
|
|
|
@localized()
|
|
export class CollectionsNew extends LiteElement {
|
|
@property({ type: Object })
|
|
authState!: AuthState;
|
|
|
|
@property({ type: String })
|
|
orgId!: string;
|
|
|
|
@property({ type: Boolean })
|
|
isCrawler?: boolean;
|
|
|
|
@state()
|
|
private collection?: Collection;
|
|
|
|
@state()
|
|
private isSubmitting = false;
|
|
|
|
@state()
|
|
private serverError?: string;
|
|
|
|
render() {
|
|
return html`${this.renderHeader()}
|
|
<h2 class="text-xl font-semibold mb-6">${msg("New Collection")}</h2>
|
|
<btrix-collection-editor
|
|
.authState=${this.authState}
|
|
orgId=${this.orgId}
|
|
?isSubmitting=${this.isSubmitting}
|
|
?isCrawler=${this.isCrawler}
|
|
@on-submit=${this.onSubmit}
|
|
></btrix-collection-editor>`;
|
|
}
|
|
|
|
private renderHeader = () => html`
|
|
<nav class="mb-7">
|
|
<a
|
|
class="text-gray-600 hover:text-gray-800 text-sm font-medium"
|
|
href=${`/orgs/${this.orgId}/collections`}
|
|
@click=${this.navLink}
|
|
>
|
|
<sl-icon name="arrow-left" class="inline-block align-middle"></sl-icon>
|
|
<span class="inline-block align-middle"
|
|
>${msg("Back to Collections")}</span
|
|
>
|
|
</a>
|
|
</nav>
|
|
`;
|
|
|
|
private async onSubmit(e: CollectionSubmitEvent) {
|
|
this.isSubmitting = true;
|
|
console.log("submit", e.detail.values);
|
|
|
|
try {
|
|
const data = await this.apiFetch(
|
|
`/orgs/${this.orgId}/collections`,
|
|
this.authState!,
|
|
{
|
|
method: "POST",
|
|
body: JSON.stringify(e.detail.values),
|
|
}
|
|
);
|
|
|
|
this.notify({
|
|
message: msg(str`Successfully created "${data.name}" Collection.`),
|
|
variant: "success",
|
|
icon: "check2-circle",
|
|
duration: 8000,
|
|
});
|
|
|
|
this.navTo(`/orgs/${this.orgId}/collections`);
|
|
} catch (e: any) {
|
|
if (e?.isApiError) {
|
|
this.serverError = e?.message;
|
|
} else {
|
|
this.serverError = msg("Something unexpected went wrong");
|
|
}
|
|
|
|
console.log(this.serverError);
|
|
}
|
|
|
|
this.isSubmitting = false;
|
|
}
|
|
}
|
|
customElements.define("btrix-collections-new", CollectionsNew);
|