Allow user to edit crawl template (#147)

closes #144

frontend/src/components/crawl-scheduler.ts

@@ -9,18 +9,27 @@ import type { CrawlTemplate } from "../pages/archive/types";
 /**
  * Usage:
  * ```ts
- * <btrix-crawl-templates-scheduler
+ * <btrix-crawl-scheduler
  *   schedule="0 0 * * *"
+ *   cancelable=${true}
  *   @submit=${this.handleSubmit}
- * ></btrix-crawl-templates-scheduler>
+ *   @cancel=${this.handleCancel}
+ * ></btrix-crawl-scheduler>
  * ```
  *
  * @event submit
+ * @event cancel
  */
 @localized()
 export class CrawlTemplatesScheduler extends LiteElement {
   @property({ type: String })
-  private schedule?: CrawlTemplate["schedule"];
+  schedule?: CrawlTemplate["schedule"];
+
+  @property({ type: Boolean })
+  isSubmitting: boolean = false;
+
+  @property({ type: Boolean })
+  cancelable?: boolean = false;
 
   @state()
   private editedSchedule?: string;
@@ -189,15 +198,31 @@ export class CrawlTemplatesScheduler extends LiteElement {
               )}
         </div>
 
-        <div class="mt-5">
-          <sl-button type="primary" submit
-            >${msg("Save Crawl Schedule")}</sl-button
+        <div class="mt-5${this.cancelable ? " text-right" : ""}">
+          ${this.cancelable
+            ? html`
+                <sl-button type="text" @click=${this.onCancel}
+                  >${msg("Cancel")}</sl-button
+                >
+              `
+            : ""}
+
+          <sl-button
+            type="primary"
+            submit
+            ?disabled=${this.isSubmitting}
+            ?loading=${this.isSubmitting}
+            >${msg("Save Changes")}</sl-button
           >
         </div>
       </sl-form>
     `;
   }
 
+  private onCancel(event: any) {
+    this.dispatchEvent(new CustomEvent("cancel", event));
+  }
+
   private onSubmit(event: any) {
     this.dispatchEvent(new CustomEvent("submit", event));
   }
@@ -240,7 +265,4 @@ export class CrawlTemplatesScheduler extends LiteElement {
   }
 }
 
-customElements.define(
-  "btrix-crawl-templates-scheduler",
-  CrawlTemplatesScheduler
-);
+customElements.define("btrix-crawl-scheduler", CrawlTemplatesScheduler);

frontend/src/index.ts

@@ -126,6 +126,10 @@ export class App extends LiteElement {
       };
     } catch (err: any) {
       if (err?.message === "Unauthorized") {
+        console.debug(
+          "Unauthorized with authState:",
+          this.authService.authState
+        );
         this.authService.logout();
         this.navigate(ROUTES.login);
       }

frontend/src/pages/archive/crawl-detail.ts

@@ -1,4 +1,5 @@
 import { state, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
 
 import { RelativeDuration } from "../../components/relative-duration";
@@ -75,7 +76,7 @@ export class CrawlDetail extends LiteElement {
       </nav>
 
       <header class="my-3">
-        <h2 class="text-xl font-medium mb-1 h-7">
+        <h2 class="text-xl font-medium mb-1 md:h-7">
           ${this.crawl
             ? msg(str`Crawl of ${this.crawl.configName}`)
             : html`<sl-skeleton style="width: 37em"></sl-skeleton>`}
@@ -159,7 +160,7 @@ export class CrawlDetail extends LiteElement {
         ${replaySource
           ? html`<replay-web-page
               source="${replaySource}"
-              coll="${this.crawl?.id}"
+              coll="${ifDefined(this.crawl?.id)}"
               replayBase="/replay/"
               noSandbox="true"
             ></replay-web-page>`

frontend/src/pages/archive/crawl-templates-list.ts

@@ -236,10 +236,10 @@ export class CrawlTemplatesList extends LiteElement {
 
         ${this.selectedTemplateForEdit
           ? html`
-              <btrix-crawl-templates-scheduler
+              <btrix-crawl-scheduler
                 .schedule=${this.selectedTemplateForEdit.schedule}
                 @submit=${this.onSubmitSchedule}
-              ></btrix-crawl-templates-scheduler>
+              ></btrix-crawl-scheduler>
             `
           : ""}
       </sl-dialog>
@@ -542,7 +542,7 @@ export class CrawlTemplatesList extends LiteElement {
 
     try {
       await this.apiFetch(
-        `/archives/${this.archiveId}/crawlconfigs/${editedTemplateId}/schedule`,
+        `/archives/${this.archiveId}/crawlconfigs/${editedTemplateId}`,
         this.authState!,
         {
           method: "PATCH",