Add content to SOG page (#878)

* Add content to SOG page

* Lint

app/routes/sog/index.js

@@ -7,7 +7,16 @@ export default class SogIndexRoute extends ApplicationRoute {
     return this.abilities.can('show sog');
   }
 
-  model() {
-    return [];
+  async model() {
+    /* eslint-disable camelcase */
+    let photoAlbumsWithoutTags = await this.store.query('photo-album', {
+      sort: '-date',
+      filter: { without_photo_tags: true },
+      page: { number: '1', size: 4 },
+    });
+    /* eslint-enable camelcase */
+    return {
+      photoAlbumsWithoutTags,
+    };
   }
 }

app/styles/app.scss

@@ -17,6 +17,7 @@
 @import 'components/flash-notice';
 @import 'components/forum/forum-post';
 @import 'components/footer';
+@import 'components/list-group';
 @import 'components/md-editor';
 @import 'components/menu-sidebar';
 @import 'components/navbar';

app/styles/components/list-group.scss

@@ -0,0 +1,8 @@
+.list-group-item:not(:first-child), a:not(:first-child) > .list-group-item {
+    border-top: 0;
+}
+
+.list-group-flush .list-group-item {
+    border-right: 0;
+    border-left: 0;
+}

app/templates/sog/index.hbs

@@ -17,4 +17,63 @@
       </LinkTo>
     </div>
   </div>
+{{/if}}
+
+{{#if (can 'create photo-tag')}}
+  <div class='card'>
+    <div class='card-body'>
+      <h2 class='card-title'>Foto's taggen</h2>
+      <p class='card-text'>
+        Help jij mee om &aacute;lle foto's te taggen? Zoek een album of foto op zonder tags en tag wie er op de foto staan! Je kan ook een van de onderstaande albums bekijken, deze albums hebben momenteel geen enkele foto met tags.
+      </p>
+    </div>
+    <ul class='list-group list-group-flush mt-2'>
+      {{#each this.model.photoAlbumsWithoutTags as |album|}}
+        <LinkTo @route='photo-albums.photo-album' @model={{album.id}}>
+          <li class='list-group-item'>{{album.title}}</li>
+        </LinkTo>
+      {{else}}
+        <li class='list-group-item'>
+          <i>Alle albums bevatten al foto's met tags. Bekijk zelf of er nog foto's zijn in albums die nog tags missen!</i>
+        </li>
+      {{/each}}
+    </ul>
+    <div class='card-footer text-end'>
+      <LinkTo @route='photo-albums.index' class='btn btn-primary'>
+        Begin met taggen!
+      </LinkTo>
+    </div>
+  </div>
+{{/if}}
+
+{{#if (can 'show books')}}
+  <div class='card'>
+    <div class='card-body'>
+      <h2 class='card-title'>Leen een boek</h2>
+      <p class='card-text'>
+        Geen zin in je studie maar wil je toch wat nuttigs doen? Leen een boek uit de bibliotheek in de bestuurskamer! 
+      </p>
+    </div>
+    <div class='card-footer text-end'>
+      <LinkTo @route='books.index' class='btn btn-primary'>
+        Bekijk alle boeken!
+      </LinkTo>
+    </div>
+  </div>
+{{/if}}
+
+{{#if (can 'show forum/categories')}}
+  <div class='card'>
+    <div class='card-body'>
+      <h2 class='card-title'>Lees of schrijf op het forum</h2>
+      <p class='card-text'>
+        Neem deel aan het juffen op het forum, bekijk wat uw medeleden gezegd hebben op het grote quote topic, of start uw eigen topic!
+      </p>
+    </div>
+    <div class='card-footer text-end'>
+      <LinkTo @route='forum.categories' class='btn btn-primary'>
+        Bekijk het forum!
+      </LinkTo>
+    </div>
+  </div>
 {{/if}}