From 1d7c9a52327b81a2a859100b8727025a8ea1a8b5 Mon Sep 17 00:00:00 2001
From: Vincent Hardouin <vincent.hardouin@pix.fr>
Date: Fri, 13 Dec 2024 12:29:56 +0100
Subject: [PATCH] feat: add filter wip

---
 orga/app/components/statistics/index.gjs   | 32 ++++++++++++++++++++++
 orga/app/styles/components/statistics.scss | 22 +++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/orga/app/components/statistics/index.gjs b/orga/app/components/statistics/index.gjs
index 51d461d76e2..acaeeb87072 100644
--- a/orga/app/components/statistics/index.gjs
+++ b/orga/app/components/statistics/index.gjs
@@ -1,7 +1,11 @@
 import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { t } from 'ember-intl';
+import { eq } from 'ember-truth-helpers';
 
 import Header from '../table/header';
 import CoverRateGauge from './cover-rate-gauge';
@@ -10,6 +14,8 @@ import TagLevel from './tag-level';
 export default class Statistics extends Component {
   @service router;
 
+  @tracked currentDomainFilter = null;
+
   get analysisByTubes() {
     return this.args.model.data.sort(
       (a, b) => a.competence_code.localeCompare(b.competence_code) || a.sujet.localeCompare(b.sujet),
@@ -36,6 +42,9 @@ export default class Statistics extends Component {
   get visibleAnalysisByTubes() {
     const start = this.pageSize * (this.page - 1);
     const end = this.pageSize * this.page;
+    if (this.currentDomainFilter !== null) {
+      return this.analysisByDomains[this.currentDomainFilter].slice(start, end);
+    }
     return this.analysisByTubes.slice(start, end);
   }
 
@@ -55,11 +64,34 @@ export default class Statistics extends Component {
     return Object.keys(this.analysisByDomains);
   }
 
+  handleDomainFilter = (domain) => {
+    if (this.currentDomainFilter === null) {
+      this.currentDomainFilter = domain;
+    } else if (this.currentDomainFilter === domain) {
+      this.currentDomainFilter = null;
+    } else {
+      this.currentDomainFilter = domain;
+    }
+  };
+
   <template>
     <div class="statistics-page__header">
       <h1 class="page-title">{{t "pages.statistics.title"}}</h1>
     </div>
 
+    <section class="statistics-page__filter panel">
+      <div class="tabs">
+        {{#each this.domainsName as |domain|}}
+          <button
+            class="navbar-item {{if (eq this.currentDomainFilter domain) 'active' ''}}"
+            {{on "click" (fn this.handleDomainFilter domain)}}
+          >
+            {{domain}}
+          </button>
+        {{/each}}
+      </div>
+    </section>
+
     <section class="statistics-page__section">
       <table class="panel">
         <caption class="screen-reader-only">{{t "pages.statistics.table.caption"}}</caption>
diff --git a/orga/app/styles/components/statistics.scss b/orga/app/styles/components/statistics.scss
index 77f0199dab3..65dddea2f93 100644
--- a/orga/app/styles/components/statistics.scss
+++ b/orga/app/styles/components/statistics.scss
@@ -12,3 +12,25 @@
     }
   }
 }
+
+.statistics-page__filter {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 60px;
+  padding: 0 8px;
+  border: none;
+
+  & .navbar-item {
+    height: 60px;
+  }
+}
+
+.tabs {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 60px;
+  padding: 0 8px;
+  border: none;
+}