frontend: Add calendar editing form

crates/frontend/js-components/lib/edit-calendar-form.ts

@@ -0,0 +1,128 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Ref, createRef, ref } from 'lit/directives/ref.js';
+import { escapeXml } from ".";
+
+@customElement("edit-calendar-form")
+export class EditCalendarForm extends LitElement {
+  constructor() {
+    super()
+  }
+
+  protected override createRenderRoot() {
+    return this
+  }
+
+  @property()
+  principal: string
+  @property()
+  cal_id: string
+
+  @property()
+  displayname: string = ''
+  @property()
+  description: string = ''
+  @property()
+  color: string = ''
+  @property({
+    converter: {
+      fromAttribute: (value, _type) => new Set(value ? JSON.parse(value) : []),
+      toAttribute: (value, _type) => JSON.stringify(value)
+    }
+  })
+  components: Set<"VEVENT" | "VTODO" | "VJOURNAL"> = new Set()
+
+  dialog: Ref<HTMLDialogElement> = createRef()
+  form: Ref<HTMLFormElement> = createRef()
+
+
+  override render() {
+    return html`
+      <button @click=${() => this.dialog.value.showModal()}>Edit calendar</button>
+      <dialog ${ref(this.dialog)}>
+        <h3>Create calendar</h3>
+        <form @submit=${this.submit} ${ref(this.form)}>
+          <label>
+            Displayname
+            <input type="text" name="displayname" .value=${this.displayname} @change=${e => this.displayname = e.target.value} />
+          </label>
+          <br>
+          <label>
+            Description
+            <input type="text" name="description" .value=${this.description} @change=${e => this.description = e.target.value} />
+          </label>
+          <br>
+          <label>
+            Color
+            <input type="color" name="color" .value=${this.color} @change=${e => this.color = e.target.value} />
+          </label>
+          <br>
+          ${["VEVENT", "VTODO", "VJOURNAL"].map(comp => html`
+            <label>
+              Support ${comp}
+              <input type="checkbox" value=${comp} ?checked=${this.components.has(comp)} @change=${e => e.target.checked ? this.components.add(e.target.value) : this.components.delete(e.target.value)} />
+            </label>
+            <br>
+          `)}
+          <br>
+          <button type="submit">Submit</button>
+          <button type="submit" @click=${event => { event.preventDefault(); this.dialog.value.close(); this.form.value.reset() }} class="cancel">Cancel</button>
+      </form>
+      </dialog>
+        `
+  }
+
+  async submit(e: SubmitEvent) {
+    e.preventDefault()
+    if (!this.principal) {
+      alert("Empty principal")
+      return
+    }
+    if (!this.cal_id) {
+      alert("Empty id")
+      return
+    }
+    if (!this.displayname) {
+      alert("Empty displayname")
+      return
+    }
+    if (!this.components.size) {
+      alert("No calendar components selected")
+      return
+    }
+    await fetch(`/caldav/principal/${this.principal}/${this.cal_id}`, {
+      method: 'PROPPATCH',
+      headers: {
+        'Content-Type': 'application/xml'
+      },
+      body: `
+      <propertyupdate xmlns="DAV:" xmlns:CAL="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/" xmlns:ICAL="http://apple.com/ns/ical/">
+        <set>
+          <prop>
+            <displayname>${escapeXml(this.displayname)}</displayname>
+            ${this.description ? `<CAL:calendar-description>${escapeXml(this.description)}</CAL:calendar-description>` : ''}
+            ${this.color ? `<ICAL:calendar-color>${escapeXml(this.color)}</ICAL:calendar-color>` : ''}
+            <CAL:supported-calendar-component-set>
+              ${Array.from(this.components.keys()).map(comp => `<CAL:comp name="${escapeXml(comp)}" />`).join('\n')}
+            </CAL:supported-calendar-component-set>
+          </prop>
+        </set>
+        <remove>
+          <prop>
+            ${!this.description ? '<CAL:calendar-description />' : ''}
+            ${!this.color ? '<ICAL:calendar-color />' : ''}
+          </prop>
+        </remove>
+      </propertyupdate>
+      `
+    })
+    window.location.reload()
+    return null
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edit-calendar-form': EditCalendarForm
+  }
+}

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

