Skip to content

Support multiple choice options in submission export #1340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rudivanhierden merged 1 commit into from
Feb 4, 2026
+175 −9
Merged

Support multiple choice options in submission export #1340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions apps/admin-server/src/components/dialog-export-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import { useState } from 'react';
import { DialogClose } from '@radix-ui/react-dialog';

import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Heading, Paragraph } from '@/components/ui/typography';
import {
Dialog,
DialogContent,
DialogFooter,
} from '@/components/ui/dialog';

export interface ExportSettings {
splitMultipleChoice: boolean;
}

type Props = {
disabled?: boolean;
onExport: (settings: ExportSettings) => void;
};

export function ExportSettingsDialog({ disabled, onExport }: Props) {
const [open, setOpen] = useState<boolean>(false);
const [splitMultipleChoice, setSplitMultipleChoice] = useState<boolean>(false);

const handleExport = () => {
onExport({ splitMultipleChoice });
setOpen(false);
};

return (
<Dialog open={open} modal={true} onOpenChange={setOpen}>
<Button
className="text-xs p-2"
type="button"
disabled={disabled}
onClick={(e) => {
e.preventDefault();
setOpen(true);
}}
>
Exporteer inzendingen
</Button>
<DialogContent
onEscapeKeyDown={(e: KeyboardEvent) => {
e.stopPropagation();
}}
onInteractOutside={(e: Event) => {
e.stopPropagation();
setOpen(false);
}}
>
<div>
<Heading size="lg">Export instellingen</Heading>
<Paragraph className="mb-6">
Pas de export instellingen aan voordat je de inzendingen downloadt.
</Paragraph>

<div className="flex items-center space-x-3 mb-8">
<Checkbox
id="splitMultipleChoice"
checked={splitMultipleChoice}
onCheckedChange={(checked) =>
setSplitMultipleChoice(checked === true)
}
/>
<label
htmlFor="splitMultipleChoice"
className="text-sm font-medium leading-none cursor-pointer"
>
Meerkeuzevragen in aparte kolommen (Ja/Nee per optie)
</label>
</div>

<DialogFooter>
<DialogClose asChild>
<Button
onClick={(e) => {
e.preventDefault();
setOpen(false);
}}
type="button"
variant="ghost"
>
Annuleren
</Button>
</DialogClose>

<Button type="button" onClick={handleExport}>
Exporteren
</Button>
</DialogFooter>
</div>
</DialogContent>
</Dialog>
);
}
21 changes: 21 additions & 0 deletions apps/admin-server/src/lib/export-helpers/normalize-to-array.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
export const normalizeToArray = (value: any): string[] => {
if (!value) return [];

if (Array.isArray(value)) {
return value.map(v => String(v));
}

if (typeof value === 'string') {
try {
const parsed = JSON.parse(value);
if (Array.isArray(parsed)) {
return parsed.map(v => String(v));
}
} catch {
return [value];
}
return [value];
}

return [String(value)];
};
52 changes: 51 additions & 1 deletion apps/admin-server/src/lib/export-helpers/submissions-export.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import * as XLSX from "xlsx";
import { fetchMatrixData } from "./fetch-matrix-data";
import { normalizeToArray } from "./normalize-to-array";
import { stripHtmlTags } from "@openstad-headless/lib/strip-html-tags";

export const exportSubmissionsToCSV = (data: any, widgetName: string, selectedWidget: any) => {
export interface ExportSettings {
splitMultipleChoice: boolean;
}

export const exportSubmissionsToCSV = (
data: any,
widgetName: string,
selectedWidget: any,
settings?: ExportSettings
) => {
function transformString() {
widgetName = widgetName.replace(/\s+/g, '-').toLowerCase();
widgetName = widgetName.replace(/[^a-z0-9-]/g, '');
Expand Down Expand Up @@ -57,6 +67,7 @@ export const exportSubmissionsToCSV = (data: any, widgetName: string, selectedWi
};

const fieldKeyToTitleMap = new Map();
const multipleChoiceOptionsMap = new Map<string, { title: string; options: string[] }>();

if (selectedWidget?.config?.items?.length > 0) {
selectedWidget.config.items.forEach((item: any) => {
Expand All @@ -72,6 +83,31 @@ export const exportSubmissionsToCSV = (data: any, widgetName: string, selectedWi
fieldKeyToTitleMap.set(item.fieldKey || title, title);
}

if (
settings?.splitMultipleChoice &&
(item.questionType === 'multiplechoice' || item.questionType === 'multiple') &&
item.options &&
Array.isArray(item.options)
) {
const optionLabels: string[] = [];
item.options.forEach((option: any) => {
const optionTitle = option.titles?.[0]?.key ||
option.titles?.[0]?.title ||
option.value ||
option.label ||
'';
if (optionTitle) {
optionLabels.push(optionTitle);
}
});
if (optionLabels.length > 0) {
multipleChoiceOptionsMap.set(item.fieldKey, {
title: stripHtmlTags(title),
options: optionLabels,
});
}
}

if (item.options && Array.isArray(item.options)) {
item.options.forEach((option: any, index: number) => {
const titles = option.titles;
Expand Down Expand Up @@ -147,6 +183,20 @@ export const exportSubmissionsToCSV = (data: any, widgetName: string, selectedWi
return;
}

if (multipleChoiceOptionsMap.has(key)) {
const mcConfig = multipleChoiceOptionsMap.get(key)!;
const selectedValues = normalizeToArray(rawValue);

mcConfig.options.forEach((optionLabel) => {
const columnHeader = `${mcConfig.title}: ${stripHtmlTags(optionLabel)}`;
const isSelected = selectedValues.some(
(val) => val.toLowerCase() === optionLabel.toLowerCase()
);
rowData[columnHeader] = isSelected ? 'Ja' : 'Nee';
});
return;
}

const baseKey = title;
let keyHeader = keyCount[baseKey]
? `${baseKey} (${keyCount[baseKey]++})`
Expand Down
14 changes: 6 additions & 8 deletions apps/admin-server/src/pages/projects/[project]/submissions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { PageLayout } from '../../../../components/ui/page-layout';
import { Button } from '../../../../components/ui/button';
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { ListHeading, Paragraph } from '@/components/ui/typography';
import { RemoveResourceDialog } from '@/components/dialog-resource-remove';
import { ExportSettingsDialog, ExportSettings } from '@/components/dialog-export-settings';
import { toast } from 'react-hot-toast';
import { sortTable, searchTable } from '@/components/ui/sortTable';
import useSubmissions from "@/hooks/use-submission";
Expand Down Expand Up @@ -106,14 +106,12 @@ export default function ProjectSubmissions() {
</SelectContent>
</Select>

<Button
className="text-xs p-2"
type="submit"
onClick={() => exportSubmissionsToCSV(filterData, activeWidget, selectedWidget)}
<ExportSettingsDialog
disabled={activeWidget === "0"}
>
Exporteer inzendingen
</Button>
onExport={(settings: ExportSettings) =>
exportSubmissionsToCSV(filterData, activeWidget, selectedWidget, settings)
}
/>
</div>
}>
<div className="container py-6">
Expand Down
Loading