73 lines
1.8 KiB
Plaintext
73 lines
1.8 KiB
Plaintext
import Component from '@glimmer/component';
|
|
import { on } from '@ember/modifier';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { action } from '@ember/object';
|
|
|
|
export default class PlaceEditForm extends Component {
|
|
@tracked title = '';
|
|
@tracked description = '';
|
|
|
|
constructor() {
|
|
super(...arguments);
|
|
this.title = this.args.place?.title || '';
|
|
this.description = this.args.place?.description || '';
|
|
}
|
|
|
|
@action
|
|
handleSubmit(event) {
|
|
event.preventDefault();
|
|
if (this.args.onSave) {
|
|
this.args.onSave({
|
|
title: this.title,
|
|
description: this.description,
|
|
});
|
|
}
|
|
}
|
|
|
|
@action
|
|
updateTitle(e) {
|
|
this.title = e.target.value;
|
|
}
|
|
|
|
@action
|
|
updateDescription(e) {
|
|
this.description = e.target.value;
|
|
}
|
|
|
|
<template>
|
|
<form class="edit-form" {{on "submit" this.handleSubmit}}>
|
|
<div class="form-group">
|
|
<label for="edit-title">Title</label>
|
|
<input
|
|
id="edit-title"
|
|
type="text"
|
|
value={{this.title}}
|
|
{{on "input" this.updateTitle}}
|
|
class="form-control"
|
|
placeholder="Name of the place"
|
|
autofocus
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-desc">Description</label>
|
|
<textarea
|
|
id="edit-desc"
|
|
value={{this.description}}
|
|
{{on "input" this.updateDescription}}
|
|
class="form-control"
|
|
rows="3"
|
|
placeholder="Add some details..."
|
|
></textarea>
|
|
</div>
|
|
<div class="edit-actions">
|
|
<button type="submit" class="btn btn-blue">Save</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-outline"
|
|
{{on "click" @onCancel}}
|
|
>Cancel</button>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
}
|