feat: ajout traitement dans les frises

SocialGouv · May 17, 2022 · 9a38bd3 · 9a38bd3
1 parent b8745bf
commit 9a38bd3
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 19 deletions.
diff --git a/assets/svg/drugs.svg b/assets/svg/drugs.svg
diff --git a/src/scenes/suivi/chartFrise.js b/src/scenes/suivi/chartFrise.js
@@ -13,7 +13,7 @@ import localStorage from "../../utils/localStorage";
 import logEvents from "../../services/logEvents";
 import Button from "../../components/Button";
 
-const ChartFrise = ({ navigation, fromDate, toDate, focusedScores }) => {
+const ChartFrise = ({ navigation, fromDate, toDate, focusedScores, showTraitement }) => {
   const [diaryData] = React.useContext(DiaryDataContext);
   const [activeCategories, setActiveCategories] = React.useState();
   const [isEmpty, setIsEmpty] = React.useState();
@@ -87,7 +87,7 @@ const ChartFrise = ({ navigation, fromDate, toDate, focusedScores }) => {
       if (!categoryState) {
         return {};
       }
-      if (categoryState?.value) return categoryState;
+      if (categoryState?.value !== null || categoryState?.value !== undefined) return categoryState;
 
       // -------
       // the following code is for the retrocompatibility
@@ -128,13 +128,23 @@ const ChartFrise = ({ navigation, fromDate, toDate, focusedScores }) => {
           title={getTitle(categoryId)}
           key={categoryId}
           data={computeChartData(categoryId)}
+          showTraitement={showTraitement}
+          priseDeTraitement={computeChartData("PRISE_DE_TRAITEMENT")}
+          priseDeTraitementSiBesoin={computeChartData("PRISE_DE_TRAITEMENT_SI_BESOIN")}
         />
       ))}
     </ScrollView>
   );
 };
 
-const Frise = ({ title, data, focusedScores }) => {
+const Frise = ({
+  title,
+  data,
+  focusedScores,
+  showTraitement,
+  priseDeTraitement,
+  priseDeTraitementSiBesoin,
+}) => {
   return (
     <View style={styles.friseContainer}>
       <Text style={styles.friseTitle}>{title}</Text>
@@ -148,7 +158,11 @@ const Frise = ({ title, data, focusedScores }) => {
             opacity = e?.value ? 0.1 : 0.5; // on reduit moins l'opacité si c'est une frise vide
           }
 
-          const isFocused = e?.value && focusedScores.length && focusedScores.includes(e?.value);
+          const isFocused =
+            e?.value &&
+            focusedScores.length > 0 &&
+            focusedScores.length < 5 &&
+            focusedScores.includes(e?.value);
 
           const shadow = isFocused
             ? {
@@ -199,6 +213,56 @@ const Frise = ({ title, data, focusedScores }) => {
           );
         })}
       </View>
+      {showTraitement ? (
+        <View style={styles.squareContainerTraitement}>
+          {priseDeTraitement?.map((e, i) => {
+            let color = "#D7D3D3";
+            if (e?.value === true) color = "#5956E8";
+            if (e?.value === false) color = "#E575F8";
+
+            const firstSquare = i === 0;
+            const lastSquare = i === data.length - 1;
+            return (
+              <View key={`${title}-${i}`} style={styles.squareItemContainerTraitement}>
+                <View
+                  style={[
+                    styles.square,
+                    // eslint-disable-next-line react-native/no-inline-styles
+                    {
+                      backgroundColor: color,
+                      borderBottomStartRadius: firstSquare ? 5 : 0,
+                      borderTopStartRadius: firstSquare ? 5 : 0,
+                      borderBottomEndRadius: lastSquare ? 5 : 0,
+                      borderTopEndRadius: lastSquare ? 5 : 0,
+                    },
+                  ]}
+                />
+              </View>
+            );
+          })}
+        </View>
+      ) : null}
+      {showTraitement ? (
+        <View style={styles.squareContainerTraitement}>
+          {priseDeTraitementSiBesoin?.map((e, i) => {
+            let color = "#5956E8";
+            if (e?.value !== true) color = "transparent";
+            return (
+              <View key={`${title}-${i}`} style={styles.squareItemContainerTraitementSiBesoin}>
+                <View
+                  style={[
+                    styles.dot,
+                    // eslint-disable-next-line react-native/no-inline-styles
+                    {
+                      backgroundColor: color,
+                    },
+                  ]}
+                />
+              </View>
+            );
+          })}
+        </View>
+      ) : null}
     </View>
   );
 };
