Merge branch 'dev' into 'staging'

date range + dependencies of isRange field

See merge request frontend/squzanswerer!174

lib/components/ViewPublicationPage/questions/Date/DatePicker.tsx

@@ -0,0 +1,77 @@
+import { useQuizViewStore } from "@/stores/quizView";
+import { useQuizSettings } from "@contexts/QuizDataContext";
+import CalendarIcon from "@icons/CalendarIcon";
+import type { QuizQuestionDate } from "@model/questionTypes/date";
+import { Box, Typography, useTheme } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import type { Moment } from "moment";
+import moment from "moment";
+
+type DateProps = {
+  currentQuestion: QuizQuestionDate;
+};
+
+export default ({ currentQuestion }: DateProps) => {
+  const { settings } = useQuizSettings();
+  const answers = useQuizViewStore((state) => state.answers);
+  const { updateAnswer } = useQuizViewStore((state) => state);
+  const theme = useTheme();
+  const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string;
+  const currentAnswer = moment(answer) || moment();
+
+  const onDateChange = async (date: Moment | null) => {
+    if (!date) return;
+
+    updateAnswer(currentQuestion.id, date, 0);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        marginTop: "20px",
+      }}
+    >
+      <DatePicker
+        format="DD/MM/YYYY"
+        slots={{
+          openPickerIcon: () => (
+            <CalendarIcon
+              sx={{
+                "& path": { stroke: theme.palette.primary.main },
+                "& rect": { stroke: theme.palette.primary.main },
+              }}
+            />
+          ),
+        }}
+        value={currentAnswer}
+        onChange={onDateChange}
+        slotProps={{
+          openPickerButton: { sx: { p: 0 }, "data-cy": "open-datepicker" },
+          layout: {
+            sx: { backgroundColor: theme.palette.background.default },
+          },
+        }}
+        sx={{
+          "& .MuiInputBase-root": {
+            backgroundColor: settings.cfg.design
+              ? quizThemes[settings.cfg.theme].isLight
+                ? "#F2F3F7"
+                : "rgba(154,154,175, 0.2)"
+              : quizThemes[settings.cfg.theme].isLight
+                ? "white"
+                : theme.palette.background.default,
+            borderRadius: "10px",
+            maxWidth: "250px",
+            pr: "30px",
+            "& input": { py: "11px", pl: "20px", lineHeight: "19px" },
+            "& fieldset": { borderColor: "#9A9AAF" },
+          },
+        }}
+      />
+    </Box>
+  );
+};

lib/components/ViewPublicationPage/questions/Date/DateRange.tsx

@@ -0,0 +1,92 @@
+import { useQuizSettings } from "@/contexts/QuizDataContext";
+import { useQuizViewStore } from "@/stores/quizView";
+import type { QuizQuestionDate } from "@model/questionTypes/date";
+import { DateCalendar } from "@mui/x-date-pickers";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import type { Moment } from "moment";
+import moment from "moment";
+import { Paper, useTheme } from "@mui/material";
+import { useRootContainerSize } from "@/contexts/RootContainerWidthContext";
+
+type DateProps = {
+  currentQuestion: QuizQuestionDate;
+};
+
+export default ({ currentQuestion }: DateProps) => {
+  const theme = useTheme();
+  const isMobile = useRootContainerSize() < 690;
+  const { settings } = useQuizSettings();
+  const { updateAnswer } = useQuizViewStore((state) => state);
+
+  const answers = useQuizViewStore((state) => state.answers);
+  const answer = (answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string) || ["0", "0"];
+
+  const currentFrom = Number(answer[0]) ? moment(Number(answer[0])) : moment().utc();
+  const currentTo = Number(answer[1]) ? moment(Number(answer[1])) : moment().utc();
+
+  const onDateChange = async (date: Moment | null, index: number) => {
+    if (!date) return;
+    let newAnswer = [...answer];
+    newAnswer[index] = (moment(date).unix() * 1000).toString();
+
+    updateAnswer(currentQuestion.id, newAnswer, 0);
+  };
+
+  return (
+    <Paper
+      sx={{
+        backgroundColor: settings.cfg.design
+          ? quizThemes[settings.cfg.theme].isLight
+            ? "#F2F3F7"
+            : "rgba(154,154,175, 0.2)"
+          : quizThemes[settings.cfg.theme].isLight
+            ? "white"
+            : theme.palette.background.default,
+        width: isMobile ? "min-content" : "auto",
+        display: "inline-flex",
+        flexWrap: "wrap",
+      }}
+    >
+      <DateCalendar
+        sx={{
+          "& .MuiInputBase-root": {
+            backgroundColor: settings.cfg.design
+              ? quizThemes[settings.cfg.theme].isLight
+                ? "#F2F3F7"
+                : "rgba(154,154,175, 0.2)"
+              : quizThemes[settings.cfg.theme].isLight
+                ? "white"
+                : theme.palette.background.default,
+            borderRadius: "10px",
+            maxWidth: "250px",
+            pr: "30px",
+            "& input": { py: "11px", pl: "20px", lineHeight: "19px" },
+            "& fieldset": { borderColor: "#9A9AAF" },
+          },
+        }}
+        value={currentFrom}
+        onChange={(data) => onDateChange(data, 0)}
+      />
+      <DateCalendar
+        sx={{
+          "& .MuiInputBase-root": {
+            backgroundColor: settings.cfg.design
+              ? quizThemes[settings.cfg.theme].isLight
+                ? "#F2F3F7"
+                : "rgba(154,154,175, 0.2)"
+              : quizThemes[settings.cfg.theme].isLight
+                ? "white"
+                : theme.palette.background.default,
+            borderRadius: "10px",
+            maxWidth: "250px",
+            pr: "30px",
+            "& input": { py: "11px", pl: "20px", lineHeight: "19px" },
+            "& fieldset": { borderColor: "#9A9AAF" },
+          },
+        }}
+        value={currentTo}
+        onChange={(data) => onDateChange(data, 1)}
+      />
+    </Paper>
+  );
+};

