frontend: Move collection creation to dialog

crates/frontend/public/assets/js/create-calendar-form.mjs

@@ -1,62 +1,66 @@
-import { i as m, x as c } from "./lit-Dq9MfRDi.mjs";
-import { n as s, t as d } from "./property-DwhV4xIV.mjs";
-import { a as u } from "./webdav-Bz4I5vNH.mjs";
-var h = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? b(t, o) : t, l = e.length - 1, p; l >= 0; l--)
-    (p = e[l]) && (i = (n ? p(t, o, i) : p(i)) || i);
-  return n && i && h(t, o, i), i;
+import { i as u, x as c } from "./lit-CWlWuEHk.mjs";
+import { e as d, n as m, a as o, t as h } from "./ref-DuYNkSJ_.mjs";
+import { a as b } from "./webdav-Bz4I5vNH.mjs";
+var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (t, e, l, s) => {
+  for (var i = s > 1 ? void 0 : s ? $(e, l) : e, n = t.length - 1, p; n >= 0; n--)
+    (p = t[n]) && (i = (s ? p(e, l, i) : p(i)) || i);
+  return s && i && y(e, l, i), i;
 };
-let r = class extends m {
+let r = class extends u {
   constructor() {
-    super(), this.client = u("/caldav"), this.user = "", this.id = "", this.displayname = "", this.description = "", this.color = "", this.subscriptionUrl = "", this.components = /* @__PURE__ */ new Set();
+    super(), this.client = b("/caldav"), this.user = "", this.id = "", this.displayname = "", this.description = "", this.color = "", this.subscriptionUrl = "", this.components = /* @__PURE__ */ new Set(), this.dialog = d(), this.form = d();
   }
   createRenderRoot() {
     return this;
   }
   render() {
     return c`
-      <section>
+      <button @click=${() => this.dialog.value.showModal()}>Create calendar</button>
+      <dialog ${m(this.dialog)}>
         <h3>Create calendar</h3>
-        <form @submit=${this.submit}>
+        <form @submit=${this.submit} ${m(this.form)}>
           <label>
             id
-            <input type="text" name="id" @change=${(e) => this.id = e.target.value} />
+            <input type="text" name="id" @change=${(t) => this.id = t.target.value} />
           </label>
           <br>
           <label>
             Displayname
-            <input type="text" name="displayname" value=${this.displayname} @change=${(e) => this.displayname = e.target.value} />
+            <input type="text" name="displayname" value=${this.displayname} @change=${(t) => this.displayname = t.target.value} />
           </label>
           <br>
           <label>
             Description
-            <input type="text" name="description" @change=${(e) => this.description = e.target.value} />
+            <input type="text" name="description" @change=${(t) => this.description = t.target.value} />
           </label>
           <br>
           <label>
             Color
-            <input type="color" name="color"  @change=${(e) => this.color = e.target.value} />
+            <input type="color" name="color"  @change=${(t) => this.color = t.target.value} />
           </label>
           <br>
           <label>
             Subscription URL
-            <input type="text" name="subscription_url" @change=${(e) => this.subscriptionUrl = e.target.value}  />
+            <input type="text" name="subscription_url" @change=${(t) => this.subscriptionUrl = t.target.value}  />
           </label>
           <br>
-          ${["VEVENT", "VTODO", "VJOURNAL"].map((e) => c`
+          ${["VEVENT", "VTODO", "VJOURNAL"].map((t) => c`
             <label>
-              Support ${e}
-              <input type="checkbox" value=${e} @change=${(t) => t.target.checked ? this.components.add(t.target.value) : this.components.delete(t.target.value)} />
+              Support ${t}
+              <input type="checkbox" value=${t} @change=${(e) => e.target.checked ? this.components.add(e.target.value) : this.components.delete(e.target.value)} />
             </label>
           `)}
           <br>
           <button type="submit">Create</button>
-        </form>
-      </section>
-    `;
+          <button type="submit" @click=${(t) => {
+      t.preventDefault(), this.dialog.value.close(), this.form.value.reset();
+    }}> Cancel </button>
+      </form>
+      </dialog>
+        `;
   }
-  async submit(e) {
-    if (console.log(this.displayname), e.preventDefault(), !this.id) {
+  async submit(t) {
+    if (console.log(this.displayname), t.preventDefault(), !this.id) {
       alert("Empty id");
       return;
     }
@@ -68,7 +72,7 @@ let r = class extends m {
       alert("No calendar components selected");
       return;
     }
-    return await this.client.createDirectory(`/principal/${this.user}/${this.id}`, {
+    return await this.client.createDirectory(`/ principal / ${this.user}/${this.id}`, {
       data: `
       <mkcol xmlns="DAV:" xmlns:CAL="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/" xmlns:ICAL="http://apple.com/ns/ical/">
         <set>
@@ -78,7 +82,7 @@ let r = class extends m {
             ${this.color ? `<ICAL:calendar-color>${this.color}</ICAL:calendar-color>` : ""}
             ${this.subscriptionUrl ? `<CS:source>${this.subscriptionUrl}</CS:source>` : ""}
             <CAL:supported-calendar-component-set>
-              ${Array.from(this.components.keys()).map((t) => `<CAL:comp name="${t}" />`).join(`
+              ${Array.from(this.components.keys()).map((e) => `<CAL:comp name="${e}" />`).join(`
 `)}
             </CAL:supported-calendar-component-set>
           </prop>
@@ -89,28 +93,28 @@ let r = class extends m {
   }
 };
 a([
-  s()
+  o()
 ], r.prototype, "user", 2);
 a([
-  s()
+  o()
 ], r.prototype, "id", 2);
 a([
-  s()
+  o()
 ], r.prototype, "displayname", 2);
 a([
-  s()
+  o()
 ], r.prototype, "description", 2);
 a([
-  s()
+  o()
 ], r.prototype, "color", 2);
 a([
-  s()
+  o()
 ], r.prototype, "subscriptionUrl", 2);
 a([
-  s()
+  o()
 ], r.prototype, "components", 2);
 r = a([
-  d("create-calendar-form")
+  h("create-calendar-form")
 ], r);
 export {
   r as CreateCalendarForm