frontend: tiny improvement to import forms

This commit is contained in:
Lennart
2025-12-11 20:17:04 +01:00
parent 1b2296c00a
commit 1230e29243
5 changed files with 29 additions and 20 deletions

View File

@@ -32,23 +32,25 @@ export class ImportAddressbookForm extends LitElement {
<form @submit=${this.submit} ${ref(this.form)}>
<label>
principal (for group addressbook)
<select name="principal" value=${this.user} @change=${e => this.principal = e.target.value}>
<option value=${this.user}>${this.user}</option>
<select name="principal" required .value=${this.user} @change=${e => this.principal = e.target.value}>
<option .value=${this.user}>${this.user}</option>
${window.rusticalUser.memberships.map(membership => html`
<option value=${membership}>${membership}</option>
<option .value=${membership}>${membership}</option>
`)}
</select>
</label>
<br>
<label>
id
<input type="text" name="id" value=${this.addressbook_id} @change=${e => this.addressbook_id = e.target.value} />
<input type="text" required .value=${this.addressbook_id} @change=${e => this.addressbook_id = e.target.value} />
</label>
<br>
<label>
file
<input type="file" accept="text/vcard" name="file" @change=${e => this.file = e.target.files[0]} />
<input type="file" accept="text/vcard" required @change=${e => this.file = e.target.files[0]} />
</label>
<br>
<br>
<button type="submit">Import</button>
<button type="submit" @click=${event => { event.preventDefault(); this.dialog.value.close(); this.form.value.reset() }} class="cancel">Cancel</button>
</form>

View File

@@ -32,23 +32,25 @@ export class ImportCalendarForm extends LitElement {
<form @submit=${this.submit} ${ref(this.form)}>
<label>
principal (for group calendars)
<select name="principal" value=${this.user} @change=${e => this.principal = e.target.value}>
<option value=${this.user}>${this.user}</option>
<select name="principal" required .value=${this.user} @change=${e => this.principal = e.target.value}>
<option .value=${this.user}>${this.user}</option>
${window.rusticalUser.memberships.map(membership => html`
<option value=${membership}>${membership}</option>
<option .value=${membership}>${membership}</option>
`)}
</select>
</label>
<br>
<label>
id
<input type="text" name="id" value=${this.cal_id} @change=${e => this.cal_id = e.target.value} />
<input type="text" required .value=${this.cal_id} @change=${e => this.cal_id = e.target.value} />
</label>
<br>
<label>
file
<input type="file" accept="text/calendar" name="file" @change=${e => this.file = e.target.files[0]} />
<input type="file" required accept="text/calendar" @change=${e => this.file = e.target.files[0]} />
</label>
<br>
<br>
<button type="submit">Import</button>
<button type="submit" @click=${event => { event.preventDefault(); this.dialog.value.close(); this.form.value.reset() }} class="cancel">Cancel</button>
</form>

View File

@@ -30,23 +30,25 @@ let ImportAddressbookForm = class extends i {
<form @submit=${this.submit} ${n(this.form)}>
<label>
principal (for group addressbook)
<select name="principal" value=${this.user} @change=${(e2) => this.principal = e2.target.value}>
<option value=${this.user}>${this.user}</option>
<select name="principal" required .value=${this.user} @change=${(e2) => this.principal = e2.target.value}>
<option .value=${this.user}>${this.user}</option>
${window.rusticalUser.memberships.map((membership) => x`
<option value=${membership}>${membership}</option>
<option .value=${membership}>${membership}</option>
`)}
</select>
</label>
<br>
<label>
id
<input type="text" name="id" value=${this.addressbook_id} @change=${(e2) => this.addressbook_id = e2.target.value} />
<input type="text" required .value=${this.addressbook_id} @change=${(e2) => this.addressbook_id = e2.target.value} />
</label>
<br>
<label>
file
<input type="file" accept="text/vcard" name="file" @change=${(e2) => this.file = e2.target.files[0]} />
<input type="file" accept="text/vcard" required @change=${(e2) => this.file = e2.target.files[0]} />
</label>
<br>
<br>
<button type="submit">Import</button>
<button type="submit" @click=${(event) => {
event.preventDefault();

View File

@@ -30,23 +30,25 @@ let ImportCalendarForm = class extends i {
<form @submit=${this.submit} ${n(this.form)}>
<label>
principal (for group calendars)
<select name="principal" value=${this.user} @change=${(e2) => this.principal = e2.target.value}>
<option value=${this.user}>${this.user}</option>
<select name="principal" required .value=${this.user} @change=${(e2) => this.principal = e2.target.value}>
<option .value=${this.user}>${this.user}</option>
${window.rusticalUser.memberships.map((membership) => x`
<option value=${membership}>${membership}</option>
<option .value=${membership}>${membership}</option>
`)}
</select>
</label>
<br>
<label>
id
<input type="text" name="id" value=${this.cal_id} @change=${(e2) => this.cal_id = e2.target.value} />
<input type="text" required .value=${this.cal_id} @change=${(e2) => this.cal_id = e2.target.value} />
</label>
<br>
<label>
file
<input type="file" accept="text/calendar" name="file" @change=${(e2) => this.file = e2.target.files[0]} />
<input type="file" required accept="text/calendar" @change=${(e2) => this.file = e2.target.files[0]} />
</label>
<br>
<br>
<button type="submit">Import</button>
<button type="submit" @click=${(event) => {
event.preventDefault();

View File

@@ -341,6 +341,7 @@ form {
input[type="url"],
input[type="password"],
input[type="color"],
input[type="file"],
textarea,
select {
width: 100%;