rework tab visibility logic a bit to allow for more readability and e…

…xtensibility
csvalpha · Nov 14, 2023 · 2dccf1a · 2dccf1a
1 parent ec10806
commit 2dccf1a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 31 deletions.
diff --git a/app/controllers/application/group-memberships.js b/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 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

diff --git a/app/templates/groups/group/index.hbs b/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>

diff --git a/app/templates/users/user/groups.hbs b/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>