@@ -15,6 +15,7 @@ export default defineConfig({
     rollupOptions: {
       input: [
         "lib/create-calendar-form.ts",
+        "lib/edit-calendar-form.ts",
         "lib/create-addressbook-form.ts",
         "lib/delete-button.ts",
       ],

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

@@ -0,0 +1,142 @@
+import { i, x } from "./lit-z6_uA4GX.mjs";
+import { n as n$1, t } from "./property-D0NJdseG.mjs";
+import { e, n, a as escapeXml } from "./index-b86iLJlP.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let EditCalendarForm = class extends i {
+  constructor() {
+    super();
+    this.displayname = "";
+    this.description = "";
+    this.color = "";
+    this.components = /* @__PURE__ */ new Set();
+    this.dialog = e();
+    this.form = e();
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    return x`
+      <button @click=${() => this.dialog.value.showModal()}>Edit calendar</button>
+      <dialog ${n(this.dialog)}>
+        <h3>Create calendar</h3>
+        <form @submit=${this.submit} ${n(this.form)}>
+          <label>
+            Displayname
+            <input type="text" name="displayname" .value=${this.displayname} @change=${(e2) => this.displayname = e2.target.value} />
+          </label>
+          <br>
+          <label>
+            Description
+            <input type="text" name="description" .value=${this.description} @change=${(e2) => this.description = e2.target.value} />
+          </label>
+          <br>
+          <label>
+            Color
+            <input type="color" name="color" .value=${this.color} @change=${(e2) => this.color = e2.target.value} />
+          </label>
+          <br>
+          ${["VEVENT", "VTODO", "VJOURNAL"].map((comp) => x`
+            <label>
+              Support ${comp}
+              <input type="checkbox" value=${comp} ?checked=${this.components.has(comp)} @change=${(e2) => e2.target.checked ? this.components.add(e2.target.value) : this.components.delete(e2.target.value)} />
+            </label>
+            <br>
+          `)}
+          <br>
+          <button type="submit">Submit</button>
+          <button type="submit" @click=${(event) => {
+      event.preventDefault();
+      this.dialog.value.close();
+      this.form.value.reset();
+    }} class="cancel">Cancel</button>
+      </form>
+      </dialog>
+        `;
+  }
+  async submit(e2) {
+    e2.preventDefault();
+    if (!this.principal) {
+      alert("Empty principal");
+      return;
+    }
+    if (!this.cal_id) {
+      alert("Empty id");
+      return;
+    }
+    if (!this.displayname) {
+      alert("Empty displayname");
+      return;
+    }
+    if (!this.components.size) {
+      alert("No calendar components selected");
+      return;
+    }
+    await fetch(`/caldav/principal/${this.principal}/${this.cal_id}`, {
+      method: "PROPPATCH",
+      headers: {
+        "Content-Type": "application/xml"
+      },
+      body: `
+      <propertyupdate xmlns="DAV:" xmlns:CAL="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/" xmlns:ICAL="http://apple.com/ns/ical/">
+        <set>
+          <prop>
+            <displayname>${escapeXml(this.displayname)}</displayname>
+            ${this.description ? `<CAL:calendar-description>${escapeXml(this.description)}</CAL:calendar-description>` : ""}
+            ${this.color ? `<ICAL:calendar-color>${escapeXml(this.color)}</ICAL:calendar-color>` : ""}
+            <CAL:supported-calendar-component-set>
+              ${Array.from(this.components.keys()).map((comp) => `<CAL:comp name="${escapeXml(comp)}" />`).join("\n")}
+            </CAL:supported-calendar-component-set>
+          </prop>
+        </set>
+        <remove>
+          <prop>
+            ${!this.description ? "<CAL:calendar-description />" : ""}
+            ${!this.color ? "<ICAL:calendar-color />" : ""}
+          </prop>
+        </remove>
+      </propertyupdate>
+      `
+    });
+    window.location.reload();
+    return null;
+  }
+};
+__decorateClass([
+  n$1()
+], EditCalendarForm.prototype, "principal", 2);
+__decorateClass([
+  n$1()
+], EditCalendarForm.prototype, "cal_id", 2);
+__decorateClass([
+  n$1()
+], EditCalendarForm.prototype, "displayname", 2);
+__decorateClass([
+  n$1()
+], EditCalendarForm.prototype, "description", 2);
+__decorateClass([
+  n$1()
+], EditCalendarForm.prototype, "color", 2);
+__decorateClass([
+  n$1({
+    converter: {
+      fromAttribute: (value, _type) => new Set(value ? JSON.parse(value) : []),
+      toAttribute: (value, _type) => JSON.stringify(value)
+    }
+  })
+], EditCalendarForm.prototype, "components", 2);
+EditCalendarForm = __decorateClass([
+  t("edit-calendar-form")
+], EditCalendarForm);
+export {
+  EditCalendarForm
+};

crates/frontend/public/templates/components/sections/calendars_section.html

@@ -25,6 +25,14 @@
           <button type="submit">Download</button>
         </form>
         {% if !calendar.id.starts_with("_birthdays_") %}
+        <edit-calendar-form
+          principal="{{ calendar.principal }}"
+          cal_id="{{ calendar.id }}"
+          displayname="{{ calendar.displayname.as_deref().unwrap_or_default() }}"
+          description="{{ calendar.description.as_deref().unwrap_or_default() }}"
+          color="{{ calendar.color.as_deref().unwrap_or_default() }}"
+          components="{{ calendar.components | json }}"
+        ></edit-calendar-form>
         <delete-button trash href="/caldav/principal/{{ calendar.principal }}/{{ calendar.id }}"></delete-button>
         {% endif %}
       </div>

crates/frontend/public/templates/pages/user.html

@@ -6,6 +6,7 @@
 window.rusticalUser = JSON.parse(document.querySelector('#data-rustical-user').innerHTML)
 </script>
 <script type="module" src="/frontend/assets/js/create-calendar-form.mjs" async></script>
+<script type="module" src="/frontend/assets/js/edit-calendar-form.mjs" async></script>
 <script type="module" src="/frontend/assets/js/create-addressbook-form.mjs" async></script>
 <script type="module" src="/frontend/assets/js/delete-button.mjs" async></script>
 {% endblock %}