From ced8d75bcc348eda183c53e346e91c24181a053f Mon Sep 17 00:00:00 2001 From: kayela Date: Wed, 4 Feb 2026 10:42:07 -0600 Subject: [PATCH] updated registration screen --- src/pages/admin/AdminRegistrationBuilder.js | 608 +++++++++----------- 1 file changed, 280 insertions(+), 328 deletions(-) diff --git a/src/pages/admin/AdminRegistrationBuilder.js b/src/pages/admin/AdminRegistrationBuilder.js index a119297..5a11d0d 100644 --- a/src/pages/admin/AdminRegistrationBuilder.js +++ b/src/pages/admin/AdminRegistrationBuilder.js @@ -19,12 +19,6 @@ import { DialogTitle, DialogFooter, } from '../../components/ui/dialog'; -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from '../../components/ui/accordion'; import { toast } from 'sonner'; import api from '../../utils/api'; import { @@ -45,13 +39,9 @@ import { AlignLeft, Upload, Lock, - ChevronUp, - ChevronDown, Settings, Zap, - Copy, - X, - Grip + X } from 'lucide-react'; // Field type icons @@ -192,6 +182,7 @@ const AdminRegistrationBuilder = () => { // Get current step const currentStep = sortedSteps.find((s) => s.id === selectedStep); + const currentStepIndex = sortedSteps.findIndex((s) => s.id === selectedStep); // Get sections for current step const sortedSections = currentStep?.sections?.sort((a, b) => a.order - b.order) || []; @@ -335,13 +326,13 @@ const AdminRegistrationBuilder = () => { }; // Add field - const handleAddField = () => { - if (!selectedSection) { + const handleAddField = (sectionId = selectedSection) => { + if (!sectionId) { toast.error('Please select a section first'); return; } - const section = currentStep?.sections?.find((s) => s.id === selectedSection); + const section = currentStep?.sections?.find((s) => s.id === sectionId); const fieldCount = section?.fields?.length || 0; const newField = { @@ -364,7 +355,7 @@ const AdminRegistrationBuilder = () => { ? { ...s, sections: s.sections.map((sec) => - sec.id === selectedSection + sec.id === sectionId ? { ...sec, fields: [...(sec.fields || []), newField] } : sec ), @@ -373,13 +364,14 @@ const AdminRegistrationBuilder = () => { ), })); + setSelectedSection(sectionId); setSelectedField(newField.id); setAddFieldDialogOpen(false); }; // Delete field - const handleDeleteField = (fieldId) => { - const section = currentStep?.sections?.find((s) => s.id === selectedSection); + const handleDeleteField = (sectionId, fieldId) => { + const section = currentStep?.sections?.find((s) => s.id === sectionId); const field = section?.fields?.find((f) => f.id === fieldId); if (field?.is_fixed) { @@ -398,7 +390,7 @@ const AdminRegistrationBuilder = () => { ? { ...s, sections: s.sections.map((sec) => - sec.id === selectedSection + sec.id === sectionId ? { ...sec, fields: sec.fields @@ -418,7 +410,7 @@ const AdminRegistrationBuilder = () => { }; // Update field - const handleUpdateField = (fieldId, updates) => { + const handleUpdateField = (sectionId, fieldId, updates) => { updateSchema((prev) => ({ ...prev, steps: prev.steps.map((s) => @@ -426,7 +418,7 @@ const AdminRegistrationBuilder = () => { ? { ...s, sections: s.sections.map((sec) => - sec.id === selectedSection + sec.id === sectionId ? { ...sec, fields: sec.fields.map((f) => @@ -441,10 +433,7 @@ const AdminRegistrationBuilder = () => { })); }; - // Get selected field data - const selectedFieldData = currentStep?.sections - ?.find((s) => s.id === selectedSection) - ?.fields?.find((f) => f.id === selectedField); + if (loading) { return ( @@ -493,66 +482,40 @@ const AdminRegistrationBuilder = () => { )} {/* Main Builder Layout */} - {/* Left Sidebar - Steps & Sections */} -
- -
-

Steps

- -
+
+
+ +
+

Steps

+ +
-
- {sortedSteps.map((step, index) => ( -
{ - setSelectedStep(step.id); - setSelectedSection(null); - setSelectedField(null); - }} - > -
-
-
Step: {index + 1}
-
- {/* Mod Buttons */} -
- {/* +
+ {sortedSteps.map((step, index) => ( +
{ + setSelectedStep(step.id); + setSelectedSection(null); + setSelectedField(null); + }} + > +
+
+ Step {index + 1} + {/* {step.title || 'Untitled Step'} */} +
*/} - -
-
- ))} -
+ ))} - {/* Sections for selected step */} - {currentStep && ( - <> -
-

Sections

- -
+ {sortedSteps.length === 0 && ( +
+ No steps yet. Click "Add Step" to get started. +
+ )} +
-
- {sortedSections.map((section) => { - const sortedFields = section.fields?.sort((a, b) => a.order - b.order) || []; + {/* Sections for selected step */} + {currentStep && ( +
+
+
+

+ Step {currentStepIndex + 1}: {currentStep?.title || 'Untitled Step'} +

+ {currentStep.description && ( +

{currentStep.description}

+ )} +
+ +
- return (
{ - setSelectedSection(section.id); - setSelectedField(null); - }} - > -
-
- {section.title} - {section.description && ( -

{section.description}

- )} -
+
+ {sortedSections.map((section) => { + const sortedFields = section.fields?.sort((a, b) => a.order - b.order) || []; - -
-
-
- -
test
- - -
- {/* Fields */} -
-

title

- -

{section.description}

- +
+
+

{section.title || 'Untitled Section'}

+ {section.description && ( +

{section.description}

+ )} +
+ +
{/* Fields */} -
+
{sortedFields.map((field) => { const IconComponent = FIELD_TYPE_ICONS[field.type] || Type; + const options = field.options || []; return (
{
+ {selectedField === field.id && ( +
+
+ +
+ {field.id} +
+
+
+ + handleUpdateField(section.id, field.id, { label: e.target.value })} + disabled={field.is_fixed} + /> +
+
+ + +
+
+ + handleUpdateField(section.id, field.id, { required: checked }) + } + disabled={field.is_fixed} + /> + +
+
+ + +
+ + {['text', 'email', 'phone', 'textarea'].includes(field.type) && ( +
+ + + handleUpdateField(section.id, field.id, { placeholder: e.target.value }) + } + /> +
+ )} + + {['dropdown', 'radio', 'multiselect'].includes(field.type) && ( +
+ +
+ {options.map((option, idx) => ( +
+ { + const newOptions = [...options]; + newOptions[idx] = { + ...newOptions[idx], + label: e.target.value, + value: e.target.value.toLowerCase().replace(/\s+/g, '_'), + }; + handleUpdateField(section.id, field.id, { options: newOptions }); + }} + placeholder="Option label" + /> + +
+ ))} + +
+
+ )} + +
+ + + handleUpdateField(section.id, field.id, { mapping: e.target.value }) + } + placeholder="Leave empty for custom data" + disabled={field.is_fixed} + /> +

+ Maps to User model field. Empty = stored in custom_registration_data +

+
+ + {field.is_fixed && ( +
+ This is a fixed field and cannot be removed or have its core properties changed. +
+ )} +
+ )}
); })} - {sortedFields.length === 0 && ( -
+
No fields in this section. Click "Add Field" to add one.
)}
+ +
+ ); + })} + + {sortedSections.length === 0 && ( +
+ No sections yet. Click "Add Section" to get started.
-
) - } - )} -
- - )} - -
-
- - {/* Right Sidebar - Field Properties */} -
- -

