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;
+ }
+ }
+}