album tag counter (#887)

* added total tag counters to album cover cards

* added number of tagged photos out of total

* added photo tag counter in album view

* fixed lint

* lint fix 2

* added unit test for feature

* fixed lint for unit test

* fixed lint for unit test again

Author: ToMaarton

app/components/cards/photo-album-card.hbs

@@ -5,11 +5,18 @@
       src='{{album.albumMediumUrl}}'
       class='card-img-rounded'
     />
+    
     <div class='card-title-bar gradient-overlay-rounded'>
       <div class='card-titles'>
         <h2 class='card-title'>{{album.title}}</h2>
         <h3 class='card-subtitle'>{{moment-format album.date 'DD-MM-YYYY'}}</h3>
       </div>
+      {{#if album.amountOfTaggedPhotos}}
+        <span class='album-tag-counter badge bg-info bottom-0 end-0'>
+          <FaIcon @icon='tag' />
+          {{album.amountOfTaggedPhotos}}/{{album.amountOfPhotos}}
+        </span>
+      {{/if}}
     </div>
   </div>
 </div>

app/models/photo-album.js

@@ -35,6 +35,18 @@ export default class PhotoAlbum extends Model {
     return this.photos?.sortBy('exifDateTimeOriginal', 'createdAt');
   }
 
+  get amountOfTaggedPhotos() {
+    var counter = 0;
+    this.photos.content.forEach((photo) => {
+      counter += photo.amountOfTags > 0 ? 1 : 0;
+    });
+    return counter;
+  }
+
+  get amountOfPhotos() {
+    return this.photos.length;
+  }
+
   // Methods
   isOwner(user) {
     if (user.get('id') === this.author.get('id')) {

app/styles/components/cards/photo-album-card.scss

@@ -19,4 +19,12 @@
   .card-title {
     font-size: 1.5rem;
   }
+
+  .album-tag-counter {
+    position: absolute;
+    bottom: 0;
+    margin-right: 15px;
+    margin-bottom: 1rem;
+    padding-left: 5px;
+  }
 }

app/templates/photo-albums/photo-album/photos/index.hbs

@@ -21,10 +21,16 @@
         @route='photo-albums.photo-album.photos.photo'
         @model={{photo.id}}
       >
-        {{#if photo.amountOfComments}}
+        {{#if (or photo.amountOfComments photo.amountOfTags)}}
           <span class='comments-counter badge bg-info bottom-0 start-0'>
-            <FaIcon @icon='comments' />
-            {{photo.amountOfComments}}
+            {{#if photo.amountOfComments}}
+              <FaIcon @icon='comments' />
+              {{photo.amountOfComments}}
+            {{/if}}
+            {{#if photo.amountOfTags}}
+              <FaIcon @icon='tag' />
+              {{photo.amountOfTags}}
+            {{/if}}
           </span>
         {{/if}}
         <img class='image' src='{{photo.imageThumbUrl}}' />

tests/unit/models/photo-album-test.js

@@ -0,0 +1,32 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+let album;
+let photos = [];
+
+module('Unit | Model | photo-album', function (hooks) {
+  setupTest(hooks);
+
+  hooks.beforeEach(function () {
+    const store = this.owner.lookup('service:store');
+    photos = [
+      store.createRecord('Photo'),
+      store.createRecord('Photo'),
+      store.createRecord('Photo'),
+    ];
+    album = store.createRecord('PhotoAlbum', { photos });
+  });
+
+  test('Photo count', function (assert) {
+    assert.expect(2);
+    photos[0].amountOfTags = 0;
+    photos[1].amountOfTags = 1;
+    photos[2].amountOfTags = 5;
+    assert.equal(album.amountOfPhotos, 3, 'Amount of photos is correct');
+    assert.equal(
+      album.amountOfTaggedPhotos,
+      2,
+      'Amount of tagged photos in album is correct'
+    );
+  });
+});

yarn.lock

@@ -8827,24 +8827,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000844, caniuse-lite@npm:^1.0.30001313":
-  version: 1.0.30001458
-  resolution: "caniuse-lite@npm:1.0.30001458"
-  checksum: 258cc5a25babbbfe483bf788c6f321a19400ff80b2bf156b360bac09a6f9f4da44516350d187a30395667cb142c682d9ea96577ea0df236d35f76234b07ccb41
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001449":
-  version: 1.0.30001485
-  resolution: "caniuse-lite@npm:1.0.30001485"
-  checksum: 2db8a9e5facf8df5275c96e44714a6caf3b9485813be1fe0aa5a72a7ced974137adeeed806a9a97f713d2f6d1b5c342949b88355ee0323ba35656bfa00d57fea
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001541":
-  version: 1.0.30001547
-  resolution: "caniuse-lite@npm:1.0.30001547"
-  checksum: ec0fc2b46721887f6f4aca1f3902f03d9a1a07416d16a86b7cd4bfba60e7b6b03ab3969659d3ea0158cc2f298972c80215c06c9457eb15c649d7780e8f5e91a7
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000844, caniuse-lite@npm:^1.0.30001313, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001541":
+  version: 1.0.30001668
+  resolution: "caniuse-lite@npm:1.0.30001668"
+  checksum: ce6996901b5883454a8ddb3040f82342277b6a6275876dfefcdecb11f7e472e29877f34cae47c2b674f08f2e71971dd4a2acb9bc01adfe8421b7148a7e9e8297
   languageName: node
   linkType: hard