feat: score completion field presence

Author: abelkhay

src/features/cartographie/components/lieux-mediation-numerique-details/score-completion/score-completion.component.html

@@ -1,9 +1,9 @@
-<small>
+<small class="mx-1">
   <span role="img" class="ri-numbers-fill ri-xl text-primary" aria-hidden="true"></span>
   Cette fiche est remplie à
   <span class="text-primary fw-bold">{{ scoreCompletion(lieuMediationNumerique) }}%</span>
 </small>
-<div class="progress my-2">
+<div class="progress my-2 mx-1">
   <div
     class="progress-bar"
     role="progressbar"
@@ -13,4 +13,37 @@
     aria-valuemin="0"
     aria-valuemax="100"></div>
 </div>
-<small class="text-primary">Vous pouvez mettre à jour ces informations en suivant les informations en bas de la fiche.</small>
+<small class="text-primary mx-1">
+  Vous pouvez mettre à jour ces informations en suivant les informations en bas de la fiche.
+</small>
+<app-collapse #collapseScoreCompletion [control]="collapseScoreCompletionControl" aria-labelledby="headingAccesLibre">
+  <table class="table">
+    <tbody class="table-group">
+      <tr
+        [ngClass]="field.presence ? 'border-primary' : 'border-dark'"
+        *ngFor="let field of sortScoreCompletionPresence(scoreCompletionPresence(lieuMediationNumerique))">
+        <th scope="row" class="text-start fw-bold w-100">
+          <small class="fw-bold" [ngClass]="field.presence ? 'text-primary' : 'text-dark'">{{ field.name }}</small>
+        </th>
+        <td class="text-end fw-bold">
+          <small class="fw-bold" [ngClass]="field.presence ? 'text-primary' : 'text-dark'">
+            <span *ngIf="field.presence" role="img" class="ri-check-line ri-xl text-primary" aria-hidden="true"></span>
+            <span *ngIf="!field.presence" role="img" class="ri-close-line ri-xl text-dark" aria-hidden="true"></span>
+          </small>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</app-collapse>
+<div class="d-flex justify-content-end">
+  <button
+    class="btn btn-link text-body fw-bold p-0"
+    #collapseScoreCompletionControl
+    aria-controls="collapseScoreCompletion"
+    type="button"
+    [class.collapsed]="collapseScoreCompletion.isCollapsed$ | async"
+    [attr.aria-expanded]="collapseScoreCompletion.isExpanded$ | async"
+    (click)="collapseScoreCompletion.toggle()">
+    <small class="text-right">{{ (collapseScoreCompletion.isCollapsed$ | async) ? 'Détails' : 'Réduire' }}</small>
+  </button>
+</div>

src/features/cartographie/components/lieux-mediation-numerique-details/score-completion/score-completion.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { scoreCompletion } from './score-completion.presenter';
+import { scoreCompletionPresence, scoreCompletion } from './score-completion.presenter';
 import { LieuMediationNumeriqueDetailsPresentation } from '@features/cartographie/presenters';
+import { ScorePresence } from './score-completion.presentation';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11,4 +12,9 @@ export class ScoreCompletionComponent {
   @Input() public lieuMediationNumerique!: LieuMediationNumeriqueDetailsPresentation;
 
   public scoreCompletion = scoreCompletion;
+  public scoreCompletionPresence = scoreCompletionPresence;
+
+  public sortScoreCompletionPresence(scorePresence: ScorePresence[]): ScorePresence[] {
+    return scorePresence.sort((a, b) => Number(b.presence) - Number(a.presence));
+  }
 }

src/features/cartographie/components/lieux-mediation-numerique-details/score-completion/score-completion.presentation.ts

@@ -1,55 +1,64 @@
 export const TOTAL_SCORE_COMPLETION: number = 41;
 
