87 lines
2.4 KiB
Plaintext
87 lines
2.4 KiB
Plaintext
import Component from '@glimmer/component';
|
|
import { on } from '@ember/modifier';
|
|
import { fn } from '@ember/helper';
|
|
import or from 'ember-truth-helpers/helpers/or';
|
|
import formatRelativeDate from '../helpers/format-relative-date';
|
|
|
|
export default class ContributionPhoto extends Component {
|
|
get item() {
|
|
return this.args.item;
|
|
}
|
|
|
|
get primaryPhoto() {
|
|
return this.item?.photos?.[0] || null;
|
|
}
|
|
|
|
get extraPhotoCount() {
|
|
return Math.max(0, (this.item?.photos?.length || 0) - 1);
|
|
}
|
|
|
|
get placeName() {
|
|
return this.item?.placeName;
|
|
}
|
|
|
|
get isNameLoading() {
|
|
return this.item?.placeNameLoading;
|
|
}
|
|
|
|
get tags() {
|
|
// Collect unique tags across all photos in the contribution group
|
|
const all = (this.item?.photos || []).flatMap((p) => p.tags || []);
|
|
return [...new Set(all)];
|
|
}
|
|
|
|
<template>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
class="contribution-item"
|
|
{{on "click" (fn @onSelect @item)}}
|
|
>
|
|
<div class="contribution-thumb">
|
|
{{#if this.primaryPhoto}}
|
|
<img
|
|
src={{or this.primaryPhoto.thumbUrl this.primaryPhoto.url}}
|
|
alt={{or this.primaryPhoto.alt "Place photo"}}
|
|
loading="lazy"
|
|
/>
|
|
{{/if}}
|
|
{{#if (gt this.extraPhotoCount 0)}}
|
|
<span
|
|
class="contribution-thumb-badge"
|
|
>+{{this.extraPhotoCount}}</span>
|
|
{{/if}}
|
|
</div>
|
|
<div class="contribution-info">
|
|
<div class="contribution-place">
|
|
{{#if this.placeName}}
|
|
{{this.placeName}}
|
|
{{else if this.isNameLoading}}
|
|
<span class="contribution-name-loading">Loading…</span>
|
|
{{else}}
|
|
<span class="contribution-name-loading">Unnamed place</span>
|
|
{{/if}}
|
|
</div>
|
|
<div class="contribution-meta">
|
|
{{formatRelativeDate @item.createdAt}}
|
|
{{#if (gt this.item.photos.length 1)}}
|
|
·
|
|
{{this.item.photos.length}}
|
|
photos
|
|
{{else}}
|
|
· 1 photo
|
|
{{/if}}
|
|
</div>
|
|
{{#if this.tags.length}}
|
|
<div class="contribution-tags">
|
|
{{#each this.tags as |tag|}}
|
|
<span class="contribution-tag">{{tag}}</span>
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</button>
|
|
</li>
|
|
</template>
|
|
}
|