Update survey setup

src/helpers/initPredefinedValueSet.ts

@@ -69,7 +69,7 @@ export const initPredefinedValueSet = [
         name: 'urn:oid:9523',
         title: 'Yes / No / Unsure',
         status: 'draft',
-        publisher: 'Stanford Biodesign Digital Health',
+        publisher: '',
         compose: {
             include: [
                 {

src/store/treeStore/treeStore.tsx

@@ -187,7 +187,7 @@ export const initialState: TreeState = {
         language: INITIAL_LANGUAGE.code,
         name: '',
         status: 'draft',
-        publisher: 'Stanford Biodesign Digital Health',
+        publisher: '',
         meta: {
             profile: ['http://spezi.health/fhir/StructureDefinition/sdf-Questionnaire'],
             tag: [
@@ -216,7 +216,7 @@ export const initialState: TreeState = {
         ],
         contact: [
             {
-                name: 'http://spezi.health',
+                name: '',
             },
         ],
         subjectType: ['Patient'],

src/views/FormBuilder.tsx

@@ -42,7 +42,7 @@ const FormBuilder = (props: FormBuilderProps): JSX.Element => {
                 title={state.qMetadata.title}
             />
             <div className="editor">
-                { state.qMetadata.url && state.qMetadata.title ? (
+                { state.qMetadata.title ? (
                 <AnchorMenu
                     dispatch={dispatch}
                     qOrder={state.qOrder}

src/views/SurveySetup.tsx

@@ -1,7 +1,6 @@
 import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TreeContext } from '../store/treeStore/treeStore';
-import { createUrlUUID } from '../helpers/uriHelper';
 import Btn from '../components/Btn/Btn';
 import FormField from '../components/FormField/FormField';
 import { IQuestionnaireMetadataType } from '../types/IQuestionnaireMetadataType';
@@ -12,8 +11,10 @@ const SurveySetup = () => {
 
     const { t } = useTranslation();
     const { state, dispatch } = useContext(TreeContext);
-    const [title, setTitle] = useState(state.qMetadata.title || 'Untitled')
-    const [url, setURL] = useState(state.qMetadata.url || createUrlUUID());
+    const [title, setTitle] = useState(state.qMetadata.title || 'New Survey')
+    const [isTitleEdited, setIsTitleEdited] = useState(false);
+    const [validationMessage, setValidationMessage] = useState('');
+
 
     const updateMeta = (
         propName: IQuestionnaireMetadataType,
@@ -22,39 +23,42 @@ const SurveySetup = () => {
         dispatch(updateQuestionnaireMetadataAction(propName, value));
     };
 
+    const handleFocus = () => {
+        if (!isTitleEdited) {
+            setTitle("");
+            setIsTitleEdited(true);
+        }
+    }
+
+    const handleSubmit = () => {
+        if (title.trim() !== '') {
+            updateMeta(IQuestionnaireMetadataType.title, title);
+        } else {
+            setValidationMessage(t('Title cannot be empty.'));
+            setTitle('');
+        }
+    };
+
     return (
         <div className="metadata-message-container">
             <p className="metadata-message-header">
-                New Survey Setup
+                Create a New Survey
             </p>
             <div className="metadata-input">
-                <p>Enter a title and a unique URL to identify your survey. It's OK if the URL isn't a real address on the web.
-                    <br /><br />
-                    These values can be changed later on by clicking <strong>Edit Metadata</strong> in the toolbar.</p>
-                <FormField label={'Title'}>
+                <FormField label={'Enter a title for your survey'}>
                     <input
                         style={{ color: 'black' }}
-                        defaultValue={title}
-                        placeholder={t('A title that will be shown to users')}
+                        value={title}
+                        onFocus={handleFocus}
                         onChange={(e) => setTitle(e.target.value)}
                     />
+                    {validationMessage && (
+                        <p className="msg-error">{validationMessage}</p>
+                    )}
                 </FormField>
-                <FormField label={'Unique URL'}>
-                    <input
-                        style={{ color: 'black' }}
-                        defaultValue={url}
-                        placeholder={t('Unique URL')}
-                        onChange={(e) => setURL(e.target.value)}
-                        pattern="[Hh][Tt][Tt][Pp][Ss]?:\/\/(?:(?:[a-zA-Z\u00a1-\uffff0-9]+-?)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]+-?)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))(?::\d{2,5})?(?:\/[^\s]*)?"
-                    />
-                </FormField>
-                <br />
                 <Btn
-                    onClick={() => {
-                        updateMeta(IQuestionnaireMetadataType.url, url);
-                        updateMeta(IQuestionnaireMetadataType.title, title)
-                    }}
-                    title={t('Save and Continue')}
+                    onClick={handleSubmit}
+                    title={t('Continue')}
                     variant="primary"
                 />
             </div>