Add color to accommodations

geneit_app/package-lock.json

@@ -37,6 +37,7 @@
         "email-validator": "^2.0.4",
         "filesize": "^10.1.2",
         "jspdf": "^2.5.1",
+        "mui-color-input": "^2.0.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-easy-crop": "^5.0.7",
@@ -519,6 +520,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.1.0.tgz",
+      "integrity": "sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
@@ -3455,6 +3464,27 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/mui-color-input": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/mui-color-input/-/mui-color-input-2.0.3.tgz",
+      "integrity": "sha512-rAd040qQ0Y+8dk4gE8kkCiJ/vCgA0j4vv1quJ43BfORTFE3uHarHj0xY1Vo9CPbojtx1f5vW+CjckYPRIZPIRg==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": "^5.0.0",
+        "@types/react": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",

geneit_app/package.json

@@ -33,6 +33,7 @@
     "email-validator": "^2.0.4",
     "filesize": "^10.1.2",
     "jspdf": "^2.5.1",
+    "mui-color-input": "^2.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-easy-crop": "^5.0.7",

geneit_app/src/api/accommodations/AccommodationListApi.tsx

@@ -8,7 +8,8 @@ export interface Accommodation {
   time_update: number;
   name: string;
   need_validation: boolean;
-  description: string;
+  description?: string;
+  color?: string;
   open_to_reservations: boolean;
 }
 
@@ -58,6 +59,7 @@ export interface UpdateAccommodation {
   name: string;
   need_validation: boolean;
   description?: string;
+  color?: string;
   open_to_reservations: boolean;
 }
 

geneit_app/src/dialogs/accommodations/UpdateAccommodationDialog.tsx

@@ -12,6 +12,7 @@ import { UpdateAccommodation } from "../../api/accommodations/AccommodationListA
 import { checkConstraint } from "../../utils/from_utils";
 import { PropCheckbox } from "../../widgets/forms/PropCheckbox";
 import { PropEdit } from "../../widgets/forms/PropEdit";
+import { PropColorPicker } from "../../widgets/forms/PropColorPicker";
 
 export function UpdateAccommodationDialog(p: {
   open: boolean;
@@ -89,6 +90,20 @@ export function UpdateAccommodationDialog(p: {
           helperText={descriptionErr}
         />
 
+        <PropColorPicker
+          editable
+          label="Couleur"
+          value={accommodation?.color}
+          onChange={(s) =>
+            setAccommodation((a) => {
+              return {
+                ...a!,
+                color: s!,
+              };
+            })
+          }
+        />
+
         <PropCheckbox
           editable
           label="Ouvert aux réservations"

geneit_app/src/routes/family/accommodations/AccommodationsReservationsRoute.tsx

@@ -159,6 +159,12 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                       key={a.id}
                       control={
                         <Checkbox
+                          sx={{
+                            color: "#" + a.color,
+                            "&.Mui-checked": {
+                              color: "#" + a.color,
+                            },
+                          }}
                           checked={!hiddenAccommodations.has(a.id)}
                           onChange={(_ev, v) => {
                             if (v) hiddenAccommodations.delete(a.id);

geneit_app/src/routes/family/accommodations/AccommodationsSettingsRoute.tsx

@@ -1,6 +1,7 @@
 import AddIcon from "@mui/icons-material/Add";
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
+import HouseIcon from "@mui/icons-material/House";
 import {
   Button,
   Card,
@@ -62,6 +63,7 @@ function AccommodationsListCard(): React.ReactElement {
           name: "",
           open_to_reservations: true,
           need_validation: false,
+          color: "2196f3",
         },
         true
       );
@@ -178,6 +180,7 @@ function AccommodationCard(p: {
           Mis à jour il y a <TimeWidget time={p.accommodation.time_update} />
         </Typography>
         <Typography variant="h5" component="div">
+          <HouseIcon sx={{ color: "#" + p.accommodation.color }} />{" "}
           {p.accommodation.name}
         </Typography>
         <Typography sx={{ mb: 1.5 }} color="text.secondary">

geneit_app/src/widgets/forms/PropColorPicker.tsx

@@ -0,0 +1,24 @@
+import { MuiColorInput } from "mui-color-input";
+import { PropEdit } from "./PropEdit";
+
+export function PropColorPicker(p: {
+  editable: boolean;
+  label: string;
+  value?: string;
+  onChange: (v: string | undefined) => void;
+}): React.ReactElement {
+  if (!p.editable) {
+    if (!p.value) return <></>;
+
+    return <PropEdit editable={false} label={p.label} value={`#${p.value}`} />;
+  }
+
+  return (
+    <MuiColorInput
+      value={"#" + (p.value ?? "")}
+      fallbackValue="#ffffff"
+      format="hex"
+      onChange={(_v, c) => p.onChange(c.hex.substring(1))}
+    />
+  );
+}