69 lines
1.9 KiB
Plaintext
69 lines
1.9 KiB
Plaintext
import Component from '@glimmer/component';
|
|
import PlacesSidebar from '#components/places-sidebar';
|
|
import { service } from '@ember/service';
|
|
import { action } from '@ember/object';
|
|
import { tracked } from '@glimmer/tracking';
|
|
|
|
export default class PlaceTemplate extends Component {
|
|
@service router;
|
|
@service storage;
|
|
|
|
@tracked localPlace = null;
|
|
|
|
constructor() {
|
|
super(...arguments);
|
|
this.localPlace = this.args.model;
|
|
}
|
|
|
|
// Update local place if model changes (e.g. navigation)
|
|
// We can use a getter or an effect, but in GJS a getter is easiest if we don't need manual overrides often.
|
|
// But we DO need to override it when saving.
|
|
|
|
// Actually, we can just use a derived state that prefers the local override?
|
|
// Let's use a modifier or just sync it.
|
|
|
|
get place() {
|
|
// If we have a manually updated place (from save), use it.
|
|
// Otherwise use the route model.
|
|
// We need to ensure we reset `localPlace` when navigating to a NEW place.
|
|
// Comparing IDs is a safe bet.
|
|
|
|
const model = this.args.model;
|
|
if (
|
|
this.localPlace &&
|
|
(this.localPlace.id === model.id || this.localPlace.osmId === model.osmId)
|
|
) {
|
|
// If the local place is "richer" (has createdAt), prefer it.
|
|
if (this.localPlace.createdAt && !model.createdAt) return this.localPlace;
|
|
// If we deleted it (local has no createdAt, model might?) - wait, if we delete, we close sidebar.
|
|
}
|
|
return model;
|
|
}
|
|
|
|
@action
|
|
handleUpdate(newPlace) {
|
|
console.log('Updating local place state:', newPlace);
|
|
this.localPlace = newPlace;
|
|
this.storage.notifyChange();
|
|
}
|
|
|
|
@action
|
|
refreshMap() {
|
|
this.storage.notifyChange();
|
|
}
|
|
|
|
@action
|
|
close() {
|
|
this.router.transitionTo('index');
|
|
}
|
|
|
|
<template>
|
|
<PlacesSidebar
|
|
@selectedPlace={{this.place}}
|
|
@onClose={{this.close}}
|
|
@onBookmarkChange={{this.refreshMap}}
|
|
@onUpdate={{this.handleUpdate}}
|
|
/>
|
|
</template>
|
|
}
|