lib/components/ViewPublicationPage/questions/Date/index.tsx

@@ -1,30 +1,14 @@
-import { useQuizViewStore } from "@/stores/quizView";
-import { useQuizSettings } from "@contexts/QuizDataContext";
-import CalendarIcon from "@icons/CalendarIcon";
 import type { QuizQuestionDate } from "@model/questionTypes/date";
+import DateRange from "./DateRange";
+import DatePicker from "./DatePicker";
 import { Box, Typography, useTheme } from "@mui/material";
-import { DatePicker } from "@mui/x-date-pickers";
-import { quizThemes } from "@utils/themes/Publication/themePublication";
-import type { Moment } from "moment";
-import moment from "moment";
 
 type DateProps = {
   currentQuestion: QuizQuestionDate;
 };
 
 export const Date = ({ currentQuestion }: DateProps) => {
-  const { settings } = useQuizSettings();
-  const answers = useQuizViewStore((state) => state.answers);
-  const { updateAnswer } = useQuizViewStore((state) => state);
   const theme = useTheme();
-  const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string;
-  const currentAnswer = moment(answer) || moment();
-
-  const onDateChange = async (date: Moment | null) => {
-    if (!date) return;
-
-    updateAnswer(currentQuestion.id, date, 0);
-  };
 
   return (
     <Box>
@@ -35,52 +19,11 @@ export const Date = ({ currentQuestion }: DateProps) => {
       >
         {currentQuestion.title}
       </Typography>
-      <Box
+      {currentQuestion.content.isRange ? (
-        sx={{
+        <DateRange currentQuestion={currentQuestion} />
-          display: "flex",
+      ) : (
-          flexDirection: "column",
+        <DatePicker currentQuestion={currentQuestion} />
-          width: "100%",
+      )}
-          marginTop: "20px",
-        }}
-      >
-        <DatePicker
-          format="DD/MM/YYYY"
-          slots={{
-            openPickerIcon: () => (
-              <CalendarIcon
-                sx={{
-                  "& path": { stroke: theme.palette.primary.main },
-                  "& rect": { stroke: theme.palette.primary.main },
-                }}
-              />
-            ),
-          }}
-          value={currentAnswer}
-          onChange={onDateChange}
-          slotProps={{
-            openPickerButton: { sx: { p: 0 }, "data-cy": "open-datepicker" },
-            layout: {
-              sx: { backgroundColor: theme.palette.background.default },
-            },
-          }}
-          sx={{
-            "& .MuiInputBase-root": {
-              backgroundColor: settings.cfg.design
-                ? quizThemes[settings.cfg.theme].isLight
-                  ? "#F2F3F7"
-                  : "rgba(154,154,175, 0.2)"
-                : quizThemes[settings.cfg.theme].isLight
-                  ? "white"
-                  : theme.palette.background.default,
-              borderRadius: "10px",
-              maxWidth: "250px",
-              pr: "30px",
-              "& input": { py: "11px", pl: "20px", lineHeight: "19px" },
-              "& fieldset": { borderColor: "#9A9AAF" },
-            },
-          }}
-        />
-      </Box>
     </Box>
   );
 };

lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx

@@ -39,7 +39,6 @@ interface OwnInputProps {
 }
 const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputProps) => {
   const theme = useTheme();
-  console.log(theme.palette.primary.main);
   const ownVariants = useQuizViewStore((state) => state.ownVariants);
   const { updateOwnVariant } = useQuizViewStore((state) => state);
 

lib/model/questionTypes/date.ts

@@ -17,5 +17,6 @@ export interface QuizQuestionDate extends QuizQuestionBase {
     back: string | null;
     originalBack: string | null;
     autofill: boolean;
+    isRange?: boolean;
   };
 }

lib/utils/sendQuestionAnswer.ts

@@ -19,11 +19,32 @@ export function sendQuestionAnswer(
   }
   switch (question.type) {
     case "date": {
-      if (!moment.isMoment(questionAnswer.answer)) throw new Error("Cannot send answer in date question");
+      let answer = "";
 
+      if (question.content.isRange) {
+        if (!Array.isArray(questionAnswer.answer)) throw new Error("Cannot send answer in range question");
+
+        let from = Number(questionAnswer.answer[0]);
+        let to = Number(questionAnswer.answer[1]);
+
+        if (
+          from !== 0 &&
+          to !== 0 &&
+          from !== Math.min(Number(questionAnswer.answer[0]), Number(questionAnswer.answer[1]))
+        ) {
+          from = Math.min(Number(questionAnswer.answer[0]), Number(questionAnswer.answer[1]));
+          to = Math.max(Number(questionAnswer.answer[0]), Number(questionAnswer.answer[1]));
+        }
+
+        answer = `${!from ? "_" : moment(from).format("YYYY.MM.DD")} - ${!to ? "_" : moment(to).format("YYYY.MM.DD")}`;
+      } else {
+        if (!moment.isMoment(questionAnswer.answer)) throw new Error("Cannot send answer in date question");
+
+        answer = moment(questionAnswer.answer).format("YYYY.MM.DD");
+      }
       return sendAnswer({
         questionId: question.id,
-        body: moment(questionAnswer.answer).format("YYYY.MM.DD"),
+        body: answer,
         qid: quizId,
       });
     }