Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added search in quiz results

This commit is contained in:
Ilgeldi 2025-03-13 21:21:41 +05:00
parent 06ba1a923f
commit 21187be32a
4 changed files with 218 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/(main)/quiz/[quiz_id]/results/page.tsx
View File

@ -4,6 +4,7 @@ import QuizHeader from "@/components/quiz/QuizHeader";
import QuizTapgyrResults from "@/components/quiz/QuizTapgyrResults"; import QuizTapgyrResults from "@/components/quiz/QuizTapgyrResults";
import QuizTapgyrWinners from "@/components/quiz/QuizTapgyrWinners"; import QuizTapgyrWinners from "@/components/quiz/QuizTapgyrWinners";
import { Data } from "@/models/quizQuestions.model"; import { Data } from "@/models/quizQuestions.model";
import { notFound } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
interface IParams { interface IParams {
@ -16,7 +17,9 @@ const Page = ({ params }: IParams) => {
const [data, setData] = useState<Data>(); const [data, setData] = useState<Data>();
useEffect(() => { useEffect(() => {
Queries.getQuizById(params.quiz_id).then((res) => setData(res.data)); Queries.getQuizById(params.quiz_id)
.then((res) => setData(res.data))
.catch(() => notFound());
}, []); }, []);
return ( return (
@ -33,7 +36,12 @@ const Page = ({ params }: IParams) => {
data.steps && data.steps &&
data.steps?.length > 0 && data.steps?.length > 0 &&
data.steps.map((step) => ( data.steps.map((step) => (
<QuizTapgyrWinners id={params.quiz_id} tapgyr={step.tapgyr} questions={step.questions} /> <QuizTapgyrWinners
key={step.tapgyr}
id={params.quiz_id}
tapgyr={step.tapgyr}
questions={step.questions}
/>
))} ))}
</div> </div>
</section> </section>

138
components/quiz/QuizTapgyrResults.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { getNextQuizNetijeData, getQuizNetijeData } from "@/api/queries"; import { getNextQuizNetijeData, getQuizNetijeData } from "@/api/queries";
import { Datum } from "@/models/quizQuestionsWinners.model"; import { Datum, ISearchNetije } from "@/models/quizQuestionsWinners.model";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Loader from "../Loader"; import Loader from "../Loader";
@ -8,10 +8,11 @@ import Loader from "../Loader";
const padding = "py-4"; const padding = "py-4";
const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => { const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
const [data, setData] = useState<Datum[]>([]); const [data, setData] = useState<Datum[] | ISearchNetije[]>([]);
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [phone, setPhone] = useState<string>(""); const [phone, setPhone] = useState<string>("");
const [total, setTotal] = useState<number>(0); const [total, setTotal] = useState<number>(0);
const [error, setError] = useState<string>("");
const [nextPageQueries, setQueries] = useState<{ const [nextPageQueries, setQueries] = useState<{
limit: number; limit: number;
offset: number; offset: number;
@ -51,32 +52,37 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
} }
} }
// const handleSearchSubmit = async (event: any) => { const handleSearchSubmit = async (event: any) => {
// if (event.key === "Enter") { if (event.key === "Enter" && phone.length === 8) {
// event.preventDefault(); event.preventDefault();
// try { try {
// setLoading(true); setLoading(true);
// const response = await fetch( const response = await fetch(
// `https://sms.turkmentv.gov.tm/api/quiz/${id}/search`, `https://sms.turkmentv.gov.tm/api/quiz/${id}/search_netije`,
// { {
// method: "POST", method: "POST",
// headers: { headers: {
// "Content-Type": "application/json", "Content-Type": "application/json",
// }, },
// body: JSON.stringify({ phone, tapgyr: 1 }), body: JSON.stringify({ phone }),
// } }
// ); );
// // Handle the response as needed // Handle the response as needed
// const data = await response.json(); const data = await response.json();
// setLoading(false); setLoading(false);
// // setData(data); if (!data.error) {
// console.log(data); setData([data.data]);
// } catch (error) { setTotal(0);
// console.log(error); } else {
// } setData([]);
// } setError("Telefon belgisi tapylmady");
// }; }
} catch (error) {
console.log(error);
}
}
};
useEffect(() => { useEffect(() => {
getData(); getData();
@ -84,9 +90,11 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
return ( return (
<article className="flex flex-col gap-[24px]"> <article className="flex flex-col gap-[24px]">
<header className="flex justify-center"> <header className="grid grid-rows-2 md:grid-rows-1 md:grid-cols-2 lg:grid-cols-3">
<h1 className="text-[28px] text-[#1B1B21] md:text-[36px]">Netijeler</h1> <h1 className="text-[28px] text-[#1B1B21] md:text-[36px] text-center md:text-start">
{/* <div className="flex items-center gap-[14px] lg:col-span-2 relative"> Netijeler
</h1>
<div className="flex items-center gap-[14px] lg:col-span-2 relative">
<svg <svg
width="20" width="20"
height="20" height="20"
@ -113,23 +121,24 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
maxLength={8} maxLength={8}
minLength={8} minLength={8}
/> />
</div> */} </div>
</header> </header>
{data.length > 0 && !loading ? ( {data.length > 0 && !loading ? (
// Table Head // Table Head
<div className="flex flex-col bg-[#F6F2FA] rounded-[12px] overflow-hidden"> <div className="flex flex-col bg-[#F6F2FA] rounded-[12px] overflow-hidden">
<div className="flex justify-between bg-[#EAE7EF] p-[20px]"> <div className="flex justify-between bg-[#EAE7EF] p-[20px]">
{data[0].client?.id && ( {((data[0] as Datum).client?.id ||
(data[0] as ISearchNetije).place) && (
<span className={`${padding} max-w-[20px] w-full text-center`}> <span className={`${padding} max-w-[20px] w-full text-center`}>
Ýeri Ýeri
</span> </span>
)} )}
{data[0].client?.phone && ( {((data[0] as Datum)?.client?.phone || data[0].phone) && (
<span className={`${padding} max-w-[150px] w-full text-center`}> <span className={`${padding} max-w-[150px] w-full text-center`}>
Telefon beligisi Telefon beligisi
</span> </span>
)} )}
{data[0].tapgyr_breakdown && {data[0]?.tapgyr_breakdown &&
steps.map((item) => ( steps.map((item) => (
<span <span
key={item} key={item}
@ -138,14 +147,16 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
Tapgyr {item} Tapgyr {item}
</span> </span>
))} ))}
{data[0].correct_answers_time && ( {((data[0] as Datum).correct_answers_time ||
(data[0] as ISearchNetije).total_nobat) && (
<span <span
className={`${padding} min-w-[50px] text-center md:min-w-[115px] max-w-[150px] w-full flex justify-center`} className={`${padding} min-w-[50px] text-center md:min-w-[115px] max-w-[150px] w-full flex justify-center`}
> >
Nobatlaryň jemi Nobatlaryň jemi
</span> </span>
)} )}
{data[0].total_score_of_client && ( {((data[0] as Datum).total_score_of_client ||
(data[0] as ISearchNetije).total_score) && (
<span <span
className={`${padding} min-w-[50px] text-center md:min-w-[115px] max-w-[150px] w-full flex justify-center`} className={`${padding} min-w-[50px] text-center md:min-w-[115px] max-w-[150px] w-full flex justify-center`}
> >
@ -167,16 +178,23 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
className={`${padding} max-w-[20px] w-full text-center`} className={`${padding} max-w-[20px] w-full text-center`}
> >
{id > 0 && {id > 0 &&
winner.correct_answers_time === (winner as Datum).correct_answers_time ===
data[id - 1].correct_answers_time (data[id - 1] as Datum).correct_answers_time
? id ? id
: (winner as ISearchNetije).place
? (winner as ISearchNetije).place
: id + 1} : id + 1}
</span> </span>
<div <div
className={`${padding} max-w-[150px] w-full text-center flex flex-col gap-[7px]`} className={`${padding} max-w-[150px] w-full text-center flex flex-col gap-[7px]`}
> >
<span className="h-[36px]"> <span className="h-[36px]">
+{winner.client?.phone ? winner.client.phone : "-"} +
{(winner as Datum).client?.phone
? (winner as Datum).client?.phone
: (winner as ISearchNetije).phone
? (winner as ISearchNetije).phone
: "-"}
</span> </span>
{steps.map((step, i) => ( {steps.map((step, i) => (
<span <span
@ -198,12 +216,20 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
> >
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[50px] w-[100%]"> <div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[50px] w-[100%]">
<span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] "> <span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] ">
{tapgyr ? tapgyr.tapgyr_correct_time : "-"} {tapgyr && "tapgyr_correct_time" in tapgyr
? tapgyr.tapgyr_correct_time
: tapgyr && "tapgyr_total_nobat" in tapgyr
? tapgyr.tapgyr_total_nobat
: "-"}
</span> </span>
</div> </div>
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[50px] w-[100%]"> <div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[50px] w-[100%]">
<span className="bg-fillOrange rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] text-white"> <span className="bg-fillOrange rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] text-white">
{tapgyr ? tapgyr.tapgyr_score : "-"} {tapgyr && "tapgyr_score" in tapgyr
? tapgyr.tapgyr_score
: tapgyr && "tapgyr_total_score" in tapgyr
? tapgyr.tapgyr_total_score
: "-"}
</span> </span>
</div> </div>
</div> </div>
@ -214,8 +240,10 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
> >
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[180px] w-[100%]"> <div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[180px] w-[100%]">
<span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] "> <span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] ">
{winner.correct_answers_time {(winner as Datum).correct_answers_time
? winner.correct_answers_time ? (winner as Datum).correct_answers_time
: (winner as ISearchNetije).total_nobat
? (winner as ISearchNetije).total_nobat
: "-"} : "-"}
</span> </span>
</div> </div>
@ -227,7 +255,11 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
<div key={i} className="py-[5px] md:hidden"> <div key={i} className="py-[5px] md:hidden">
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[180px] w-[100%]"> <div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[180px] w-[100%]">
<span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[30px] h-[30px] flex justify-center items-center text-base leading-[125%] "> <span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[30px] h-[30px] flex justify-center items-center text-base leading-[125%] ">
{tapgyr ? tapgyr.tapgyr_correct_time : "-"} {tapgyr && "tapgyr_correct_time" in tapgyr
? tapgyr.tapgyr_correct_time
: tapgyr && "tapgyr_total_nobat" in tapgyr
? tapgyr.tapgyr_total_nobat
: "-"}
</span> </span>
</div> </div>
</div> </div>
@ -239,8 +271,10 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
> >
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[180px] w-[100%]"> <div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[180px] w-[100%]">
<span className="bg-fillOrange rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] text-white"> <span className="bg-fillOrange rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] text-white">
{winner.total_score_of_client {(winner as Datum).total_score_of_client
? winner.total_score_of_client ? (winner as Datum).total_score_of_client
: (winner as ISearchNetije).total_score
? (winner as ISearchNetije).total_score
: "-"} : "-"}
</span> </span>
</div> </div>
@ -252,7 +286,11 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
<div key={i} className="py-[5px] md:hidden"> <div key={i} className="py-[5px] md:hidden">
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[180px] w-[100%]"> <div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[180px] w-[100%]">
<span className="bg-fillOrange rounded-full w-[30px] h-[30px] flex justify-center items-center text-base leading-[125%] text-white"> <span className="bg-fillOrange rounded-full w-[30px] h-[30px] flex justify-center items-center text-base leading-[125%] text-white">
{tapgyr ? tapgyr.tapgyr_correct_time : "-"} {tapgyr && "tapgyr_correct_time" in tapgyr
? tapgyr.tapgyr_correct_time
: tapgyr && "tapgyr_total_nobat" in tapgyr
? tapgyr.tapgyr_total_nobat
: "-"}
</span> </span>
</div> </div>
</div> </div>
@ -295,10 +333,12 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => {
))} ))}
</div> </div>
</div> </div>
) : ( ) : !error ? (
<Loader /> <Loader />
) : (
<div className="text-center w-full">{error}</div>
)} )}
{data.length < total && ( {data.length < total && !error && (
<button <button
onClick={() => getData(true)} onClick={() => getData(true)}
className="py-[5px] self-center px-[10px] md:w-fit rounded-md bg-blue-500 text-white border border-blue-500 lg:hover:bg-white lg:hover:text-blue-500 transition-all duration-300" className="py-[5px] self-center px-[10px] md:w-fit rounded-md bg-blue-500 text-white border border-blue-500 lg:hover:bg-white lg:hover:text-blue-500 transition-all duration-300"

150
components/quiz/QuizTapgyrWinners.tsx
View File

@ -4,9 +4,11 @@ import { Question } from "@/models/quizQuestions.model";
import { import {
Datum, Datum,
IQuizQuestionsWinners, IQuizQuestionsWinners,
ISearchNetije,
} from "@/models/quizQuestionsWinners.model"; } from "@/models/quizQuestionsWinners.model";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Loader from "../Loader";
const padding = "py-4"; const padding = "py-4";
@ -17,10 +19,11 @@ interface IProps {
} }
const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => { const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
const [data, setData] = useState<Datum[] | []>([]); const [data, setData] = useState<Datum[] | ISearchNetije[]>([]);
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [phone, setPhone] = useState<string>(""); const [phone, setPhone] = useState<string>("");
const [total, setTotal] = useState<number>(0); const [total, setTotal] = useState<number>(0);
const [error, setError] = useState<string>("");
const [nextPageQueries, setQueries] = useState<{ const [nextPageQueries, setQueries] = useState<{
limit: number; limit: number;
offset: number; offset: number;
@ -42,7 +45,7 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
limit: res.meta.per_page, limit: res.meta.per_page,
offset: nextPageQueries.offset + res.meta.per_page, offset: nextPageQueries.offset + res.meta.per_page,
}); });
setData([...data, ...res.data]); setData([...(data as Datum[]), ...res.data]);
} }
} else { } else {
setLoading(true); setLoading(true);
@ -61,32 +64,37 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
} }
} }
// const handleSearchSubmit = async (event: any) => { const handleSearchSubmit = async (event: any) => {
// if (event.key === "Enter") { if (event.key === "Enter" && phone.length === 8) {
// event.preventDefault(); event.preventDefault();
// try { try {
// setLoading(true); setLoading(true);
// const response = await fetch( const response = await fetch(
// `https://sms.turkmentv.gov.tm/api/quiz/${id}/search`, `https://sms.turkmentv.gov.tm/api/quiz/${id}/search_netije`,
// { {
// method: "POST", method: "POST",
// headers: { headers: {
// "Content-Type": "application/json", "Content-Type": "application/json",
// }, },
// body: JSON.stringify({ phone, tapgyr: tapgyr }), body: JSON.stringify({ phone }),
// } }
// ); );
// // Handle the response as needed // Handle the response as needed
// const data = await response.json(); const data = await response.json();
// setLoading(false); setLoading(false);
// // setData(data); if (!data.error) {
// console.log(data); setData([data.data]);
// } catch (error) { setTotal(0);
// console.log(error); } else {
// } setData([]);
// } setError("Telefon belgisi tapylmady");
// }; }
} catch (error) {
console.log(error);
}
}
};
useEffect(() => { useEffect(() => {
getData(); getData();
@ -98,7 +106,7 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
<h1 className="text-[28px] text-[#1B1B21] md:text-[36px]"> <h1 className="text-[28px] text-[#1B1B21] md:text-[36px]">
Tapgyr {tapgyr} Tapgyr {tapgyr}
</h1> </h1>
{/* <div className="flex items-center gap-[14px] lg:col-span-2 relative"> <div className="flex items-center gap-[14px] lg:col-span-2 relative">
<svg <svg
width="20" width="20"
height="20" height="20"
@ -125,13 +133,14 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
maxLength={8} maxLength={8}
minLength={8} minLength={8}
/> />
</div> */} </div>
</header> </header>
{data.length > 0 && !loading ? ( {data.length > 0 && !loading ? (
<table className="bg-[#F6F2FA] rounded-[12px] overflow-hidden"> <table className="bg-[#F6F2FA] rounded-[12px] overflow-hidden">
<thead className="bg-[#EAE7EF] p-[20px]"> <thead className="bg-[#EAE7EF] p-[20px]">
<tr> <tr>
{data[0].client_id && ( {((data[0] as Datum).client_id ||
(data[0] as ISearchNetije).place) && (
<th scope="col" className={`${padding} text-center`}> <th scope="col" className={`${padding} text-center`}>
Ýeri Ýeri
</th> </th>
@ -141,7 +150,8 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
Telefon beligisi Telefon beligisi
</th> </th>
)} )}
{data[0].answers.length > 0 && ( {((data[0] as Datum).answers?.length > 0 ||
(data[0] as ISearchNetije).tapgyr_breakdown?.length) && (
<th <th
scope="col" scope="col"
className={`${padding} text-center hidden md:inline-block md:w-full`} className={`${padding} text-center hidden md:inline-block md:w-full`}
@ -149,12 +159,14 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
Jogap beriş nobatlary Jogap beriş nobatlary
</th> </th>
)} )}
{data[0].correct_answers_time && ( {((data[0] as Datum).correct_answers_time ||
(data[0] as ISearchNetije).total_nobat) && (
<th scope="col" className={`${padding} text-center`}> <th scope="col" className={`${padding} text-center`}>
Nobatlaryň jemi Nobatlaryň jemi
</th> </th>
)} )}
{data[0].total_score_of_client && ( {((data[0] as Datum).total_score_of_client ||
(data[0] as ISearchNetije).total_score) && (
<th scope="col" className={`${padding} text-center`}> <th scope="col" className={`${padding} text-center`}>
Utuklaryň jemi Utuklaryň jemi
</th> </th>
@ -172,9 +184,11 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
{/* Yeri */} {/* Yeri */}
<th scope="row" className={`${padding} text-center`}> <th scope="row" className={`${padding} text-center`}>
{id > 0 && {id > 0 &&
winner.correct_answers_time === (winner as Datum).correct_answers_time ===
data[id - 1].correct_answers_time (data[id - 1] as Datum).correct_answers_time
? id ? id
: (winner as ISearchNetije).place
? (winner as ISearchNetije).place
: id + 1} : id + 1}
</th> </th>
{/* Phone number */} {/* Phone number */}
@ -186,14 +200,28 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
<div className="w-full flex gap-[5px] justify-center"> <div className="w-full flex gap-[5px] justify-center">
{questions.map((question) => { {questions.map((question) => {
const matchingAnswer = const matchingAnswer =
winner.answers.find( (winner as Datum).answers?.find(
(answer) => (answer) =>
answer.question_id === question.id && answer.question_id === question.id &&
answer.score > 0 answer.score > 0
) || ) ||
winner.answers.find( (winner as Datum).answers?.find(
(answer) => answer.question_id === question.id (answer) => answer.question_id === question.id
); ) ||
((winner as ISearchNetije).tapgyr_breakdown &&
(winner as ISearchNetije).tapgyr_breakdown
.find((step) => step.tapgyr === tapgyr)
?.answers.find(
(answer) =>
answer.question_id === question.id &&
answer.score > 0
)) ||
((winner as ISearchNetije).tapgyr_breakdown &&
(winner as ISearchNetije).tapgyr_breakdown
.find((step) => step.tapgyr === tapgyr)
?.answers.find(
(answer) => answer.question_id === question.id
));
return ( return (
<span <span
@ -223,8 +251,14 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
<td className={`${padding}`}> <td className={`${padding}`}>
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] w-[100%]"> <div className="flex justify-center items-center text-base text-textBlack leading-[125%] w-[100%]">
<span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] "> <span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] ">
{winner.correct_answers_time {(winner as Datum).correct_answers_time
? winner.correct_answers_time ? (winner as Datum).correct_answers_time
: (winner as ISearchNetije).tapgyr_breakdown[
tapgyr - 1
].tapgyr_total_nobat
? (winner as ISearchNetije).tapgyr_breakdown[
tapgyr - 1
].tapgyr_total_nobat
: "-"} : "-"}
</span> </span>
</div> </div>
@ -233,8 +267,14 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
<td className={`${padding}`}> <td className={`${padding}`}>
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] w-[100%]"> <div className="flex justify-center items-center text-base text-textBlack leading-[125%] w-[100%]">
<span className="bg-fillOrange rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] text-white"> <span className="bg-fillOrange rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] text-white">
{winner.total_score_of_client {(winner as Datum).total_score_of_client
? winner.total_score_of_client ? (winner as Datum).total_score_of_client
: (winner as ISearchNetije).tapgyr_breakdown[
tapgyr - 1
].tapgyr_total_score
? (winner as ISearchNetije).tapgyr_breakdown[
tapgyr - 1
].tapgyr_total_score
: "-"} : "-"}
</span> </span>
</div> </div>
@ -253,14 +293,28 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
<div className="w-full flex gap-[5px] justify-center"> <div className="w-full flex gap-[5px] justify-center">
{questions.map((question) => { {questions.map((question) => {
const matchingAnswer = const matchingAnswer =
winner.answers.find( (winner as Datum).answers?.find(
(answer) => (answer) =>
answer.question_id === question.id && answer.question_id === question.id &&
answer.score > 0 answer.score > 0
) || ) ||
winner.answers.find( (winner as Datum).answers?.find(
(answer) => answer.question_id === question.id (answer) => answer.question_id === question.id
); ) ||
((winner as ISearchNetije).tapgyr_breakdown &&
(winner as ISearchNetije).tapgyr_breakdown
.find((step) => step.tapgyr === tapgyr)
?.answers.find(
(answer) =>
answer.question_id === question.id &&
answer.score > 0
)) ||
((winner as ISearchNetije).tapgyr_breakdown &&
(winner as ISearchNetije).tapgyr_breakdown
.find((step) => step.tapgyr === tapgyr)
?.answers.find(
(answer) => answer.question_id === question.id
));
return ( return (
<span <span
@ -291,10 +345,12 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
))} ))}
</tbody> </tbody>
</table> </table>
) : !error ? (
<Loader />
) : ( ) : (
<h1>Loading...</h1> <div className="w-full text-center">{error}</div>
)} )}
{data.length < total && ( {data.length < total && !error && (
<button <button
onClick={() => getData(true)} onClick={() => getData(true)}
className="py-[5px] self-center px-[10px] md:w-fit rounded-md bg-blue-500 text-white border border-blue-500 lg:hover:bg-white lg:hover:text-blue-500 transition-all duration-300" className="py-[5px] self-center px-[10px] md:w-fit rounded-md bg-blue-500 text-white border border-blue-500 lg:hover:bg-white lg:hover:text-blue-500 transition-all duration-300"

16
models/quizQuestionsWinners.model.ts
View File

@ -25,6 +25,8 @@ export interface Answer {
score: number; score: number;
serial_number_for_correct: number; serial_number_for_correct: number;
client_id: number; client_id: number;
tapgyr?: number;
quiz_id?: number;
} }
interface IMeta { interface IMeta {
@ -36,3 +38,17 @@ interface IMeta {
to: number; to: number;
total: number; total: number;
} }
export interface ISearchNetije {
total_nobat: number;
total_score: number;
place: number;
phone: string;
tapgyr_breakdown: {
tapgyr: number;
tapgyr_total_score: number;
tapgyr_total_nobat: number;
tapgyr_place: number;
answers: Answer[];
}[];
}