Draft: Show articles a group has published (#775)

* add articles attribute to group model

* rework tab visibility logic a bit to allow for more readability and extensibility

* added the ability to view articles per group

* fix lint

app/components/cards/article-card.hbs

@@ -1,5 +1,5 @@
 <article
-  class='article-card {{if useMaxHeight "d-flex"}}'
+  class='article-card {{if @useMaxHeight "d-flex"}}'
   itemscope
   itemtype='https://schema.org/Article'
 >
@@ -8,54 +8,53 @@
       <img
         itemprop='image'
         class='card-img-top'
-        src={{article.coverPhotoUrlOrDefault}}
+        src={{@article.coverPhotoUrlOrDefault}}
       />
 
       <div class='card-title-bar gradient-overlay'>
         <div class='hidden-xs-down'>
           <img
-            src='{{article.avatarThumbUrlOrDefault}}'
+            src='{{@article.avatarThumbUrlOrDefault}}'
             class='profile-picture-medium profile-picture-margin'
-            alt='{{article.authorName}}'
+            alt='{{@article.authorName}}'
             height='60px'
             style='display: inline;'
           />
         </div>
-
         <div class='card-titles'>
-          <LinkTo @route='articles.article' @model={{article.id}}>
+          <LinkTo @route='articles.article' @model={{@article.id}}>
             <h2 class='card-title' itemprop='name headline'>
-              {{#if article.pinned}}<FaIcon @icon='thumbtack' />{{/if}}
-              {{article.title}}
+              {{#if @article.pinned}}<FaIcon @icon='thumbtack' />{{/if}}
+              {{@article.title}}
             </h2>
           </LinkTo>
           <h3 class='card-subtitle'>
-            {{#if article.group}}
+            {{#if @article.group}}
               <LinkTo
                 @route='groups.group'
-                @model={{article.group.id}}
+                @model={{@article.group.id}}
                 class='link-to card-subtitle-link'
               >
                 <span
                   itemprop='author'
                   itemscope
                   itemtype='https://schema.org/Person'
                 >
-                  <span itemprop='name'>{{article.authorName}}</span>
+                  <span itemprop='name'>{{@article.authorName}}</span>
                 </span>
               </LinkTo>
             {{else}}
               <LinkTo
                 @route='users.user'
-                @model={{article.author.id}}
+                @model={{@article.author.id}}
                 class='link-to card-subtitle-link'
               >
                 <span
                   itemprop='author'
                   itemscope
                   itemtype='https://schema.org/Person'
                 >
-                  <span itemprop='name'>{{article.authorName}}</span>
+                  <span itemprop='name'>{{@article.authorName}}</span>
                 </span>
               </LinkTo>
             {{/if}}
@@ -66,18 +65,18 @@
 
     <div class='card-body'>
       <p class='card-text' itemprop='articleBody'>
-        {{#if showExcerpt}}
-          {{clean-markdown article.excerpt}}
+        {{#if @showExcerpt}}
+          {{clean-markdown @article.excerpt}}
         {{else}}
           {{markdown-to-html
-            article.contentCamofied
+            @article.contentCamofied
             extensions='youtubeEmbed bootstrapTable'
           }}
         {{/if}}
       </p>
       <meta
         itemprop='dateModified'
-        content={{moment-format article.updatedAt}}
+        content={{moment-format @article.updatedAt}}
       />
       <meta
         itemprop='publisher'
@@ -90,18 +89,18 @@
     <div class='card-footer'>
       <span
         itemprop='datePublished'
-        content={{moment-format article.createdAt}}
+        content={{moment-format @article.createdAt}}
       >
-        {{moment-calendar article.createdAt}}
+        {{moment-calendar @article.createdAt}}
       </span>
       <span>
         {{t
           'component.cards.articleCard.reactions'
-          count=article.amountOfComments
+          count=@article.amountOfComments
         }}
       </span>
-      {{#if useMaxHeight}}
-        <LinkTo @route='articles.article' @model={{article.id}} itemprop='url'>
+      {{#if @useMaxHeight}}
+        <LinkTo @route='articles.article' @model={{@article.id}} itemprop='url'>
           <span class='float-md-end'><i>{{t 'tag.button.readMore'}}</i></span>
         </LinkTo>
       {{/if}}

app/components/cards/membership-card.hbs

@@ -1,19 +1,19 @@
 <div
   class='card border-0 mb-5
-    {{if administrative "administrative-membership-card"}}'
+    {{if @administrative "administrative-membership-card"}}'
   data-test-membership-card
 >
   <div class='card-header card-header--overlay'>
     <img
-      alt='{{title}}'
-      src='{{imageSource}}'
+      alt='{{@title}}'
+      src='{{@imageSource}}'
       class='card-img-rounded'
       height='250px'
     />
     <div class='card-title-bar gradient-overlay-rounded'>
       <div class='card-titles'>
-        <h2 class='card-title'>{{title}}</h2>
-        <h3 class='card-subtitle'>{{subtitle}}</h3>
+        <h2 class='card-title'>{{@title}}</h2>
+        <h3 class='card-subtitle'>{{@subtitle}}</h3>
         {{yield}}
       </div>
     </div>

app/controllers/application/group-memberships.js

@@ -5,21 +5,30 @@ import moment from 'moment';
 import { tracked } from '@glimmer/tracking';
 
 export default class GroupMembershipsController extends Controller {
+  currentMembershipsTab = 'currentMemberships';
+  oldMembershipsTab = 'oldMemberships';
   @tracked sortedAttribute = null;
+  @tracked filterableAttributes = null;
   @tracked sortedAscending = true;
-
   @tracked filter = '';
-  @tracked oldMembershipsAreVisible = false;
+  @tracked selectedTab = this.currentMembershipsTab;
 
   get models() {
     return this.model.memberships;
   }
 
+  get selectedModels() {
+    if (this.currentMembershipsSelected) {
+      return this.currentMemberships;
+    }
+    if (this.oldMembershipsSelected) {
+      return this.oldMemberships;
+    }
+    return [];
+  }
+
   get filteredModels() {
-    const records = this.oldMembershipsAreVisible
-      ? this.oldMemberships
-      : this.currentMemberships;
-    return this.sortModels(this.filterModels(records));
+    return this.sortModels(this.filterModels(this.selectedModels));
   }
 
   get oldMemberships() {
@@ -34,26 +43,30 @@ export default class GroupMembershipsController extends Controller {
     );
   }
 
-  get oldMembershipsTabActive() {
-    return this.oldMembershipsAreVisible
-      ? !(
-          this.oldMemberships.length === 0 && this.currentMemberships.length > 0
-        )
-      : this.currentMemberships.length === 0 && this.oldMemberships.length > 0;
+  get currentMembershipsExist() {
+    return this.currentMemberships.length > 0;
+  }
+
+  get oldMembershipsExist() {
+    return this.oldMemberships.length > 0;
+  }
+
+  get currentMembershipsSelected() {
+    return this.selectedTab === this.currentMembershipsTab;
+  }
+
+  get oldMembershipsSelected() {
+    return this.selectedTab === this.oldMembershipsTab;
   }
 
   @action
-  showOldMemberships() {
-    if (this.oldMemberships.length > 0) {
-      this.oldMembershipsAreVisible = true;
-    }
+  selectOldMemberships() {
+    this.selectedTab = this.oldMembershipsTab;
   }
 
   @action
-  hideOldMemberships() {
-    if (this.currentMemberships.length > 0) {
-      this.oldMembershipsAreVisible = false;
-    }
+  selectCurrentMemberships() {
+    this.selectedTab = this.currentMembershipsTab;
   }
 
   @action

app/controllers/groups/group/index.js

@@ -4,7 +4,6 @@ import { tracked } from '@glimmer/tracking';
 
 export default class GroupIndexController extends GroupMembershipsController {
   @tracked sortedAttribute = 'user.firstName';
-
   filterableAttributes = ['user.username', 'user.fullName', 'function'];
   sortableAttributes = [
     {

app/models/group.js

@@ -17,6 +17,7 @@ export default class Group extends Model {
   // Relations
   @hasMany memberships;
   @hasMany permissions;
+  @hasMany articles;
   @hasMany({ inverse: 'group' }) mailAliases;
   @hasMany('mail-alias', { inverse: 'moderatorGroup' }) moderatorForMailAliases;
 

app/templates/articles/index.hbs

@@ -15,10 +15,10 @@
 </EmberWormhole>
 
 <div class='row'>
-  {{#each model as |article|}}
+  {{#each @model as |article|}}
     <div class='article-col col-md-6'>
       <LinkTo @route='articles.article' @model={{article.id}}>
-        {{cards/article-card article showExcerpt=true useMaxHeight=true}}
+        <Cards::ArticleCard @article={{article}} @showExcerpt={{true}} @useMaxHeight={{true}}/>
       </LinkTo>
     </div>
   {{/each}}

app/templates/groups/group/index.hbs

@@ -46,19 +46,19 @@
                 <li class='nav-item'>
                   <a
                     class='nav-link
-                      {{unless oldMembershipsTabActive "active"}}
-                      {{if (eq currentMemberships.length 0) "disabled"}}'
-                    {{action 'hideOldMemberships'}}
+                      {{if this.currentMembershipsSelected "active"}}
+                      {{if (not this.currentMembershipsExist) "disabled"}}'
+                    {{action 'selectCurrentMemberships'}}
                   >
                     Leden
                   </a>
                 </li>
                 <li class='nav-item'>
                   <a
                     class='nav-link
-                      {{if oldMembershipsTabActive "active"}}
-                      {{if (eq oldMemberships.length 0) "disabled"}}'
-                    {{action 'showOldMemberships'}}
+                      {{if this.oldMembershipsSelected "active"}}
+                      {{if (not this.oldMembershipsExist) "disabled"}}'
+                    {{action 'selectOldMemberships'}}
                   >
                     Oud-leden
                   </a>
@@ -81,7 +81,7 @@
           </div>
         </div>
         <div class='card-body'>
-          <div class='row userlist'>
+          <div class='row'>
             {{#each filteredModels as |membership|}}
               <LinkTo
                 @route='users.user'
@@ -116,6 +116,35 @@
   </div>
 {{/if}}
 
+{{#if (and (can 'show articles') @model.articles)}}
+  <div class="row">
+    <div class="col-12">
+      <div class="card">
+        <div class="card-header">
+          <div class="row">
+            <div class="col">
+              <h5>Artikelen gepubliceerd door {{@model.name}}</h5>
+            </div>
+          </div>
+        </div>
+        <div class="card-body">
+          <div class="row">
+            {{#each @model.articles as |article|}}
+              <LinkTo
+                @route='articles.article'
+                @model="{{article.id}}"
+                class="col-6 col-sm-4 col-md-3"
+              >
+                <Cards::ArticleCard @article={{article}} @showExcerpt={{true}}/>
+              </LinkTo>
+            {{/each}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{{/if}}
+
 {{#if (and (can 'show mail-aliases') @model.mailAliases)}}
   <div class='row'>
     <div class='col-sm-12'>

app/templates/users/user/groups.hbs

@@ -9,19 +9,19 @@
         <li class='nav-item'>
           <a
             class='nav-link
-              {{unless oldMembershipsTabActive "active"}}
-              {{if (eq currentMemberships.length 0) "disabled"}}'
-            {{action 'hideOldMemberships'}}
+              {{if this.currentMembershipsSelected "active"}}
+              {{if (not this.currentmembershipsExist) "disabled"}}'
+            {{action 'selectCurrentMemberships'}}
           >
             Huidige groepen
           </a>
         </li>
         <li class='nav-item'>
           <a
             class='nav-link
-              {{if oldMembershipsTabActive "active"}}
-              {{if (eq oldMemberships.length 0) "disabled"}}'
-            {{action 'showOldMemberships'}}
+              {{if this.oldMembershipsSelected "active"}}
+              {{if (not this.oldMembershipsExist) "disabled"}}'
+            {{action 'selectOldMemberships'}}
           >
             Voorheen
           </a>