Edit Options

- - {selectedFieldData ? ( -
- {/* Field ID */} -
- -
- {selectedFieldData.id} -
+ )}
- - {/* Label */} -
- - handleUpdateField(selectedField, { label: e.target.value })} - disabled={selectedFieldData.is_fixed} - /> -
- - {/* Type */} -
- - -
- - {/* Required */} -
- - handleUpdateField(selectedField, { required: checked }) - } - disabled={selectedFieldData.is_fixed} - /> - -
- - {/* Width */} -
- - -
- - {/* Placeholder */} - {['text', 'email', 'phone', 'textarea'].includes(selectedFieldData.type) && ( -
- - - handleUpdateField(selectedField, { placeholder: e.target.value }) - } - /> -
- )} - - {/* Options for dropdown/radio/multiselect */} - {['dropdown', 'radio', 'multiselect'].includes(selectedFieldData.type) && ( -
- -
- {(selectedFieldData.options || []).map((option, idx) => ( -
- { - const newOptions = [...selectedFieldData.options]; - newOptions[idx] = { - ...newOptions[idx], - label: e.target.value, - value: e.target.value.toLowerCase().replace(/\s+/g, '_'), - }; - handleUpdateField(selectedField, { options: newOptions }); - }} - placeholder="Option label" - /> - -
- ))} - -
-
- )} - - {/* Mapping */} -
- - - handleUpdateField(selectedField, { mapping: e.target.value }) - } - placeholder="Leave empty for custom data" - disabled={selectedFieldData.is_fixed} - /> -

- Maps to User model field. Empty = stored in custom_registration_data -

-
- - {selectedFieldData.is_fixed && ( -
- This is a fixed field and cannot be removed or have its core properties changed. -
- )} -
- ) : ( -
- Select a field to edit its properties
)} - {/* Conditional Rules */} - +
+ +
+
@@ -897,6 +848,7 @@ const AdminRegistrationBuilder = () => {
{/* Add Step Dialog */} +