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] 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