@@ -219,9 +283,14 @@ const styles = StyleSheet.create({
     fontSize: 19,
     color: colors.BLUE,
     fontWeight: "600",
+    marginBottom: 5,
   },
   squareContainer: {
-    marginVertical: 5,
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  squareContainerTraitement: {
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
@@ -231,10 +300,30 @@ const styles = StyleSheet.create({
     flex: 1,
     height: 10,
   },
+  squareItemContainerTraitement: {
+    marginTop: 5,
+    display: "flex",
+    flex: 1,
+    height: 4,
+  },
+  squareItemContainerTraitementSiBesoin: {
+    marginTop: 5,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flex: 1,
+    height: 4,
+  },
   square: {
     flex: 1,
     height: 10,
   },
+  dot: {
+    flex: 1,
+    height: 4,
+    width: 4,
+    borderRadius: 2,
+  },
   legend: {
     display: "flex",
     flexDirection: "row",

diff --git a/src/scenes/suivi/index.js b/src/scenes/suivi/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { SafeAreaView, ScrollView, StyleSheet, View, Dimensions } from "react-native";
+import { SafeAreaView, ScrollView, StyleSheet, View, Dimensions, TouchableOpacity } from "react-native";
 import { useFocusEffect } from "@react-navigation/native";
 
 import { beforeToday } from "../../utils/date/helpers";
@@ -12,6 +12,8 @@ import ChartPie from "./chartPie";
 import Evenements from "./events";
 import Courbes from "../calendar/calendar";
 import logEvents from "../../services/logEvents";
+import { colors } from "../../utils/colors";
+import Icon from "../../components/Icon";
 
 const screenHeight = Dimensions.get("window").height;
 const CHART_TYPES = ["Frises", "Statistiques", "Courbes", "Analyse des notes"];
@@ -32,6 +34,7 @@ const Suivi = ({ navigation, setPlusVisible }) => {
   const [fromDate, setFromDate] = React.useState(beforeToday(30));
   const [toDate, setToDate] = React.useState(beforeToday(0));
   const [focusedScores, setFocusedScores] = React.useState([1, 2, 3, 4, 5]);
+  const [showTraitement, setShowTraitement] = React.useState(true);
 
   useFocusEffect(
     React.useCallback(() => {
@@ -58,6 +61,7 @@ const Suivi = ({ navigation, setPlusVisible }) => {
             fromDate={fromDate}
             toDate={toDate}
             focusedScores={focusedScores}
+            showTraitement={showTraitement}
           />
         );
     }
@@ -81,18 +85,32 @@ const Suivi = ({ navigation, setPlusVisible }) => {
           />
         ) : null}
         {chartType === "Frises" ? (
-          <ScorePicker
-            focusedScores={focusedScores}
-            onPress={(i) => {
-              if (focusedScores.includes(i)) {
-                setFocusedScores((e) => e.filter((x) => x !== i));
-              } else {
-                setFocusedScores((e) => [...e, i]);
-              }
-              //events
-              logEvents.logSuiviEditScoreFrise(i);
-            }}
-          />
+          <View style={styles.containerScorePickerFrise}>
+            <ScorePicker
+              focusedScores={focusedScores}
+              onPress={(i) => {
+                if (focusedScores.includes(i)) {
+                  setFocusedScores((e) => e.filter((x) => x !== i));
+                } else {
+                  setFocusedScores((e) => [...e, i]);
+                }
+                //events
+                logEvents.logSuiviEditScoreFrise(i);
+              }}
+            />
+            <View style={styles.verticalDivider} />
+            <TouchableOpacity onPress={() => setShowTraitement((e) => !e)}>
+              <View style={[styles.selectionContainer, showTraitement && styles.activeSelectionContainer]}>
+                <Icon
+                  icon="DrugsSvg"
+                  color={showTraitement ? "#FFFFFF" : "#58C8D2"}
+                  width={20}
+                  height={20}
+                  styleContainer={styles.icon}
+                />
+              </View>
+            </TouchableOpacity>
+          </View>
         ) : null}
       </View>
       {renderChart(chartType)}
@@ -101,6 +119,26 @@ const Suivi = ({ navigation, setPlusVisible }) => {
 };
 
 const styles = StyleSheet.create({
+  icon: {
+    width: 30,
+    height: 30,
+  },
+  selectionContainer: {
+    padding: 4,
+    borderColor: "#DEF4F5",
+    borderWidth: 1,
+    borderRadius: 10,
+    marginHorizontal: 10,
+  },
+  activeSelectionContainer: {
+    backgroundColor: colors.LIGHT_BLUE,
+  },
+  containerScorePickerFrise: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
   headerContainer: {
     padding: 5,
     paddingBottom: 15,
@@ -135,6 +173,12 @@ const styles = StyleSheet.create({
     fontWeight: "700",
     fontSize: 22,
   },
+  verticalDivider: {
+    height: "50%",
+    backgroundColor: "#E0E0E0",
+    width: 1,
+    alignSelf: "center",
+  },
 });
 
 export default Suivi;