Merge remote-tracking branch 'origin/develop' into develop

src/components/fields/Rating/Settings.tsx

@@ -1,48 +1,95 @@
 import { ISettingsProps } from "@src/components/fields/types";
-
-import { Slider, InputLabel, TextField, Grid } from "@mui/material";
+import RatingIcon from "@mui/icons-material/Star";
+import RatingOutlineIcon from "@mui/icons-material/StarBorder"
+import { InputLabel, TextField, Grid, FormControlLabel, Checkbox, Stack } from "@mui/material";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import MuiRating from "@mui/material/Rating";
+import { get } from "lodash-es";
 
 export default function Settings({ onChange, config }: ISettingsProps) {
   return (
-    <>
-      <Grid container spacing={2} justifyItems="end" direction={"row"}>
-        <Grid item xs={6}>
-          <TextField
-            label="Maximum number of stars"
-            type={"number"}
-            value={config.max}
-            fullWidth
-            onChange={(e) => {
-              onChange("max")(parseInt(e.target.value));
-            }}
-            inputProps={{ min: 1, max: 20 }}
-          />
-        </Grid>
-        <Grid item xs={6}>
-          <InputLabel>Star fraction</InputLabel>
-          <ToggleButtonGroup
-            value={config.precision}
-            exclusive
-            fullWidth
-            onChange={(_, value) => {
-              onChange("precision")(value);
-            }}
-            aria-label="text alignment"
-          >
-            <ToggleButton value={0.25} aria-label="quarter">
-              1/4
-            </ToggleButton>
-            <ToggleButton value={0.5} aria-label="half">
-              1/2
-            </ToggleButton>
-            <ToggleButton value={1} aria-label="whole">
-              1
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Grid>
+    <Grid container spacing={2} justifyItems="end" direction={"row"}>
+      <Grid item xs={6}>
+        <TextField
+          label="Highest possible rating"
+          type={"number"}
+          value={config.max}
+          fullWidth
+          error={false}
+          onChange={(e) => {
+            let input = parseInt(e.target.value) || 0
+            if (input > 20) { input = 20 }
+            onChange("max")(input);
+          }}
+        />
       </Grid>
-    </>
+      <Grid item xs={6}>
+        <InputLabel>Rating fraction</InputLabel>
+        <ToggleButtonGroup
+          value={config.precision}
+          exclusive
+          fullWidth
+          onChange={(_, value) => {
+            onChange("precision")(value);
+          }}
+          aria-label="text alignment"
+          sx={{ pt: 0.5 }}
+        >
+          <ToggleButton value={0.25} aria-label="quarter">
+            1/4
+          </ToggleButton>
+          <ToggleButton value={0.5} aria-label="half">
+            1/2
+          </ToggleButton>
+          <ToggleButton value={1} aria-label="whole">
+            1
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </Grid>
+      <Grid item xs={6}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={config.customIcons?.enabled}
+              onChange={(e) =>
+                onChange("customIcons.enabled")(e.target.checked)
+              }
+              name="customIcons.enabled"
+            />
+          }
+          label="Customize ratings with emoji"
+          style={{ marginLeft: -11 }}
+        />
+      </Grid>
+      {config.customIcons?.enabled && (
+        <Grid item xs={6} sm={true}>
+          <Stack direction="row" spacing={1}>
+            <TextField
+              id="customIcons.rating"
+              value={get(config, "customIcons.rating")}
+              onChange={(e) =>
+                onChange("customIcons.rating")(e.target.value)
+              }
+              label="Custom icon preview:"
+              className="labelHorizontal"
+              inputProps={{ style: { width: "2ch" } }}
+            />
+
+            <MuiRating aria-label="Preview of the rating field with custom icon"
+              name="Preview"
+              onClick={(e) => e.stopPropagation()}
+              icon={get(config, "customIcons.rating") || <RatingIcon />}
+              size="small"
+              emptyIcon={get(config, "customIcons.rating") || <RatingOutlineIcon />}
+              max={get(config, "max")}
+              precision={get(config, "precision")}
+              sx={{ pt: 0.5 }}
+            />
+          </Stack>
+
+        </Grid>
+      )}
+    </Grid>
   );
-}
+}

src/components/fields/Rating/SideDrawerField.tsx

@@ -3,9 +3,8 @@ import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { Grid } from "@mui/material";
 import { Rating as MuiRating } from "@mui/material";
 import "@mui/lab";
-import StarBorderIcon from "@mui/icons-material/StarBorder";
-
-import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
+import { getStateIcon, getStateOutline } from "./TableCell";
+import { fieldSx } from "@src/components/SideDrawer/utils";
 
 export default function Rating({
   column,
@@ -29,7 +28,9 @@ export default function Rating({
           onChange(newValue);
           onSubmit();
         }}
-        emptyIcon={<StarBorderIcon fontSize="inherit" />}
+        icon={getStateIcon(column.config)}
+        emptyIcon={getStateOutline(column.config)}
+        size="small"
         max={max}
         precision={precision}
         sx={{ ml: -0.5 }}

src/components/fields/Rating/TableCell.tsx

@@ -1,7 +1,21 @@
 import { IHeavyCellProps } from "@src/components/fields/types";
 
 import MuiRating from "@mui/material/Rating";
-import StarBorderIcon from "@mui/icons-material/StarBorder";
+import RatingIcon from "@mui/icons-material/Star";
+import RatingOutlineIcon from "@mui/icons-material/StarBorder"
+import { get } from "lodash-es";
+
+
+export const getStateIcon = (config: any) => {
+  // only use the config to get the custom rating icon if enabled via toggle
+  if (!get(config, "customIcons.enabled")) { return <RatingIcon /> }
+  return get(config, "customIcons.rating") || <RatingIcon />;
+};
+
+export const getStateOutline = (config: any) => {
+  if (!get(config, "customIcons.enabled")) { return <RatingOutlineIcon /> }
+  return get(config, "customIcons.rating") || <RatingOutlineIcon />;
+}
 
 export default function Rating({
   row,
@@ -28,9 +42,11 @@ export default function Rating({
       name={`${row.id}-${column.key}`}
       value={typeof value === "number" ? value : 0}
       onClick={(e) => e.stopPropagation()}
+      icon={getStateIcon(column.config)}
+      size="small"
       disabled={disabled}
       onChange={(_, newValue) => onSubmit(newValue)}
-      emptyIcon={<StarBorderIcon />}
+      emptyIcon={getStateOutline(column.config)}
       max={max}
       precision={precision}
       sx={{ mx: -0.25 }}