diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx index 833ee540a1..c54a60c0d0 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx @@ -1,3 +1,4 @@ +import React, { useState } from "react"; import { getPersonIdentifier } from "@formbricks/lib/person/util"; import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline"; import { timeSince } from "@formbricks/lib/time"; @@ -11,10 +12,16 @@ import { questionTypes } from "@/app/lib/questions"; interface OpenTextSummaryProps { questionSummary: TSurveyQuestionSummary; environmentId: string; + openTextResponsesPerPage: number; } -export default function OpenTextSummary({ questionSummary, environmentId }: OpenTextSummaryProps) { +export default function OpenTextSummary({ + questionSummary, + environmentId, + openTextResponsesPerPage, +}: OpenTextSummaryProps) { const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type); + const [displayCount, setDisplayCount] = useState(openTextResponsesPerPage); return (
@@ -38,7 +45,7 @@ export default function OpenTextSummary({ questionSummary, environmentId }: Open
Response
Time
- {questionSummary.responses.map((response) => { + {questionSummary.responses.slice(0, displayCount).map((response) => { const displayIdentifier = getPersonIdentifier(response.person!); return (
); })} + +
+ {displayCount < questionSummary.responses.length && ( + + )} +
); diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx index 263571fbbb..ef11695acb 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx @@ -27,9 +27,15 @@ interface SummaryListProps { environment: TEnvironment; survey: TSurvey; responses: TResponse[]; + openTextResponsesPerPage: number; } -export default function SummaryList({ environment, survey, responses }: SummaryListProps) { +export default function SummaryList({ + environment, + survey, + responses, + openTextResponsesPerPage, +}: SummaryListProps) { const getSummaryData = (): TSurveyQuestionSummary[] => survey.questions.map((question) => { const questionResponses = responses @@ -66,6 +72,7 @@ export default function SummaryList({ environment, survey, responses }: SummaryL key={questionSummary.question.id} questionSummary={questionSummary as TSurveyQuestionSummary} environmentId={environment.id} + openTextResponsesPerPage={openTextResponsesPerPage} /> ); } diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx index 30fb134693..1bfa760455 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx @@ -28,6 +28,7 @@ interface SummaryPageProps { profile: TProfile; environmentTags: TTag[]; displayCount: number; + openTextResponsesPerPage: number; } const SummaryPage = ({ @@ -40,6 +41,7 @@ const SummaryPage = ({ profile, environmentTags, displayCount, + openTextResponsesPerPage, }: SummaryPageProps) => { const { selectedFilter, dateRange, resetState } = useResponseFilter(); const [showDropOffs, setShowDropOffs] = useState(false); @@ -81,7 +83,12 @@ const SummaryPage = ({ setShowDropOffs={setShowDropOffs} /> {showDropOffs && } - + ); }; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page.tsx index 5d34ad14ac..47c4a54797 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page.tsx @@ -4,7 +4,11 @@ import ResponsesLimitReachedBanner from "@/app/(app)/environments/[environmentId import { getAnalysisData } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/data"; import SummaryPage from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage"; import { authOptions } from "@formbricks/lib/authOptions"; -import { REVALIDATION_INTERVAL, SURVEY_BASE_URL } from "@formbricks/lib/constants"; +import { + OPEN_TEXT_RESPONSES_PER_PAGE, + REVALIDATION_INTERVAL, + SURVEY_BASE_URL, +} from "@formbricks/lib/constants"; import { getEnvironment } from "@formbricks/lib/environment/service"; import { getProductByEnvironmentId } from "@formbricks/lib/product/service"; import { getTagsByEnvironmentId } from "@formbricks/lib/tag/service"; @@ -50,6 +54,7 @@ export default async function Page({ params }) { profile={profile} environmentTags={tags} displayCount={displayCount} + openTextResponsesPerPage={OPEN_TEXT_RESPONSES_PER_PAGE} /> ); diff --git a/packages/lib/constants.ts b/packages/lib/constants.ts index 4aebf3474e..78c4b48e8b 100644 --- a/packages/lib/constants.ts +++ b/packages/lib/constants.ts @@ -61,6 +61,7 @@ export const MAIL_FROM = env.MAIL_FROM; export const NEXTAUTH_SECRET = env.NEXTAUTH_SECRET; export const NEXTAUTH_URL = env.NEXTAUTH_URL; export const ITEMS_PER_PAGE = 50; +export const OPEN_TEXT_RESPONSES_PER_PAGE = 5; // Storage constants export const UPLOADS_DIR = path.resolve("./uploads");