Implement deletion button to permanently delete collections

crates/frontend/js-components/lib/delete-button.ts

@@ -0,0 +1,44 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createClient } from "webdav";
+
+@customElement("delete-button")
+export class DeleteButton extends LitElement {
+  constructor() {
+    super()
+  }
+
+  @property({ type: Boolean })
+  trash: boolean = false
+  @property()
+  href: string
+
+  protected createRenderRoot() {
+    return this
+  }
+
+  protected render() {
+    let text = this.trash ? 'Move to trash' : 'Delete'
+    return html`<button class="delete" @click=${e => this._onClick(e)}>${text}</button>`
+  }
+
+  async _onClick(event: Event) {
+    event.preventDefault()
+    if (!this.trash && !confirm('Do you want to delete this collection permanently?')) {
+      return
+    }
+
+    let response = await fetch(this.href, {
+      method: 'DELETE',
+      headers: {
+        'X-No-Trashbin': this.trash ? '0' : '1'
+      }
+    })
+    if (response.status < 200 || response.status >= 300) {
+      alert('An error occured, look into the console')
+      console.error(response)
+      return
+    }
+    window.location.reload()
+  }
+}

crates/frontend/js-components/vite.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
       input: [
         "lib/create-calendar-form.ts",
         "lib/create-addressbook-form.ts",
+        "lib/delete-button.ts",
       ],
       output: {
         dir: "../public/assets/js/",