From 799d649e255c0e3510728d4b6014b9c41706fa96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Tue, 3 Sep 2024 07:59:52 +0200
Subject: [PATCH 1/4] fix: added styles/classes support for ending and submit
 also.

---
 .../core/src/components/ending/Ending.tsx     | 20 +++++++++-------
 .../slide-renderer/SlideRenderer.tsx          |  1 +
 .../core/src/components/submit/Submit.tsx     | 24 ++++++++++++-------
 packages/core/src/state/QuickformState.ts     |  2 +-
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/core/src/components/ending/Ending.tsx b/packages/core/src/components/ending/Ending.tsx
index 18be207..f0d1dac 100644
--- a/packages/core/src/components/ending/Ending.tsx
+++ b/packages/core/src/components/ending/Ending.tsx
@@ -5,24 +5,28 @@ import { ErrorIcon, Checkmark } from "../icons/index";
 import { useQuickForm } from "../../state/QuickFormContext";
 import { EndingModel } from "../../model";
 import { quickformtokens } from "../../style/quickFormTokensDefinition";
+import { makeStyles, mergeClasses } from "@griffel/react";
 
 type EndingProps = {
     model: EndingModel;
 }
-
-const endingStyles: React.CSSProperties = {
-    display: 'flex',
-    justifyContent: 'center',
-    flexDirection: 'column'
-}
+ 
+const useEndingStyles = makeStyles({
+    ending: {
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        width:"100%",
+    }
+});
 
 export const Ending: React.FC<EndingProps> = ({ model }) => {
     const { state } = useQuickForm();
     const { text, paragraph } = model;
     const submitStatus = state.submitStatus;
-
+    const styles = useEndingStyles();
     return (
-        <div style={endingStyles}>
+        <div className={mergeClasses(styles.ending, state.classes.ending)}>
             {submitStatus.isSubmitError &&
                 <>
                     <ErrorIcon color={quickformtokens.onSurface} />
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index be77dbd..9a03fa2 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -8,6 +8,7 @@ import { mergeClasses } from '@griffel/react';
 import { IconResolver } from '../../icons/IconResolver';
 import { SlideModel } from '../../../model';
 
+
 export const SlideRenderer: React.FC = () => {
 
     const { state, goToNextSlide } = useQuickForm();
diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 2fbeffd..ba86312 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -4,20 +4,33 @@ import { useQuickForm } from "../../state/QuickFormContext";
 import { Heading, Paragraph, Button, Spinner, Question } from "../index";
 import { SubmitActionHandler } from "../../state/action-handlers/SubmitActionHandler";
 import { useHandleEnterKeypress } from "../../hooks";
+import { makeStyles, mergeClasses } from "@griffel/react";
 
 type SubmitProps = {
     model: SubmitModel;
 }
 
+const useSubmitStyles = makeStyles({
+    submit: {
+        display: 'flex',
+        flexDirection: 'column',
+        maxWidth: '72rem',
+        transition: 'transform 0.3s ease-out',
+        width: '100%',
+    }
+});
+
 export const Submit: React.FC<SubmitProps> = ({ model }) => {
     const { state, dispatch, onSubmitAsync } = useQuickForm();
     const { text, paragraph, buttonText, submitFields = [] } = model;
 
+    const styles = useSubmitStyles();
+
     if (state.submitStatus.isSubmitting) {
         return <Spinner speed="medium" message="Submitting.. Please wait.." />
     }
 
-
+  
 
     const handleSubmit = async () => {
         dispatch({ type: "SET_SUBMIT_STATUS", status: { ...state.submitStatus, isSubmitting: true } });
@@ -33,7 +46,7 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
     useHandleEnterKeypress(false, handleSubmit);
 
     return (
-        <div style={submitStyling}>
+        <div className={mergeClasses(styles.submit, state.classes.submit)}>
             <Heading >
                 {text}
             </Heading>
@@ -72,9 +85,4 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
     )
 };
 
-const submitStyling: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    maxWidth: '72rem',
-    transition: 'transform 0.3s ease-out',
-}
\ No newline at end of file
+ 
\ No newline at end of file
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index 619f2d1..31564aa 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -3,7 +3,7 @@ import { SlideModel } from "../model/SlideModel";
 import { LayoutDefinition, QuickFormModel } from "../model";
 import { IconType } from "../components/icons/IconResolver";
 
-export type QuickformClassNames = { slide: string, slideIsIn: string, slideIsOut: string };
+export type QuickformClassNames = { slide: string, slideIsIn: string, slideIsOut: string, submit:string, ending:string };
 export type QuickformState = {
     autoAdvanceSlides?: boolean;
     enableQuestionNumbers?: boolean;

From 2c950e0930af3b0063b88dd2524e3b5ca117da63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 4 Sep 2024 10:53:37 +0200
Subject: [PATCH 2/4] fix: added option to generate slide with all questions

---
 .../core/src/components/button/Button.tsx     |  1 +
 .../slide-renderer/SlideRenderer.tsx          |  4 ++--
 .../core/src/components/submit/Submit.tsx     |  2 ++
 .../core/src/model/json-definitions/Layout.ts |  6 +++++
 .../defaults/DefaultModelTransformer.ts       | 24 ++++++++++++-------
 5 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/components/button/Button.tsx b/packages/core/src/components/button/Button.tsx
index f886565..7aa31cd 100644
--- a/packages/core/src/components/button/Button.tsx
+++ b/packages/core/src/components/button/Button.tsx
@@ -17,6 +17,7 @@ const useButtonStyles = makeStyles({
     container: {
         display: 'flex',
         alignItems: 'center',
+        justifyContent:'center',
         ...shorthands.gap(quickformtokens.gap1),
         marginTop: '30px',
     },
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 9a03fa2..388a961 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -8,7 +8,7 @@ import { mergeClasses } from '@griffel/react';
 import { IconResolver } from '../../icons/IconResolver';
 import { SlideModel } from '../../../model';
 
-
+ 
 export const SlideRenderer: React.FC = () => {
 
     const { state, goToNextSlide } = useQuickForm();
@@ -47,7 +47,7 @@ export const SlideRenderer: React.FC = () => {
         >
             <Slide model={currentSlide} />
             <Button
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'start' }}
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                 onClick={goToNextSlide}
                 showPressEnter={showPressEnter}
                 children={
diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index ba86312..6b08863 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { SubmitModel } from "../../model";
 import { useQuickForm } from "../../state/QuickFormContext";
diff --git a/packages/core/src/model/json-definitions/Layout.ts b/packages/core/src/model/json-definitions/Layout.ts
index f364b78..2e5b2be 100644
--- a/packages/core/src/model/json-definitions/Layout.ts
+++ b/packages/core/src/model/json-definitions/Layout.ts
@@ -27,6 +27,12 @@ export type LayoutDefinition = {
      */
     defaultSlideButtonIcon?: IconType;
     slides?: { [key: string]: SlideLayout };
+
+    /**
+     * If enabled, only one question is shown per slide when auto generating slides
+     * Defaults to true
+     */
+    defaultLayoutOneQuestionPerSlide?: boolean;
 }
 
 /**
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index bc70347..259a851 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -110,15 +110,18 @@ function defaultLayout(questions: QuickFormQuestionsDefinition, payload: any, la
     const logger = resolveQuickFormService("logger");
 
     const slides: SlideModel[] = [];
-
-    Object.keys(questions).map((key, index) => [key, index] as [string, number])
-        .sort(([q1, i1], [q2, i2]) => (questions[q1].order ?? i1) - (questions[q2].order ?? i2))
-        .map(([questionKey]) => {
-            let slide: SlideModel = createSlide({ [questionKey]: questions[questionKey] }, payload,layout);
-
-            slides.push(slide);
-        });
-
+    if (layout?.defaultLayoutOneQuestionPerSlide ?? true) {
+        Object.keys(questions).map((key, index) => [key, index] as [string, number])
+            .sort(([q1, i1], [q2, i2]) => (questions[q1].order ?? i1) - (questions[q2].order ?? i2))
+            .map(([questionKey]) => {
+                let slide: SlideModel = createSlide({ [questionKey]: questions[questionKey] }, payload, layout);
+
+                slides.push(slide);
+            });
+        //   console.log(slides);
+    } else {
+        slides.push(createSlide(questions, payload, layout))
+    }
     logger.log("Generated {@slides} from layout", slides);
 
     return slides;
@@ -195,6 +198,9 @@ const transformJSONInput: QuickFormModelTransformer = (definition, payload): Qui
     const logger = resolveQuickFormService("logger");
     logger.log("Transforming Quickform Def to Model with\n\nlayout:\n{@layout}\nquestions:\n{@questions}\nsubmit:\n{@submit}\npayload:\n{@payload}", definition.layout, definition.questions, definition.submit, payload);
 
+
+    
+
     // Transform questions into slides with rows and columns
     if (isDefined(definition.questions)) {
 

From 8539edf69d24d64dc229e65e2930e0614c4e8071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 4 Sep 2024 12:12:37 +0200
Subject: [PATCH 3/4] fix: react hooks issue

---
 packages/core/src/components/submit/Submit.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 6b08863..aa9941e 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -28,10 +28,7 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
 
     const styles = useSubmitStyles();
 
-    if (state.submitStatus.isSubmitting) {
-        return <Spinner speed="medium" message="Submitting.. Please wait.." />
-    }
-
+   
   
 
     const handleSubmit = async () => {
@@ -47,6 +44,11 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
     /* Listens to enter key pressed */
     useHandleEnterKeypress(false, handleSubmit);
 
+    if (state.submitStatus.isSubmitting) {
+        return <Spinner speed="medium" message="Submitting.. Please wait.." />
+    }
+
+
     return (
         <div className={mergeClasses(styles.submit, state.classes.submit)}>
             <Heading >

From 345da8d7429803f9ad349f7e7d5dfdf7e07b6926 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 5 Sep 2024 13:00:49 +0200
Subject: [PATCH 4/4] fix: added displayname

---
 .../Components/Drawers/QuestionTreeItem.tsx   |  6 +++---
 .../Header/QuickFormSettingsViewHeader.tsx    | 21 ++++++++++++-------
 .../designer/src/Types/QuickFormDefinition.ts |  5 ++++-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx b/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx
index b93e62e..f5a596d 100644
--- a/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx
+++ b/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx
@@ -36,7 +36,7 @@ const QuestionTreeItem: React.FC<QuestionTreeItemProps> = ({ setView, setActiveQ
     const styles = useNavDrawerStyles();
     const sortedQuestions = useMemo(() => {
 
-        return Object.entries(quickformpayload.questions ?? {}).map(([key, question], index) => [key, question, index] as [string, QuestionJsonModel, number])
+        return Object.entries(quickformpayload.questions ?? {}).map(([key, question], index) => [key, question, index] as [string, typeof question, number])
             .sort(([_, qa, ai], [__, qb, bi]) => (qa.order ?? ai) - (qb.order ?? bi));
 
     }, [quickformpayload])
@@ -119,8 +119,8 @@ const QuestionTreeItem: React.FC<QuestionTreeItemProps> = ({ setView, setActiveQ
                                     icon={<TrashCanIcon />}
                                 />
                             </>
-                        }}>                       
-                        {question.logicalName ? key : question.text}
+                        }}>
+                        {question.displayName ?? question.text}
                     </TreeItemLayout>
                 </TreeItem>
             ))}
diff --git a/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx b/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
index cdb1faf..bf1252d 100644
--- a/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
+++ b/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
@@ -43,21 +43,25 @@ export const QuickFormSettingsViewHeader: React.FC = () => {
     const { view, activeQuestion, activeSlide, quickformpayload: { layout, questions }, updateQuickFormPayload, designerLocale } = useQuickFormDefinition();
 
     const [questionKey, setQuestionKey] = useState(activeQuestion ?? '');
+    const [displayName, setDisplayName] = useState(questions[activeQuestion!]?.displayName ?? questions[activeQuestion!]?.text);
+   
+
+
     useEffect(() => { setQuestionKey(activeQuestion ?? ''); }, [activeQuestion])
 
-    const segments = [designerLocale.Title, view, activeQuestion, activeSlide && layout?.slides?.[activeSlide]?.schemaName].filter(x => !!x) as string[];
+    const segments = [designerLocale.Title, view, questions[activeQuestion!]?.displayName?? activeQuestion, activeSlide && layout?.slides?.[activeSlide]?.schemaName].filter(x => !!x) as string[];
     const handleSubmit: React.MouseEventHandler<HTMLButtonElement> = (ev) => {
 
         if (activeQuestion) {
             updateQuickFormPayload(old => {
 
-                let text = questionKey;
+                let text = displayName;
                 let schemaName = removeNonAlphanumeric(text);
                 let logicalName = schemaName.toLowerCase();
 
-                old.questions[text] = { ...old.questions[activeQuestion], schemaName, logicalName };
-                if (text !== activeQuestion)
-                    delete old.questions[activeQuestion];
+                old.questions[activeQuestion] = { ...old.questions[activeQuestion], schemaName, logicalName, displayName  };
+               // if (text !== activeQuestion)
+               //     delete old.questions[activeQuestion];
 
                 if (!old.__designer)
                     old.__designer = {};
@@ -83,8 +87,11 @@ export const QuickFormSettingsViewHeader: React.FC = () => {
                     <DialogBody>
                         <DialogTitle>Question Settings</DialogTitle>
                         <DialogContent className={dialogstyles.content}>
-                            <Field label="Question Key">
-                                <Input value={questionKey} required type="text" id={"question-schema-name"} onChange={(e, d) => setQuestionKey(d.value)} />
+                            <Field label="Question Key" aria-readonly>
+                                <Input readOnly value={questionKey} required type="text" id={"question-key"} onChange={(e, d) => setQuestionKey(d.value)} />
+                            </Field>
+                            <Field label="Display Name" aria-readonly>
+                                <Input readOnly value={displayName ?? questions[activeQuestion!]?.text} required type="text" id={"question-display-name"} onChange={(e, d) => setDisplayName(d.value)} />
                             </Field>
                             {activeQuestion &&
                                 <Field label="Question Order">
diff --git a/packages/designer/src/Types/QuickFormDefinition.ts b/packages/designer/src/Types/QuickFormDefinition.ts
index e10ea6d..e5ee107 100644
--- a/packages/designer/src/Types/QuickFormDefinition.ts
+++ b/packages/designer/src/Types/QuickFormDefinition.ts
@@ -14,7 +14,10 @@ export type QuickFormDesignerDefinition = {
             /**
              * If this question has been generated by some tool/framework and be used in designer if ediable.
              */
-            generated?: boolean
+            generated?: boolean;
+
+            schemaName?: string;
+            displayName?: string;
         }
     }
 } & QuickFormDefinition;
\ No newline at end of file