📅 Add calendar functionality

src/components/Calendar/CalendarEventDialog.ts

@@ -0,0 +1,169 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+
+import '@components/General/Button';
+import { StyledInput } from '@components/General/Input';
+import { StyledTextarea } from '@components/General/Textarea';
+import { StyledToggle } from '@components/General/Toggle';
+
+interface InputEvent extends Event {
+  detail: {
+    value: string;
+  };
+}
+
+@customElement('arx-calendar-event-dialog')
+export class CalendarEventDialog extends LitElement {
+  @property({ type: Boolean })
+  open = false;
+
+  @state()
+  private newEvent = {
+    title: '',
+    description: '',
+    location: '',
+    startDate: '',
+    startTime: '',
+    endDate: '',
+    endTime: '',
+    allDay: false,
+    participants: [] as string[],
+    tags: [] as string[],
+  };
+
+  static override styles = css`
+    .form-input {
+      width: 100%;
+      padding: 0.5rem;
+      border: 1px solid var(--color-base-300);
+      border-radius: var(--radius-selector);
+      background: var(--color-base-200);
+      color: var(--color-base-content);
+    }
+
+    .form-row {
+      display: flex;
+      gap: 1rem;
+    }
+  `;
+
+  private handleClose() {
+    this.dispatchEvent(new CustomEvent('close'));
+  }
+
+  private handleInputChange(e: Event) {
+    if (e.target instanceof StyledToggle) {
+      const checked = e.target.checked;
+      this.newEvent = {
+        ...this.newEvent,
+        [e.target.name]: checked,
+      };
+    } else if (e.target instanceof StyledTextarea || e.target instanceof StyledInput) {
+      const inputEvent = e as InputEvent;
+      this.newEvent = {
+        ...this.newEvent,
+        [e.target.name]: inputEvent.detail.value,
+      };
+    }
+  }
+
+  private handleSubmit(e: Event) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('submit', { detail: { event: this.newEvent } }));
+  }
+
+  override render() {
+    if (!this.open) return html``;
+
+    return html`
+      <arx-dialog width="500px" title="Add Event" .open=${this.open}>
+        <arx-fieldset legend="Title">
+          <arx-input
+            type="text"
+            name="title"
+            .value=${this.newEvent.title}
+            @change=${this.handleInputChange}
+            required
+          ></arx-input>
+        </arx-fieldset>
+        <arx-fieldset legend="Description">
+          <arx-textarea
+            name="description"
+            .value=${this.newEvent.description}
+            @change=${this.handleInputChange}
+          ></arx-textarea>
+        </arx-fieldset>
+        <arx-fieldset legend="Location">
+          <arx-input
+            type="text"
+            name="location"
+            .value=${this.newEvent.location}
+            @change=${this.handleInputChange}
+          ></arx-input>
+        </arx-fieldset>
+        <arx-fieldset>
+          <arx-toggle
+            label="All-day event"
+            name="allDay"
+            .checked=${this.newEvent.allDay}
+            @change=${this.handleInputChange}
+          ></arx-toggle>
+        </arx-fieldset>
+        <div class="form-row">
+          <arx-fieldset legend="Start Date">
+            <arx-input
+              type="date"
+              name="startDate"
+              .value=${this.newEvent.startDate}
+              @change=${this.handleInputChange}
+              required
+            ></arx-input>
+          </arx-fieldset>
+          ${when(
+            !this.newEvent.allDay,
+            () => html`
+              <arx-fieldset legend="Start Time">
+                <arx-input
+                  type="time"
+                  name="startTime"
+                  .value=${this.newEvent.startTime}
+                  @change=${this.handleInputChange}
+                  required
+                ></arx-input>
+              </arx-fieldset>
+            `,
+          )}
+        </div>
+        <div class="form-row">
+          <arx-fieldset legend="End Date">
+            <arx-input
+              type="date"
+              name="endDate"
+              .value=${this.newEvent.endDate}
+              @change=${this.handleInputChange}
+            ></arx-input>
+          </arx-fieldset>
+          ${when(
+            !this.newEvent.allDay,
+            () => html`
+              <arx-fieldset legend="End Time">
+                <arx-input
+                  type="time"
+                  name="endTime"
+                  .value=${this.newEvent.endTime}
+                  @change=${this.handleInputChange}
+                  ?required=${this.newEvent.endDate !== ''}
+                ></arx-input>
+              </arx-fieldset>
+            `,
+          )}
+        </div>
+        <div class="dialog-footer">
+          <arx-button variant="secondary" @click=${this.handleClose} label="Cancel"></arx-button>
+          <arx-button variant="primary" @click=${this.handleSubmit} type="submit" label="Create Event"></arx-button>
+        </div>
+      </arx-dialog>
+    `;
+  }
+}