-type Score = number;
+export type ScoreDetail = {
+  score: number;
+  name: string;
+};
+
+export type ScorePresence = {
+  name: string;
+  presence: boolean;
+};
 
 type ScoreCompletion = {
-  [key: string]: Score | ScoreContact | ScorePresentation | ScoreLocalisation;
+  [key: string]: ScoreDetail | ScoreContact | ScorePresentation | ScoreLocalisation;
 };
 
 type ScoreContact = {
-  telephone: Score;
-  courriel: Score;
-  site_web: Score;
+  telephone: ScoreDetail;
+  courriel: ScoreDetail;
+  site_web: ScoreDetail;
 };
 
 type ScorePresentation = {
-  presentation_detail: Score;
-  presentation_resume: Score;
+  presentation_detail: ScoreDetail;
+  presentation_resume: ScoreDetail;
 };
 
 type ScoreLocalisation = {
-  latitude: Score;
-  longitude: Score;
+  latitude: ScoreDetail;
+  longitude: ScoreDetail;
 };
 
 export const scoreCompletionTable: ScoreCompletion = {
-  nom: 2,
-  adresse: 2,
-  commune: 2,
-  code_postal: 2,
-  services: 2,
-  horaires: 2,
-  typologies: 2,
+  nom: { score: 2, name: 'Nom' },
+  adresse: { score: 2, name: 'Adresse' },
+  commune: { score: 2, name: 'Commune' },
+  code_postal: { score: 2, name: 'Code postal' },
+  services: { score: 2, name: 'Services' },
+  horaires: { score: 2, name: 'Horaires' },
+  typologies: { score: 2, name: 'Typologie' },
   contact: {
-    telephone: 2,
-    courriel: 2,
-    site_web: 2
+    telephone: { score: 2, name: 'Téléphone' },
+    courriel: { score: 2, name: 'Courriel' },
+    site_web: { score: 2, name: 'Site web' }
   },
   presentation: {
-    presentation_detail: 2,
-    presentation_resume: 2
+    presentation_detail: { score: 2, name: 'Présentation détaillée' },
+    presentation_resume: { score: 2, name: 'Présentation résumée' }
   },
-  date_maj: 2,
-  publics_accueillis: 2,
-  conditions_acces: 2,
-  labels_nationaux: 2,
-  modalites_accompagnement: 2,
-  accessibilite: 1,
+  date_maj: { score: 2, name: 'Date de mise à jour' },
+  publics_accueillis: { score: 2, name: 'Publics accueillis' },
+  conditions_acces: { score: 2, name: 'Conditions d’accès' },
+  labels_nationaux: { score: 2, name: 'Label nationaux' },
+  autres_labels: { score: 2, name: 'Autres labels' },
+  modalites_accompagnement: { score: 2, name: 'Modalités d’accompagnement' },
+  accessibilite: { score: 1, name: 'Accessibilité' },
   localisation: {
-    latitude: 1,
-    longitude: 1
+    latitude: { score: 1, name: 'Latitude' },
+    longitude: { score: 1, name: 'Longitude' }
   },
-  prise_rdv: 1,
-  source: 1,
-  pivot: 2
+  prise_rdv: { score: 1, name: 'Prise de RDV' },
+  source: { score: 1, name: 'Source' },
+  pivot: { score: 2, name: 'Pivot' }
 };

src/features/cartographie/components/lieux-mediation-numerique-details/score-completion/score-completion.presenter.ts

@@ -1,5 +1,7 @@
 import { LieuMediationNumeriqueDetailsPresentation } from '../../../../cartographie/presenters';
-import { TOTAL_SCORE_COMPLETION, scoreCompletionTable } from './score-completion.presentation';
+import { ScoreDetail, ScorePresence, TOTAL_SCORE_COMPLETION, scoreCompletionTable } from './score-completion.presentation';
+
+const NESTED_FIELDS: string[] = ['contact', 'presentation', 'localisation'];
 
 const calculateNestedFieldScore = (
   nestedFieldName: string,
@@ -9,24 +11,54 @@ const calculateNestedFieldScore = (
   const nestedFieldValue = lieuMediationNumerique[nestedFieldName as keyof LieuMediationNumeriqueDetailsPresentation];
   Object.entries(scoreCompletionTable[nestedFieldName]).forEach(([key, value]) => {
     if (nestedFieldValue && nestedFieldValue.hasOwnProperty(key)) {
-      nestedScore += value;
+      nestedScore += value.score;
     }
   });
   return nestedScore;
 };
 
 export const scoreCompletion = (lieuMediationNumerique: LieuMediationNumeriqueDetailsPresentation): number => {
-  const nestedFields: string[] = ['contact', 'presentation', 'localisation'];
-
   const scoreSimpleField: number = Object.keys(scoreCompletionTable)
-    .filter((field) => !nestedFields.includes(field) && lieuMediationNumerique.hasOwnProperty(field))
-    .reduce((score, curr) => score + (scoreCompletionTable[curr] as number), 0);
+    .filter((field) => !NESTED_FIELDS.includes(field) && lieuMediationNumerique.hasOwnProperty(field))
+    .reduce((score, curr) => score + (scoreCompletionTable[curr] as ScoreDetail).score, 0);
 
-  const scoreNestedField: number = nestedFields.reduce(
+  const scoreNestedField: number = NESTED_FIELDS.reduce(
     (score, nestedField) => score + calculateNestedFieldScore(nestedField, lieuMediationNumerique),
     0
   );
 
   const scoreCompletionPercent: number = ((scoreSimpleField + scoreNestedField) / TOTAL_SCORE_COMPLETION) * 100;
   return Math.round(scoreCompletionPercent);
 };
+
+export const scoreCompletionPresence = (lieuMediationNumerique: LieuMediationNumeriqueDetailsPresentation): ScorePresence[] => {
+  const fieldPresence: ScorePresence[] = [];
+
+  Object.keys(scoreCompletionTable).forEach((field) => {
+    if (!NESTED_FIELDS.includes(field)) {
+      fieldPresence.push({
+        name: (scoreCompletionTable[field] as ScoreDetail).name,
+        presence: lieuMediationNumerique.hasOwnProperty(field)
+      });
+    }
+  });
+
+  const nestedFieldsPresence = (
+    nestedFieldName: string,
+    lieuMediationNumerique: LieuMediationNumeriqueDetailsPresentation
+  ): void => {
+    const nestedFieldValue = lieuMediationNumerique[nestedFieldName as keyof LieuMediationNumeriqueDetailsPresentation] || {};
+    Object.keys(scoreCompletionTable[nestedFieldName]).forEach((key) => {
+      fieldPresence.push({
+        name: (scoreCompletionTable[nestedFieldName] as Record<string, ScoreDetail>)[key].name,
+        presence: nestedFieldValue.hasOwnProperty(key)
+      });
+    });
+  };
+
+  NESTED_FIELDS.forEach((nestedField) => {
+    nestedFieldsPresence(nestedField, lieuMediationNumerique);
+  });
+
+  return fieldPresence;
+};