Merge branch 'vnext' of https://github.com/EAVFW/QuickForm into vnext

EAVFW · Sep 6, 2024 · 0b28486 · 0b28486
2 parents 2d93d6f + 345da8d
commit 0b28486
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 41 deletions.
diff --git 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/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
@@ -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();
@@ -46,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
@@ -1,23 +1,35 @@
+"use client";
+
 import React from "react";
 import { SubmitModel } from "../../model";
 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;
 
-    if (state.submitStatus.isSubmitting) {
-        return <Spinner speed="medium" message="Submitting.. Please wait.." />
-    }
-
+    const styles = useSubmitStyles();
 
+
+
 
     const handleSubmit = async () => {
         dispatch({ type: "SET_SUBMIT_STATUS", status: { ...state.submitStatus, isSubmitting: true } });
@@ -32,8 +44,13 @@ 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 style={submitStyling}>
+        <div className={mergeClasses(styles.submit, state.classes.submit)}>
             <Heading >
                 {text}
             </Heading>
@@ -72,9 +89,4 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
     )
 };
 
-const submitStyling: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    maxWidth: '72rem',
-    transition: 'transform 0.3s ease-out',
-}
+
diff --git 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
@@ -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)) {
 

diff --git 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;

diff --git 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
@@ -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
@@ -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;