diff --git a/app/components/photo-tags/photo-tags.hbs b/app/components/photo-tags/photo-tags.hbs index 9e935f9c4..4cfb2377f 100644 --- a/app/components/photo-tags/photo-tags.hbs +++ b/app/components/photo-tags/photo-tags.hbs @@ -26,12 +26,24 @@ {{#if this.newTagStyle }}
+
+ +
{{user.fullName}} diff --git a/app/components/photo-tags/photo-tags.js b/app/components/photo-tags/photo-tags.js index e8eac68b9..eb0280be9 100644 --- a/app/components/photo-tags/photo-tags.js +++ b/app/components/photo-tags/photo-tags.js @@ -8,13 +8,24 @@ import { htmlSafe } from '@ember/template'; export default class PhotoTags extends Component { @service store; @service flashNotice; + @service router; @tracked newTagX; @tracked newTagY; @tracked selectApi; @tracked showTags = false; + @tracked users = []; - get users() { - return this.store.findAll('user'); + get includeOldMembers() { + return this.router.currentRoute.queryParams.includeOldMembers === 'true'; + } + + async fetchUsers() { + if (this.includeOldMembers) { + this.users = await this.store.findAll('user'); + } else { + const params = { filter: { group: 'Leden' } }; + this.users = await this.store.query('user', params); + } } @action @@ -22,11 +33,29 @@ export default class PhotoTags extends Component { this.showTags = !this.showTags; } + @action + toggleIncludeOldMembers() { + const newValue = !this.includeOldMembers; + this.router.transitionTo({ queryParams: { includeOldMembers: newValue ? 'true' : 'false' } }); + this.fetchUsers(); + } + + @action + onSearchChange(searchResults) { + // Auto-select the user if there's only one search result + if (searchResults && searchResults.length === 1 && this.selectApi) { + next(this, () => { + this.selectApi.actions.choose(searchResults[0]); + }); + } + } + @action addTag(e) { if (e.target.tagName.toLowerCase() != 'img' || this.newTagX || this.newTagY) return; e.stopPropagation(); + this.fetchUsers(); let x = (e.offsetX / e.target.width) * 100; let y = (e.offsetY / e.target.height) * 100; this.newTagX = x; diff --git a/app/routes/photo-albums/photo-album/photos/photo.js b/app/routes/photo-albums/photo-album/photos/photo.js index 6d11d1f19..94ad9b203 100644 --- a/app/routes/photo-albums/photo-album/photos/photo.js +++ b/app/routes/photo-albums/photo-album/photos/photo.js @@ -1,7 +1,11 @@ import { ApplicationRoute } from 'amber-ui/routes/application/application'; export default class PhotoRoute extends ApplicationRoute { - queryParams = {}; + queryParams = { + includeOldMembers: { + replace: true + } + }; model(params) { return this.store.findRecord('photo', params.photo_id, params); diff --git a/app/styles/components/photo-tags.scss b/app/styles/components/photo-tags.scss index 8503e530a..71228e82d 100644 --- a/app/styles/components/photo-tags.scss +++ b/app/styles/components/photo-tags.scss @@ -45,3 +45,29 @@ right: 8px; color: #fff; } + +.photo-tag-controls { + border-bottom: 1px solid rgb(255 255 255 / 20%); + padding: 8px 0; + + .form-check { + margin-bottom: 0; + } + + .form-check-label { + color: #fff; + margin-bottom: 0; + margin-left: 4px; + font-size: 12px; + } + + .form-check-input { + border-color: rgb(255 255 255 / 50%); + background-color: rgb(255 255 255 / 20%); + + &:checked { + border-color: #007bff; + background-color: #007bff; + } + } +}