From 91f9bc4745d3bf009bbd24b9e7c361c3f786226d Mon Sep 17 00:00:00 2001
From: falendikategar <falendikapratama@gmail.com>
Date: Thu, 10 Oct 2024 15:54:21 +0700
Subject: [PATCH] update: revision for index lazy

---
 .../assessment/index.lazy.tsx                 | 283 +++++++++---------
 1 file changed, 144 insertions(+), 139 deletions(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
index 9757a23..c6efe1b 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
@@ -213,6 +213,10 @@ export default function AssessmentPage() {
   const endIndex = startIndex + limit;
   const paginatedQuestions = data?.data.slice(startIndex, endIndex) || [];
 
+  const filteredQuestions = paginatedQuestions.filter((question) => {
+    return question.subAspectId === selectedSubAspectId; // Misalnya, jika `question` memiliki `subAspectId`
+  });
+
   return (
     <Card shadow="sm" p="lg" radius="md" withBorder>
       <Stack gap="md">
@@ -225,7 +229,7 @@ export default function AssessmentPage() {
 
           {/* LEFT-SIDE */}
           {/* Aspek dan Sub-Aspek */}
-          <Flex direction="column" gap="xs" className="mr-4">
+          <Flex direction="column" gap="xs" className="mr-4 w-52">
             <div className="space-y-4">
               {aspectsQuery.data?.data.map((aspect) => (
                 <div
@@ -251,7 +255,8 @@ export default function AssessmentPage() {
                       {aspect.subAspects.map((subAspect) => (
                         <div
                           key={subAspect.id}
-                          className="flex justify-between text-gray-600"
+                          className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}
+                          onClick={() => setSelectedSubAspectId(subAspect.id)}
                         >
                           <div>{subAspect.name}</div>
                         </div>
@@ -264,148 +269,148 @@ export default function AssessmentPage() {
           </Flex>
           {/* Pertanyaan */}
           <Stack gap="sm" style={{ flex: 1 }}>
-            {paginatedQuestions.map((question: any, index: number) => {
-              const questionId = question.questionId;
-              if (!questionId) return null;
+            {filteredQuestions.length === 0 ? (
+              <Text color="black" className="text-center p-3">
+                Pertanyaan tidak ada untuk sub-aspek yang dipilih.
+              </Text>
+            ) : (
+              filteredQuestions.map((question: any, index: number) => {
+                const questionId = question.questionId;
+                if (!questionId) return null;
 
-              return (
-                <Card
-                  key={questionId}
-                  shadow="sm"
-                  p="lg"
-                  radius="md"
-                  withBorder
-                  ref={(el) => (questionRefs.current[questionId] = el)}
-                  style={{ position: "relative" }}
-                >
-                  <Stack gap="sm">
-                    <Flex
-                      justify="space-between"
-                      align="flex-start"
-                      style={{ width: "100%" }}
-                    >
-                      <Text
-                        className="font-bold"
-                        style={{
-                          flexGrow: 1,
-                          wordBreak: "break-word",
-                          marginRight: "40px",
-                        }}
-                      >
-                        {startIndex + index + 1}. {question.questionText}
-                      </Text>
+                return (
+                  <Card
+                    key={questionId}
+                    shadow="sm"
+                    p="lg"
+                    radius="md"
+                    withBorder
+                    ref={(el) => (questionRefs.current[questionId] = el)}
+                    style={{ position: "relative" }}
+                  >
+                    <Stack gap="sm">
+                      <Flex justify="space-between" align="flex-start" style={{ width: "100%" }}>
+                        <Text
+                          className="font-bold"
+                          style={{
+                            flexGrow: 1,
+                            wordBreak: "break-word",
+                            marginRight: "40px",
+                          }}
+                        >
+                          {startIndex + index + 1}. {question.questionText}
+                        </Text>
 
-                      <ActionIcon
-                        onClick={() => {
-                          setFlaggedQuestions((prevFlags) => ({
-                            ...prevFlags,
-                            [questionId]: !prevFlags[questionId],
-                          }));
-                          toggleFlagMutation.mutate(questionId);
-                        }}
-                        title="Tandai"
-                        color={flaggedQuestions[questionId] ? "red" : "gray"}
-                      >
-                        <TbFlag
-                          size={24}
-                          color={flaggedQuestions[questionId] ? "black" : "inherit"}
-                        />
-                      </ActionIcon>
-                    </Flex>
-
-                    {question.options?.length > 0 ? (
-                      <Radio.Group>
-                        <div className="flex flex-col gap-4">
-                          {question.options.map((option: any) => (
-                            <label
-                              key={option.optionId}
-                              className="bg-gray-200 border rounded-lg p-4 cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center"
-                              onClick={() =>
-                                document.getElementById(option.optionId)?.click()
-                              }
-                            >
-                              <Radio
-                                id={option.optionId}
-                                className="font-bold"
-                                value={option.optionId}
-                                label={option.optionText}
-                                size="md"
-                                radius="xl"
-                                style={{ pointerEvents: "none" }}
-                                onChange={() => {
-                                  submitAnswerMutation.mutate({
-                                    optionId: option.optionId,
-                                    assessmentId: assessmentId || "",
-                                    validationInformation: JSON.stringify({
-                                      info: "jfjforjfocn",
-                                      questionId: question.questionId // Tambahkan questionId dalam validationInformation
-                                    }),
-                                  });
-                                }}
-                              />
-                            </label>
-                          ))}
-                        </div>
-                      </Radio.Group>
-                    ) : (
-                      <Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
-                    )}
-
-                    <Textarea placeholder="Berikan keterangan terkait jawaban di atas" />
-
-                    {/* File Upload */}
-                    {question.needFile === true && (
-                      <div
-                        className={`pt-5 pb-5 pr-5 pl-2 border-2 border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"
-                          } shadow-lg`} // Tambah shadow-lg
-                        onDragOver={handleDragOver}
-                        onDragLeave={handleDragLeave}
-                        onDrop={handleDrop}
-                        onClick={handleClick}
-                      >
-                        <Flex align="center" justify="space-between" gap="sm">
-                          <TbUpload
+                        <ActionIcon
+                          onClick={() => {
+                            setFlaggedQuestions((prevFlags) => ({
+                              ...prevFlags,
+                              [questionId]: !prevFlags[questionId],
+                            }));
+                            toggleFlagMutation.mutate(questionId);
+                          }}
+                          title="Tandai"
+                          color={flaggedQuestions[questionId] ? "red" : "gray"}
+                        >
+                          <TbFlag
                             size={24}
-                            style={{ marginLeft: "8px", marginRight: "8px" }}
-                          />{" "}
-                          {/* Tambah marginLeft */}
-                          <div className="flex-grow text-right">
-                            <Text className="font-bold">
-                              Klik untuk unggah atau geser file disini
-                            </Text>
-                            <Text className="text-sm text-gray-400">
-                              PNG, JPG, PDF
-                            </Text>
-                          </div>
-                        </Flex>
-                        <input
-                          type="file"
-                          ref={fileInputRef}
-                          onChange={handleFileChange}
-                          style={{ display: "none" }}
-                          accept="image/png, image/jpeg, application/pdf"
-                        />
-                      </div>
-                    )}
+                            color={flaggedQuestions[questionId] ? "black" : "inherit"}
+                          />
+                        </ActionIcon>
+                      </Flex>
 
-                    {files.length > 0 && (
-                      <Stack gap="sm" mt="sm">
-                        <Text className="font-bold">File yang diunggah:</Text>
-                        {files.map((file, fileIndex) => (
-                          <Group key={fileIndex} align="center">
-                            <Text>{file.name}</Text>
-                            <CloseButton
-                              title="Hapus file"
-                              onClick={() => handleRemoveFile(fileIndex)}
+                      {question.options?.length > 0 ? (
+                        <Radio.Group>
+                          <div className="flex flex-col gap-4">
+                            {question.options.map((option: any) => (
+                              <label
+                                key={option.optionId}
+                                className="bg-gray-200 border rounded-lg p-4 cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center"
+                                onClick={() => document.getElementById(option.optionId)?.click()}
+                              >
+                                <Radio
+                                  id={option.optionId}
+                                  className="font-bold"
+                                  value={option.optionId}
+                                  label={option.optionText}
+                                  size="md"
+                                  radius="xl"
+                                  style={{ pointerEvents: "none" }}
+                                  onChange={() => {
+                                    submitAnswerMutation.mutate({
+                                      optionId: option.optionId,
+                                      assessmentId: assessmentId || "",
+                                      validationInformation: JSON.stringify({
+                                        info: "jfjforjfocn",
+                                        questionId: question.questionId,
+                                      }),
+                                    });
+                                  }}
+                                />
+                              </label>
+                            ))}
+                          </div>
+                        </Radio.Group>
+                      ) : (
+                        <Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
+                      )}
+
+                      <Textarea placeholder="Berikan keterangan terkait jawaban di atas" />
+
+                      {/* File Upload */}
+                      {question.needFile === true && (
+                        <div
+                          className={`pt-5 pb-5 pr-5 pl-2 border-2 border-dashed ${
+                            dragActive ? "bg-gray-100" : "bg-transparent"
+                          } shadow-lg`}
+                          onDragOver={handleDragOver}
+                          onDragLeave={handleDragLeave}
+                          onDrop={handleDrop}
+                          onClick={handleClick}
+                        >
+                          <Flex align="center" justify="space-between" gap="sm">
+                            <TbUpload
+                              size={24}
+                              style={{ marginLeft: "8px", marginRight: "8px" }}
                             />
-                          </Group>
-                        ))}
-                      </Stack>
-                    )}
-                  </Stack>
-                </Card>
-              );
-            })}
+                            <div className="flex-grow text-right">
+                              <Text className="font-bold">
+                                Klik untuk unggah atau geser file disini
+                              </Text>
+                              <Text className="text-sm text-gray-400">
+                                PNG, JPG, PDF
+                              </Text>
+                            </div>
+                          </Flex>
+                          <input
+                            type="file"
+                            ref={fileInputRef}
+                            onChange={handleFileChange}
+                            style={{ display: "none" }}
+                            accept="image/png, image/jpeg, application/pdf"
+                          />
+                        </div>
+                      )}
+
+                      {files.length > 0 && (
+                        <Stack gap="sm" mt="sm">
+                          <Text className="font-bold">File yang diunggah:</Text>
+                          {files.map((file, fileIndex) => (
+                            <Group key={fileIndex} align="center">
+                              <Text>{file.name}</Text>
+                              <CloseButton
+                                title="Hapus file"
+                                onClick={() => handleRemoveFile(fileIndex)}
+                              />
+                            </Group>
+                          ))}
+                        </Stack>
+                      )}
+                    </Stack>
+                  </Card>
+                );
+              })
+            )}
           </Stack>
 
           {/* Navigasi dan Pagination */}