Display DF

components/dotations/results/commune-strate-details/commune-strate-details-table/CommuneStrateDetailsTable.module.scss

@@ -68,13 +68,13 @@
 }
 
 
-.dsr {
+.oneline {
   tr:nth-child(odd) {
     background-color: $light-grey-bg-color;
   }
 }
 
-.dsrAndDsu {
+.twolines {
   tr:nth-child(4n+2) {
     background-color: $light-grey-bg-color;
   }  
@@ -83,3 +83,16 @@
     background-color: $light-grey-bg-color;
   }  
 }
+
+.threelines {
+  tr:nth-child(6n+3) {
+    background-color: $light-grey-bg-color;
+  }  
+  tr:nth-child(6n+2) {
+    background-color: $light-grey-bg-color;
+  }  
+  
+  tr:nth-child(6n+1) {
+    background-color: $light-grey-bg-color;
+  }  
+}
\ No newline at end of file

components/dotations/results/commune-strate-details/commune-strate-details-table/CommuneStrateDetailsTable.tsx

 import CircularProgress from "@material-ui/core/CircularProgress";
+import BusinessCenterIcon from "@material-ui/icons/BusinessCenter";
 import LocalFloristIcon from "@material-ui/icons/LocalFlorist";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
 import { Fragment, PureComponent } from "react";
@@ -30,11 +31,25 @@ type Props = PropsFromRedux & {
 
 }
 
+function getClassName(n: number): string {
+  if (n === 1) {
+    return styles.oneline;
+  }
+  if (n === 2) {
+    return styles.twolines;
+  }
+  if (n === 3) {
+    return styles.threelines;
+  }
+  throw new Error("Unexpected number");
+}
+
 class CommuneStrateDetailsTable extends PureComponent<Props> {
   render() {
     const { isFetching, strates } = this.props;
     const url = new URLSearchParams(window.location.search);
     const isDsuVisible = url.has("dsu");
+    const isDfVisible = url.has("df");
     return (
       <div className={styles.container}>
         <table className={styles.table}>
@@ -66,12 +81,12 @@ class CommuneStrateDetailsTable extends PureComponent<Props> {
             </tr>
           </thead>
           {!isFetching && (
-            <tbody className={isDsuVisible ? styles.dsrAndDsu : styles.dsr}>
+            <tbody className={getClassName(1 + Number(isDsuVisible) + Number(isDfVisible))}>
               {
                 strates.map((strate, index) => (
                   <Fragment>
-                    <tr key={strate.description.habitants * 2}>
-                      <th rowSpan={isDsuVisible ? 2 : 1} scope="row">
+                    <tr key={strate.description.habitants * 3}>
+                      <th rowSpan={1 + Number(isDsuVisible) + Number(isDfVisible)} scope="row">
                         {
                           strate.description.habitants === -1 ? (
                             <Fragment>
@@ -88,15 +103,15 @@ class CommuneStrateDetailsTable extends PureComponent<Props> {
                         }
 
                       </th>
-                      <td rowSpan={isDsuVisible ? 2 : 1}>
+                      <td rowSpan={1 + Number(isDsuVisible) + Number(isDfVisible)}>
                         <TrendArrow value={strate.baseToAmendement?.diffDotationMoyenneParHab} />
                       </td>
-                      <td className={styles.light} rowSpan={isDsuVisible ? 2 : 1}>
+                      <td className={styles.light} rowSpan={1 + Number(isDsuVisible) + Number(isDfVisible)}>
                         {formatNumber(strate.description.partPopTotale, { decimals: 0 })}
                         {" "}
                         %
                       </td>
-                      <td className={styles.light} rowSpan={isDsuVisible ? 2 : 1}>
+                      <td className={styles.light} rowSpan={1 + Number(isDsuVisible) + Number(isDfVisible)}>
                         {formatNumber(
                           strate.description.potentielFinancierMoyenParHab,
                           { decimals: 2 },
@@ -126,7 +141,7 @@ class CommuneStrateDetailsTable extends PureComponent<Props> {
                     </tr>
                     {
                       isDsuVisible && (
-                        <tr key={strate.description.habitants * 2 + 1}>
+                        <tr key={strate.description.habitants * 3 + 1}>
                           <td>
                             <LocationCityIcon />
                           </td>
@@ -151,6 +166,32 @@ class CommuneStrateDetailsTable extends PureComponent<Props> {
                         </tr>
                       )
                     }
+                    {
+                      isDfVisible && (
+                        <tr key={strate.description.habitants * 3 + 2}>
+                          <td>
+                            <BusinessCenterIcon />
+                          </td>
+                          <td>
+                            toutes
+                          </td>
+                          <td>
+                            <ResultValues
+                              decimals={2}
+                              path={`dotations.state.communes.df.strates.${index}.dotationMoyenneParHab`} />
+                            {" "}
+                            €
+                          </td>
+                          <td>
+                            <ResultValues
+                              decimals={0}
+                              path={`dotations.state.communes.df.strates.${index}.partDotationTotale`} />
+                            {" "}
+                            %
+                          </td>
+                        </tr>
+                      )
+                    }
                   </Fragment>
                 ))
               }

components/dotations/results/commune-type/CommuneType.tsx

 import CircularProgress from "@material-ui/core/CircularProgress";
+import BusinessCenterIcon from "@material-ui/icons/BusinessCenter";
 import LocalFloristIcon from "@material-ui/icons/LocalFlorist";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
 import { Fragment, PureComponent } from "react";
@@ -44,6 +45,7 @@ class CommuneType extends PureComponent<Props> {
     } = this.props;
     const url = new URLSearchParams(window.location.search);
     const isDsuVisible = url.has("dsu");
+    const isDfVisible = url.has("df");
     return (
       <Card
         colored
@@ -96,6 +98,22 @@ class CommuneType extends PureComponent<Props> {
                     </div>
                   </div>
                 )}
+                {isDfVisible && (
+                  <div className={styles.dotation}>
+                    <div className={styles.icons}>
+                      <div>
+                        <BusinessCenterIcon />
+                      </div>
+                      <div>
+                        <DotationDiff dotation="df" index={index} />
+                      </div>
+                      <div />
+                    </div>
+                    <div className={styles.text}>
+                      <DotationParHab dotation="df" index={index} />
+                    </div>
+                  </div>
+                )}
               </Fragment>
             )}
         subTitle={departement}

pages/dotations.tsx

@@ -53,7 +53,7 @@ class DotationPage extends PureComponent<PropsFromRedux> {
           showLoginButton={false}
           subTitle1="Dotations"
           subTitle2="Communes"
-          title="DSR & DSU"
+          title="DGF"
           topic="dotations"
         />
         <PopinManager />