diff --git a/lib/components/ViewPublicationPage/questions/Date/DatePicker.tsx b/lib/components/ViewPublicationPage/questions/Date/DatePicker.tsx
new file mode 100644
index 0000000..7a42ae0
--- /dev/null
+++ b/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 (
+
+ (
+
+ ),
+ }}
+ 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" },
+ },
+ }}
+ />
+
+ );
+};
diff --git a/lib/components/ViewPublicationPage/questions/Date/DateRange.tsx b/lib/components/ViewPublicationPage/questions/Date/DateRange.tsx
new file mode 100644
index 0000000..006369a
--- /dev/null
+++ b/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 (
+
+ onDateChange(data, 0)}
+ />
+ onDateChange(data, 1)}
+ />
+
+ );
+};
diff --git a/lib/components/ViewPublicationPage/questions/Date/index.tsx b/lib/components/ViewPublicationPage/questions/Date/index.tsx
index 1e21a04..412faf6 100644
--- a/lib/components/ViewPublicationPage/questions/Date/index.tsx
+++ b/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 (
@@ -35,52 +19,11 @@ export const Date = ({ currentQuestion }: DateProps) => {
>
{currentQuestion.title}
-
- (
-
- ),
- }}
- 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" },
- },
- }}
- />
-
+ {currentQuestion.content.isRange ? (
+
+ ) : (
+
+ )}
);
};
diff --git a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
index 525b0e8..ed3b1b8 100644
--- a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
+++ b/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);
diff --git a/lib/model/questionTypes/date.ts b/lib/model/questionTypes/date.ts
index 8c5970d..60e0a63 100644
--- a/lib/model/questionTypes/date.ts
+++ b/lib/model/questionTypes/date.ts
@@ -17,5 +17,6 @@ export interface QuizQuestionDate extends QuizQuestionBase {
back: string | null;
originalBack: string | null;
autofill: boolean;
+ isRange?: boolean;
};
}
diff --git a/lib/utils/sendQuestionAnswer.ts b/lib/utils/sendQuestionAnswer.ts
index 939a699..7ea867a 100644
--- a/lib/utils/sendQuestionAnswer.ts
+++ b/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,
});
}